/* Accueil V2 « plan d'ingénieur » (lot 2). Jetons et composants : plan.css. */

body.plan .p-accueil{padding-bottom:40px}
body.plan .p-accueil h3{font:800 24px/1.1 var(--p-titre);font-stretch:122%;text-transform:uppercase;color:var(--p-fort);margin:0 0 10px}
/* Remise à zéro sans poids : les marges propres à chaque bloc (.p-intro, .p-calcul p…) l'emportent */
:where(body.plan .p-accueil) p{margin:0}
body.plan .p-h1{font:850 clamp(34px,3.7vw,56px)/1 var(--p-titre);font-stretch:122%;text-transform:uppercase;letter-spacing:-.01em;color:var(--p-fort);margin:18px 0 24px}
body.plan .p-h1 mark{background:linear-gradient(transparent 58%,var(--p-marque) 58% 92%,transparent 92%);color:inherit;padding:0 .08em}
body.plan .p-lead{font-size:18px;line-height:1.65;color:var(--p-texte2);max-width:560px}

/* F.01 Élévation */
body.plan .p-elevation{display:grid;grid-template-columns:1.05fr 1fr;gap:50px;align-items:center;min-height:calc(100vh - 200px);padding-top:30px}
body.plan .p-legende{display:grid;grid-template-columns:repeat(3,auto);margin-top:42px;border:1px solid var(--p-trait-doux);width:fit-content;max-width:100%}
body.plan .p-legende div{padding:12px 18px;border-right:1px solid var(--p-trait-doux);font-family:var(--p-mono)}
body.plan .p-legende div:last-child{border-right:0}
body.plan .p-legende small{font-size:9px;color:var(--p-cyan);letter-spacing:.14em;display:block}
body.plan .p-legende b{font-size:22px;font-weight:600;display:block;margin:4px 0 2px;color:var(--p-fort)}
body.plan .p-legende span{font-size:10px;color:var(--p-texte2);line-height:1.4;display:block}
body.plan .p-dessin{position:relative}
body.plan .p-dessin svg{width:100%;height:auto;display:block;overflow:visible}
body.plan .p-dessin-note{position:absolute;left:180px;top:6px;transform:rotate(-5deg)}
body.plan .p-normes{list-style:none;padding:0;margin:10px 0 0;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--p-trait-doux)}
body.plan .p-normes li{padding:16px 18px;border-right:1px solid var(--p-trait-doux);font:11px var(--p-mono);letter-spacing:.04em;display:flex;gap:12px;align-items:center;color:var(--p-trait)}
body.plan .p-normes li:last-child{border-right:0}
body.plan .p-normes i{font-style:normal;color:var(--p-or);font-weight:700}

