/* MARZEL — prototype de la page « La maquette vivante » (direction D, D-065 et D-066). S'ajoute à site.css.
   Le jeu et les explications ensemble : à l'arrivée, le titre, la promesse et le bouton à gauche, la maquette à droite ;
   au défilement, la maquette reste en place et le texte explique chaque arrêt (site/jeu/visite.js).
   La maquette est affichée par le moteur de la session « MARZEL » (D-072, D-073), qui pose sa couche en premier enfant
   de [data-jeu] ; la page pose par-dessus ses repères, son compteur et ses commandes. Sans moteur (pas de JavaScript,
   images absentes) : la section n'a pas l'attribut data-maquette, la maquette est une image fixe et chaque arrêt
   montre la sienne.
   Direction artistique des slides du 2026-10-15 (09-outils/hyperframes/film-reseaux/publication-01.html) : chaque
   section dans l'esprit d'une slide. Les chiffres d'un arrêt dans une carte blanche (slide 2), le bilan en grand chiffre
   bleu et en cases (slide 4), la méthode en trois cartes à tuile d'icône (slide 3), la réservation en carte à coches avec
   le téléphone en grand (slide 5). Toutes les sections sont posées sur le fond à lueurs (site.css) : plus de bande blanche.
   Sur la maquette, un seul aplat de couleur : le bleu de MARZEL (« Après MARZEL » choisi, repères côté « avec »). Les
   réglages sont des sélecteurs segmentés façon iPhone (gris clair, le choix en blanc), les étiquettes des cartes
   blanches à filet ; repères à l'encre côté « avant ». */

.proto { padding: 0.5rem 1rem; background: var(--encre); color: var(--blanc); font: 500 0.8125rem/1.4 var(--mono); text-align: center; }
/* La pastille « Exemple » des slides : Plex Mono, bleu des mots sur bleu pâle, coins très arrondis ; 15 px au moins
   (2,2 % de la largeur sur la slide) */
.exemple { display: inline-block; padding: 0.3rem 0.75rem; border-radius: 0.8em; background: var(--bleu-pale); font: 500 clamp(0.9375rem, 0.85rem + 0.15vw, 1rem)/1.4 var(--mono); letter-spacing: 0; color: var(--bleu-texte); vertical-align: 0.12em; white-space: nowrap; }
/* Les chiffres dans le texte courant : en 600 à l'encre, comme « 4 h 30 » sur la slide 2, jamais noyés dans le gris
   (.nombre : le chiffre et son unité, « 19 semaines ») */
.visite-exemple [data-chiffre], .arret-marzel dd [data-chiffre], .arret-bilan-chiffre [data-chiffre], .nombre { font-weight: 600; color: var(--encre); font-variant-numeric: tabular-nums; }
/* Les cartes blanches des slides */
.arret-cout, .bilan, .methode .etape, .preuve, .suite, .questions-liste, .repartition {
  border: 1px solid var(--carte-filet);
  border-radius: var(--carte-rayon);
  background: var(--blanc);
  box-shadow: var(--carte-ombre);
}
.bloc { padding-block: clamp(4.5rem, 6.5vw, 7.5rem); }

/* ================= L'accroche et la visite ================= */
.visite { padding-bottom: 5rem; }
/* --maquette-h : la hauteur du panneau de la maquette pendant la visite ; --maquette-l : sa largeur. 5,625 rem : l'en-tête
   (88 px) et 2 px de marge, pour que le panneau ne déborde pas sous le bas de l'écran à l'arrivée et que l'accroche
   remplisse le premier écran sans laisser voir le haut de la section suivante (7,75 rem jusqu'au 2026-10-16, quand le
   bandeau « Version d'essai » du prototype, 34 px, s'ajoutait à l'en-tête).
   La grille est un conteneur : ses enfants mesurent la place en cqw (sa largeur). */
.visite-grille { container-type: inline-size; --maquette-h: calc(100svh - 5.625rem); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 3.5rem; }
.visite-une { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - 5.625rem); padding-block: 1.5rem 3rem; }
/* La ligne en Plex Mono au-dessus du titre, comme « MARZEL · Saint-Nazaire » sur la slide 1 */
.une-lieu { margin-bottom: clamp(1rem, 1.6vw, 1.75rem); }
/* L'accroche suit sa colonne : « Le temps, c'est / de l'argent. » en Plex 700, puis la réponse en Newsreader italique,
   plus petite comme sur la slide 1 (96 px pour 106), en deux lignes (« MARZEL trouve / là où vous en perdez. ») de 900
   à 2 240 px : le gras domine, l'italique suit (à 0,92 em, la réponse passait sur trois lignes et pesait plus que le
   constat). « Le temps, c'est » mesure 6,3 fois la taille du titre : la taille suit la colonne divisée par 7,4, et
   l'accroche reste le plus grand titre de la page. */
