/* ============================================================
   PLANS — portfolio Yohann Lesueur
   DA : dossier de plans d'architecte (vélin, graphite, rotring)
   ============================================================ */

/* ---------- fontes ---------- */
@font-face {
  font-family: "Archivo Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/archivo-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

/* ---------- jetons ---------- */
:root {
  --velin: #F1EFE9;
  --velin-clair: #F7F5F0;
  --graphite: #2B2E33;
  --mine: #8B8F97;          /* hairlines, hachures */
  --mine-ink: #62666E;      /* annotations lisibles (AA) */
  --rotring: #E8590C;       /* traits & repères accent */
  --rotring-ink: #BC4708;   /* texte accent (AA) */
  --cyan: #3E7C8F;          /* encre de vérification, liens */
  --hairline: rgba(43, 46, 51, 0.35);
  --hairline-soft: rgba(139, 143, 151, 0.45);
  --frame: 16px;
  --sheet-pad: clamp(20px, 4.5vw, 64px);
  --sans: "Archivo Variable", "Archivo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

/* ---------- socle ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--graphite);
  background-color: var(--velin);
  /* grille millimétrée : fine 8 px, appuyée 80 px */
  background-image:
    linear-gradient(rgba(43,46,51,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,46,51,0.055) 1px, transparent 1px),
    linear-gradient(rgba(43,46,51,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,46,51,0.028) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 8px 8px, 8px 8px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@media (pointer: fine) {
  body.has-cross { cursor: crosshair; }
}
::selection { background: var(--rotring); color: var(--velin); }

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--cyan); }
:focus-visible {
  outline: 2px solid var(--rotring);
  outline-offset: 3px;
  border-radius: 1px;
}

/* lien « trait de règle » : le soulignement se prolonge au-delà du mot */
.rlink {
  position: relative;
  text-decoration: none;
  color: var(--cyan);
}
.rlink::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: currentColor;
  transition: left 0.28s cubic-bezier(.4,0,.2,1), right 0.28s cubic-bezier(.4,0,.2,1), background-color 0.28s;
}
.rlink:hover::after, .rlink:focus-visible::after {
  left: -0.65em; right: -0.65em;
  background: var(--rotring);
}

/* ---------- cadre périmétrique ---------- */
.frame {
  position: fixed;
  inset: var(--frame);
  border: 1px solid var(--hairline);
  pointer-events: none;
  z-index: 60;
}
.frame::before, .frame::after {
  content: "";
  position: absolute;
  width: 13px; height: 13px;
  background:
    linear-gradient(var(--mine), var(--mine)) center / 1px 13px no-repeat,
    linear-gradient(var(--mine), var(--mine)) center / 13px 1px no-repeat;
}
.frame::before { top: -7px; left: -7px; }
.frame::after  { bottom: -7px; right: -7px; }

.sheet {
  padding: 0 var(--sheet-pad);
  max-width: 1440px;
  margin: 0 auto;
}

/* ---------- étiquettes mono ---------- */
.tag, .pl-code, .ph-note, .kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mine-ink);
}

/* ---------- en-tête ---------- */
.topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: calc(var(--frame) + 22px) 0 1.4rem;
  border-bottom: 1px solid var(--hairline-soft);
}
.brand {
  font-weight: 720;
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--graphite);
  text-decoration: none;
}
.brand small {
  display: block;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--mine-ink);
  margin-top: 0.3rem;
}
.topnav { display: flex; flex-wrap: wrap; gap: 1.35rem; }
.topnav a {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
  text-decoration: none;
  position: relative;
}
.topnav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -5px;
  height: 1px;
  background: var(--rotring);
  transition: right 0.28s cubic-bezier(.4,0,.2,1);
}
.topnav a:hover::after, .topnav a:focus-visible::after { right: -0.5em; }

