/* À propos en V2 « plan d'ingénieur » (frontend/plan/a_propos.html). Chargée seulement en V2, après
   plan.css dont elle reprend les feuilles, titres, blocs, états, appels à l'action et visa.
   Couleurs : jetons --p-… seulement (thèmes clair et sombre). */

/* F.01 · fiche auteur : titre et chapô à gauche, portrait en cadre technique à droite */
body.plan .p-ap-tete{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:64px;align-items:center}
body.plan .p-ap-h1{font:850 clamp(32px,3.6vw,54px)/1.02 var(--p-titre);font-stretch:120%;text-transform:uppercase;letter-spacing:-.01em;color:var(--p-fort);margin:0 0 24px;text-wrap:balance}
body.plan .p-ap-h1 mark{background:linear-gradient(transparent 58%,var(--p-marque) 58% 92%,transparent 92%);color:inherit;padding:0 .08em}
body.plan .p-ap-lead{font-size:18px;line-height:1.65;color:var(--p-texte2);max-width:600px;margin:0}
body.plan .p-ap-etats{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
body.plan .p-ap-etats .p-etat{white-space:normal}
body.plan .p-ap-portrait{position:relative;margin:0;justify-self:center;width:min(100%,380px)}
body.plan .p-ap-photo{position:relative;border:1.5px solid var(--p-trait);padding:10px;background:var(--p-cadre-img)}
body.plan .p-ap-photo::before,body.plan .p-ap-photo::after{content:"";position:absolute;width:18px;height:18px;border:1.5px solid var(--p-or)}
body.plan .p-ap-photo::before{top:-7px;left:-7px;border-right:0;border-bottom:0}
body.plan .p-ap-photo::after{bottom:-7px;right:-7px;border-left:0;border-top:0}
body.plan .p-ap-photo img{display:block;width:100%;height:auto;aspect-ratio:475/400;object-fit:cover;object-position:top}
body.plan .p-ap-cartouche{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--p-trait);border-top:0;background:var(--p-surface-fort);font:10px var(--p-mono);color:var(--p-fort)}
body.plan .p-ap-cartouche > div{padding:7px 10px;border-right:1px solid var(--p-trait-doux);border-top:1px solid var(--p-trait-doux)}
body.plan .p-ap-cartouche > div:last-child{border-right:0}
body.plan .p-ap-cartouche small{display:block;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--p-cyan);margin-bottom:2px}
body.plan .p-ap-cartouche .p-ap-grand{grid-column:1/-1;border-top:0;border-right:0;font:850 15px var(--p-titre);font-stretch:120%;text-transform:uppercase;letter-spacing:.02em}
body.plan .p-ap-note{position:absolute;left:-28px;bottom:-46px;transform:rotate(-6deg);font-size:24px}

/* F.02 · note d'intention : titre collant à gauche, récit à droite */
body.plan .p-ap-recit-grille{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:70px;align-items:start}
body.plan .p-ap-collant{position:sticky;top:110px;font-size:clamp(30px,3.4vw,50px)}
body.plan .p-ap-recit{display:grid;gap:22px;font-size:17px;line-height:1.75;color:var(--p-texte2)}
body.plan .p-ap-recit p{margin:0}
body.plan .p-ap-recit strong{color:var(--p-fort)}
body.plan .p-ap-recit a{color:var(--p-fort);text-decoration:underline;text-decoration-color:var(--p-orange);text-decoration-thickness:2px;text-underline-offset:4px}
body.plan .p-ap-citation{margin:6px 0 0;border:1.5px solid var(--p-trait);border-left:4px solid var(--p-orange);background:var(--p-surface-fort);padding:20px 24px}
body.plan .p-ap-citation p{font-size:18px;line-height:1.6;color:var(--p-fort);font-style:italic}