.visite-une .une-titre > em { font-size: 0.88em; }
@media (min-width: 900px) {
  .visite-grille { --maquette-l: calc((100cqw - 3.5rem) * 6 / 11); --maquette-h: min(100svh - 5.625rem, max(var(--maquette-l) * 0.75, 50svh)); }
  .visite-une .une-titre { font-size: max(2.25rem, (100cqw - 3.5rem) * 5 / 11 / 7.4); }
}
/* Grand écran (2026-10-15, « plus large ») : le texte garde environ un tiers de la largeur (540 px de colonne à 1 440 px
   d'écran, 660 px à 2 240), la maquette prend tout le reste, dans un panneau en 4:3 (1 060 × 795 px à 2 240 × 1 260),
   centré à l'écran pendant la visite. Sous 1 280 px : 5 parts de texte et 6 de maquette. */
@media (min-width: 1280px) {
  .visite-grille {
    grid-template-columns: clamp(24rem, 24% + 14.25rem, 46rem) minmax(0, 1fr);
    column-gap: clamp(3.5rem, 4.5%, 5.5rem);
    --maquette-l: calc(100cqw - clamp(24rem, 24cqw + 14.25rem, 46rem) - clamp(3.5rem, 4.5cqw, 5.5rem));
    --maquette-h: min(100svh - 5.625rem, max(var(--maquette-l) * 0.75, 56svh));
  }
  .visite-une .une-titre { font-size: min(5.5rem, clamp(24rem, 24cqw + 14.25rem, 46rem) / 7.4); }
}
/* Le panneau de la maquette : le rayon, le filet et l'ombre des cartes ; il garde le fond de ses images. Sur ordinateur,
   un passe-partout blanc (et le filet des cartes autour) : le fond gris-beige des rendus reste dans une carte blanche. */
/* --etiquette : la taille des étiquettes et des réglages posés sur la maquette, qui suit l'écran comme le texte (14 px
   jusqu'à 1 440, 17 px à 2 240) ; --repere : le diamètre des repères (36 px, 42 px à 2 240) */
.visite-maquette { --etiquette: clamp(0.875rem, 0.55rem + 0.36vw, 1.125rem); --repere: clamp(36px, 1.25rem + 1vw, 46px); grid-column: 2; grid-row: 1; align-self: center; position: relative; overflow: hidden; border: 1px solid var(--carte-filet); border-radius: var(--carte-rayon); background: var(--fond); box-shadow: var(--carte-ombre); }
@media (min-width: 900px) {
  .visite-maquette { --passe: clamp(8px, 0.55vw, 12px); box-shadow: 0 0 0 var(--passe) var(--blanc), 0 0 0 calc(var(--passe) + 1.5px) var(--carte-filet), var(--carte-ombre); }
}
/* La colonne de gauche : textes et cartes à la même largeur, comme les cartes des slides (936 px chacune) ; 42 rem au
   plus, soit 66 signes par ligne à 20 px (à 1 440 px, la colonne fait 540 px : rien ne change) */
.visite-exemple, .repartition, .arret-faits, .arret-bilan-chiffre, .bilan { max-width: 42rem; }
.rassure { max-width: 26rem; }
.visite-arrets { grid-column: 1 / -1; grid-row: 2; }

