/* Robin El Haïk, portfolio 2026
   Une épreuve d'imprimeur sur la table d'un graphiste qui code.
   Papier, encre, rouge signal ; Neue Haas Grotesk pour la voix du graphiste,
   Input Mono Narrow pour la voix du code. */

:root {
  /* Couleurs par rôle */
  --papier: #F4F4F2;
  --papier-2: #E7E7E4;
  --encre: #111110;
  --gris: #6B6B68;          /* texte secondaire : 4,9:1 sur le papier */
  --gris-clair: #B9B9B5;
  --fantome: #DEDEDA;       /* reflet inversé de l'index (décoratif) */
  --filet: rgb(17 17 16 / .16);
  --rouge: #FF1D0F;         /* grands textes, aplats, repères ; encre dessus : 4,9:1 */
  --rouge-voile: rgb(255 29 15 / .06);
  --rouge-trait: rgb(255 29 15 / .42);

  /* Polices (kit Adobe Fonts mdi7txv) */
  --display: "neue-haas-grotesk-display", "Helvetica Neue", Arial, sans-serif;
  --texte: "neue-haas-grotesk-text", "Helvetica Neue", Arial, sans-serif;
  --mono: "input-mono-narrow", ui-monospace, "SF Mono", Menlo, monospace;

  /* Échelle typographique */
  --fs-mono: .8125rem;
  --fs-legende: .75rem;
  --fs-texte: 1.0625rem;
  --fs-grand: clamp(1.75rem, 1.05rem + 2.55vw, 3.75rem);
  --fs-titre: clamp(3.25rem, 1rem + 9vw, 10rem);
  --fs-index: clamp(2.5rem, .9rem + 4.9vw, 6.4rem);

  /* Espaces */
  --marge: clamp(16px, 2.5vw, 40px);
  --gouttiere: clamp(12px, 1.4vw, 24px);
  --colonnes: 12;
  --section: clamp(96px, 11vw, 184px);
  --h-entete: 52px;

  --sortie: cubic-bezier(.16, 1, .3, 1);

  /* Calques */
  --z-trame: 2;
  --z-entete: 10;
  --z-grille: 12;
  --z-menu: 20;
  --z-rideau: 30;
  --z-veille: 35;
  --z-grain: 40;
}

@media (max-width: 767px) {
  :root { --colonnes: 4; --h-entete: 48px; }
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--h-entete);
  scrollbar-color: var(--encre) var(--papier);
  accent-color: var(--rouge);
  caret-color: var(--rouge);
  background: var(--papier);
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 400 var(--fs-texte)/1.55 var(--texte);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Grain du papier : fixe, ne capte pas la souris */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .07;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

::selection { background: var(--rouge); color: var(--encre); }

:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }

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

h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }

button { font: inherit; color: inherit; }

.icone { width: 1em; height: 1em; flex: none; fill: currentColor; }

.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.evitement {
  position: fixed;
  left: var(--marge);
  top: 8px;
  z-index: calc(var(--z-rideau) + 1);
  padding: 10px 14px;
  background: var(--encre);
  color: var(--papier);
  font: 400 var(--fs-mono)/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .04em;
  transform: translateY(-160%);
}
.evitement:focus { transform: none; }

/* Voix du code : petites capitales en chasse fixe */
.mono {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Ligne justifiée, mot par mot, comme le haut de l'affiche Nova */
.justifie {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1ch;
}

/* Lien en chasse fixe avec flèche */
.lien {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  min-height: 44px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .35em;
}
.lien .icone { width: 1.15em; height: 1.15em; transition: transform .35s var(--sortie); }
.lien:hover .icone { transform: translateX(3px); }
.lien[href^="#"]:hover .icone, .lien--bas:hover .icone { transform: translateY(3px); }

/* Grille de mise en page : 12 colonnes (4 sur téléphone) */
.grille {
  display: grid;
  grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
  column-gap: var(--gouttiere);
}

/* En-tête de section : un filet d'encre et une ligne justifiée */
.section-tete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2ch;
  border-top: 1px solid var(--encre);
  min-height: 44px;
}
.section-tete h2,
.justifie > h2 { font: inherit; }

/* ---------- En-tête ---------- */

