/* ================================================================
   INFINITY' PARTNERS
   Ingénierie & entreprise générale du bâtiment
   Genève · Monaco · France
   ================================================================ */

/* ── POLICES HÉBERGÉES LOCALEMENT ──────────────────────────────
   Jost et Newsreader (charte p. 11), servies par le site lui-même :
   une requête tierce en moins, aucune adresse IP de visiteur envoyée
   à Google, et un rendu identique même hors ligne. */

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/jost-normal-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/jost-normal-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jost-normal-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jost-normal-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jost-normal-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jost-normal-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/newsreader-italic-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/newsreader-italic-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/newsreader-normal-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/newsreader-normal-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/newsreader-normal-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/newsreader-normal-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

:root {
  /* ── Charte graphique Infinity Partners — v1.0, aout 2026 ───── */
  --calcaire:  #F4EFE9;   /* la lumiere  — fond dominant */
  --pierre:    #EDE7DF;   /* second fond clair */
  --cacao:     #261D12;   /* la profondeur — fond des bandes, texte */
  --brun:      #5E401C;   /* brun cacao */
  --or-brule:  #7A5320;   /* accent : capitales d'etiquette et filets */
  --or-signe:  #9C6F2C;   /* or moyen : ne porte jamais de texte */
  --laiton:    #BC9E55;   /* memes roles que l'or brule, sur fond sombre */

  /* ── Roles ──────────────────────────────────────────────────── */
  --paper:      var(--calcaire);
  --paper-2:    var(--pierre);
  --ink:        var(--cacao);
  --ink-soft:   #6E6154;   /* gris chaud — ton derive, hors charte */
  --brass:      var(--or-brule);
  --brass-lt:   var(--laiton);
  --line:       rgba(38, 29, 18, 0.14);
  --line-light: rgba(244, 239, 233, 0.20);

  /* Charte p. 11 — Newsreader porte les titres et les recits,
     Jost les capitales d'etiquette, la navigation et les chiffres.
     Jamais de gras, jamais d'italique en lineale. */
  --display: 'Newsreader', 'Times New Roman', serif;
  --sans:    'Jost', -apple-system, 'Helvetica Neue', system-ui, sans-serif;

  --max:     1400px;
  --gutter:  clamp(20px, 4.5vw, 76px);
  --pad-t:   clamp(96px, 12vw, 200px);
  --pad-b:   clamp(72px, 8vw, 132px);
}

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.68;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
::selection { background: var(--cacao); color: var(--paper); }

/* ── TYPOGRAPHIE ──────────────────────────────────────────────── */
/* Echelle recalibree pour Newsreader : la police est nettement plus
   large qu'Instrument Serif, les corps baissent d'environ 18 %.
   Graisses selon la charte : titre 1 en 300, titre 2 en 400. */
.d1x { font-family: var(--display); font-weight: 300; line-height: 1.04; letter-spacing: -0.012em; }

.t-hero    { font-family: var(--display); font-weight: 300; font-size: clamp(42px, 7.4vw, 118px); line-height: 1.00; letter-spacing: -0.018em; }
.t-page    { font-family: var(--display); font-weight: 300; font-size: clamp(35px, 5.7vw, 86px);  line-height: 1.04; letter-spacing: -0.016em; }
.t-1       { font-family: var(--display); font-weight: 300; font-size: clamp(28px, 3.8vw, 55px);  line-height: 1.12; letter-spacing: -0.012em; }
.t-2       { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.4vw, 33px);  line-height: 1.2;  letter-spacing: -0.006em; }
.t-3       { font-family: var(--display); font-weight: 400; font-size: clamp(18px, 1.6vw, 23px);  line-height: 1.26; }
.t-hero em, .t-page em, .t-1 em, .t-2 em, .t-3 em { font-style: italic; }

.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--brass);
}

.meta {
  font-family: var(--sans);
  font-size: 10px; font-weight: 400;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-soft);
}

.body { font-size: 16px; line-height: 1.72; color: var(--ink-soft); max-width: 52ch; }
.body + .body { margin-top: 14px; }
.lead { font-size: 18px; line-height: 1.64; color: var(--ink); max-width: 46ch; }

.hair { height: 1px; background: var(--line); width: 100%; }

/* ── GRILLE ÉDITORIALE ────────────────────────────────────────── */
.band     { padding: var(--pad-t) var(--gutter) var(--pad-b); }
.band.tight { padding-top: clamp(64px, 7vw, 110px); }
.paper    { background: var(--paper); }
.paper-2  { background: var(--paper-2); }
.dark     { background: var(--cacao); color: var(--paper); }
.dark .body   { color: rgba(244,239,233,0.64); }
.dark .lead   { color: rgba(244,239,233,0.88); }
.dark .meta   { color: rgba(244,239,233,0.56); }
.dark .eyebrow{ color: var(--brass-lt); }
.dark .hair   { background: var(--line-light); }

