/* ==========================================================================
   Portfolio Morgan Doyen
   Charte « plan technique » : cadre à règles, cartouche, cotes, hachures.
   ========================================================================== */

/* ---------- Polices (auto-hébergées, licence OFL) ---------- */
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-condensed-600-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/barlow-500-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-600-latin.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-400-latin.woff2") format("woff2");
}

/* ---------- Variables ---------- */
:root {
  --ink: #15253D;          /* bleu nuit : texte principal, titres, cadre */
  --ink-2: #5F6B7A;        /* gris ardoise : texte secondaire */
  --line: #C7CFD8;         /* traits secondaires */
  --line-mid: #9AA6B4;     /* traits de construction (règles, cartouche) */
  --paper: #F3F5F7;        /* fond */
  --white: #FFFFFF;
  --hatch: #E7EBEF;        /* fond des emplacements d'image */
  --track: #E1E6EB;        /* jauges vides */
  --field: #8A95A3;        /* bordure des champs */
  --accent: #2453D4;       /* boutons, liens actifs, informations importantes */
  --accent-hover: #1B41AA;
  --night-text: #AEB8C6;
  --night-line: #2B3D57;

  --f-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-body: "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --maxw: 136rem;
  --pad: clamp(1.25rem, 5.6vw, 5rem);
  --sheet-m: clamp(0.75rem, 2.8vw, 2.5rem);
  --section-y: clamp(4rem, 6.5vw, 6rem);
  --header-h: 5.5rem;
  --rule: 1.5rem;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* Mise à l’échelle : toutes les tailles sont en rem.
   Téléphone et tablette (≤ 860 px) : base fixe de 16 px, pour la lisibilité.
   Ordinateur : la base suit la largeur ET la hauteur de l’écran, réglée à environ 70 %
   de l’échelle « plein écran » (équivalent d’un zoom Chrome à 70 %), avec un minimum de 14 px. */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (min-width: 861px) {
  html { font-size: clamp(14px, min(0.7778vw, 1.2444vh), 22px); }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, dl, dd, figure, blockquote { margin: 0; }
img, svg { display: block; max-width: 100%; }
sup { font-size: .6em; line-height: 0; }
button, input, textarea { font: inherit; color: inherit; }

a { color: var(--accent); text-decoration: none; transition: color .2s; }
a:hover { color: var(--accent-hover); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 0.1875rem; }

::selection { background: var(--accent); color: var(--white); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 100;
  padding: 0.75rem 1.125rem;
  background: var(--ink);
  color: var(--white);
  font-weight: 600;
}
.skip-link:focus { top: 1rem; color: var(--white); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mono { font-family: var(--f-mono); }
.muted { color: var(--ink-2); }
.accent { color: var(--accent); }

/* Texte à compléter : repérable d'un coup d'œil */
.todo { color: var(--ink-2); }

/* ---------- Mise en page ---------- */
.container {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section { padding-block: var(--section-y); }
.section--white { background: var(--white); border-block: 1px solid var(--line); }
.section--white + .section--white { border-top: 0; }
.section--night { background: var(--ink); color: var(--white); }
/* Pages projet : visuel principal rapproché de la fiche, bandeau précédent / suivant plus bas */
.section--figure { padding-top: 3.5rem; }
.section--pager { padding-block: 3.5rem; }

.split {
  display: grid;
  grid-template-columns: 20rem minmax(0, 1fr);
  gap: 5rem;
}
.split__head { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }

.h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(2.125rem, 3.4vw, 2.75rem);
  line-height: 1;
  letter-spacing: 0;
}
.h3-label {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-2);
}
.eyebrow {
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  color: var(--accent);
  letter-spacing: .02em;
}
.side-note { max-width: 17.5rem; font-size: 1rem; line-height: 1.6; color: var(--ink-2); }

/* ---------- En-tête ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(243, 245, 247, .92);
  -webkit-backdrop-filter: saturate(1.2) blur(0.625rem);
  backdrop-filter: saturate(1.2) blur(0.625rem);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s;
}
.site-header.is-scrolled { box-shadow: 0 0.375rem 1.5rem -1.125rem rgba(21, 37, 61, .5); }

.site-header__inner {
  position: relative;
  max-width: var(--maxw);
  height: var(--header-h);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand { display: flex; flex-direction: column; gap: 2px; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand__name {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: 0;
}
.brand__sub { font-size: 0.8125rem; color: var(--ink-2); }

.nav { display: flex; align-items: center; gap: 0.25rem; }
.nav__link {
  padding: 0.75rem 1.125rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-2);
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav__link:hover { color: var(--ink); border-bottom-color: var(--line); }
.nav__link[aria-current="page"] {
  font-weight: 600;
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.nav__cv { margin-left: 1rem; }

.nav-toggle { display: none; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  height: 3.5rem;
  padding: 0 1.75rem;
  border: 1.5px solid transparent;
  background: none;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--white); }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--white); }
.btn--outline { padding: 0 1.5rem; border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--white); }
.btn--light { padding: 0 1.5rem; border-color: var(--white); color: var(--white); }
.btn--light:hover { background: var(--white); color: var(--ink); }
.btn--sm { height: 2.75rem; padding: 0 1.125rem; gap: 0.5rem; font-size: 0.9375rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}
.link-arrow svg { width: 1.125rem; height: 1.125rem; transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(0.25rem); }

/* ---------- Cadre de plan (feuille à règles) ---------- */
.sheet-wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 1.5rem var(--sheet-m) 0;
}
.sheet-wrap--bottom { padding-bottom: 2.5rem; }

.sheet {
  display: grid;
  grid-template-columns: var(--rule) minmax(0, 1fr) var(--rule);
  border: 2px solid var(--ink);
}

.ruler {
  display: grid;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  color: var(--ink-2);
  user-select: none;
}
.ruler span { display: flex; align-items: center; justify-content: center; }
.ruler--h {
  grid-column: 1 / -1;
  height: var(--rule);
  grid-template-columns: var(--rule) repeat(6, minmax(0, 1fr)) var(--rule);
}
.ruler--h span + span { border-left: 1px solid var(--line); }
.ruler--h span:first-child { border-right: 1px solid var(--line-mid); }
.ruler--h span:nth-child(2) { border-left: 0; }
.ruler--h span:last-child { border-left: 1px solid var(--line-mid); }
.ruler--top { border-bottom: 1px solid var(--line-mid); }
.ruler--bottom { border-top: 1px solid var(--line-mid); }
.ruler--v { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.ruler--v span + span { border-top: 1px solid var(--line); }
.ruler--left { border-right: 1px solid var(--line-mid); }
.ruler--right { border-left: 1px solid var(--line-mid); }

.sheet__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(23.75rem, 38vw, 44rem);
  min-width: 0;
}
.sheet__main {
  container-type: inline-size;
  padding: clamp(2rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.5rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
  min-width: 0;
}
.sheet__side {
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sheet__side--white { background: var(--white); }

.display {
  font-family: var(--f-display);
  font-weight: 600;
  font-style: normal;
  font-size: clamp(3.5rem, 24cqi, 8.75rem);
  line-height: .92;
  letter-spacing: 0;
  color: var(--ink);
}
.display--md { font-size: clamp(2.75rem, 12.5cqi, 6rem); line-height: .95; }

.hero__intro { display: flex; flex-direction: column; gap: 2rem; }
.hero__lead { max-width: 36.25rem; font-size: clamp(1.1875rem, 1.65vw, 1.4375rem); line-height: 1.45; }
.hero__intro--contents { gap: 1rem; }
.hero__intro--project { gap: 1.5rem; }

/* Contact : bloc aligné en haut, texte un peu plus étroit */
.sheet__main--contact { justify-content: flex-start; gap: 1.75rem; }
.sheet__main--contact .hero__lead { max-width: 33.75rem; }

/* Accueil : titre « Portfolio » sur une ligne, bloc aligné à gauche et centré verticalement */
.sheet__main--hero { justify-content: center; gap: clamp(1.75rem, 2.6vw, 2.25rem); }
.hero__intro--home { gap: 0; }
.kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: clamp(0.875rem, 1.6vw, 1.25rem);
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: .16em;
  color: var(--ink-2);
}
.kicker::before { content: ""; width: 1.75rem; height: 1px; background: var(--ink-2); flex-shrink: 0; }
.display--hero {
  font-size: clamp(3.5rem, 28cqi, 8.5rem);
  line-height: .88;
  white-space: nowrap;
}
/* Introduction : 18-20 px, environ 45 caractères par ligne */
.hero__intro--home .hero__lead {
  margin-top: clamp(1.125rem, 2vw, 1.625rem);
  max-width: 20.75em;
  font-size: clamp(1.125rem, 1.4vw, 1.25rem);
  line-height: 1.5;
}

/* Cartouche */
.cartouche {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-mid);
  border-top: 2px solid var(--ink);
}
.cartouche__cell {
  grid-column: span 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.625rem 1rem;
  background: var(--white);
  min-width: 0;
}
.cartouche__cell--full { grid-column: span 4; }
.cartouche__cell--half { grid-column: span 2; }
.cartouche__label { font-family: var(--f-mono); font-weight: 400; font-size: 0.6875rem; letter-spacing: .02em; color: var(--ink-2); }
.cartouche__value { font-size: 1rem; }
.cartouche__value--name { font-family: var(--f-display); font-weight: 600; font-size: 1.6875rem; line-height: 1.15; }
.cartouche__value--mono { font-family: var(--f-mono); }
.cartouche__value--accent { font-weight: 600; color: var(--accent); }

/* Portrait + axes + cote */
.portrait {
  flex-grow: 1;
  padding: 2.25rem clamp(2rem, 4vw, 3.75rem) 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.portrait__frame { position: relative; width: 100%; max-width: 22.5rem; }
.portrait .dim { max-width: 22.5rem; }
.portrait__frame .visual { --ratio: 420 / 460; z-index: 1; }
.portrait__frame .visual img { object-position: 50% 30%; }

/* Axes en trait mixte fin, comme sur un plan */
.axis {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: .75;
}
.axis--v {
  left: 50%; top: -1.125rem; bottom: -1.125rem; width: 1px;
  background: repeating-linear-gradient(to bottom, var(--ink-2) 0 0.6875rem, transparent 0.6875rem 0.875rem, var(--ink-2) 0.875rem 1rem, transparent 1rem 1.1875rem);
}
.axis--h {
  top: 50%; left: -1.125rem; right: -1.125rem; height: 1px;
  background: repeating-linear-gradient(to right, var(--ink-2) 0 0.6875rem, transparent 0.6875rem 0.875rem, var(--ink-2) 0.875rem 1rem, transparent 1rem 1.1875rem);
}
.portrait__frame:has(.is-missing) .axis { z-index: 2; }

.dim {
  position: relative;
  width: 100%;
  height: 1.125rem;
  margin-top: 0.625rem;
  border-inline: 1px solid var(--ink);
}
.dim__line {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--ink);
  transform-origin: center;
}
.dim__line::before,
.dim__line::after {
  content: "";
  position: absolute;
  top: -0.2188rem;
  width: 0.625rem;
  height: 0.5rem;
  background: var(--ink);
}
.dim__line::before { left: 0; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.dim__line::after { right: 0; clip-path: polygon(100% 50%, 0 0, 0 100%); }
.dim__label { font-family: var(--f-mono); font-size: 0.75rem; color: var(--ink-2); }

/* ---------- Emplacements d'image (hachurés tant que l'image manque) ---------- */
.visual {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  aspect-ratio: var(--ratio, 3 / 2);
  padding: 1rem;
  border: 1.5px solid var(--ink);
  background-color: var(--hatch);
  background-image: repeating-linear-gradient(135deg, rgba(21, 37, 61, .09) 0 1px, transparent 1px 0.75rem);
}
.visual img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.visual__ph {
  position: relative;
  z-index: 3;
  max-width: 92%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--ink);
  background: var(--paper);
  font-size: 0.875rem;
  line-height: 1.35;
  text-align: center;
}
.visual__ph[data-file]::after {
  content: attr(data-file);
  display: block;
  margin-top: 0.25rem;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  color: var(--accent);
}
.visual--lg .visual__ph { padding: 0.625rem 1rem; font-size: 0.9375rem; }
.visual.is-missing img { display: none; }
.visual.has-img .visual__ph { visibility: hidden; }
.visual--zoom { cursor: zoom-in; }
.visual--zoom:hover img { transform: scale(1.025); }
.visual--zoom:focus-visible { outline-offset: 0.25rem; }

.fig { display: flex; flex-direction: column; gap: 0.625rem; min-width: 0; }
.fig figcaption {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-2);
}
.fig__num { font-family: var(--f-mono); font-size: 0.75rem; color: var(--accent); white-space: nowrap; }

