/* Portfolio Jeanne Potié — mobile first (le responsive desktop viendra ensuite)
   Mise en page : colonne unique, grandes images pleine largeur, blocs bordeaux qui reprennent les doubles pages du book. */

/* Forma DJR Text : police sous licence. Déposer les fichiers dans /fonts puis décommenter.
@font-face { font-family: "Forma DJR Text"; src: url("fonts/FormaDJRText-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Forma DJR Text"; src: url("fonts/FormaDJRText-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Forma DJR Display"; src: url("fonts/FormaDJRDisplay-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
*/

:root {
  --bordeaux: #60121a;
  --bordeaux-deep: #4d0e15;
  --rose: #dcc8ca;        /* le gris rosé des sous-titres anglais du book */
  --rose-on-dark: #b98c92;
  --ink: #1d1416;
  --paper: #ffffff;
  --mist: #f4f1f1;
  --text: "Forma DJR Text", "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --display: "Forma DJR Display", "Forma DJR Text", "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --gutter: 20px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 3px; }
.on-dark a:focus-visible, .menu a:focus-visible, .menu button:focus-visible { outline-color: #fff; }

/* ---------- Header (non sticky) ---------- */
.header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--gutter);
  color: var(--bordeaux);
}
.logo { display: block; width: 52px; color: var(--bordeaux); }
.logo svg { display: block; width: 100%; height: auto; }
.menu-btn {
  appearance: none; border: 0; background: none; cursor: pointer;
  font: 500 13px/1 var(--text); letter-spacing: .08em; text-transform: uppercase;
  color: var(--bordeaux); padding: 10px 0 10px 16px;
  display: flex; align-items: center; gap: 10px;
}
.menu-btn .bars { display: grid; gap: 5px; width: 22px; }
.menu-btn .bars i { display: block; height: 1.5px; background: currentColor; }

.runner {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 0 var(--gutter) 0;
  font-size: 12px; color: var(--bordeaux);
}
.runner b { font-weight: 700; }

/* ---------- Menu plein écran ---------- */
.menu {
  position: fixed; inset: 0; z-index: 50;
  background: var(--bordeaux); color: #fff;
  display: flex; flex-direction: column;
  padding: calc(18px + env(safe-area-inset-top, 0px)) var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px));
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s;
}
.menu.open { opacity: 1; visibility: visible; }
.menu-top { display: flex; justify-content: space-between; align-items: center; }
.menu .logo { color: #fff; }
.menu-close { appearance: none; border: 0; background: none; color: #fff; cursor: pointer; font: 500 13px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; padding: 10px 0 10px 16px; }
.menu nav { margin-top: 56px; display: grid; gap: 6px; }
.menu nav a {
  font: 800 clamp(40px, 12vw, 64px)/1 var(--display);
  text-transform: uppercase; letter-spacing: -.01em;
  transform: translateY(14px); opacity: 0; transition: transform .5s ease, opacity .5s ease;
}
.menu.open nav a { transform: none; opacity: 1; }
.menu.open nav a:nth-child(2) { transition-delay: .06s; }
.menu.open nav a:nth-child(3) { transition-delay: .12s; }
.menu nav a small { display: block; font: 400 12px/1.6 var(--text); letter-spacing: .08em; color: var(--rose-on-dark); margin-bottom: 4px; }
.menu-foot { margin-top: auto; padding-top: 40px; font-size: 13px; display: flex; justify-content: space-between; gap: 12px; color: var(--rose-on-dark); }
.menu-foot a { color: #fff; }

/* ---------- Libellés bilingues (comme le book) ---------- */
.label {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--bordeaux); margin: 0;
}
.label span { color: var(--rose); font-weight: 700; margin-left: 4px; }
.on-dark .label { color: #fff; }
.on-dark .label span { color: var(--rose-on-dark); }

/* ---------- Accueil : intro ---------- */
.intro { padding: 72px var(--gutter) 56px; }
.intro h1 {
  margin: 0; color: var(--bordeaux);
  font: 800 clamp(46px, 14.5vw, 80px)/.92 var(--display);
  letter-spacing: -.02em; text-transform: uppercase;
}
.intro p.lede { margin: 26px 0 0; max-width: 32ch; font-size: 17px; line-height: 1.45; color: var(--ink); }
.intro .tags { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--bordeaux); }

/* ---------- Accueil : réalisations ---------- */
.work-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 var(--gutter) 16px; }
.work-head .count { font-size: 12px; color: var(--bordeaux); font-variant-numeric: tabular-nums; }
.projects { display: grid; gap: 10px; padding: 0 10px; }
.card { position: relative; display: block; overflow: hidden; background: var(--mist); aspect-ratio: 6 / 5; max-width: 100%; isolation: isolate; }
/* L'image dépasse le container (effet fenêtre) et se déplace plus lentement que lui au scroll. */
.card-media { position: absolute; left: 0; right: 0; top: -40%; bottom: -40%; will-change: transform; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card::after { content: ""; position: absolute; inset: 0; background: rgba(20, 6, 8, .2); pointer-events: none; z-index: 1; }
.card-title {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 var(--gutter); text-align: center; color: #fff;
}
.card-title strong { display: block; font: 800 clamp(40px, 13vw, 72px)/.9 var(--display); letter-spacing: -.015em; text-transform: uppercase; }
.card-title em { display: block; font-style: normal; font-weight: 300; font-size: 14px; letter-spacing: .02em; margin-top: 10px; }

/* ---------- Bloc bordeaux ---------- */
.on-dark { background: var(--bordeaux); color: #fff; }
.about { padding: 64px var(--gutter) 40px; }
.about-img { margin: 28px 0 32px; }
.about-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.about p { margin: 0 0 1em; max-width: 36ch; font-size: 15px; }
.about .facts { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 0; font-size: 13px; }
.about .facts li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.2); }
.about .facts li span:first-child { color: var(--rose-on-dark); }
.about .big, .p-text .big, .big {
  margin: 48px 0 0; max-width: none; font: 800 clamp(48px, 15.2vw, 120px)/.86 var(--display);
  letter-spacing: -.025em; text-transform: uppercase; color: #fff;
}

/* ---------- Contact (bordeaux) ---------- */
.work { padding: 0 0 10px; }
.contact { padding: 64px var(--gutter) 28px; margin-top: 0; }
.contact h2 { margin: 14px 0 24px; font: 800 clamp(22px, 6.4vw, 34px)/1.05 var(--display); text-transform: uppercase; letter-spacing: -.015em; color: #fff; text-wrap: balance; }
.contact ul { list-style: none; margin: 0; padding: 0; }
.contact li { border-top: 1px solid rgba(255,255,255,.25); }
.contact li:last-child { border-bottom: 1px solid rgba(255,255,255,.25); }
.contact li a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 0; font-size: 14px; color: #fff; }
.contact li a span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--rose-on-dark); }
.contact-foot { margin-top: 40px; display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--rose-on-dark); }

