/* Graphen Studio — page d'accueil
   Desktop ≥ 1200 px · Tablette 810–1199 px · Mobile ≤ 809 px */

:root {
  --ink: #000;
  --grey: #b3b3b3;
  --grey-2: #cfcfcf;
  --line: #e6e6e6;
  --side: 33.333%;
  --ease: cubic-bezier(.44, 0, .56, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-page: cubic-bezier(.12, .23, .5, 1);
}

/* ---------- Transition entre les pages ---------- */

@keyframes page-in { from { opacity: .001; } }
@keyframes page-out { to { opacity: .001; } }
body { animation: page-in .5s var(--ease-page) both; }
/* Une animation plutôt qu'une transition : elle remplace proprement le fondu
   d'arrivée s'il n'est pas terminé quand on quitte la page. */
html.is-leaving body { animation: page-out .35s var(--ease-page) both; }

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

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Edge legacy */
}
html::-webkit-scrollbar { display: none; } /* Chrome, Safari */

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: var(--ink);
  font-family: "Archivo", "Archivo Placeholder", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, ul { margin: 0; padding: 0; }
h1, h2, h3, h4 { font: inherit; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button {
  margin: 0; padding: 0; border: 0; background: none;
  font: inherit; letter-spacing: inherit; color: inherit; text-align: left;
  cursor: pointer;
}
[hidden] { display: none !important; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }

/* Logo texte, repris de l'en-tête du site Graphen Studio actuel */
.wordmark {
  display: inline-block;
  font-family: "Outfit", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 18px;
  letter-spacing: -.013em;
  white-space: nowrap;
}
.wordmark__g { color: #000; }
.wordmark__s { color: #545450; }

/* ---------- Texte « roll » : la copie du dessous remonte au survol ---------- */

.roll {
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  padding: 1px;
  color: var(--c1, var(--ink));
}
.roll__a, .roll__b {
  display: block;
  white-space: nowrap;
  transition: transform .3s var(--ease);
}
.roll__b {
  position: absolute;
  left: 1px;
  top: calc(1px + 1.3em + 6px);
  color: var(--c2, var(--grey));
}
@media (hover: hover) {
  a:hover > .roll > span,
  button:hover > .roll > span { transform: translateY(calc(-1.3em - 6px)); }
}
a:focus-visible > .roll > span,
button:focus-visible > .roll > span { transform: translateY(calc(-1.3em - 6px)); }

.menu__close .roll { --c2: var(--grey-2); }
[aria-pressed="true"] .roll { --c1: var(--ink); --c2: var(--grey-2); }
[aria-pressed="false"] .roll { --c1: var(--grey); --c2: var(--ink); }
.filters [aria-pressed="true"] .roll { --c2: var(--ink); }

/* ---------- Colonne gauche (desktop) ---------- */

.menu-btn {
  position: fixed;
  top: 20px;
  left: 10px;
  z-index: 30;
  padding: 1px;
}

.side {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: var(--side);
  z-index: 10;
  pointer-events: none;
}
.side > * { pointer-events: auto; }

/* Contenu rétractable de la colonne gauche (tout sauf le sélecteur d'affichage,
   qui doit rester joignable pour ressortir du mode Plein) */
.side-retract {
  position: absolute;
  inset: 0;
  transition: transform .6s var(--ease-out), opacity .45s var(--ease);
}

.side-tagline {
  position: absolute;
  top: auto;
  left: 20px;
  right: 40px;
  bottom: 84px;
  max-width: 360px;
  font-family: "Outfit", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--ink);
}
.side-tagline__muted { color: #545450; }

.view-toggle {
  position: absolute;
  top: calc(25vh + 16px);
  left: 10px;
  z-index: 1;
  display: flex;
  gap: 5px;
}

.cats {
  position: absolute;
  top: calc(50vh - 48px);
  left: 10px;
  right: 0;
}
.cats__title { margin-bottom: calc(28px - 1.3em); }
.filters { display: flex; flex-wrap: wrap; gap: 0 8px; }
.filters__break { flex-basis: 100%; width: 0; height: 0; }

.side-foot {
  position: absolute;
  left: 20px;
  right: 10px;
  bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* ---------- Cube du logo, en volume ----------

   cube.svg ne dessine que deux faces : le dessus rayé et la face avant
   noire. Le volume, c'est ces deux faces plus leurs opposées (arrière
   noire, dessous rayé) et les deux flancs, qu'on ne voit jamais au repos.

   Angles : projection isométrique exacte — rotateX(-35.264deg), soit
   -arctan(1/V2), et rotateY(45deg). Ce sont les angles retrouvés en
   remontant depuis les sommets du SVG.

   Taille : le corps est dessiné en grand puis réduit par --cube-k, pour que
   les lamelles soient rasterisées finement avant d'être inclinées. Arête
   finale 181.46 x .1 = 18.146px, ce qui donne à la projection exactement les
   25.66 x 29.63px que le dessin du SVG occupe dans sa case de 26x30.

   La géométrie (taille, profondeur, échelle) vit UNIQUEMENT ici. main.js ne
   pose que les angles, via --rx/--ry/--rz : un JS périmé en cache ne peut
   donc plus casser les proportions. */

.side-cube {
  --cube-edge: 181.46px;
  --cube-half: 90.73px;
  --cube-k: .1;
  position: relative;
  width: 26px;
  height: 30px;
  pointer-events: none;
  perspective: none; /* projection parallèle, comme un dessin isométrique */
}
.side-cube__body {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--cube-edge);
  height: var(--cube-edge);
  margin: calc(var(--cube-half) * -1) 0 0 calc(var(--cube-half) * -1);
  transform-style: preserve-3d;
  transform:
    scale(var(--cube-k))
    rotateX(var(--rx, -35.264deg))
    rotateY(var(--ry, 45deg))
    rotateZ(var(--rz, 0deg));
}
.side-cube__face {
  position: absolute;
  inset: 0;
  display: block;
  backface-visibility: hidden;
}
.side-cube__face--front  { background: var(--ink); transform: translateZ(var(--cube-half)); }
.side-cube__face--back   { background: var(--ink); transform: rotateY(180deg) translateZ(var(--cube-half)); }
.side-cube__face--right  { background: #fff; transform: rotateY(90deg) translateZ(var(--cube-half)); }
.side-cube__face--left   { background: #fff; transform: rotateY(-90deg) translateZ(var(--cube-half)); }
.side-cube__face--top    { transform: rotateX(90deg) translateZ(var(--cube-half)); }
.side-cube__face--bottom { transform: rotateX(-90deg) translateZ(var(--cube-half)); }

/* Les lamelles. Mesuré sur les sommets de cube.svg : la marge en bout, la
   largeur d'une bande et l'espace entre deux bandes sont égaux — la face se
   divise en 11 parts (marge, 5 bandes, 4 espaces, marge). Barres pleines
   plutôt qu'un dégradé : une fois la face inclinée, des aplats gardent des
   bords nets là où une texture de dégradé se réechantillonne et s'empâte. */
.side-cube__face--top i,
.side-cube__face--bottom i {
  position: absolute;
  left: 0;
  right: 0;
  height: 9.0909%;
  background: var(--ink);
}
.side-cube__face i:nth-child(1) { top: 9.0909%; }
.side-cube__face i:nth-child(2) { top: 27.2727%; }
.side-cube__face i:nth-child(3) { top: 45.4545%; }
.side-cube__face i:nth-child(4) { top: 63.6364%; }
.side-cube__face i:nth-child(5) { top: 81.8182%; }

/* ---------- Grille ---------- */

.main {
  flex: 1 0 auto;
  padding: 5px 5px 5px calc(var(--side) + 12px);
  transition: padding .6s var(--ease-out);
}

/* ---------- Mode « Plein » ---------- */

html.is-full .side-retract {
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
}
html.is-full .main { padding: 0; }

/* ---------- Mode « Plein » ---------- */

.plein { position: relative; }
.plein__stage { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; background: #000; }
.plein__pair { --r: 100%; position: absolute; inset: 0; display: flex; }
.plein__pair:first-child { --r: 0%; }
/* Seul le projet affiché reçoit le clic (main.js pose .is-on) */
.plein__pair { pointer-events: none; }
.plein__pair.is-on { pointer-events: auto; }
.plein__img { position: relative; flex: 1 1 50%; min-width: 0; overflow: hidden; }
.plein__img img { width: 100%; height: 100%; object-fit: cover; }
.plein__img--a { clip-path: inset(0 0 var(--r) 0); }
.plein__img--b { clip-path: inset(var(--r) 0 0 0); }

.plein__caps {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  color: #fff;
  font-size: 14px;
  line-height: 18.2px;
  letter-spacing: .02em;
  pointer-events: none;
}
.plein__cap {
  grid-area: 1 / 1;
  position: relative;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .28s cubic-bezier(.215, .61, .355, 1);
}
.plein__cap.is-on { opacity: 1; }
.plein__num { position: absolute; left: 282px; top: 18.2px; }

/* Entrée dans le mode : le premier projet s'ouvre comme les volets de
   l'écran d'accueil (1,54 s, gauche vers le haut, droite vers le bas). */
@keyframes plein-a { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes plein-b { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.plein.is-entering .plein__pair:first-child .plein__img--a { animation: plein-a 1.54s cubic-bezier(.86, 0, .07, 1) both; }
.plein.is-entering .plein__pair:first-child .plein__img--b { animation: plein-b 1.54s cubic-bezier(.86, 0, .07, 1) both; }

/* Au-dessus des photos, les commandes restantes s'inversent pour rester
   lisibles quelle que soit l'image. */
html.is-full .view-toggle,
html.is-full .menu-btn { mix-blend-mode: difference; }
/* La colonne .side est fixe avec un z-index : elle forme un groupe isolé, et le
   « difference » du sélecteur ne voyait que son fond transparent — « Plein »
   restait blanc sur les photos claires. C'est donc la colonne entière qui
   s'inverse (en mode Plein, elle ne montre plus que ce sélecteur). */
html.is-full .side { mix-blend-mode: difference; }
html.is-full .view-toggle [aria-pressed="true"] .roll,
html.is-full .menu-btn .roll { --c1: #fff; --c2: #fff; }
html.is-full .view-toggle [aria-pressed="false"] .roll { --c1: #8c8c8c; --c2: #fff; }

/* La scène mesure 100lvh, la fenêtre barre d'adresse repliée (main.js lit la
   même mesure) : sur téléphone, elle ne laisse plus de bande blanche dessous
   quand la barre se replie. Le fond passe au noir et le rebond du bas de page
   est coupé, pour que rien de blanc ne se montre sous les photos. */
html.is-full, html.is-full body { background: #000; }
html.is-full { overscroll-behavior-y: none; }
/* Téléphone : la grille reste cachée jusqu'au passage en Plein (index.html) */
html.plein-au-depart .views > .grid { visibility: hidden; }

/* Le logo de l'en-tête (tablette et téléphone) s'inverse lui aussi, pour
   rester lisible sur n'importe quelle photo. */
html.is-full .m-header { mix-blend-mode: difference; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.is-full .m-header .wordmark__g { color: #fff; }
html.is-full .m-header .wordmark__s { color: #b3b3b3; }

/* ---------- Écran d'accueil ---------- */

.accueil {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  animation: accueil-fin 0s linear 3.2s forwards;
}
html.sans-accueil .accueil { display: none; }
@keyframes accueil-fin { to { visibility: hidden; } }

.accueil__volet {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(50% + 1px);
  background: #000;
  animation: 1.54s cubic-bezier(.86, 0, .07, 1) 1.66s both;
}
.accueil__volet--g { left: 0; animation-name: volet-haut; }
.accueil__volet--d { right: 0; animation-name: volet-bas; }
@keyframes volet-haut { to { transform: translateY(-101%); } }
@keyframes volet-bas { to { transform: translateY(101%); } }

.accueil__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: "Outfit", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 18px;
  letter-spacing: -.013em;
  white-space: nowrap;
  animation: accueil-efface .67s cubic-bezier(.77, 0, .175, 1) 1.66s both;
}
.accueil__logo span {
  color: #fff;
  opacity: 0;
  animation: accueil-mot .62s cubic-bezier(.25, .46, .45, .94) forwards;
}
.accueil__logo span + span { color: #8f8f8a; animation-delay: .2s; }
@keyframes accueil-mot { to { opacity: 1; } }
@keyframes accueil-efface { to { opacity: 0; } }

.views { position: relative; transition: opacity .2s var(--ease); }
.views.is-fading { opacity: 0; }
.grid, .list { transition: opacity .3s var(--ease); }
.is-over { position: absolute; top: 0; left: 0; right: 0; opacity: 0; }
.is-over.is-in { opacity: 1; }
.is-out { opacity: 0; }

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
}

.card {
  position: relative;
  display: block;
  aspect-ratio: 6 / 7;
  overflow: hidden;
  container-type: inline-size;
}
.card__media { position: absolute; inset: 0; }
.card__main {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .25s var(--ease);
}
/* Carte « Von Berg & Cross » : la toile elle-même (Sommer in den Dünen),
   pas une photo de salle. Elle est en paysage dans un cadre portrait ;
   ancrée à gauche pour garder les figures. */
.card[href="/von-berg-cross/"] .card__main { object-position: left center; }
.card--single:hover .card__main,
.card--single:focus-visible .card__main { opacity: 1; }

.card__alt { display: none; }
.card__thumbs {
  position: absolute;
  top: 50%;
  left: 17%;
  right: 17%;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.28cqw;
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.card__thumbs img { width: 100%; aspect-ratio: 8 / 7; object-fit: cover; }

/* Carte « plein cadre » : au survol, une seule image remplace la principale
   en occupant tout le carré (au lieu des deux vignettes côte à côte) */
.card--full-hover .card__thumbs {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: none;
  display: block;
}
/* La maquette est une composition déjà cadrée (les deux écrans posés sur leur
   fond gris) : en « cover » elle est zoomée pour remplir la carte 6/7 et perd
   ses marges, d'où des écrans qui débordent du cadre. En « contain » toute la
   composition tient dans la carte ; le fond reprend le gris de l'image, donc
   le complément sur les côtés ne se voit pas. */
.card--full-hover .card__thumbs { background: #eaeaea; }
.card--full-hover .card__thumbs img { height: 100%; aspect-ratio: auto; object-fit: contain; }

/* Composition « deux écrans » */
.mock { position: absolute; inset: 0; background: #eaeaea; }
.mock__screen {
  position: absolute;
  aspect-ratio: 1440 / 900;
  overflow: hidden;
}
.mock__screen--back  { left: 1.778%;  top: 8.872%;  width: 83%; }
.mock__screen--front { left: 11.833%; top: 41.385%; width: 86.5%; }

/* Variante « monocromo » : composition inversée */
.mock--monocromo .mock__screen--back  { left: 15.222%; }
.mock--monocromo .mock__screen--front { left: 1.667%; }
.mock__screen iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 900px;
  border: 0;
  transform: scale(var(--k, .3));
  transform-origin: 0 0;
  pointer-events: none;
}

/* Maquette portable : photo carrée du MacBook, recadrée en « cover » sur la
   carte (12/13) par un carré centré à la hauteur de la carte. Tout est exprimé
   dans le repère en pixels de la photo, ramené à la taille de la carte par --k.
   Géométrie de l'écran et intégration de la dalle d'affichage. */
.laptop {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
/* MacBook clair */
.laptop--clair {
  --photo: 1600; --ar: 1;
  --pw: 1200; --ph: 778; --dr: 13;
  --m: matrix3d(.97666667, 0, 0, 0, 0, .97686375, 0, 0, 0, 0, 1, 0, 210, 303, 0, 1);
  --nw: 145; --nh: 25;
  background: #c3c3c3;
}
/* gualdi.jpg — 2400 × 2400, MacBook sombre en contre-jour. Le capot est
   légèrement incliné : l'écran n'est pas un rectangle mais un trapèze
   (409,510 · 1936,510 · 1924,1524 · 417,1522), d'où la vraie homographie. */
.laptop--sombre {
  --photo: 2400; --ar: 1;
  --pw: 1520; --ph: 1012; --dr: 20;
  --m: matrix3d(1.00188833, -.00075033, 0, -.00000131, .01275939, 1.01910217, 0, .00001258, 0, 0, 1, 0, 409.02871393, 510.4672777, 0, 1);
  --nw: 158; --nh: 53;
  background: #0d0d0d;
}
/* Intégration de la dalle avec perspective */
.laptop--orchard {
  --photo: 1625; --ar: 1625 / 1600;
  --pw: 1520; --ph: 1012; --dr: 13;
  --m: matrix3d(3.7599711, 1.4795763, 0, .0011333407, -.27996557, 3.9316474, 0, -.00026716821, 0, 0, 1, 0, -859.193, -575.592, 0, 1);
  --nw: 149; --nh: 19;
  background: #f2f2f2;
}
.laptop__inner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  aspect-ratio: var(--ar, 1);
  transform: translateX(-50%);
}
.laptop__photo { width: 100%; height: 100%; }
.laptop__screen {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--photo) * 1px);
  height: calc(var(--photo) * 1px);
  transform-origin: 0 0;
  transform: scale(var(--k, .35));
}
/* La dalle est un rectangle aux dimensions de la page, découpé aux coins
   arrondis, puis projeté sur l'écran de la photo par --m : le découpage suit
   donc la perspective, coins compris. */
.laptop__dalle {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--pw) * 1px);
  height: calc(var(--ph) * 1px);
  overflow: hidden;
  border-radius: calc(var(--dr) * 1px);
  background: #0c0c0c;
  transform-origin: 0 0;
  transform: var(--m);
}
.laptop__dalle iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}
/* Encoche de la dalle, masquée par la page : on la redessine par-dessus, dans
   le repère de la page — elle suit donc l'inclinaison de l'écran */
.laptop__notch {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--nw) * 1px);
  height: calc(var(--nh) * 1px);
  margin-left: calc(var(--nw) * -.5px);
  background: #0c0c0c;
  border-radius: 0 0 calc(var(--nh) * .4px) calc(var(--nh) * .4px);
}

/* Légende en blanc + « difference » : elle s'inverse selon l'image dessous
   et reste lisible sur fond clair comme sur fond sombre */
.card__cap {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 12px;
  line-height: 1.1;
  color: #fff;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.card__row { display: flex; justify-content: space-between; gap: 10px; color: rgba(255, 255, 255, .6); }
.card__year { margin-right: 2px; }
/* L'année ne sert qu'à la légende sur deux lignes des écrans étroits */
.card__num { display: none; }
/* Sans titre propre, le client tient lieu de titre : plein contraste (comme
   .card__cap) plutôt que l'opacité réduite du reste de la ligne */
.card__client--strong { color: #fff; }

@media (hover: hover) {
  .card:hover .card__main { opacity: 0; }
  .card:hover .card__thumbs,
  .card:hover .card__cap { opacity: 1; }
}
.card:focus-visible { outline-offset: -1px; }
.card:focus-visible .card__main { opacity: 0; }
.card:focus-visible .card__thumbs,
.card:focus-visible .card__cap { opacity: 1; }

/* ---------- Liste ---------- */

.list { position: relative; margin-top: -5px; padding-top: 50vh; }
.list__preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 42%;
  height: 48vh;
  overflow: hidden;
}
.list__preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.list__preview img.is-on { opacity: 1; }
.list__rows { display: flex; flex-direction: column; gap: 3px; }
.list.is-enter li { animation: row-in .3s var(--ease) both; animation-delay: calc(120ms + var(--i, 0) * 22ms); }
@keyframes row-in { from { opacity: 0; } }
.row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 3px;
  padding: 0 2px;
  color: var(--grey);
}
.row__b { display: flex; justify-content: space-between; gap: 10px; }
@media (hover: hover) { .row:hover { color: var(--ink); } }
.row:focus-visible { color: var(--ink); }

/* ---------- Menu (desktop : panneau de 300 px) ---------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  visibility: hidden;
  transition: visibility 0s linear .5s;
}
.menu.is-open { visibility: visible; transition-delay: 0s; }
/* Pas d'effet de survol tant que la souris n'a pas bougé après l'ouverture */
.menu.is-fresh .roll > span { transform: none !important; }

.menu__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .8);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.menu.is-open .menu__scrim { opacity: 1; }

.menu__panel {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 300px;
  background: #fff;
  transform: translateY(-100%);
  transition: transform .5s var(--ease-out);
}
.menu.is-open .menu__panel { transform: none; }

.menu__logo { display: none; }
.menu__close { position: absolute; top: 20px; left: 20px; padding: 1px; }

.menu__nav {
  position: absolute;
  left: 20px;
  bottom: 20px;
  max-width: calc(50% - 30px);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.menu__nav a, .menu__links a, .menu__legal a { display: block; }
.menu__nav-sep { margin-left: 32px; }
.menu__nav .roll, .menu__links .roll, .menu__legal .roll { --c1: var(--grey); --c2: var(--ink); }

.menu__contact {
  position: absolute;
  top: 20px;
  left: calc(50% + 5px);
}
.menu__links, .menu__legal { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.menu__legal { margin-top: 20px; }

.menu { --menu-img-w: min(230px, calc(25vw - 110px)); }
.menu__imgs { position: absolute; top: 0; right: 0; bottom: 0; display: flex; }
/* 213 px de large, réduites sous ~1290 px pour laisser la place aux liens de contact */
.menu__imgs img { width: var(--menu-img-w); height: 100%; object-fit: cover; }

/* Mention de copyright : en surimpression, en haut à droite de la dernière image
   (blanc + « difference » pour rester lisible quelle que soit la photo dessous,
   même traitement que .card__cap) */
.menu__copy {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 11px;
  letter-spacing: .02em;
  color: #fff;
  mix-blend-mode: difference;
  white-space: nowrap;
}

/* Onglet Accès Clients : même ligne que les autres onglets, juste avant les photos
   (reprend l'emplacement qu'occupait la mention de copyright) */
.menu__client {
  position: absolute;
  right: calc(2 * var(--menu-img-w) + 20px);
  bottom: 20px;
  white-space: nowrap;
}
.menu__client .roll { --c1: var(--grey); --c2: var(--ink); }

/* ---------- En-tête et pied de page tablette / mobile ---------- */

.m-header { display: none; }

/* ================= Tablette ================= */

@media (max-width: 1199px) {
  html.menu-open { overflow: hidden; }

  .m-header {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 50px;
    z-index: 20;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  /* Filet sous l'en-tête */
  .m-header::after {
    content: "";
    position: absolute;
    left: 10px; right: 10px; bottom: 0;
    height: 1px;
    background: rgba(255, 255, 255, .1);
  }
  .m-header__logo { position: absolute; top: 22px; left: 11px; }

  .menu-btn { left: auto; right: 10px; }

  .side { position: absolute; bottom: auto; width: 100%; height: 0; z-index: 5; }
  .side-tagline {
    top: 68px;
    right: 10px;
    bottom: auto;
    max-width: none;
    font-size: 18px;
    line-height: 1.1;
  }
  .view-toggle { top: 140px; left: auto; right: 10px; }
  .side-foot { display: none; }

  .cats { top: 140px; right: auto; }
  .cats__title { margin-bottom: calc(28px - 1.3em); }

  .main { padding: 296px 10px 0; }

  .grid { display: block; }
  .card { aspect-ratio: auto; overflow: visible; margin-bottom: 24px; }
  .card__media {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
  }
  .card__alt, .card__main {
    display: block;
    position: static;
    width: 100%;
    height: calc(60cqw - 44px);
    object-fit: cover;
  }
  .card__main, .card:hover .card__main, .card:focus-visible .card__main { opacity: 1; }
  /* Spécificité : sans le sélecteur complet, cette règle perd face à
     « .card--full-hover .card__thumbs » (2 classes) définie hors media query,
     et les cartes full-hover (Biostem, Studio 47…) gardent leur vignette
     affichée, dimensionnée sur la hauteur de la carte au lieu d'être masquée. */
  .card__thumbs, .card--full-hover .card__thumbs { display: none; }
  .card__cap {
    position: static;
    line-height: inherit;
    color: var(--ink);
    mix-blend-mode: normal;
    opacity: 1;
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  /* Légende sur deux lignes */
  .card__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 10px;
    color: var(--grey);
  }
  .card__client--strong { grid-column: 1 / -1; color: var(--ink); }
  .card__year { margin-right: 0; }
  .card__num { display: block; margin-right: 2px; }

  .list { padding-top: 13px; border-top: 1px solid var(--line); }
  .list__preview { display: none; }
  .list__rows { gap: 5px; }
  .row { color: var(--ink); }

  /* Bas de la grille : l'espace que laissait le pied de page, retiré */
  .main { padding-bottom: 40px; }

}

/* ================= Mobile ================= */

@media (max-width: 809px) {
  body { font-size: 12px; }

  /* Mode Plein mobile */
  .plein__pair { flex-direction: column-reverse; }
  /* Sur téléphone, l'accueil n'a que le mode Plein : pas de sélecteur. */
  .view-toggle { display: none; }
  .plein__caps {
    top: auto;
    bottom: calc(50% + 24px);
    transform: none;
    font-size: 12px;
    line-height: 16px;
  }
  .plein__num { display: none; }
  html.is-full .side { position: fixed; }
  .accueil__logo { font-size: 16px; line-height: 16px; }
  .main { padding-top: 292px; }
  .card__alt, .card__main { height: auto; aspect-ratio: 5 / 6; }

  /* Masquage de l'accroche mobile */
  .side-tagline {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* Positionnement des filtres */
  .cats {
    top: 140px;
    height: 137px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .cats__title { margin-bottom: 0; }
  .filters { gap: 0 8px; padding-right: 10px; }

}

/* ================= Menu tablette et mobile ================= */

.menu__cube, .menu__tagline { display: none; }
/* « .menu » en tête : sans lui, « .menu__nav a { display: block } » l'emporte */
.menu .menu__nav-discuter, .menu .menu__legal-client { display: none; }

@media (max-width: 1199px) {
  /* Logo mobile */
  .m-header__logo, .menu__logo { font-size: 21px; line-height: 21px; }
  .m-header__logo { top: 20px; }

  .menu__scrim { display: none; }
  .menu__panel {
    height: 100vh;
    height: 100dvh;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 50px auto minmax(34px, 1fr) auto auto;
    grid-template-areas:
      "top     top"
      "cube    tagline"
      ".       ."
      "nav     nav"
      "contact contact";
    column-gap: 10px;
    padding: 0 10px calc(16px + env(safe-area-inset-bottom));
    overflow-y: auto;
    scrollbar-width: none;
    transform: none;
    opacity: 0;
    /* Fondu seul, 440 ms, lent aux deux bouts ; rien ne bouge dans le panneau */
    transition: opacity .44s cubic-bezier(.37, 0, .63, 1);
  }
  .menu__panel::-webkit-scrollbar { display: none; }
  .menu.is-open .menu__panel { opacity: 1; }

  /* En-tête du panneau : mêmes places que l'en-tête de page, rien ne saute */
  .menu__top { grid-area: top; position: relative; margin: 0 -10px; }
  .menu__logo { display: block; position: absolute; top: 20px; left: 11px; }
  .menu__close { top: 20px; left: auto; right: 10px; }

  /* Le cube et la phrase, face à face, 55 px sous l'en-tête */
  .menu__cube {
    grid-area: cube;
    display: block;
    --cube-k: .13;
    width: 34px;
    height: 39px;
    margin-top: 55px;
  }
  /* Le H1 de l'accueil (« Studio de design global & d'acquisition
     stratégique »), aligné à droite en face du cube */
  .menu__tagline {
    grid-area: tagline;
    display: block;
    margin-top: 55px;
    text-align: right;
    font-family: "Outfit", "Segoe UI", system-ui, sans-serif;
    font-size: clamp(16px, 4.6vw, 21px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.025em;
    color: var(--ink);
  }

  /* Les onglets : en grand, un filet sous chacun ; « Discuter d'un projet »
     est le dernier. Accès Clients descend en petit avec les mentions. */
  .menu__nav {
    grid-area: nav;
    position: static;
    max-width: none;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    padding: 0;
  }
  .menu__nav a,
  .menu__client {
    display: block;
    padding: 7px 0 8px;
    border-bottom: 1px solid var(--grey-2);
    font-size: 21px;
    line-height: 1.3;
    letter-spacing: -.01em;
  }
  .menu__nav-sep { margin: 0; }
  .menu .menu__nav-discuter, .menu .menu__legal-client { display: block; }
  .menu__client, .menu .menu__links-discuter { display: none; }
  .menu__nav .roll, .menu__client .roll { --c1: var(--ink); --c2: var(--grey); }

  /* Les contacts, en petit tout en bas : écrire à gauche, mentions à droite */
  .menu__contact {
    grid-area: contact;
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 10px;
    padding: 34px 0 0;
    border: 0;
  }
  .menu__links, .menu__legal { gap: 2px; margin: 0; }
  .menu__links a, .menu__legal a { height: auto; font-size: 12px; line-height: 16px; }
  .menu__links .roll, .menu__legal .roll { --c1: #6f6f6f; --c2: var(--ink); }

  .menu__imgs { display: none; }

  /* Fond sombre du panneau mobile */
  .menu__panel { background: #000; color: #fff; }
  .menu__logo .wordmark__g { color: #fff; }
  .menu__logo .wordmark__s { color: #9c9c9c; }
  .menu__close .roll { --c1: #fff; --c2: #8c8c8c; }
  .menu__cube { filter: invert(1); }
  .menu__tagline { color: #fff; }
  .menu__tagline-muted { color: #8c8c8c; }
  .menu__nav a, .menu__client { border-bottom-color: rgba(255, 255, 255, .28); }
  .menu__nav .roll, .menu__client .roll { --c1: #fff; --c2: #8c8c8c; }
  .menu__links .roll, .menu__legal .roll { --c1: rgba(255, 255, 255, .62); --c2: #fff; }
}

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