/* ---------- Accueil : à propos ---------- */
/* ---------- Accueil : ce qui me motive ---------- */
.section--motive { padding-top: clamp(4rem, 7vw, 6.5rem); }
.motive { padding-top: clamp(2.5rem, 4.5vw, 4rem); border-top: 1px solid var(--line); }
.motive__body {
  display: flex;
  flex-direction: column;
  gap: 1.1em;
  max-width: 26.25em;
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
  line-height: 1.6;
}
.link-quiet {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-mid);
  text-underline-offset: 0.1875rem;
  transition: color .2s, text-decoration-color .2s;
}
.link-quiet:hover { color: var(--accent); text-decoration-color: currentColor; }

/* Titre | texte | encadré « Note » */
.motive {
  grid-template-columns: minmax(0, 18rem) minmax(0, 31.5rem) minmax(0, 1fr);
  column-gap: clamp(2.5rem, 4.5vw, 4.5rem);
  align-items: start;
}
/* Annotation de plan : cadre fin, libellé posé sur le trait, trait de repère vers le texte */
.note {
  position: relative;
  align-self: center;
  width: 100%;
  max-width: 26rem;
  padding: 2.25rem 2rem 2rem;
  border: 1px solid var(--line-mid);
}
.note::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  width: clamp(1.5rem, 3vw, 3rem);
  height: 1px;
  background: var(--line-mid);
}
.note::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + clamp(1.5rem, 3vw, 3rem));
  width: 0.4375rem;
  height: 0.4375rem;
  margin: -0.21875rem -0.21875rem 0 0;
  border-radius: 50%;
  background: var(--ink-2);
}
.note__label {
  position: absolute;
  top: 0;
  left: 1.5rem;
  transform: translateY(-50%);
  padding: 0 0.5rem;
  background: var(--paper);
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.note__quote {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 2.2vw, 2.375rem);
  line-height: 1.12;
  color: var(--ink);
}

