/* ══════════════════════════════════════════════════════════════
   PICBOIS47 — PAGE APPLICATIONS SUR MESURE (23 sept. 2026).
   Chargée par cette page seulement. precision47.css donne la base, le
   rail et les révélations [data-rv] ; pages.css donne l'en-tête de page,
   la bande noire, l'appel compact et le pied. Aucun script propre : le
   moteur partagé suffit.

   LE GESTE DE LA PAGE. Automatisations montre la matière qui change
   d'état ; Municipalités, une demande qui circule. Ici, c'est la
   CONTINUITÉ TERRAIN ↔ BUREAU : une même information est saisie dans une
   petite forme mobile, traverse un joint précis, et se retrouve
   structurée dans une vue de bureau sans avoir été recopiée. Le second
   motif est celui de la forme manquante — un outil qui n'existe pas et
   qu'on bâtit autour d'un trajet de travail.

   Plancher du corps de texte : 1 rem (16 px). Les seules tailles plus
   petites sont les étiquettes et annotations mono (--t-label, --t-annot),
   qui ne portent jamais de phrase à lire.

   Le rouge ne marque que trois choses sur toute la page : l'arrivée de
   l'information au bon endroit, la décision de catégorie, et le point
   d'autorisation ou d'exception. Il n'est jamais le seul porteur d'un
   sens : chaque marque rouge est doublée d'un mot ou d'une forme.
   ══════════════════════════════════════════════════════════════ */

.ap-zone { padding: var(--sp-8) 0; }
.ap-zone + .ap-zone:not(.bande-noire) { border-top: 1px solid var(--pg-filet); }
.ap-zone > .cadre-section { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-3); row-gap: var(--sp-5); align-items: start; }

.ap-tete { grid-column: 1 / span 6; display: grid; gap: var(--sp-3); align-content: start; }
.ap-tete-large { grid-column: 1 / span 8; }
.ap-tete-colonne { grid-column: 1 / span 5; }
.ap-tete h2 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.ap-intro { max-width: 54ch; font-size: var(--t-lead); line-height: 1.55; }
.bande-noire .ap-intro { color: var(--text); }

.ap-micro { margin: 0; font-family: var(--f-mono); font-size: var(--t-annot); letter-spacing: 0.1em; text-transform: uppercase; color: var(--pg-sourdine); }

.ap-fermeture, .ap-prudence, .ap-reserve {
  grid-column: 1 / span 8; margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--pg-filet); max-width: 62ch;
}
.ap-fermeture { font-size: var(--t-lead); line-height: 1.5; color: var(--pg-encre); }
.ap-prudence, .ap-reserve { font-size: 1rem; line-height: 1.55; color: var(--pg-sourdine); }
.bande-noire .ap-fermeture { border-top-color: var(--ligne-ivoire); color: var(--ink); }


/* ═══ ÉCRAN 1 — HÉROS : la continuité terrain ↔ bureau ═════════
   Le texte sur sept colonnes. À droite, un schéma de principe : une
   saisie mobile, un joint rouge, une vue de bureau où l'information
   réapparaît structurée. Ni produit, ni tableau de bord. */

.ap-hero { padding: var(--sp-7) 0 var(--sp-6); }
.ap-hero .cadre-section { align-items: start; row-gap: 0; }
.ap-hero .label:first-child { grid-row: 1; }
.ap-hero .fil-entree { grid-row: 2; margin-top: var(--sp-2); }
.ap-hero h1 { grid-column: 1 / span 7; grid-row: 3; margin-top: var(--sp-4); font-size: clamp(2.3rem, 4.9vw, 4.4rem); line-height: 1.02; letter-spacing: -0.04em; max-width: 16ch; }
.ap-hero .page-chapo { grid-column: 1 / span 6; grid-row: 4; margin-top: var(--sp-4); max-width: 48ch; }
.ap-hero-lien { grid-column: 1 / span 6; grid-row: 5; margin-top: var(--sp-4); }
.ap-hero .ap-micro { grid-column: 1 / span 7; grid-row: 6; margin-top: var(--sp-6); padding-top: var(--sp-3); border-top: 1px solid var(--pg-filet); line-height: 1.8; }

/* Le schéma : la forme mobile en haut à gauche, un joint en équerre qui
   sort du champ vivant, tourne sur un carré rouge, et descend dans le coin
   de la vue de bureau. Un seul rouge : le joint. */
.ap-continuite { grid-column: 9 / -1; grid-row: 3 / span 4; position: relative; margin: var(--sp-5) 0 0; min-height: 316px; }

/* La forme mobile : étroite, debout, trois champs. */
.ap-mobile { width: 152px; display: grid; gap: 12px; padding: 14px 14px 20px; border: 1px solid var(--pg-filet-fort); background: var(--pg-ivoire); }
.ap-mobile-barre { display: block; height: 3px; width: 46px; background: var(--pg-encre); margin-bottom: 4px; }
.ap-saisie { display: grid; gap: 5px; }
.ap-saisie em { font-style: normal; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pg-sourdine); }
.ap-saisie b { display: block; height: 6px; width: 78%; background: var(--pg-filet-fort); }
.ap-saisie:nth-of-type(2) b { width: 54%; }
.ap-saisie-vive b { background: var(--pg-encre); width: 88%; }

