/* ═══════════════════════════════════════════════════════════════
   EL8, feuille de style unique
   Principe : le contenu est lisible immédiatement, sans JavaScript.
   Le rouge est un signal, jamais une décoration.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────── */
:root {
  --bg:      #080808;
  --bg-soft: #0e0e0e;
  --fg:      #e8e8e8;
  --fg-2:    rgba(232,232,232,.62);   /* corps de texte */
  --fg-3:    rgba(232,232,232,.38);   /* secondaire */
  --mid:     #9a9a9a;
  --dim:     #222;
  --faint:   #7a7a7a;   /* repères de la colonne technique */
  --line:    rgba(255,255,255,.08);
  --grid-c:  rgba(255,255,255,.035);
  --barre:   rgba(8,8,8,.92);          /* nav et barres collantes */
  --survol:  rgba(255,255,255,.02);    /* survol discret d'une ligne */
  --grille:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='92'%3E%3Cg stroke='rgba(255,255,255,0.075)' stroke-width='1' stroke-dasharray='2 10'%3E%3Cline x1='0' y1='0.5' x2='92' y2='0.5'/%3E%3Cline x1='0.5' y1='0' x2='0.5' y2='92'/%3E%3C/g%3E%3C/svg%3E");
  --red:     #c0392b;            /* filets, bordures, aplats */
  --red-txt: #e05141;            /* texte rouge : 5,2:1 sur le fond */
  --red-dim: rgba(192,57,43,.55);

  --mono: 'Share Tech Mono', ui-monospace, monospace;
  --cond: 'Barlow Condensed', system-ui, sans-serif;
  --body: 'Barlow', system-ui, sans-serif;

  --nav-h: 54px;
  --wrap:  1120px;
  --rail:  7rem;       /* colonne de repères, façon fiche technique */
  --gut:   clamp(1.25rem, 4vw, 3rem);

  --t: .18s ease;
}

/* ── Thème clair ─────────────────────────────────────────────────
   Le site suit la même règle que les outils : le système décide, la
   bascule de la nav tranche. Les valeurs sont posées une fois, les deux
   blocs qui suivent ne font que les affecter. Le rouge de la charte ne
   bouge pas ; sa version texte s'assombrit, sans quoi elle ne passerait
   plus le contraste sur du clair. */
:root {
  --c-bg:      #f2f2f0;
  --c-bg-soft: #ffffff;
  --c-fg:      #141414;
  --c-fg-2:    rgba(20,20,20,.74);
  --c-fg-3:    rgba(20,20,20,.5);
  --c-mid:     #575757;
  --c-dim:     #cfcfcd;
  --c-faint:   #6e6e6e;
  --c-line:    rgba(0,0,0,.12);
  --c-grid:    rgba(0,0,0,.05);
  --c-red-txt: #a32b1e;
  --c-red-dim: rgba(192,57,43,.45);
  --c-barre:   rgba(242,242,240,.92);
  --c-survol:  rgba(0,0,0,.025);
  --c-grille:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='92'%3E%3Cg stroke='rgba(0,0,0,0.10)' stroke-width='1' stroke-dasharray='2 10'%3E%3Cline x1='0' y1='0.5' x2='92' y2='0.5'/%3E%3Cline x1='0.5' y1='0' x2='0.5' y2='92'/%3E%3C/g%3E%3C/svg%3E");
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="sombre"]) {
    --bg: var(--c-bg); --bg-soft: var(--c-bg-soft);
    --fg: var(--c-fg); --fg-2: var(--c-fg-2); --fg-3: var(--c-fg-3);
    --mid: var(--c-mid); --dim: var(--c-dim); --faint: var(--c-faint);
    --line: var(--c-line); --grid-c: var(--c-grid);
    --red-txt: var(--c-red-txt); --red-dim: var(--c-red-dim);
    --barre: var(--c-barre); --survol: var(--c-survol); --grille: var(--c-grille);
  }
}