.footer { padding: 22px var(--gutter) 28px; display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--bordeaux); border-top: 1px solid var(--mist); }

/* ---------- Page projet ---------- */
.back { display: inline-flex; gap: 8px; align-items: center; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--bordeaux); padding: 0 var(--gutter); margin-top: 28px; }
.p-head { padding: 22px var(--gutter) 30px; }
.p-head h1 { margin: 0; color: var(--bordeaux); font: 800 clamp(44px, 14vw, 80px)/.9 var(--display); letter-spacing: -.03em; text-transform: uppercase; }
.p-head .sub { margin: 14px 0 0; font-size: 17px; color: var(--bordeaux); }
.p-hero img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.p-hero { margin: 0; }
.project .p-text { padding: 40px var(--gutter) 8px; }
.project .p-text p { margin: 0 0 1.1em; font-size: 15px; line-height: 1.6; max-width: 38ch; }
.plate { margin: 32px 0 0; }
.plate img { width: 100%; }
.plate.drawing { padding: 0 var(--gutter); }
.plate figcaption { padding: 10px var(--gutter) 0; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--rose); font-weight: 700; }
.plate.drawing figcaption { padding-inline: 0; }
.plate figcaption b { color: var(--bordeaux); margin-right: 4px; }
.p-credits { margin: 32px var(--gutter) 0; padding-top: 14px; border-top: 1px solid var(--rose); font-size: 12px; color: var(--bordeaux); }

.next { display: block; margin-top: 72px; position: relative; overflow: hidden; }
.next img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
.next::after { content: ""; position: absolute; inset: 0; background: rgba(40,8,12,.38); }
.next .next-in { position: absolute; inset: auto var(--gutter) 20px; z-index: 1; color: #fff; }
.next .next-in small { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.next .next-in strong { font: 800 46px/.9 var(--display); text-transform: uppercase; letter-spacing: -.02em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Ordinateur (premiers réglages) ---------- */
@media (min-width: 900px) {
  /* Containers un tiers moins hauts que sur mobile, en bandeaux larges */
  .card { aspect-ratio: 9 / 5; }
}