/* Le joint en équerre : 56 px vers la droite depuis le champ vivant, puis
   56 px vers le bas jusqu'au coin de la vue de bureau. Le carré rouge marque
   l'enregistrement, au pli exact. */
.ap-joint { position: absolute; left: 152px; top: 134px; width: 56px; height: 1px; background: var(--pg-encre); transform-origin: left center; }
.ap-joint::after { content: ""; position: absolute; left: 56px; top: 0; width: 1px; height: 56px; background: var(--pg-encre); transform-origin: top center; }
.ap-joint i { position: absolute; left: 51px; top: -5px; width: 11px; height: 11px; background: var(--red); }

/* La vue de bureau : large, couchée, des rangées qui se remplissent. */
.ap-bureau { position: absolute; left: 208px; top: 190px; right: 0; display: grid; gap: 10px; padding: 16px 18px 20px; border: 1px solid var(--pg-encre); background: var(--pg-ivoire); }
.ap-bureau-barre { display: block; height: 3px; width: 72px; background: var(--pg-encre); margin-bottom: 4px; }
.ap-rangee { display: grid; grid-template-columns: 1fr 1fr 0.6fr; gap: 10px; align-items: center; }
.ap-rangee i { display: block; height: 6px; background: var(--pg-filet-fort); }
.ap-rangee-arrivee i { background: var(--pg-encre); }

/* Le mouvement : une seule fois, à l'arrivée du héros. Il ne boucle pas. */
html[data-motion="on"] .ap-mobile { opacity: 0; transform: translateY(14px); transition: opacity 620ms var(--ease-out) 240ms, transform 620ms var(--ease-out) 240ms; }
html[data-motion="on"] .ap-saisie-vive b { transform: scaleX(0); transform-origin: left center; transition: transform 460ms var(--ease-out) 860ms; }
html[data-motion="on"] .ap-joint { transform: scaleX(0); transition: transform 420ms var(--ease-out) 1180ms; }
html[data-motion="on"] .ap-joint::after { transform: scaleY(0); transition: transform 420ms var(--ease-out) 1580ms; }
html[data-motion="on"] .ap-joint i { transform: scale(0); transition: transform 320ms var(--ease-spring) 1520ms; }
html[data-motion="on"] .ap-bureau { opacity: 0; transform: translateY(18px); transition: opacity 640ms var(--ease-out) 1900ms, transform 640ms var(--ease-out) 1900ms; }
html[data-motion="on"] .ap-rangee-arrivee i { transform: scaleX(0); transform-origin: left center; transition: transform 420ms var(--ease-out) 2340ms; }
html[data-motion="on"].pret .ap-mobile,
html[data-motion="on"].pret .ap-bureau { opacity: 1; transform: none; }
html[data-motion="on"].pret .ap-saisie-vive b,
html[data-motion="on"].pret .ap-joint,
html[data-motion="on"].pret .ap-joint::after,
html[data-motion="on"].pret .ap-rangee-arrivee i { transform: none; }
html[data-motion="on"].pret .ap-joint i { transform: scale(1); }


/* ═══ ÉCRAN 2 — LES DÉTOURS ════════════════════════════════════
   Quatre grandes rangées éditoriales séparées par des filets. Aucune
   carte. Dans chacune, la ligne de données se déforme à sa manière. */

.ap-signes > .cadre-section { row-gap: var(--sp-6); }
.ap-rangs { grid-column: 1 / -1; display: grid; }
.ap-rang {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-3); row-gap: var(--sp-2);
  align-items: start; padding: var(--sp-5) 0; border-top: 1px solid var(--pg-filet);
}
.ap-rang:last-child { border-bottom: 1px solid var(--pg-filet); }
.ap-rang-nom { grid-column: 1 / span 4; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.18; letter-spacing: -0.02em; }
.ap-rang-texte { grid-column: 5 / span 4; font-size: 1rem; line-height: 1.6; max-width: 42ch; }
.ap-rang-suite { grid-column: 10 / span 3; font-size: 1rem; line-height: 1.5; color: var(--pg-sourdine); }
.ap-rang-suite .label { display: block; margin-bottom: 8px; }

/* La ligne de données, entre le nom et la conséquence : intacte à
   gauche, déformée à droite. Chaque situation la casse autrement. */