.wrap { max-width: var(--max); margin-inline: auto; }

/* colonne d'entête décalée : label à gauche, propos à droite */
.ed-head {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
}
.ed-head > :first-child { padding-top: 10px; }

/* décalage du contenu dans la colonne de droite */
.offset-r { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(24px, 4vw, 72px); }
.offset-r > :first-child { display: none; }
@media (min-width: 900px) { .offset-r > :first-child { display: block; } }

/* ── NAVIGATION ───────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--gutter);
  transition: background .5s ease, padding .5s ease, border-color .5s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(244,239,233,0.94);
  backdrop-filter: blur(12px);
  padding-block: 13px;
  border-bottom-color: var(--line);
}

/* Verrouillage horizontal du logotype.
   Le monogramme iP n'est pas carre : il mesure 1,218 de large pour 1 de
   haut. Largeur et hauteur se reglent donc separement, sans quoi le
   signe se deforme. L'ecart signe / lettrage vaut un demi-signe. */
.brand { display: flex; align-items: center; gap: 16px; }
.brand-sign {
  flex: 0 0 auto; width: 40px; height: 33px;
  background: url('../images/logo-mark-dark.svg') center / contain no-repeat;
  transition: background-image .4s ease;
}
.brand-word { display: flex; flex-direction: column; gap: 4px; }
.brand-word span {
  font-family: var(--sans); font-weight: 400; line-height: 1;
  text-transform: uppercase; white-space: nowrap;
}
.b1 { font-size: 13px; letter-spacing: 0.265em; }
.b2 { font-size: 8.5px; letter-spacing: 0.545em; color: var(--brass); }

.links { display: flex; align-items: center; gap: clamp(12px, 1.5vw, 24px); }
.links a {
  font-family: var(--sans); font-size: 10px; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding-block: 4px; position: relative; transition: opacity .3s;
}
.links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor; transform: scaleX(0);
  transform-origin: left; transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.links a:hover::after, .links a.on::after { transform: scaleX(1); }

.lang { display: flex; gap: 7px; align-items: center; margin-left: 6px; padding-left: 16px; position: relative; }
.lang::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background: currentColor; opacity: 0.25; }
.lang a { font-size: 10px; letter-spacing: 0.08em; opacity: 0.45; }
.lang a.on { opacity: 1; }
.lang a::after { display: none; }

