/* v27 (audit perf, P6) : css/scenes.css est liée par chaque page, juste avant cette feuille (plus d'@import). */
/* WIZIYO, pièces de contenu et démonstrations.
   Une pièce (méthode, agence, journal) se lit de deux façons, avec le même balisage :
   - dans le site immersif (sélecteurs .piece) : sa page défile par-dessus la scène, qui reste visible ; le texte est posé
     sur le décor, qui se retire à demi pendant la lecture (attribut data-voile) et revient en tête et en fin de page ;
   - ouverte seule (sélecteurs html.page) : un document ordinaire, sans 3D, complet et lisible.
   Les couleurs viennent de l'ambiance de la page (variables de css/pages.css : --texte, --doux, --filet, --eau). */

::selection { background: #3f7cf0; color: #fff; }

/* ---------- Parcours : jauge du bouton central, repère des six sections ---------- */
.jauge { position: absolute; left: 50%; top: 50%; width: 136%; height: 136%; overflow: visible; transform: translate(-50%, -50%) rotate(-90deg); pointer-events: none; }
.jauge circle { fill: none; stroke: #3f7cf0; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--jauge, 0)); }
/* Jauge vide : son bout arrondi laissait un point bleu au-dessus du bouton. */
.suivant:not(.pousse) .jauge circle { stroke-opacity: 0; }
.suivant.pousse .rond { transform: scale(1.1); }
.suivant { color: var(--texte-barre, var(--encre)); }
/* Dans une section qui défile, le bouton ne paraît qu'au bout : là où continuer mène à la suite. */
/* v21 (A2) : « Démarrer un projet » reste là dans toutes les sections, sauf le contact (arbitrage de l'audit final). */
body:is([data-vue="portfolio"], [data-genre="piece"]) .copie { opacity: 0; visibility: hidden; }
/* v23 : dans la Méthode, le fil des étapes tient le bas à gauche : « Démarrer un projet » passe à droite. */
body[data-vue="methode"] #demarrer { position: absolute; right: 1.95rem; }
body:is([data-vue="portfolio"], [data-genre="piece"]) .suivant { opacity: 0; visibility: hidden; }
body:is([data-vue="portfolio"], [data-genre="piece"]).au-bout .suivant { opacity: 1; visibility: visible; }
body[data-vue="agence"] .bas .rond { background: var(--blanc); color: var(--encre); }

.repere { position: fixed; right: 1.05rem; top: 50%; z-index: 30; transform: translateY(-50%); color: var(--texte-barre, var(--encre)); transition: opacity .5s ease, color .5s ease; }
html:not(.entre) .repere, .menu-ouvert .repere, body[data-vue="page"] .repere { opacity: 0; pointer-events: none; }
.repere ol { display: grid; justify-items: end; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.repere a { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: .55rem; height: 1.15rem; padding-right: 1.5rem; font-size: max(.72rem, 10.5px); line-height: 1; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; white-space: nowrap; color: transparent; transition: color .3s ease; }
.repere a span { font-variant-numeric: tabular-nums; opacity: .6; }
.repere a::after { content: ''; position: absolute; right: 0; top: 50%; width: .7rem; height: 1.5px; background: var(--texte-barre, var(--encre)); opacity: .45; transform-origin: 100% 50%; transition: transform .5s var(--courbe), opacity .3s ease; }
.repere a:is(:hover, :focus-visible), .repere a[aria-current] { color: inherit; }
.repere a[aria-current]::after { opacity: 1; transform: scaleX(1.9); }
.repere a:hover::after { opacity: 1; }

.feuillet-fermer { position: absolute; right: 2.5rem; top: 6.1rem; z-index: 3; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s, transform .5s var(--courbe); }
.feuillet.pret .feuillet-fermer { opacity: 1; visibility: visible; transition: opacity .4s ease .3s, transform .5s var(--courbe); }

/* La barre, dans une pièce : son encre suit l'ambiance ; dès qu'on lit, un fond la sépare du texte qui passe dessous. */
body[data-genre="piece"] .barre { color: var(--texte-barre, var(--encre)); }
body[data-genre="piece"] .barre::before { content: ''; position: absolute; inset: 0 0 -2.4rem; z-index: -1; background-color: var(--fond-barre, transparent); -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); opacity: 0; transition: opacity .5s ease, background-color .6s ease; pointer-events: none; }
body[data-genre="piece"].lit .barre::before { opacity: .94; }
body[data-genre="piece"] .rond.clair { box-shadow: 0 0 0 1px rgba(19, 26, 46, .08); }

/* ---------- Tête d'une pièce ---------- */
.invite { display: flex; align-items: center; gap: .8rem; margin: 1.5rem 0 0; font-size: max(.92rem, 13px); }
.invite i { width: 2.6rem; height: 1px; background: currentColor; transform-origin: 0 50%; animation: pc-invite 2.6s var(--courbe) infinite; }
@keyframes pc-invite { 0% { transform: scaleX(0); opacity: 1; } 55% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
html.page .invite { display: none; }
/* Dans le site immersif, le titre est posé dans la scène (js/titre.js) : celui de la page n'est gardé que pour la lecture d'écran. */
.piece .tete { display: flex; flex-direction: column; justify-content: flex-end; max-width: none; min-height: 100vh; min-height: 100svh; padding: 0 0 8.4rem; }
.piece .tete :is(.surtitre, h1) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.piece .tete .chapeau { max-width: 27em; margin: 0; font-size: min(1.5rem, 5vw); line-height: 1.36; }
/* Dans une pièce, le bouton du centre a son fond : il reste lisible quel que soit le décor derrière lui. */
body[data-genre="piece"] .suivant { padding: .3rem .95rem; border-radius: 99rem; background-color: var(--fond-barre, transparent); }
.piece .pied { display: none; }

/* ---------- Passage : fin d'une pièce, le décor reprend sa place ---------- */
.passage { display: grid; place-items: center; min-height: 100vh; min-height: 100svh; }
.passage a { display: inline-flex; align-items: baseline; flex-wrap: wrap; justify-content: center; gap: .1em .45em; font-size: min(2.6rem, 6.4vw); line-height: 1.1; letter-spacing: -.025em; text-decoration: none; }
/* Sur le décor revenu, l'invitation porte son propre fond, à la teinte du lieu : elle reste lisible devant n'importe quel objet. */
.piece .passage a { font-size: min(2rem, 5.6vw); padding: .5em 1.1em .62em; border-radius: 99rem; background: var(--fond); box-shadow: 0 1.6rem 3.4rem -1.6rem rgba(6, 12, 36, .5); transition: transform .6s var(--courbe); }
.piece .passage a:is(:hover, :focus-visible) { transform: translateY(-.12em); }
.passage .serif { font-size: 1.7em; letter-spacing: -.02em; }
.passage .ico { align-self: center; font-size: .8em; transition: transform .6s var(--courbe); }
/* v21 (R3) : fin de l'Agence, le contact d'abord ; la suite du parcours juste dessous, en plus petit (deux pilules : le
   texte ne pose jamais à nu sur la scène). */
.passage-appel { align-content: center; gap: 1rem; }
.piece .passage .passage-suite { font-size: max(.95rem, 14px); padding: .62em 1.15em .7em; box-shadow: 0 1rem 2.4rem -1.2rem rgba(6, 12, 36, .45); }
html.page .passage-appel { justify-items: start; }
.passage-suite .ico { font-size: .9em; }
.passage a:hover .ico { transform: translateY(.22em); }
html.page .passage { min-height: 0; padding: 0 0 5rem; place-items: start; }

/* ---------- Méthode : la séquence ---------- */
.etapes { margin: 0; padding: 0; list-style: none; }
.etape-rang { margin: 0; font-size: max(.86rem, 12px); letter-spacing: .05em; font-variant-numeric: tabular-nums; color: var(--doux); }
.etape h2 { margin-top: .5rem; font-size: min(4.2rem, 12vw); line-height: 1; letter-spacing: -.025em; }
.etape-idee { margin: .9rem 0 0; font-size: min(1.28rem, 5vw); line-height: 1.3; text-wrap: balance; }
.etape-faits { margin: 1.5rem 0 0; }
.etape-faits div { padding: .82rem 0; border-top: 1px solid var(--filet); }
.etape-faits dt { font-size: max(.74rem, 11px); letter-spacing: .04em; text-transform: uppercase; color: var(--doux); }
.etape-faits dd { margin: .32rem 0 0; font-size: max(.98rem, 14px); line-height: 1.42; }
.etape-vue { margin: 0; }
.etape-vue img { display: block; width: 100%; height: auto; border-radius: .45rem; background: var(--voile); }
.sequence-exemple { margin: 0; font-size: max(.82rem, 12px); color: var(--doux); }

/* Le fil : cinq points reliés par une ligne d'eau, qui avance avec les étapes. */
.fil ol { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; }
.fil ol::before, .fil ol::after { content: ''; position: absolute; left: .42rem; bottom: .42rem; width: 80%; height: 1px; background: var(--filet); }
.fil ol::after { height: 2px; bottom: calc(.42rem - .5px); background: var(--eau); transform: scaleX(var(--avance, 0)); transform-origin: 0 50%; transition: transform .7s var(--courbe); }
.fil-eau { display: none; }
.fil a { position: relative; display: inline-flex; flex-direction: column-reverse; gap: .62rem; padding-right: 1rem; font-size: max(.94rem, 12.5px); line-height: 1.2; text-decoration: none; color: var(--doux); transition: color .3s; }
.fil a::after { content: ''; position: absolute; inset: -.5rem 0 -.7rem -.4rem; }
.fil i { position: relative; z-index: 1; display: block; width: .84rem; height: .84rem; border: 1.5px solid var(--texte); border-radius: 50%; background: var(--fond); transition: background-color .3s, border-color .3s; }
/* Le point de l'étape en cours prend une queue, comme les gouttes du signe. */
.fil i::after { content: ''; position: absolute; left: 50%; top: 50%; width: .84rem; height: 1.62rem; margin: -.42rem 0 0 -.42rem; border-radius: .42rem; background: var(--eau); transform: rotate(-31.6deg) scaleY(.52); transform-origin: 50% .42rem; opacity: 0; transition: transform .5s var(--courbe), opacity .2s; }
.fil a:is(.passe, [aria-current]) i { background: var(--eau); border-color: var(--eau); }
.fil a[aria-current], .fil a:hover { color: var(--texte); }
.fil a[aria-current] i::after { opacity: 1; transform: rotate(-31.6deg); }

/* Ouverte seule : les cinq étapes l'une sous l'autre, chacune avec son image ; le fil reste sous la barre. */
html.page .sequence { margin-top: min(4rem, 10vw); }
html.page .sequence-cadre { display: flex; flex-direction: column; }
html.page .fil { position: sticky; top: 4.9rem; z-index: 4; order: -1; margin: 0 calc(var(--marge) * -1); padding: 1.1rem var(--marge) 1.75rem; background: linear-gradient(var(--fond) 80%, transparent); }
html.page .sequence-exemple { order: -2; }
html.page .etape { display: grid; grid-template-columns: 6fr 5fr; gap: 2rem 4rem; align-items: center; padding: min(4.6rem, 11vw) 0; border-top: 1px solid var(--filet); scroll-margin-top: 9.6rem; }
html.page .etape:first-child { border-top: 0; }

/* Dans le site immersif : la séquence est épinglée. La scène montre la feuille qui monte ; la page n'affiche que la
   carte de l'étape en cours (attribut data-etape, posé par js/app.js) et le fil. */
.piece .sequence { height: 620vh; margin: 0 calc(var(--marge) * -1); }
.piece .sequence-cadre { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; pointer-events: none; }
.piece .etape-vue { display: none; }
.piece .etape { position: absolute; right: calc(var(--marge) + 1.2rem); top: 50%; width: min(21.5rem, 27vw); padding: 1.7rem 1.9rem 1.25rem; border-radius: .55rem; background: #f5f7fb; box-shadow: 0 2.6rem 5.5rem -2.2rem rgba(29, 47, 99, .5), 0 .2rem .7rem rgba(29, 47, 99, .08); opacity: 0; visibility: hidden; transform: translateY(calc(-50% + 2rem)); transition: opacity .3s ease, transform .5s ease, visibility 0s .3s; pointer-events: auto; }
.piece .etape h2 { font-size: min(3.2rem, 12vw); }
.piece .etape-idee { margin-top: .7rem; font-size: min(1.14rem, 5vw); }
.piece .etape-faits { margin-top: .5rem; }
.piece .etape-faits div:last-child { padding-bottom: .4rem; }
/* La carte ne montre d'abord que le titre et l'idée de l'étape : la feuille garde la place. Un bouton déplie le détail,
   pour toutes les étapes à la fois. Hors du site immersif, le détail est toujours là et le bouton n'existe pas. */
.etape-plus { display: none; }
.piece .etape-plus { display: inline-flex; align-items: center; gap: .6rem; margin: .95rem 0 0 -.1rem; padding: .45rem .1rem; border: 0; background: none; font-size: max(.88rem, 12.5px); line-height: 1.2; color: var(--doux); cursor: pointer; transition: color .3s; }
.piece .etape-plus:hover { color: var(--texte); }
.piece .etape-plus i { position: relative; flex: none; width: 1.5rem; height: 1.5rem; border: 1px solid var(--filet); border-radius: 50%; }
.piece .etape-plus i::before, .piece .etape-plus i::after { content: ''; position: absolute; left: 50%; top: 50%; width: .62rem; height: 1.5px; margin: -.75px 0 0 -.31rem; background: currentColor; transition: transform .4s var(--courbe); }
.piece .etape-plus i::after { transform: rotate(90deg); }
.piece .etape-plus[aria-expanded="true"] i::after { transform: none; }
.piece .sequence:not(.detail) .etape-faits { display: none; }
.piece :is(.sequence[data-etape="0"] .etape:nth-child(1), .sequence[data-etape="1"] .etape:nth-child(2), .sequence[data-etape="2"] .etape:nth-child(3),
  .sequence[data-etape="3"] .etape:nth-child(4), .sequence[data-etape="4"] .etape:nth-child(5)) { opacity: 1; visibility: visible; transform: translateY(-50%); transition: opacity .55s ease .18s, transform 1s var(--courbe) .18s, visibility 0s; }
.piece .fil { position: absolute; left: var(--marge); bottom: 2.3rem; width: min(40rem, 46vw); pointer-events: auto; }
.piece .fil i { background: #eef2f8; }
.piece .sequence-exemple { position: absolute; left: var(--marge); bottom: 6.4rem; }
.sequence[data-etape="1"] .fil { --avance: .25; } .sequence[data-etape="2"] .fil { --avance: .5; } .sequence[data-etape="3"] .fil { --avance: .75; } .sequence[data-etape="4"] .fil { --avance: 1; }
.piece .sequence[data-etape="1"] .fil li:nth-child(-n+1) i, .piece .sequence[data-etape="2"] .fil li:nth-child(-n+2) i, .piece .sequence[data-etape="3"] .fil li:nth-child(-n+3) i, .piece .sequence[data-etape="4"] .fil li:nth-child(-n+4) i { background: var(--eau); border-color: var(--eau); }
.piece .sequence[data-etape="0"] .fil li:nth-child(1) a, .piece .sequence[data-etape="1"] .fil li:nth-child(2) a, .piece .sequence[data-etape="2"] .fil li:nth-child(3) a,
.piece .sequence[data-etape="3"] .fil li:nth-child(4) a, .piece .sequence[data-etape="4"] .fil li:nth-child(5) a { color: var(--texte); }
.piece .sequence[data-etape="0"] .fil li:nth-child(1) i, .piece .sequence[data-etape="1"] .fil li:nth-child(2) i, .piece .sequence[data-etape="2"] .fil li:nth-child(3) i,
.piece .sequence[data-etape="3"] .fil li:nth-child(4) i, .piece .sequence[data-etape="4"] .fil li:nth-child(5) i { background: var(--eau); border-color: var(--eau); }
.piece .sequence[data-etape="0"] .fil li:nth-child(1) i::after, .piece .sequence[data-etape="1"] .fil li:nth-child(2) i::after, .piece .sequence[data-etape="2"] .fil li:nth-child(3) i::after,
.piece .sequence[data-etape="3"] .fil li:nth-child(4) i::after, .piece .sequence[data-etape="4"] .fil li:nth-child(5) i::after { opacity: 1; transform: rotate(-31.6deg); }

/* ---------- Règles (méthode, agence) : une liste typographique, posée sur le décor retiré ---------- */
.tenue, .approche { padding: min(18vh, 10rem) 0 min(12vh, 7rem); }
.tenue > h2, .approche > h2 { max-width: 11em; font-size: min(5.4rem, 12vw); line-height: 1; letter-spacing: -.022em; }
.regles { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0 3.4rem; max-width: 76rem; margin: 3.2rem 0 0; padding: 0; list-style: none; }
.regles li { padding: 1.5rem 0 2.3rem; border-top: 1px solid var(--filet); }
.regles h3 { font-size: min(1.7rem, 6vw); line-height: 1.15; letter-spacing: -.015em; }
.regles p { max-width: 25em; margin: .7rem 0 0; color: var(--doux); }
.franchise { max-width: 41em; margin: 2.6rem 0 0; font-size: min(1.24rem, 4.8vw); line-height: 1.46; text-wrap: pretty; }

/* ---------- Agence : cinq familles de services, chacune avec sa démonstration ---------- */
.familles { padding: min(12vh, 7rem) 0 min(6vh, 3rem); }
.familles p { max-width: 30em; margin: 0; font-size: min(1.5rem, 5vw); line-height: 1.36; text-wrap: pretty; }
.familles ol { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.familles a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.3rem; border: 1px solid var(--filet); border-radius: 99rem; font-size: max(1.08rem, 15px); text-decoration: none; transition: background-color .35s, color .35s, border-color .35s; }
.familles a:is(:hover, :focus-visible) { background: var(--plein); border-color: var(--plein); color: var(--sur-plein); }
/* v21 (A4) : les prestations de chaque famille, en quelques mots, dans sa pastille. */
.familles a small { margin-left: .5em; font-size: .84em; opacity: .8; }
.service { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2.4rem min(6rem, 6vw); align-items: center; min-height: 100vh; min-height: 100svh; padding: 14vh 0; scroll-margin-top: 1rem; }
.service.inverse { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.service.inverse .service-texte { order: 2; }
.service h2 { font-size: min(2.5rem, 7vw); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.service h2 em { display: block; padding-bottom: .06em; font-family: var(--serif); font-style: italic; font-size: 2.5em; line-height: .96; letter-spacing: -.025em; }
.service-idee { max-width: 26em; margin: 1.5rem 0 0; font-size: min(1.3rem, 5vw); line-height: 1.38; text-wrap: pretty; }
.prestations { max-width: 31rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.prestations li { padding: .82rem 0; border-top: 1px solid var(--filet); }
.prestations li:last-child { border-bottom: 1px solid var(--filet); }
.service-reserve, .service-renvoi { max-width: 31rem; margin: 1.2rem 0 0; font-size: max(.95rem, 13.5px); line-height: 1.45; color: var(--doux); }
/* v21 (A5) : l'extrait de motion design, lu à la demande dans une fenêtre (le film de présentation de WIZIYO, sans son). */
.service-extrait { margin: 1rem 0 0; }
.extrait-bouton { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.6rem; padding: 0 1.1rem 0 .8rem; border: 1px solid currentColor; border-radius: 99rem; background: none; color: inherit; font: inherit; font-size: max(.98rem, 14px); cursor: pointer; transition: background-color .35s, color .35s; }
.extrait-bouton .ico { font-size: 1.1em; fill: currentColor; }
.extrait-bouton small { font-size: .84em; opacity: .8; }
.extrait-bouton:is(:hover, :focus-visible) { background: var(--plein, #131a2e); color: var(--sur-plein, #f2f6fd); }
/* v29 : « Découvrir le service », vers la page de service de la famille ; même forme que le bouton de l'extrait. */
.service-decouvrir { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.3rem 0 0; }
.decouvrir { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.6rem; padding: 0 1rem 0 1.1rem; border: 1px solid currentColor; border-radius: 99rem; font-size: max(.98rem, 14px); text-decoration: none; transition: background-color .35s, color .35s; }
.decouvrir small { font-size: .84em; opacity: .8; }
.decouvrir .ico { font-size: .95em; }
.decouvrir:is(:hover, :focus-visible) { background: var(--plein, #131a2e); color: var(--sur-plein, #f2f6fd); }
/* (v30 : plusieurs pages dans la famille : le titre une fois, sur sa ligne, puis un bouton par page.) */
.service-decouvrir:has(.decouvrir-titre) { align-items: center; gap: .4rem; }
.decouvrir-titre { margin-right: .3rem; font-size: max(.82rem, 11.5px); letter-spacing: .03em; text-transform: uppercase; opacity: .8; }
.service-decouvrir:has(.decouvrir-titre) .decouvrir { min-height: 2.4rem; padding: 0 .85rem 0 .95rem; }
.extrait { width: min(64rem, 92vw); max-height: 92vh; padding: 1.1rem 1.1rem 1.2rem; border: 0; border-radius: 1.1rem; background: #f2f6fd; color: #131a2e; box-shadow: 0 2.4rem 5rem -1.6rem rgba(6, 12, 36, .6); overflow: visible; }
.extrait::backdrop { background: rgba(13, 22, 48, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.extrait video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: .6rem; background: #dfe8f4; }
.extrait-titre { margin: .1rem 3.2rem .8rem .2rem; font-size: max(1.05rem, 15px); font-weight: 600; }
.extrait-legende { margin: .8rem .2rem 0; font-size: max(.95rem, 13.5px); line-height: 1.45; }
.extrait-fermer { position: absolute; right: .7rem; top: .6rem; }
/* « Mettre en scène » : le décor reste net, le texte tient sur une planche de papier, et le curseur règle la lumière autour d'elle. */
.service.scene-libre { grid-template-columns: minmax(0, 31rem) 1fr; }
.planche { padding: 2.5rem 2.7rem 2.3rem; border-radius: .55rem; background: #f5f7fb; color: #131a2e; box-shadow: 0 2.6rem 5.5rem -2.2rem rgba(6, 12, 36, .6), 0 .2rem .7rem rgba(6, 12, 36, .1);
  --texte: #131a2e; --doux: rgba(19, 26, 46, .68); --filet: rgba(19, 26, 46, .2); --eau: #3f7cf0; --plein: #131a2e; --sur-plein: #fff; }
.planche h2 em { font-size: 2.05em; }
.planche .service-idee { margin-top: 1.1rem; font-size: min(1.18rem, 4.8vw); }
.planche .prestations { margin-top: 1.4rem; }
.planche .prestations li { padding: .62rem 0; }
.piece .scene-fixe, html.page .lumiere { display: none; }
.scene-fixe { margin: 1.8rem 0 0; }
.scene-fixe img { display: block; width: 100%; height: auto; border-radius: .45rem; }
.scene-fixe figcaption { margin-top: .7rem; font-size: max(.86rem, 12.5px); color: var(--doux); }

/* ---------- Démonstrations ---------- */
/* Une démonstration par états : sa scène (décor, cachée aux lecteurs d'écran) change avec l'attribut data-etat ;
   la liste dessous dit chaque temps en clair et sert de commande. Sans script, elle montre son dernier état. */
.demo { --d-encre: #131a2e; --d-doux: rgba(19, 26, 46, .62); --d-filet: rgba(19, 26, 46, .14); --d-eau: #2f66d8; --d-ombre: 0 1.8rem 3.6rem -1.5rem rgba(6, 12, 36, .55), 0 .2rem .6rem rgba(6, 12, 36, .1); min-width: 0; }
.demo-scene { position: relative; color: var(--d-encre); font-size: max(.95rem, 13.5px); line-height: 1.3; }
.demo-scene p { margin: 0; }
.demo-pas { display: grid; margin: 1.9rem 0 0; padding: 0; list-style: none; counter-reset: pas; }
.demo-pas li { counter-increment: pas; }
.demo-pas button { display: flex; align-items: baseline; gap: .85rem; width: 100%; min-height: 2.5rem; padding: .42rem 0; border: 0; background: none; font-size: max(1rem, 14.5px); line-height: 1.35; text-align: left; color: var(--doux); cursor: pointer; transition: color .3s ease; }
.demo-pas button::before { content: counter(pas); flex: none; display: grid; place-content: center; width: 1.55rem; height: 1.55rem; border: 1px solid currentColor; border-radius: 50%; font-size: .74em; font-variant-numeric: tabular-nums; transform: translateY(-.08em); transition: background-color .3s, border-color .3s, color .3s; }
.demo-pas button:hover { color: var(--texte); }
.demo[data-etat="0"] .demo-pas li:nth-child(1) button, .demo[data-etat="1"] .demo-pas li:nth-child(2) button, .demo[data-etat="2"] .demo-pas li:nth-child(3) button,
.demo[data-etat="3"] .demo-pas li:nth-child(4) button, .demo[data-etat="4"] .demo-pas li:nth-child(5) button { color: var(--texte); }
.demo[data-etat="0"] .demo-pas li:nth-child(1) button::before, .demo[data-etat="1"] .demo-pas li:nth-child(2) button::before, .demo[data-etat="2"] .demo-pas li:nth-child(3) button::before,
.demo[data-etat="3"] .demo-pas li:nth-child(4) button::before, .demo[data-etat="4"] .demo-pas li:nth-child(5) button::before { background: var(--d-eau); border-color: var(--d-eau); color: #fff; }
.demo-note { margin: 1rem 0 0; font-size: max(.86rem, 12.5px); line-height: 1.45; color: var(--doux); }

/* Réservation : l'écran du client et l'agenda de l'établissement, à deux profondeurs ; une goutte porte la réservation de l'un à l'autre. */
.reservation { display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 1.2rem 0 2rem; }
.rv-client, .rv-agenda { position: relative; padding: 1.4rem 1.5rem 1.5rem; border-radius: .9rem; background: #fff; box-shadow: var(--d-ombre); transition: transform 1s var(--courbe), filter .7s ease, opacity .7s ease; }
.rv-client { z-index: 2; transform: translate(9%, -5%); }
.rv-agenda { z-index: 1; transform: translate(-7%, 10%) scale(.93); filter: blur(1.4px); opacity: .84; }
.demo[data-etat="2"] .rv-client { transform: translate(9%, -5%) scale(.95); filter: blur(1px); opacity: .9; }
.demo[data-etat="2"] .rv-agenda { z-index: 3; transform: translate(-7%, 10%); filter: none; opacity: 1; }
.rv-titre { font-size: 1.14em; font-weight: 600; }
.rv-sous { margin-top: .2rem; color: var(--d-doux); }
.rv-creneaux { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin: 1rem 0 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
.rv-creneaux li { padding: .55rem 0; border: 1px solid var(--d-filet); border-radius: .5rem; text-align: center; transition: background-color .3s, color .3s, border-color .3s; }
.rv-creneaux .pris { color: rgba(19, 26, 46, .3); text-decoration: line-through; }
.demo[data-etat="0"] .rv-creneaux .choisi { border-color: var(--d-eau); animation: dm-appel 1.7s ease-in-out infinite; }
.demo:not([data-etat="0"]) .rv-creneaux .choisi { background: var(--d-eau); border-color: var(--d-eau); color: #fff; }
@keyframes dm-appel { 50% { box-shadow: 0 0 0 .32rem rgba(63, 124, 240, .18); } }
.rv-bouton { display: block; margin-top: 1rem; padding: .72rem 0; border-radius: 99rem; background: var(--d-encre); color: #fff; text-align: center; transition: opacity .3s ease, transform .5s var(--courbe); }
.demo:not([data-etat="0"]) .rv-bouton { opacity: 0; transform: scale(.96); }
.rv-ok { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.5rem; display: flex; align-items: center; gap: .6rem; padding: .72rem 1rem; border-radius: 99rem; background: #e7efff; color: #1d2f63; opacity: 0; transform: translateY(.5rem); transition: opacity .4s ease .12s, transform .7s var(--courbe) .12s; }
.rv-ok i { flex: none; width: .66rem; height: .66rem; border-radius: 50%; background: var(--d-eau); }
.demo:not([data-etat="0"]) .rv-ok { opacity: 1; transform: none; }
.rv-lien { position: absolute; left: 47%; top: 52%; z-index: 4; }
.rv-lien b { position: absolute; width: .9rem; height: .9rem; margin: -.45rem; border-radius: 50%; background: var(--d-eau); opacity: 0; }
.demo[data-etat="2"] .rv-lien b { animation: dm-porte 1.05s var(--courbe) both; }
@keyframes dm-porte { 0% { opacity: 0; transform: translate(-4.5rem, 2.6rem) scale(.4); } 22% { opacity: 1; transform: translate(-2.6rem, 1.9rem) scale(1); } 78% { opacity: 1; transform: translate(3.4rem, -.6rem) scale(1); } 100% { opacity: 0; transform: translate(5rem, -1rem) scale(.3); } }
.rv-agenda ul { margin: .9rem 0 0; padding: 0; list-style: none; }
.rv-agenda li { display: grid; grid-template-columns: 3.3rem 1fr auto; align-items: center; gap: .4rem; padding: .5rem 0; border-top: 1px solid var(--d-filet); font-variant-numeric: tabular-nums; }
.rv-agenda li b { font-weight: 500; }
.rv-agenda .nouveau { max-height: 0; padding-block: 0; border-top-color: transparent; overflow: hidden; opacity: 0; transition: max-height .8s var(--courbe) .55s, padding .8s var(--courbe) .55s, opacity .5s ease .75s, border-color .3s ease .6s; }
.demo[data-etat="2"] .rv-agenda .nouveau { max-height: 3rem; padding-block: .5rem; border-top-color: var(--d-filet); opacity: 1; }
.rv-agenda em { padding: .12em .62em; border-radius: 99rem; background: #e7efff; color: #1d2f63; font-style: normal; font-size: .8em; }
.rv-total { display: flex; justify-content: space-between; margin-top: .2rem; padding-top: .7rem; border-top: 1px solid var(--d-encre); font-weight: 500; }
.rv-total span { position: relative; width: 1.7em; height: 1.3em; overflow: hidden; font-variant-numeric: tabular-nums; }
.rv-total b { position: absolute; right: 0; font-weight: 500; transition: transform .7s var(--courbe) .85s; }
.rv-total .apres { transform: translateY(115%); }
.demo[data-etat="2"] .rv-total .avant { transform: translateY(-115%); }
.demo[data-etat="2"] .rv-total .apres { transform: none; }

/* Lumière : un curseur, et c'est le décor entier qui répond. */
.lumiere { margin: 1.9rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--filet); }
.lumiere label { display: block; font-weight: 500; }
.lumiere input { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 2.75rem; margin: .2rem 0 0; background: transparent; cursor: ew-resize; }
.lumiere input::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, #c9d7ee, #3f7cf0 55%, #1d2f63); }
.lumiere input::-moz-range-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, #c9d7ee, #3f7cf0 55%, #1d2f63); }
.lumiere input::-webkit-slider-thumb { -webkit-appearance: none; width: 1.5rem; height: 1.5rem; margin-top: calc(-.75rem + 1.5px); border: 3px solid #f5f7fb; border-radius: 50%; background: #131a2e; box-shadow: 0 0 0 1px rgba(19, 26, 46, .3); transition: transform .3s var(--courbe); }
.lumiere input::-moz-range-thumb { width: 1.15rem; height: 1.15rem; border: 3px solid #f5f7fb; border-radius: 50%; background: #131a2e; box-shadow: 0 0 0 1px rgba(19, 26, 46, .3); }
.lumiere input:is(:hover, :active)::-webkit-slider-thumb { transform: scale(1.15); }
.lumiere input:focus-visible { outline: 2px solid var(--eau); outline-offset: 2px; border-radius: 99rem; }
.lumiere-reperes { display: flex; justify-content: space-between; margin: 0; font-size: max(.8rem, 12px); color: var(--doux); }

/* Refonte : la même page avant et après ; la poignée découvre l'une ou l'autre. */
.comparer { display: grid; }
.cp { grid-area: 1 / 1; aspect-ratio: 16 / 10.4; border-radius: .9rem; overflow: hidden; background: #fff; box-shadow: var(--d-ombre); container-type: inline-size; touch-action: pan-y; cursor: ew-resize; }
.cp-page { position: absolute; inset: 0; overflow: hidden; font-size: 2.7cqw; }
.cp-avant { background: #dcdcd6; color: #222; font-family: 'Times New Roman', Times, serif; }
.cpa-bandeau { padding: .55em 0; background: #2f4f8f; color: #ffffe6; font-weight: 700; font-size: 1.05em; letter-spacing: .08em; text-align: center; }
.cpa-liens { padding: .4em .6em; background: #c6c6be; color: #0000d0; font-size: .7em; text-align: center; white-space: nowrap; overflow: hidden; }
.cpa-corps { display: grid; grid-template-columns: 1fr 2.1fr 1fr; gap: .5em; padding: .6em; font-size: .72em; }
.cpa-corps > div { padding: .55em; border: 2px ridge #9a9a94; background: #efefe9; }
.cpa-corps b { display: block; margin-bottom: .55em; font-size: 1.1em; text-decoration: underline; }
.cpa-corps span { display: block; height: .42em; margin: .5em 0; background: #9c9c94; }
.cpa-corps span:nth-of-type(even) { width: 78%; }
.cpa-centre i { display: block; margin-top: .9em; color: #c00000; }
.cp-apres { display: flex; flex-direction: column; padding: 1.3em 1.6em 1.5em 43%; background: #f5f7fb; color: #131a2e; font-family: var(--grot); clip-path: inset(0 0 0 var(--part)); }
.cpn-barre { display: flex; align-items: baseline; gap: 1.2em; font-size: .72em; }
.cpn-barre b { margin-right: auto; font-size: 1.15em; font-weight: 600; }
.cpn-titre { margin-top: auto !important; font-size: 1.95em; line-height: 1; letter-spacing: -.03em; }
.cpn-titre em { display: block; font-family: var(--serif); font-style: italic; letter-spacing: -.02em; }
.cpn-texte { margin-top: .8em !important; font-size: .82em; line-height: 1.35; color: rgba(19, 26, 46, .66); }
.cpn-action { margin-top: 1.1em !important; }
.cpn-action span { display: inline-block; padding: .6em 1.25em; border-radius: 99rem; background: #131a2e; color: #fff; font-size: .78em; }
.cpn-image { position: absolute; left: 0; top: 0; bottom: 0; width: 38%; background: radial-gradient(circle at 46% 70%, #f4f7fd 0 23%, transparent 24%), linear-gradient(200deg, #d5e0f2 0%, #a9bbdb 58%, #6f8bc4 100%); }
.cp-etiquette { position: absolute; bottom: .8rem; padding: .28rem .75rem; border-radius: 99rem; background: rgba(19, 26, 46, .8); color: #fff; font-family: var(--grot); font-size: max(.72rem, 11px); line-height: 1.2; }
.cp-etiquette.avant { left: .8rem; } .cp-etiquette.apres { right: .8rem; }
.cp-poignee { grid-area: 1 / 1; position: relative; left: var(--part); z-index: 3; justify-self: start; width: 0; cursor: ew-resize; touch-action: none; }
.cp-poignee::before { content: ''; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(19, 26, 46, .14); }
.cp-poignee svg { position: absolute; left: -1.5rem; top: calc(50% - 1.5rem); width: 3rem; height: 3rem; border-radius: 50%; box-shadow: 0 .6rem 1.4rem -.4rem rgba(6, 12, 36, .6); transition: transform .4s var(--courbe); }
.cp-poignee circle { fill: #131a2e; }
.cp-poignee path { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cp-poignee:is(:hover, .saisie) svg { transform: scale(1.1); }
.cp-poignee:focus { outline: none; }
.cp-poignee:focus-visible svg { outline: 2px solid var(--d-eau); outline-offset: 3px; }
.comparer .demo-note { grid-area: 2 / 1; }

/* Résultat de recherche : ce qu'un site bien décrit laisse afficher. */
.resultat { display: grid; gap: 1.1rem; padding: 1.5rem 1.6rem 1.7rem; border-radius: .9rem; background: #fff; box-shadow: var(--d-ombre); }
.rs-barre { display: flex; align-items: center; gap: .75rem; padding: .72rem 1.1rem; border: 1px solid var(--d-filet); border-radius: 99rem; }
.rs-barre i { position: relative; flex: none; width: .82rem; height: .82rem; border: 1.5px solid currentColor; border-radius: 50%; }
.rs-barre i::after { content: ''; position: absolute; left: 92%; top: 92%; width: .38rem; height: 1.5px; background: currentColor; transform: rotate(45deg); transform-origin: 0 50%; }
.rs-adresse { font-size: .86em; color: var(--d-doux); }
.rs-titre { margin-top: .16rem !important; font-size: 1.28em; line-height: 1.2; color: #1a48c2; }
.rs-texte { margin-top: .3rem !important; color: var(--d-doux); transition: opacity .5s ease .1s; }
.rs-plus { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0 0; padding: 0; list-style: none; }
.rs-plus li { padding: .36rem .85rem; border: 1px solid var(--d-filet); border-radius: 99rem; font-size: .9em; transition: opacity .45s ease, transform .7s var(--courbe); transition-delay: calc(.2s + var(--i, 0) * .09s); }
.rs-plus li:nth-child(2) { --i: 1; } .rs-plus li:nth-child(3) { --i: 2; } .rs-plus li:nth-child(4) { --i: 3; }
.rs-plus li:first-child { border-color: transparent; background: #e7efff; color: #1d2f63; }
.demo[data-etat="0"] .rs-texte { opacity: 0; transition-delay: 0s; }
.demo[data-etat="0"] .rs-plus li { opacity: 0; transform: translateY(.5rem); transition-delay: 0s; }
.rs-fiche { transition: transform .8s var(--courbe); }
.demo[data-etat="0"] .rs-fiche:not(.rs-autre) { transform: translateY(.4rem); }
.rs-autre { padding-top: 1.1rem; border-top: 1px solid var(--d-filet); }
.rs-autre p { height: .72em; border-radius: .3em; background: rgba(19, 26, 46, .1); }
.rs-autre .rs-adresse { width: 26%; } .rs-autre .rs-titre { width: 58%; height: .95em; margin-top: .5rem !important; } .rs-autre .rs-texte { width: 82%; margin-top: .5rem !important; opacity: 1 !important; }

/* Automatisation : cinq outils sur une ligne d'eau ; la goutte avance, chaque outil s'éveille à son passage. */
.flux { --n: 0; padding: 2rem 1.2rem 1.8rem; border-radius: .9rem; background: #fff; box-shadow: var(--d-ombre); }
.demo[data-etat="1"] .flux { --n: 1; } .demo[data-etat="2"] .flux { --n: 2; } .demo[data-etat="3"] .flux { --n: 3; } .demo[data-etat="4"] .flux { --n: 4; }
.flux ol { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; text-align: center; }
.flux li { display: grid; justify-items: center; align-content: start; gap: .3rem; opacity: .36; transition: opacity .5s ease .25s; }
.flux li i { position: relative; z-index: 1; width: 1.5rem; height: 1.5rem; margin-bottom: .55rem; border: 1.5px solid var(--d-encre); border-radius: 50%; background: #fff; transition: background-color .4s ease .3s, border-color .4s ease .3s; }
.flux li b { font-weight: 600; }
.flux small { max-width: 8.5em; font-size: .84em; line-height: 1.28; color: var(--d-doux); }
.flux-ligne { position: absolute; left: calc(1.2rem + 10% - .24rem); right: calc(1.2rem + 10% - .24rem); top: calc(2rem + .75rem - 1px); height: 2px; background: var(--d-filet); }
.flux-ligne b { position: absolute; inset: 0; background: var(--d-eau); transform: scaleX(calc(var(--n) / 4)); transform-origin: 0 50%; transition: transform .9s var(--courbe); }
.flux-ligne::after { content: ''; position: absolute; left: calc(var(--n) * 25%); top: 50%; z-index: 2; width: .8rem; height: .8rem; margin: -.4rem; border-radius: 50%; background: var(--d-eau); box-shadow: 0 0 0 .3rem rgba(63, 124, 240, .2); transition: left .9s var(--courbe); }
.demo[data-etat="0"] .flux li:nth-child(-n+1), .demo[data-etat="1"] .flux li:nth-child(-n+2), .demo[data-etat="2"] .flux li:nth-child(-n+3), .demo[data-etat="3"] .flux li:nth-child(-n+4), .demo[data-etat="4"] .flux li { opacity: 1; }
.demo[data-etat="0"] .flux li:nth-child(-n+1) i, .demo[data-etat="1"] .flux li:nth-child(-n+2) i, .demo[data-etat="2"] .flux li:nth-child(-n+3) i, .demo[data-etat="3"] .flux li:nth-child(-n+4) i, .demo[data-etat="4"] .flux li i { background: var(--d-eau); border-color: var(--d-eau); }

/* ---------- Journal : l'index ---------- */
.sommaire-journal { padding: min(10vh, 6rem) 0 min(12vh, 7rem); }
.lignes { margin: 2.4rem 0 0; padding: 0; list-style: none; }
.ligne { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) min(21rem, 30%); gap: 1.6rem 4rem; align-items: center; padding: 2.3rem 0 2.5rem; border-top: 1px solid var(--filet); text-decoration: none; }
.ligne::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--eau); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--courbe); }
.ligne:is(:hover, :focus-visible)::before { transform: none; }
.ligne-corps { display: block; min-width: 0; }
.ligne-meta { display: block; font-size: max(.9rem, 12.5px); line-height: 1.5; color: var(--doux); }
.ligne-titre { display: block; margin-top: .7rem; font-size: min(3.2rem, 7.4vw); line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; transition: transform .7s var(--courbe); }
.ligne:is(:hover, :focus-visible) .ligne-titre { transform: translateX(.7rem); }
.ligne-resume { display: block; max-width: 38em; margin-top: 1rem; color: var(--doux); }
.ligne-couverture { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: .45rem; background: var(--voile); }
.sommaire-journal .vide { max-width: 22em; margin: 2rem 0 0; font-size: min(2.2rem, 6.4vw); line-height: 1.15; letter-spacing: -.02em; color: var(--texte); }
.sommaire-journal .vide em { display: block; font-family: var(--serif); font-size: 1.25em; }
/* Avec une souris, la couverture quitte sa ligne : elle paraît près du pointeur et le suit (js/demos.js). */
.avec-apercu .ligne { grid-template-columns: minmax(0, 1fr); }
.avec-apercu .ligne-couverture { display: none; }
.apercu { position: fixed; left: 0; top: 0; z-index: 6; width: min(25rem, 32vw); aspect-ratio: 16 / 10; margin: -7.8rem 0 0 2.2rem; border-radius: .45rem; overflow: hidden; box-shadow: 0 2.2rem 4.5rem -1.8rem rgba(29, 47, 99, .55); pointer-events: none; opacity: 0; transform: translate(var(--x, 0px), var(--y, 0px)) skewX(var(--penche, 0deg)) scale(.92); transition: opacity .3s ease; }
.apercu.vu { opacity: 1; transform: translate(var(--x, 0px), var(--y, 0px)) skewX(var(--penche, 0deg)); }
.apercu img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.apercu img.vu { opacity: 1; }

.prose mark { padding: .1em .3em; border-radius: .25em; background: rgba(63, 124, 240, .16); color: inherit; }
.fiche-reperes { grid-template-columns: repeat(4, auto); }

@media (max-width: 1000px) {
  .service, .service.scene-libre, .service.inverse { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 12vh 0; }
  .service.inverse .service-texte { order: 0; }
  .planche { max-width: 34rem; }
  html.page .etape { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .repere { display: none; }
  /* Le bouton du parcours se range à droite, réduit à son rond et à sa jauge. */
  .suivant { display: flex; left: auto; right: 1rem; transform: translateY(-50%); }
  .suivant > span:not(.rond) { display: none; }
  body[data-genre="piece"] .suivant { padding: .3rem; }
  .feuillet-fermer { right: 1rem; top: 5rem; }
  /* En tête de pièce, un dégradé de la teinte du lieu porte le chapeau : sur un écran étroit, il passe devant le décor. */
  .piece .tete { position: relative; padding-bottom: 6.6rem; }
  .piece .tete::before { content: ''; position: absolute; left: calc(var(--marge) * -1); right: calc(var(--marge) * -1); bottom: 0; height: 52svh; z-index: -1; background: linear-gradient(to top, var(--fond) 34%, transparent); opacity: .82; pointer-events: none; }
  .piece .tete .chapeau { font-size: 1.08rem; }
  .passage a { font-size: 1.5rem; }
  /* La carte de l'étape tient le bas de l'écran, au-dessus du pied ; la feuille de la scène, le haut. */
  .piece .sequence { height: 560vh; }
  .piece .etape { left: 1rem; right: 1rem; top: auto; bottom: 4.7rem; width: auto; padding: 1rem 1.2rem .5rem; transform: translateY(1.5rem); }
  .piece :is(.sequence[data-etape="0"] .etape:nth-child(1), .sequence[data-etape="1"] .etape:nth-child(2), .sequence[data-etape="2"] .etape:nth-child(3),
    .sequence[data-etape="3"] .etape:nth-child(4), .sequence[data-etape="4"] .etape:nth-child(5)) { transform: none; }
  .piece .etape h2 { margin-top: .2rem; font-size: 2.4rem; }
  .piece .etape-idee { margin-top: .4rem; font-size: 1rem; }
  .piece .etape-plus { margin-top: .35rem; }
  .piece .etape-faits { margin-top: .6rem; }
  .piece .etape-faits div { padding: .42rem 0; }
  .piece .etape-faits dt { font-size: .64rem; }
  .piece .etape-faits dd { margin-top: .16rem; font-size: .82rem; line-height: 1.34; }
  .piece .fil, .piece .sequence-exemple { display: none; }
  .fil a { padding-right: .2rem; font-size: .7rem; }
  html.page .fil { top: 4.1rem; padding-top: .8rem; }
  .tenue > h2, .approche > h2 { font-size: 2.6rem; }
  .service h2 em { font-size: 2.1em; }
  .planche { padding: 1.6rem 1.4rem 1.5rem; }
  .reservation { grid-template-columns: 1fr; gap: .9rem; padding: 0; }
  .rv-client, .rv-agenda, .demo[data-etat="2"] .rv-client, .demo[data-etat="2"] .rv-agenda { transform: none; filter: none; }
  .rv-lien { display: none; }
  .cp-page { font-size: 3.1cqw; }
  .flux { padding: 1.4rem 1.2rem; }
  .flux ol { grid-template-columns: 1fr; gap: 1.1rem; text-align: left; }
  .flux li { grid-template-columns: 1.5rem 1fr; justify-items: start; column-gap: .9rem; }
  .flux li i { grid-row: span 2; margin: 0; }
  .flux small { max-width: none; }
  .flux-ligne { left: calc(1.2rem + .75rem - 1px); right: auto; top: 2.1rem; bottom: 2.6rem; width: 2px; height: auto; }
  .flux-ligne b { transform: scaleY(calc(var(--n) / 4)); transform-origin: 50% 0; }
  .flux-ligne::after { left: 50%; top: calc(var(--n) * 25%); transition: top .9s var(--courbe); }
  .ligne { grid-template-columns: 1fr; padding: 1.6rem 0 1.8rem; }
  .ligne-couverture { order: -1; }
  .fiche-reperes { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .invite i { transform: none; }
  .apercu { display: none; }
}

/* ---------- v14 — Agence lisible ----------
   Le voile de la scène dépend de la zone qui passe au milieu de l'écran : un texte qui entrait par le bas passait encore
   sur le plateau clair de la table (contraste mesuré jusqu'à 1,25:1). Chaque texte posé sur le décor a désormais sa
   surface de lecture, du bleu de l'heure bleue, le décor flouté derrière : la lecture ne dépend plus de la scène. */
.piece article.agence :is(.service-texte:not(.planche), .scene-tete, .familles) { position: relative; isolation: isolate; }
.piece article.agence :is(.service-texte:not(.planche), .scene-tete, .familles)::before,
.piece article.agence .tete .chapeau::before {
  content: ''; position: absolute; z-index: -1; inset: -1.7rem -2rem; border-radius: 1.15rem; pointer-events: none;
  background: rgba(14, 23, 56, .74); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: 0 2rem 4.5rem -2.4rem rgba(3, 7, 22, .6), inset 0 0 0 1px rgba(242, 246, 253, .07);
}
.piece article.agence .tete .chapeau { position: relative; isolation: isolate; }
.piece article.agence .tete .chapeau::before { inset: -1.5rem -1.8rem -5.4rem; }
.piece article.agence .tete .invite { position: relative; }
.piece article.agence .service-reserve, .piece article.agence .service.scene .prestations { color: rgba(242, 246, 253, .82); }
/* v14 — La goutte, fil du parcours. La jauge du bouton du centre devient de l'eau qui le remplit quand on pousse au bout
   d'une section ; les repères du rail sont des gouttes du signe, pleine pour la section où l'on est. */
.suivant .rond { position: relative; overflow: hidden; isolation: isolate; }
.suivant .rond::before { content: ''; position: absolute; z-index: -1; left: -35%; right: -35%; bottom: -3px; height: calc(var(--jauge, 0) * 112%); background: #3f7cf0; border-radius: 44% 48% 0 0 / 22% 26% 0 0; transition: height .16s ease-out; animation: v14-vague 1.7s linear infinite; }
.suivant:not(.pousse) .rond::before { height: 0; }
.suivant .jauge { display: none; }
@keyframes v14-vague { 50% { transform: translateX(9%) translateY(1px); } }
.repere a::after { width: .62rem; height: .8rem; margin-top: -.4rem; transform: scale(.68); transform-origin: 50% 50%; -webkit-mask: url('../assets/logo/goutte.svg') center / contain no-repeat; mask: url('../assets/logo/goutte.svg') center / contain no-repeat; }
.repere a[aria-current]::after { transform: scale(1.15); }
@media (prefers-reduced-motion: reduce) { .suivant .rond::before { animation: none; } }
/* v14 : en lisant une pièce, le texte se fond sous la barre au lieu de passer sous le logo et les liens. */
.piece .piece-corps { -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 3.4rem, #000 6.8rem); mask-image: linear-gradient(to bottom, transparent 0, transparent 3.4rem, #000 6.8rem); }
@media (max-width: 760px) {
  .piece article.agence :is(.service-texte:not(.planche), .scene-tete, .familles)::before { inset: -1.1rem -1rem; border-radius: .9rem; }
  .piece article.agence .tete .chapeau::before { inset: -1.1rem -1rem -4.6rem; }
}

/* ==================== v15 — Méthode et Agence (audit v15, les douze améliorations) ====================
   Tout ce qui suit ne vaut que dans le site immersif (.piece) : les pages ouvertes seules (html.page) ne changent pas.
   Les numéros renvoient au rapport de l'audit (audit-v15-methode-agence). */

/* ---------- 3 — Méthode : la carte d'étape dit tout, sans clic, sous un grand compteur ---------- */
.piece .etape-plus { display: none; }
.piece .sequence .etape .etape-faits { display: block; margin-top: 1rem; }
.piece .etape { width: min(25.5rem, 31vw); padding: 1.55rem 1.9rem 1.2rem; }
.piece .etape-rang { display: flex; align-items: baseline; gap: .6rem; margin: 0; font: italic 400 min(4.4rem, 9vw) / .8 var(--serif); letter-spacing: -.03em; color: var(--eau); }
.piece .etape-rang::after { content: '/ 05'; font: 400 max(.8rem, 12px) / 1 var(--grot); letter-spacing: .08em; color: var(--doux); }
.piece .etape h2 { margin-top: .75rem; font-size: min(2.85rem, 11vw); }
.piece .etape-idee { margin-top: .5rem; }
.piece .etape-faits div { padding: .6rem 0; }
.piece .etape-faits dd { font-size: max(.92rem, 13.5px); line-height: 1.4; }
/* La carte entre par morceaux : le compteur, le nom, l'idée, puis les trois lignes. */
.piece .etape .etape-texte > *, .piece .etape .etape-faits > div { opacity: 0; transform: translateY(.7rem); transition: opacity .3s ease, transform .5s var(--courbe); }
.piece :is(.sequence[data-etape="0"] .etape:nth-child(1), .sequence[data-etape="1"] .etape:nth-child(2), .sequence[data-etape="2"] .etape:nth-child(3),
  .sequence[data-etape="3"] .etape:nth-child(4), .sequence[data-etape="4"] .etape:nth-child(5)) :is(.etape-texte > *, .etape-faits > div) { opacity: 1; transform: none; transition: opacity .6s ease, transform 1s var(--courbe); }
.piece .sequence .etape .etape-texte > .etape-rang { transition-delay: .14s; }
.piece .sequence .etape .etape-texte > h2 { transition-delay: .2s; }
.piece .sequence .etape .etape-texte > .etape-idee { transition-delay: .27s; }
.piece .sequence .etape .etape-texte > .etape-faits { transition-delay: .3s; }
.piece .sequence .etape .etape-faits > div:nth-child(1) { transition-delay: .36s; }
.piece .sequence .etape .etape-faits > div:nth-child(2) { transition-delay: .43s; }
.piece .sequence .etape .etape-faits > div:nth-child(3) { transition-delay: .5s; }
/* La séquence finie, la carte de la dernière étape s'efface avant que les trois règles arrivent (10). */
.piece .sequence.finie .etape:nth-child(n) { opacity: 0; visibility: hidden; transform: translateY(-50%); transition: opacity .25s ease, visibility 0s .25s; }

/* Le fil devient l'escalier : cinq marches qui montent ; celles qui sont passées sont d'eau, la goutte se tient sur la
   marche en cours. Chaque marche reste un lien vers son étape (12). */
.piece .fil { bottom: 2.1rem; width: min(30rem, 37vw); }
.piece .fil ol { display: flex; align-items: flex-end; }
.piece .fil ol::before, .piece .fil ol::after { display: none; }
.piece .fil li { flex: 1; min-width: 0; }
.piece .fil li:nth-child(2) { padding-bottom: .55rem; } .piece .fil li:nth-child(3) { padding-bottom: 1.1rem; }
.piece .fil li:nth-child(4) { padding-bottom: 1.65rem; } .piece .fil li:nth-child(5) { padding-bottom: 2.2rem; }
.piece .fil a { width: 100%; gap: .55rem; padding: 0 .5rem .62rem 0; border-bottom: 2px solid var(--filet); transition: color .3s, border-color .6s var(--courbe); }
.piece .fil a:hover { border-bottom-color: var(--texte); }
.piece .fil a:focus-visible { outline: 2px solid var(--eau); outline-offset: 4px; border-radius: 2px; }
.piece .fil i { transform: translateY(calc(1.04rem + 1px)); }
.piece .sequence[data-etape="0"] .fil li:nth-child(-n+1) a, .piece .sequence[data-etape="1"] .fil li:nth-child(-n+2) a, .piece .sequence[data-etape="2"] .fil li:nth-child(-n+3) a,
.piece .sequence[data-etape="3"] .fil li:nth-child(-n+4) a, .piece .sequence[data-etape="4"] .fil li:nth-child(-n+5) a { border-bottom-color: var(--eau); }
.piece .sequence-exemple { bottom: 7.6rem; }

/* ---------- 6 — Les trois règles, une à la fois, en grand, épinglées ; la goutte fait une onde à chaque règle ---------- */
/* La page ouverte seule garde son grand titre (il est désormais dans .tenue-cadre, que .tenue > h2 n'atteint plus). */
.tenue > .tenue-cadre > h2 { max-width: 11em; font-size: min(5.4rem, 12vw); line-height: 1; letter-spacing: -.022em; }
@media (max-width: 760px) { .tenue > .tenue-cadre > h2 { font-size: 2.6rem; } }
.piece .tenue { height: 300vh; height: 300svh; padding: 0; }
.piece .tenue-cadre { position: sticky; top: 0; display: grid; align-content: center; height: 100vh; height: 100svh; padding: 5.5rem 0 6.5rem; }
.piece .tenue .tenue-cadre > h2 { max-width: 22em; font-size: min(1.9rem, 6vw); line-height: 1.1; }
.piece .tenue .regles { display: grid; max-width: none; margin: 2.4rem 0 0; }
.piece .tenue .regles li { grid-area: 1 / 1; padding: 0; border: 0; visibility: hidden; transition: visibility 0s .5s; }
.piece .tenue .regles h3 { max-width: 12em; font: italic 400 min(6.4rem, 11.5vw) / .96 var(--serif); letter-spacing: -.03em; text-wrap: balance;
  clip-path: inset(0 0 100% 0); transform: translateY(.35em); transition: clip-path .5s var(--courbe), transform .6s var(--courbe); }
.piece .tenue .regles p { max-width: 27em; margin-top: 1.4rem; font-size: min(1.45rem, 5.2vw); line-height: 1.38; color: var(--texte); opacity: 0; transform: translateY(.8rem); transition: opacity .35s ease, transform .6s var(--courbe); }
.piece .tenue:is([data-rang="-1"], [data-rang="0"], :not([data-rang])) .regles li:nth-child(1), .piece .tenue[data-rang="1"] .regles li:nth-child(2), .piece .tenue[data-rang="2"] .regles li:nth-child(3) { visibility: visible; transition: none; }
.piece .tenue:is([data-rang="-1"], [data-rang="0"], :not([data-rang])) .regles li:nth-child(1) :is(h3, p), .piece .tenue[data-rang="1"] .regles li:nth-child(2) :is(h3, p), .piece .tenue[data-rang="2"] .regles li:nth-child(3) :is(h3, p) { opacity: 1; transform: none; clip-path: inset(-.2em -.2em -.3em -.2em); transition: clip-path 1.1s var(--courbe) .12s, transform 1.2s var(--courbe) .12s, opacity .8s ease .4s; }
/* Où l'on en est : 1 / 3, 2 / 3, 3 / 3. */
.piece .tenue .regles::after { content: '1 / 3'; grid-area: 2 / 1; margin-top: 2.6rem; font-size: max(.86rem, 12.5px); letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--doux); }
.piece .tenue[data-rang="1"] .regles::after { content: '2 / 3'; } .piece .tenue[data-rang="2"] .regles::after { content: '3 / 3'; }

/* ---------- 11 — L'entrée dans l'Agence : seules les parties proches de l'écran sont mises en page ; les autres le sont
   quand on s'en approche. Relevé (téléphone émulé, processeur ralenti ×4) : la première mise en page de la page entière
   tenait une image de 0,2 s au milieu du vol. « auto » retient la taille réelle une fois la partie affichée. ---------- */
.piece article.agence > :is(.service, .approche) { content-visibility: auto; contain-intrinsic-block-size: auto 900px; }
/* Le repli des petits téléphones (js/repli.js) : la toile des images faites d'avance, au-dessus de la scène, sous les pages. */
#repli { position: fixed; top: 0; left: 0; z-index: 1; display: block; width: 100%; height: 100vh; height: 100lvh; pointer-events: none; }
#repli[hidden] { display: none; }

/* ---------- 9 — Des fins de section qui partent à temps : l'invitation suit la dernière lecture ---------- */
.piece .passage { min-height: 54vh; min-height: 54svh; }

/* ---------- 8 — Agence : corrections rapides ---------- */
/* a. Le sommaire : sa surface de lecture épouse le texte, plus la marge du bloc. */
.piece article.agence .familles { width: fit-content; max-width: min(46rem, 100%); margin: min(14vh, 8rem) 0 min(9vh, 4.5rem); padding: 0; }
/* d. La barre sur le bleu de la scène : un voile derrière les liens, dès l'arrivée ; c'est lui qui sépare le texte qui
   passe dessous (voir plus bas : le masque du cadre est retiré). */
body[data-vue="agence"] .barre::before { opacity: .94; }
body[data-vue="methode"] .barre::before { opacity: .9; }
/* Le masque posé en v14 sur le cadre des pièces (texte fondu sous la barre) empêchait tout flou d'arrière-plan à
   l'intérieur : dans Chrome, un ancêtre masqué arrête le flou à lui, la scène derrière restait nette sous les surfaces
   (relevé v15, l'écran du bureau lisible à travers les cartes). Il est retiré ; la bande de la barre fait la séparation. */
.piece .piece-corps { -webkit-mask-image: none; mask-image: none; }

/* ---------- 5 — Les démonstrations dans la langue de WIZIYO : des objets du lieu, en verre bleuté ---------- */
/* Le verre est assez dense pour que le texte reste lisible quand la pièce derrière s'éclaire (la lumière du jour de
   « Mettre en scène », l'arche de « Faire connaître ») : relevé v15, 1,8:1 à 52 % ; la scène reste visible, floutée. */
.piece article.agence {
  --verre-fond: rgba(16, 27, 68, .8);
  --verre-lustre: linear-gradient(155deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02) 55%);
  --verre-filet: rgba(242, 246, 253, .22);
  --verre-ombre: 0 2.6rem 5.2rem -2.6rem rgba(3, 7, 22, .8), inset 0 1px 0 rgba(255, 255, 255, .13);
  --lecture: rgba(14, 23, 56, .8);
}
.piece article.agence .demo { --d-encre: #f2f6fd; --d-doux: rgba(242, 246, 253, .84); --d-filet: rgba(242, 246, 253, .24); --d-eau: #8fb3ff; --d-ombre: var(--verre-ombre); }
/* Notre façon de travailler : à la fin de la page, l'invitation arrive plus tôt (9) et le décor se découvre derrière
   elle ; le texte a donc sa surface de lecture, comme les autres. */
.piece article.agence .approche { position: relative; isolation: isolate; }
.piece article.agence .approche::before { content: ''; position: absolute; inset: min(18vh, 10rem) -2rem min(12vh, 7rem); inset-block-start: calc(min(18vh, 10rem) - 1.8rem); inset-block-end: calc(min(12vh, 7rem) - 1.8rem); z-index: -1; border-radius: 1.15rem; pointer-events: none;
  background: var(--lecture); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); box-shadow: 0 2rem 4.5rem -2.4rem rgba(3, 7, 22, .6), inset 0 0 0 1px rgba(242, 246, 253, .07); }
/* Le rail sur une démonstration claire : un halo sombre garde ses repères lisibles. */
body[data-vue="agence"] :is(.repere a, .repere .sous):is(:hover, :focus-visible, [aria-current]) { text-shadow: 0 0 .5rem rgba(14, 23, 56, .95), 0 0 .15rem rgba(14, 23, 56, .95); }
.piece article.agence :is(.rv-client, .rv-agenda, .resultat, .fd-demande, .planche) {
  border: 1px solid var(--verre-filet); background: var(--verre-lustre), var(--verre-fond); color: var(--d-encre); box-shadow: var(--verre-ombre);
  -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25);
}
.piece article.agence .rv-titre { font: italic 400 1.75em / 1 var(--serif); letter-spacing: -.01em; }
/* Créer : le créneau choisi en blanc plein ; le créneau complet reste lisible, barré. */
.piece article.agence .rv-creneaux .pris { color: rgba(242, 246, 253, .52); }
.piece article.agence .demo[data-etat="0"] .rv-creneaux .choisi { border-color: #f2f6fd; }
.piece article.agence .demo:not([data-etat="0"]) .rv-creneaux .choisi { background: #f2f6fd; border-color: #f2f6fd; color: #131a2e; }
.piece article.agence .rv-bouton { background: #f2f6fd; color: #131a2e; }
.piece article.agence .rv-ok { background: rgba(143, 179, 255, .2); color: #f2f6fd; }
.piece article.agence .rv-ok i { background: #8fb3ff; }
.piece article.agence .rv-agenda em { background: #8fb3ff; color: #131a2e; }
.piece article.agence .rv-total { border-top-color: rgba(242, 246, 253, .55); }
/* Faire connaître : le résultat, en verre ; l'accès direct principal en blanc plein. */
.piece article.agence .rs-titre { color: #c3d6ff; }
.piece article.agence .rs-plus li:first-child { background: #f2f6fd; color: #131a2e; }
.piece article.agence .rs-autre p { background: rgba(242, 246, 253, .12); }
/* La liste des temps et la note, sous chaque démonstration, ont leur surface de lecture (8 b, c). */
.piece article.agence .demo:is([data-demo="etats"], .eau) { display: grid; isolation: isolate; }
.piece article.agence .demo:is([data-demo="etats"], .eau) > * { grid-column: 1; }
.piece article.agence .demo[data-demo="etats"] > .demo-scene, .piece article.agence .eau > .eau-scene { grid-row: 1; }
.piece article.agence .demo[data-demo="etats"] > .demo-pas, .piece article.agence .eau > .eau-pied { grid-row: 2; }
.piece article.agence .demo:is([data-demo="etats"], .eau) > .demo-note { grid-row: 3; }
.piece article.agence .demo:is([data-demo="etats"], .eau)::before {
  content: ''; grid-area: 2 / 1 / 4 / 2; z-index: -1; margin: 1.1rem -1.4rem -1rem; border-radius: 1rem; background: var(--lecture);
  -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); box-shadow: inset 0 0 0 1px rgba(242, 246, 253, .07);
}
.piece article.agence .demo.eau::before { margin-top: -.6rem; }
.piece article.agence .demo-pas button[aria-current]::before { background: #f2f6fd; border-color: #f2f6fd; color: #131a2e; }
.piece article.agence .demo-note { color: rgba(242, 246, 253, .78); }
/* Relier : la demande et les documents en verre ; la commande garde l'allure d'un autre logiciel. */
.piece article.agence .doc::before { background: var(--verre-lustre), var(--verre-fond); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); box-shadow: inset 0 0 0 1px var(--verre-filet); }
.piece article.agence .doc::after { box-shadow: var(--verre-ombre); }
.piece article.agence .doc[data-doc="commande"]::before { background: linear-gradient(155deg, rgba(255, 255, 255, .08), transparent 60%), rgba(6, 11, 32, .86); }
.piece article.agence .fd label span { border-color: var(--d-filet); }
.piece article.agence .fd label:hover span { border-color: #f2f6fd; }
.piece article.agence .fd input:checked + span { background: #f2f6fd; border-color: #f2f6fd; color: #131a2e; }
.piece article.agence .fd-liste input:checked + span small { color: rgba(19, 26, 46, .7); }
.piece article.agence .fd-envoi { background: #f2f6fd; color: #131a2e; }
.piece article.agence .fd-envoi:hover { background: #dbe6fb; }
.piece article.agence .fd.pret [data-champ]:not(.plein) { background: rgba(242, 246, 253, .14); }
.piece article.agence .fd-goutte { stroke: #8fb3ff; }
.piece article.agence .doc.recu .doc-port, .piece article.agence .fd-depart { border-color: #8fb3ff; background: #8fb3ff; }
.piece article.agence :is(.fd-bilan, .fd > .demo-note) { position: relative; isolation: isolate; }
.piece article.agence :is(.fd-bilan, .fd > .demo-note)::before { content: ''; position: absolute; inset: -.9rem -1.1rem; z-index: -1; border-radius: .9rem; background: var(--lecture); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
/* Mettre en scène : la planche rejoint la famille des panneaux (8 e). */
.piece article.agence .planche { --texte: #f2f6fd; --doux: rgba(242, 246, 253, .78); --filet: rgba(242, 246, 253, .24); --eau: #8fb3ff; --plein: #f2f6fd; --sur-plein: #131a2e; }

/* ---------- 7 — Titres de prestation révélés : chaque ligne se lève derrière un masque, une fois ---------- */
.piece .service h2.a-lever .leve-ligne { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.piece .service h2.a-lever .leve-ligne > span { display: block; transform: translateY(110%); transition: transform 1.15s var(--courbe); }
.piece .service h2.a-lever > .leve-ligne > span { transition-delay: .14s; }
.piece .service h2.a-lever.leve .leve-ligne > span { transform: none; }

/* ---------- 12 — Micro-interactions : survol et clavier visibles, appui qui s'enfonce, retour vif sans rebond ---------- */
.piece .demo-pas button::before { transition: background-color .3s, border-color .3s, color .3s, transform .45s cubic-bezier(.2, .9, .3, 1); }
.piece .demo-pas button:active::before { transform: translateY(-.08em) scale(.88); }
.piece .demo-pas button:focus-visible { outline: 2px solid var(--d-eau); outline-offset: 3px; border-radius: .4rem; }
.piece .fd label span, .piece .rv-bouton, .piece .fd-envoi, .piece .eau-mesurer { transition: background-color .3s, color .3s, border-color .3s, transform .45s cubic-bezier(.2, .9, .3, 1); }
.piece .fd label:active span, .piece .fd-envoi:active, .piece .eau-mesurer:active { transform: scale(.965); }
/* Le rail de droite : sous la Méthode et l'Agence, les repères de leurs étapes et de leurs prestations (js/rail.js).
   Un trait court par repère ; le nom paraît au survol, au clavier, et pour celui qu'on lit. */
.repere .sous-repere { gap: 0; margin: .15rem 0 .4rem; }
.repere .sous { position: relative; display: flex; align-items: center; justify-content: flex-end; height: 1rem; padding: 0 1.5rem 0 0; border: 0; background: none;
  font: 400 max(.68rem, 10px) / 1 var(--grot); letter-spacing: .02em; white-space: nowrap; color: transparent; cursor: pointer; transition: color .3s ease; }
.repere .sous::after { content: ''; position: absolute; right: .14rem; top: 50%; width: .34rem; height: 1.5px; margin-top: -.75px; background: var(--texte-barre, var(--encre)); opacity: .35; transform-origin: 100% 50%; transition: transform .45s var(--courbe), opacity .3s ease; }
.repere .sous:is(:hover, :focus-visible), .repere .sous[aria-current] { color: inherit; }
.repere .sous[aria-current]::after { opacity: 1; transform: scaleX(1.8); }
.repere .sous:hover::after { opacity: .9; }
.repere .sous:focus-visible { outline: 2px solid #3f7cf0; outline-offset: 2px; border-radius: 2px; }
/* Les curseurs de la lumière et de l'eau prennent la forme de la goutte du signe. */
.piece .lumiere input::-webkit-slider-thumb { width: 1.3rem; height: 1.7rem; margin-top: calc(-.85rem + 1.5px); border: 0; border-radius: 0; background: #f2f6fd; box-shadow: none;
  -webkit-mask: url('../assets/logo/goutte.svg') center / contain no-repeat; mask: url('../assets/logo/goutte.svg') center / contain no-repeat; }
.piece .lumiere input::-moz-range-thumb { width: 1.3rem; height: 1.7rem; border: 0; border-radius: 0; background: #f2f6fd; mask: url('../assets/logo/goutte.svg') center / contain no-repeat; }
.piece .lumiere input:is(:hover, :active)::-webkit-slider-thumb { transform: scale(1.18); }
/* La poignée de l'eau : une goutte sombre cernée de blanc ; les flèches tiennent dans son bulbe. */
.piece .eau-poignee { width: 3rem; height: 3.9rem; margin: -1.95rem -1.5rem; border: 0; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 .6rem 1rem rgba(6, 12, 36, .55)); }
.piece .eau-poignee::before, .piece .eau-poignee::after { content: ''; position: absolute; inset: 0; z-index: -1; -webkit-mask: url('../assets/logo/goutte.svg') center / contain no-repeat; mask: url('../assets/logo/goutte.svg') center / contain no-repeat; }
.piece .eau-poignee::before { background: #fff; transform: scale(1.12); }
.piece .eau-poignee::after { background: #131a2e; }
.piece .eau-poignee svg { position: relative; left: .69rem; top: 1.13rem; width: 1.15rem; height: 1.15rem; }

@media (max-width: 760px) {
  /* 10 — Méthode au téléphone : une chose à la fois. La carte, compacte, tient le bas de l'écran ; le compteur et le nom
     partagent une ligne ; les trois lignes de l'étape restent lisibles. */
  .piece .etape { width: auto; padding: .9rem 1.1rem .55rem; }
  .piece .etape-texte { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .75rem; align-items: baseline; }
  .piece .etape-texte > :not(.etape-rang, h2) { grid-column: 1 / -1; }
  .piece .etape-rang { font-size: 2.5rem; }
  .piece .etape-rang::after { font-size: .66rem; }
  .piece .etape h2 { margin-top: 0; font-size: 2.05rem; }
  .piece .etape-idee { margin-top: .35rem; font-size: .95rem; }
  .piece .sequence .etape .etape-faits { margin-top: .5rem; }
  .piece .etape-faits div { padding: .34rem 0; }
  .piece .etape-faits dt { font-size: .62rem; }
  .piece .etape-faits dd { margin-top: .08rem; font-size: .8rem; line-height: 1.3; }
  .piece .sequence.finie .etape:nth-child(n) { transform: none; }
  .piece .tenue { height: 260svh; }
  .piece .tenue-cadre { align-content: start; padding: 6.5rem 0 7rem; }
  .piece .tenue .regles h3 { font-size: 2.9rem; }
  .piece .tenue .regles p { font-size: 1.1rem; }
  .piece .passage { min-height: 46svh; }
  .piece article.agence .demo:is([data-demo="etats"], .eau)::before { margin-inline: -.9rem; }
  .piece .eau-poignee { width: 2.6rem; height: 3.4rem; margin: -1.7rem -1.3rem; }
  .piece .eau-poignee svg { left: .6rem; top: .98rem; width: 1rem; height: 1rem; }
  /* Sur téléphone, pas de flou d'arrière-plan : refait à chaque image au-dessus d'une scène 3D qui bouge, il coûte trop.
     Le verre y est plus dense, et la scène ne se lit plus à travers. */
  .piece article.agence { --verre-fond: rgba(16, 27, 68, .9); --lecture: rgba(14, 23, 56, .9); }
  .piece article.agence :is(.rv-client, .rv-agenda, .resultat, .fd-demande, .planche) { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .piece article.agence .demo::before, .piece article.agence .doc::before, .piece article.agence .fd-bilan::before, .piece article.agence .fd > .demo-note::before,
  .piece article.agence .service-texte:not(.planche)::before, .piece article.agence .scene-tete::before, .piece article.agence .familles::before,
  .piece article.agence .tete .chapeau::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .piece article.agence :is(.service-texte:not(.planche), .scene-tete, .familles)::before, .piece article.agence .tete .chapeau::before { background: rgba(14, 23, 56, .9); }
}
@media (prefers-reduced-motion: reduce) {
  .piece .etape .etape-texte > *, .piece .etape .etape-faits > div, .piece .tenue .regles :is(h3, p) { transition: none !important; transform: none !important; }
}

/* ==================== v16 — Méthode et Agence : titre, note de cadrage, papillon, marches, écran du bureau, Reprendre ====================
   (Les gestes de la scène sont dans js/gestes.js et js/scene-maison.js ; ici, la page.) */

/* La bande de la barre dans la Méthode (v15, 8 d) voilait le haut de la feuille. Elle suit désormais la lecture (classe
   lit, js/app.js) : le chapeau qui monte pendant l'arrivée, les trois règles ; rien pendant la séquence. */
body[data-vue="methode"] .barre::before { opacity: 0; }
body[data-vue="methode"].lit .barre::before { opacity: .9; }
/* Le fil des étapes et sa légende, posés sur les marches, désormais allumées : une encre plus franche (relevé de
   contraste v16 : 2,9 à 4,3 pour 4,5 attendu). */
.piece .fil a, .piece .sequence-exemple { color: rgba(19, 26, 46, .84); }
.piece .fil a:is([aria-current], :hover) { color: var(--texte); }
/* Sous le fil et sa légende, une brume claire, sans bord : la marche allumée passe juste derrière eux. */
.piece .fil { isolation: isolate; }
.piece .fil::before { content: ''; position: absolute; z-index: -1; inset: -3.8rem -1.8rem -1rem; border-radius: 1.6rem; pointer-events: none;
  background: radial-gradient(ellipse at 50% 62%, rgba(236, 241, 248, .72), rgba(236, 241, 248, .4) 48%, rgba(236, 241, 248, 0) 100%); }

/* ---------- Agence : chaque chapitre en deux temps ----------
   D'abord la scène : le titre tient la gauche, la caméra cadre l'écran du bureau en grand à droite (js/scene-maison.js) ;
   puis la démonstration, qui arrive dessous. Reprendre et Relier ont la même tête que les autres chapitres. */
.piece article.agence > :is(.service, .approche) { contain-intrinsic-block-size: auto 1500px; }
.piece article.agence .service, .piece article.agence .service.scene, .piece article.agence .service.scene-libre {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: minmax(60vh, auto) auto; gap: 0 min(6rem, 6vw);
  align-items: center; min-height: 0; padding: 0 0 12vh;
}
/* (Le passage d'un chapitre à l'autre s'achève le haut de la section à 20 % de l'écran, js/feuillet.js : la carte du
   titre, au milieu de ses 60 % d'écran, est alors au centre, l'écran du bureau à sa droite.) */
.piece article.agence .service > .service-texte { grid-column: 1; grid-row: 1; }
.piece article.agence .service > .demo { grid-column: 2; grid-row: 2; align-self: start; margin-top: 6vh; }
.piece article.agence .service.scene > .demo { grid-column: 1 / -1; }
.piece article.agence .service.scene-libre { grid-template-columns: minmax(0, 31rem) 1fr; grid-template-rows: minmax(60vh, auto); padding-bottom: 20vh; }
.piece article.agence .service.scene .prestations { display: block; max-width: 31rem; margin-top: 2rem; font-size: inherit; color: inherit; }
.piece article.agence .service.scene .prestations li { padding: .82rem 0; border-top: 1px solid var(--filet); }
.piece article.agence .service.scene .prestations li:last-child { border-bottom: 1px solid var(--filet); }
.piece article.agence .service.scene .prestations li + li::before { content: none; margin: 0; }
.piece article.agence .service.scene .service-reserve { margin-top: 1.2rem; }
@media (max-width: 760px) {
  .piece article.agence .service, .piece article.agence .service.scene, .piece article.agence .service.scene-libre { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; padding: 4svh 0 6svh; }
  .piece article.agence .service.scene-libre { grid-template-rows: auto; }
  .piece article.agence .service > .service-texte { grid-column: 1; }
  /* Entre le titre et sa démonstration, l'écran du bureau se montre, au milieu de l'image. */
  .piece article.agence .service > .demo { grid-column: 1; margin-top: 44svh; }
}

/* ==================== v17 — Méthode et Agence : le papillon dans le vide, les démonstrations à côté de l'écran, les fondus ====================
   (Le papillon et les poses de caméra sont dans js/gestes.js et js/scene-maison.js ; ici, la page.) */

/* Agence : les démonstrations de Créer et Faire connaître se rangent sous leur titre, dans la colonne de gauche ; la
   droite de l'image reste à l'écran du bureau, qui les reflète pendant qu'on les manipule. Reprendre et Relier, larges,
   gardent toute la largeur (l'écran passe alors en veilleuse). */
@media (min-width: 761px) {
  .piece article.agence .service, .piece article.agence .service.scene { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 min(5rem, 5vw); }
  .piece article.agence .service:not(.scene):not(.scene-libre) > .demo { grid-column: 1; margin-top: 3vh; }
  .piece article.agence .reservation { padding-bottom: 1.4rem; }
}
/* La bande de la barre tranchait net les cartes qui passaient dessous : elle se fond maintenant sur une hauteur et
   demie de barre, et les cartes s'y dissolvent au lieu d'être coupées. */
body[data-genre="piece"] .barre::before { inset: 0 0 -5.6rem; -webkit-mask-image: linear-gradient(#000 34%, rgba(0, 0, 0, .55) 62%, transparent); mask-image: linear-gradient(#000 34%, rgba(0, 0, 0, .55) 62%, transparent); }
/* La planche de « Mettre en scène » : la caméra se tient désormais près de la table éclairée, derrière elle ; un verre
   plus dense garde son titre lisible (relevé v17 : 2,7 pour 3 attendu, à 0,8 ; 0,9 sur ordinateur comme au téléphone). */
.piece article.agence .planche { --verre-fond: rgba(16, 27, 68, .9); }
/* Les titres révélés : de la place pour les jambages de l'italique (le « p » de Reprendre était rogné). */
.piece .service h2.a-lever .leve-ligne { padding-bottom: .26em; margin-bottom: -.26em; }
/* Les textes et les démonstrations de l'Agence entrent comme le reste de la page (js/commun.js, APPARITIONS) : un
   glissement doux, une fois, un peu plus long pour une démonstration. */
.piece article.agence .anime .service > .demo.revele { transition-duration: 1s, 1.4s; }

/* ==================== v18 — Agence : les cadres des textes, la gouttière du repère, l'écran du bureau, Reprendre ====================
   (L'écran du bureau devient une vraie page posée sur la dalle 3D : js/ecran-pc.js ; ses règles sont plus bas.) */

/* ---------- Les cadres des textes ----------
   Relevé v17 : chaque surface de lecture débordait de 2 rem autour de son texte (un fond en ::before), mais chaque
   chapitre de l'Agence est rendu en « content-visibility: auto » (v15, 11), qui rogne tout ce qui dépasse de sa boîte.
   Le fond était coupé net à gauche : le texte collait au bord du cadre (même pixel, 92 px à 1440), coins gauches carrés.
   Désormais chaque chapitre occupe toute la largeur de l'écran, ses marges devenues intérieures : rien ne dépasse plus
   de sa boîte. Tous les cadres débordent de la même mesure (--cadre-x, --cadre-y) : leurs bords gauches s'alignent, et
   tous les textes tiennent la marge de la page, comme le chapeau de tête. À droite, une gouttière laisse sa place au
   repère des sections, qui passait sur les cadres et sur les démonstrations larges. */
.piece article.agence { --cadre-x: 2rem; --cadre-y: 1.75rem; --gouttiere: var(--marge); }
@media (min-width: 761px) { .piece article.agence { --gouttiere: max(var(--marge), 10.5rem); } }
@media (max-width: 760px) { .piece article.agence { --cadre-x: 1rem; --cadre-y: 1.15rem; } }
.piece article.agence > .service, .piece article.agence > .service.scene, .piece article.agence > .service.scene-libre, .piece article.agence > .approche {
  margin-inline: calc(var(--marge) * -1); padding-inline: var(--marge) var(--gouttiere);
}
.piece article.agence :is(.service-texte:not(.planche), .familles)::before { inset: calc(var(--cadre-y) * -1) calc(var(--cadre-x) * -1); border-radius: 1.15rem; }
.piece article.agence .tete .chapeau::before { inset: -1.5rem calc(var(--cadre-x) * -1) -5.4rem; }
/* Le cadre épouse son texte : les filets des prestations courent sur toute sa largeur, à la même distance du bord
   que le titre. */
.piece article.agence .service-texte:not(.planche) { width: fit-content; max-width: 100%; }
.piece article.agence .service-texte:not(.planche) .prestations, .piece article.agence .service-texte:not(.planche) .service-reserve { max-width: none; }
.piece article.agence .service-texte:not(.planche) .service-idee { max-width: 30em; }
/* La planche de « Mettre en scène » déborde de la même mesure : son texte tient la marge comme les autres. */
.piece article.agence .planche { margin-left: calc(var(--cadre-x) * -1); padding-inline: var(--cadre-x) calc(var(--cadre-x) + .4rem); border-radius: 1.15rem; }
/* Les temps d'une démonstration, et sa note : même débord, même arrondi. */
.piece article.agence .demo:is([data-demo="etats"], .eau)::before { margin-inline: calc(var(--cadre-x) * -1); border-radius: 1.15rem; }
.piece article.agence :is(.fd-bilan, .fd > .demo-note)::before { inset: -.95rem calc(var(--cadre-x) * -1); border-radius: 1.15rem; }
/* Notre façon de travailler : le cadre suit la marge et la gouttière ; le texte, la marge. */
.piece article.agence .approche::before { inset-inline: calc(var(--marge) - var(--cadre-x)) calc(var(--gouttiere) - var(--cadre-x)); }
/* Relier : la phrase de conclusion et la note sont des cartes posées dans la grille des documents : leurs bords tombent
   sur ceux de la demande et du devis (relevé v17 : décalés de 29 à 30 px, la phrase touchait la note). */
.piece article.agence .fd-bilan { padding: 1.15rem 1.4rem 1.25rem; }
.piece article.agence .fd > .demo-note { margin-top: .3rem; padding: .9rem 1.4rem; }
.piece article.agence :is(.fd-bilan, .fd > .demo-note)::before { inset: 0; }

/* ---------- L'écran du bureau, une vraie page (js/ecran-pc.js) ----------
   Une boîte de 768 sur 438 points, au rapport de la dalle, posée sur elle à chaque image par une transformation
   projective. Interface claire, comme un vrai écran allumé dans la pièce à l'heure bleue : papier, encre, un seul bleu.
   Les tailles sont en points de la boîte : à 1440 sur 900, la dalle paraît sur 570 points, le texte courant y fait 15 à
   17 points. */
.pc { position: fixed; left: 0; top: 0; z-index: 2; width: 768px; height: 438px; overflow: hidden; transform-origin: 0 0; visibility: hidden; opacity: 0; pointer-events: none;
  background: linear-gradient(#f8fafd, #eef2f9); color: #131a2e; font: 400 22px / 1.3 var(--grot); letter-spacing: -.005em; -webkit-font-smoothing: antialiased; contain: strict; }
.pc.vu { visibility: visible; }
.pc p, .pc ul, .pc ol { margin: 0; padding: 0; list-style: none; }
.pc-ecrans, .pc-ecran { position: absolute; inset: 0; }
.pc-ecran { opacity: 0; transition: opacity .55s ease; }
.pc-ecran.actif { opacity: 1; }
.pc.sans-fondu .pc-ecran { transition: none; }
/* Le verre : un reflet en biais et des bords un peu plus sombres ; l'éclat de l'allumage, blanc, par le milieu. */
.pc-reflet, .pc-eclat { position: absolute; inset: 0; pointer-events: none; }
.pc-reflet { background: linear-gradient(115deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .16) 48%, rgba(255, 255, 255, 0) 57%), radial-gradient(130% 115% at 50% 45%, rgba(19, 26, 46, 0) 58%, rgba(19, 26, 46, .11)); }
.pc-eclat { background: radial-gradient(75% 85% at 50% 50%, #fff 30%, rgba(255, 255, 255, .7)); opacity: 0; }

/* La tête : le sommaire des cinq familles. */
.pc-tete { display: grid; align-content: center; padding: 0 60px; }
.pc-tete-chapeau { max-width: 600px; font: italic 400 25px / 1.25 var(--serif); color: rgba(19, 26, 46, .6); }
.pc-tete-chapeau::before { content: ''; display: block; width: 56px; height: 3px; margin-bottom: 20px; background: #3f7cf0; }
.pc .pc-familles { margin-top: 18px; }
.pc-familles li { display: flex; align-items: baseline; gap: 22px; padding: 10px 0 9px; border-top: 1.5px solid rgba(19, 26, 46, .12); font-size: 27px; opacity: 0; transform: translateY(8px);
  transition: opacity .5s ease calc(.25s + var(--i) * .08s), transform .8s var(--courbe) calc(.25s + var(--i) * .08s); }
.pc-familles b { min-width: 34px; font: italic 400 25px var(--serif); color: #3f7cf0; }
.pc-familles small { margin-left: auto; font-size: 19px; color: rgba(19, 26, 46, .66); }          /* v21 (A4) */
/* v22 : le film de « Mettre en scène » sur l'écran du bureau ; la fenêtre de l'extrait ne sert plus que sans lui. */
.pc-film { padding: 0; background: #0d1530; }
.pc-film video { display: block; width: 100%; height: 100%; object-fit: cover; }
html.avec-pc .service-extrait { display: none; }
.pc-tete.actif .pc-familles li { opacity: 1; transform: none; }

/* Créer : la réservation. À gauche l'écran du client, à droite l'agenda de l'établissement, éteint tant que la
   réservation n'est pas faite. Le curseur choisit 19:30 (temps 1), appuie sur Réserver (temps 2) ; une goutte porte la
   réservation jusqu'à l'agenda, qui l'inscrit (temps 3). */
.pc-creer { display: grid; grid-template-columns: 380px minmax(0, 1fr); align-items: center; gap: 0 32px; padding: 30px 34px; }
.pc-app-titre { font: italic 400 40px / 1 var(--serif); letter-spacing: -.01em; }
.pc .pc-app-sous { margin-top: 8px; font-size: 19px; color: rgba(19, 26, 46, .58); }
.pc .pc-creneaux { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.pc-creneaux li { display: grid; place-content: center; height: 54px; border: 1.5px solid rgba(19, 26, 46, .16); border-radius: 27px; font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; transition: background-color .35s, color .35s, border-color .35s; }
.pc-creneaux .pris { color: rgba(19, 26, 46, .34); text-decoration: line-through; }
.pc-creer.actif[data-etat="0"] .pc-creneaux .choisi { animation: pc-choisir .3s ease 1s both, pc-appel 1.6s ease-in-out 1.4s infinite; }
.pc-creer:not([data-etat="0"]) .pc-creneaux .choisi { background: #3f7cf0; border-color: #3f7cf0; color: #fff; }
@keyframes pc-choisir { from { border-color: rgba(19, 26, 46, .16); background: rgba(63, 124, 240, 0); } to { border-color: #3f7cf0; background: rgba(63, 124, 240, .1); } }
@keyframes pc-appel { 50% { box-shadow: 0 0 0 7px rgba(63, 124, 240, .16); } }
.pc .pc-action { position: relative; height: 58px; margin-top: 22px; }
.pc-bouton, .pc-ok { position: absolute; inset: 0; display: flex; align-items: center; border-radius: 29px; font-size: 21px; font-weight: 500; }
.pc-bouton { justify-content: center; background: #131a2e; color: #fff; transition: opacity .3s ease .6s, transform .5s var(--courbe) .6s; }
.pc-ok { gap: 12px; padding: 0 20px; background: #e3ecfe; color: #1d2f63; opacity: 0; transform: scale(.96); transition: opacity .4s ease .75s, transform .7s var(--courbe) .75s; }
.pc-ok svg { flex: none; width: 28px; height: 28px; padding: 4px; border-radius: 50%; background: #3f7cf0; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .45s ease 1.05s; }
.pc-creer:not([data-etat="0"]) .pc-bouton { opacity: 0; transform: scale(.97); }
.pc-creer:not([data-etat="0"]) .pc-ok { opacity: 1; transform: none; }
.pc-creer:not([data-etat="0"]) .pc-ok svg { stroke-dashoffset: 0; }
.pc-agenda { padding-left: 26px; border-left: 1.5px solid rgba(19, 26, 46, .1); transition: opacity .6s ease .3s, filter .6s ease .3s; }
.pc-creer:not([data-etat="2"]) .pc-agenda { opacity: .36; filter: saturate(.3); transition-delay: 0s; }
.pc .pc-agenda-titre { margin-bottom: 10px; font: italic 400 30px / 1 var(--serif); }
.pc-agenda li { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 8px; height: 44px; border-top: 1.5px solid rgba(19, 26, 46, .1); font-size: 19px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-agenda li b { font-weight: 600; }
.pc-agenda li.nouveau { height: 0; overflow: hidden; border-top-color: transparent; opacity: 0; transition: height .7s var(--courbe) .55s, opacity .5s ease .75s, border-color .3s ease .55s, background-color .8s ease .9s; }
.pc-creer[data-etat="2"] .pc-agenda li.nouveau { height: 44px; border-top-color: rgba(19, 26, 46, .1); opacity: 1; background: linear-gradient(90deg, rgba(63, 124, 240, .13), rgba(63, 124, 240, 0)); }
.pc-agenda em { padding: 3px 10px; border-radius: 99px; background: #3f7cf0; color: #fff; font-size: 14px; font-style: normal; }
.pc .pc-total { display: flex; justify-content: space-between; margin-top: 4px; padding-top: 10px; border-top: 2px solid #131a2e; font-size: 19px; font-weight: 500; }
.pc-compte { position: relative; width: 1.6em; height: 1.3em; overflow: hidden; font-variant-numeric: tabular-nums; }
.pc-compte b { position: absolute; right: 0; font-weight: 600; transition: transform .7s var(--courbe) 1.15s; }
.pc-compte .apres { transform: translateY(110%); }
.pc-creer[data-etat="2"] .pc-compte .avant { transform: translateY(-110%); }
.pc-creer[data-etat="2"] .pc-compte .apres { transform: none; }
.pc-goutte { position: absolute; left: 300px; top: 338px; width: 16px; height: 16px; margin: -8px; border-radius: 50%; background: #3f7cf0; box-shadow: 0 0 0 6px rgba(63, 124, 240, .18); opacity: 0; }
.pc-creer[data-etat="2"] .pc-goutte { animation: pc-porte 1.05s cubic-bezier(.5, 0, .3, 1) .1s both; }
@keyframes pc-porte { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 14% { opacity: 1; transform: translate(26px, -34px) scale(1); }
  55% { transform: translate(120px, -150px) scale(1); } 86% { opacity: 1; transform: translate(186px, -142px) scale(1); } 100% { opacity: 0; transform: translate(196px, -140px) scale(.3); } }
.pc-curseur { position: absolute; left: 0; top: 0; width: 30px; height: 30px; fill: #131a2e; stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; opacity: 0; filter: drop-shadow(0 3px 4px rgba(19, 26, 46, .28)); transform-origin: 6px 4px; }
.pc-creer.actif[data-etat="0"] .pc-curseur { animation: pc-vers-creneau 1.15s cubic-bezier(.45, 0, .2, 1) .1s both; }
.pc-creer.actif[data-etat="1"] .pc-curseur { animation: pc-vers-bouton .85s cubic-bezier(.45, 0, .2, 1) both; }
@keyframes pc-vers-creneau { 0% { opacity: 0; transform: translate(560px, 420px); } 18% { opacity: 1; } 74% { transform: translate(218px, 190px); } 84% { transform: translate(218px, 190px) scale(.84); } 100% { opacity: 1; transform: translate(218px, 190px); } }
@keyframes pc-vers-bouton { 0% { opacity: 1; transform: translate(218px, 190px); } 66% { transform: translate(232px, 334px); } 78% { transform: translate(232px, 334px) scale(.84); } 90% { opacity: 1; transform: translate(232px, 334px); } 100% { opacity: 0; transform: translate(240px, 342px); } }

/* Faire connaître : la recherche. La question s'écrit dans la barre ; puis les résultats. Mal décrit, le site n'a que
   son adresse et son titre ; bien décrit, il répond : une phrase, l'heure d'ouverture et ses accès directs. */
.pc-connaitre { padding: 34px 40px 0; }
.pc .pc-barre { display: flex; align-items: center; gap: 14px; height: 62px; padding: 0 26px; border: 1.5px solid rgba(19, 26, 46, .14); border-radius: 31px; background: #fff; box-shadow: 0 8px 20px -12px rgba(19, 26, 46, .4); font-size: 22px; }
.pc-barre svg { flex: none; width: 24px; height: 24px; fill: none; stroke: #131a2e; stroke-width: 2; stroke-linecap: round; }
.pc-requete { white-space: nowrap; }
.pc-caret { width: 2px; height: 26px; margin-left: -12px; background: #3f7cf0; animation: pc-caret 1s steps(1) infinite; }
.pc-connaitre.tape .pc-caret { opacity: 0; animation: none; }
@keyframes pc-caret { 50% { opacity: 0; } }
.pc-resultats { margin-top: 22px; opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .8s var(--courbe); }
.pc-connaitre.tape .pc-resultats { opacity: 1; transform: none; }
.pc-fiche { position: relative; padding: 16px 0; }
.pc-nous::before { content: ''; position: absolute; inset: 2px -20px; z-index: -1; border-radius: 18px; background: rgba(63, 124, 240, .08); box-shadow: inset 0 0 0 1.5px rgba(63, 124, 240, .18); opacity: 0; transition: opacity .6s ease .2s; }
.pc-connaitre[data-etat="1"] .pc-nous::before { opacity: 1; }
.pc-adresse { display: flex; align-items: center; gap: 10px; font-size: 17px; color: rgba(19, 26, 46, .62); }
.pc-adresse i { flex: none; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle, #3f7cf0 0 5px, #e3ecfe 5.5px); }
.pc .pc-titre { margin-top: 6px; font-size: 27px; font-weight: 500; letter-spacing: -.01em; color: #1a48c2; }
.pc-texte { max-height: 0; overflow: hidden; font-size: 19px; color: rgba(19, 26, 46, .7); opacity: 0; transition: max-height .6s var(--courbe), margin .6s var(--courbe), opacity .4s ease; }
.pc .pc-connaitre[data-etat="1"] .pc-texte { max-height: 30px; margin-top: 6px; opacity: 1; transition-delay: .1s, .1s, .3s; }
.pc .pc-plus { display: flex; gap: 10px; max-height: 0; overflow: hidden; transition: max-height .6s var(--courbe), margin .6s var(--courbe); }
.pc .pc-connaitre[data-etat="1"] .pc-plus { max-height: 50px; margin-top: 14px; }
.pc-plus li { padding: 8px 16px; border: 1.5px solid rgba(19, 26, 46, .16); border-radius: 99px; font-size: 17px; white-space: nowrap; opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .4s ease, transform .6s var(--courbe); }
.pc-plus li:first-child { border-color: #3f7cf0; background: #3f7cf0; color: #fff; }
.pc-connaitre[data-etat="1"] .pc-plus li { opacity: 1; transform: none; transition-delay: calc(.35s + var(--i) * .1s); }
.pc-autre { display: grid; gap: 9px; border-top: 1.5px solid rgba(19, 26, 46, .08); }
.pc-autre i { height: 12px; border-radius: 6px; background: rgba(19, 26, 46, .08); }
.pc-autre i:nth-child(1) { width: 26%; } .pc-autre i:nth-child(2) { width: 58%; height: 16px; } .pc-autre i:nth-child(3) { width: 84%; }
@media (prefers-reduced-motion: reduce) {
  .pc *, .pc *::before, .pc *::after { animation: none !important; transition: none !important; }
  .pc-curseur, .pc-goutte { display: none; }
}

/* Dans la page : Créer et Faire connaître gardent leurs temps, qui commandent l'écran, et une ligne qui dit où
   regarder ; leur scène est sur l'écran du bureau (classe avec-pc, posée sur <html> par js/ecran-pc.js dans le site immersif). */
.demo-ecran { display: none; }
html.avec-pc .piece article.agence :is(#creer, #faire-connaitre) .demo { justify-self: start; width: fit-content; min-width: min(100%, 24rem); max-width: 100%; }
html.avec-pc .piece article.agence :is(#creer, #faire-connaitre) .demo-scene { display: none; }
html.avec-pc .piece article.agence :is(#creer, #faire-connaitre) .demo::before { grid-area: 1 / 1 / 4 / 2; margin: calc(var(--cadre-y) * -1) calc(var(--cadre-x) * -1); }
html.avec-pc .piece article.agence .demo-ecran { grid-row: 1; display: flex; align-items: center; gap: .75rem; margin: 0; font-size: max(.86rem, 12.5px); letter-spacing: .02em; color: rgba(242, 246, 253, .8); }
html.avec-pc .piece article.agence .demo-ecran i { position: relative; flex: none; width: 1.2rem; height: .8rem; margin-bottom: .2rem; border: 1.5px solid currentColor; border-radius: .2rem; }
html.avec-pc .piece article.agence .demo-ecran i::after { content: ''; position: absolute; left: 50%; bottom: -.42rem; width: .55rem; height: 1.5px; margin-left: -.275rem; background: currentColor; }
html.avec-pc .piece article.agence :is(#creer, #faire-connaitre) .demo-pas { margin-top: .9rem; }
/* Les chapitres joués sur l'écran laissent de la place après leurs temps : la caméra reste sur l'écran allumé tant
   qu'on lit les temps et qu'on regarde la démonstration se jouer ; le chapitre suivant ne vient qu'après (relevé v18
   avant réglage : à 0,7 du chapitre, le titre suivant avait déjà tiré la caméra vers lui, écran éteint). */
@media (min-width: 761px) { .piece article.agence > :is(#creer, #faire-connaitre) { padding-bottom: 38vh; } }
@media (max-width: 760px) { .piece article.agence > :is(#creer, #faire-connaitre) { padding-bottom: 30svh; } }
/* Reprendre (v18) : toute la démonstration tient sur une seule surface de verre, ajustée à la scène : les volets, les
   deux pages, les constats et la note. Elle déborde comme les autres cadres : sa scène tient la marge de la page. */
.piece article.agence .demo.eau { max-width: calc(66svh * 16 / 9 + 2 * var(--cadre-x)); margin-inline: calc(var(--cadre-x) * -1); padding: 1.5rem var(--cadre-x) 1.35rem; border-radius: 1.3rem;
  background: var(--lecture); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); box-shadow: inset 0 0 0 1px rgba(242, 246, 253, .07), 0 2rem 4.5rem -2.4rem rgba(3, 7, 22, .6); }
.piece article.agence .demo.eau::before { content: none; }
.piece article.agence .demo.eau > * { grid-row: auto; }
.piece article.agence .demo.eau .demo-note { max-width: 62em; }
@media (max-width: 760px) { .piece article.agence .demo.eau { max-width: none; padding-block: 1.1rem 1rem; -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(14, 23, 56, .9); } }

/* ==================== v19 — Méthode et Agence : temps d'arrêt, chapitres posés, Reprendre sur l'écran du bureau ====================
   Demandes de Mohammad (19 octobre), sur la v18 : des titres cachés sous la barre et des cadres mal placés (« le premier
   paragraphe avec le petit cadre en bas pour montrer la démonstration ») ; un temps d'arrêt à chaque point ; la caméra
   qui ne bouge plus à la souris quand on regarde ; Reprendre sur l'écran du PC, la caméra s'en approchant.
   Les arrêts : js/arrets.js et js/feuillet.js ; la caméra : js/app.js et js/scene-maison.js ; ici, la page.
   Les sélecteurs des étages portent l'identifiant de leur chapitre : ceux de la v18 en portaient un (:is(#creer, …)). */

/* ---------- Les temps d'arrêt : les repères de l'aimant (le doigt ; la molette et le clavier passent par js/arrets.js) ---------- */
.arrets { position: absolute; left: 0; top: 0; width: 1px; height: 0; pointer-events: none; }
.arrets i { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; scroll-snap-stop: always; }
.piece-corps.aimante { scroll-snap-type: y mandatory; }
.piece-corps.aimante.glisse { scroll-snap-type: none; }

/* ---------- Agence : les étages ----------
   Créer, Reprendre et Faire connaître sont des étages : le chapitre reste posé pendant qu'on passe d'un de ses points à
   l'autre (ses temps, ses volets), puis s'en va d'un bloc quand vient le suivant. Sa carte réunit son titre, son texte
   et les commandes de sa démonstration : une seule surface, à gauche, tenue sous la barre et au-dessus du pied de
   l'écran, centrée entre les deux ; l'écran du bureau, à droite, joue la démonstration. (--barre-h, --bas-h : la barre
   et le pied, css/styles.css ; --pas-etage : la course entre deux points d'un étage ; --carte-l : la largeur du texte.) */
/* Hors du site immersif (page ouverte seule, ?simple), la carte n'existe pas : texte et démonstration restent les deux
   colonnes de leur chapitre, comme en v18. */
.service-carte { display: contents; }
.piece article.agence { --barre-h: 5.7rem; --bas-h: 5.2rem; --pas-etage: 62svh; --carte-l: min(35rem, 40vw); }
.piece article.agence > :is(#creer, #mettre-en-scene, #reprendre, #faire-connaitre).etage {
  display: block; height: calc(100svh + (var(--points, 1) - 1) * var(--pas-etage)); min-height: 0; padding-block: 0;
  content-visibility: visible; contain-intrinsic-block-size: none;
}
.piece article.agence > .etage[data-points="1"] { --points: 1; }
.piece article.agence > .etage[data-points="2"] { --points: 2; }
.piece article.agence > .etage[data-points="3"] { --points: 3; }
.piece article.agence > .etage[data-points="4"] { --points: 4; }          /* v22 : Mettre en scène et son film */
.piece article.agence > :is(#creer, #mettre-en-scene, #reprendre, #faire-connaitre).etage > .service-carte {
  position: sticky; top: 0; display: grid; grid-template-columns: minmax(0, var(--carte-l)); grid-template-rows: auto auto; align-content: center;
  box-sizing: border-box; height: 100svh; padding: calc(var(--barre-h) + var(--cadre-y)) 0 calc(var(--bas-h) + var(--cadre-y)); pointer-events: none; isolation: isolate;
}
.piece article.agence > :is(#creer, #mettre-en-scene, #reprendre, #faire-connaitre).etage > .service-carte > * { pointer-events: auto; }
.piece article.agence > :is(#creer, #mettre-en-scene, #reprendre, #faire-connaitre).etage > .service-carte::before {
  content: ''; grid-area: 1 / 1 / 3 / 2; z-index: -1; margin: calc(var(--cadre-y) * -1) calc(var(--cadre-x) * -1); border-radius: 1.15rem; pointer-events: none;
  background: var(--lecture); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: 0 2rem 4.5rem -2.4rem rgba(3, 7, 22, .6), inset 0 0 0 1px rgba(242, 246, 253, .07);
}
/* Une seule surface : les fonds propres du texte et de la démonstration s'effacent ; la démonstration suit le texte,
   séparée par un filet. */
.piece article.agence > :is(#creer, #mettre-en-scene, #reprendre, #faire-connaitre).etage :is(.service-texte, .demo)::before { content: none; }
.piece article.agence > :is(#creer, #mettre-en-scene, #reprendre, #faire-connaitre).etage > .service-carte > .service-texte { grid-column: 1; grid-row: 1; width: auto; max-width: none; }
.piece article.agence > :is(#creer, #mettre-en-scene, #reprendre, #faire-connaitre).etage > .service-carte > .demo {
  grid-column: 1; grid-row: 2; justify-self: stretch; width: auto; min-width: 0; max-width: none; margin: 1.3rem 0 0; padding: 1.15rem 0 0; border-top: 1px solid var(--filet);
}
/* Le texte, resserré pour que tout le chapitre tienne à l'écran avec ses commandes. */
.piece article.agence > :is(#creer, #mettre-en-scene, #reprendre, #faire-connaitre).etage h2 em { font-size: 2.2em; }
.piece article.agence > :is(#creer, #mettre-en-scene, #reprendre, #faire-connaitre).etage .service-idee { margin-top: .95rem; font-size: min(1.2rem, 5vw); }
.piece article.agence > :is(#creer, #mettre-en-scene, #reprendre, #faire-connaitre).etage .prestations { margin-top: 1.15rem; }
.piece article.agence > :is(#creer, #mettre-en-scene, #reprendre, #faire-connaitre).etage .prestations li { padding: .58rem 0; }
.piece article.agence > :is(#creer, #mettre-en-scene, #reprendre, #faire-connaitre).etage .demo-pas { margin-top: .5rem; }
.piece article.agence > :is(#creer, #mettre-en-scene, #reprendre, #faire-connaitre).etage .demo-note { margin-top: .65rem; }
.piece article.agence > :is(#creer, #mettre-en-scene, #reprendre, #faire-connaitre).etage .service-reserve { margin-top: .8rem; }
/* Le point en cours : le rond plein ; les autres, des commandes (on peut y aller d'un clic). */
.piece article.agence > :is(#creer, #mettre-en-scene, #faire-connaitre).etage .demo-pas button { min-height: 2.35rem; padding-block: .34rem; }

/* Mettre en scène, étage d'un point : la planche garde son propre verre (v15, v17), dans la colonne qu'elle avait. */
.piece article.agence > #mettre-en-scene.etage { --carte-l: 31rem; }

/* Les points d'un étage, reliés : un fil part de chaque rond vers le suivant, et l'eau le remplit jusqu'au point en
   cours (le motif de l'escalier de la Méthode). Les ronds passent devant le fil. */
.piece article.agence > :is(#creer, #mettre-en-scene, #faire-connaitre).etage .demo-pas li, .piece article.agence > #reprendre.etage .eau-volets button { position: relative; }
.piece article.agence > :is(#creer, #mettre-en-scene, #faire-connaitre).etage .demo-pas li:not(:last-child)::after,
.piece article.agence > #reprendre.etage .eau-volets button:not(:last-child)::after {
  content: ''; position: absolute; left: calc(.775rem - .75px); top: 1.15rem; width: 1.5px; height: 100%; pointer-events: none;
  background: linear-gradient(#8fb3ff, #8fb3ff) top / 100% var(--rempli, 0%) no-repeat, rgba(242, 246, 253, .2); transition: background-size .8s var(--courbe);
}
.piece article.agence > :is(#creer, #mettre-en-scene, #faire-connaitre).etage .demo-pas button::before { position: relative; z-index: 1; background-color: #17224a; }
.piece article.agence > :is(#creer, #mettre-en-scene, #faire-connaitre).etage .demo-pas button[aria-current]::before { background-color: #f2f6fd; }
.piece article.agence > #reprendre.etage .eau-volets b { position: relative; z-index: 1; background-color: #17224a; }
.piece article.agence > :is(#creer, #mettre-en-scene, #faire-connaitre).etage .demo:is([data-etat="1"], [data-etat="2"]) .demo-pas li:nth-child(1)::after,
.piece article.agence > :is(#creer, #mettre-en-scene, #faire-connaitre).etage .demo[data-etat="2"] .demo-pas li:nth-child(2)::after,
.piece article.agence > #reprendre.etage .eau:is([data-volet="securiser"], [data-volet="regle"]) .eau-volets button:nth-child(1)::after,
.piece article.agence > #reprendre.etage .eau[data-volet="regle"] .eau-volets button:nth-child(2)::after { --rempli: 100%; }

/* ---------- Reprendre, sur l'écran du bureau ----------
   Sa carte : la ligne de l'écran, les trois volets en liste (des points, comme les temps des autres chapitres ; chacun
   porte sa prestation, dite sous le volet en cours), la réserve et la note. Sa scène avant/après est posée sur la dalle
   (js/app.js, poserEau) ; ses constats, en légende sous l'écran, la suivent (sur téléphone : dans la carte). */
.eau-volets small { display: none; }
.piece article.agence > #reprendre.etage { --carte-l: min(28rem, 32vw); }
.piece article.agence > #reprendre.etage .prestations { display: none; }
.piece article.agence > #reprendre.etage .demo.eau { display: grid; gap: 0; max-width: none; margin-inline: 0; padding: 1.15rem 0 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.piece article.agence > #reprendre.etage .eau-volets { display: grid; gap: 0; margin-top: .5rem; }
.piece article.agence > #reprendre.etage .eau-volets button {
  display: grid; grid-template-columns: 1.55rem minmax(0, 1fr); column-gap: .85rem; align-items: baseline; width: 100%; min-height: 2.35rem; padding: .34rem 0; border: 0; border-radius: .4rem;
  background: none; font-size: max(1rem, 14.5px); line-height: 1.35; text-align: left; color: var(--doux); transition: color .3s ease;
}
.piece article.agence > #reprendre.etage .eau-volets button:hover { color: var(--texte); }
.piece article.agence > #reprendre.etage .eau-volets b { display: grid; place-content: center; width: 1.55rem; height: 1.55rem; border: 1px solid currentColor; border-radius: 50%;
  font: 400 .72em / 1 var(--grot); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: inherit; transform: translateY(-.08em); transition: background-color .3s, border-color .3s, color .3s; }
.piece article.agence > #reprendre.etage .eau-volets small { grid-column: 2; display: block; max-height: 0; overflow: hidden; font-size: max(.88rem, 12.5px); line-height: 1.38; color: var(--doux);
  opacity: 0; transition: max-height .55s var(--courbe), opacity .35s ease, margin .55s var(--courbe); }
.piece article.agence > #reprendre.etage .eau-volets button[aria-selected="true"] { background: none; color: var(--texte); }
.piece article.agence > #reprendre.etage .eau-volets button[aria-selected="true"] b { background: #f2f6fd; border-color: #f2f6fd; color: #131a2e; }
.piece article.agence > #reprendre.etage .eau-volets button[aria-selected="true"] small { max-height: 3em; margin-top: .15rem; opacity: 1; transition-delay: 0s, .15s, 0s; }
.piece article.agence > #reprendre.etage .eau-volets button:focus-visible { outline: 2px solid var(--d-eau); outline-offset: 3px; }
.piece article.agence > #reprendre.etage .eau-panneau { display: block; }
.piece article.agence > #reprendre.etage .demo-note { margin-top: .75rem; }
/* La scène, sur la dalle : une boîte de 768 sur 438 points, fixe, sous la transformation de l'écran (js/app.js). */
html.avec-pc .piece article.agence > #reprendre.etage .eau-scene {
  position: fixed; left: 0; top: 0; z-index: 3; width: 768px; height: 438px; aspect-ratio: auto; border-radius: 0; box-shadow: none;
  transform-origin: 0 0; visibility: hidden; opacity: 0; will-change: transform, opacity;
}
html.avec-pc .piece article.agence > #reprendre.etage .eau-scene.vu { visibility: visible; }
/* La photo fanée de la page d'avant : sur l'écran du bureau, un voile beige plutôt que le filtre (sépia, flou) de la
   page seule. Relevé v19 : ce filtre, dans une scène vue en perspective, tenait une image de 253 ms à son arrivée ;
   sans lui, 100 ms au plus. */
html.avec-pc .piece article.agence > #reprendre.etage .ea-photo { position: relative; }
html.avec-pc .piece article.agence > #reprendre.etage .ea-photo svg { filter: none; }
html.avec-pc .piece article.agence > #reprendre.etage .ea-photo::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 4 / 3; background: rgba(222, 208, 186, .5); pointer-events: none; }
/* Le reflet du verre et ses bords, comme sur l'écran en HTML des autres chapitres (.pc-reflet). */
html.avec-pc .piece article.agence > #reprendre.etage .eau-scene::after { content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .12) 48%, rgba(255, 255, 255, 0) 57%), radial-gradient(130% 115% at 50% 45%, rgba(19, 26, 46, 0) 58%, rgba(19, 26, 46, .1)); }
/* Les constats, en légende sous l'écran : ils suivent le bas de la dalle (--x, --y, --l : js/app.js, poserEau). Pas sur un
   écran tenu debout (la disposition du téléphone : ils restent dans la carte). */
@media (min-width: 761px) and (min-aspect-ratio: 801/1000) {
  html.avec-pc .piece article.agence > #reprendre.etage .eau-pied {
    position: fixed; left: 0; top: 0; z-index: 3; box-sizing: border-box; width: var(--l, 40rem); margin: 0; padding: 1rem 1.35rem 1.1rem;
    transform: translate(var(--x, 0px), var(--y, 0px)); border-radius: 1rem; background: var(--lecture); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15);
    box-shadow: 0 2rem 4.5rem -2.4rem rgba(3, 7, 22, .6), inset 0 0 0 1px rgba(242, 246, 253, .07); visibility: hidden; opacity: 0; transition: opacity .45s ease, visibility 0s .45s;
  }
  html.avec-pc .piece article.agence > #reprendre.etage .eau-pied.vu { visibility: visible; opacity: var(--o, 1); transition: opacity .45s ease; }
  html.avec-pc .piece article.agence > #reprendre.etage .eau-legende li { padding-top: .7rem; }
  /* Volets 2 et 3 : pas de bouton des mesures ; leurs constats prennent toute la largeur de la légende. */
  html.avec-pc .piece article.agence > #reprendre.etage .eau:not([data-volet="moderniser"]) :is(.eau-legende, .eau-mesurer) { grid-column: 1 / -1; }
  html.avec-pc .piece article.agence > #reprendre.etage .eau:not([data-volet="moderniser"]) .eau-mesurer { display: none; }
  html.avec-pc .piece article.agence > #reprendre.etage .eau-legende .m-a { font-size: min(1.14rem, 5vw); }
}

/* Sous un écran du bureau moins large (tablette couchée, petit portable) : une ligne par constat (nom, avant, après),
   le bouton des mesures dessous. Relevé v19 à 1024 × 768 : trois colonnes de 110 points, les libellés se chevauchaient. */
@media (min-width: 761px) and (max-width: 1199px) and (min-aspect-ratio: 801/1000) {
  html.avec-pc .piece article.agence > #reprendre.etage .eau-pied { grid-template-columns: minmax(0, 1fr); gap: .55rem; padding: .75rem 1rem .85rem; }
  html.avec-pc .piece article.agence > #reprendre.etage .eau-legende { grid-template-columns: minmax(0, 1fr); gap: 0; }
  html.avec-pc .piece article.agence > #reprendre.etage .eau-legende li { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: .6rem; align-items: baseline; padding: .35rem 0 .4rem; animation: none; }
  html.avec-pc .piece article.agence > #reprendre.etage .eau-legende li > small { display: none; }
  html.avec-pc .piece article.agence > #reprendre.etage .eau-legende b { font-size: 12.5px; }
  html.avec-pc .piece article.agence > #reprendre.etage .eau-legende :is(.m-de, .m-a) { font-size: 13.5px; }
  html.avec-pc .piece article.agence > #reprendre.etage .eau-mesurer { grid-column: 1; grid-row: 2; justify-self: start; min-height: 40px; font-size: 13.5px; }
}

/* ---------- Agence : les autres arrêts ----------
   Les blocs marqués data-arret sont centrés dans la place que laissent la barre et le pied (js/feuillet.js) : la
   planche de Mettre en scène, le texte et la démonstration de Relier, le sommaire, Notre façon de travailler. Un titre
   ne passe plus sous la barre au moment où l'on s'arrête. */

/* Entre deux arrêts, l'écart qu'il faut pour qu'à chacun, le bloc voisin soit hors de l'écran (relevé v19 à 1440 × 900 :
   le chapeau dépassait au-dessus du sommaire, la carte de Créer au-dessous ; le texte de Relier au-dessus de sa
   démonstration, la note de celle-ci au-dessus de Notre façon de travailler). La fin de page est un arrêt à elle seule :
   la pièce, nette, et l'invitation à continuer. */
.piece article.agence .familles { margin-block: 36svh 42svh; }
.piece article.agence > #relier > .demo.fd { margin-top: 24svh; }
.piece article.agence > .approche { margin-top: 22svh; }
.piece .passage { min-height: 100svh; }

/* ---------- Écrans moins larges (tablette couchée, petit portable) : la carte plus étroite, l'écran du bureau plus grand ---------- */
@media (min-width: 761px) and (max-width: 1199px) {
  .piece article.agence { --carte-l: min(30rem, 34vw); }
  .piece article.agence > #reprendre.etage { --carte-l: min(26rem, 30vw); }
}

/* ---------- Écrans peu hauts (ordinateurs portables) : tout le chapitre tient encore dans sa carte ---------- */
@media (min-width: 761px) and (max-height: 860px) {
  .piece article.agence > :is(#creer, #mettre-en-scene, #reprendre, #faire-connaitre).etage h2 { font-size: min(2.2rem, 7vw); }
  .piece article.agence > :is(#creer, #mettre-en-scene, #reprendre, #faire-connaitre).etage h2 em { font-size: 2.05em; }
  .piece article.agence > :is(#creer, #mettre-en-scene, #reprendre, #faire-connaitre).etage .service-idee { margin-top: .7rem; font-size: 1.08rem; }
  .piece article.agence > :is(#creer, #mettre-en-scene, #reprendre, #faire-connaitre).etage .prestations { margin-top: .85rem; }
  .piece article.agence > :is(#creer, #mettre-en-scene, #reprendre, #faire-connaitre).etage .prestations li { padding: .42rem 0; font-size: max(1rem, 14.5px); }
  .piece article.agence > :is(#creer, #mettre-en-scene, #reprendre, #faire-connaitre).etage > .service-carte > .demo { margin-top: 1rem; padding-top: .9rem; }
  .piece article.agence > :is(#creer, #mettre-en-scene, #reprendre, #faire-connaitre).etage :is(.demo-pas button, .eau-volets button) { min-height: 2.1rem; padding-block: .24rem; }
}
/* La planche de Mettre en scène, resserrée de même (relevé v19 à 1366 × 768 : 650 points pour 563 de place). */
@media (min-width: 761px) and (max-height: 860px) {
  .piece article.agence > #mettre-en-scene.etage .planche { padding-block: 1.9rem 1.7rem; }
  .piece article.agence > #mettre-en-scene.etage .planche h2 { font-size: min(2.2rem, 7vw); }
  .piece article.agence > #mettre-en-scene.etage .planche h2 em { font-size: 1.9em; }
  .piece article.agence > #mettre-en-scene.etage .planche .service-idee { margin-top: .7rem; font-size: 1.05rem; }
  .piece article.agence > #mettre-en-scene.etage .planche .prestations { margin-top: .9rem; }
  .piece article.agence > #mettre-en-scene.etage .planche .prestations li { padding: .42rem 0; }
  .piece article.agence > #mettre-en-scene.etage .planche .lumiere { margin-top: 1.1rem; padding-top: 1rem; }
  .piece article.agence > #mettre-en-scene.etage .planche .service-renvoi { margin-top: .8rem; }
}
@media (min-width: 761px) and (max-height: 740px) {
  .piece article.agence > #mettre-en-scene.etage .planche { padding-block: 1.5rem 1.35rem; }
  .piece article.agence > #mettre-en-scene.etage .planche h2 em { font-size: 1.7em; }
  .piece article.agence > #mettre-en-scene.etage .planche .prestations li { padding: .3rem 0; }
  .piece article.agence > #mettre-en-scene.etage .planche .lumiere input { height: 2.2rem; }
  .piece article.agence > #mettre-en-scene.etage .planche :is(.demo-note, .service-renvoi) { font-size: max(.8rem, 12px); }
}
@media (min-width: 761px) and (max-height: 740px) {
  .piece article.agence { --barre-h: 5rem; --bas-h: 4.4rem; }
  .piece article.agence > :is(#creer, #mettre-en-scene, #reprendre, #faire-connaitre).etage h2 em { font-size: 1.85em; }
  .piece article.agence > :is(#creer, #mettre-en-scene, #reprendre, #faire-connaitre).etage .prestations li { padding: .3rem 0; }
  .piece article.agence > :is(#creer, #mettre-en-scene, #reprendre, #faire-connaitre).etage :is(.demo-note, .service-reserve) { font-size: max(.8rem, 12px); }
}

/* ---------- Téléphone, et tout écran tenu debout (une tablette en portrait) : l'écran du bureau en haut, la carte en bas ----------
   Un point de plus à l'entrée d'un étage : le texte du chapitre, entier (data-point -1, js/feuillet.js) ; puis, à chaque
   point, le titre et les commandes seuls, l'écran du bureau au-dessus. (Côte à côte, sur une tablette tenue debout,
   l'écran du bureau n'aurait eu que 250 points de large.) */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .piece article.agence { --barre-h: 4.6rem; --bas-h: 4.6rem; --pas-etage: 70svh; --carte-l: 100%; }
  .piece article.agence > .etage[data-points="1"] { --points: 2; }
  .piece article.agence > .etage[data-points="2"] { --points: 3; }
  .piece article.agence > .etage[data-points="3"] { --points: 4; }
  .piece article.agence > .etage[data-points="4"] { --points: 5; }
  .piece article.agence > :is(#creer, #mettre-en-scene, #reprendre, #faire-connaitre).etage > .service-carte { grid-template-columns: minmax(0, 1fr); align-content: end; padding-top: calc(var(--barre-h) + .5rem); }
  .piece article.agence > :is(#creer, #mettre-en-scene, #reprendre, #faire-connaitre).etage > .service-carte::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(14, 23, 56, .92); }
  .piece article.agence > :is(#creer, #mettre-en-scene, #reprendre, #faire-connaitre).etage h2 em { font-size: 1.9em; }
  .piece article.agence > :is(#creer, #mettre-en-scene, #reprendre, #faire-connaitre).etage[data-point]:not([data-point="-1"]) .service-texte > :not(h2) { display: none; }
  /* Mettre en scène : le texte d'abord (sans le curseur) ; puis le curseur seul, la pièce visible au-dessus. */
  .piece article.agence > #mettre-en-scene.etage[data-point="-1"] .planche > :is(.lumiere, .service-renvoi) { display: none; }
  .piece article.agence > #mettre-en-scene.etage[data-point]:not([data-point="-1"]) .planche > :is(.service-idee, .prestations) { display: none; }
  .piece article.agence > #mettre-en-scene.etage[data-point]:not([data-point="-1"]) .planche .lumiere { margin-top: 1rem; padding-top: 1rem; }
  .piece article.agence > :is(#creer, #mettre-en-scene, #reprendre, #faire-connaitre).etage[data-point]:not([data-point="-1"]) h2 { font-size: 1.05rem; line-height: 1.1; }
  .piece article.agence > :is(#creer, #mettre-en-scene, #reprendre, #faire-connaitre).etage[data-point]:not([data-point="-1"]) h2 em { font-size: 2.3em; }
  .piece article.agence > :is(#creer, #mettre-en-scene, #reprendre, #faire-connaitre).etage[data-point="-1"] > .service-carte > .demo { display: none; }
  .piece article.agence > :is(#creer, #mettre-en-scene, #reprendre, #faire-connaitre).etage > .service-carte > .demo { margin-top: .9rem; padding-top: .8rem; }
  .piece article.agence > #reprendre.etage .eau-pied { margin-top: .5rem; }
  /* (Sur une tablette tenue debout aussi : la légende en une colonne, sans le bouton des mesures, comme au téléphone.) */
  .piece article.agence > #reprendre.etage .eau-pied, .piece article.agence > #reprendre.etage .eau-legende { grid-template-columns: minmax(0, 1fr); }
  .piece article.agence > #reprendre.etage .eau-mesurer { display: none; }
  .piece article.agence > #reprendre.etage .eau-volets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; margin-top: .45rem; }
  .piece article.agence > #reprendre.etage .eau-volets button { grid-template-columns: minmax(0, 1fr); row-gap: .3rem; align-content: start; min-height: 0; padding: .5rem .55rem .55rem; border: 1px solid var(--filet); border-radius: .8rem; font-size: 13.5px; line-height: 1.2; }
  .piece article.agence > #reprendre.etage .eau-volets button[aria-selected="true"] { border-color: #f2f6fd; }
  .piece article.agence > #reprendre.etage .eau-volets small { display: none; }
  .piece article.agence > #reprendre.etage .eau-volets button:not(:last-child)::after { content: none; }
  .piece article.agence > #reprendre.etage .demo-ecran { display: none; }
  .piece article.agence > #reprendre.etage .eau-legende li > small { display: none; }
  .piece article.agence > #reprendre.etage .eau-legende { gap: 0; }
  .piece article.agence > #reprendre.etage .eau-legende li { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: .6rem; align-items: baseline; padding: .42rem 0 .45rem; animation: none; }
  .piece article.agence > #reprendre.etage .eau-legende b { font-size: 12.5px; }
  .piece article.agence > #reprendre.etage .eau-legende :is(.m-de, .m-a) { font-size: 13.5px; }
  .piece article.agence > #reprendre.etage .demo-note { display: none; }
}

/* ---------- La barre et le repère, lisibles sur la scène ----------
   Relevé de contraste v19 (1440 × 900, à chaque point de la Méthode et de l'Agence) : la langue qui n'est pas lue
   (« EN ») de 2,5 à 4,3, les numéros du repère (« 03 », « 04 ») de 2,2 à 3,3, ses noms de 4,1 à 4,3, pour 4,5 attendu.
   La langue et les numéros sont plus francs ; dans la Méthode, le nom lu du repère porte le halo clair du lieu (celui
   de l'Agence a le sien depuis la v15). Seuls les noms visibles : un halo sur un nom transparent se voyait. */
.langues a { opacity: .9; }          /* v21 (R5) : « EN » non lu, 4,3:1 à .8 sur le papier de la Méthode */
.repere a span { opacity: .82; }
.repere a[aria-current] span { opacity: 1; }
body[data-vue="methode"] :is(.repere a, .repere .sous):is(:hover, :focus-visible, [aria-current]) { text-shadow: 0 0 .5rem rgba(236, 241, 248, .98), 0 0 .15rem rgba(236, 241, 248, .98); }

/* ---------- Méthode : la carte de l'étape laisse sa place au repère des sections ----------
   Relevé v18 (1440 × 900) : le bord droit de la carte passait sur le « 03 » du repère. */
@media (min-width: 761px) {
  .piece .etape { right: calc(var(--marge) + 1.9rem); width: min(24.75rem, 30vw); }
}

/* ==================== v20 — Agence : la barre sans bande, la goutte de « Mettre en scène », Reprendre posé, Relier et
   Notre façon de travailler en un seul arrêt ====================
   (Demandes de Mohammad sur la v19, 19 octobre 2026. La goutte : js/objet.js ; la remontée : js/arrets.js.) */

/* ---------- La barre, sans bande ----------
   Sa bande (v15 à v19 : un bleu de nuit à 94 %, fondu sur 5,6 rem sous la barre) voilait le haut des titres et de
   l'écran du bureau (« la couleur bleu nuageux […] gêne le titre », « gêne l'écran du PC »). Avec les temps d'arrêt,
   aucun texte ne s'arrête plus sous la barre : elle est retirée de l'Agence. Ses liens gardent un halo sombre, serré
   autour d'eux, et le haut de l'image 3D s'assombrit un peu derrière elle (js/moteur.js, uCiel) : ils restent lisibles
   sur la scène. */
body[data-vue="agence"] .barre::before, body[data-vue="agence"].lit .barre::before { opacity: 0; }
body[data-vue="agence"] .barre :is(.liens a, .liens .italique, .langues a, .logo-mot) { text-shadow: 0 0 .4rem rgba(8, 14, 38, .6), 0 0 1.2rem rgba(8, 14, 38, .45); }

/* ---------- Mettre en scène : une carte comme les autres chapitres ; la goutte, à droite ----------
   Le texte et les trois temps de la démonstration tiennent une seule carte (les règles des étages, plus haut) ; chaque
   temps porte sa commande, sur sa ligne : les matières, la taille. La caméra cadre la goutte dans la place que la
   carte laisse (js/app.js, cadrerEcrans). */
.piece article.agence > #mettre-en-scene.etage { --carte-l: min(33rem, 38vw); }
.piece article.agence > #mettre-en-scene.etage .demo-ecran i { width: .7rem; height: .7rem; margin: 0 .26rem .1rem; border-radius: 0 50% 50% 50%; transform: rotate(45deg); }
.piece article.agence > #mettre-en-scene.etage .demo-ecran i::after { content: none; }
html.avec-pc .piece article.agence > #mettre-en-scene.etage .demo-pas { margin-top: .5rem; }
.piece article.agence > #mettre-en-scene.etage .demo-pas li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 1rem; }
.piece article.agence > #mettre-en-scene.etage .demo-pas li > button { width: auto; min-width: 0; }
.demo.objet .objet-matieres, .demo.objet .objet-taille { display: flex; align-items: center; }
html.page .demo.objet { display: none; }
/* Les matières : cinq pastilles (des boutons radio) ; celle de la goutte, cerclée de clair. */
.objet-matieres { gap: .5rem; }
.objet-matieres label { position: relative; display: block; flex: none; width: 1.45rem; height: 1.45rem; cursor: pointer; }
.objet-matieres input { position: absolute; inset: -.6rem -.25rem; z-index: 1; width: auto; height: auto; margin: 0; opacity: 0; cursor: pointer; }
.objet-matieres i { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(242, 246, 253, .3); transition: transform .4s var(--courbe), box-shadow .3s ease; }
.objet-matieres label:hover i { transform: scale(1.14); }
.objet-matieres input:checked + i { box-shadow: 0 0 0 2px #17224a, 0 0 0 3.5px #f2f6fd; }
.objet-matieres input:focus-visible + i { outline: 2px solid #8fb3ff; outline-offset: 5px; }
.objet-matieres [data-matiere="nacre"] + i { background: radial-gradient(circle at 32% 28%, #fff, #e4eaf7 40%, #aab6db 82%); }
.objet-matieres [data-matiere="glacier"] + i { background: radial-gradient(circle at 32% 28%, #f3f8ff, #b2d0ff 44%, #6a90d6 88%); }
.objet-matieres [data-matiere="encre"] + i { background: radial-gradient(circle at 32% 28%, #7488c8, #263872 50%, #0e1736 92%); }
.objet-matieres [data-matiere="cuivre"] + i { background: radial-gradient(circle at 32% 28%, #ffe2c6, #d88a52 42%, #84461f 88%); }
.objet-matieres [data-matiere="jade"] + i { background: radial-gradient(circle at 32% 28%, #d9fff1, #5bc3a4 44%, #26705d 90%); }
/* La taille : un curseur dont la poignée est la goutte du signe ; sa valeur à côté. */
.objet-taille { gap: .6rem; }
.objet-taille input { -webkit-appearance: none; appearance: none; width: min(8.5rem, 22vw); height: 2.3rem; margin: 0; background: transparent; cursor: ew-resize; touch-action: pan-y; }
.objet-taille input::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, rgba(242, 246, 253, .3), #8fb3ff); }
.objet-taille input::-moz-range-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, rgba(242, 246, 253, .3), #8fb3ff); }
.objet-taille input::-webkit-slider-thumb { -webkit-appearance: none; width: 1.3rem; height: 1.7rem; margin-top: calc(-.85rem + 1.5px); border: 0; background: #f2f6fd;
  -webkit-mask: url('../assets/logo/goutte.svg') center / contain no-repeat; mask: url('../assets/logo/goutte.svg') center / contain no-repeat; transition: transform .3s var(--courbe); }
.objet-taille input::-moz-range-thumb { width: 1.3rem; height: 1.7rem; border: 0; border-radius: 0; background: #f2f6fd; mask: url('../assets/logo/goutte.svg') center / contain no-repeat; }
.objet-taille input:is(:hover, :active)::-webkit-slider-thumb { transform: scale(1.18); }
.objet-taille input:focus-visible { outline: 2px solid #8fb3ff; outline-offset: 2px; border-radius: 99rem; }
.objet-taille output { min-width: 3.1em; font-size: max(.9rem, 13px); font-variant-numeric: tabular-nums; text-align: right; color: rgba(242, 246, 253, .82); }

/* ---------- La goutte sélectionnée : son cadre, au-dessus de la page (js/objet.js) ----------
   Quatre coins, quatre poignées (à la souris, tirées, elles changent sa taille), et une étiquette : son nom, sa
   matière, sa taille. Les coins arrivent en se resserrant sur elle. Sur elle, la main tourne la goutte. */
.objet-cadre { position: fixed; left: 0; top: 0; z-index: 5; width: 10px; height: 10px; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
.objet-cadre.vu { opacity: 1; visibility: visible; transition: opacity .45s ease .05s; }
.objet-cadre i { position: absolute; width: 1.2rem; height: 1.2rem; border: 0 solid #f2f6fd; filter: drop-shadow(0 0 .3rem rgba(8, 14, 38, .5)); transition: transform .7s var(--courbe); }
.objet-cadre i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; border-top-left-radius: .4rem; }
.objet-cadre i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; border-top-right-radius: .4rem; }
.objet-cadre i:nth-child(3) { right: 0; bottom: 0; border-width: 0 2px 2px 0; border-bottom-right-radius: .4rem; }
.objet-cadre i:nth-child(4) { left: 0; bottom: 0; border-width: 0 0 2px 2px; border-bottom-left-radius: .4rem; }
.objet-cadre:not(.vu) i:nth-child(1) { transform: translate(-1rem, -1rem); }
.objet-cadre:not(.vu) i:nth-child(2) { transform: translate(1rem, -1rem); }
.objet-cadre:not(.vu) i:nth-child(3) { transform: translate(1rem, 1rem); }
.objet-cadre:not(.vu) i:nth-child(4) { transform: translate(-1rem, 1rem); }
.objet-cadre b { position: absolute; width: .7rem; height: .7rem; border: 1.5px solid #f2f6fd; border-radius: .16rem; background: #1d2f63; pointer-events: auto; transform: translate(-50%, -50%); transition: transform .3s var(--courbe); }
.objet-cadre b::before { content: ''; position: absolute; inset: -.75rem; }
.objet-cadre b:hover { transform: translate(-50%, -50%) scale(1.3); }
.objet-cadre b[data-coin="0"] { left: 0; top: 0; cursor: nwse-resize; }
.objet-cadre b[data-coin="1"] { left: 100%; top: 0; cursor: nesw-resize; }
.objet-cadre b[data-coin="2"] { left: 100%; top: 100%; cursor: nwse-resize; }
.objet-cadre b[data-coin="3"] { left: 0; top: 100%; cursor: nesw-resize; }
.objet-etiquette { position: absolute; left: 0; bottom: calc(100% + .6rem); display: flex; align-items: baseline; gap: .55rem; margin: 0; padding: .3rem .72rem .34rem;
  border-radius: .45rem; background: rgba(14, 23, 56, .84); box-shadow: inset 0 0 0 1px rgba(242, 246, 253, .14), 0 .6rem 1.4rem -.6rem rgba(3, 7, 22, .6);
  font-size: max(.82rem, 12px); line-height: 1.2; letter-spacing: .02em; white-space: nowrap; color: #f2f6fd; }
.objet-nom { font-weight: 600; }
.objet-mesure { font-variant-numeric: tabular-nums; color: rgba(242, 246, 253, .8); }
html.sur-objet .piece-corps { cursor: grab; }
html.tient-objet .piece-corps { cursor: grabbing; }
html.tient-objet { -webkit-user-select: none; user-select: none; }
@media (pointer: coarse) { .objet-cadre b { display: none; } }
@media (prefers-reduced-motion: reduce) { .objet-cadre, .objet-cadre i { transition: none; } }

/* ---------- Reprendre : la légende sous l'écran, posée ----------
   Elle ne suit plus la dalle image par image (js/app.js, poserEau) : posée une fois sous l'écran, à sa place d'arrivée,
   elle paraît quand la caméra y est. Ses constats tiennent trois colonnes de toute sa largeur ; le bouton des mesures
   (premier volet) passe en pied, à droite. Relevé v19 à 1900 × 830 : à côté du bouton, les trois constats tenaient en
   250 points, leurs libellés se chevauchaient (« Contraste du » sur « Hauteur du bouton »). Son verre est plein, sans flou :
   paraissant à l'arrivée, un flou de cette taille tenait une image de 155 ms (relevé v20, carte graphique réelle). */
@media (min-width: 1200px) and (min-aspect-ratio: 801/1000) {
  html.avec-pc .piece article.agence > #reprendre.etage .eau-pied { grid-template-columns: minmax(0, 1fr); gap: .75rem; padding: .95rem 1.35rem 1rem; transition: opacity .5s ease, visibility 0s .5s;
    background: rgba(16, 26, 62, .9); -webkit-backdrop-filter: none; backdrop-filter: none; }
  html.avec-pc .piece article.agence > #reprendre.etage .eau-pied.vu { transition: opacity .6s ease .1s; }
  /* (Prête dès que la scène paraît sur l'écran : visible mais transparente, son calque est fait pendant que la caméra
     approche ; à l'arrivée, elle n'a plus qu'à se montrer.) */
  html.avec-pc .piece article.agence > #reprendre.etage .eau-pied.prete { visibility: visible; transition: opacity .5s ease; }
  html.avec-pc .piece article.agence > #reprendre.etage .eau-legende { grid-column: 1; grid-row: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.6rem; }
  html.avec-pc .piece article.agence > #reprendre.etage .eau-legende li { gap: .2rem; padding-top: .6rem; }
  html.avec-pc .piece article.agence > #reprendre.etage .eau-legende .m-a { font-size: min(1.12rem, 4.6vw); }
  html.avec-pc .piece article.agence > #reprendre.etage .eau-mesurer { grid-column: 1; grid-row: 2; justify-self: end; min-height: 2.3rem; padding: 0 1.05rem; font-size: max(.9rem, 13px); }
}

/* ---------- Notre façon de travailler : un seul arrêt, au milieu de l'écran ----------
   Demande de Mohammad : « le mettre plus au milieu de l'écran […] il doit vraiment s'arrêter au milieu ». Relevé v19 à
   1900 × 830 : la section comptait ses marges intérieures (30 % de l'écran) ; plus haute que la place, elle avait deux
   arrêts, le bloc en bas, puis en haut. Elle n'a plus que la marge de son cadre ; resserrée et centrée dans la largeur,
   elle tient à l'écran et s'arrête au milieu de la place libre. Ses quatre règles entrent l'une après l'autre. */
.piece article.agence > .approche { box-sizing: border-box; width: min(70rem, 100%); margin: 30svh auto 0; padding: 2.3rem 2.6rem 2.4rem; }
.piece article.agence .approche::before { inset: 0; }
.piece article.agence .approche > h2 { max-width: none; font-size: min(3.9rem, 9vw); }
.piece article.agence .approche .regles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 2rem; max-width: none; margin-top: 1.7rem; }
.piece article.agence .approche .regles li { padding: 1.05rem 0 0; }
.piece article.agence .approche .regles h3 { font-size: min(1.3rem, 5vw); }
.piece article.agence .approche .regles p { margin-top: .5rem; font-size: max(.98rem, 14px); line-height: 1.45; }
.piece article.agence .approche .franchise { max-width: 46em; margin-top: 1.8rem; padding-top: 1.3rem; border-top: 1px solid var(--filet); font-size: min(1.08rem, 4.4vw); }
.piece article.agence .anime .approche .regles li.revele:nth-child(2) { transition-delay: .1s; }
.piece article.agence .anime .approche .regles li.revele:nth-child(3) { transition-delay: .2s; }
.piece article.agence .anime .approche .regles li.revele:nth-child(4) { transition-delay: .3s; }
@media (min-width: 761px) and (max-width: 1199px) { .piece article.agence .approche .regles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; } }
@media (max-width: 760px) {
  .piece article.agence > .approche { width: auto; margin-top: 20svh; padding: 1.5rem 1.2rem 1.6rem; }
  .piece article.agence .approche .regles { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Ce qui doit tenir à l'écran y tient (js/feuillet.js, ajuster) ----------
   Sur un écran large et peu haut, une carte d'étage ou un bloc d'arrêt plus haut que la place libre se resserre, juste
   assez (--serre, jamais sous 0,72). Dans la carte de Reprendre, la scène et sa légende, posées sur l'écran du bureau,
   ne bougent pas. */
.piece article.agence > .etage > .service-carte > :is(.service-texte, .demo:not(.eau)),
.piece article.agence > .etage > .service-carte > .demo.eau > :not(.eau-panneau),
.piece article.agence [data-arret] { zoom: var(--serre, 1); }
/* Relier et Notre façon de travailler ne sont rendus qu'à l'approche (content-visibility, v15) ; leur taille d'attente est
   désormais proche de leur vraie taille, pour que leurs arrêts soient justes avant même leur premier rendu (relevé v20 :
   la section de Notre façon de travailler comptait 1 589 points d'attente pour 369 à 487 réels ; ses arrêts étaient
   faux jusqu'à son rendu). Rendus d'emblée, la démonstration de Relier et ses verres se préparaient pendant l'arrivée sur
   Reprendre : une image de 160 ms au lieu de 95 (relevé v20, carte graphique réelle). Rendus une fois, leur taille est
   retenue (auto). Tailles relevées : 25,6 rem pour l'une, padding compris ; la moitié de l'écran et 87 à 94 rem pour l'autre.
   (Les mesurer en entier par le script, pour une taille d'attente exacte, coûtait plus cher encore : 168 ms au lieu de 115
   à l'arrivée sur Reprendre, trois relevés chacun. Avant leur rendu, les arrêts qui les suivent sont justes à 50 points
   près ; ils se reposent dès qu'elles sont rendues, avant qu'on y arrive.) */
.piece article.agence > #relier { content-visibility: auto; contain-intrinsic-block-size: auto 90rem; align-content: start; }
/* (align-content : en attente, sa grille s'étirait jusqu'à la taille d'attente, et son texte descendait de 150 points.) */
.piece article.agence > .approche { content-visibility: auto; contain-intrinsic-block-size: auto 21rem; }
/* Relier : assez d'écart avec l'étage de Faire connaître pour qu'à l'arrêt de son texte, le bas de la carte d'avant
   soit hors de l'écran (relevé v20 à 1900 × 830 : sa dernière ligne restait en haut, sous la barre, à 60 points). */
.piece article.agence > #relier { padding-top: 26svh; }
@media (max-width: 760px), (max-aspect-ratio: 4/5) { .piece article.agence > #relier { padding-top: 14svh; } }
/* La bande de la barre revient, dans l'Agence, quand un bloc plus haut que l'écran passe sous elle (js/app.js, couvre). */
body[data-vue="agence"].couvre .barre::before { opacity: .94; }
/* Reprendre au téléphone : au premier point (le texte du chapitre), la page avant/après est déjà sur l'écran du bureau ;
   seules ses commandes attendent (relevé v19 et v20 : l'écran restait blanc, vide, à ce point). */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .piece article.agence > #reprendre.etage[data-point="-1"] > .service-carte > .demo.eau { display: grid; margin: 0; padding: 0; border: 0; }
  .piece article.agence > #reprendre.etage[data-point="-1"] > .service-carte > .demo.eau > :not(.eau-panneau),
  .piece article.agence > #reprendre.etage[data-point="-1"] .eau-pied { display: none; }
  .piece article.agence > #relier { padding-top: 24svh; }
}