.ap-ligne { grid-column: 1 / span 8; grid-row: 3; display: flex; align-items: center; gap: 6px; height: 16px; margin-top: var(--sp-2); }
.ap-ligne i { display: block; height: 3px; flex: 1 1 auto; background: var(--pg-filet-fort); }
.ap-ligne-nouee i:nth-child(4) { flex: 0 0 4px; height: 12px; }
.ap-ligne-nouee i:nth-child(5), .ap-ligne-nouee i:nth-child(6) { background: var(--pg-filet); }
.ap-ligne-deviee i:nth-child(3) { transform: translateY(-6px); }
.ap-ligne-deviee i:nth-child(4) { transform: translateY(6px); }
.ap-ligne-deviee i:nth-child(5) { transform: translateY(-3px); background: var(--pg-filet); }
.ap-ligne-coupee i:nth-child(4) { flex: 0 0 26px; background: none; }
.ap-ligne-coupee i:nth-child(5), .ap-ligne-coupee i:nth-child(6) { background: var(--pg-filet); }
.ap-ligne-eclatee i { flex: 0 0 auto; width: 11%; }
.ap-ligne-eclatee i:nth-child(2) { margin-left: 14px; }
.ap-ligne-eclatee i:nth-child(4) { margin-left: 22px; }
.ap-ligne-eclatee i:nth-child(6) { margin-left: 18px; background: var(--pg-filet); }

html[data-motion="on"] .ap-rangs[data-rv] .ap-rang { opacity: 0; transform: translateY(18px); transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out); }
html[data-motion="on"] .ap-rangs[data-rv] .ap-rang:nth-child(2) { transition-delay: 110ms; }
html[data-motion="on"] .ap-rangs[data-rv] .ap-rang:nth-child(3) { transition-delay: 220ms; }
html[data-motion="on"] .ap-rangs[data-rv] .ap-rang:nth-child(4) { transition-delay: 330ms; }
html[data-motion="on"] .ap-rangs[data-rv].vu .ap-rang { opacity: 1; transform: none; }


/* ═══ ÉCRAN 3 — RELIER OU BÂTIR ════════════════════════════════
   Pas deux cartes jumelles : à gauche des formes déjà complètes qu'un
   filet relie ; au centre le joint qui porte la question ; à droite une
   forme manquante, bâtie autour d'un trajet. */

.ap-comparaison {
  grid-column: 1 / -1; display: grid; grid-template-columns: 5fr 2fr 5fr;
  column-gap: var(--sp-3); align-items: start;
}
.ap-cote { display: grid; gap: var(--sp-3); align-content: start; padding-top: var(--sp-4); border-top: 1px solid var(--pg-filet); }
.ap-cote-batir { border-top-color: var(--pg-encre); }
.ap-cote-nom { font-family: var(--f-mono); font-size: 1rem; letter-spacing: 0.04em; color: var(--pg-encre); }
.ap-cote h3 { font-size: clamp(1.2rem, 1.9vw, 1.65rem); line-height: 1.2; letter-spacing: -0.025em; max-width: 20ch; }
.ap-cote p { font-size: 1rem; line-height: 1.6; max-width: 44ch; }
.ap-cote-lien { margin-top: var(--sp-1); }

.ap-formes { position: relative; display: flex; align-items: center; gap: 22px; height: 78px; width: fit-content; margin: var(--sp-2) 0; }
.ap-formes i { display: block; width: 54px; height: 44px; border: 1px solid var(--pg-filet-fort); background: var(--pg-ivoire); }
.ap-formes-completes i { background: var(--pg-encre); border-color: var(--pg-encre); }
.ap-liaison { position: absolute; left: 20px; right: 20px; top: 50%; height: 1px; background: var(--pg-filet-fort); z-index: -1; }
.ap-formes-manquante i.ap-vide { border: 1px dashed var(--pg-encre); background: none; }
.ap-formes-manquante i:not(.ap-vide) { background: var(--pg-encre); border-color: var(--pg-encre); }
.ap-trajet { position: absolute; left: 12px; right: 12px; bottom: 6px; height: 1px; background: var(--pg-encre); }
.ap-trajet::before, .ap-trajet::after { content: ""; position: absolute; bottom: 0; width: 1px; height: 22px; background: var(--pg-encre); }
.ap-trajet::before { left: 0; }
.ap-trajet::after { right: 0; }

.ap-pivot { position: relative; display: grid; justify-items: center; align-content: start; padding-top: var(--sp-4); min-height: 240px; }
.ap-pivot-axe { display: block; width: 1px; height: 96px; background: var(--pg-filet-fort); }
.ap-pivot-axe::after { content: ""; position: absolute; top: calc(var(--sp-4) + 44px); left: 50%; width: 11px; height: 11px; margin-left: -5.5px; background: var(--red); }
.ap-question { margin-top: var(--sp-3); font-family: var(--f-mono); font-size: 1rem; line-height: 1.45; text-align: center; color: var(--pg-encre); max-width: 24ch; }