/* état sur photo */
.nav.over { color: #fff; }
.nav.over .links a { color: #fff; }
/* sur photographie, le signe se pose dans son carre clair, jamais detoure */
.nav.over .brand-sign { background-image: url('../images/logo-mark-light.svg'); }
/* sur photographie le laiton de la charte tombe sous le seuil de
   lisibilite des qu'un ciel clair passe derriere : on l'eclaircit,
   et il reprend sa valeur de charte des que le fond redevient plein */
.nav.over .b2 { color: #DCC18A; }
/* sur photographie le lettrage porte le meme voile que le titre du hero,
   sans quoi il se perd sur un ciel clair. Le signe n'etant plus pose
   dans un carre plein, il porte le meme voile. */
.nav.over .brand-word { text-shadow: 0 1px 18px rgba(38,29,18,0.6); }
.nav.over .brand-sign { filter: drop-shadow(0 1px 12px rgba(38,29,18,0.55)); }
.nav.over.scrolled .brand-word { text-shadow: none; }
.nav.over.scrolled .brand-sign { filter: none; }
.nav.over.scrolled { color: var(--ink); }
.nav.over.scrolled .links a { color: var(--ink); }
.nav.over.scrolled .brand-sign { background-image: url('../images/logo-mark-dark.svg'); }
.nav.over.scrolled .b2 { color: var(--brass); }
.nav:not(.over) { color: var(--ink); }

.burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 4px; color: inherit; }
.burger span { display: block; width: 22px; height: 1px; background: currentColor; transition: transform .35s, opacity .25s; }

/* ── HERO ─────────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end;
  padding: 140px var(--gutter) clamp(38px, 5vw, 64px);
  overflow: hidden;
}
.hero-bg { position: absolute; inset: -8% 0 -8% 0; background-size: cover; background-position: center; will-change: transform; }
.hero-ov {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(38,29,18,0.86) 0%, rgba(38,29,18,0.48) 34%, rgba(38,29,18,0.24) 62%, rgba(38,29,18,0.46) 100%);
}
.hero-in {
  text-shadow: 0 1px 30px rgba(38,29,18,0.45);
  position: relative; z-index: 2; width: 100%; max-width: var(--max); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0,8fr) minmax(0,4fr);
  gap: 32px; align-items: end;
  color: #fff;
}
.hero-in .eyebrow { color: rgba(255,255,255,0.72); margin-bottom: 22px; }
.hero-in .t-hero { color: #fff; }
.hero-side { text-align: right; padding-bottom: 10px; }
.hero-side .meta { color: rgba(255,255,255,0.66); display: block; }
.hero-side .actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 22px; }

.scroll-cue {
  position: absolute; left: var(--gutter); bottom: clamp(38px, 5vw, 64px); z-index: 3;
  display: none;
}

/* ── HERO PAGE ────────────────────────────────────────────────── */
.phero {
  position: relative; min-height: 62svh;
  display: flex; align-items: flex-end;
  padding: 150px var(--gutter) clamp(34px, 4vw, 58px);
  overflow: hidden;
}
.phero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.phero-ov { position: absolute; inset: 0; background: linear-gradient(to top, rgba(38,29,18,0.82) 0%, rgba(38,29,18,0.42) 50%, rgba(38,29,18,0.26) 100%); }
.phero-in { position: relative; z-index: 2; width: 100%; max-width: var(--max); margin-inline: auto; color: #fff; text-shadow: 0 1px 30px rgba(38,29,18,0.45); }
.phero-in .eyebrow { color: rgba(255,255,255,0.7); margin-bottom: 18px; }
.phero-in .t-page { color: #fff; }

/* ── IMAGE PLEINE LARGEUR ─────────────────────────────────────── */
.plate { position: relative; overflow: hidden; }
.plate img { width: 100%; height: clamp(420px, 78svh, 860px); object-fit: cover; }
.plate-cap {
  position: absolute; left: var(--gutter); bottom: clamp(24px, 3vw, 44px); z-index: 2;
  color: #fff; max-width: 640px; text-shadow: 0 1px 26px rgba(38,29,18,0.5);
}
.plate-cap .eyebrow { color: rgba(255,255,255,0.72); margin-bottom: 12px; }
.plate-ov { position: absolute; inset: 0; background: linear-gradient(to top, rgba(38,29,18,0.80) 0%, rgba(38,29,18,0.34) 38%, rgba(38,29,18,0.06) 78%, transparent 100%); }

/* ── DUO TEXTE / IMAGE ────────────────────────────────────────── */
.duo { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.duo-img { overflow: hidden; }
.duo-img img { width: 100%; height: 100%; min-height: 62svh; object-fit: cover; transition: transform 1.6s cubic-bezier(.16,1,.3,1); }
.duo-img.rv img { transform: scale(1.06); }
.duo-img.rv.in img { transform: scale(1); }
.duo-txt {
  padding: clamp(56px, 7vw, 120px) clamp(28px, 5vw, 96px);
  display: flex; flex-direction: column; justify-content: center;
}
.duo-txt .eyebrow { margin-bottom: 22px; }
.duo-txt .t-1 { margin-bottom: 26px; }
.duo.flip .duo-img { order: 2; }

/* ── LISTE NUMÉROTÉE (expertises, phases) ─────────────────────── */
.rows { border-top: 1px solid var(--line); }
.dark .rows { border-color: var(--line-light); }

.row {
  display: grid;
  grid-template-columns: 64px minmax(0, 3.4fr) minmax(0, 6fr);
  gap: clamp(16px, 3vw, 56px);
  padding: clamp(26px, 3vw, 44px) 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.dark .row { border-color: var(--line-light); }
.row-n { font-family: var(--display); font-size: 15px; color: var(--brass); letter-spacing: 0.04em; }
.dark .row-n { color: var(--brass-lt); }
.row-sub { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.row-sub span { font-family: var(--sans); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-soft); }
.dark .row-sub span { color: rgba(244,239,233,0.57); }


/* ── BLOC LATÉRAL : texte + image contenue ────────────────────── */
.side {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
  max-width: var(--max); margin-inline: auto;
}
.side.flip > .side-txt { order: 2; }
.side.flip > .side-img { order: 1; }
.side-img { position: relative; overflow: hidden; max-width: 520px; width: 100%; }
.side.flip .side-img { justify-self: start; }
.side:not(.flip) .side-img { justify-self: end; }
.side-img img { width: 100%; height: auto; display: block; }
.side-img figcaption {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft); margin-top: 10px; text-align: center;
}
.dark .side-img figcaption { color: rgba(244,239,233,0.56); }
.side-stack { display: grid; gap: clamp(12px, 1.4vw, 22px); }

/* listes reprises du site d'origine */
.ul-mark { margin-top: 16px; }
.ul-mark li {
  position: relative; padding-left: 20px; margin-bottom: 10px;
  font-size: 15px; line-height: 1.72; color: var(--ink-soft); max-width: 60ch;
}
.ul-mark li::before {
  content: ''; position: absolute; left: 0; top: 11px;
  width: 8px; height: 1px; background: var(--brass);
}
.ul-mark li strong { color: var(--ink); font-weight: 500; }
.dark .ul-mark li { color: rgba(244,239,233,0.64); }
.dark .ul-mark li strong { color: var(--calcaire); }
.ul-mark .sub { font-family: var(--display); font-size: 21px; color: var(--ink); display: block; margin-bottom: 4px; }
.dark .ul-mark .sub { color: var(--calcaire); }

/* ── GALERIE ──────────────────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(10px, 1vw, 18px); }
.tile { position: relative; overflow: hidden; background: var(--paper-2); display: block; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.16,1,.3,1); }
.tile:hover img { transform: scale(1.04); }
.tile figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 24px; color: #fff;
  background: linear-gradient(to top, rgba(38,29,18,0.78), transparent);
}
.tile figcaption .t-3 { color: #fff; }
.tile figcaption .meta { color: rgba(255,255,255,0.68); display: block; margin-bottom: 5px; }
.c12 { grid-column: span 12; aspect-ratio: 21/9; }
.c8  { grid-column: span 8;  aspect-ratio: 8/5; }
.c6  { grid-column: span 6;  aspect-ratio: 3/2; }
.c4  { grid-column: span 4;  aspect-ratio: 4/5; }

/* ── TERRITOIRES ──────────────────────────────────────────────── */
.places { display: flex; flex-wrap: wrap; gap: 2px 0; max-width: 940px; }
.places span { white-space: nowrap; font-family: var(--display); font-size: clamp(20px, 2.1vw, 30px); line-height: 1.32; }
.places span::after { content: '·'; padding-inline: 12px; color: var(--brass); }
.places span:last-child::after { content: ''; padding: 0; }


/* ── BANDEAU DÉFILANT ─────────────────────────────────────────── */
.marquee { overflow: hidden; padding-block: clamp(28px, 3.4vw, 52px); border-block: 1px solid var(--line); }
.dark .marquee, .marquee.on-dark { border-color: var(--line-light); }
.marquee-track {
  display: flex; width: max-content;
  animation: slide 64s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track > span {
  display: inline-flex; align-items: center;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(26px, 3.4vw, 52px); line-height: 1.1;
  white-space: nowrap; padding-inline: 0;
}
.marquee-track > span::after {
  content: '·'; color: var(--brass); padding-inline: clamp(18px, 2.4vw, 40px); font-size: 0.7em;
}
@keyframes slide { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* ── DÉVOILEMENT DES TITRES PAR MASQUE ────────────────────────── */
.mask { clip-path: inset(0 0 105% 0); transition: clip-path 1.15s cubic-bezier(.16,1,.3,1); }
.mask.in { clip-path: inset(0 0 -12% 0); }

/* ── COMPTEUR ─────────────────────────────────────────────────── */
.count { font-variant-numeric: tabular-nums; }

/* ── JOURNAL ──────────────────────────────────────────────────── */
.post-head { max-width: 780px; }
.post-body { max-width: 660px; }
.post-body h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(23px, 2.2vw, 31px); line-height: 1.2;
  margin: 46px 0 14px;
}
.post-body p { color: var(--ink-soft); line-height: 1.78; margin-bottom: 14px; }
.post-body p.intro { color: var(--ink); font-size: 17px; line-height: 1.62; margin-bottom: 28px; }

.post-list .row h3 { max-width: 22ch; }

/* ── CHIFFRE ──────────────────────────────────────────────────── */
.figure { font-family: var(--display); font-size: clamp(88px, 15vw, 220px); line-height: 0.82; letter-spacing: -0.04em; }


/* ── RUPTURES DE RYTHME ───────────────────────────────────────── */
/* Le site tenait sur un seul gabarit : etiquette a gauche, contenu a
   droite, le tout dans une boite centree de 1400 px. Trois gestes
   viennent rompre cette regularite, employes avec parcimonie. */

/* 1. L'image sort du cadre. Le texte reste sur la marge habituelle,
      la photo file jusqu'au bord de l'ecran. Le pourcentage se calcule
      sur la largeur du corps, pas sur 100vw : la barre de defilement
      ne fausse pas l'alignement. */
.band.bleed-r { padding-right: 0; padding-left: max(var(--gutter), calc((100% - var(--max)) / 2)); }
.band.bleed-l { padding-left: 0;  padding-right: max(var(--gutter), calc((100% - var(--max)) / 2)); }
.bleed {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(30px, 4.5vw, 84px);
}
.band.bleed-l .bleed { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.band.bleed-l .bleed-txt { order: 2; }
.band.bleed-l .bleed-img { order: 1; }
.bleed-img { overflow: hidden; }
.bleed-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bleed-img.tall img { aspect-ratio: 3 / 4; }
.bleed-img.wide img { aspect-ratio: 16 / 9; }
.bleed-img.square img { aspect-ratio: 1 / 1; }
/* la colonne de texte est plus etroite qu'ailleurs : le titre suit */
.bleed-txt { max-width: 46ch; }
.bleed-txt .t-1 { font-size: clamp(30px, 3.2vw, 48px); }

/* 2. Rupture d'echelle : une phrase, centree, aucune etiquette, du vide.
      Un seul moment centre dans un site entierement aligne a gauche. */
.statement { padding-block: clamp(84px, 12vw, 190px); text-align: center; }
.statement .rule-c { width: 40px; height: 1px; background: var(--brass); margin: 0 auto clamp(28px, 3.6vw, 52px); }
.dark .statement .rule-c { background: var(--brass-lt); }
.statement p {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(27px, 3.4vw, 50px); line-height: 1.24; letter-spacing: -0.015em;
  max-width: 24ch; margin-inline: auto; text-wrap: balance;
}
.statement p em { font-style: italic; }

/* 3. Variante d'en-tete : le titre et le corps cote a cote, en pied
      de ligne, au lieu de l'etiquette a gauche. */
.ed-head.split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 96px); align-items: end; }
.ed-head.split > :first-child { padding-top: 0; }

/* ── PILIERS ──────────────────────────────────────────────────── */
/* Trois colonnes, un filet en tete, aucun cadre : le contenu tient
   par l'alignement, pas par une boite. */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(24px, 3.4vw, 64px); }
.pillar { border-top: 1px solid var(--line); padding-top: 22px; text-align: center; }
.dark .pillar { border-color: var(--line-light); }
.pillar h3 { font-family: var(--display); font-weight: 400; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.16; }
.pillar h3 + p { margin-top: 12px; }
.pillar p { font-size: 14px; line-height: 1.72; color: var(--ink-soft); }
/* les trois etapes du metier, reduites a leur intitule : un chiffre,
   un titre, rien d'autre. Le detail vit sur la page Methodes. */
.pillar .row-n { display: block; margin-bottom: 14px; font-family: var(--display); font-size: 14px; color: var(--brass); letter-spacing: .04em; }

/* ── APERCU DES REALISATIONS ──────────────────────────────────── */
/* Volontairement distinct de .tile : ces vignettes sont des liens
   vers la page Realisations, elles n'ouvrent pas la visionneuse. */
.works { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(16px, 2.4vw, 40px); }
.work { position: relative; overflow: hidden; background: var(--paper-2); }
.work > a { display: block; position: relative; }
.work img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.4s cubic-bezier(.16,1,.3,1); }
.work:hover img { transform: scale(1.04); }
.work figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 26px 24px; color: #fff;
  /* le voile doit couvrir les deux lignes : l'or sur une plage de sable
     clair devient illisible des que le degrade s'arrete trop bas. */
  background: linear-gradient(to top,
    rgba(38,29,18,0.94) 0%, rgba(38,29,18,0.82) 34%,
    rgba(38,29,18,0.40) 68%, transparent 100%);
  text-shadow: 0 1px 16px rgba(38,29,18,0.6);
  pointer-events: none;
}
.work figcaption .meta { color: var(--laiton); display: block; margin-bottom: 6px; }
.work figcaption .t-3 { color: #fff; }

/* ── FICHE PROJET / GALERIES AVANT-APRÈS ──────────────────────── */
.proj { padding: clamp(56px, 6vw, 96px) var(--gutter); }
.proj-head { max-width: var(--max); margin: 0 auto clamp(30px, 3.4vw, 52px); text-align: center; }
.proj-head .rule-c { width: 46px; height: 1px; background: var(--brass); margin: 20px auto 0; }

.proj-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 26px); max-width: var(--max); margin-inline: auto; align-items: start; }
.proj-cols.solo { grid-template-columns: 1fr; }

.proj-set { padding: clamp(22px, 2.4vw, 34px); }
.proj-set.before { background: var(--cacao); }
.proj-set.after  { background: var(--pierre); }
.proj-set h4 {
  font-family: var(--sans); font-size: 10px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; text-align: center;
  margin-bottom: clamp(16px, 1.8vw, 24px);
}
.proj-set.before h4 { color: var(--calcaire); }
.proj-set.after h4 { color: var(--ink); }

.proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 0.9vw, 14px); }
.proj-cols.solo .proj-grid { grid-template-columns: repeat(4, 1fr); }
.proj-grid figure { margin: 0; aspect-ratio: 3/2; overflow: hidden; background: rgba(38,29,18,0.12); }
.proj-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.16,1,.3,1); }
.proj-grid figure:hover img { transform: scale(1.06); }

