/* ══════════════════════════════════════════════════════════════
   PICBOIS47 — PAGE À PROPOS (23 sept. 2026).
   Chargée par cette page seulement. precision47.css donne la base 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.

   LE GESTE DE LA PAGE : « Précision. Persistance. Impact. » devient une
   LIGNE DE TRAVAIL à trois joints, tendue entre un problème posé et un
   résultat obtenu. Trois cartes côte à côte auraient dit trois qualités ;
   une ligne à trois arrêts dit un seul travail en trois moments.

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

   Le rouge : le dernier joint de la méthode (le résultat remis), le joint
   « Impact », et le repère de l'engagement sur les limites et les coûts.
   Un par écran, jamais seul — il y a toujours un mot à côté.
   ══════════════════════════════════════════════════════════════ */

.ab-zone { padding: var(--sp-8) 0; }
.ab-zone + .ab-zone:not(.bande-noire) { border-top: 1px solid var(--pg-filet); }
.ab-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; }

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


/* ═══ ÉCRAN 1 — LE HÉROS ═══════════════════════════════════════
   Court. La phrase de suite tient la colonne de droite : la page
   commence par dire pour qui elle travaille, pas par se raconter. */

.ab-hero { padding: var(--sp-7) 0 var(--sp-6); }
.ab-hero h1 { grid-column: 1 / span 7; }
.ab-hero .page-chapo { grid-column: 1 / span 5; }
.ab-hero-suite {
  grid-column: 7 / span 5; align-self: end; margin: 0;
  padding-left: var(--sp-4); border-left: 1px solid var(--pg-filet-fort);
  font-size: 1rem; line-height: 1.65; max-width: 44ch;
}
html[data-motion="on"] .ab-hero-suite { opacity: 0; transform: translateY(10px); transition: opacity 600ms var(--ease-out) 220ms, transform 600ms var(--ease-out) 220ms; }
html[data-motion="on"].pret .ab-hero-suite { opacity: 1; transform: none; }


/* ═══ ÉCRAN 2 — LA MÉTHODE ═════════════════════════════════════
   Cinq gestes accrochés à une seule colonne de lecture. Le fil descend
   derrière les joints ; chaque geste décale son texte d'un cran, pour
   que la liste se lise comme une descente et non comme un tableau. */

.ab-gestes { grid-column: 6 / -1; position: relative; margin: 0; padding: 0 0 0 var(--sp-5); list-style: none; display: grid; gap: var(--sp-5); }
.ab-fil { position: absolute; left: 5px; top: 31px; bottom: 37px; width: 1px; background: var(--pg-filet-fort); }
.ab-geste { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: var(--sp-3); align-items: start; }
.ab-geste-texte { display: grid; gap: 8px; }

/* ── L'ÉTAT DE LA SITUATION ────────────────────────────────────
   Le même objet, cinq fois, un cran plus défini à chaque geste. Tout en
   HTML et en filets : aucune image, aucune icône de remplissage. Chaque
   état est lisible à l'arrêt — c'est un schéma, pas une animation. */