html[data-motion="on"] .ap-comparaison[data-rv] .ap-cote { opacity: 0; transform: translateY(16px); transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out); }
html[data-motion="on"] .ap-comparaison[data-rv] .ap-cote-batir { transition-delay: 240ms; }
html[data-motion="on"] .ap-comparaison[data-rv] .ap-pivot-axe { transform: scaleY(0); transform-origin: top center; transition: transform 560ms var(--ease-out) 420ms; }
html[data-motion="on"] .ap-comparaison[data-rv] .ap-pivot-axe::after { transform: scale(0); transition: transform 300ms var(--ease-spring) 820ms; }
html[data-motion="on"] .ap-comparaison[data-rv] .ap-question { opacity: 0; transition: opacity 500ms var(--ease-out) 900ms; }
html[data-motion="on"] .ap-comparaison[data-rv].vu .ap-cote { opacity: 1; transform: none; }
html[data-motion="on"] .ap-comparaison[data-rv].vu .ap-pivot-axe { transform: none; }
html[data-motion="on"] .ap-comparaison[data-rv].vu .ap-pivot-axe::after { transform: scale(1); }
html[data-motion="on"] .ap-comparaison[data-rv].vu .ap-question { opacity: 1; }


/* ═══ ÉCRAN 4 — PICBOIS : la preuve réelle ═════════════════════
   La grande bande noire de la page. Une seule capture est publiable en
   l'état (voir la note en tête de pages/applications.html) : la
   composition est donc resserrée sur elle, traitée comme un objet de
   preuve dans un cadre sobre et géométrique. Aucun faux appareil,
   aucune rotation, aucun zoom, aucun faux curseur. */

.ap-picbois { padding: var(--sp-8) 0; }
/* Le rouge de la marque sur le noir de la bande donne 3,80:1 — sous le
   seuil pour un texte de 13 px. L'étiquette passe donc en encre et garde
   sa marque rouge à côté : le sens ne tenait déjà pas à la couleur seule.
   Corrigé le 25 sept. 2026, avant la mise en ligne. */
.ap-statut { color: var(--ink) !important; display: inline-flex; align-items: center; gap: 0.6em; }
.ap-statut::before { content: ""; width: 8px; height: 8px; background: var(--red); flex: none; }
.ap-mention { max-width: 58ch; font-size: 1rem; line-height: 1.55; color: var(--muted); }

.ap-preuve { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-3); row-gap: var(--sp-4); align-items: start; }

.ap-ecran { grid-column: 1 / span 5; margin: 0; display: grid; gap: var(--sp-3); }
.ap-cadre-appareil { position: relative; padding: 10px; border: 1px solid var(--ligne-ivoire-forte); background: var(--band); }
.ap-cadre-appareil img { width: 100%; height: auto; display: block; }
/* deux repères de coin, le langage du héros — rien d'autre autour de l'image */
.ap-cadre-appareil::before, .ap-cadre-appareil::after { content: ""; position: absolute; width: 14px; height: 14px; }
.ap-cadre-appareil::before { left: -7px; top: -7px; border-left: 1px solid var(--ink); border-top: 1px solid var(--ink); }
.ap-cadre-appareil::after { right: -7px; bottom: -7px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.ap-ecran figcaption { font-family: var(--f-mono); font-size: 0.9375rem; line-height: 1.5; color: var(--muted); padding-top: var(--sp-2); border-top: 1px solid var(--ligne-ivoire); }

.ap-preuve-texte { grid-column: 7 / span 5; display: grid; gap: var(--sp-2); align-content: start; padding-top: var(--sp-2); }
.ap-preuve-texte h3 { font-size: 1.25rem; letter-spacing: -0.015em; }
.ap-preuve-texte h3 + p { margin-bottom: var(--sp-3); }
.ap-preuve-texte p { font-size: 1rem; line-height: 1.6; color: var(--text); max-width: 46ch; }
.ap-preuve-note { margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--ligne-ivoire); color: var(--muted) !important; }

html[data-motion="on"] .ap-preuve[data-rv] .ap-cadre-appareil { clip-path: inset(0 0 100% 0); transition: clip-path 820ms var(--ease-out); }
html[data-motion="on"] .ap-preuve[data-rv] .ap-ecran figcaption,
html[data-motion="on"] .ap-preuve[data-rv] .ap-preuve-texte { opacity: 0; transform: translateY(14px); transition: opacity 620ms var(--ease-out) 320ms, transform 620ms var(--ease-out) 320ms; }
html[data-motion="on"] .ap-preuve[data-rv].vu .ap-cadre-appareil { clip-path: inset(0 0 0 0); }
html[data-motion="on"] .ap-preuve[data-rv].vu .ap-ecran figcaption,
html[data-motion="on"] .ap-preuve[data-rv].vu .ap-preuve-texte { opacity: 1; transform: none; }


/* ═══ ÉCRAN 5 — LES GRANDS CHAMPS ══════════════════════════════
   Quatre champs éditoriaux imbriqués dans la grille, à des largeurs et
   des retraits différents : ni grille de cartes, ni icônes. */