.entete {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-entete);
  height: var(--h-entete);
  padding-inline: var(--marge);
  background: var(--papier);
  transition: transform .55s var(--sortie);
}
.entete.est-cache { transform: translateY(-101%); }
.entete__nav {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.entete__nav a,
.entete__nav button {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.entete__nav a:hover,
.entete__nav button:hover { text-decoration: underline; text-underline-offset: .35em; }
.entete__nav [aria-current="page"]::before,
.entete__grille::before {
  content: "";
  width: .62em;
  height: .62em;
  background: var(--rouge);
}
.entete__grille::before {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--encre);
  transition: background-color .2s, box-shadow .2s;
}
.entete__grille[aria-pressed="true"]::before { background: var(--rouge); box-shadow: inset 0 0 0 1px var(--rouge); }
.entete__menu { display: none !important; }

@media (max-width: 767px) {
  .entete__nav > :not(.entete__nom):not(.entete__menu) { display: none !important; }
  .entete__menu { display: inline-flex !important; }
}

/* Menu téléphone : aplat rouge */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  padding: 0 var(--marge) var(--marge);
  background: var(--rouge);
  color: var(--encre);
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .6s var(--sortie), visibility 0s linear .6s;
}
.menu.est-ouvert {
  visibility: visible;
  clip-path: inset(0);
  transition: clip-path .6s var(--sortie);
}
.menu__haut {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--h-entete);
}
.menu__haut a,
.menu__haut button {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  text-decoration: none;
  cursor: pointer;
}
.menu__liens {
  list-style: none;
  padding: 0;
  margin-top: auto;
  border-top: 1px solid var(--encre);
}
.menu__liens li { border-bottom: 1px solid var(--encre); }
.menu__liens a {
  display: block;
  padding: .1em 0 .04em;
  font: 700 clamp(3rem, 17vw, 6rem)/.9 var(--display);
  letter-spacing: -.045em;
  text-transform: none;
  text-decoration: none;
}
.menu__bas { margin-top: 18px; }
.menu__grille {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.menu__grille::before {
  content: "";
  width: .62em;
  height: .62em;
  box-shadow: inset 0 0 0 1px var(--encre);
}
.menu__grille[aria-pressed="true"]::before { background: var(--encre); }

/* ---------- Repères d'imprimerie ---------- */

/* Traits de coupe : quatre angles autour d'une zone, sans la toucher */
.reperes {
  --long: 18px;
  --ecart: 7px;
  position: absolute;
  pointer-events: none;
}
.reperes > i { position: absolute; width: 0; height: 0; }
.reperes > i::before,
.reperes > i::after { content: ""; position: absolute; background: var(--encre); }
.reperes > i::before { width: var(--long); height: 1px; }
.reperes > i::after { width: 1px; height: var(--long); }
.reperes > i:nth-child(1) { left: 0; top: 0; }
.reperes > i:nth-child(1)::before { right: var(--ecart); top: 0; }
.reperes > i:nth-child(1)::after { left: 0; bottom: var(--ecart); }
.reperes > i:nth-child(2) { right: 0; top: 0; }
.reperes > i:nth-child(2)::before { left: var(--ecart); top: 0; }
.reperes > i:nth-child(2)::after { left: -1px; bottom: var(--ecart); }
.reperes > i:nth-child(3) { left: 0; bottom: 0; }
.reperes > i:nth-child(3)::before { right: var(--ecart); top: -1px; }
.reperes > i:nth-child(3)::after { left: 0; top: var(--ecart); }
.reperes > i:nth-child(4) { right: 0; bottom: 0; }
.reperes > i:nth-child(4)::before { left: var(--ecart); top: -1px; }
.reperes > i:nth-child(4)::after { left: -1px; top: var(--ecart); }

/* Croix de repérage au milieu des bords (affiche OBSIDIAN) */
.reperes > b {
  position: absolute;
  left: 50%;
  width: 15px;
  height: 15px;
  margin-left: -7px;
}
.reperes > b::before,
.reperes > b::after { content: ""; position: absolute; background: var(--encre); }
.reperes > b::before { left: 0; right: 0; top: 7px; height: 1px; }
.reperes > b::after { top: 0; bottom: 0; left: 7px; width: 1px; }
.reperes > b:first-of-type { top: calc(-7px - var(--ecart) - 8px); }
.reperes > b:last-of-type { bottom: calc(-7px - var(--ecart) - 8px); }

/* Cadre de sélection à poignées (outil de mise en page) */
.selection {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 1px solid var(--rouge);
  pointer-events: none;
}
.selection > i {
  position: absolute;
  width: 7px;
  height: 7px;
  background: var(--papier);
  border: 1px solid var(--rouge);
}
.selection > i:nth-child(1) { left: -4px; top: -4px; }
.selection > i:nth-child(2) { left: calc(50% - 4px); top: -4px; }
.selection > i:nth-child(3) { right: -4px; top: -4px; }
.selection > i:nth-child(4) { right: -4px; top: calc(50% - 4px); }
.selection > i:nth-child(5) { right: -4px; bottom: -4px; }
.selection > i:nth-child(6) { left: calc(50% - 4px); bottom: -4px; }
.selection > i:nth-child(7) { left: -4px; bottom: -4px; }
.selection > i:nth-child(8) { left: -4px; top: calc(50% - 4px); }
.selection__cote {
  position: absolute;
  left: 50%;
  top: calc(100% + 9px);
  transform: translateX(-50%);
  padding: 3px 5px 2px;
  background: var(--rouge);
  color: var(--encre);
  font: 500 11px/1.1 var(--mono);
  letter-spacing: .02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---------- Accueil : la feuille ---------- */

.accueil {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto auto;
  padding: calc(var(--h-entete) + clamp(28px, 6vh, 72px)) var(--marge) clamp(14px, 2.2vh, 26px);
  overflow: hidden;
}
.accueil > .reperes {
  inset: calc(var(--h-entete) + 18px) calc(var(--marge) * .5) calc(clamp(14px, 2.2vh, 26px) * .6);
}
.accueil__intro {
  position: relative;
  z-index: 4;
  align-self: start;
  display: grid;
  grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
  column-gap: var(--gouttiere);
}
.accueil__phrase {
  grid-column: 1 / span 6;
  max-width: 17em;
  font: 500 var(--fs-grand)/1.06 var(--display);
  letter-spacing: -.022em;
  text-wrap: balance;
}
.accueil__action { grid-column: 1 / span 6; margin-top: clamp(18px, 2.4vw, 32px); }

.accueil__nom {
  position: relative;
  z-index: 1;
  margin: 0 -0.04em 0 -0.055em;
  font: 700 17.9vw/.79 var(--display);
  letter-spacing: -.045em;
  color: var(--rouge);
  white-space: nowrap;
}
.accueil__nom .ligne { display: inline; }
.trame-prete .accueil__nom { color: transparent; }
.trame-prete .accueil__nom::selection,
.trame-prete .accueil__nom .ligne::selection { color: transparent; }

.accueil__marge {
  position: relative;
  z-index: 4;
  margin-top: clamp(10px, 1.8vh, 22px);
  font-size: var(--fs-legende);
  color: var(--gris);
}
.gamme { display: inline-flex; gap: 0; }
.gamme > i { width: 11px; height: 11px; background: var(--c); }
.gamme > i:last-child { box-shadow: inset 0 0 0 1px var(--gris-clair); }

/* Canevas de la trame (la hauteur et la position sont posées par trame.js) */
.accueil__trame {
  position: absolute;
  inset: 0;
  z-index: var(--z-trame);
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.accueil.main-active { cursor: crosshair; }
.trame-prete .accueil__nom { touch-action: pan-y; } /* glisser le doigt sur le nom sans bloquer le défilement */

@media (max-width: 767px) {
  .accueil {
    padding-top: calc(var(--h-entete) + 32px);
  }
  .accueil__phrase { grid-column: 1 / -1; max-width: 13em; }
  .accueil__action { grid-column: 1 / -1; }
  .accueil__nom { font-size: 31vw; line-height: .8; }
  .accueil__nom .ligne { display: block; }
  .accueil__marge > :nth-child(1),
  .accueil__marge > :nth-child(3) { display: none; }
}

/* ---------- Index des projets ---------- */

.index {
  position: relative;
  padding: var(--section) var(--marge) calc(var(--section) * .75);
}
.index .section-tete { margin-bottom: clamp(28px, 4.5vw, 64px); }
.index__corps { position: relative; }
.index__liste {
  position: relative;
  z-index: 1;
  list-style: none;
  padding: 0;
  width: calc((100% + var(--gouttiere)) / 12 * 9 - var(--gouttiere));
}
.index__lien {
  position: relative;
  display: grid;
  grid-template-columns: 5.5ch minmax(0, 1fr);
  align-items: start;
  color: var(--encre);
  text-decoration: none;
}
.index__num { padding-top: calc(var(--fs-index) * .16); }
.index__titre { display: block; transition: transform .5s var(--sortie); }
.index__nom {
  position: relative;
  display: inline-block;
  font: 600 var(--fs-index)/.94 var(--display);
  letter-spacing: -.035em;
  transition: color .25s;
}
.index__nom::before {
  content: "";
  position: absolute;
  left: -.42em;
  top: .47em;
  width: .3em;
  height: .085em;
  background: var(--rouge);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--sortie);
}
.index__meta {
  display: inline-block;
  margin-left: .9em;
  vertical-align: top;
  font: 400 var(--fs-legende)/1.25 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  transform: translateY(.9em);
  color: var(--encre);
}
.index__lien:hover .index__nom,
.index__lien:focus-visible .index__nom,
.index__lien.est-actif .index__nom { color: var(--gris-clair); }
.index__lien:hover .index__titre,
.index__lien:focus-visible .index__titre,
.index__lien.est-actif .index__titre { transform: translateX(calc(var(--fs-index) * .42)); }
.index__lien:hover .index__nom::before,
.index__lien:focus-visible .index__nom::before,
.index__lien.est-actif .index__nom::before { transform: scaleX(1); }
.index__lien:focus-visible { outline-offset: 6px; }

/* Reflet inversé (maculage : l'encre décalquée sur la feuille d'en face) */
.index__maculage {
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  pointer-events: none;
  transform: scaleX(-1);
  color: var(--fantome);
  user-select: none;
}
.index__maculage ol { list-style: none; padding: 0; }
.index__maculage li {
  display: grid;
  grid-template-columns: 5.5ch minmax(0, 1fr);
  font: 600 var(--fs-index)/.94 var(--display);
  letter-spacing: -.035em;
  transition: color .3s;
}
.index__maculage li.est-actif { color: rgb(255 29 15 / .22); }

/* Aperçu de l'image survolée, encadré comme dans un logiciel de mise en page */
.index__apercu {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: calc((100% + var(--gouttiere)) / 12 * 3 - var(--gouttiere));
}
.apercu { position: sticky; top: calc(var(--h-entete) + 28px); }
.apercu__cadre { position: relative; height: 220px; }
.apercu__image { position: absolute; inset: 0; background: var(--encre) center / cover no-repeat; }
.apercu__legende {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  font-size: var(--fs-legende);
}

/* Vignette de téléphone (l'aperçu ne suit pas le doigt) */
.index__vignette { display: none; }

@media (max-width: 1023px) {
  .index__liste { width: 100%; }
  .index__apercu, .index__maculage { display: none; }
  .index__item + .index__item { margin-top: clamp(28px, 6vw, 44px); }
  .index__lien { grid-template-columns: 1fr; }
  .index__num { order: 2; padding-top: 10px; }
  .index__vignette {
    display: block;
    order: -1;
    aspect-ratio: var(--ratio, 16/10);
    margin-bottom: 12px;
    background-color: var(--couleur);
    background-position: center;
    background-size: cover;
  }
  .index__meta { display: block; margin: 8px 0 0; transform: none; }
  .index__lien:hover .index__titre,
  .index__lien.est-actif .index__titre { transform: none; }
}

/* ---------- Visuels (emplacements d'images) ---------- */

.visuel { position: relative; }
.visuel__image {
  position: relative;
  aspect-ratio: var(--ratio, 4/3);
  background: var(--couleur, var(--papier-2));
  isolation: isolate;
}
.visuel__image.a-plaques { background: none; }
.visuel__plaque {
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
}
.visuel__info {
  position: absolute;
  left: 10px;
  bottom: 8px;
  z-index: 1;
  font: 400 var(--fs-legende)/1.2 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--encre);
}
.visuel--fonce .visuel__info { color: var(--papier); }
.visuel > .reperes { inset: 0; --long: 9px; --ecart: 5px; }
.visuel .selection { opacity: 0; transition: opacity .15s; }
.visuel:hover .selection,
a:focus-visible .visuel .selection { opacity: 1; }
.visuel figcaption,
.visuel__legende {
  display: flex;
  justify-content: space-between;
  gap: 2ch;
  margin-top: 14px;
  font: 400 var(--fs-legende)/1.3 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gris);
}