.ab-etat { position: relative; display: block; width: 92px; height: 68px; border: 1px solid var(--pg-filet); background: #f7f5f1; margin-top: 2px; }
/* 1 — ce qui existe : des marques éparses, rien qui se tient */
.ab-e1 i { position: absolute; left: var(--x); top: var(--y); width: 6px; height: 6px; background: var(--pg-filet-fort); }
/* 2 — trois réponses possibles, une seule retenue */
.ab-e2 { display: flex; align-items: center; justify-content: center; gap: 9px; }
.ab-e2 b { width: 16px; }
.ab-ecarte { height: 16px; border: 1px solid var(--pg-filet); }
.ab-retenu { height: 34px; background: var(--pg-encre); }
/* 3 — la structure : des rangées régulières */
.ab-e3, .ab-e4, .ab-e5 { display: grid; align-content: center; gap: 7px; padding: 0 14px; }
.ab-e3 u, .ab-e4 u, .ab-e5 u { height: 4px; background: var(--pg-filet-fort); text-decoration: none; }
.ab-court { width: 62%; }
/* 4 — éprouvée : ce qui tient est en encre, ce qui est signalé est tireté */
.ab-ok { background: var(--pg-encre) !important; }
.ab-signale { background: none !important; border-top: 2px dashed var(--pg-filet-fort); height: 0 !important; }
/* 5 — remis et scellé : le joint rouge ferme le dossier */
.ab-e5 { border-color: var(--pg-encre); }
.ab-e5 em { position: absolute; right: -5px; bottom: -5px; width: 10px; height: 10px; background: var(--red); }
.ab-joint { position: absolute; left: calc(-1 * var(--sp-5)); top: 26px; width: 11px; height: 11px; border: 1px solid var(--pg-filet-fort); background: var(--pg-ivoire); }
/* Le fil se termine sur un joint plein : le rouge de cet écran est
   réservé au sceau de l'état « remis », juste à côté. */
.ab-joint-rouge { width: 13px; height: 13px; left: calc(-1 * var(--sp-5) - 1px); top: 25px; background: var(--pg-encre); border-color: var(--pg-encre); }
.ab-geste h3 { margin: 0; font-size: 1.1875rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
.ab-geste p { margin: 0; font-size: 1rem; line-height: 1.6; max-width: 52ch; }
.ab-methode .ab-tete { grid-column: 1 / span 4; }
.ab-geste-fin h3 { color: var(--pg-encre); }

html[data-motion="on"] .ab-gestes .ab-fil { transform: scaleY(0); transform-origin: top center; transition: transform 900ms var(--ease-out); }
html[data-motion="on"] .ab-gestes.vu .ab-fil { transform: none; }
html[data-motion="on"] .ab-gestes .ab-geste { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
html[data-motion="on"] .ab-gestes.vu .ab-geste { opacity: 1; transform: none; }
html[data-motion="on"] .ab-gestes.vu .ab-geste:nth-of-type(2) { transition-delay: var(--stagger); }
html[data-motion="on"] .ab-gestes.vu .ab-geste:nth-of-type(3) { transition-delay: calc(var(--stagger) * 2); }
html[data-motion="on"] .ab-gestes.vu .ab-geste:nth-of-type(4) { transition-delay: calc(var(--stagger) * 3); }
html[data-motion="on"] .ab-gestes.vu .ab-geste:nth-of-type(5) { transition-delay: calc(var(--stagger) * 4); }


/* ═══ ÉCRAN 3 — LA LIGNE À TROIS JOINTS ════════════════════════ */

.ab-trois > .cadre-section { row-gap: var(--sp-4); }
.ab-ligne-bloc { margin-top: var(--sp-6); }
.ab-ligne { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-3); row-gap: var(--sp-5); }

.ab-bout { margin: 0; display: grid; gap: 8px; font-size: var(--t-lead); line-height: 1.5; color: var(--ink); }
.ab-bout-debut { grid-column: 1 / span 5; }
.ab-bout-fin { grid-column: 8 / span 5; justify-items: start; padding-top: var(--sp-4); border-top: 1px solid var(--ligne-ivoire); }

/* Les trois mots partagent une seule ligne. Le joint de chacun est posé
   dessus ; le texte descend d'un cran de plus à chaque mot, pour que la
   lecture avance au lieu de comparer trois colonnes. */
.ab-mots { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-3); padding-top: 24px; }
.ab-trait { position: absolute; left: 0; right: 0; top: 29px; height: 1px; background: var(--ligne-ivoire-forte); transform-origin: left center; }
.ab-mot { position: relative; display: grid; gap: 10px; align-content: start; padding-top: 28px; }
.ab-mot-1 { grid-column: 1 / span 4; }
.ab-mot-2 { grid-column: 5 / span 4; margin-top: var(--sp-4); }
.ab-mot-3 { grid-column: 9 / span 4; margin-top: var(--sp-6); }
/* le joint reste sur la ligne, quelle que soit la descente du texte */
.ab-noeud { position: absolute; left: 0; top: 0; width: 11px; height: 11px; border: 1px solid var(--ligne-ivoire-forte); background: var(--canvas); }
.ab-mot-2 .ab-noeud { top: calc(-1 * var(--sp-4)); }
.ab-mot-3 .ab-noeud { top: calc(-1 * var(--sp-6)); }
.ab-noeud-rouge { width: 13px; height: 13px; background: var(--red); border-color: var(--red); }
.ab-mot b { font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 600; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.ab-mot p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--text); max-width: 34ch; }