.ap-champs > .cadre-section { row-gap: var(--sp-3); }
.ap-grands-champs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-3); }
.ap-champ { display: grid; gap: var(--sp-2); align-content: start; padding: var(--sp-5) 0 var(--sp-5); border-top: 1px solid var(--pg-filet); }
.ap-champ-1 { grid-column: 1 / span 6; }
.ap-champ-2 { grid-column: 8 / span 5; }
.ap-champ-3 { grid-column: 2 / span 5; }
.ap-champ-4 { grid-column: 8 / span 5; }
.ap-champ h3 { font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.18; letter-spacing: -0.02em; }
.ap-champ-qui { font-size: 1rem; line-height: 1.5; color: var(--pg-sourdine); }
.ap-champ-qui .label, .ap-champ-sortie .label { display: block; margin-bottom: 6px; }
.ap-champ-texte { font-size: 1rem; line-height: 1.6; max-width: 46ch; }
.ap-champ-sortie { margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--pg-filet); font-size: 1rem; line-height: 1.5; color: var(--pg-encre); max-width: 44ch; }
.ap-champs .ap-prudence { grid-column: 1 / span 8; }


/* ═══ ÉCRAN 6 — LA MÉTHODE ═════════════════════════════════════
   Quatre grands verbes comme repères typographiques, et le MÊME cadre
   d'interface qui évolue d'une phase à l'autre : décrit en mots, puis
   organisé en parcours, puis manipulable, puis en service. */

.ap-phases { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--sp-3); align-items: stretch; padding-top: var(--sp-5); }
.ap-phases-fil { position: absolute; left: 0; right: 0; top: var(--sp-5); height: 1px; background: var(--pg-filet-fort); transform-origin: left center; }
.ap-phase { display: grid; grid-template-rows: auto auto 1fr; gap: var(--sp-2); align-content: start; padding-top: var(--sp-4); }
.ap-verbe { font-size: clamp(1.2rem, 2vw, 1.75rem); line-height: 1.1; letter-spacing: -0.03em; }
.ap-phase p { font-size: 1rem; line-height: 1.55; max-width: 34ch; }

/* Le cadre d'interface, quatre états. Même boîte, même largeur. */
.ap-objet { display: block; align-self: end; width: 100%; max-width: 188px; height: 104px; margin-top: var(--sp-3); padding: 12px; border: 1px solid var(--pg-filet-fort); background: var(--pg-ivoire); position: relative; }
.ap-objet i { display: block; height: 3px; background: var(--pg-filet-fort); margin-bottom: 8px; }
.ap-objet-mots i:nth-child(1) { width: 86%; }
.ap-objet-mots i:nth-child(2) { width: 64%; }
.ap-objet-mots i:nth-child(3) { width: 78%; }
.ap-objet-mots i:nth-child(4) { width: 40%; }
.ap-objet b { display: block; height: 18px; border: 1px solid var(--pg-filet-fort); margin-bottom: 8px; }
.ap-objet-parcours b:nth-child(1) { width: 70%; }
.ap-objet-parcours b:nth-child(2) { width: 88%; }
.ap-objet-parcours b:nth-child(3) { width: 54%; }
.ap-objet-prototype { border-color: var(--pg-encre); }
.ap-objet-prototype b { border-color: var(--pg-encre); }
.ap-objet-prototype b:nth-child(1) { width: 70%; }
.ap-objet-prototype b:nth-child(2) { width: 88%; background: var(--pg-encre); }
.ap-objet-prototype b:nth-child(3) { width: 54%; }
.ap-objet-prototype u { position: absolute; right: 16px; bottom: 12px; width: 10px; height: 10px; border: 1px solid var(--pg-encre); text-decoration: none; }
.ap-objet-service { border-color: var(--pg-encre); }
.ap-objet-service b { border-color: var(--pg-encre); background: var(--pg-encre); }
.ap-objet-service b:nth-child(1) { width: 70%; }
.ap-objet-service b:nth-child(2) { width: 88%; }
.ap-objet-service b:nth-child(3) { width: 54%; }
.ap-objet-service s { position: absolute; right: 12px; bottom: 12px; width: 9px; height: 9px; background: var(--red); text-decoration: none; }

.ap-verite { grid-column: 1 / span 8; margin-top: var(--sp-5); padding: var(--sp-4) 0 0; border-top: 1px solid var(--pg-encre); }
.ap-verite p { font-size: 1rem; line-height: 1.55; max-width: 62ch; color: var(--pg-encre); }

html[data-motion="on"] .ap-phases[data-rv] .ap-phases-fil { transform: scaleX(0); transition: transform 900ms var(--ease-out); }
html[data-motion="on"] .ap-phases[data-rv] .ap-phase { opacity: 0; transform: translateY(16px); transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out); }
html[data-motion="on"] .ap-phases[data-rv] .ap-phase:nth-child(2) { transition-delay: 180ms; }
html[data-motion="on"] .ap-phases[data-rv] .ap-phase:nth-child(3) { transition-delay: 360ms; }
html[data-motion="on"] .ap-phases[data-rv] .ap-phase:nth-child(4) { transition-delay: 540ms; }
html[data-motion="on"] .ap-phases[data-rv].vu .ap-phases-fil { transform: none; }
html[data-motion="on"] .ap-phases[data-rv].vu .ap-phase { opacity: 1; transform: none; }