/* ---------- Cartes projets ---------- */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}
.section-head__text { display: flex; flex-direction: column; gap: 0.875rem; max-width: 38.75rem; }

/* Accueil : projets en tableau de 3 colonnes ; chaque ligne (repère, image, titre,
   texte, lien) est alignée d’une colonne à l’autre grâce à subgrid */
.project-table {
  --ptable-gap: clamp(2.5rem, 4vw, 4rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--ptable-gap);
  grid-template-rows: repeat(5, auto);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.ptable__item {
  position: relative;
  grid-row: span 5;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding-bottom: 1.75rem;
  color: var(--ink);
}
/* Trait de séparation au milieu de l’espace entre deux colonnes (colonnes de largeur égale) */
.ptable__item + .ptable__item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--ptable-gap) / -2);
  width: 1px;
  background: var(--line);
}
.ptable__item:hover { color: var(--ink); }
.ptable__meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 0;
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.ptable__meta .accent { color: var(--accent); }
.ptable__item .visual { --ratio: 16 / 9; margin-bottom: 1.25rem; }
.ptable__item:hover .visual img { transform: scale(1.03); }
.ptable__title {
  margin-bottom: 0.625rem;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2vw, 1.875rem);
  line-height: 1.1;
  transition: color .2s;
}
.ptable__item:hover .ptable__title { color: var(--accent); }
.ptable__text { margin-bottom: 1.25rem; font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.ptable__more {
  align-self: end;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--accent);
}
.ptable__more svg { width: 1.125rem; height: 1.125rem; transition: transform .25s var(--ease); }
.ptable__item:hover .ptable__more svg { transform: translateX(0.25rem); }

/* ---------- Nomenclature (compétences, sommaire) ---------- */
.bom__head,
.bom__row {
  display: grid;
  grid-template-columns: minmax(11.25rem, 16.25rem) minmax(0, 1fr) minmax(10rem, 13.75rem);
  gap: 1.5rem;
}
.bom__head {
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--ink);
  font-size: 0.875rem;
  color: var(--ink-2);
}
.bom__row { align-items: center; padding: 1.375rem 0; border-bottom: 1px solid var(--line); }
.bom__domain { font-family: var(--f-body); font-weight: 600; font-size: 1.25rem; line-height: 1.25; }
.bom__tools { font-size: 1.0625rem; line-height: 1.5; }
.bom__level { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; color: var(--ink-2); }

.meter {
  display: grid;
  grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
  gap: 0.25rem;
}
.meter span { height: 0.5rem; background: var(--track); transition: background-color .45s ease; }
.meter span.on { background: var(--accent); }
.js .meter[data-fill] span.on { background: var(--track); }
.js .meter[data-fill].is-visible span.on { background: var(--accent); }
.meter span:nth-child(2) { transition-delay: .08s; }
.meter span:nth-child(3) { transition-delay: .16s; }
.meter span:nth-child(4) { transition-delay: .24s; }
.meter span:nth-child(5) { transition-delay: .32s; }
.meter span:nth-child(6) { transition-delay: .4s; }

/* ---------- Parcours ---------- */
.tl-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem; }
.tl { display: flex; flex-direction: column; }
.tl__item {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--line);
}
.tl__item:last-child { border-bottom: 1px solid var(--line); }
.tl__date { font-size: 0.875rem; font-weight: 600; color: var(--accent); }
.tl__name { font-family: var(--f-body); font-weight: 600; font-size: 1.3125rem; line-height: 1.25; }
.tl__place { font-size: 1rem; font-weight: 500; }
.tl__desc { font-size: 1rem; line-height: 1.5; color: var(--ink-2); }

/* ---------- Profil personnel ---------- */
.traits {
  display: grid;
  grid-template-columns: 20rem repeat(3, minmax(0, 1fr));
  gap: 3.5rem;
}
.traits__col { display: flex; flex-direction: column; gap: 1rem; }
.traits__col .h3-label { margin: 0; }
.qualities {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.15;
}
.lang { display: flex; flex-direction: column; gap: 0.5rem; }
.lang__row { display: flex; justify-content: space-between; font-size: 1.125rem; }
.lang__row strong { font-weight: 600; }
.interests { display: flex; flex-direction: column; gap: 0.625rem; font-size: 1.1875rem; line-height: 1.4; }
.small-note { font-size: 0.8125rem; color: var(--ink-2); }

/* ---------- Bandeau d'appel ---------- */
.cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem 4rem;
  min-height: 21.25rem;
}
.cta__text { display: flex; flex-direction: column; gap: 1rem; max-width: 47.5rem; }
.cta__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(2.375rem, 4.3vw, 3.875rem);
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--white);
}
.cta__sub { font-size: 1.1875rem; line-height: 1.6; color: var(--night-text); }
.cta .btn-row { flex-shrink: 0; }

/* ---------- Pied de page ---------- */
.site-footer { background: var(--ink); border-top: 1px solid var(--night-line); color: var(--night-text); font-size: 0.9375rem; }
.section--night + .site-footer { border-top-color: var(--night-line); }
.site-footer__inner {
  max-width: var(--maxw);
  min-height: 6rem;
  margin-inline: auto;
  padding: 1.5rem var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.75rem;
  flex-wrap: wrap;
}
.site-footer nav { display: flex; gap: 1.75rem; }
.site-footer a { color: var(--white); }
.site-footer a:hover { color: var(--night-text); }