/* ── FICHE PROJET ─────────────────────────────────────────────── */
.specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.spec { background: var(--paper); padding: 24px 4px 24px 0; }
.spec dt { font-family: var(--sans); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.spec dd { font-family: var(--display); font-size: 25px; line-height: 1.1; }

/* ── BOUTONS ──────────────────────────────────────────────────── */
.btn, .btn-fill, .btn-light {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px;
  font-family: var(--sans); font-size: 10px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  border: 1px solid currentColor; cursor: pointer;
  transition: background .4s cubic-bezier(.16,1,.3,1), color .4s, border-color .4s;
  white-space: nowrap;
}
.btn { color: var(--ink); }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-light { color: #fff; border-color: rgba(255,255,255,0.45); }
.btn-light:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn-fill { background: var(--cacao); color: var(--paper); border-color: var(--cacao); }
.btn-fill:hover { background: transparent; color: var(--cacao); }
.dark .btn-fill { background: var(--paper); color: var(--cacao); border-color: var(--paper); }
.dark .btn-fill:hover { background: transparent; color: var(--paper); }

.link-u {
  display: inline-block; font-family: var(--sans); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
}

/* ── FORMULAIRE ───────────────────────────────────────────────── */
.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 26px; }
.f-full { grid-column: 1 / -1; }
.f-lab { display: block; font-family: var(--sans); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.f-in, .f-ta, .f-sel {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: 8px 0 11px; font-family: var(--sans); font-size: 15px; color: var(--ink);
  outline: none; border-radius: 0; -webkit-appearance: none; transition: border-color .3s;
}
.f-in::placeholder, .f-ta::placeholder { color: rgba(38,29,18,0.28); }
.f-in:focus, .f-ta:focus, .f-sel:focus { border-bottom-color: var(--cacao); }
.f-ta { resize: vertical; min-height: 118px; }
.f-note { font-size: 12px; color: var(--ink-soft); margin-top: 14px; }

/* ── PAGES LÉGALES ────────────────────────────────────────────── */
.legal h2 { font-family: var(--display); font-size: 27px; font-weight: 400; margin: 40px 0 10px; }
.legal p { color: var(--ink-soft); margin-bottom: 11px; max-width: 62ch; }


/* ── BANDEAU D'APPEL COMPACT ──────────────────────────────────── */
.band.cta-slim { padding-block: clamp(40px, 4.5vw, 68px); }
.cta-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(24px, 4vw, 60px); flex-wrap: wrap;
}
.cta-row .t-2 { font-size: clamp(23px, 2.3vw, 33px); }

@media (max-width: 860px) {
  /* les libelles longs ne tiennent plus sur une ligne : on autorise le
     retour, sinon la colonne pousse la page en largeur sur mobile. */
  .places span { white-space: normal; }
  .places { gap: 0; }
  .places span::after { padding-inline: 9px; }
}

@media (max-width: 700px) {
  .cta-row { flex-direction: column; align-items: flex-start; gap: 22px; }
}

/* ── PIED DE PAGE ─────────────────────────────────────────────── */
footer { background: var(--cacao); color: var(--paper); padding: clamp(64px, 8vw, 110px) var(--gutter) 30px; }
.f-top { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,3fr) minmax(0,4fr); gap: clamp(28px, 4vw, 70px); padding-bottom: 44px; border-bottom: 1px solid var(--line-light); }
.f-mark { display: flex; align-items: center; gap: 26px; }
.f-mark .brand-sign {
  width: 57px; height: 47px;
  background-image: url('../images/logo-mark-light.svg');
}
.f-mark .b1 { font-size: 19px; letter-spacing: 0.265em; color: var(--calcaire); }
.f-mark .b2 { font-size: 12.4px; letter-spacing: 0.545em; color: var(--brass-lt); }
.f-mark .brand-word { gap: 6px; }
.f-col .meta { color: var(--brass-lt); display: block; margin-bottom: 10px; }
.f-col p, .f-col a { font-size: 13px; color: rgba(244,239,233,0.62); line-height: 1.85; }
.f-col a:hover { color: var(--calcaire); }
.f-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 22px 0; border-bottom: 1px solid var(--line-light); }
.f-nav a { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(244,239,233,0.58); }
.f-nav a:hover { color: var(--calcaire); }
.f-bot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; }
.f-bot, .f-bot a { font-size: 11px; color: rgba(244,239,233,0.54); }
.f-bot a:hover { color: rgba(244,239,233,0.72); }
.f-legal { display: flex; gap: 22px; }