:root[data-theme="clair"] {
  --bg: var(--c-bg); --bg-soft: var(--c-bg-soft);
  --fg: var(--c-fg); --fg-2: var(--c-fg-2); --fg-3: var(--c-fg-3);
  --mid: var(--c-mid); --dim: var(--c-dim); --faint: var(--c-faint);
  --line: var(--c-line); --grid-c: var(--c-grid);
  --red-txt: var(--c-red-txt); --red-dim: var(--c-red-dim);
  --barre: var(--c-barre); --survol: var(--c-survol); --grille: var(--c-grille);
}

/* Le logo d'accueil est un PNG blanc sur transparent : en clair il
   disparaîtrait dans la page. L'inverser le rend noir, exactement,
   c'est un aplat monochrome, il n'y a rien d'autre à préserver. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="sombre"]) .open__logo { filter: invert(1); }
}
:root[data-theme="clair"] .open__logo { filter: invert(1); }

/* La bascule, posée par theme.js dans la nav. */
.theme {
  background: none; border: 1px solid var(--dim); border-radius: 3px;
  color: var(--mid); cursor: pointer;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; padding: .3rem .55rem;
  min-height: 32px; line-height: 1; margin-left: 1rem;
  transition: color var(--t), border-color var(--t);
}
.theme:hover { color: var(--fg); border-color: var(--mid); }
@media print { .theme { display: none !important; } }


/* ── 2. Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  background: var(--bg);
  color: var(--fg-2);
  font-family: var(--body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grille technique en pointillés, motif commun aux deux sites (DA §6).
   Tuile SVG : traits pointillés 2/10, comme le tracé du canvas d'origine.
   Statique, en fond, atténuée vers le bas de l'écran. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--grille);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.45) 55%, transparent 92%);
}

/* Grain fixe, une texture, pas une animation. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 999; pointer-events: none;
  opacity: .022;
  background-size: 170px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main, .nav, .foot { position: relative; z-index: 1; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
/* Fond d'attente réservé aux photos ; jamais au logo, qui est transparent. */
.pole__media img, .projet__shots img, .shots img, .situ img { background: var(--bg-soft); }

a { color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.signal {
  position: fixed; top: 0; left: 0; right: 0; height: 1px; z-index: 200;
  background: linear-gradient(90deg, transparent, var(--red-dim) 22%, var(--red) 50%, var(--red-dim) 78%, transparent);
  opacity: .5; pointer-events: none;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--red); color: #fff; padding: .6rem 1rem;
  font-family: var(--mono); font-size: .7rem;
}
.skip:focus { left: 0; }

/* ── 3. Typographie ────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--cond); font-weight: 400; line-height: 1.15; color: var(--fg); }

.h-page {
  font-size: clamp(1.9rem, 5.5vw, 3.1rem);
  letter-spacing: .01em; text-transform: uppercase;
  font-weight: 300;
}
.h-sec {
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  letter-spacing: .02em; text-transform: uppercase;
  font-weight: 400;
}
/* Cadre d'angle sur les photos, repère de cadrage, pas une bordure. */
.framed { position: relative; }
.framed::before, .framed::after {
  content: ''; position: absolute; width: 13px; height: 13px; pointer-events: none; z-index: 2;
  border-color: var(--red-txt); opacity: .55;
}
.framed::before { top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid; }
.framed::after  { bottom: -1px; right: -1px; border-bottom: 1px solid; border-right: 1px solid; }
.h-item {
  font-family: var(--cond); font-weight: 500;
  font-size: clamp(1rem, 2vw, 1.15rem);
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--fg);
}

.label {
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--mid);
}
.label--red { color: var(--red-txt); }

.lede {
  font-size: clamp(1rem, 2.1vw, 1.18rem);
  line-height: 1.75; color: var(--fg-2);
  max-width: 62ch;
}
.prose { max-width: 68ch; }
.prose p + p { margin-top: 1em; }

/* ── 4. Navigation ─────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 1rem;
  padding: 0 var(--gut);
  background: var(--barre);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav__mark {
  font-family: var(--mono); font-size: .8rem;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--fg); text-decoration: none;
  margin-right: auto; transition: color var(--t);
}
.nav__mark:hover { color: var(--red-txt); }

.nav__links { display: flex; align-items: center; gap: .25rem; }
.nav__links a {
  font-family: var(--cond); font-weight: 300;
  font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-3); text-decoration: none;
  padding: .45rem .7rem; white-space: nowrap;
  position: relative; transition: color var(--t);
}
.nav__links a:hover { color: var(--fg); }
.nav__links a[aria-current="page"] { color: var(--fg); }
.nav__links a[aria-current="page"]::after {
  content: ''; position: absolute; left: .7rem; right: .7rem; bottom: .1rem;
  height: 1px; background: var(--red);
}

/* Menu mobile, sans JavaScript : une case à cocher masquée. */
.nav__checkbox, .nav__burger { display: none; }