/* ---------- Page Projets : sommaire ---------- */
.contents { flex-grow: 1; padding: 3rem 2.5rem 2.25rem; display: flex; flex-direction: column; }
.contents__head,
.contents__row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) 5.625rem;
  align-items: center;
}
.contents__head { padding-bottom: 0.625rem; border-bottom: 2px solid var(--ink); font-size: 0.8125rem; color: var(--ink-2); }
.contents__row {
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 1.0625rem;
  transition: background-color .2s, padding .25s var(--ease);
}
.contents__row:hover { color: var(--ink); background: var(--white); padding-left: 0.5rem; }
.contents__rep { font-family: var(--f-mono); color: var(--accent); }
.contents__name { font-weight: 600; }
.contents__dur { color: var(--ink-2); }

.note { font-size: 0.875rem; line-height: 1.5; color: var(--ink-2); max-width: 32.5rem; }

/* ---------- Page Projets : fiches ---------- */
.project {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 4.5rem;
  align-items: start;
}
.project--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
.project--reverse .project__media { order: 2; }
.project__media { display: flex; flex-direction: column; gap: 1rem; }
.project__media .visual { --ratio: 38 / 25; }
.project__thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.project__thumbs .visual { --ratio: 17 / 10; }
.project__body { display: flex; flex-direction: column; gap: 1.375rem; }
.project__rep { font-family: var(--f-mono); font-size: 0.875rem; color: var(--accent); }
.project__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(2.375rem, 3.5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: 0;
}
.project__meta { font-size: 1rem; color: var(--ink-2); }
.project__lead { font-size: clamp(1.125rem, 1.4vw, 1.25rem); line-height: 1.55; }

.specs { display: flex; flex-direction: column; margin-top: 0.5rem; }
.specs > div {
  display: grid;
  grid-template-columns: 8.125rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}
.specs > div:last-child { border-bottom: 1px solid var(--line); }
.specs dt { font-size: 0.875rem; color: var(--ink-2); padding-top: 2px; }
.specs dd { font-size: 1.0625rem; line-height: 1.5; }

/* ---------- Page projet détaillée ---------- */
.crumbs {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 1.75rem var(--sheet-m) 0;
  display: flex;
  gap: 0.625rem;
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.crumbs + .sheet-wrap { padding-top: 1rem; }
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--accent); }

.facts { flex-grow: 1; padding: 2.5rem 2.5rem 2rem; display: flex; flex-direction: column; }
.facts .specs { margin-top: 0; }
.facts .specs > div { grid-template-columns: 7.5rem minmax(0, 1fr); padding: 0.875rem 0; }
.facts .specs dd { font-size: 1rem; }

.figure-wide .visual { --ratio: 16 / 8; }
/* Vidéo de présentation : 16:9, image entière, cadre de plan */
.video-frame { border: 1.5px solid var(--ink); background: var(--hatch); }
.video-frame video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
.figure-wide .dim { margin-top: 1.125rem; }

/* Maquette 3D : aperçu fixe, puis lecteur chargé au clic */
.viewer3d { margin-bottom: 3rem; }
.viewer3d__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1.5px solid var(--ink);
  background: var(--white);
  overflow: hidden;
}
.viewer3d__poster { width: 100%; height: 100%; object-fit: contain; }
.viewer3d__btn { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); }
.viewer3d__status {
  position: absolute;
  left: 0; right: 0; bottom: 0.5rem;
  margin: 0;
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  text-align: center;
  color: var(--ink-2);
}
.viewer3d__status:empty { display: none; }
.viewer3d__frame model-viewer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--white);
  --poster-color: transparent;
}
.viewer3d__frame.is-loading .viewer3d__btn { visibility: hidden; }
.viewer3d__frame.is-ready .viewer3d__poster,
.viewer3d__frame.is-ready .viewer3d__btn { display: none; }
@media (max-width: 720px) {
  .viewer3d__frame { aspect-ratio: 4 / 3; }
  .viewer3d__btn { bottom: 1rem; height: 3rem; padding: 0 1.25rem; }
}

/* Maquette 3D qui tourne au défilement (visuel principal du préhenseur).
   Par défaut (sans JS, « animations réduites », écran trop bas) : aperçu fixe.
   Sinon la scène reste épinglée sous l'en-tête le temps d'un tour complet. */
.turntable { --turn: 0; padding-bottom: var(--section-y); }
.turntable__fig { gap: 0; }
.turntable__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1.5px solid var(--ink);
  background: var(--white);
  overflow: hidden;
}
.turntable__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity .8s var(--ease);
}
.turntable__frame.is-ready .turntable__poster { opacity: 0; }
.turntable__frame model-viewer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  --poster-color: transparent;
  --min-hotspot-opacity: 1; /* visibilité des repères gérée par main.js */
}
.turntable__readout,
.turntable__hint,
.turntable__status {
  position: absolute;
  z-index: 2;
  margin: 0;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  color: var(--ink-2);
  pointer-events: none;
}
.turntable__readout { top: 1rem; left: 1.25rem; opacity: 0; transition: opacity .4s; }
.turntable__frame.is-ready .turntable__readout { opacity: 1; }
.turntable__hint { left: 50%; bottom: 1.25rem; transform: translateX(-50%); white-space: nowrap; opacity: 0; transition: opacity .4s; }
.turntable__frame.is-ready .turntable__hint { opacity: 1; }
.turntable__frame.is-turning .turntable__hint { opacity: 0; }
.turntable__status { left: 0; right: 0; bottom: 1.25rem; text-align: center; }
.turntable__status:empty { display: none; }

/* Cote sous la maquette : elle s'allonge avec la rotation (0 à 360°) */
.turntable__dim { margin-top: 1rem; }

/* Nomenclature des repères (seulement avec la maquette animée) : en noir quand le repère fait face à la caméra */
.turntable__legend {
  display: none;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 1rem 0 0.75rem;
  padding: 0;
  list-style: none;
  border-block: 1px solid var(--line);
}
.turntable__legend li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-left: 1px solid var(--line);
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--ink-2);
  transition: color .3s;
}
.turntable__legend li:first-child { border-left: 0; padding-left: 0; }
.turntable__legend li.is-visible { color: var(--ink); }
.turntable__legend li.is-active { color: var(--accent); }
.turntable__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1.5px solid var(--line-mid);
  border-radius: 50%;
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  transition: border-color .3s;
}
.turntable__legend li.is-visible .turntable__num { border-color: var(--ink); }
.turntable__legend li.is-active .turntable__num { border-color: var(--accent); }