/* La maquette : l'image fixe de la page sans moteur ; avec lui, son image fixe à lui, puis ses tuiles */
.maquette-affiche { width: 100%; height: auto; }
.maquette-sur { display: none; }
.visite[data-maquette] .visite-grille { grid-template-rows: auto auto; }
/* Le panneau reste au milieu de l'écran pendant la visite ; à l'arrivée, il est centré sur l'accroche */
.visite[data-maquette] .visite-maquette { grid-row: 1 / 3; align-self: start; position: sticky; top: calc((100svh - var(--maquette-h)) / 2); height: var(--maquette-h); margin-top: calc((100svh - 5.625rem - var(--maquette-h)) / 2); background: #D0CCC6; }
.visite[data-maquette] .visite-arrets { grid-column: 1; }
.visite[data-maquette] .maquette-affiche { display: none; }
.visite[data-maquette="oui"] .maquette-sur { display: block; }

/* Ce qui est posé sur la maquette : repères, compteur, réglages (les liaisons bleues sont dessinées par le moteur) */
.maquette-sur > * { position: absolute; }
.repere[hidden] { display: none; }
/* Le trait part du bord du rond (visite.js le décale du rayon) : il ne barre jamais le chiffre */
.repere-trait { position: absolute; left: 50%; top: 50%; z-index: -1; height: 2px; margin-top: -1px; background: var(--encre); transform-origin: 0 50%; pointer-events: none; }
.repere-trait[hidden] { display: none; }
.repere { left: 0; top: 0; display: grid; place-items: center; width: var(--repere); height: var(--repere); margin: calc(var(--repere) / -2) 0 0 calc(var(--repere) / -2); border: 2px solid var(--encre); border-radius: 50%; background: var(--blanc); color: var(--encre); font: 500 calc(var(--repere) * 0.42)/1 var(--mono); text-decoration: none; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.repere.actif { background: var(--encre); color: var(--blanc); }
.visite[data-mode="avec"] .repere { border-color: var(--bleu); background: var(--bleu); color: var(--blanc); }
.visite[data-mode="avec"] .repere-trait { background: var(--bleu); }
/* Les étiquettes : des cartes blanches à filet et ombre douce, le message en Plex 600 (le compteur) ou 400 (l'aide).
   Masquées ou non, elles laissent passer les clics et les glissements vers les postes placés dessous ; visite.js en
   écarte les repères. */
.maquette-compteur { left: 1rem; top: 1rem; max-width: calc(100% - 2rem); padding: 0.5em 0.625em 0.5em 0.875em; border: 1px solid var(--filet); border-radius: 16px; background: rgba(255, 255, 255, 0.95); font: 600 max(0.9375rem, var(--etiquette))/1.4 var(--sans); box-shadow: 0 6px 18px rgba(11, 26, 62, 0.08); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.visite:not([data-arret="0"]) .maquette-compteur { opacity: 1; }
.visite[data-mode="avec"] .maquette-compteur { border-color: var(--bleu); color: var(--bleu-texte); }
/* La pastille « Exemple » reste celle des slides des deux côtés (bleu des mots sur bleu pâle), un cran sous le message.
   Panneau étroit (téléphone, ordinateur de 900 à 1 100 px) : elle passe sous le message, et le compteur ne prend que la
   largeur de sa phrase au lieu de toute celle du panneau (le panneau est un conteneur nommé « maquette »). */
.visite-maquette { container: maquette / inline-size; }
.maquette-sur .exemple { margin-left: 0.25rem; padding: 0.2em 0.6em; font-size: max(0.875rem, 0.9em); }
@container maquette (max-width: 560px) { .maquette-sur .exemple { display: table; margin: 0.375rem 0 0; } }
.maquette-aide { right: 1rem; top: 1rem; max-width: calc(100% - 2rem); padding: 0.4em 0.875em; border: 1px solid var(--filet); border-radius: 999px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 6px 18px rgba(11, 26, 62, 0.08); font: 400 var(--etiquette)/1.4 var(--sans); color: var(--encre); text-wrap: balance; transition: opacity 0.3s ease; pointer-events: none; }
.visite:not([data-arret="0"]) .maquette-aide { opacity: 0; }
.maquette-reglages { left: 1rem; bottom: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: calc(100% - 5rem); }
/* Le sélecteur segmenté façon iPhone : un rail gris clair, le choix en blanc à ombre fine ; « Après MARZEL » choisi est
   le seul aplat de la maquette, en bleu */
.bascule { display: inline-flex; padding: 3px; border: 0; border-radius: 999px; background: rgba(225, 231, 240, 0.92); box-shadow: 0 6px 18px rgba(11, 26, 62, 0.08); }
.bascule button { min-height: clamp(38px, 1rem + 1.3vw, 48px); padding: 0 0.875em; border: 0; border-radius: 999px; background: none; font: 600 var(--etiquette)/1 var(--sans); color: var(--texte-2); white-space: nowrap; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.bascule button[aria-pressed="true"] { background: var(--blanc); color: var(--encre); box-shadow: 0 1px 2px rgba(11, 26, 62, 0.10), 0 3px 8px rgba(11, 26, 62, 0.08); }
.bascule button[data-mode-choix="avec"][aria-pressed="true"] { background: var(--bleu); color: var(--blanc); }
.bascule button:disabled { cursor: default; }
.bascule small { margin-left: 0.25rem; font: 500 0.875rem/1 var(--mono); }
.maquette-zoom { right: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: 0.375rem; }
.maquette-zoom button { display: grid; place-items: center; width: clamp(40px, 1rem + 1.3vw, 48px); height: clamp(40px, 1rem + 1.3vw, 48px); border: 1px solid var(--filet); border-radius: 50%; background: rgba(255, 255, 255, 0.95); box-shadow: 0 6px 18px rgba(11, 26, 62, 0.08); font: 400 calc(var(--etiquette) * 1.55)/1 var(--sans); color: var(--encre); cursor: pointer; }
@media (hover: hover) {
  .maquette-zoom button:hover, .repere:hover { border-color: var(--bleu); }
}

/* ================= Les arrêts de la visite ================= */
.visite-tete { padding-block: 1rem 0.5rem; }
.visite-tete .titre-2 { font-size: clamp(2.125rem, 1rem + 2.6vw, 3.75rem); }
/* (Son accent est en bleu des mots, comme sur toutes les slides : l'italique à l'encre ne sert qu'à la signature.) */
/* De 900 à 1 279 px, la colonne du texte est étroite (362 px à 900) : le titre suit sa largeur, pour que
   « à recopier des papiers. » tienne sur sa ligne (sinon cinq lignes d'un ou deux mots) */
@media (min-width: 900px) and (max-width: 1279px) {
  .visite-tete .titre-2 { font-size: min(clamp(2.125rem, 3.4vw, 3.25rem), (100cqw - 3.5rem) * 5 / 11 / 9.6); }
  /* Panneau plus petit (à peu près carré à 900 px) : pendant la visite, seul l'interrupteur avant / après reste, comme sur téléphone */
  .visite:not([data-arret="0"]) .bascule-activite { display: none; }
  /* Colonne étroite : l'en-tête du tableau du calcul va à la ligne (« Temps / perdu »), le tableau tient dans la colonne */
  .calcul thead th { white-space: normal; }
}
.visite-exemple { margin-top: 1.25rem; font: 400 var(--texte-taille)/1.55 var(--sans); color: var(--texte-2); }
/* La pastille sur sa ligne, au-dessus du paragraphe : elle ne se lit plus comme le début de la phrase */
.visite-exemple .exemple { display: table; margin: 0 0 0.5rem; }
/* Où part le temps perdu chaque semaine : la carte de la slide 1. En tête, ce qu'elle mesure et la pastille ; le total
   en grand chiffre ; la barre et sa légende. Côté « avant », sans bleu : encre, gris, argent, dans l'ordre des arrêts.
   visite.js règle la longueur de chaque segment et le total d'après donnees.js. */
.repartition { margin-top: clamp(1.5rem, 2vw, 2.25rem); padding: clamp(1.25rem, 1.9vw, 1.875rem) clamp(1.25rem, 2.1vw, 2.125rem); }
.repartition-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem; }
.repartition-tete .exemple { flex: none; }
.repartition-titre { font: 600 max(1.0625rem, var(--texte-taille))/1.3 var(--sans); letter-spacing: -0.01em; color: var(--texte-2); }
.repartition-total { margin-top: 0.875rem; font: 700 clamp(2.75rem, 1.6rem + 2.3vw, 4.25rem)/0.95 var(--sans); letter-spacing: var(--chiffre-interlettrage); font-variant-numeric: tabular-nums; color: var(--encre); white-space: nowrap; }
.repartition-total span { font-size: 0.5em; letter-spacing: -0.02em; }
.barre { display: flex; gap: 6px; height: clamp(16px, 1.3vw, 28px); margin-top: 1rem; }
.barre i { display: block; min-width: 0; border-radius: clamp(5px, 0.36vw, 8px); }
.legende { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 0.875rem; font: 400 var(--texte-taille)/1.4 var(--sans); color: var(--texte-2); }
.legende li { display: flex; align-items: center; gap: 0.5rem; }
.pastille { flex: none; width: 0.875rem; height: 0.875rem; border-radius: 0.3rem; }
.c1 { background: var(--encre); }
.c2 { background: var(--gris); }
.c3 { background: var(--argent); }
.arret { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3.5rem; align-items: center; padding-block: 3rem; }
.arret-image { width: 100%; height: auto; border-radius: var(--carte-rayon); box-shadow: var(--carte-ombre); }
/* Les arrêts restent à l'encre, même hors de l'écran du moment (comme les slides, aucun texte n'est éteint) : la maquette
   et son repère montrent l'arrêt en cours */
.visite[data-maquette] .arret { display: flex; flex-direction: column; justify-content: center; min-height: 84svh; padding-block: 2rem; }
.visite[data-maquette] .arret-image { display: none; }
/* « 1 · Les heures de travail » : la mesure en Plex Mono bleu des slides (« 1 · Audit »), la même série que la méthode */
.arret-num { font: 500 var(--mono-taille)/1.4 var(--mono); color: var(--bleu-texte); }
.arret h3 { margin-top: 0.625rem; font: var(--titre-graisse) clamp(1.75rem, 1.1rem + 1.5vw, 2.75rem)/1.06 var(--titre-police); letter-spacing: var(--moyen-interlettrage); text-wrap: balance; }
.arret-faits { display: flex; flex-direction: column; gap: 1.5rem; margin: 1.75rem 0 0; }
/* « Ce qui se passe » : l'intitulé de la liste de la slide 2, en Plex 600 à l'encre (le détail dessous reste gris) ;
   l'en-tête des cartes « Le temps perdu » reste gris, comme « Temps perdu cette semaine » ; le Plex Mono reste aux
   numéros et aux mesures */
.arret-faits dt { font: 600 max(1.0625rem, var(--texte-taille))/1.3 var(--sans); letter-spacing: -0.01em; color: var(--encre); }
.arret-cout dt { color: var(--texte-2); }
.arret-faits dd { margin: 0.3rem 0 0; font: 400 var(--texte-taille)/1.55 var(--sans); color: var(--texte-2); text-wrap: pretty; } /* le texte courant des slides */
/* Le temps perdu : la carte de la slide 2. En tête, ce qu'elle mesure et la pastille ; le grand chiffre en Plex 700,
   l'unité plus petite (« 5 h » puis « 20 min », visite.js) ; dessous, pour qui ; puis le calcul, sur des filets. */
.arret-cout { padding: clamp(1.25rem, 1.9vw, 1.875rem) clamp(1.25rem, 2.1vw, 2.125rem); }
/* La pastille passe à la ligne sur petit téléphone, jamais « Le temps / perdu » */
.arret-cout dt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem; }
.arret-cout dt .exemple { flex: none; }
.arret-cout dd { margin-top: 0.875rem; line-height: 1.5; color: var(--texte-2); }
.arret-cout strong { display: block; margin-bottom: 0.5rem; font: 700 clamp(2.75rem, 1.6rem + 2.3vw, 4.25rem)/0.95 var(--sans); letter-spacing: var(--chiffre-interlettrage); font-variant-numeric: tabular-nums; color: var(--encre); white-space: nowrap; }
.arret-cout strong span { font-size: 0.5em; letter-spacing: -0.02em; }
.arret-cout small { display: block; margin-top: 0.875rem; padding-top: 0.875rem; border-top: 1px solid var(--filet); font: 400 clamp(0.9375rem, 0.8rem + 0.2vw, 1.0625rem)/1.5 var(--sans); color: var(--texte-2); }
.arret-cout small + small { margin-top: 0.75rem; padding-top: 0.75rem; }
/* Ce que MARZEL change : le côté bleu, derrière la coche des slides (cercle bleu coché de la slide 5), à 1,45 fois la
   taille du texte comme sur la slide (48 px pour 33), centrée sur la ligne de l'intitulé */
.arret-marzel { --coche: calc(var(--texte-taille) * 1.45); position: relative; padding-left: calc(var(--coche) + 0.75rem); }
.arret-marzel::before { content: ""; position: absolute; left: 0; top: calc((1.3 * max(1.0625rem, var(--texte-taille)) - var(--coche)) / 2); width: var(--coche); height: var(--coche); border-radius: 50%; background: var(--bleu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M14 24.5l7 7L34.5 17' fill='none' stroke='%23fff' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.arret-marzel dt { color: var(--bleu-texte); }
.arret-marzel dd { color: var(--encre); } /* ce qui change : à l'encre, la phrase qui compte */
/* Sous la carte du bilan, les autres chiffres restent en texte courant : 670 h est le seul grand chiffre bleu */
.arret-bilan-chiffre { margin-top: 1.25rem; font: 400 var(--texte-taille)/1.55 var(--sans); color: var(--texte-2); }
.arret-action { margin-top: 2rem; }

/* Le bilan : la slide 4. Le grand chiffre bleu et « par an » à l'encre, la phrase, une case par journée de travail
   gagnée (visite.js les compte d'après donnees.js : rien n'est écrit en dur), le calcul en Plex Mono et la pastille.
   Les cases en rangées de 10, franches, comme sur la slide ; dès 600 px, la clé à droite de la grille, avec une case
   de la même taille (la carte est un conteneur : --case se calcule sur sa largeur). */
.bilan { container-type: inline-size; margin-top: 1.75rem; padding: clamp(1.375rem, 2.2vw, 2.25rem); }
.bilan > * { --case-ecart: clamp(6px, 0.6vw, 8px); --case: calc((100cqw - 9 * var(--case-ecart)) / 10); }
@media (min-width: 600px) {
  .bilan { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: clamp(1.25rem, 2.4vw, 2.5rem); align-items: start; }
  .bilan > * { grid-column: 1 / -1; --case: calc(((100cqw - clamp(1.25rem, 2.4vw, 2.5rem)) * 2 / 3 - 9 * var(--case-ecart)) / 10); }
  .bilan > .bilan-grille { grid-column: 1; }
  .bilan > .bilan-cle { grid-column: 2; flex-direction: column; align-items: flex-start; gap: 0.75rem; margin-top: 1.5rem; }
}
.bilan-chiffre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.22em; font: 700 clamp(3.5rem, 2.2rem + 3.3vw, 6.5rem)/0.92 var(--sans); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.bilan-chiffre strong { font-weight: 700; color: var(--bleu); white-space: nowrap; }
.bilan-chiffre span { font-size: 0.38em; letter-spacing: -0.02em; color: var(--encre); }
.bilan-soit { margin-top: 0.875rem; font: 600 clamp(1.25rem, 1rem + 0.55vw, 1.625rem)/1.3 var(--sans); letter-spacing: -0.02em; text-wrap: balance; }
.bilan-soit em { font-style: normal; color: var(--bleu-texte); white-space: nowrap; } /* jamais « travail. » seul sur sa ligne */
.bilan-grille { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--case-ecart); margin-top: 1.5rem; }
.bilan-grille i { display: block; aspect-ratio: 1; border-radius: 28%; background: var(--bleu-pale); }
.bilan-grille i.plein { background: var(--bleu); }
.bilan-grille i.part { background: linear-gradient(90deg, var(--bleu) var(--part, 50%), var(--bleu-pale) var(--part, 50%)); }
.bilan-cle { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.875rem; font: 400 clamp(0.9375rem, 0.8rem + 0.2vw, 1.0625rem)/1.4 var(--sans); color: var(--texte-2); }
.bilan-cle i { flex: none; width: var(--case); height: var(--case); border-radius: 28%; background: var(--bleu); }
.bilan-calcul { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-top: 1.25rem; padding-top: 1.125rem; border-top: 1px solid var(--filet); font: 500 var(--mono-taille)/1.45 var(--mono); color: var(--texte-2); }
.bilan-calcul .exemple { margin-left: auto; } /* à droite du calcul, comme sur la slide 4, même passée à la ligne */
html:not(.js) .bilan-grille, html:not(.js) .bilan-cle { display: none; }

.calcul { margin-top: 1.25rem; }
/* Le détail suit les tailles du texte courant (tableau un cran sous lui, notes deux crans) : pas de saut de taille sous
   le bilan sur grand écran */
.calcul summary { display: inline-flex; align-items: center; min-height: 44px; font: 600 var(--texte-taille)/1.4 var(--sans); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.calcul table { width: 100%; margin-top: 0.5rem; border-collapse: collapse; font: 400 max(0.9375rem, calc(var(--texte-taille) - 0.0625rem))/1.4 var(--sans); font-variant-numeric: tabular-nums; } /* chiffres de même largeur : les colonnes s'alignent */
.calcul th, .calcul td { padding: 0.875rem 0.5rem 0.875rem 0; border-bottom: 1px solid var(--filet); text-align: right; white-space: nowrap; }
.calcul th:first-child { text-align: left; white-space: normal; }
.calcul thead th { font: 500 var(--mono-taille)/1.4 var(--mono); color: var(--encre); }
/* Comme la liste à filets de la slide 2 : intitulé et durées en 600 à l'encre, la pastille de couleur de la barre */
.calcul tbody th, .calcul td { font-weight: 600; color: var(--encre); }
.calcul tbody th::before { content: ""; display: inline-block; width: 0.75rem; height: 0.75rem; margin-right: 0.625rem; border-radius: 0.25rem; vertical-align: -0.05em; background: var(--encre); }
.calcul tbody tr:nth-child(2) th::before { background: var(--gris); }
.calcul tbody tr:nth-child(3) th::before { background: var(--argent); }
.calcul tfoot th, .calcul tfoot td { font-weight: 600; border-bottom: 0; }
.calcul p { max-width: 34rem; margin-top: 0.75rem; font: 400 max(0.875rem, calc(var(--texte-taille) - 0.125rem))/1.5 var(--sans); color: var(--texte-2); }

/* La liste des 29 postes (sous la visite) et la fiche d'un poste */
html:not(.js) .postes { display: none; }
.postes { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--filet); }
.postes summary { display: inline-flex; align-items: center; min-height: 44px; font: 600 var(--texte-taille)/1.4 var(--sans); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.postes-liste { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1rem; }
.postes-zone { font: 500 var(--mono-taille)/1.4 var(--mono); color: var(--encre); }
.postes-zone + ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.postes-liste button { min-height: 40px; padding: 0 0.875rem; border: 1px solid var(--argent); border-radius: 999px; background: var(--blanc); font: 600 0.875rem/1 var(--sans); cursor: pointer; }
@media (hover: hover) { .postes-liste button:hover { border-color: var(--encre); } }
.fiche-zone { font: 500 var(--mono-taille)/1.4 var(--mono); color: var(--texte-2); }
.fiche .panneau-titre { margin-top: 0.25rem; }
.fiche .arret-faits { margin-top: 0; }
/* Dans la fiche (déjà une carte blanche), la carte du temps perdu passe en gris clair, sans ombre */
.fiche .arret-cout { border-color: transparent; border-radius: 20px; background: var(--fond); box-shadow: none; }
.fiche .arret-cout strong { font-size: clamp(2.5rem, 2rem + 1.4vw, 3.25rem); }
.fiche .arret-marzel small { display: block; margin-top: 0.375rem; font: 500 var(--mono-taille)/1.4 var(--mono); color: var(--bleu-texte); }
.fiche-note { margin-top: 1.25rem; font: 400 0.9375rem/1.5 var(--sans); color: var(--texte-2); }
.fiche-note:empty { display: none; }
.fiche-action { width: 100%; margin-top: 1.5rem; }

/* ================= La méthode : la slide 3, trois cartes à tuile d'icône ================= */
.methode .etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 2rem); max-width: none; margin-top: clamp(2.5rem, 4vw, 4rem); }
.methode .etape { display: flex; flex-direction: column; min-width: 0; padding: clamp(1.5rem, 2.4vw, 2.75rem); }
/* La tuile : un carré bleu aux coins arrondis, l'icône blanche au trait (loupe, maillon, personnes), l'ombre bleue ;
   l'élément le plus fort de la carte, comme sur la slide 3 (environ 2,5 fois la hauteur du titre de l'étape) */
.etape-icone { display: grid; place-items: center; flex: none; width: clamp(64px, 2.25rem + 2.4vw, 92px); aspect-ratio: 1; margin-bottom: clamp(1.25rem, 2vw, 2rem); border-radius: 26%; background: var(--bleu); box-shadow: var(--tuile-ombre); }
.etape-icone svg { width: 54%; height: auto; fill: none; stroke: var(--blanc); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.methode .etape h3 { margin-top: 0.5rem; font-size: clamp(1.375rem, 0.85rem + 1.05vw, 2.125rem); line-height: 1.08; }
.methode .etape-texte { max-width: 32rem; margin-top: 0.75rem; font-size: var(--texte-taille); }

/* ================= La confiance : six cartes, la question en Plex 600, la réponse en Plex 700 ================= */
/* Une garantie par ligne ; assez large pour que chacune tienne sur sa ligne sur ordinateur (trois lignes) */
.confiance .titre-2 { max-width: 21em; }
.confiance .titre-2 span, .confiance .titre-2 em { display: block; }
.confiance .titre-2 em { margin-top: 0.15em; } /* la ligne en italique, un peu détachée du bloc gras, comme sur la slide 1 */
.preuves { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1.25rem; margin-top: clamp(2.5rem, 4vw, 4rem); }
@media (min-width: 1100px) { .preuves { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 1.6vw, 2rem); } } /* toujours 3 + 3 */
.preuve { padding: clamp(1.5rem, 2.2vw, 2.25rem); }
.preuve-question { font: 600 max(1.0625rem, var(--texte-taille))/1.3 var(--sans); letter-spacing: -0.01em; color: var(--texte-2); } /* l'en-tête de carte des slides */
/* Cartes côte à côte (600 à 1 439 px) : une question peut prendre deux lignes ; toutes les questions en réservent deux,
   pour que les réponses d'une même rangée restent alignées */
@media (min-width: 600px) and (max-width: 1439px) { .preuve-question { min-height: 2.6em; } }
.preuve-reponse { margin-top: 0.75rem; font: var(--titre-graisse) clamp(1.375rem, 1rem + 0.65vw, 1.75rem)/1.12 var(--titre-police); letter-spacing: var(--moyen-interlettrage); text-wrap: balance; }
.preuve-reponse + p { max-width: 32rem; margin-top: 0.75rem; font: 400 var(--texte-taille)/1.55 var(--sans); color: var(--texte-2); text-wrap: pretty; }
.preuve a { font-weight: 600; color: var(--encre); }

/* ================= La réservation : la slide 5 ================= */
/* Les trois étapes dans une carte, chacune derrière une coche bleue */
.suite { display: flex; flex-direction: column; gap: 1.125rem; max-width: 40rem; margin-top: 2.5rem; padding: clamp(1.375rem, 2.2vw, 2.25rem); }
.suite li { display: flex; align-items: center; gap: 1rem; font: 400 max(1.0625rem, var(--texte-taille))/1.45 var(--sans); text-wrap: pretty; }
.suite .coche { flex: none; width: calc(max(1.0625rem, var(--texte-taille)) * 1.45); height: calc(max(1.0625rem, var(--texte-taille)) * 1.45); } /* 1,45 fois le texte, comme sur la slide 5 */
.suite .coche svg { width: 100%; height: 100%; }
.suite .coche circle { fill: var(--bleu); }
.suite .coche path { fill: none; stroke: var(--blanc); stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; }
/* « Appelez Valentin » et le numéro en grand, l'e-mail en bleu des mots */
.appel { margin-top: 2.5rem; }
.appel-qui { font: 400 1.125rem/1.4 var(--sans); color: var(--texte-2); }
.appel-tel { margin-top: 0.25rem; font: 700 clamp(2.5rem, 1.6rem + 2.6vw, 4.5rem)/1.02 var(--sans); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.appel-tel a, .appel-mail a { text-decoration: none; }
.appel-tel a:hover, .appel-mail a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.appel-mail { margin-top: 0.5rem; font: 600 clamp(1.125rem, 1rem + 0.45vw, 1.5rem)/1.3 var(--sans); letter-spacing: -0.01em; color: var(--bleu-texte); }
.appel-mail a { display: inline-block; padding-block: 0.25rem; }
/* La réservation sur ordinateur : le titre sur toute la largeur (deux lignes), puis les étapes, l'appel et Valentin
   à gauche, le formulaire à droite. (.diag-texte s'efface : ses enfants entrent dans la grille.)
   De 900 à 1 099 px, le formulaire se resserre (26 rem) pour laisser aux étapes une colonne d'au moins 380 px. */
@media (min-width: 900px) {
  #diagnostic .diag-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); grid-template-rows: auto auto auto 1fr; grid-template-areas: "titre titre" "suite form" "appel form" "valentin form"; column-gap: 3rem; row-gap: 0; align-items: start; }
  #diagnostic .diag-texte { display: contents; }
  #diagnostic .diag-texte > .titre-2 { grid-area: titre; max-width: 24em; margin-bottom: 3rem; }
  #diagnostic .suite { grid-area: suite; max-width: none; margin-top: 0; } /* bord droit aligné sur l'appel et le filet de Valentin */
  #diagnostic .appel { grid-area: appel; }
  #diagnostic .valentin { grid-area: valentin; }
  #diagnostic .reserver { grid-area: form; }
}
@media (min-width: 1100px) {
  #diagnostic .diag-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); column-gap: clamp(3rem, 7%, 9rem); }
}
/* Grand écran : les trois étapes côte à côte dans leur carte, sur toute la largeur laissée par le formulaire ;
   la coche au-dessus de chaque étape */
@media (min-width: 1600px) {
  #diagnostic .suite { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem clamp(1.5rem, 2.5%, 3rem); max-width: none; }
  #diagnostic .suite li { flex-direction: column; align-items: flex-start; gap: 0.875rem; }
}

/* ================= Questions fréquentes : la liste à filets, dans une carte ================= */
/* Alignées sur la colonne du contenu, comme les autres sections (site.css les centre sur 56 rem) */
.questions .wrap { max-width: none; }
.questions-liste { max-width: 56rem; padding-inline: clamp(1.25rem, 2.4vw, 2.5rem); }
.question:last-child { border-bottom: 0; }
/* Sur grand écran : le titre à gauche, dans la colonne du texte de l'accroche, les questions à droite */
@media (min-width: 1100px) {
  .questions .wrap { display: grid; grid-template-columns: clamp(16rem, 24% + 8rem, 34rem) minmax(0, 56rem); justify-content: space-between; column-gap: 3rem; align-items: start; max-width: none; }
  .questions .titre-2 { margin-bottom: 0; }
}

/* ================= Tablette et téléphone : une colonne, la maquette épinglée en haut ================= */
@media (max-width: 899px) {
  .visite { padding-bottom: 3rem; }
  .visite-grille { grid-template-columns: minmax(0, 1fr); }
  .visite-une { min-height: 0; padding-block: 18px 1.5rem; }
  .visite-maquette { grid-column: 1; grid-row: 2; }
  .visite-arrets { grid-column: 1; grid-row: 3; }
  .arret { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-block: 2rem; }

  /* La rangée de la maquette a sa hauteur ; la maquette s'étend aussi sur la rangée des arrêts pour y rester collée.
     Pleine largeur, collée en haut : ni rayon ni ombre de carte, un filet dessous */
  /* --epingle : la hauteur de la maquette épinglée, 46 % de l'écran sur tablette, 36 % sur téléphone (plus bas), pour
     laisser au texte plus de la moitié de l'écran. Un fondu du fond, sous son bord bas, évite les phrases tranchées net. */
  .visite-grille { --epingle: 46svh; }
  .visite[data-maquette] .visite-grille { grid-template-rows: auto var(--epingle) auto; }
  .visite[data-maquette] .visite-maquette { grid-row: 2 / 4; top: 0; z-index: 5; height: var(--epingle); margin-inline: calc((100vw - 100%) / -2); border: 0; border-radius: 0; box-shadow: 0 16px 28px var(--fond); }
  .visite[data-maquette] .visite-arrets { grid-row: 3; padding-bottom: 18svh; }
  /* align-items: stretch : le texte prend la largeur de la colonne, sans jamais en déborder des deux côtés */
  .visite[data-maquette] .arret { justify-content: flex-start; align-items: stretch; min-height: 0; padding-block: 2rem 2.5rem; }
  /* Un repère 1, 2 ou 3, une ancre ou le clavier amènent l'arrêt juste sous la maquette épinglée, pas dessous : son
     titre reste visible et la ligne de lecture (74 %) tombe dans l'arrêt demandé, pas dans le suivant */
  .visite[data-maquette] .visite-arrets, .visite[data-maquette] .visite-arrets * { scroll-margin-top: calc(var(--epingle) + 1.75rem); }
  .visite-tete { padding-top: 2rem; }

  /* L'activité se choisit à l'arrivée : pendant la visite, seul l'interrupteur sans / avec reste sur la maquette */
  .visite:not([data-arret="0"]) .bascule-activite { display: none; }
  .maquette-compteur { left: 0.75rem; top: 0.75rem; font-size: 0.875rem; }
  .maquette-aide { right: 0.75rem; top: 0.75rem; border-radius: 16px; } /* sur deux lignes au besoin : une carte, pas une pilule */
  .maquette-reglages { left: 0.75rem; bottom: 0.75rem; }
  .maquette-zoom { right: 0.75rem; bottom: 0.75rem; }
  .bascule button { min-height: 34px; padding: 0 0.7rem; font-size: 0.875rem; } /* 14 px au moins ; tient à côté du zoom dès 360 px */
  .maquette-zoom button { width: 36px; height: 36px; font-size: 1.375rem; }
  .suite { max-width: none; } /* au-dessus du formulaire : les deux cartes ont le même bord droit */

  /* La méthode en une colonne, chaque carte comme sur la slide 3 : la tuile à gauche, le texte à droite */
  .methode .etapes { grid-template-columns: minmax(0, 1fr); }
  .methode .etape { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.5rem; align-items: start; }
  .methode .etape > :not(.etape-icone) { grid-column: 2; }
  .etape-icone { grid-row: 1 / span 3; margin-bottom: 0; }
}
@media (max-width: 759px) {
  .preuves { gap: 1rem; margin-top: 2.5rem; }
  .arret-action { display: none; } /* la barre du bas porte déjà le bouton : un seul à l'écran */
  .suite li { font-size: 1.0625rem; }
}
@media (max-width: 599px) {
  .proto { font-size: 0.6875rem; }
  .visite-tete .titre-2 { font-size: clamp(2rem, 8.8vw, 2.375rem); }
  /* Les trois garanties : un cran plus petites, cinq lignes en tout sur téléphone */
  .confiance .titre-2 { font-size: min(2rem, 8.2vw); }
  .arret h3 { font-size: 1.75rem; }
  .arret-faits { gap: 1.25rem; margin-top: 1.25rem; }
  .arret-faits dd { font-size: 1rem; }
  .calcul table { font-size: 0.8125rem; }
  /* L'en-tête du tableau va à la ligne (« Temps / perdu ») : le tableau tient dans 320 px (téléphone de 360 px) */
  .calcul thead th { white-space: normal; }
  /* Sur téléphone, une idée par écran : pas de choix d'activité (« Bâtiment » n'est pas encore ouvert), le zoom en
     rangée à droite de l'interrupteur avant / après, sur la même ligne */
  .bascule-activite { display: none; }
  .maquette-reglages { max-width: calc(100% - 1.5rem - 78px - 0.75rem); }
  .maquette-zoom { flex-direction: row; }
  .visite-grille { --epingle: 36svh; }
  /* La méthode sur téléphone : la tuile à gauche du numéro et du titre, comme sur la slide 3, plus petite ; le texte
     reprend toute la largeur de la carte dessous (des cartes plus courtes) */
  .methode .etape { column-gap: 1rem; }
  .etape-icone { grid-row: 1 / span 2; width: 52px; }
  .methode .etape > .etape-texte { grid-column: 1 / -1; }
}