/* ---------- héro / page de garde ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: 3rem;
  align-items: start;
  padding: clamp(3rem, 7vh, 5.5rem) 0 clamp(3.2rem, 6vh, 4.8rem);
}
.hero-copy { max-width: 34rem; }
.kicker { color: var(--rotring-ink); margin-bottom: 1.6rem; }
.kicker::before {
  content: "";
  display: inline-block;
  width: 2.2em; height: 1px;
  background: var(--rotring);
  vertical-align: 0.32em;
  margin-right: 0.9em;
}
h1 {
  font-size: clamp(2.55rem, 5.4vw, 4.35rem);
  font-weight: 760;
  line-height: 1.04;
  letter-spacing: -0.021em;
  margin-bottom: 1.4rem;
}
/* le crayon pose l'hypothèse par défaut : la ligne que la suite corrige */
.h1-setup {
  display: block;
  font-size: 0.40em;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--mine-ink);
  margin-bottom: 0.6em;
}
/* les temps de la phrase, scandés une ligne chacun */
.h1-l { display: block; }
/* l'encre rouge corrige : même corps, elle fait partie de la phrase */
.h1-claim { color: var(--rotring-ink); }
.standfirst {
  font-size: 1.09rem;
  line-height: 1.65;
  max-width: 60ch;
  color: var(--graphite);
}
.standfirst strong { font-weight: 640; }

/* cotation sous le H1 : la mesure « 9 ans + » */
.h1-dim { margin: 1.9rem 0 0; max-width: 21rem; }
.h1-dim .dim-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rotring-ink);
  margin-bottom: 0.45rem;
}
.dim {
  display: flex;
  align-items: center;
  height: 11px;
  color: var(--mine-ink);
  border-left: 1px solid currentColor;
  border-right: 1px solid currentColor;
  padding: 0 1px;
}
.dim i { display: block; }
/* extrémités en tirets obliques, convention dessin technique (pas de flèches) */
.dim-a {
  width: 1px; height: 11px;
  background: currentColor;
  transform: rotate(45deg);
  flex: none;
  margin-right: -1px;
}
.dim-a--r { margin-right: 0; margin-left: -1px; }
.dim-line {
  flex: 1;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
}

.hero-cta { margin-top: 2.6rem; display: flex; flex-wrap: wrap; gap: 1.1rem 2rem; align-items: center; }

/* visa de chantier — CTA tampon */
.stamp {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rotring-ink);
  text-decoration: none;
  border: 1.5px solid var(--rotring);
  box-shadow: 0 0 0 3px var(--velin), 0 0 0 4px var(--rotring);
  padding: 0.85rem 1.5rem;
  background: transparent;
  transition: background-color 0.22s, color 0.22s;
}
.stamp:hover { background: var(--rotring); color: var(--velin); }
.stamp:focus-visible { outline-offset: 6px; }

.hero-fig { display: grid; row-gap: 2.2rem; justify-items: end; align-self: center; }

.axon-wrap { width: min(100%, 640px); justify-self: stretch; }
.axon { width: 100%; height: auto; }
.axon .face-top { fill: var(--velin-clair); fill-opacity: 0.96; stroke: var(--graphite); stroke-width: 1.25; }
.axon .face-side { fill: url(#hach); stroke: var(--graphite); stroke-width: 1.1; }
.axon-hachline { stroke: var(--mine); stroke-width: 0.7; opacity: 0.6; }
.axon .engr { fill: none; stroke: var(--mine); stroke-width: 0.9; }
.axon .leader { stroke: var(--mine); stroke-width: 1; stroke-dasharray: 4 4; }
.axon .rep { fill: var(--velin); stroke: var(--graphite); stroke-width: 1.1; }
.axon-rep {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  fill: var(--graphite);
}
.axon-name {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--graphite);
}
.axon-skills {
  font-family: var(--mono);
  font-size: 11.5px;
  fill: var(--mine-ink);
  transition: fill 0.25s;
}
.axon-dim line, .axon-axis line { stroke: var(--mine); stroke-width: 1; }
.axon-axis line { stroke-dasharray: 7 5; color: var(--mine); }
.axon-dim .arrline { color: var(--mine); }
.axon-dimtext {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  fill: var(--mine-ink);
}
.axon-note { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; fill: var(--cyan); }
.axon .lift { transition: transform 0.4s cubic-bezier(.22,.61,.36,1); }
.axon .layer:hover .lift { transform: translateY(-12px); }
.axon .layer:hover .axon-skills { fill: var(--rotring-ink); }
.axon .layer:hover .rep { stroke: var(--rotring); }
.axon .layer:hover .axon-rep { fill: var(--rotring-ink); }
.axon-caption {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--mine-ink);
  text-transform: uppercase;
  justify-self: end;
  text-align: right;
}