/* ── MOUVEMENT : un seul geste, le dévoilement des images ─────── */
/* le masque porte sur l'image, pas sur le conteneur : un élément
   entièrement rogné n'est jamais considéré comme visible par
   IntersectionObserver, le dévoilement ne se déclencherait jamais. */
.rv > img, .rv > picture > img, .rv > a > img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.5s cubic-bezier(.16,1,.3,1), opacity .7s ease, transform 1.1s cubic-bezier(.16,1,.3,1), filter .7s ease;
}
.rv.in > img, .rv.in > picture > img, .rv.in > a > img { clip-path: inset(0 0 0 0); }

.up { opacity: 0; transform: translateY(12px); transition: opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1); }
.up.in { opacity: 1; transform: none; }
.u1 { transition-delay: .08s; } .u2 { transition-delay: .16s; } .u3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .rv, .up, .mask { transition: none; clip-path: none; opacity: 1; transform: none; }
  .marquee-track { animation: none; }
  .duo-img.rv img { transform: none; }
  .hero-bg { transform: none !important; }
}

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .links a { font-size: 9px; letter-spacing: 0.06em; }
  .links { gap: 11px; }
}

@media (max-width: 980px) {
  .marquee-track > span { font-size: 24px; }
  .proj-cols, .proj-cols.solo { grid-template-columns: 1fr; }
  .proj-grid, .proj-cols.solo .proj-grid { grid-template-columns: repeat(2, 1fr); }
  .side, .side.flip { grid-template-columns: 1fr; }
  .side.flip > .side-txt, .side.flip > .side-img { order: 0; }
  .side-img { max-width: 100%; justify-self: stretch !important; }
  .ed-head, .offset-r { grid-template-columns: 1fr; gap: 20px; }
  .offset-r > :first-child { display: none; }
  .hero-in { grid-template-columns: 1fr; }
  .hero-side { text-align: left; }
  .hero-side .actions { justify-content: flex-start; }
  .duo { grid-template-columns: 1fr; }
  .duo.flip .duo-img { order: 0; }
  .duo-img img { min-height: 64vw; }
  .row { grid-template-columns: 40px 1fr; }
  .row > :last-child { grid-column: 2; margin-top: 10px; }
  .c12, .c8, .c6, .c4 { grid-column: span 12; }
  .c4 { aspect-ratio: 4/3; }
  .specs { grid-template-columns: 1fr 1fr; }
  .pillars { grid-template-columns: 1fr; gap: 26px; }
  .band.bleed-r, .band.bleed-l { padding-inline: var(--gutter); }
  .bleed, .band.bleed-l .bleed { grid-template-columns: 1fr; gap: 26px; }
  .band.bleed-l .bleed-txt, .band.bleed-l .bleed-img { order: 0; }
  .ed-head.split { grid-template-columns: 1fr; }
  .works { grid-template-columns: 1fr; }
  .f-top { grid-template-columns: 1fr; }
  .f-grid { grid-template-columns: 1fr; }

  .links { display: none; }
  .links.open {
    display: flex; position: fixed; inset: 0; z-index: 90;
    background: var(--paper); flex-direction: column;
    align-items: flex-start; justify-content: center; gap: 18px;
    padding: 40px var(--gutter);
  }
  .links.open a { font-size: 15px; letter-spacing: 0.04em; color: var(--ink) !important; text-transform: none; font-family: var(--display); }
  .links.open .lang { margin: 14px 0 0; padding: 0; }
  .links.open .lang::before { display: none; }
  .links.open .lang a { font-family: var(--sans); font-size: 11px; text-transform: uppercase; }
  .burger { display: flex; z-index: 110; }
  .burger.open span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
  .burger.open span:nth-child(2) { opacity: 0; }
  .burger.open span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }
}