@media (max-width: 800px) {
  .nav__burger {
    display: block; width: 26px; height: 20px;
    position: relative; cursor: pointer; flex-shrink: 0;
  }
  .nav__burger span,
  .nav__burger::before,
  .nav__burger::after {
    content: ''; position: absolute; left: 0; right: 0; height: 1px;
    background: var(--fg); transition: transform var(--t), opacity var(--t);
  }
  .nav__burger::before { top: 3px; }
  .nav__burger span    { top: 9.5px; }
  .nav__burger::after  { top: 16px; }

  .nav__checkbox:checked ~ .nav__burger::before { transform: translateY(6.5px) rotate(45deg); }
  .nav__checkbox:checked ~ .nav__burger span    { opacity: 0; }
  .nav__checkbox:checked ~ .nav__burger::after  { transform: translateY(-6.5px) rotate(-45deg); }

  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: .5rem 0;
    display: none;
  }
  .nav__checkbox:checked ~ .nav__links { display: flex; }
  .nav__links a { padding: .85rem var(--gut); font-size: 1rem; }
  .nav__links a[aria-current="page"]::after { left: var(--gut); right: auto; width: 18px; bottom: .55rem; }
}

/* ── 5. Trames de page ─────────────────────────────────────── */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

.page-head { padding-block: clamp(3rem, 8vw, 5.5rem) clamp(1.5rem, 4vw, 2.5rem); }
.page-head .label { display: block; margin-bottom: 1rem; }
.page-head .lede  { margin-top: 1.75rem; }

/* Bloc à colonne de repères, la signature « fiche technique » du site. */
.block { position: relative; padding-block: clamp(2.5rem, 6vw, 4.5rem); border-top: 1px solid var(--line); }
/* amorce rouge sur le filet de séparation */
.block::before {
  content: ''; position: absolute; top: -1px; left: 0;
  width: 54px; height: 1px; background: var(--red); opacity: .75;
}
.block__grid { display: grid; grid-template-columns: var(--rail) 1fr; gap: clamp(1.25rem, 3vw, 2.5rem); }

.block__rail {
  position: sticky; top: calc(var(--nav-h) + 1.5rem); align-self: start;
  border-left: 1px solid var(--line); padding-left: .95rem;
}
.block__num {
  position: relative; display: block; margin-bottom: .75rem;
  font-family: var(--mono); font-size: 1.45rem; line-height: 1;
  letter-spacing: .04em; color: var(--red-txt);
}
/* tick qui mord sur le filet, comme une graduation */
.block__num::before {
  content: ''; position: absolute; left: -.95rem; top: .5em;
  width: 9px; height: 1px; background: var(--red);
}
.block__tags { display: flex; flex-direction: column; gap: .18rem; }
.block__tags span {
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--faint);
}
.block__body > * + * { margin-top: 1.5rem; }

@media (max-width: 700px) {
  .block__grid { grid-template-columns: 1fr; gap: 1rem; }
  .block__rail {
    position: static; display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap;
    border-left: 0; border-top: 1px solid var(--line); padding: .7rem 0 0;
  }
  .block__num { margin-bottom: 0; font-size: 1.1rem; }
  .block__num::before { left: 0; top: -.7rem; width: 16px; }
  .block__tags { flex-direction: row; flex-wrap: wrap; gap: .18rem .7rem; }
}

.rule { height: 1px; border: 0; background: var(--line); margin-block: clamp(2rem, 5vw, 3rem); }
.rule--red { background: linear-gradient(90deg, var(--red-dim), var(--line) 12%, transparent 55%); }