/* ---------- Pied de page : contact sur aplat rouge ---------- */

.pied {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 2.5vw, 32px) var(--marge) 14px;
  background: var(--rouge);
  color: var(--encre);
}
.pied :focus-visible { outline-color: var(--encre); }
.pied ::selection { background: var(--encre); color: var(--rouge); }
.pied__haut { border-top: 1px solid var(--encre); }
.pied__appel {
  margin-top: clamp(56px, 9vw, 140px);
  font: 600 var(--fs-grand)/1.02 var(--display);
  letter-spacing: -.025em;
}
.pied__mail {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: .12em 0 0 -.05em;
  font: 700 11.6vw/.86 var(--display);
  letter-spacing: -.045em;
  text-decoration: none;
  white-space: nowrap;
}
.pied__mail:hover { text-decoration: underline; text-decoration-thickness: .055em; text-underline-offset: .09em; }
.pied__bas {
  margin-top: clamp(48px, 7vw, 110px);
  padding-top: 12px;
  border-top: 1px solid var(--encre);
}
.pied__bas a { text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; gap: .5em; }
.pied__bas a:hover { text-decoration: underline; }
.horloge { font-variant-numeric: tabular-nums; }

@media (max-width: 767px) {
  .pied__mail { font-size: 10.4vw; }
  .pied__haut > :nth-child(2) { display: none; }
  .pied__bas { flex-wrap: wrap; row-gap: 6px; }
  .section-tete > span:nth-child(n + 3) { display: none; }
}