/* ================================================================
   FINITIONS : transitions, grain, visionneuse, curseur
   ================================================================ */

/* ── TRANSITION DE PAGE ───────────────────────────────────────── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .32s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: vt-in .46s cubic-bezier(0,0,.2,1) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
.nav { view-transition-name: site-nav; }
footer { view-transition-name: site-foot; }

/* ── GRAIN SUR LES BANDES SOMBRES ─────────────────────────────── */
.dark, .proj-set.before, footer, .phero, .hero {
  position: relative;
}
.dark::after, .proj-set.before::after, footer::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  pointer-events: none; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.dark > *, .proj-set.before > *, footer > * { position: relative; z-index: 1; }

/* ── DÉVOILEMENT LIGNE PAR LIGNE ──────────────────────────────── */
.mask.split { clip-path: none; }
.ln { display: block; overflow: hidden; }
.ln > i {
  display: block; font-style: inherit;
  transform: translateY(105%);
  transition: transform 1.05s cubic-bezier(.16,1,.3,1);
}
.mask.split.in .ln > i { transform: translateY(0); }
.mask.split .ln:nth-child(2) > i { transition-delay: .07s; }
.mask.split .ln:nth-child(3) > i { transition-delay: .14s; }
.mask.split .ln:nth-child(4) > i { transition-delay: .21s; }
.mask.split .ln:nth-child(5) > i { transition-delay: .28s; }