/* ---------- planches (sections) ---------- */
.planche { padding: clamp(3.2rem, 6vh, 4.8rem) 0; }
.ph-rule {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 2.6rem;
}
.pl-code { color: var(--rotring-ink); flex: none; }
.ph-rule::before, .ph-rule::after {
  content: "";
  height: 1px;
  background: var(--hairline);
}
.ph-rule::before { width: clamp(1rem, 4vw, 3rem); flex: none; }
.ph-rule::after { flex: 1; }
.ph-note { flex: none; letter-spacing: 0.08em; text-transform: none; }
/* la règle se trace à l'entrée de la planche (JS présent uniquement) */
html.js .ph-rule::after { transform: scaleX(0); transform-origin: left center; transition: transform 1.1s cubic-bezier(.22,.61,.36,1) 0.1s; }
html.js .planche-head.is-in .ph-rule::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  html.js .ph-rule::after { transform: scaleX(1); }
}

.planche-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.55fr);
  gap: 2.8rem clamp(2.5rem, 5vw, 5.5rem);
  align-items: start;
}
/* la colonne de titre accompagne les planches hautes plutôt que de flotter en haut d'une gouttière vide */
.planche-aside { position: sticky; top: clamp(2rem, 12vh, 6rem); }
.planche h2 {
  font-size: clamp(1.85rem, 3.4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.014em;
  line-height: 1.08;
  margin-bottom: 1.1rem;
  text-wrap: balance;
}
.planche .lead {
  color: var(--graphite);
  max-width: 46ch;
}
.planche .lead + .lead { margin-top: 1rem; }
.margin-note {
  margin-top: 1.8rem;
  padding-left: 1rem;
  border-left: 1px solid var(--cyan);
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--cyan);
  max-width: 34ch;
}

/* ---------- PL-01 : coupe stratigraphique ---------- */
.coupe { border-top: 1.5px solid var(--graphite); }
.strate {
  display: grid;
  grid-template-columns: 8.6em 62px minmax(0, 1fr);
  border-bottom: 1px solid var(--hairline-soft);
}
.strate:last-child { border-bottom: 3px double var(--graphite); }
.strate-date {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--mine-ink);
  padding: 1.15rem 1rem 1.15rem 0;
  border-right: 1px solid var(--hairline-soft);
  text-transform: uppercase;
  line-height: 1.55;
}
.strate-hach { border-right: 1px solid var(--hairline-soft); position: relative; }
.strate-body { padding: 1.05rem 0 1.25rem 1.4rem; }
.strate-body h3 {
  font-size: 1.02rem;
  font-weight: 680;
  letter-spacing: 0.01em;
}
.strate-body h3 span {
  font-weight: 460;
  color: var(--mine-ink);
}
.strate-body p { font-size: 0.94rem; line-height: 1.6; max-width: 62ch; margin-top: 0.35rem; }
.strate-tags {
  margin-top: 0.6rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mine-ink);
}
/* hachures différenciées par strate */
.h-idem     { background: repeating-linear-gradient(45deg, rgba(232,89,12,0.55) 0 1px, transparent 1px 7px); }
.h-accenta  { background: repeating-linear-gradient(45deg, rgba(139,143,151,0.65) 0 1px, transparent 1px 8px); }
.h-free     { background: repeating-linear-gradient(-45deg, rgba(139,143,151,0.6) 0 1px, transparent 1px 9px); }
.h-konexio  { background: repeating-linear-gradient(0deg, rgba(62,124,143,0.5) 0 1px, transparent 1px 7px); }
.h-ooti     { background: repeating-linear-gradient(45deg, rgba(139,143,151,0.6) 0 1px, transparent 1px 5px); }
.h-dawan    { background:
  repeating-linear-gradient(0deg, rgba(62,124,143,0.45) 0 1px, transparent 1px 9px),
  repeating-linear-gradient(90deg, rgba(62,124,143,0.45) 0 1px, transparent 1px 9px); }