html[data-motion="on"] .ab-ligne-bloc .ab-trait { transform: scaleX(0); transition: transform 1000ms var(--ease-out); }
html[data-motion="on"] .ab-ligne-bloc.vu .ab-trait { transform: none; }
html[data-motion="on"] .ab-ligne-bloc .ab-mot, html[data-motion="on"] .ab-ligne-bloc .ab-bout { opacity: 0; transform: translateY(18px); transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out); }
html[data-motion="on"] .ab-ligne-bloc.vu .ab-mot, html[data-motion="on"] .ab-ligne-bloc.vu .ab-bout { opacity: 1; transform: none; }
html[data-motion="on"] .ab-ligne-bloc.vu .ab-mot-1 { transition-delay: 260ms; }
html[data-motion="on"] .ab-ligne-bloc.vu .ab-mot-2 { transition-delay: 460ms; }
html[data-motion="on"] .ab-ligne-bloc.vu .ab-mot-3 { transition-delay: 660ms; }
html[data-motion="on"] .ab-ligne-bloc.vu .ab-bout-fin { transition-delay: 860ms; }


/* ═══ ÉCRAN 4 — LA RESPONSABILITÉ ══════════════════════════════
   Un dossier ouvert : quatre engagements séparés par des filets, en deux
   retraits différents. Aucune icône, aucune coche. */

.ab-dossier { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-3); row-gap: 0; }
.ab-engagement { position: relative; display: grid; gap: 10px; padding: var(--sp-4) 0; border-top: 1px solid var(--pg-filet-fort); }
.ab-engagement:nth-child(odd) { grid-column: 1 / span 6; }
.ab-engagement:nth-child(even) { grid-column: 7 / span 6; }
.ab-engagement:last-child { border-bottom: 1px solid var(--pg-filet-fort); }
.ab-engagement:nth-child(3) { border-bottom: 1px solid var(--pg-filet-fort); }
.ab-repere { position: absolute; left: 0; top: -5px; width: 9px; height: 9px; background: var(--pg-encre); }
.ab-engagement-rouge .ab-repere { background: var(--red); }
.ab-engagement h3 { margin: 0; padding-left: 24px; font-size: 1.1875rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
.ab-engagement p { margin: 0; padding-left: 24px; font-size: 1rem; line-height: 1.6; max-width: 50ch; }
.ab-note { grid-column: 1 / span 7; margin: 0; padding-top: var(--sp-3); font-size: 1rem; line-height: 1.55; color: var(--pg-sourdine); max-width: 56ch; }


/* ═══ ÉCRAN 5 — LA DIRECTION ═══════════════════════════════════
   Le portrait à DROITE (l'accueil le met à gauche), plus haut que le
   texte, et le fil du regard part vers la gauche jusqu'au titre.
   Contrairement à l'accueil, il reste visible sur téléphone : c'est ici
   la matière de la section. */

.ab-direction { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
.ab-direction > .cadre-section { align-items: start; }
.ab-direction-texte { grid-column: 1 / span 5; display: grid; gap: var(--sp-3); align-content: start; padding-top: var(--sp-5); }
.ab-direction-texte h2 { margin: 0; font-size: clamp(2.1rem, 3.6vw, 3.2rem); line-height: 1.05; letter-spacing: -0.035em; }
.ab-lead { margin: 0; font-size: clamp(1.125rem, 1.5vw, 1.3125rem); line-height: 1.5; color: var(--pg-encre); max-width: 44ch; }
.ab-direction-texte p { margin: 0; font-size: 1rem; line-height: 1.65; max-width: 50ch; }

/* Le portrait saigne jusqu'au bord du cadre et prend la moitié de
   l'écran : la direction de Picbois47 a un visage, et il occupe la
   place que ça demande. */
.ab-portrait {
  grid-column: 7 / -1; position: relative; display: grid; gap: 12px;
  margin: 0 calc(-1 * var(--marge-cadre)) 0 0; width: calc(100% + var(--marge-cadre));
}
/* Le fond gris du studio est fondu dans l'ivoire par une ombre
   intérieure, comme sur l'accueil : sans elle, la photo lit « fond de
   studio » au lieu de « portrait ». */
.ab-portrait-cadre { position: relative; display: block; overflow: hidden; background: var(--band); aspect-ratio: 4 / 5; }
.ab-portrait-cadre::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 170px 55px rgba(19, 17, 16, 0.42); }
.ab-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; filter: grayscale(0.92) contrast(1.04) brightness(0.98); }
.ab-portrait figcaption { display: block; color: var(--pg-sourdine); padding-right: var(--marge-cadre); }
/* le fil du regard : il part du portrait, à hauteur des yeux, et file
   vers la gauche jusqu'au titre ; le point rouge le termine. */
.ab-regard { position: absolute; right: 100%; top: 23%; width: calc(var(--sp-6) + var(--sp-3)); height: 1px; background: var(--pg-filet-fort); transform-origin: right center; }
.ab-regard i { position: absolute; left: -4px; top: -4px; width: 9px; height: 9px; background: var(--red); }