/* Masques des lettres qui montent (titres de page). Assez larges pour toute l'encre de la lettre :
   accents des capitales en haut, jambages (j, g, p) en bas, et à droite le dessin qui déborde de sa
   boîte à cause de l'interlettrage serré. Sinon ces morceaux sont coupés pendant l'animation et
   réapparaissent d'un coup à la fin (retour de Robin du 15/10/2026). */
.c-mask { padding: .18em .1em .15em .06em; margin: -.18em -.1em -.15em -.06em; }

/* ---------- Page Projets : le catalogue ---------- */

.page-titre {
  padding: calc(var(--h-entete) + clamp(32px, 6vw, 88px)) var(--marge) 0;
}
.page-titre h1 {
  font: 700 var(--fs-titre)/.8 var(--display);
  letter-spacing: -.048em;
  margin-left: -.05em;
}
.page-titre sup {
  margin-left: .3em;
  font: 400 var(--fs-mono)/1 var(--mono);
  letter-spacing: .04em;
  vertical-align: top;
  position: relative;
  top: .35em;
}

.catalogue { padding: 0 var(--marge) var(--section); }
.catalogue__outils {
  margin: clamp(28px, 4vw, 56px) 0 clamp(36px, 5vw, 72px);
  border-top: 1px solid var(--encre);
  flex-wrap: wrap;
}
.catalogue__outils > div { display: flex; gap: clamp(14px, 2.4vw, 36px); }
.catalogue__outils button {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.catalogue__outils button::before {
  content: "";
  width: .62em;
  height: .62em;
  box-shadow: inset 0 0 0 1px var(--encre);
}
.catalogue__outils button[aria-pressed="true"]::before { background: var(--rouge); box-shadow: inset 0 0 0 1px var(--rouge); }
.catalogue__outils button:hover { text-decoration: underline; text-underline-offset: .35em; }
.catalogue__outils sup { font-size: .8em; vertical-align: top; }

.cartes {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gouttiere);
  row-gap: clamp(56px, 7vw, 120px);
  align-items: start;
  grid-auto-flow: dense;
}
.carte { grid-column: span var(--span, 6); margin-top: var(--decalage, 0); }
.catalogue.est-filtre .carte { margin-top: 0; } /* les décalages sont pensés pour la liste complète */
.carte a { display: block; text-decoration: none; }
.carte__nom {
  margin-top: 14px;
  font: 600 clamp(1.5rem, .9rem + 1.7vw, 2.75rem)/1 var(--display);
  letter-spacing: -.03em;
}
.carte a:hover .carte__nom { text-decoration: underline; text-decoration-thickness: .05em; text-underline-offset: .12em; }
.carte__meta { margin-top: 8px; color: var(--gris); font-size: var(--fs-legende); }