/* ═══ ÉCRAN 7 — AU-DELÀ DES ÉCRANS ═════════════════════════════
   Un dossier technique ouvert : une colonne principale à gauche, cinq
   lignes de contrôle à droite, séparées par des filets. Le repère rouge
   ne marque que le point d'autorisation et le point d'exception. */

.ap-controles { grid-column: 7 / -1; display: grid; }
.ap-controle { position: relative; display: grid; gap: 8px; padding: var(--sp-4) 0 var(--sp-4) var(--sp-4); border-top: 1px solid var(--pg-filet); }
.ap-controle:last-child { border-bottom: 1px solid var(--pg-filet); }
.ap-controle h3 { font-size: 1.125rem; letter-spacing: -0.015em; }
.ap-controle p { font-size: 1rem; line-height: 1.55; max-width: 52ch; }
.ap-repere { position: absolute; left: 0; top: calc(var(--sp-4) + 7px); width: 8px; height: 8px; border: 1px solid var(--pg-filet-fort); }
.ap-controle-marque .ap-repere { background: var(--red); border-color: var(--red); }
.ap-dossier .ap-reserve { grid-column: 1 / span 10; }

html[data-motion="on"] .ap-controles[data-rv] .ap-controle { opacity: 0; transform: translateY(14px); transition: opacity 540ms var(--ease-out), transform 540ms var(--ease-out); }
html[data-motion="on"] .ap-controles[data-rv] .ap-controle:nth-child(2) { transition-delay: 90ms; }
html[data-motion="on"] .ap-controles[data-rv] .ap-controle:nth-child(3) { transition-delay: 180ms; }
html[data-motion="on"] .ap-controles[data-rv] .ap-controle:nth-child(4) { transition-delay: 270ms; }
html[data-motion="on"] .ap-controles[data-rv] .ap-controle:nth-child(5) { transition-delay: 360ms; }
html[data-motion="on"] .ap-controles[data-rv].vu .ap-controle { opacity: 1; transform: none; }


/* ═══ ÉCRAN 8 — LA BONNE TAILLE ════════════════════════════════
   Une ligne de décision verticale, deux zones éditoriales. Carrés
   pleins à gauche, carrés creux à droite — ni coche, ni croix. */

.ap-decision { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1px 1fr; column-gap: var(--sp-5); align-items: stretch; }
/* les trois sur la MÊME rangée : sans grid-row explicite, le placement
   automatique renvoie les deux zones à la rangée suivante et l’axe se
   retrouve seul dans une rangée de 0 px. */
.ap-decision-axe { grid-column: 2; grid-row: 1; align-self: stretch; width: 1px; background: var(--pg-filet-fort); transform-origin: top center; }
.ap-zone-a { grid-column: 1; grid-row: 1; }
.ap-zone-b { grid-column: 3; grid-row: 1; }
.ap-zone-nom { font-size: clamp(1.1rem, 1.6vw, 1.375rem); line-height: 1.2; letter-spacing: -0.02em; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--pg-encre); }
.ap-zone-b .ap-zone-nom { border-bottom-color: var(--pg-filet); color: var(--pg-sourdine); }
.ap-criteres { display: grid; }
.ap-criteres li { position: relative; padding: var(--sp-3) 0 var(--sp-3) 26px; border-bottom: 1px solid var(--pg-filet); font-size: 1rem; line-height: 1.5; }
.ap-criteres li::before { content: ""; position: absolute; left: 0; top: calc(var(--sp-3) + 6px); width: 9px; height: 9px; }
.ap-criteres-pleins li::before { background: var(--pg-encre); }
.ap-criteres-creux li::before { border: 1px solid var(--pg-filet-fort); }
.ap-criteres-creux li { color: var(--pg-sourdine); }

html[data-motion="on"] .ap-decision[data-rv] .ap-decision-axe { transform: scaleY(0); transition: transform 760ms var(--ease-out); }
html[data-motion="on"] .ap-decision[data-rv] .ap-zone-a, html[data-motion="on"] .ap-decision[data-rv] .ap-zone-b { opacity: 0; transform: translateY(14px); transition: opacity 560ms var(--ease-out) 160ms, transform 560ms var(--ease-out) 160ms; }
html[data-motion="on"] .ap-decision[data-rv] .ap-zone-b { transition-delay: 300ms; }
html[data-motion="on"] .ap-decision[data-rv].vu .ap-decision-axe { transform: none; }
html[data-motion="on"] .ap-decision[data-rv].vu .ap-zone-a, html[data-motion="on"] .ap-decision[data-rv].vu .ap-zone-b { opacity: 1; transform: none; }


/* ═══ ÉCRAN 9 — DEUX PORTES D'ENTRÉE, QUESTIONS, APPEL ═════════
   Composition asymétrique : la formule sommaire en filets légers sur
   quatre colonnes, la formule complète encadrée sur sept. */