html[data-motion="on"] .ab-portrait[data-rv="masque"] .ab-portrait-cadre { clip-path: inset(100% 0 0 0); transition: clip-path 1000ms var(--ease-out); }
html[data-motion="on"] .ab-portrait[data-rv="masque"].vu .ab-portrait-cadre { clip-path: inset(0 0 0 0); }
html[data-motion="on"] .ab-regard { transform: scaleX(0); transition: transform var(--dur-draw) var(--ease-out) 700ms; }
html[data-motion="on"] .ab-portrait.vu .ab-regard { transform: none; }


/* ═══ L'APPEL ══════════════════════════════════════════════════ */

.ab-appel-note { grid-column: 1 / span 7; margin-top: var(--sp-2) !important; font-family: var(--f-mono); font-size: var(--t-small); color: var(--pg-sourdine); }


/* ═══ TABLETTE ═════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .ab-tete, .ab-tete-large { grid-column: 1 / -1; }
  .ab-hero h1, .ab-hero .page-chapo { grid-column: 1 / -1; }
  .ab-hero-suite { grid-column: 1 / -1; align-self: start; margin-top: var(--sp-3); max-width: none; }
  .ab-gestes { grid-column: 1 / -1; }
  .ab-mot-1, .ab-mot-2, .ab-mot-3 { grid-column: span 12; margin-top: 0; }
  .ab-mots { grid-template-columns: 1fr; row-gap: var(--sp-4); padding-top: 0; }
  .ab-trait { display: none; }
  .ab-mot { padding-top: var(--sp-3); border-top: 1px solid var(--ligne-ivoire); }
  .ab-mot .ab-noeud, .ab-mot-2 .ab-noeud, .ab-mot-3 .ab-noeud { top: -6px; }
  .ab-mot p { max-width: none; }
  .ab-bout-debut, .ab-bout-fin { grid-column: 1 / -1; }
  .ab-engagement:nth-child(odd), .ab-engagement:nth-child(even) { grid-column: 1 / -1; }
  .ab-engagement:nth-child(3) { border-bottom: 0; }
  .ab-note { grid-column: 1 / -1; }
  .ab-direction-texte { grid-column: 1 / span 6; padding-top: 0; }
  .ab-portrait { grid-column: 7 / -1; }
  .ab-methode .ab-tete { grid-column: 1 / -1; }
  .ab-gestes { grid-column: 1 / -1; }
}

/* ═══ TÉLÉPHONE ════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .ab-zone { padding: var(--sp-6) 0; }
  .ab-zone > .cadre-section { grid-template-columns: 1fr; row-gap: var(--sp-4); }
  .ab-tete, .ab-tete-large, .ab-gestes, .ab-dossier, .ab-note, .ab-direction-texte, .ab-portrait, .ab-appel-note { grid-column: auto; }
  .ab-hero { padding: var(--sp-5) 0 var(--sp-4); }
  .ab-hero .cadre-section { grid-template-columns: 1fr; }
  .ab-hero h1, .ab-hero .page-chapo, .ab-hero-suite { grid-column: auto; max-width: none; }
  .ab-gestes { padding-left: var(--sp-4); gap: var(--sp-4); }
  .ab-geste { grid-template-columns: 68px minmax(0, 1fr); column-gap: var(--sp-2); }
  .ab-etat { width: 68px; height: 54px; }
  .ab-portrait { margin-right: calc(-1 * var(--marge-cadre)); width: calc(100% + var(--marge-cadre)); }
  .ab-joint { left: calc(-1 * var(--sp-4)); }
  .ab-joint-rouge { left: calc(-1 * var(--sp-4) - 1px); }
  .ab-geste p { max-width: none; }
  .ab-ligne, .ab-dossier { grid-template-columns: 1fr; }
  .ab-ligne-bloc { margin-top: var(--sp-4); }
  .ab-engagement p, .ab-direction-texte p, .ab-lead { max-width: none; }
  .ab-portrait { margin-top: var(--sp-4); }
  .ab-regard { display: none; }   /* rien à relier : le titre est au-dessus */
}

/* ═══ MOUVEMENT RÉDUIT ═════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .ab-hero-suite, .ab-geste, .ab-mot, .ab-bout { opacity: 1 !important; transform: none !important; }
  .ab-fil, .ab-trait, .ab-regard { transform: none !important; }
  .ab-portrait-cadre { clip-path: none !important; }
}