/* Vue en liste */
.catalogue.est-liste .cartes { row-gap: 0; }
.catalogue.est-liste .carte { grid-column: 1 / -1; margin-top: 0; }
.catalogue.est-liste .carte a {
  display: grid;
  grid-template-columns: 5.5ch minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--gouttiere);
  padding: 10px 0 6px;
  border-top: 1px solid var(--filet);
}
.catalogue.est-liste .carte .visuel { display: none; }
.catalogue.est-liste .carte__num { display: block; }
.catalogue.est-liste .carte__nom { margin: 0; font-size: var(--fs-index); line-height: .96; }
.catalogue.est-liste .carte__meta { margin: 0; text-align: right; }
.carte__num { display: none; }

@media (max-width: 767px) {
  .carte { grid-column: 1 / -1 !important; margin-top: 0 !important; }
  .catalogue.est-liste .carte a { grid-template-columns: minmax(0, 1fr); }
  .catalogue.est-liste .carte__num, .catalogue.est-liste .carte__meta { display: none; }
}

/* ---------- Page Projet ---------- */

.projet-tete {
  padding: calc(var(--h-entete) + clamp(32px, 6vw, 88px)) var(--marge) 0;
}
.projet-tete__surtitre { margin-bottom: clamp(10px, 1.6vw, 20px); }
.projet-tete h1 {
  font: 700 var(--fs-titre)/.82 var(--display);
  letter-spacing: -.048em;
  margin-left: -.05em;
  text-wrap: balance;
}
.fiche {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gouttiere);
  margin-top: clamp(32px, 5vw, 72px);
  border-top: 1px solid var(--encre);
  padding-top: 12px;
}
.fiche dt { color: var(--gris); }
.fiche dd { margin-top: 4px; }

.planches {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gouttiere);
  row-gap: clamp(48px, 6vw, 104px);
  padding: clamp(48px, 6vw, 96px) var(--marge) var(--section);
  align-items: start;
}
.planche { grid-column: span var(--span, 12); margin-top: var(--decalage, 0); }
.planche--debut { grid-column: var(--debut) / span var(--span, 12); }
.texte-projet {
  grid-column: 3 / span 8;
  font: 500 var(--fs-grand)/1.08 var(--display);
  letter-spacing: -.022em;
  text-wrap: pretty;
}
.texte-colonnes {
  grid-column: 5 / span 8;
  columns: 2;
  column-gap: var(--gouttiere);
  max-width: none;
}
.texte-colonnes p + p { margin-top: 1em; }

.suivant {
  display: block;
  padding: clamp(24px, 3vw, 40px) var(--marge) clamp(40px, 6vw, 96px);
  border-top: 1px solid var(--encre);
  margin-inline: var(--marge);
  padding-inline: 0;
  text-decoration: none;
  position: relative;
}
.suivant__nom {
  display: block;
  margin-top: clamp(16px, 2.4vw, 32px);
  font: 700 var(--fs-titre)/.82 var(--display);
  letter-spacing: -.048em;
  position: relative;
}
.suivant__nom > span { position: relative; z-index: 1; }
.suivant__nom::before {
  content: "";
  position: absolute;
  inset: -.04em -.06em -.1em;
  background: var(--couleur, var(--rouge));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s var(--sortie);
}
.suivant:hover .suivant__nom::before,
.suivant:focus-visible .suivant__nom::before { transform: scaleX(1); }
.suivant:hover .suivant__nom,
.suivant:focus-visible .suivant__nom { color: var(--sur-couleur, var(--encre)); }
.suivant__nom { transition: color .4s .1s; }