.h-42       { background:
  repeating-linear-gradient(45deg, rgba(43,46,51,0.5) 0 1px, transparent 1px 6px),
  repeating-linear-gradient(-45deg, rgba(43,46,51,0.5) 0 1px, transparent 1px 6px); }
/* épaisseur ≈ durée */
.strate--l .strate-body { padding-top: 1.7rem; padding-bottom: 2.1rem; }
.strate--l .strate-date { padding-top: 1.8rem; }
.strate--s .strate-body { padding-top: 0.8rem; padding-bottom: 0.9rem; }
.strate--s .strate-date { padding-top: 0.9rem; }

.citation {
  margin-top: 2.2rem;
  position: relative;
  padding: 1.4rem 1.6rem;
  border: 1px dashed var(--cyan);
  color: var(--graphite);
  font-size: 1.05rem;
  line-height: 1.65;
  font-weight: 500;
  max-width: 46rem;
}
.citation::before {
  content: "annotation";
  position: absolute;
  top: -0.7em; left: 1.2rem;
  background: var(--velin);
  padding: 0 0.5em;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
}
.citation footer { margin-top: 0.6rem; font-family: var(--mono); font-size: 0.72rem; color: var(--mine-ink); letter-spacing: 0.06em; }

/* ---------- PL-03 : fiches transmission ---------- */
.fiches { display: grid; gap: 1.6rem; }
.fiche {
  border: 1px solid var(--hairline);
  background: var(--velin-clair);
  padding: 1.5rem 1.7rem 1.6rem;
  position: relative;
}
.fiche::before {
  content: attr(data-ref);
  position: absolute;
  top: -0.72em; left: 1.2rem;
  background: var(--velin);
  padding: 0 0.55em;
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rotring-ink);
}
.fiche h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.005em; }
.fiche .periode {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mine-ink);
  margin: 0.3rem 0 0.75rem;
}
.fiche p { font-size: 0.95rem; line-height: 1.62; max-width: 62ch; }
.fiche ul { margin-top: 0.7rem; padding-left: 1.1rem; font-size: 0.93rem; line-height: 1.62; }
.fiche li::marker { color: var(--rotring); }

/* ---------- PL-04 : chantier actuel ---------- */
.chantier {
  border: 1.5px solid var(--graphite);
  background: var(--velin-clair);
  padding: 1.8rem 2rem 2rem;
}
.chantier h3 { font-size: 1.3rem; font-weight: 720; letter-spacing: -0.008em; }
.chantier .periode {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mine-ink);
  margin: 0.35rem 0 1rem;
}
.chantier p { font-size: 0.97rem; line-height: 1.65; max-width: 64ch; }
.chantier p + p { margin-top: 0.9rem; }
.chantier .strate-tags { margin-top: 1.1rem; }
.outillage {
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px dashed var(--hairline-soft);
}
.contact-block { margin-top: 2.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem 2.2rem; }
.contact-alt { font-size: 0.95rem; color: var(--graphite); }