/* ── PARALLAXE INTERNE DES IMAGES ─────────────────────────────── */
.px { will-change: transform; }

/* ── ARRIVÉE PROGRESSIVE DES IMAGES ───────────────────────────── */
.proj-grid img, .tile img, .side-img img, .plate img, .duo-img img {
  opacity: 0; transition: opacity .7s ease, transform 1.1s cubic-bezier(.16,1,.3,1), filter .7s ease;
}
.proj-grid img.ld, .tile img.ld, .side-img img.ld, .plate img.ld, .duo-img img.ld { opacity: 1; }

/* ── SURVOL DES VIGNETTES ─────────────────────────────────────── */
.tile figcaption { transform: translateY(8px); opacity: .92; transition: transform .55s cubic-bezier(.16,1,.3,1), opacity .45s ease; }
.tile:hover figcaption { transform: translateY(0); opacity: 1; }
.tile img, .proj-grid img { filter: saturate(1); }
.tile:hover img, .proj-grid figure:hover img { filter: saturate(.82); }

/* ── TITRE DE PROJET COLLANT ──────────────────────────────────── */
@media (min-width: 981px) {
  .proj-head { position: sticky; top: 84px; z-index: 2; }
}

/* ── VISIONNEUSE ──────────────────────────────────────────────── */
.lb {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(38,29,18,0.96);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .4s ease;
  backdrop-filter: blur(4px);
}
.lb.on { opacity: 1; pointer-events: auto; }
.lb img {
  max-width: min(92vw, 1500px); max-height: 84vh; object-fit: contain;
  transform: scale(.97); transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}