/* ── 6. Liens et boutons ───────────────────────────────────── */
.link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--cond); font-size: .92rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg); text-decoration: none;
  padding-bottom: .2rem; border-bottom: 1px solid var(--dim);
  transition: color var(--t), border-color var(--t);
}
.link:hover { color: var(--red-txt); border-color: var(--red-txt); }
.link::after { content: '→'; font-family: var(--mono); font-size: .85em; transition: transform var(--t); }
.link:hover::after { transform: translateX(3px); }

.tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.tags span {
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mid); border: 1px solid var(--dim);
  padding: .2rem .55rem;
}

/* ── 7. Accueil ────────────────────────────────────────────── */

/* Écran d'ouverture : pleine hauteur, waveform en fond.
   Le contenu est dans le DOM et visible sans JavaScript : le canvas
   n'est qu'un décor, il ne conditionne rien. */
.open {
  position: relative;
  min-height: calc(100svh - var(--nav-h));
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(2rem, 6vw, 4rem) clamp(4rem, 9vw, 6rem);
  overflow: hidden;
}
.open__cvs {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; pointer-events: none;
}
/* width:100% obligatoire : dans un conteneur flex, les marges horizontales
   auto de .wrap annulent l'étirement et l'élément se réduit à son contenu. */
.open__in { position: relative; z-index: 1; width: 100%; text-align: center; }
.open__logo {
  width: clamp(140px, 27vw, 250px);
  margin: 0 auto clamp(1.5rem, 3.5vw, 2.2rem);
}

.open__baseline {
  font-family: var(--cond); font-weight: 300;
  font-size: clamp(1.35rem, 4.2vw, 2.4rem);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg); margin-bottom: .7rem;
}
/* Les trois disciplines, en signal rouge, encadrées de deux filets. */
.open__disc {
  font-family: var(--mono); font-size: clamp(.62rem, 1.4vw, .78rem);
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--red-txt); margin-bottom: clamp(1.5rem, 3.5vw, 2.2rem);
}
.open__disc::before, .open__disc::after {
  content: ''; display: inline-block; vertical-align: middle;
  width: clamp(18px, 4.5vw, 44px); height: 1px;
  background: var(--red-dim); margin: 0 .9rem;
}

.open__intro { max-width: 56ch; margin-inline: auto; color: var(--fg-2); }

/* Entrées principales, la rangée de boutons de la page d'origine. */
.open__entries {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .5rem; margin-top: clamp(1.75rem, 4vw, 2.4rem);
}
.open__mail {
  display: inline-block; margin-top: clamp(1.5rem, 3vw, 2rem);
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: .16em;
  color: var(--mid); text-decoration: none; transition: color var(--t);
}
.open__mail:hover { color: var(--red-txt); }
.entry {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--cond); font-weight: 300;
  font-size: clamp(.78rem, 1.6vw, .9rem);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-3); text-decoration: none;
  border: 1px solid var(--dim); padding: .5rem 1.05rem;
  transition: color var(--t), border-color var(--t), background var(--t);
}
.entry::before {
  content: attr(data-n); font-family: var(--mono);
  font-size: 0.72rem; color: var(--faint); transition: color var(--t);
}
.entry:hover { color: var(--fg); border-color: var(--red-dim); background: rgba(192,57,43,.05); }
.entry:hover::before { color: var(--red-txt); }

/* Pied de l'écran d'ouverture : lieu à gauche, invite à défiler à droite. */
.open__foot {
  position: absolute; left: 0; right: 0; bottom: clamp(1.5rem, 4vw, 2.5rem); z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--mid);
}
.open__loc { display: flex; align-items: center; gap: .7rem; }
.open__loc::before { content: ''; width: 22px; height: 1px; background: var(--red); flex-shrink: 0; }
.open__scroll { display: flex; align-items: center; gap: .5rem; color: var(--faint); text-decoration: none; }
.open__scroll:hover { color: var(--fg-3); }
.open__scroll span { display: block; width: 1px; height: 22px; background: linear-gradient(180deg, var(--red), transparent); }

@media (max-width: 600px) {
  .open__foot { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .open__scroll { display: none; }
}

/* Pôle : photo + texte, alternés */
.pole__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.pole:nth-of-type(even) .pole__media { order: 2; }
.pole__media { overflow: hidden; background: var(--bg-soft); }
.pole__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .5s ease; }
.pole:hover .pole__media img { transform: scale(1.02); }
.pole__title { margin-block: .35rem .9rem; }
.pole__resume { margin-bottom: 1.25rem; max-width: 46ch; }
.pole__link { margin-top: .5rem; }

