/* Atelier d'Architecture Moderne.

   Parti pris : site ACHROMATIQUE. Aucune couleur en dehors des photographies.
   Le registre des teintes est saturé (31 prises) et une teinte arbitraire aurait
   sonné faux ici — un cabinet d'architecture se lit en noir, gris et blanc, comme
   ses tirages. L'absence de couleur est elle-même la différenciation.

   Une seule famille typographique, en trois graisses, plus son mono pour les cotes :
   c'est ainsi qu'est composé un document technique. */

@import url('https://fonts.googleapis.com/css2?family=Chivo:wght@400;700;900&family=Chivo+Mono:wght@400;500&display=swap');

:root {
  --encre: #0E0F10;
  --encre-2: #2A2C2E;
  --gris: #6E7275;
  --trait: #B9BCBE;
  --papier-2: #E9EAEA;
  --papier: #FAFAF9;

  --sans: "Chivo", Helvetica, sans-serif;
  --mono: "Chivo Mono", ui-monospace, monospace;

  --t-titre: clamp(2.6rem, 8.5vw, 9rem);
  --t-grand: clamp(2rem, 4.6vw, 4.2rem);
  --t-moyen: clamp(1.4rem, 2.4vw, 2.1rem);
  --t-chapo: clamp(1.2rem, 1.6vw, 1.55rem);
  --t-corps: 1.2rem;
  --t-cote: .74rem;

  --e1: 8px; --e2: 16px; --e3: 26px; --e4: 44px;
  --e5: 72px; --e6: 118px; --e7: 180px;

  --marge: clamp(20px, 5vw, 72px);
  --courbe: cubic-bezier(.25, .8, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--papier); color: var(--encre);
  font-family: var(--sans); font-size: var(--t-corps); line-height: 1.6;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
::selection { background: var(--encre); color: var(--papier); }
:focus-visible { outline: 2px solid var(--encre); outline-offset: 4px; }

/* ══ LE PLAN QUI SE DESSINE — le dispositif signature ══════════════
   Un plan d'architecte tracé au trait dans le FOND de la page. Ses lignes
   se complètent à mesure qu'on lit. Aucun widget, aucun coin : le dispositif
   occupe toute la page, derrière le contenu. */
.plan {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  display: grid; place-items: center;
}
.plan svg { width: min(132vw, 168vh); height: auto; }
.plan [data-trait] {
  fill: none; stroke: #8D9194; stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--long, 1000);
  stroke-dashoffset: calc(var(--long, 1000) * (1 - var(--avance, 0)));
}
/* Le trait de tête, plus dense : on voit où le crayon en est. */
.plan [data-trait].maitre { stroke: #6E7275; stroke-width: 2.2; }
.plan .cote-plan {
  font-family: var(--mono); font-size: 11px; fill: #8D9194;
  opacity: calc(var(--avance, 0) * 1.6 - .6);
}
/* Sur les feuilles sombres, le plan s'éclaircit pour rester perceptible. */
body.sombre .plan [data-trait] { stroke: #4E5356; }
body.sombre .plan [data-trait].maitre { stroke: #62676A; }
body.sombre .plan .cote-plan { fill: #4E5356; }

/* Tout le contenu passe au-dessus du plan. */
.entete, main, .pied { position: relative; z-index: 1; }

/* ══ En-tête ═══════════════════════════════════════════════════════ */
.entete {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3);
  padding: var(--e3) var(--marge);
  background: var(--papier); border-bottom: 1px solid var(--trait);
}
.atelier { font-weight: 900; font-size: 1.05rem; letter-spacing: -.02em; }
.menu { display: flex; gap: var(--e3); }
.menu a {
  font-family: var(--mono); font-size: var(--t-cote); text-transform: uppercase;
  letter-spacing: .1em; color: var(--gris); transition: color 200ms var(--courbe);
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--encre); }

/* ══ Feuilles ══════════════════════════════════════════════════════ */
.feuille { padding: var(--e7) var(--marge); }
.feuille.serre { padding-block: var(--e5); }
.feuille.encre { background: var(--encre); color: var(--papier); }
.feuille.encre .gris { color: #9A9EA1; }
.feuille.gris { background: var(--papier-2); }

.dedans { max-width: 1540px; margin-inline: auto; width: 100%; }
.rang { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--e3); }

/* ══ Typographie ═══════════════════════════════════════════════════ */
.cote {
  font-family: var(--mono); font-size: var(--t-cote); text-transform: uppercase;
  letter-spacing: .12em; color: var(--gris);
}
.feuille.encre .cote { color: #9A9EA1; }

.titre, .grand, .moyen { font-weight: 900; line-height: .96; letter-spacing: -.035em; }
.titre { font-size: var(--t-titre); }
.grand { font-size: var(--t-grand); }
.moyen { font-size: var(--t-moyen); letter-spacing: -.02em; }

.chapo { font-size: var(--t-chapo); line-height: 1.4; max-width: 32ch; }
.corps { max-width: 54ch; }
.corps + .corps { margin-top: var(--e3); }
.gris { color: var(--gris); }
.liste li { padding-left: 22px; text-indent: -22px; margin-top: var(--e2); }

/* ══ Fiches de projet ══════════════════════════════════════════════ */
.fiche { display: block; }
.fiche-vis { position: relative; overflow: hidden; }
.fiche-vis img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
.fiche-tete {
  display: flex; align-items: baseline; gap: var(--e2);
  margin-top: var(--e2); padding-top: var(--e2); border-top: 1px solid var(--trait);
}
.feuille.encre .fiche-tete { border-top-color: #3A3D40; }
.fiche-tete h3 { font-weight: 700; font-size: 1.2rem; }
.fiche-tete .pointille { flex: 1; border-bottom: 1px dotted var(--trait); }
.fiche-tete .an { font-family: var(--mono); font-size: var(--t-cote); color: var(--gris); }

/* ══ Liens ═════════════════════════════════════════════════════════ */
.bouton {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-family: var(--mono); font-size: var(--t-cote); text-transform: uppercase;
  letter-spacing: .12em;
  padding: 14px 22px; border: 1px solid currentColor;
  transition: background-color 220ms var(--courbe), color 220ms var(--courbe), gap 220ms var(--courbe);
}
.bouton::after { content: "→"; font-family: var(--sans); }
.bouton:hover { background: var(--encre); color: var(--papier); gap: var(--e3); }
.feuille.encre .bouton:hover { background: var(--papier); color: var(--encre); }

.fil { position: relative; }
.fil::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: currentColor; opacity: .35;
  transform: scaleX(1); transform-origin: right;
  transition: transform 260ms var(--courbe), opacity 260ms var(--courbe);
}
.fil:hover::after { opacity: 1; transform-origin: left; }

/* ══ Pied ══════════════════════════════════════════════════════════ */
.pied {
  background: var(--encre); color: #9A9EA1;
  padding: var(--e5) var(--marge); display: grid; gap: var(--e2);
  font-family: var(--mono); font-size: var(--t-cote);
}
.pied a:hover { color: var(--papier); }

/* ══ États fermés — JS actif ET mouvement autorisé ════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .js .pose { opacity: 0; transform: translateY(18px); transition: opacity 640ms var(--courbe), transform 640ms var(--courbe); }
  .js .pose.pris { opacity: 1; transform: translateY(0); }

  /* Les visuels s'ouvrent par une règle qui descend : geste de tireligne. */
  .js .fiche-vis > img { clip-path: inset(0 0 100% 0); transition: clip-path 900ms var(--courbe); }
  .js .fiche-vis.pris > img { clip-path: inset(0 0 0 0); }
  .js .fiche-vis::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: var(--encre); transform: scaleX(0); transform-origin: left;
    transition: transform 900ms var(--courbe), opacity 300ms linear .8s;
  }
  .js .fiche-vis.pris::after { transform: scaleX(1); opacity: 0; }
  .js .fiche:hover .fiche-vis > img { filter: grayscale(0) contrast(1.02); }
}
.fiche-vis > img { transition: filter 500ms var(--courbe); }

@media (max-width: 900px) {
  .rang { grid-template-columns: repeat(4, 1fr); }
  .rang > * { grid-column: 1 / -1 !important; }
  .feuille { padding-block: var(--e6); }
  .plan svg { width: 220vw; }
  .menu { gap: var(--e2); }
  .menu a { font-size: .64rem; letter-spacing: .06em; }
}