.lb.on img { transform: scale(1); }
.lb-bar {
  position: absolute; left: 0; right: 0; bottom: 26px;
  display: flex; align-items: center; justify-content: center; gap: 26px;
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255,255,255,0.6);
}
.lb-cap { color: rgba(244,239,233,0.80); }
.lb-nav, .lb-x {
  position: absolute; background: none; border: 0; cursor: pointer;
  color: rgba(255,255,255,0.6); font-family: var(--display); line-height: 1;
  transition: color .3s ease;
  padding: 18px;
}
.lb-nav:hover, .lb-x:hover { color: var(--calcaire); }
.lb-prev { left: clamp(8px, 2vw, 32px); top: 50%; transform: translateY(-50%); font-size: 40px; }
.lb-next { right: clamp(8px, 2vw, 32px); top: 50%; transform: translateY(-50%); font-size: 40px; }
.lb-x { top: 18px; right: clamp(12px, 2vw, 30px); font-size: 30px; }
body.lb-open { overflow: hidden; }

/* ── CURSEUR ──────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) and (min-width: 981px) {
  .cur {
    position: fixed; top: 0; left: 0; z-index: 998;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--brass); pointer-events: none;
    transform: translate3d(-50%, -50%, 0);
    transition: width .38s cubic-bezier(.16,1,.3,1), height .38s cubic-bezier(.16,1,.3,1),
                background .38s ease, opacity .3s ease;
    display: flex; align-items: center; justify-content: center;
    mix-blend-mode: normal; opacity: 0;
  }
  .cur.ready { opacity: 1; }
  .cur span {
    font-family: var(--sans); font-size: 9px; letter-spacing: 0.18em;
    text-transform: uppercase; color: #fff; opacity: 0; transition: opacity .3s ease;
    white-space: nowrap;
  }
  .cur.zoom { width: 74px; height: 74px; background: rgba(188,158,85,0.82); }
  .cur.zoom span { opacity: 1; }
  .cur.link { width: 30px; height: 30px; background: rgba(188,158,85,0.35); }
}
@media not all and (min-width: 981px) { .cur { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .ln > i { transform: none !important; transition: none; }
  .px { transform: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .proj-grid img, .tile img, .side-img img, .plate img, .duo-img img { opacity: 1; }
}