@media (max-width: 760px) {
  .pole__grid { grid-template-columns: 1fr; }
  .pole:nth-of-type(even) .pole__media { order: 0; }
}

/* Bandeau références sur l'accueil */
.refs-strip { display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.refs-strip span {
  font-family: var(--cond); font-size: 1rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3);
}

/* ── 8. Matériel ───────────────────────────────────────────── */
.filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 2rem; }
.filters button {
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--mid); background: none; border: 1px solid var(--dim);
  padding: .38rem .8rem; cursor: pointer;
  transition: color var(--t), border-color var(--t);
}
.filters button:hover { color: var(--fg); border-color: var(--mid); }
.filters button[aria-pressed="true"] { color: var(--red-txt); border-color: var(--red-dim); }

.cat-resume { max-width: 62ch; color: var(--fg-2); }

.familles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.famille { border-top: 1px solid var(--red-dim); padding-top: .85rem; }
.famille__note { font-size: .92rem; margin-top: .5rem; max-width: 46ch; }

/* Les références : une liste, pas un tableau, on lit des noms, pas des stocks. */
.famille__ex { list-style: none; padding: 0; margin-top: .85rem; }
.famille__ex li {
  font-family: var(--mono); font-size: .7rem;
  letter-spacing: .04em; color: var(--fg-2);
  padding: .26rem 0 .26rem .95rem; position: relative;
}
.famille__ex li::before {
  content: ''; position: absolute; left: 0; top: .78em;
  width: 5px; height: 1px; background: var(--red-dim);
}
.famille__lien { margin-top: 1rem; font-size: .82rem; }

.matos-fin { max-width: none; }
.matos-fin .prose { max-width: 64ch; }
.notes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem); margin-top: 2rem;
}
.note { border-top: 1px solid var(--red-dim); padding-top: .8rem; }
.note .label { display: block; margin-bottom: .45rem; }
.note p { font-size: .92rem; }
.note .link { font-size: .78rem; margin-top: .5rem; }
.matos-fin strong { color: var(--fg); font-weight: 400; }

/* ── 9. Conception ─────────────────────────────────────────── */
.projets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }
.projet { border: 1px solid var(--line); display: flex; flex-direction: column; transition: border-color var(--t); }
.projet:hover { border-color: var(--dim); }
.projet__shots { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.projet__shots img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.projet--wide .projet__shots { grid-template-columns: 1fr; }
.projet--wide .projet__shots img { aspect-ratio: 16/9; }
.projet__void {
  aspect-ratio: 2 / 1; display: grid; place-content: center; gap: .5rem;
  background: var(--bg-soft); border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--faint); text-align: center;
}
.projet__void::before { content: ''; width: 26px; height: 1px; background: var(--dim); justify-self: center; }
.projet__body { padding: 1.25rem; display: flex; flex-direction: column; gap: .85rem; flex: 1; }
.projet__desc { font-size: .92rem; }

.systemes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }
.systeme { border-top: 1px solid var(--red-dim); padding-top: .9rem; }
.systeme__desc { font-size: .92rem; margin-block: .6rem .9rem; }
.systeme__tech { font-family: var(--mono); font-size: 0.72rem; letter-spacing: .1em; color: var(--mid); }

/* ── 10. Studio ────────────────────────────────────────────── */
.shots { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1px; background: var(--line); }
/* Safari ne résout pas height: 100 % d'une image dans une case de grille
   sans hauteur fixée : les vignettes reprenaient leur hauteur naturelle et
   débordaient sur le bloc suivant. La grande image remplit sa case en
   position absolue, les vignettes tiennent par leur seul aspect-ratio. */
.shots img { width: 100%; object-fit: cover; }
.shots__main { aspect-ratio: 4/3; }
.shots__main img { position: absolute; inset: 0; height: 100%; }
.shots__rest { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; align-content: start; }
.shots__rest img { height: auto; aspect-ratio: 5/6; display: block; }
/* 5/6 : la grande image fait 1,6 colonne en 4/3, soit 1,2 de haut ; deux
   vignettes d'une demi-colonne remplissent cette hauteur. */