/* Tracé progressif des dessins (chaque trait porte pathLength="1") */
body.plan .p-trace :is(path,rect,circle,line):not(.p-st){stroke-dasharray:1;animation:p-trace 2.2s cubic-bezier(.5,0,.2,1) both}
@keyframes p-trace{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
body.plan .p-trace .p-rayon{animation:p-rayon 2.4s ease-in-out infinite}
@keyframes p-rayon{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){body.plan .p-trace :is(path,rect,circle,line),body.plan .p-trace .p-rayon{animation:none}}

/* F.02 Note de calcul */
body.plan .p-calcul{display:grid;grid-template-columns:1fr 440px;gap:60px;align-items:center}
body.plan .p-calcul p{font-size:18px;line-height:1.75;color:var(--p-texte2);margin-top:24px}
body.plan .p-calcul p strong{color:var(--p-fort);background:var(--p-orange-voile);padding:0 4px}
body.plan .p-graphe{width:100%;height:auto;overflow:visible}
body.plan .p-graphe text{font-family:var(--p-mono);fill:var(--p-trait);font-size:11px}

/* F.03 Procédé */
body.plan .p-procede{display:grid;grid-template-columns:1fr 60px 1fr 60px 1fr;align-items:stretch}
body.plan .p-bloc h3{font-size:26px;margin-bottom:12px}
body.plan .p-bloc p{font-size:15px;line-height:1.6;color:var(--p-texte2)}
body.plan .p-fleche{display:flex;align-items:center;justify-content:center}
body.plan .p-fleche svg{width:60px;height:30px}

/* F.04 Vues */
body.plan .p-vues{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 30px}
body.plan .p-vue{position:relative;margin:0}
body.plan .p-img{position:relative;border:1px solid var(--p-trait-doux);padding:8px;background:var(--p-cadre-img)}
/* Vues entières, jamais recadrées : chaque capture tient dans sa vignette (fond du cadre autour) */
body.plan .p-vue img{width:100%;height:220px;object-fit:contain;object-position:center;display:block;background:var(--p-surface-fort)}
body.plan .p-img::before,body.plan .p-img::after{content:"";position:absolute;width:16px;height:16px;border:1.5px solid var(--p-or)}
body.plan .p-img::before{top:-6px;left:-6px;border-right:0;border-bottom:0}
body.plan .p-img::after{bottom:-6px;right:-6px;border-left:0;border-top:0}
body.plan .p-bulle{position:absolute;top:-16px;right:-12px;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--p-trait);background:var(--p-fond);display:grid;place-items:center;font:700 14px var(--p-mono);color:var(--p-or-petit)}
body.plan .p-vue figcaption{font:11px/1.5 var(--p-mono);margin-top:12px;color:var(--p-texte2)}
body.plan .p-vue figcaption b{color:var(--p-trait);display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}
body.plan .p-bordereau{margin-top:50px;display:grid;grid-template-columns:1fr auto;border:1.5px solid var(--p-trait);background:var(--p-surface)}
body.plan .p-bordereau > div{padding:26px 30px}
body.plan .p-bordereau h3{margin:6px 0 0}
body.plan .p-bordereau p{font-size:15px;line-height:1.6;color:var(--p-texte2);margin-top:8px;max-width:620px}
body.plan .p-bordereau table{margin-top:14px;border-collapse:collapse;font:11px var(--p-mono);color:var(--p-trait)}
body.plan .p-bordereau td{border:1px solid var(--p-trait-doux);padding:6px 12px}
body.plan .p-droite{border-left:1.5px solid var(--p-trait);display:flex;align-items:center}

/* F.05 Détail */
body.plan .p-detail{position:relative;margin:0}
body.plan .p-detail .p-img{border:1.5px solid var(--p-trait);padding:10px}
body.plan .p-detail img{width:100%;display:block}
body.plan .p-annot{position:absolute;font:24px/1.05 var(--p-main);color:var(--p-or);white-space:nowrap}
body.plan .p-annot::before{content:"";position:absolute;border-top:1.5px solid var(--p-or);width:70px;transform-origin:left}
body.plan .p-a1{left:-10px;top:-54px}
body.plan .p-a1::before{left:20px;top:40px;transform:rotate(60deg)}
body.plan .p-a2{right:30px;top:-54px}
body.plan .p-a2::before{right:40px;top:40px;transform:rotate(120deg);transform-origin:right}
body.plan .p-detail figcaption{font:11px/1.6 var(--p-mono);color:var(--p-texte2);margin-top:14px;max-width:820px}
body.plan .p-detail figcaption b{color:var(--p-fort)}

/* F.06 Nomenclature */