/* ---------- pied de page ---------- */
.footer {
  border-top: 1.5px solid var(--graphite);
  padding: 2.6rem 0 calc(var(--frame) + 30px);
  display: grid;
  gap: 2.4rem;
}
.footer h2 { font-size: 0.78rem; font-weight: 720; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 1rem; }
.footer address { font-style: normal; font-size: 0.95rem; line-height: 1.7; }
.footer ul { list-style: none; }
.footer li { margin-bottom: 0.4rem; font-size: 0.9rem; }
.footer .colophon {
  margin-top: 1.6rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mine-ink);
}

/* ---------- curseur croix de repère ---------- */
.cross-v, .cross-h {
  position: fixed;
  pointer-events: none;
  z-index: 55;
  background: rgba(139, 143, 151, 0.5);
  opacity: 0;
  transition: opacity 0.3s;
}
.cross-v { top: 0; left: 0; width: 1px; height: 100vh; }
.cross-h { top: 0; left: 0; height: 1px; width: 100vw; }
.cross-coords {
  position: fixed;
  left: calc(var(--frame) + 12px);
  bottom: calc(var(--frame) + 8px);
  z-index: 56;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  color: var(--cyan);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
body.cross-on .cross-v, body.cross-on .cross-h, body.cross-on .cross-coords { opacity: 1; }
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cross-v, .cross-h, .cross-coords { display: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; }
  .hero-fig { justify-items: start; }
  .axon-wrap { width: min(100%, 620px); }
  .planche-grid { grid-template-columns: 1fr; }
  .planche-aside { position: static; }
  .planche .lead { max-width: 60ch; }
}
@media (max-width: 720px) {
  :root { --frame: 10px; }
  body { font-size: 1rem; }
  .topbar { flex-direction: column; gap: 1rem; align-items: flex-start; }
  .topnav { gap: 1rem; }
  /* le H1 se reflowe en paragraphe : pas de lignes d'un seul mot à ce corps */
  .h1-l { display: inline; }
  .strate { grid-template-columns: 6.4em 30px minmax(0, 1fr); }
  .strate-date { font-size: 0.62rem; padding-right: 0.6rem; }
  .strate-body { padding-left: 0.95rem; }
  .ph-rule { flex-wrap: wrap; row-gap: 0.5rem; }
  .ph-note { flex-basis: 100%; order: 3; padding-left: calc(clamp(1rem, 4vw, 3rem) + 0rem); }
  .chantier { padding: 1.4rem 1.2rem 1.6rem; }
  .fiche { padding: 1.3rem 1.1rem 1.4rem; }
}

/* ============================================================
   V2 — refonte candidature : permis de construire Mentor Goal
   ============================================================ */

:root {
  --nuit: #23262B;          /* fond de la pièce jointe photo/vidéo */
  --rouge: #B02E20;         /* test qui échoue */
  --vert: #2F7D46;          /* test qui passe */
}

/* nav plus dense : 8 planches */
.topnav { gap: 1.05rem; }
.topnav a { font-size: 0.66rem; letter-spacing: 0.1em; }

/* PS de l'annonce, dans le héro */
.citation--ps { margin-top: 2.1rem; font-size: 0.98rem; font-weight: 460; }
.citation--ps::before { content: "Post-scriptum de l'offre"; }