@media (max-width: 700px) {
  .shots { grid-template-columns: 1fr; }
  .shots__main { aspect-ratio: 3/2; }
  .shots__rest img { aspect-ratio: 1; }
}

.equip { columns: 210px 4; column-gap: clamp(1.25rem, 3vw, 2rem); }
.equip__grp { break-inside: avoid; margin-bottom: 1.75rem; }
.equip__grp .label { display: block; margin-bottom: .7rem; padding-bottom: .4rem; border-bottom: 1px solid var(--line); }
.equip__grp ul { list-style: none; padding: 0; }
.equip__grp li { font-size: .9rem; padding: .22rem 0; color: var(--fg-2); }

.kit__nom {
  font-family: var(--cond); font-weight: 400;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  letter-spacing: .05em; text-transform: uppercase; color: var(--fg);
}
.kit__note { font-size: .92rem; margin-top: .35rem; }

.livrables { display: flex; flex-direction: column; }
.livrable { display: grid; grid-template-columns: 1fr; gap: .35rem; padding-block: 1.1rem; border-bottom: 1px solid var(--line); }
.livrable:first-child { padding-top: 0; }
.livrable__desc { font-size: .92rem; max-width: 60ch; }
.livrable__out {
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--red-txt);
  display: flex; align-items: center; gap: .5rem; margin-top: .2rem;
}
.livrable__out::before { content: ''; width: 12px; height: 1px; background: var(--red); flex-shrink: 0; }

.situ { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 1px; background: var(--line); }
.situ img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }

/* ── 11. Références ────────────────────────────────────────── */
.refs { display: flex; flex-direction: column; }
.ref {
  display: grid; grid-template-columns: 1fr auto; gap: .3rem 1.5rem;
  padding-block: 1rem; border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.ref:first-child { padding-top: 0; }
.ref__name { font-family: var(--cond); font-size: 1.12rem; letter-spacing: .05em; text-transform: uppercase; color: var(--fg); }
.ref__place { font-family: var(--mono); font-size: 0.72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mid); text-align: right; }
.ref__note { grid-column: 1 / -1; font-size: .9rem; color: var(--fg-3); }

/* ── 12. Contact ───────────────────────────────────────────── */
.contact { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 760px) { .contact { grid-template-columns: 1fr; } }

.cblock + .cblock { margin-top: 1.75rem; }
.cblock .label { display: block; margin-bottom: .5rem; }
.cblock__val { color: var(--fg-2); }
.mail-lg {
  font-family: var(--cond); font-weight: 400;
  font-size: clamp(1.4rem, 4vw, 2rem); letter-spacing: .04em;
  color: var(--fg); text-decoration: none;
  border-bottom: 1px solid var(--dim); transition: color var(--t), border-color var(--t);
}
.mail-lg:hover { color: var(--red-txt); border-color: var(--red-txt); }

.mentions { border: 1px solid var(--line); padding: clamp(1.25rem, 3vw, 1.75rem); }
.mentions dl { margin: 0; font-size: .88rem; }
.mentions dt { font-family: var(--mono); font-size: 0.72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--mid); margin-top: .9rem; }
.mentions dt:first-child { margin-top: 0; }
.mentions dd { margin: .15rem 0 0; color: var(--fg-2); }
.mentions p { font-size: .84rem; color: var(--fg-3); margin-top: 1.25rem; }