/* Repère posé sur la maquette : point, ligne de rappel à 45°, bulle numérotée */
.rep {
  --sx: 1; --sy: -1; --a: -45deg;
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ink);
  pointer-events: none;
  transition: opacity .35s;
}
.rep.is-hidden { opacity: 0; }
.rep.is-hidden .rep__num { pointer-events: none; }
.rep--nw { --sx: -1; --sy: -1; --a: -135deg; }
.rep--se { --sx: 1; --sy: 1; --a: 45deg; }
.rep--sw { --sx: -1; --sy: 1; --a: 135deg; }
.rep::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.95rem;
  height: 1px;
  background: var(--ink);
  transform-origin: 0 50%;
  transform: rotate(var(--a));
}
.rep__num {
  position: absolute;
  left: calc(50% + var(--sx) * 2rem - 0.875rem);
  top: calc(50% + var(--sy) * 2rem - 0.875rem);
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--white);
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  color: var(--ink);
  pointer-events: auto;
  transition: color .3s, border-color .3s;
}
.rep.is-active { background: var(--accent); }
.rep.is-active::before { background: var(--accent); }
.rep.is-active .rep__num { border-color: var(--accent); color: var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  .js .turntable:not(.is-static) .turntable__legend { display: grid; }
  .js .turntable:not(.is-static) .turntable__dim { border-right-color: var(--line-mid); }
  .js .turntable:not(.is-static) .turntable__dim .dim__line { right: auto; width: calc(var(--turn) * 100%); min-width: 1.25rem; }
}
@media (prefers-reduced-motion: no-preference) and (min-height: 520px) {
  .js .turntable:not(.is-static) {
    --turn-length: 170vh;
    height: calc(3.5rem + 100vh - var(--header-h) + var(--turn-length));
    height: calc(3.5rem + 100svh - var(--header-h) + var(--turn-length));
    padding-bottom: 0;
  }
  .js .turntable:not(.is-static) .turntable__stage {
    position: sticky;
    top: var(--header-h);
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(100vh - var(--header-h));
    height: calc(100svh - var(--header-h));
    padding-block: 1.25rem 1.5rem;
  }
  .js .turntable:not(.is-static) .turntable__inner { display: flex; width: 100%; min-height: 0; flex: 1 1 auto; }
  .js .turntable:not(.is-static) .turntable__fig { flex: 1 1 auto; min-width: 0; }
  .js .turntable:not(.is-static) .turntable__frame { flex: 1 1 auto; min-height: 15rem; aspect-ratio: auto; }
}

@media (max-width: 1080px) {
  .turntable__legend { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .turntable__legend li:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
  .turntable__legend li:nth-child(n + 4) { border-top: 1px solid var(--line); }
}
@media (max-width: 720px) {
  .turntable__frame { aspect-ratio: 4 / 3; }
  .turntable__readout { top: 0.75rem; left: 0.875rem; font-size: 0.6875rem; }
  .turntable__hint { bottom: 0.875rem; font-size: 0.6875rem; }
  .turntable__legend { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0.75rem; }
  .turntable__legend li { gap: 0.5rem; padding: 0.5rem 0.625rem; font-size: 0.8125rem; }
  .turntable__legend li:nth-child(3n + 1) { border-left: 1px solid var(--line); padding-left: 0.625rem; }
  .turntable__legend li:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
  .turntable__legend li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .turntable__num { width: 1.5rem; height: 1.5rem; font-size: 0.75rem; }
  .rep__num { width: 1.5rem; height: 1.5rem; font-size: 0.75rem; left: calc(50% + var(--sx) * 1.625rem - 0.75rem); top: calc(50% + var(--sy) * 1.625rem - 0.75rem); }
  .rep::before { width: 1.55rem; }
}
@media (prefers-reduced-motion: no-preference) and (min-height: 520px) and (max-width: 720px) {
  .js .turntable:not(.is-static) { --turn-length: 140vh; }
  .js .turntable:not(.is-static) .turntable__frame { flex: 0 0 auto; aspect-ratio: 4 / 3; min-height: 0; }
  .js .turntable:not(.is-static) .turntable__inner { flex: 0 0 auto; }
}
.figure-wide figcaption { justify-content: center; margin-top: 0.25rem; }

.cdc { display: flex; flex-direction: column; margin-top: 0.5rem; }
.cdc__head,
.cdc__row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 1.25rem;
}
.cdc__head { padding-bottom: 0.625rem; border-bottom: 2px solid var(--ink); font-size: 0.8125rem; color: var(--ink-2); }
.cdc__row { padding: 1.125rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.cdc__ref { font-family: var(--f-mono); font-size: 0.875rem; color: var(--accent); }
.cdc__fn { font-size: 1.0625rem; font-weight: 500; line-height: 1.45; }
.cdc__crit { font-size: 1rem; line-height: 1.45; color: var(--ink-2); }
/* Tableau comparatif des solutions : solution / atouts / limites */
.cdc--compare .cdc__head,
.cdc--compare .cdc__row { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 1.2fr); }
.cdc--compare .cdc__fn,
.cdc--compare .cdc__crit { font-size: 1rem; font-weight: 400; }
.cdc__row--chosen { background: var(--white); box-shadow: inset 3px 0 0 var(--accent); padding-left: 1rem; }
.cdc__chosen { display: block; margin-top: 0.25rem; font-family: var(--f-mono); font-size: 0.75rem; color: var(--accent); }

/* Arbre des contraintes (préhenseur) : fonction principale, puis une contrainte de départ
   reliée à chaque contrainte, elle-même reliée par une flèche à la solution retenue.
   --stub-y : hauteur où chaque branche rejoint le tronc (milieu de la ligne sur ordinateur). */