/* ---------- plan masse hexagonal (signature) ---------- */
.masse-wrap { width: min(100%, 700px); justify-self: stretch; }
.masse { width: 100%; height: auto; }
.masse .mw { fill: none; stroke: var(--graphite); }
.masse .wall { stroke-width: 2; }
.masse .wall-in { stroke-width: 1.1; stroke: var(--mine); }
.masse .ring { stroke-width: 1; stroke-dasharray: 5 5; stroke: var(--cyan); }
.masse-ring-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  fill: var(--cyan);
}
.masse .core { fill: url(#hachCore); stroke-width: 1.6; }
.masse-hachline { stroke: var(--mine); stroke-width: 0.8; opacity: 0.75; }
.masse-core-name {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--graphite);
}
.masse-core-sub { font-family: var(--mono); font-size: 10.5px; fill: var(--mine-ink); }
.masse .port-gap { fill: var(--velin); }
.masse .door { stroke-width: 1; stroke: var(--mine-ink); }
.masse .sas { stroke-width: 1.2; stroke-dasharray: 4 3; }
.masse .flow { stroke: var(--cyan); stroke-width: 1.1; color: var(--cyan); opacity: 0.85; }
.masse .guichet { fill: var(--velin); stroke: var(--cyan); stroke-width: 1.2; }
.masse .guichet--room { stroke: var(--graphite); }
.masse-flux-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  fill: var(--cyan);
}
.masse-flux-label--room { fill: var(--graphite); }
.masse .leader { stroke: var(--mine); stroke-width: 1; stroke-dasharray: 4 4; }
.masse-name {
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  fill: var(--graphite);
}
.masse-skills { font-family: var(--mono); font-size: 12.5px; fill: var(--mine-ink); }
.masse-nord .mw { stroke: var(--mine-ink); stroke-width: 1.2; }
.masse-note {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--mine-ink);
}
.masse .dimline { stroke: var(--mine); stroke-width: 1; }
/* survol : le port et son étiquette s'allument ensemble (classe posée en JS) */
.masse .port, .masse-label { transition: opacity 0.25s; }
.masse .port.is-hot .sas, .masse .port.is-hot .door { stroke: var(--rotring); }
.masse .port.is-hot .flow { stroke: var(--rotring); color: var(--rotring); }
.masse-label.is-hot .masse-name { fill: var(--rotring-ink); }
.masse-label.is-hot .masse-skills { fill: var(--rotring-ink); }
.masse-label.is-hot .leader { stroke: var(--rotring); }
.masse.has-hot .port:not(.is-hot), .masse.has-hot .masse-label:not(.is-hot) { opacity: 0.45; }
/* relief au pointeur */
html.js .masse-wrap { perspective: 1100px; }
html.js .masse-wrap .masse { transform-style: preserve-3d; will-change: transform; }

/* ---------- PL-01 : relevé ---------- */
.releve { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.7rem; }
.releve .fiche h3 {
  font-family: var(--mono);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: 0.6rem;
}
.releve-out {
  border-top: 1px solid var(--hairline);
  padding-top: 0.9rem;
  text-wrap: balance;
  font-family: var(--mono);
  font-size: 0.76rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--mine-ink);
}

/* ---------- PL-02 : appuis ---------- */
.appuis { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; border-top: 1.5px solid var(--graphite); padding-top: 1.8rem; }
.appui h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.005em; margin-bottom: 0.5rem; }
.appui p { font-size: 0.94rem; line-height: 1.62; }
/* un nom de commande coupé en deux se lit comme une coquille */
.appui code, .detail-note code { white-space: nowrap; }

/* ---------- PL-03 : détails d'exécution ---------- */
.details { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
.detail { margin: 0; }
.detail-cap {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mine-ink);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.detail-cap span {
  color: var(--rotring-ink);
  border: 1px solid var(--rotring);
  padding: 0.18rem 0.55rem;
  flex: none;
}
.detail-note {
  margin-top: 0.9rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--graphite);
  max-width: 66ch;
}
.detail .axon-wrap { width: min(100%, 640px); }