/* ── 13. Pied de page ──────────────────────────────────────── */
.foot { border-top: 1px solid var(--line); margin-top: clamp(3rem, 8vw, 6rem); padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem; }
.foot__grid {
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut);
  display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 2rem;
}
.foot__name { font-family: var(--mono); font-size: .8rem; letter-spacing: .15em; color: var(--fg); margin-bottom: .8rem; }
.foot__meta { font-size: .88rem; color: var(--fg-3); margin-bottom: .9rem; }
.foot__mail { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; color: var(--red-txt); text-decoration: none; }
.foot__mail:hover { text-decoration: underline; }
.foot__nav { display: flex; flex-direction: column; gap: .3rem; }
.foot__nav a {
  font-family: var(--cond); font-size: .88rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-3); text-decoration: none; transition: color var(--t);
}
.foot__nav a:hover { color: var(--fg); }
.foot__ext .label { display: block; margin-bottom: .5rem; }
.foot__ext a { font-family: var(--cond); font-size: .95rem; letter-spacing: .08em; color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--dim); transition: color var(--t), border-color var(--t); }
.foot__ext a:hover { color: var(--red-txt); border-color: var(--red-txt); }
.foot__note { font-size: .82rem; color: var(--fg-3); margin-top: .7rem; max-width: 34ch; }
.foot__rule { max-width: var(--wrap); margin: clamp(2rem, 5vw, 3rem) auto 1.25rem; height: 1px; background: var(--line); }
.foot__legal {
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1.5rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
}
.foot__legal a { color: var(--mid); text-decoration: none; }
.foot__legal a:hover { color: var(--fg-3); }
@media (max-width: 700px) { .foot__grid { grid-template-columns: 1fr; gap: 2.25rem; } }

/* ── 14. 404 ───────────────────────────────────────────────── */
.err { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; padding-block: 4rem; }
.err__code { font-family: var(--mono); font-size: clamp(3rem, 12vw, 6rem); color: var(--red-txt); line-height: 1; margin-bottom: 1rem; }

/* ── 15. Impression ────────────────────────────────────────── */
@media print {
  body { background: #fff; color: #000; }
  body::after, .nav, .foot__nav, .filters, .skip { display: none; }
  a { text-decoration: underline; }
  .block { break-inside: avoid; }
}

/* ── Écoute, discographie plutôt qu'un lecteur intégré :
      aucun script tiers, aucun traceur, et la liste se lit d'un coup d'œil. */
.ecoute { list-style: none; padding: 0; margin-top: 1.4rem; counter-reset: piste; }
.ecoute li { counter-increment: piste; border-bottom: 1px solid var(--line); }
.ecoute a {
  display: grid; grid-template-columns: 2.2rem minmax(0, 13rem) 1fr auto;
  align-items: baseline; gap: .4rem 1rem;
  padding: .6rem .2rem; text-decoration: none;
  transition: background var(--t);
}
.ecoute a::before {
  content: counter(piste, decimal-leading-zero);
  font-family: var(--mono); font-size: 0.72rem; color: var(--faint);
}
.ecoute a:hover { background: var(--survol); }
.ecoute__a {
  font-family: var(--cond); font-size: 1rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fg);
}
.ecoute__t { font-size: .92rem; color: var(--fg-2); }
.ecoute__go { font-family: var(--mono); font-size: .7rem; color: var(--faint); transition: color var(--t); }
.ecoute a:hover .ecoute__go { color: var(--red-txt); }
.ecoute a:hover .ecoute__a { color: var(--red-txt); }

@media (max-width: 640px) {
  .ecoute a { grid-template-columns: 2rem 1fr auto; }
  .ecoute__t { grid-column: 2 / -1; }
}

/* ---- Barre de recherche des listings (catalogue, inventaire) ---- */
.parc-bar {
  position: sticky; top: var(--nav-h); z-index: 40;
  background: var(--barre); backdrop-filter: blur(8px);
  padding: .9rem 0 1rem; margin-bottom: .5rem;
  border-bottom: 1px solid var(--line);
}
.parc-search {
  width: 100%; min-height: 46px; margin-bottom: .7rem;
  background: var(--bg-soft); color: var(--fg);
  border: 1px solid var(--dim); border-radius: 3px;
  padding: .5rem .8rem; font-family: var(--mono); font-size: .95rem;
}
.parc-search:focus { border-color: var(--red-dim); outline: none; }
.parc-filtres { display: flex; flex-wrap: wrap; gap: .35rem; }
.pf {
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--mid); background: none; border: 1px solid var(--dim);
  padding: .34rem .7rem; border-radius: 2px; cursor: pointer;
  transition: color .18s, border-color .18s;
}
.pf:hover { color: var(--fg); border-color: var(--mid); }
.pf[aria-pressed="true"] { color: var(--red-txt); border-color: var(--red-dim); }
.parc-vide { color: var(--mid); padding: 2rem 0; }