/* F.03 · parcours : frise datée, trait vertical, l'étape en cours repérée en orange */
body.plan .p-ap-frise{list-style:none;margin:46px 0 0;padding:0;position:relative;display:grid;gap:0}
body.plan .p-ap-frise::before{content:"";position:absolute;left:148px;top:8px;bottom:8px;width:1.5px;background:var(--p-trait)}
body.plan .p-ap-frise li{display:grid;grid-template-columns:130px minmax(0,1fr);gap:44px;padding:0 0 30px;position:relative}
body.plan .p-ap-frise li::before{content:"";position:absolute;left:142px;top:6px;width:13px;height:13px;border-radius:50%;background:var(--p-fond);border:1.5px solid var(--p-trait)}
body.plan .p-ap-frise li.p-ap-maintenant::before{background:var(--p-orange);border-color:var(--p-orange)}
body.plan .p-ap-periode{font:500 12px var(--p-mono);letter-spacing:.06em;color:var(--p-cyan);text-align:right;padding-top:4px}
body.plan .p-ap-frise h3{font:800 18px var(--p-titre);font-stretch:110%;color:var(--p-fort);margin:0 0 6px}
body.plan .p-ap-frise p{margin:0;font-size:15px;line-height:1.65;color:var(--p-texte2);max-width:760px}

/* F.04 · objectifs techniques : trois blocs numérotés, listes cochées */
body.plan .p-ap-blocs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:50px}
body.plan .p-ap-blocs h3{font:800 18px var(--p-titre);font-stretch:110%;color:var(--p-fort);margin:4px 0 14px}
body.plan .p-ap-liste{list-style:none;margin:0;padding:0;display:grid;gap:10px}
body.plan .p-ap-liste li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.55;color:var(--p-texte2)}
body.plan .p-ap-liste li::before{content:"✓";position:absolute;left:0;top:0;font:600 13px var(--p-mono);color:var(--p-vert)}

/* F.05 · engagements : filet orange, repère mono */
body.plan .p-ap-marge{margin-bottom:50px}
body.plan .p-ap-engagements{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
body.plan .p-ap-engagement{border-top:3px solid var(--p-orange);padding-top:20px}
body.plan .p-ap-engagement small{font:11px var(--p-mono);color:var(--p-cyan);letter-spacing:.14em}
body.plan .p-ap-engagement h3{font:800 19px var(--p-titre);font-stretch:110%;color:var(--p-fort);margin:10px 0}
body.plan .p-ap-engagement p{font-size:15px;line-height:1.65;color:var(--p-texte2);margin:0}

/* Visa final : titre plus long que celui de l'accueil, on le réduit et on remonte le tampon au-dessus */
body.plan .p-apropos .p-visa{padding-top:170px}
body.plan .p-apropos .p-visa .p-h2{font-size:clamp(34px,4.8vw,70px)}
body.plan .p-apropos .p-visa .p-tampon{top:40px}

@media (max-width:900px){
  body.plan .p-ap-tete,body.plan .p-ap-recit-grille,body.plan .p-ap-blocs,body.plan .p-ap-engagements{grid-template-columns:1fr}
  body.plan .p-ap-tete{gap:70px}
  body.plan .p-ap-collant{position:static}
  body.plan .p-ap-note{left:auto;right:0}
  body.plan .p-ap-frise::before{left:6px}
  body.plan .p-ap-frise li{grid-template-columns:1fr;gap:6px;padding-left:32px}
  body.plan .p-ap-frise li::before{left:0}
  body.plan .p-ap-periode{text-align:left;padding-top:0}
}
@media (max-width:640px){
  /* Mots longs en capitales étirées (« PERSONNELLEMENT », « PHOTOVOLTAÏQUE ») : ils doivent tenir dans 375 px */
  body.plan .p-apropos .p-visa .p-h2{font-size:clamp(22px,6.6vw,34px)}
  body.plan .p-ap-h1{font-size:clamp(24px,7vw,34px)}
  body.plan .p-apropos .p-feuille .p-h2{font-size:clamp(23px,7vw,30px);hyphens:auto}
}