@media (max-width: 767px) {
  .fiche { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .planche { grid-column: 1 / -1 !important; margin-top: 0 !important; }
  .texte-projet, .texte-colonnes { grid-column: 1 / -1; columns: 1; }
}

/* Fiche : une colonne de plus quand le site est en ligne */
.fiche:has(> div:nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fiche a { display: inline-flex; align-items: center; gap: .3em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.fiche a .icone { width: 1.1em; height: 1.1em; }
@media (max-width: 767px) {
  .fiche:has(> div:nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Page Projet : médias (vidéos, images à plat) ---------- */

/* Une vidéo ou une image remplit son emplacement, dont le format vient de --ratio */
.visuel__image > picture,
.visuel__image > video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.visuel__image > picture > img,
.visuel__image > video { width: 100%; height: 100%; object-fit: cover; }
.media__droite { display: inline-flex; align-items: baseline; gap: 2ch; white-space: nowrap; }
.media__lecture {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  min-height: 24px;
  margin: -6px 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--encre);
  font-size: inherit;
  cursor: pointer;
}
.media__lecture::before {
  content: "";
  width: .62em;
  height: .62em;
  box-shadow: inset 0 0 0 1px var(--encre);
}
.media__lecture.est-en-lecture::before { background: var(--rouge); box-shadow: inset 0 0 0 1px var(--rouge); }
.media__lecture:hover { text-decoration: underline; text-underline-offset: .35em; }

/* Repérage des images : trois plaques (cyan, magenta, jaune) qui, en produit, redonnent l'image.
   Chaque plaque garde un canal et blanchit les deux autres (filtres #plaque-c, -m, -j posés par projet.js). */
.plaques { position: absolute; inset: 0; z-index: 1; isolation: isolate; pointer-events: none; }
.plaques > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  will-change: transform;
}
.plaque--c { filter: url(#plaque-c); }
.plaque--m { filter: url(#plaque-m); }
.plaque--j { filter: url(#plaque-j); }
.a-plaques-image > picture { visibility: hidden; }

/* En-tête d'une partie de la page (Détails, Charte, Pistes) */
.planche-tete { grid-column: 1 / -1; margin-top: clamp(24px, 4vw, 64px); }
.planche-tete h2 { font: inherit; }
.note-projet { grid-column: 7 / span 5; max-width: 48ch; text-wrap: pretty; }

/* Choix retenu : le cadre de sélection reste affiché */
.retenue { display: inline-flex; align-items: center; gap: .6em; color: var(--encre); }
.retenue::before { content: ""; width: .62em; height: .62em; background: var(--rouge); }
.est-retenue .selection { opacity: 1; }

/* ---------- Chemin de fer : les sections du site à plat, côte à côte ---------- */

.planche--pleine { grid-column: 1 / -1; }
.chemin { --page: min(31vw, 520px, calc((100svh - 250px) / 1.04)); }
.chemin .section-tete { margin-bottom: clamp(14px, 1.6vw, 24px); }
.chemin .section-tete h2 { font: inherit; }
.chemin__piste {
  margin-inline: calc(-1 * var(--marge));
  padding: 26px var(--marge) 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--marge);
  scrollbar-width: none;
}
.chemin__piste::-webkit-scrollbar { display: none; }
.chemin__piste:focus-visible { outline-offset: -2px; }
.chemin__pages {
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 2.4vw, 40px);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chemin__page { flex: none; width: var(--page); scroll-snap-align: start; }
.chemin--epingle .chemin__piste { overflow: visible; scroll-snap-type: none; }
/* Règle d'imposition : une graduation par section, le filet rouge avance avec la lecture */
.chemin__regle {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--total), minmax(0, 1fr));
  margin-top: clamp(14px, 1.6vw, 22px);
  border-top: 1px solid var(--filet);
  font-size: var(--fs-legende);
  color: var(--gris);
}
.chemin__regle > b {
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 2px;
  background: var(--rouge);
  transform-origin: left;
  transform: scaleX(var(--avance, 0));
}
.chemin__regle > i { position: relative; padding-top: 7px; font-style: normal; }
.chemin__regle > i::before { content: ""; position: absolute; left: 0; top: -1px; width: 1px; height: 7px; background: var(--encre); }

@media (max-width: 767px) {
  .chemin { --page: 72vw; }
}

/* ---------- Ordinateur et téléphone, même échelle ---------- */

.paire { grid-column: 1 / -1; }
.paire__ecrans { display: grid; column-gap: clamp(16px, 2.4vw, 40px); align-items: end; }
.paire__etiquette {
  display: flex;
  justify-content: space-between;
  gap: 1ch;
  margin-top: 12px;
  font-size: var(--fs-legende);
  color: var(--gris);
}
.paire > figcaption { margin-top: clamp(18px, 2vw, 28px); padding-top: 12px; border-top: 1px solid var(--filet); }

@media (max-width: 767px) {
  .paire__ecrans { grid-template-columns: minmax(0, 1fr) !important; row-gap: 32px; }
  .paire__ecran:last-child { width: 64%; margin-inline: auto; }
}

/* ---------- Radiographie : l'écran fini et ce qui le construit ---------- */

.radio__cadre { cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.radio__rayons { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--coupe, 50%)); }
.radio__rayons > picture,
.radio__rayons img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.radio__poignee { position: absolute; top: 0; bottom: 0; left: var(--coupe, 50%); z-index: 2; pointer-events: none; }
.radio__trait { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--rouge); }
.radio__pastille {
  position: absolute;
  top: 50%;
  left: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 9px 8px;
  background: var(--rouge);
  color: var(--encre);
  transform: translate(-50%, -50%);
}
.radio__pastille .icone { width: 16px; height: 16px; }
.icone--gauche { transform: scaleX(-1); }
.radio__etiquette {
  position: absolute;
  bottom: 14px;
  z-index: 2;
  padding: 4px 6px 3px;
  font-size: var(--fs-legende);
  white-space: nowrap;
  pointer-events: none;
}
.radio__etiquette--fini { right: calc(100% - var(--coupe, 50%) + 12px); background: var(--papier); }
.radio__etiquette--rayons { left: calc(var(--coupe, 50%) + 12px); background: var(--rouge); }
.radio__curseur { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.radio__cadre:has(.radio__curseur:focus-visible) { outline: 2px solid var(--rouge); outline-offset: 4px; }
.radio .selection { display: none; }

/* ---------- Affiche et écran côte à côte, à la même hauteur ---------- */

.duo { display: grid; column-gap: clamp(16px, 2.4vw, 40px); align-items: end; }

/* ---------- Fiche technique : un cartouche de plan ---------- */

.cartouche .section-tete h2 { font: inherit; }
.cartouche__grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--encre);
  border-left: 1px solid var(--encre);
}
.cartouche__liste { display: contents; }
.cartouche__liste > div,
.cartouche__lien {
  min-height: 108px;
  padding: 10px 12px 16px;
  border-right: 1px solid var(--encre);
  border-bottom: 1px solid var(--encre);
}
.cartouche dt { font-size: var(--fs-legende); color: var(--gris); }
.cartouche dd { margin: 8px 0 0; font: 400 var(--fs-texte)/1.35 var(--texte); letter-spacing: 0; text-transform: none; text-wrap: pretty; }
.cartouche__lien {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5em;
  background: var(--rouge);
  color: var(--encre);
  text-decoration: none;
}
.cartouche__lien .mono { font-size: var(--fs-legende); }
.cartouche__adresse {
  display: inline-flex;
  align-items: center;
  gap: .2em;
  font: 600 clamp(1.5rem, .9rem + 1.6vw, 2.6rem)/1 var(--display);
  letter-spacing: -.03em;
  text-transform: none;
}
.cartouche__adresse .icone { width: .9em; height: .9em; transition: transform .35s var(--sortie); }
.cartouche__lien:hover .cartouche__adresse .icone { transform: translate(3px, -3px); }
.cartouche__lien:focus-visible { outline-color: var(--encre); outline-offset: -6px; }

@media (max-width: 1023px) {
  .cartouche__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .note-projet { grid-column: 1 / -1; }
}

/* ---------- Page Profil ---------- */

.profil-tete {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gouttiere);
  row-gap: clamp(28px, 4vw, 56px);
  padding: 0 var(--marge) var(--section);
  margin-top: clamp(32px, 5vw, 72px);
}
.profil-tete__chapo {
  grid-column: 1 / span 7;
  font: 500 var(--fs-grand)/1.06 var(--display);
  letter-spacing: -.022em;
  text-wrap: pretty;
}
.profil-tete__portrait { grid-column: 9 / span 4; grid-row: 1 / span 2; position: relative; }
.profil-tete__texte { grid-column: 1 / span 6; max-width: 62ch; }
.profil-tete__texte p + p { margin-top: 1em; }

/* Tampon en texte circulaire (The North Face, autocollants Mar Cardona) */
.tampon {
  position: absolute;
  left: -66px;
  bottom: -12px;
  width: 132px;
  height: 132px;
  z-index: 3;
  color: var(--rouge);
  pointer-events: none;
}
.tampon svg { width: 100%; height: 100%; overflow: visible; }
.tampon text {
  font-family: var(--mono);
  font-size: 10.6px;
  letter-spacing: .14em;
  text-transform: uppercase;
  fill: currentColor;
}

@media (max-width: 767px) {
  .profil-tete__chapo, .profil-tete__texte { grid-column: 1 / -1; }
  .profil-tete__portrait { grid-column: 1 / -1; grid-row: auto; margin-bottom: 40px; }
  .tampon { left: auto; right: -10px; top: -44px; bottom: auto; width: 104px; height: 104px; }
}

/* ---------- Mentions légales ---------- */

.texte-page { padding: 0 var(--marge) var(--section); }
.texte-page .section-tete { margin-top: clamp(32px, 5vw, 72px); }
.texte-page__corps {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gouttiere);
}
.texte-page__bloc { grid-column: 4 / span 6; padding: 18px 0 34px; }
.texte-page__bloc h2 {
  font: 600 clamp(1.5rem, 1rem + 1.4vw, 2.3rem)/1.05 var(--display);
  letter-spacing: -.02em;
  margin-bottom: .6em;
}
.texte-page__bloc p + p { margin-top: .8em; }
.texte-page__bloc a { text-decoration: underline; }
.todo { background: rgb(255 29 15 / .16); box-shadow: 0 0 0 2px rgb(255 29 15 / .16); }

@media (max-width: 1023px) {
  .texte-page__bloc { grid-column: 1 / -1; }
}

/* ---------- Page introuvable ---------- */

.introuvable {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: calc(var(--h-entete) + 24px) var(--marge) var(--marge);
  background: var(--rouge);
}
.introuvable__code {
  align-self: center;
  font: 700 46vw/.78 var(--display);
  letter-spacing: -.06em;
  margin-left: -.06em;
  color: #BDBDB8;
  background: var(--bruit, #BDBDB8) center / cover;
  -webkit-background-clip: text;
  background-clip: text;
}
.a-bruit .introuvable__code { color: transparent; }
.introuvable__bas { border-top: 1px solid var(--encre); flex-wrap: wrap; }
.introuvable__bas p { font: 600 var(--fs-grand)/1 var(--display); letter-spacing: -.02em; text-transform: none; }
.page-introuvable .entete { background: var(--rouge); }

/* ---------- Mode grille (touche G) ---------- */

.grille-calque {
  position: fixed;
  inset: 0;
  z-index: var(--z-grille);
  display: grid;
  grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
  column-gap: var(--gouttiere);
  padding-inline: var(--marge);
  pointer-events: none;
  visibility: hidden;
}
.grille-calque > span {
  position: relative;
  background: var(--rouge-voile);
  box-shadow: inset 1px 0 var(--rouge-trait), inset -1px 0 var(--rouge-trait);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .8s var(--sortie);
  transition-delay: calc(var(--i, 0) * 28ms);
}
.grille-calque > span::before {
  content: attr(data-n);
  position: absolute;
  left: 4px;
  top: calc(var(--h-entete) + 6px);
  font: 500 10px/1 var(--mono);
  letter-spacing: .04em;
  color: var(--rouge);
}
.grille-active .grille-calque { visibility: visible; }
@media (max-width: 767px) {
  .grille-calque > span:nth-child(n + 5) { display: none; }
}
.grille-active .grille-calque > span { transform: scaleY(1); }

.cotes {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: var(--z-grille);
  pointer-events: none;
  display: none;
}
.grille-active .cotes { display: block; }
.cote {
  position: absolute;
  outline: 1px dashed var(--rouge);
  outline-offset: -1px;
}
.cote > span {
  position: absolute;
  left: 0;
  bottom: 100%;
  padding: 3px 4px 2px;
  background: var(--rouge);
  color: var(--encre);
  font: 500 10px/1 var(--mono);
  letter-spacing: .02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---------- Transition entre les pages : colonnes ---------- */

.rideau {
  position: fixed;
  inset: 0;
  z-index: var(--z-rideau);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  pointer-events: none;
}
.rideau > span {
  margin-right: -1px;
  background: var(--rouge);
  transform: scaleY(0);
}
.rideau-actif { background: var(--rouge); } /* avant même que le corps de la page existe */
.rideau-actif .rideau > span {
  transform: scaleY(1);
  animation: rideau-secours .01s linear 2.4s forwards; /* si le script ne se charge pas */
}
@keyframes rideau-secours { to { transform: scaleY(0); } }

/* Transition entre documents : le navigateur garde l'image de l'ancienne page jusqu'à ce que la
   nouvelle soit prête à s'afficher, au lieu d'un écran blanc. Aucun fondu : le rideau rouge
   fait déjà la transition. */
@view-transition { navigation: auto; }
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 0s; animation-delay: 0s; }

/* ---------- Écran de veille (veille.js) ---------- */

/* Le papier nu revient par-dessus toute la page ; le grain reste au-dessus */
.veille {
  position: fixed;
  inset: 0;
  z-index: var(--z-veille);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: clamp(40px, 6vh, 72px) var(--marge) clamp(14px, 2.2vh, 26px);
  background: var(--papier);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.veille.est-active { visibility: visible; }
.veille.capte { pointer-events: auto; cursor: none; }
.veille > .reperes { inset: calc(var(--marge) * .6) calc(var(--marge) * .5); }
.veille__scene { position: relative; min-height: 0; }
.veille__canevas { position: absolute; }
.veille__marge {
  position: relative;
  margin-top: clamp(10px, 1.8vh, 22px);
  font-size: var(--fs-legende);
  color: var(--gris);
}
.veille__info { font-variant-numeric: tabular-nums; white-space: pre; }

/* ---------- Apparitions ---------- */

.js .apparait { opacity: 0; transform: translateY(14px); }
.js .apparait.est-visible {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--sortie), transform .7s var(--sortie);
}
.capture .apparait { opacity: 1 !important; transform: none !important; }

/* ---------- Préférences ---------- */

@media (prefers-reduced-motion: reduce) {
  .js .apparait { opacity: 1; transform: none; }
  .entete, .menu, .grille-calque > span, .lien .icone, .index__titre, .index__nom::before, .suivant__nom::before { transition-duration: .01s !important; transition-delay: 0s !important; }
}

@media print {
  body::after, .entete, .rideau, .grille-calque, .cotes, .accueil__trame, .veille { display: none !important; }
  .trame-prete .accueil__nom { color: var(--rouge); }
  .pied { background: none; }
}