.ap-depart > .cadre-section { row-gap: var(--sp-5); }
.ap-formule { display: grid; gap: var(--sp-2); align-content: start; }
.ap-formule h3 { font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.2; letter-spacing: -0.025em; }
.ap-cond { font-family: var(--f-mono); font-size: 0.9375rem; font-weight: 400; letter-spacing: 0.02em; color: var(--pg-sourdine); }
.ap-formule p { font-size: 1rem; line-height: 1.6; max-width: 48ch; }
.ap-formule .lien-mono { justify-self: start; margin-top: var(--sp-2); }
.ap-formule-legere { grid-column: 1 / span 4; padding-top: var(--sp-4); border-top: 1px solid var(--pg-filet); }
.ap-formule-complete { grid-column: 6 / span 7; padding: var(--sp-5); border: 1px solid var(--pg-encre); }
.ap-precision { color: var(--pg-sourdine); }

.ap-questions > .cadre-section { row-gap: var(--sp-4); }
.ap-faq { grid-column: 1 / -1; display: grid; border-top: 1px solid var(--pg-encre); }
.ap-faq details { border-bottom: 1px solid var(--pg-filet); }
.ap-faq summary {
  position: relative; list-style: none; cursor: pointer;
  display: flex; align-items: center; min-height: 56px; padding: var(--sp-2) 0 var(--sp-2) 30px;
  font-size: 1.0625rem; font-weight: 600; color: var(--pg-encre);
}
.ap-faq summary::-webkit-details-marker { display: none; }
.ap-faq summary::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 10px; margin-top: -5px; border: 1px solid var(--pg-filet-fort); transition: background var(--dur) var(--ease); }
.ap-faq details[open] summary::before { background: var(--pg-encre); border-color: var(--pg-encre); }
.ap-faq summary:focus-visible { outline: 2px solid var(--pg-encre); outline-offset: 3px; }
.ap-faq details p { padding: 0 0 var(--sp-4) 30px; font-size: 1rem; line-height: 1.6; max-width: 66ch; }


/* ═══ TABLETTE ET ORDINATEUR ÉTROIT ════════════════════════════ */
@media (max-width: 1100px) {
  .ap-zone { padding: var(--sp-7) 0; }
  .ap-hero h1 { grid-column: 1 / -1; }
  .ap-hero .page-chapo, .ap-hero-lien { grid-column: 1 / span 7; }
  .ap-continuite { grid-column: 1 / -1; grid-row: auto; margin-top: var(--sp-5); max-width: 620px; }
  .ap-hero .ap-micro { grid-column: 1 / -1; grid-row: auto; }
  .ap-tete, .ap-tete-large, .ap-tete-colonne { grid-column: 1 / -1; }
  .ap-rang-nom { grid-column: 1 / span 5; }
  .ap-rang-texte { grid-column: 6 / span 7; }
  .ap-rang-suite { grid-column: 6 / span 7; }
  .ap-ligne { grid-column: 1 / -1; grid-row: auto; }
  .ap-comparaison { grid-template-columns: 1fr; row-gap: var(--sp-5); }
  .ap-pivot { min-height: 0; justify-items: start; padding-top: 0; }
  .ap-pivot-axe { height: 44px; }
  .ap-pivot-axe::after { top: 26px; left: 0; margin-left: -5px; }
  .ap-question { text-align: left; max-width: none; }
  .ap-ecran { grid-column: 1 / span 6; }
  .ap-preuve-texte { grid-column: 8 / span 5; }
  .ap-champ-1, .ap-champ-3 { grid-column: 1 / span 7; }
  .ap-champ-2, .ap-champ-4 { grid-column: 6 / span 7; }
  .ap-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-5); }
  .ap-controles { grid-column: 1 / -1; }
  .ap-fermeture, .ap-prudence, .ap-reserve, .ap-verite, .ap-dossier .ap-reserve, .ap-champs .ap-prudence { grid-column: 1 / -1; }
  .ap-formule-legere { grid-column: 1 / span 5; }
  .ap-formule-complete { grid-column: 1 / -1; }
}

/* ═══ TÉLÉPHONE ════════════════════════════════════════════════
   Les compositions se recomposent : elles ne sont pas réduites. */