.ctree { display: flex; flex-direction: column; gap: 2.25rem; margin-top: 0.5rem; }
.ctree .ctree__head { padding-bottom: 0.625rem; border-bottom: 2px solid var(--ink); font-size: 0.8125rem; color: var(--ink-2); }
.ctree__ref { font-family: var(--f-mono); font-size: 0.875rem; font-weight: 400; color: var(--accent); }
.ctree__fp {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: baseline;
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--line);
}
.ctree__fn { font-size: 1.0625rem; font-weight: 500; line-height: 1.45; }
.ctree__crit { font-size: 1rem; line-height: 1.45; color: var(--ink-2); }
.ctree__tree {
  --stub-y: 50%;
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  column-gap: 2.5rem;
  margin-top: 1.25rem;
}
.ctree .ctree__root {
  position: relative;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1rem;
  border: 1.5px solid var(--ink);
  background: var(--white);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
}
/* Les traits partent du bord intérieur des cadres : on ajoute l'épaisseur de la bordure pour qu'ils touchent le tronc */
.ctree__root::after { content: ""; position: absolute; left: 100%; top: 50%; width: calc(1.25rem + 1.5px); border-top: 1px solid var(--ink); }
.ctree__label { font-family: var(--f-mono); font-size: 0.6875rem; font-weight: 400; letter-spacing: .04em; color: var(--ink-2); text-transform: uppercase; }
.ctree__branches { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ctree__branch {
  position: relative;
  display: grid;
  grid-template-columns: 19rem minmax(0, 1fr);
  column-gap: 2.25rem;
  align-items: center;
  padding: 0.4375rem 0;
}
.ctree__branch::before { content: ""; position: absolute; left: -1.25rem; top: var(--stub-y); width: 1.25rem; border-top: 1px solid var(--ink); }
.ctree__branch::after { content: ""; position: absolute; left: -1.25rem; top: 0; bottom: 0; border-left: 1px solid var(--ink); }
.ctree__branch:first-child::after { top: var(--stub-y); }
.ctree__branch:last-child::after { bottom: auto; height: var(--stub-y); }
.ctree .ctree__need {
  position: relative;
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--ink);
  background: var(--white);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
}
.ctree__need::after { content: ""; position: absolute; left: 100%; top: 50%; width: calc(1.75rem + 1px); border-top: 1px solid var(--line-mid); }
.ctree .ctree__sol { position: relative; padding-left: 0.5rem; font-size: 1rem; line-height: 1.45; color: var(--ink-2); }
.ctree__sol::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--line-mid);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: translateY(-50%);
}

/* Mise en plan : dessin d'ensemble à gauche, deux dessins de définition empilés à droite */
.plans { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.plans__main { grid-row: span 2; }

/* Schémas et captures : image entière sur fond blanc, sans recadrage */
.visual--contain { background: var(--white); }
.visual--contain img { object-fit: contain; padding: 1rem; }
.visual--contain:hover img { transform: none; }
.figs-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }

.prose { display: flex; flex-direction: column; gap: 1.25rem; max-width: 51.25rem; }
.prose p { font-size: 1.125rem; line-height: 1.65; }
.prose .lead { font-size: clamp(1.3125rem, 1.9vw, 1.625rem); line-height: 1.45; }
/* Colonne élargie pour un schéma (arbre des contraintes) ; le texte garde sa largeur de lecture */
.prose--wide { max-width: 64rem; }
.prose--wide > p { max-width: 51.25rem; }

.gamme { display: flex; flex-direction: column; counter-reset: phase; }
.gamme__step {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-top: 1px solid var(--line);
}
.gamme__step:last-child { border-bottom: 1px solid var(--line); }
.gamme__num { display: flex; flex-direction: column; gap: 2px; }
.gamme__num span:first-child { font-family: var(--f-mono); font-size: 0.75rem; color: var(--ink-2); }
.gamme__num span:last-child {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 2.125rem;
  line-height: 1;
  color: var(--accent);
}
.gamme__body { display: flex; flex-direction: column; gap: 0.5rem; }
.gamme__title { font-family: var(--f-body); font-weight: 600; font-size: 1.375rem; line-height: 1.25; }
.gamme__text { font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); }
.gamme__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.375rem; }
.tag {
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  color: var(--ink);
  background: var(--paper);
}

.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 2rem; }
.gallery .visual { --ratio: 4 / 3; }

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
  margin-bottom: 3rem;
}
.stat { display: flex; flex-direction: column; gap: 0.375rem; padding: 1.5rem 1.5rem 1.5rem 0; }
.stat + .stat { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.stat__value {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(2.125rem, 3.3vw, 3rem);
  line-height: 1;
  letter-spacing: 0;
}
.stat__label { font-size: 0.875rem; line-height: 1.4; color: var(--ink-2); }

.learned { display: flex; flex-direction: column; margin-top: 0.5rem; }
.learned li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.875rem 0;
  border-top: 1px solid var(--line);
  font-size: 1.0625rem;
  line-height: 1.55;
}
.learned li:last-child { border-bottom: 1px solid var(--line); }
.learned li::before { content: "→"; color: var(--accent); font-weight: 600; }
ul.learned { margin: 0; padding: 0; list-style: none; }
.h3-label--learned { margin: 0.75rem 0 0; }

/* ---------- Chiffrage : barres de répartition et nomenclature ---------- */
.bars { display: flex; flex-direction: column; border-top: 2px solid var(--ink); }
.bars__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 8.5rem;
  gap: 1.25rem;
  align-items: center;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--line);
}
.bars__label { font-size: 1rem; font-weight: 500; line-height: 1.35; }
.bars__track { height: 1rem; }
.bars__fill {
  display: block;
  width: var(--w);
  min-width: 0.25rem;
  height: 100%;
  border-radius: 0 0.25rem 0.25rem 0;
  background: var(--ink);
  transition: opacity .2s;
}
.bars__value { text-align: right; font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bars__pct { margin-left: 0.5rem; font-weight: 400; color: var(--ink-2); }
.bars:hover .bars__fill { opacity: .35; }
.bars .bars__row:hover .bars__fill,
.bars .bars__row:focus-visible .bars__fill { opacity: 1; }
/* Infobulle au survol : détail du poste */
.bars__row[data-tip]:hover::after,
.bars__row[data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 5;
  left: 16.25rem;
  bottom: calc(100% - 0.375rem);
  padding: 0.375rem 0.625rem;
  background: var(--ink);
  color: var(--white);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  white-space: nowrap;
  pointer-events: none;
}
.bars__row:focus-visible { outline: 2px solid var(--accent); outline-offset: 0.25rem; }
.bars-note { margin-top: 0.875rem; font-size: 0.875rem; color: var(--ink-2); }

.insights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; margin: 0; padding: 0; list-style: none; }
.insights li { display: flex; flex-direction: column; gap: 0.375rem; padding: 1.5rem 0; border-top: 1px solid var(--line); }
.insights__value { font-family: var(--f-display); font-weight: 600; font-size: 2.25rem; line-height: 1; }
.insights__text { font-size: 1.0625rem; line-height: 1.55; color: var(--ink-2); }
.insights__text strong { color: var(--ink); font-weight: 600; }