/* F.07 Cahier des charges */
body.plan .p-exigences{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
body.plan .p-exigence{border-top:3px solid var(--p-orange);padding-top:20px}
body.plan .p-exigence small{font:11px var(--p-mono);color:var(--p-cyan);letter-spacing:.14em}
body.plan .p-exigence h3{margin:10px 0}
body.plan .p-exigence p{font-size:15px;line-height:1.65;color:var(--p-texte2)}
body.plan .p-ok{font:11px var(--p-mono);color:var(--p-vert);margin-top:14px}

/* F.08 Cas d'étude */
body.plan .p-cas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
body.plan .p-fiche{border:1.5px solid var(--p-trait);background:var(--p-surface)}
body.plan .p-haut{display:flex;align-items:center;gap:14px;padding:18px 20px;border-bottom:1px solid var(--p-trait-doux)}
body.plan .p-haut > span{font-size:32px}
body.plan .p-haut b{font-stretch:115%;font-size:17px;display:block;color:var(--p-fort)}
body.plan .p-haut small{font:11px var(--p-mono);color:var(--p-cyan)}
body.plan .p-fiche table{width:100%;border-collapse:collapse;font:12px var(--p-mono);color:var(--p-trait)}
body.plan .p-fiche td{padding:10px 20px;border-bottom:1px solid var(--p-trait-doux)}
body.plan .p-fiche td:last-child{text-align:right;color:var(--p-fort);font-weight:600}
body.plan .p-fiche td.p-gros{font-size:24px;color:var(--p-or)}
body.plan .p-fiche blockquote{margin:0;padding:18px 20px 22px;font:24px/1.2 var(--p-main);color:var(--p-or)}

/* F.09 Notes */
body.plan .p-notes{columns:2;column-gap:60px;counter-reset:p-note}
body.plan .p-notes details{break-inside:avoid;border-bottom:1px dashed var(--p-trait-doux);padding:18px 0}
body.plan .p-notes summary{list-style:none;cursor:pointer;display:flex;gap:16px;font:700 18px/1.3 var(--p-titre);font-stretch:108%;color:var(--p-fort)}
body.plan .p-notes summary::-webkit-details-marker{display:none}
body.plan .p-notes summary::before{counter-increment:p-note;content:counter(p-note);flex-shrink:0;width:28px;height:28px;border:1.5px solid var(--p-orange);border-radius:50%;display:grid;place-items:center;font:12px var(--p-mono);color:var(--p-or-petit)}
body.plan .p-notes p{font-size:15px;line-height:1.65;color:var(--p-texte2);margin:12px 0 0 44px}

/* Visa final */

/* Cartouche fixe : il suit la feuille lue (écran large seulement) */
body.plan .p-cartouche{position:fixed;right:30px;bottom:30px;z-index:25;display:grid;grid-template-columns:auto auto;border:1.5px solid var(--p-trait);background:var(--p-surface-fort);font:9px var(--p-mono);letter-spacing:.06em;min-width:270px;opacity:.94;color:var(--p-trait)}
body.plan .p-cartouche div{padding:5px 9px;border:.5px solid var(--p-trait-doux)}
body.plan .p-cartouche small{display:block;font-size:8px;color:var(--p-cyan);text-transform:uppercase;letter-spacing:.14em;margin-bottom:3px}
body.plan .p-cartouche .p-grand{grid-column:1/-1;font:800 13px var(--p-titre);font-stretch:125%;letter-spacing:.02em;text-transform:uppercase}
body.plan .p-cartouche b{color:var(--p-or-petit);font-weight:600}

@media (max-width:1000px){
  body.plan .p-elevation,body.plan .p-calcul,body.plan .p-exigences,body.plan .p-cas,body.plan .p-vues,body.plan .p-procede{grid-template-columns:1fr}
  body.plan .p-elevation{min-height:0}
  body.plan .p-fleche{transform:rotate(90deg);height:50px}
  body.plan .p-legende{grid-template-columns:1fr}
  body.plan .p-legende div{border-right:0;border-bottom:1px solid var(--p-trait-doux)}
  body.plan .p-normes{grid-template-columns:1fr 1fr}
  body.plan .p-bordereau{grid-template-columns:1fr}
  body.plan .p-droite{border-left:0;border-top:1.5px solid var(--p-trait)}
  body.plan .p-annot,body.plan .p-cartouche{display:none}
  body.plan .p-notes{columns:1}
  body.plan .p-feuille{padding:70px 0 50px}
}
@media (max-width:520px){
  body.plan .p-normes{grid-template-columns:1fr}
  body.plan .p-normes li{border-right:0;border-bottom:1px solid var(--p-trait-doux)}
  body.plan .p-dessin-note{left:auto;right:0;font-size:20px}
  body.plan .p-feuille-tete{flex-wrap:wrap;gap:6px 14px}
  body.plan .p-feuille-tete span:last-child{margin-left:0}
  body.plan .p-bordereau > div{padding:20px}
}