/* le cycle TDD */
.tdd { border: 1.5px solid var(--graphite); background: var(--velin-clair); }
.tdd-code {
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.65;
  padding: 1.1rem 1.3rem;
  border-bottom: 1px solid var(--hairline-soft);
  overflow-x: auto;
}
.tdd-code .c, .tdd-run .c { color: var(--mine-ink); }
.tdd-code .k, .tdd-run .k { color: var(--cyan); }
.tdd-code .s, .tdd-run .s { color: var(--rotring-ink); }
.tdd-code .n, .tdd-run .n { color: var(--rotring-ink); }
.tdd-run {
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.7;
  padding: 1.1rem 1.3rem 1.2rem;
  min-height: 15.5em;
}
.tdd-line { margin: 0; overflow-x: auto; }
.tdd-cmd { color: var(--graphite); font-weight: 500; }
.tdd-cmd::before { content: ""; }
.tdd-green { color: var(--vert); font-weight: 500; }
.tdd-dim { color: var(--mine-ink); }
.tdd-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1.3rem;
  border-top: 1px solid var(--hairline-soft);
}
.tdd-src {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--mine-ink);
}
.tdd-stamp {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vert);
  text-decoration: none;
  border: 2px solid var(--vert);
  border-radius: 3px;
  padding: 0.3rem 0.8rem 0.3rem 1.02rem;
  transform: rotate(-6deg);
  opacity: 0.92;
  transition: opacity 0.22s, transform 0.22s;
}
.tdd-stamp:hover, .tdd-stamp:focus-visible { opacity: 1; transform: rotate(-2deg); }

/* coupe de migration strangler */
.strangler { width: 100%; height: auto; }
.strangler .sw { fill: none; stroke: var(--graphite); stroke-width: 1.3; }
.strangler .lot { stroke-width: 1.5; }
.strangler .lot--dash { stroke-dasharray: 6 4; }
.strangler .lot-leg { fill: url(#hachLeg); }
.str-hachline { stroke: var(--mine); stroke-width: 0.8; opacity: 0.7; }
.strangler .lot-clean { fill: var(--velin-clair); }
.strangler .hex { stroke: var(--rotring); stroke-width: 1.5; }
.strangler .hex--mini { stroke-width: 1.1; }
.str-ord { font-family: var(--mono); font-size: 13px; font-weight: 500; fill: var(--rotring-ink); }
.str-lot {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--mine-ink);
}
.str-later {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--graphite);
}
.str-note { font-family: var(--mono); font-size: 10.5px; fill: var(--mine-ink); }
.str-socle .sw { stroke-width: 1.5; }
.strangler .lot-neuf { opacity: 1; }

/* pièce jointe nocturne : la maquette filmée */
.detail--nuit .detail-cap span { border-color: var(--cyan); color: var(--cyan); }
.maquette {
  border: 1.5px solid var(--graphite);
  background: var(--nuit);
  padding: clamp(0.6rem, 1.6vw, 1.1rem);
}
.maquette-video { width: 100%; height: auto; display: block; }
.detail-note--nuit { font-family: var(--mono); font-size: 0.78rem; color: var(--mine-ink); }
/* la pièce jointe ferme le dossier, sur le gabarit des planches : note à gauche, image à droite */
.planche--pj { padding-bottom: 1.2rem; }
.planche--pj .margin-note { margin-top: 0; }

/* ---------- PL-04 : références ---------- */
.refs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.7rem; }
.refs .fiche h3 span { font-family: var(--mono); font-weight: 400; font-size: 0.68rem; letter-spacing: 0.1em; color: var(--mine-ink); margin-left: 0.6em; text-transform: uppercase; }
.refs .coupe { margin-top: 1.2rem; }
.refs .strate-body { padding-bottom: 1rem; }
.refs .strate-body h3 { font-size: 0.96rem; }
.refs .strate-tags { margin-top: 0.3rem; }

/* ---------- PL-05 : réserves ---------- */
.reserves { border-top: 1.5px solid var(--graphite); }
.reserve {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 1rem 2.4rem;
  padding: 1.5rem 0 1.6rem;
  border-bottom: 1px solid var(--hairline-soft);
}
.reserve-q { font-weight: 650; font-size: 1.02rem; line-height: 1.5; letter-spacing: -0.004em; }
.reserve-q span {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rotring-ink);
  margin-bottom: 0.5rem;
}
.reserve-a { font-size: 0.95rem; line-height: 1.65; position: relative; padding-left: 1.1rem; border-left: 1px solid var(--cyan); }