.bom-block + .bom-block { margin-top: 3.5rem; }
.bom-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--ink); }
.bom-block__title { font-family: var(--f-body); font-weight: 600; font-size: 1.375rem; line-height: 1.25; }
.bom-block__sub { font-family: var(--f-mono); font-size: 0.875rem; color: var(--ink-2); white-space: nowrap; }
.table-scroll { overflow-x: auto; }
.bom-t { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.4; }
.bom-t th { padding: 0.75rem 1rem 0.5rem 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; font-size: 0.8125rem; color: var(--ink-2); }
.bom-t td { padding: 0.6875rem 1rem 0.6875rem 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.bom-t th:last-child, .bom-t td:last-child { padding-right: 0; }
.bom-t .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bom-t tbody td:nth-child(2) { font-family: var(--f-mono); font-size: 0.8125rem; color: var(--ink-2); }
.bom-t a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 0.2em; }
.bom-t a:hover { color: var(--accent); text-decoration-color: currentColor; }
.bom-t__printed td { color: var(--ink-2); }
.bom-t__printed td:first-child::after { content: "Imprimée"; margin-left: 0.625rem; padding: 0.0625rem 0.375rem; border: 1px solid var(--line); font-family: var(--f-mono); font-size: 0.6875rem; }
.bom-t tfoot td { border-bottom: 0; padding-top: 0.875rem; font-weight: 600; }

.bom-total { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 4rem; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.bom-total > div { display: flex; flex-direction: column; gap: 0.375rem; padding: 1.5rem 1.5rem 1.5rem 0; }
.bom-total > div + div { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.bom-total strong { font-family: var(--f-display); font-weight: 600; font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: 1; }
.bom-total span { font-size: 0.875rem; color: var(--ink-2); }

.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.pager__link {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.75rem 2rem;
  border: 1.5px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  transition: background-color .2s, color .2s;
}
.pager__link:hover { background: var(--ink); color: var(--white); }
.pager__link--next { text-align: right; align-items: flex-end; }
.pager__dir { font-family: var(--f-mono); font-size: 0.8125rem; color: var(--accent); }
.pager__link:hover .pager__dir { color: var(--night-text); }
.pager__title { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.375rem, 2.2vw, 1.8125rem); line-height: 1.15; }

/* ---------- Contact ---------- */
.contact-list { display: flex; flex-direction: column; max-width: 37.5rem; }
.contact-item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.125rem 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
}
.contact-item:last-child { border-bottom: 1px solid var(--line); }
a.contact-item:hover { color: var(--accent); }
.contact-item__icon {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--ink);
  color: var(--accent);
  transition: background-color .2s, color .2s;
}
a.contact-item:hover .contact-item__icon { background: var(--accent); border-color: var(--accent); color: var(--white); }
.contact-item__icon svg { width: 1.375rem; height: 1.375rem; }
.contact-item__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contact-item__label { font-size: 0.875rem; color: var(--ink-2); }
.contact-item__value { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); font-weight: 500; overflow-wrap: anywhere; }

