/* ================================================================
   INFINITY' PARTNERS
   Entreprise générale & maintenance immobilière
   Genève · 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); }

/* Poids ajoutes pour la revision typographique : Newsreader 500 et 600,
   Jost 600. Tires des fontes variables d'origine, memes fichiers, memes
   sous-ensembles que les autres. */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/newsreader-normal-700-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: 700;
  font-display: swap;
  src: url('../fonts/newsreader-normal-700-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: 600;
  font-display: swap;
  src: url('../fonts/newsreader-normal-600-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: 600;
  font-display: swap;
  src: url('../fonts/newsreader-normal-600-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: 600;
  font-display: swap;
  src: url('../fonts/jost-normal-600-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: 600;
  font-display: swap;
  src: url('../fonts/jost-normal-600-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;
}

/* ── 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. */
/* Septembre : tous les titres passent en capitales de lineale claire.
   Jost est deja la lineale de la charte et porte le texte courant, la
   navigation et les etiquettes : le site tient desormais sur une seule
   famille, le serif ne servant plus qu'au logotype. La capitale ne peut
   etre ni calligraphique ni feminine, c'etait la demande.
   L'interlettrage s'ouvre a mesure que le corps baisse : des capitales
   petites et serrees deviennent illisibles. Les grands titres restent en
   300, les petits passent en 400, une graisse maigre a petit corps
   disparaissant sur fond clair. */
.d1x { font-family: var(--sans); font-weight: 300; line-height: 1.20; letter-spacing: -0.004em; }

.t-hero { font-family: var(--sans); font-weight: 400; text-transform: uppercase;
          font-size: clamp(26px, 3.9vw, 58px); line-height: 1.16; letter-spacing: 0.014em; }
.t-page { font-family: var(--sans); font-weight: 400; text-transform: uppercase;
          font-size: clamp(24px, 3.3vw, 50px); line-height: 1.18; letter-spacing: 0.018em; }
/* La capitale est reservee aux titres de hero. En dessous, on ecrit en
   bas de casse : l'interlettrage se referme, une approche calee sur des
   capitales dessert le bas de casse, et les corps remontent, le bas de
   casse occupant moins de place a taille egale. */
.t-1    { font-family: var(--sans); font-weight: 300;
          font-size: clamp(24px, 3.0vw, 44px); line-height: 1.20; letter-spacing: -0.004em; }
.t-2    { font-family: var(--sans); font-weight: 400;
          font-size: clamp(19px, 2.0vw, 28px); line-height: 1.28; letter-spacing: -0.002em; }
.t-3    { font-family: var(--sans); font-weight: 400;
          font-size: clamp(16px, 1.45vw, 21px); line-height: 1.36; letter-spacing: 0; }

/* la reference est monochrome : le mot mis en avant ne prend plus l'or,
   qui servait a compenser l'italique disparue. */
.t-hero em, .t-page em, .t-1 em, .t-2 em, .t-3 em,
.statement p em, .d1x em { font-style: normal; color: inherit; }

.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;
}
/* Le nom de la marque, refait en septembre : la cliente voulait ici le
   dessin de son logotype, un serif gras et contraste, et non plus les deux
   lignes de capitales en lineale. Newsreader etant variable, on l'emploie
   a sa graisse d'affichage. Les deux <span> restent en place, ils passent
   simplement sur une seule ligne et l'apostrophe est posee entre eux. */
.brand-word { display: flex; flex-direction: row; align-items: baseline; gap: 0; }
.brand-word span {
  font-family: var(--display); font-weight: 700; line-height: 1;
  text-transform: none; white-space: nowrap; letter-spacing: -0.012em;
}
.b1 { font-size: 23px; }
.b1::after { content: '\2019'; }
.b2 { font-size: 23px; color: inherit; }

.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 */

/* 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: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); }

/* Deux colonnes de texte suivi, pour un developpement qui ne tient pas
   dans la colonne etroite d'un bloc a fond perdu. */
.deux-col {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(26px, 4vw, 78px); align-items: start;
}
.deux-col .body { max-width: 46ch; }

/* 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(--sans); font-weight: 300;
  font-size: clamp(23px, 2.9vw, 42px); line-height: 1.30; letter-spacing: -0.006em;
  max-width: 24ch; margin-inline: auto; text-wrap: balance;
}
.statement p em { font-style: normal; }

/* 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, .f-mark .b2 { font-size: 33px; color: var(--calcaire); }
.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; }
  .deux-col { grid-template-columns: 1fr; gap: 18px; }
  .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; }
}

/* ── Chantier filmé ────────────────────────────────────────────
   Une vidéo de chantier, prise au téléphone : 480 px de large,
   on ne l'agrandit donc jamais au-dela de sa definition. */
.tournage {
  display: grid; grid-template-columns: minmax(0,1fr) 360px;
  gap: clamp(28px, 4vw, 64px); align-items: center;
}
.tournage figure { margin: 0; }
.tournage video {
  display: block; width: 100%; max-width: 360px; height: auto;
  border-radius: 2px; background: var(--cacao);
}
.tournage figcaption {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-soft); margin-top: 12px;
}
.dark .tournage figcaption { color: rgba(244,239,233,0.62); }
@media (max-width: 860px) {
  .tournage { grid-template-columns: 1fr; gap: 24px; }
  .tournage figure { justify-self: start; }
}

/* ── Page Contact ─────────────────────────────────────────────
   Les coordonnees etaient composees au corps des sous-titres, trop
   gros pour une adresse. Elles descendent au corps du texte courant,
   avec le chiffre en chasse fixe pour que les numeros s'alignent. */
.cont-adr {
  font-family: var(--display); font-size: 17px; line-height: 1.5;
  color: var(--ink); margin: 8px 0 2px;
}
.cont-tel {
  font-family: var(--display); font-size: 17px; line-height: 1.5;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.cont-note {
  font-family: var(--sans); font-size: 13px; line-height: 1.6;
  color: var(--ink-soft); margin-top: 8px; max-width: 30ch;
}

/* ── Realisations : les deux panneaux a la meme hauteur ───────
   Les series avant et apres n'ont pas le meme nombre de photos ;
   sans cela le panneau le plus court s'arrete en cours de route et
   les deux aplats ne s'alignent pas. */
.proj-cols { align-items: stretch; }
.proj-set { display: flex; flex-direction: column; }
.proj-set .proj-grid { margin-block: auto; }   /* le vide se partage haut et bas */