/* ---------- PL-06 : phasage ---------- */
.phasage { display: grid; gap: 2rem; border-top: 1.5px solid var(--graphite); padding-top: 2rem; }
.phase-bar {
  position: relative;
  height: 26px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 1.1rem;
}
.phase-bar i {
  position: absolute;
  bottom: -1px;
  left: calc(var(--ph-i) * 33.33%);
  width: var(--ph-w);
  height: 9px;
  background: repeating-linear-gradient(45deg, rgba(232,89,12,0.75) 0 2px, transparent 2px 6px);
  border: 1px solid var(--rotring);
  transform-origin: left center;
}
.phase-jours {
  position: absolute;
  bottom: 12px;
  left: calc(var(--ph-i) * 33.33%);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rotring-ink);
}
.phase-body h3 { font-size: 1.12rem; font-weight: 700; margin-bottom: 0.5rem; }
.phase-body p { font-size: 0.94rem; line-height: 1.62; max-width: 68ch; }
.phase-livrable {
  margin-top: 0.7rem;
  padding-left: 1rem;
  border-left: 1px solid var(--cyan);
}
.phase-livrable b {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-right: 0.55em;
}

/* ---------- PL-07 : sondages ---------- */
.sondages { list-style: none; border-top: 1.5px solid var(--graphite); }
.sondages li {
  display: grid;
  grid-template-columns: 4.6em minmax(0, 1fr) auto;
  gap: 1.2rem;
  align-items: baseline;
  padding: 1rem 0 1.05rem;
  border-bottom: 1px solid var(--hairline-soft);
}
.sd-rep {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--rotring-ink);
  position: relative;
  padding-left: 1.3em;
}
/* symbole de sondage : cercle à moitié hachuré (convention géotechnique) */
.sd-rep::before {
  content: "";
  position: absolute;
  left: 0; top: 0.18em;
  width: 0.78em; height: 0.78em;
  border: 1px solid var(--graphite);
  border-radius: 50%;
  background: linear-gradient(135deg, transparent 50%, var(--mine) 50%);
}
.sondages p { font-size: 0.94rem; line-height: 1.6; max-width: 72ch; }
.sd-verif {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  border: 1px dashed var(--cyan);
  padding: 0.2rem 0.5rem;
  white-space: nowrap;
}

/* ---------- dépôt du dossier ---------- */
.planche--depot { padding-top: 1.2rem; }
.depot {
  border: 1.5px solid var(--graphite);
  background: var(--velin-clair);
  padding: clamp(2rem, 5vw, 3.4rem);
}
.depot h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 720; letter-spacing: -0.014em; margin-bottom: 0.8rem; }
.depot > p { max-width: 52ch; }
.depot .contact-block { margin-top: 1.9rem; }

/* ---------- responsive v2 ---------- */
@media (max-width: 1080px) {
  .masse-wrap { width: min(100%, 620px); }
  .appuis { grid-template-columns: 1fr; }
  .reserve { grid-template-columns: 1fr; gap: 0.7rem; }
  .reserve-a { margin-left: 0; }
}
@media (max-width: 720px) {
  .masse-name { font-size: 16px; }
  .masse-skills { font-size: 13.5px; }
  .masse-note, .masse-ring-label { font-size: 12.5px; }
  .masse-core-sub { font-size: 12px; }
  .sondages li { grid-template-columns: 4.2em minmax(0, 1fr); }
  .sd-verif { display: none; }
  .tdd-code, .tdd-run { font-size: 0.72rem; padding: 0.9rem 0.95rem; }
  .tdd-foot { padding: 0.7rem 0.95rem; flex-wrap: wrap; }
  .tdd-stamp { font-size: 0.72rem; letter-spacing: 0.2em; padding: 0.25rem 0.6rem 0.25rem 0.8rem; }
  .phase-bar { height: 30px; }
  .detail-cap { flex-wrap: wrap; row-gap: 0.4rem; }
}

/* ---------- reduced motion : tout est affiché, rien ne bouge ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .axon .layer:hover .lift { transform: none; }
  html.js .masse-wrap .masse { transform: none !important; }
}