.form { flex-grow: 1; padding: 3rem 2.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.form__title { margin-bottom: 0.25rem; font-family: var(--f-display); font-weight: 600; font-size: 2.125rem; letter-spacing: 0; }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field label { font-size: 0.9375rem; font-weight: 600; }
.field label .opt { font-weight: 400; color: var(--ink-2); }
.field input,
.field textarea {
  width: 100%;
  padding: 0 1rem;
  border: 1.5px solid var(--field);
  border-radius: 0;
  background: var(--white);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
.field input { height: 3.25rem; }
.field textarea { min-height: 9.375rem; padding: 0.875rem 1rem; line-height: 1.5; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: #8A94A3; }
.field input:hover,
.field textarea:hover { border-color: var(--ink); }
.field input:focus,
.field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 0.1875rem rgba(36, 83, 212, .18); }
.field.has-error input,
.field.has-error textarea { border-color: #B42318; }
.field__error { display: none; font-size: 0.875rem; color: #B42318; }
.field.has-error .field__error { display: block; }
.hp { position: absolute; left: -624.9375rem; width: 1px; height: 1px; overflow: hidden; }
.form .btn { width: 100%; }
.form__status { min-height: 1.5em; font-size: 0.9375rem; line-height: 1.5; }
.form__status.is-ok { color: #1B6B3A; }
.form__status.is-error { color: #B42318; }

/* ---------- Visionneuse d'images ---------- */
.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(10, 20, 35, .96);
  color: var(--white);
}
.lightbox::backdrop { background: rgba(10, 20, 35, .7); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox__fig {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  max-width: min(87.5rem, 92vw);
}
.lightbox__fig img { max-width: 100%; max-height: 80vh; object-fit: contain; border: 1px solid var(--night-line); }
.lightbox__fig figcaption { font-size: 0.9375rem; color: var(--night-text); text-align: center; }
.lightbox__fig .fig__num { margin-right: 0.625rem; color: #8FB0FF; }
.lightbox__btn {
  position: absolute;
  width: 3.25rem;
  height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(255, 255, 255, .5);
  background: rgba(21, 37, 61, .6);
  color: var(--white);
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.lightbox__btn:hover { background: var(--accent); border-color: var(--accent); }
.lightbox__btn svg { width: 1.375rem; height: 1.375rem; }
.lightbox__close { top: 1.25rem; right: 1.25rem; }
.lightbox__prev { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox__count { position: absolute; top: 2.125rem; left: 1.5rem; font-family: var(--f-mono); font-size: 0.8125rem; color: var(--night-text); }
.lightbox.is-single .lightbox__prev,
.lightbox.is-single .lightbox__next,
.lightbox.is-single .lightbox__count { display: none; }

/* ---------- Animations ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(1.125rem);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

.js .sheet .axis--v { animation: draw-y 1.1s .35s var(--ease) both; }
.js .sheet .axis--h { animation: draw-x 1.1s .5s var(--ease) both; }
.js .sheet .dim__line,
.js .figure-wide .dim__line { animation: draw-x 1s .6s var(--ease) both; }

@keyframes draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .motive { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
  .motive { row-gap: 2.5rem; }
  .note { grid-column: 2; max-width: 31.5rem; }
  .note::before, .note::after { display: none; }
  .traits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .traits > .h2 { grid-column: 1 / -1; }
  .project { gap: 3rem; }
}

@media (max-width: 1080px) {
  .sheet__body { grid-template-columns: minmax(0, 1fr); }
  .sheet__side { border-left: 0; border-top: 1px solid var(--line); }
  .split { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .side-note { max-width: 35rem; }
  .project,
  .project--reverse { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .project--reverse .project__media { order: 0; }
  .note { grid-column: auto; }
  .cta { flex-direction: column; align-items: flex-start; min-height: 0; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

@media (max-width: 860px) {
  :root { --header-h: 4.5rem; }

  .js .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    height: 2.75rem;
    padding: 0 0.875rem;
    border: 1.5px solid var(--ink);
    background: transparent;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
  }
  .nav-toggle__bars { position: relative; width: 1.125rem; height: 0.75rem; }
  .nav-toggle__bars::before,
  .nav-toggle__bars::after,
  .nav-toggle__bars span {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transition: transform .25s var(--ease), opacity .2s;
  }
  .nav-toggle__bars::before { top: 0; }
  .nav-toggle__bars span { top: 0.3125rem; }
  .nav-toggle__bars::after { bottom: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(0.3125rem) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-0.3125rem) rotate(-45deg); }

  .js .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--pad) 1.5rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1.125rem 1.875rem -1.5rem rgba(21, 37, 61, .6);
  }
  .js .nav.is-open { display: flex; }
  .js .nav__link { padding: 1rem 0; font-size: 1.1875rem; border-bottom: 1px solid var(--line); }
  .js .nav__link[aria-current="page"] { border-bottom-color: var(--line); color: var(--accent); }
  .js .nav__cv { margin: 1.25rem 0 0; height: 3.25rem; }

  .tl-cols { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .project-table { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .ptable__item { grid-row: auto; display: flex; flex-direction: column; padding-bottom: 2rem; }
  .ptable__item + .ptable__item { border-top: 1px solid var(--line); }
  .ptable__item + .ptable__item::before { display: none; }
  .ptable__more { align-self: flex-start; }
  .bom__head { display: none; }
  .bom__row { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; padding: 1.25rem 0; }
  .bom__row:first-of-type { border-top: 2px solid var(--ink); }
  .bom__level { flex-direction: row-reverse; align-items: center; justify-content: flex-end; gap: 0.875rem; margin-top: 0.25rem; }
  .bom__level .meter { width: 10rem; flex-shrink: 0; }
  .gallery { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .cdc__head { display: none; }
  .cdc__row { grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0.375rem 0.875rem; }
  .cdc__row:first-of-type { border-top: 2px solid var(--ink); }
  .cdc__crit { grid-column: 2; }
  .cdc--compare .cdc__row { grid-template-columns: minmax(0, 1fr); }
  .cdc--compare .cdc__crit { grid-column: 1; }
  .cdc--compare .cdc__crit::before { font-family: var(--f-mono); font-size: 0.75rem; color: var(--accent); }
  .cdc--compare .cdc__crit:nth-child(2)::before { content: "Atouts · "; }
  .cdc--compare .cdc__crit:nth-child(3)::before { content: "Limites · "; }
  .figs-2 { grid-template-columns: minmax(0, 1fr); }
  .bars__row { grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 1rem; }
  .bars__track { grid-column: 1 / -1; grid-row: 2; height: 0.75rem; }
  .bars__row[data-tip]:hover::after { white-space: normal; left: 0; }
  .insights { grid-template-columns: minmax(0, 1fr); }
  .bom-total { grid-template-columns: minmax(0, 1fr); }
  .bom-total > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .figure-wide .visual { --ratio: 4 / 3; }
}

@media (max-width: 720px) {
  :root { --rule: 1rem; }
  body { font-size: 1rem; }
  .kicker { gap: 0.5rem; font-size: 0.6875rem; letter-spacing: .1em; }
  .hero__intro--home .hero__lead { font-size: 1.0625rem; }
  .kicker::before { width: 1rem; }
  .ruler { font-size: 0.625rem; }

  .traits { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .project__thumbs { gap: 0.625rem; }
  .portrait { padding: 2.25rem 1.75rem 1.75rem; }
  .contents, .facts { padding: 2rem 1.25rem 1.75rem; }
  .form { padding: 2.25rem 1.25rem; }
  .gamme__step { grid-template-columns: minmax(0, 1fr); gap: 0.625rem; padding: 1.5rem 0; }
  .gamme__num { flex-direction: row; align-items: baseline; gap: 0.625rem; }
  .gamme__num span:last-child { font-size: 1.75rem; }
  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager__link { padding: 1.375rem 1.25rem; }
  .ctree__fp { grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0.375rem 0.875rem; }
  .ctree__fp .ctree__crit { grid-column: 2; }
  .ctree__tree { --stub-y: 1.8rem; grid-template-columns: minmax(0, 1fr); }
  .ctree__root { justify-self: start; }
  .ctree__root::after { left: calc(1rem - 1.5px); top: 100%; width: 0; height: calc(1.25rem + 1.5px); border-top: 0; border-left: 1px solid var(--ink); }
  .ctree__branches { margin-top: 1.25rem; padding-left: 2.25rem; }
  .ctree__branch { grid-template-columns: minmax(0, 1fr); row-gap: 0.5rem; padding: 0.5rem 0 0.75rem; }
  .ctree__branch:first-child::after { top: 0; }
  .ctree__need::after, .ctree__sol::before { display: none; }
  .ctree__sol { padding-left: 0.875rem; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plans__main { grid-row: auto; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat, .stat + .stat { padding: 1.25rem 0; border-left: 0; }
  .stat + .stat { border-top: 1px solid var(--line); }
  .specs > div,
  .facts .specs > div { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .btn-row .btn { flex: 1 1 auto; }
  .cartouche__cell { padding: 0.5rem 0.75rem; }
  .cartouche__value--name { font-size: 1.3125rem; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 1.25rem; transform: none; }
  .lightbox__prev { left: calc(50% - 3.75rem); }
  .lightbox__next { right: calc(50% - 3.75rem); }

  /* Nomenclature en lignes compactes : nom et dimensions à gauche, quantité et total à droite */
  .bom-block__head { flex-direction: column; gap: 0.25rem; }
  .bom-t { min-width: 0; }
  .bom-t thead { display: none; }
  .bom-t tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.25rem 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
  .bom-t tbody td { padding: 0; border: 0; }
  .bom-t tbody td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .bom-t tbody td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .bom-t tbody td:nth-child(3) { grid-column: 2; grid-row: 1; color: var(--ink-2); }
  .bom-t tbody td:nth-child(3)::before { content: "× "; }
  .bom-t tbody td:nth-child(4) { display: none; }
  .bom-t tbody td:nth-child(5) { grid-column: 3; grid-row: 1; font-weight: 600; }
  .bom-t tbody td:nth-child(6) { grid-column: 2 / 4; grid-row: 2; text-align: right; font-size: 0.8125rem; }
  .bom-t tfoot tr { display: flex; justify-content: space-between; }
  .bom-t tfoot td:last-child { display: none; }
}

@media (max-width: 420px) {
  .cartouche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cartouche__cell--full,
  .cartouche__cell--half { grid-column: span 2; }
  .contents__head, .contents__row { grid-template-columns: 2.5rem minmax(0, 1fr) 4.5rem; }
}

/* ---------- Impression ---------- */
@media print {
  .site-header, .nav-toggle, .cta, .form, .pager { display: none !important; }
  body { background: #fff; }
  .section--white { border: 0; }
  .js [data-reveal] { opacity: 1; transform: none; }
}