@media (max-width: 860px) {
  .ap-zone { padding: var(--sp-6) 0; }
  .ap-zone > .cadre-section { grid-template-columns: 1fr; row-gap: var(--sp-4); }
  .ap-tete, .ap-tete-large, .ap-tete-colonne,
  .ap-fermeture, .ap-prudence, .ap-reserve, .ap-verite,
  .ap-rangs, .ap-comparaison, .ap-preuve, .ap-grands-champs,
  .ap-phases, .ap-controles, .ap-decision, .ap-faq,
  .ap-formule-legere, .ap-formule-complete,
  .ap-champs .ap-prudence, .ap-dossier .ap-reserve { grid-column: auto; }

  /* Le héros : le schéma se redresse — la forme mobile puis, sous le
     joint, la vue de bureau. La continuité se lit de haut en bas. */
  .ap-hero { padding: var(--sp-4) 0 var(--sp-5); }
  .ap-hero .cadre-section { grid-template-columns: 1fr; }
  .ap-hero h1, .ap-hero .page-chapo, .ap-hero-lien, .ap-hero .ap-micro, .ap-continuite { grid-column: auto; grid-row: auto; max-width: none; }
  .ap-hero h1 { font-size: clamp(2rem, 8.6vw, 2.7rem); margin-top: var(--sp-3); }
  .ap-hero .page-chapo, .ap-hero-lien { margin-top: var(--sp-3); }
  .ap-continuite { position: static; min-height: 0; max-width: none; display: grid; grid-template-columns: 1fr; justify-items: start; gap: 0; margin-top: var(--sp-5); }
  .ap-mobile { width: 176px; }
  .ap-joint { position: relative; inset: auto; width: 1px; height: 52px; margin-left: 40px; transform-origin: top center; }
  .ap-joint::after { display: none; }
  .ap-joint i { left: -5px; top: 21px; }
  .ap-bureau { position: static; inset: auto; width: 100%; margin: 0; }
  .ap-hero .ap-micro { margin-top: var(--sp-5); }
  html[data-motion="on"] .ap-joint { transform: scaleY(0); transition: transform 420ms var(--ease-out) 1180ms; }
  html[data-motion="on"].pret .ap-joint { transform: none; }

  /* Les détours : le nom, la ligne, le texte, la conséquence. */
  .ap-rang { grid-template-columns: 1fr; padding: var(--sp-4) 0; }
  .ap-rang-nom, .ap-rang-texte, .ap-rang-suite, .ap-ligne { grid-column: auto; grid-row: auto; max-width: none; }

  .ap-formes { gap: 14px; height: 66px; }
  .ap-formes i { width: 46px; height: 38px; }
  .ap-cote h3, .ap-cote p { max-width: none; }

  /* Picbois : l'image d'abord, pleine largeur utile, puis le texte. */
  .ap-picbois { padding: var(--sp-6) 0; }
  .ap-preuve { grid-template-columns: 1fr; }
  .ap-ecran, .ap-preuve-texte { grid-column: auto; }
  .ap-cadre-appareil { padding: 8px; }
  .ap-preuve-texte p { max-width: none; }

  .ap-grands-champs { grid-template-columns: 1fr; }
  .ap-champ { padding: var(--sp-4) 0; }
  .ap-champ-1, .ap-champ-2, .ap-champ-3, .ap-champ-4 { grid-column: auto; }
  .ap-champ-texte, .ap-champ-sortie { max-width: none; }

  .ap-phases { grid-template-columns: 1fr; row-gap: 0; padding-top: var(--sp-4); align-items: start; }
  .ap-phase { grid-template-rows: none; }
  .ap-phases-fil { top: 0; }
  .ap-phase { padding: var(--sp-4) 0; border-bottom: 1px solid var(--pg-filet); }
  .ap-phase p { max-width: none; }
  .ap-objet { max-width: 188px; }

  .ap-controle { padding-left: var(--sp-3); }
  .ap-controle p { max-width: none; }
  .ap-repere { top: calc(var(--sp-4) + 6px); }

  .ap-decision { grid-template-columns: 1fr; row-gap: var(--sp-5); }
  .ap-decision-axe { display: none; }
  .ap-zone-a, .ap-zone-b { grid-column: auto; grid-row: auto; }
  .ap-zone-b { padding-top: var(--sp-4); border-top: 1px solid var(--pg-filet); }

  .ap-formule-complete { padding: var(--sp-4); }
  .ap-formule p { max-width: none; }
  .ap-faq details p { max-width: none; }
}

@media (max-width: 480px) {
  .ap-objet { max-width: none; }
  .ap-ligne-eclatee i:nth-child(2) { margin-left: 8px; }
  .ap-ligne-eclatee i:nth-child(4) { margin-left: 12px; }
  .ap-ligne-eclatee i:nth-child(6) { margin-left: 10px; }
}

/* ═══ MOUVEMENT RÉDUIT ═════════════════════════════════════════
   Tout est dans son état final : les schémas sont complets, la capture
   est fixe, aucune information ni fonction n'est perdue. */
@media (prefers-reduced-motion: reduce) {
  .ap-mobile, .ap-bureau, .ap-rang, .ap-cote, .ap-question, .ap-phase,
  .ap-controle, .ap-zone-a, .ap-zone-b, .ap-ecran figcaption, .ap-preuve-texte
    { opacity: 1 !important; transform: none !important; }
  .ap-joint, .ap-joint::after, .ap-saisie-vive b, .ap-rangee-arrivee i,
  .ap-pivot-axe, .ap-phases-fil, .ap-decision-axe { transform: none !important; }
  .ap-joint i, .ap-pivot-axe::after { transform: scale(1) !important; }
  .ap-cadre-appareil { clip-path: none !important; }
}