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

/* Le logotype de la marque : capitales a empattements fins, dessinees
   d'apres le logotype fourni par la cliente. Cette fonte ne sert qu'au
   nom de la marque, le reste du site garde Newsreader et Jost. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/cormorant-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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/cormorant-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: 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;
  --logotype: 'Cormorant Garamond', '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(22px, 3.1vw, 46px); line-height: 1.16; letter-spacing: 0.014em; }
.t-page { font-family: var(--sans); font-weight: 400; text-transform: uppercase;
          font-size: clamp(20px, 2.6vw, 39px); 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; }
/* Nouveau signe, septembre : le monogramme IP est en hauteur, 0,763 de
   large pour 1 de haut, la ou l'ancien iP etait couche. Les dimensions
   changent donc de sens. Le fichier est un PNG detoure a trois fois la
   taille d'affichage, pour tenir sur les ecrans fins. */
.brand-sign {
  flex: 0 0 auto; width: 26px; height: 34px;
  background: url('../images/logo-mark-orbrule.png') center / contain no-repeat;
  transition: opacity .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;
  /* l'interlettrage ajoute un blanc apres la derniere capitale : on le
     reprend ici pour que le bloc reste cale sur son bord droit */
  margin-right: -0.24em;
}
.brand-word span {
  font-family: var(--logotype); font-weight: 300; line-height: 1;
  text-transform: uppercase; white-space: nowrap; letter-spacing: 0.24em;
}
.b1 { font-size: 14px; }
/* l'apostrophe du nom courant laisse place a l'espace du logotype */
.b1::after { content: '\2004'; }
.b2 { font-size: 14px; 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 */
/* sur photographie, les hairlines de l'or se perdent des qu'un ciel clair
   passe derriere : le signe y passe en calcaire plein, comme le lettrage
   a cote. L'or reprend sa place sur les aplats sombres. */
.nav.over .brand-sign { background-image: url('../images/logo-mark-calcaire.png'); }
/* 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); }
/* sur fond clair, l'or du logo ne donne que 2,1 de contraste. On garde
   le registre metallique en descendant a l'or brule de la charte, qui
   monte a 5,9 : le signe reste dore a l'oeil et devient lisible. */
.nav.over.scrolled .brand-sign { background-image: url('../images/logo-mark-orbrule.png'); }

.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 ─────────────────────────────────────────────────────
   Le plan est peint dans un canevas par js/parallaxe.js : la scene
   mesure plusieurs hauteurs d'ecran, le hero y reste colle, et le
   defilement choisit l'image. */
.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.52) 0%, rgba(38,29,18,0.20) 34%, rgba(38,29,18,0.04) 62%, rgba(38,29,18,0.18) 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: #fff; margin-bottom: 22px; text-shadow: 0 1px 22px rgba(38,29,18,0.7); }
.hero-in .t-hero { color: #fff; }
.hero-side { text-align: right; padding-bottom: 10px; }
.hero-side .meta { color: rgba(255,255,255,0.86); 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.50) 0%, rgba(38,29,18,0.16) 50%, rgba(38,29,18,0.02) 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: #fff; margin-bottom: 18px; text-shadow: 0 1px 22px rgba(38,29,18,0.7); }
.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: #fff; margin-bottom: 12px; text-shadow: 0 1px 22px rgba(38,29,18,0.7); }
.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: 36px; height: 47px;
  background-image: url('../images/logo-mark-or.png');
}
.f-mark .b1, .f-mark .b2 { font-size: 18px; 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 ───────────────────────────────────────────────── */
/* Le lettrage en capitales espacees occupe plus de place que l'ancien nom
   en bas de casse : les liens et le logotype se resserrent plus tot qu'avant,
   pour que la barre tienne sur une ligne jusqu'au passage au menu deroulant. */
@media (max-width: 1320px) {
  .links a { font-size: 9px; letter-spacing: 0.06em; }
  .links { gap: 11px; }
  .nav .b1, .nav .b2 { font-size: 13px; letter-spacing: 0.2em; }
  .nav .brand { gap: 13px; }
}
@media (max-width: 1180px) {
  .nav .b1, .nav .b2 { font-size: 12px; letter-spacing: 0.16em; }
  .nav .brand { gap: 12px; }
  .nav .brand-sign { width: 22px; height: 29px; }
}

@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;
}

/* Texte d'introduction sous le titre de chaque projet */
.proj-head .proj-intro {
  max-width: 62ch;
  margin: 22px auto 0;
  text-align: center;
}

/* ── Realisations : le projet en pleine largeur ───────────────
   Le panneau apres passe au-dessus, sur toute la largeur : la photo
   du rendu fini ouvre le projet, les autres suivent en trois
   colonnes. Le panneau avant devient une bande de vignettes sous le
   resultat : le chantier documente le projet, il ne se met pas au
   niveau du rendu livre.
   Chaque figure prend le cadre de son image (voir f-portrait et
   f-carre, poses sur les figures dans realisations.html d'apres les
   dimensions reelles des fichiers) : un cadre unique recadrait les
   verticales en plein milieu du sujet, une facade d'immeuble s'y
   retrouvait coupee en bandeau. */
.proj { padding-top: clamp(40px, 4.5vw, 72px); }
.proj-head { position: static; }

.proj-cols { grid-template-columns: 1fr; align-items: start; gap: clamp(18px, 2vw, 30px); }

/* Cadre par orientation, sinon le recadrage rogne le sujet */
.proj-grid figure.f-portrait { aspect-ratio: 3 / 4; }
.proj-grid figure.f-carre { aspect-ratio: 1 / 1; }

/* Le resultat, en tete de projet */
.proj-set.after { order: -1; background: transparent; padding: 0; }
.proj-set.after h4 { display: none; }
.proj-set.after .proj-grid {
  --g: clamp(8px, .9vw, 14px);
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: flex-start; gap: var(--g);
}
.proj-set.after .proj-grid > figure { flex: 0 1 calc((100% - 2 * var(--g)) / 3); }

/* La photo principale : la premiere du panneau apres, ou celle qui
   porte la classe principale dans realisations.html :
   <figure class="rv principale"><img src="images/p-marriott-apres-04.jpg" ...> */
.proj-set.after .proj-grid:not(:has(figure.principale)) > figure:first-child,
.proj-set.after .proj-grid > figure.principale {
  flex: 0 0 100%;
  aspect-ratio: 16 / 9;
}
.proj-set.after .proj-grid > figure.principale { order: -1; }

/* Une verticale ne s'ouvre pas en bandeau : elle reste debout et
   centree. Le cadre garde toute la largeur pour que rien ne vienne
   se ranger a cote, et l'image tient dedans a sa hauteur, sans
   recadrage ni aplat visible autour. */
.proj-set.after .proj-grid:not(:has(figure.principale)) > figure:first-child.f-portrait,
.proj-set.after .proj-grid > figure.principale.f-portrait,
.proj-set.after .proj-grid:not(:has(figure.principale)) > figure:first-child.f-carre,
.proj-set.after .proj-grid > figure.principale.f-carre {
  aspect-ratio: auto;
  height: clamp(400px, 62svh, 760px);
  background: transparent;
}
.proj-set.after .proj-grid:not(:has(figure.principale)) > figure:first-child.f-portrait img,
.proj-set.after .proj-grid > figure.principale.f-portrait img,
.proj-set.after .proj-grid:not(:has(figure.principale)) > figure:first-child.f-carre img,
.proj-set.after .proj-grid > figure.principale.f-carre img {
  width: auto;
  margin-inline: auto;
  object-fit: contain;
}

/* Le chantier, en bande sous le resultat.
   Toutes les vignettes prennent le meme cadre, quelle que soit
   l'orientation du fichier, et l'aplat s'arrete a la largeur des
   photos : des hauteurs inegales et une derniere ligne alignee a
   gauche laissaient de larges reserves de fond visibles. */
.proj-set.before {
  padding: clamp(16px, 1.8vw, 24px);
  width: fit-content; max-width: 100%; margin-inline: auto;
}
.proj-set.before .proj-grid {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: flex-start;
  gap: clamp(8px, .9vw, 14px);
}
.proj-set.before .proj-grid > figure { flex: 0 0 clamp(140px, 15vw, 220px); }
.proj-set.before .proj-grid figure,
.proj-set.before .proj-grid figure.f-portrait,
.proj-set.before .proj-grid figure.f-carre { aspect-ratio: 3 / 2; }

/* Projet sans serie apres : ses photos restent a pleine taille. */
.proj-cols.solo .proj-set.before .proj-grid > figure { flex-basis: clamp(180px, 30%, 360px); }

@media (max-width: 700px) {
  .proj-set.after .proj-grid > figure { flex-basis: calc((100% - var(--g)) / 2); }
  .proj-set.after .proj-grid:not(:has(figure.principale)) > figure:first-child,
  .proj-set.after .proj-grid > figure.principale { aspect-ratio: 4 / 3; }
  .proj-set.after .proj-grid:not(:has(figure.principale)) > figure:first-child.f-portrait,
  .proj-set.after .proj-grid > figure.principale.f-portrait { height: 62svh; }
  .proj-cols.solo .proj-set.before .proj-grid > figure { flex-basis: 45%; }
}


/* ── Hero pilote par le defilement ────────────────────────────
   La scene mesure plusieurs hauteurs d'ecran, le hero y reste colle.
   Sur mobile on reduit la course : un pouce n'a pas la precision
   d'une molette, et le cout de decodage n'y est pas justifie. */
.scene { height: 430svh; position: relative; background: var(--cacao); }
.colle { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.colle > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero.hero-plat { position: absolute; inset: 0; height: 100%; min-height: 0; }
.hero.hero-plat .hero-bg { display: none; }
@media (max-width: 860px) { .scene { height: 260svh; } }
@media (prefers-reduced-motion: reduce) { .scene { height: 100svh; } }


/* ── Formulaire de contact : piege a robots et message d'erreur ──
   Le champ .f-hp est invisible pour un visiteur et ignore par les
   lecteurs d'ecran ; un robot qui remplit tout le remplit aussi, et
   contact.php ecarte alors l'envoi. */
.f-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.f-err {
  grid-column: 1 / -1;
  font-family: var(--sans); font-size: 14px; line-height: 1.6;
  color: var(--ink); background: rgba(176, 82, 58, 0.10);
  border-left: 2px solid rgba(176, 82, 58, 0.55);
  padding: 14px 16px; margin-bottom: 4px;
}
.f-err a { border-bottom: 1px solid currentColor; }


/* ── Plan de chantier panoramique (page Projets) ────────────────────
   Meme moteur que la scene du hero, mais le plan ne remplit pas
   l'ecran : il tient dans un cadre 2,35:1 centre, ce qui respecte le
   recadrage de la sequence et laisse la page respirer autour. */
.scene-bande { height: 300svh; background: var(--paper-2); }
.scene-bande .colle {
  display: grid; place-items: center;
  padding: 0 var(--gutter); overflow: visible;
}
.bande-bloc { width: 100%; max-width: 1280px; }
.bande-cadre {
  position: relative; width: 100%;
  aspect-ratio: 2.35 / 1; overflow: hidden;
  background: var(--cacao);
  box-shadow: 0 40px 90px -50px rgba(38, 29, 18, 0.6);
}
.bande-cadre > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bande-bloc .eyebrow { display: block; margin-bottom: 16px; }
.bande-leg { margin-top: 16px; }
@media (max-width: 760px) {
  .scene-bande { height: auto; }
  .scene-bande .colle { position: static; height: auto; padding-block: var(--pad-t); }
}
@media (prefers-reduced-motion: reduce) {
  .scene-bande { height: auto; }
  .scene-bande .colle { position: static; height: auto; padding-block: var(--pad-t); }
}

/* ── Photographies de chantier ──────────────────────────────────────
   Trois prises de vue verticales, de meme hauteur, qui suivent
   l'avancement des ouvrages. */
.ch-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px);
  margin-top: clamp(44px, 5vw, 76px);
}
.ch-grid figure { margin: 0; }
.ch-grid img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block;
  background: var(--paper-2);
}
.ch-grid figcaption { margin-top: 14px; }
@media (max-width: 760px) { .ch-grid { grid-template-columns: 1fr; } }

/* ── Plan video en fond d'en-tete de page ───────────────────────────
   L'image d'affiche reste posee sous la video : si la lecture ne
   demarre pas, ou sur un petit ecran ou elle n'est pas chargee, c'est
   elle que l'on voit. */
.phero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  opacity: 0; transition: opacity 900ms ease;
}
.phero-video.vue { opacity: 1; }

/* ── En-tete haute ─────────────────────────────────────────────────
   Une vue panoramique merite plus de hauteur que l'en-tete courante
   des pages interieures. La version large n'est servie qu'aux ecrans
   qui en profitent, par la largeur ou par la densite. */
.phero-haut { min-height: 82svh; }
@media (max-width: 760px) { .phero-haut { min-height: 68svh; } }
.phero-haut .phero-bg {
  background-image: url('../images/hero-projets-vue-1400.webp');
  background-position: center;
}
@media (min-width: 1500px), (min-resolution: 1.5dppx) {
  .phero-haut .phero-bg { background-image: url('../images/hero-projets-vue-2400.webp'); }
}

/* ── Plan video dans une colonne d'illustration ─────────────────────
   Il prend la place d'une photographie : meme largeur, meme cadre, et
   l'image d'affiche reste dessous tant que la lecture n'a pas commence
   ou si le plan n'est pas charge. */
.side-img .side-video {
  width: 100%; display: block;
  /* le plan est filme en portrait : on le ramene au format de la
     photographie qu'il remplace, le sujet restant au centre du cadre.
     L'image d'affiche occupe le meme cadre tant que la lecture n'a pas
     commence, il n'y a donc pas de trou a masquer. */
  aspect-ratio: 3 / 4; height: auto; object-fit: cover;
  background: var(--paper-2);
}

/* Un plan vertical dans un bloc a fond perdu occupe vite toute la hauteur
   de l'ecran : la colonne qui l'accueille se resserre, l'image recule et
   le texte reprend de la place. */
.bleed:has(.bleed-img.tall) {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  /* le plan etant borne en hauteur, il ne remplit plus sa colonne : on
     resserre l'ecart pour qu'il reste accroche au texte */
  gap: clamp(20px, 2.6vw, 46px);
}
/* Le plan vertical est borne en hauteur, a peu pres celle de la colonne
   de texte a cote : il rend de la largeur plutot que d'etre recadre. */
.bleed-img.tall { display: flex; justify-content: flex-start; }
.bleed-img.tall img {
  width: auto; height: auto;
  max-height: clamp(430px, 40vw, 580px); max-width: 100%;
  aspect-ratio: 3 / 4; object-fit: contain;
}
@media (max-width: 860px) {
  .bleed:has(.bleed-img.tall) { grid-template-columns: 1fr; }
  .bleed-img.tall { justify-content: center; }
  .bleed-img.tall img { width: 100%; max-height: none; }
}

/* Une image nettement moins haute que la colonne de texte a cote laisse
   un blanc en bas du bloc : avec cette classe elle se cale sur la hauteur
   du texte et se recadre dans sa largeur. */
.side-img.cale { align-self: stretch; }
.side-img.cale img,
.side-img.cale .side-video {
  width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover;
}
@media (max-width: 860px) {
  .side-img.cale { align-self: auto; }
  .side-img.cale img { height: auto; }
  .side-img.cale .side-video { height: auto; aspect-ratio: 3 / 4; }
}

/* Le plan au defilement sert aussi d'en-tete sur une page interieure :
   le titre de page se pose dessus comme sur une image fixe, et la scene
   est plus courte que celle de l'accueil pour ne pas retarder l'acces
   aux projets. */
.scene-courte { height: 270svh; }
@media (max-width: 860px) { .scene-courte { height: 200svh; } }
@media (prefers-reduced-motion: reduce) { .scene-courte { height: 100svh; } }
.phero.phero-plat { position: absolute; inset: 0; min-height: 0; }
.colle > .phero-bg { position: absolute; inset: 0; background-size: cover; z-index: 0; }
.colle > canvas, .colle > .scene-film { z-index: 1; }
.colle > .phero-ov { z-index: 2; }
.colle > .phero { z-index: 3; }

/* ── Realisations : le diptyque avant / apres ─────────────────
   Deux prises de vue du meme point, cote a cote et a la meme
   hauteur : c'est la comparaison qui ouvre le projet, le reste de
   la serie vient apres. L'etiquette est posee sur l'image plutot
   qu'au-dessus, pour que rien ne separe les deux cadres. Le ratio
   suit l'orientation de la paire : r43 pour une paire large, r34
   pour une paire verticale. */
.duo-av {
  --dg: clamp(8px, .9vw, 14px);
  display: grid; gap: var(--dg); justify-content: center;
  grid-template-columns: repeat(2, calc((100% - 2 * var(--dg)) / 3));
  max-width: var(--max); margin: 0 auto clamp(20px, 2.2vw, 34px);
}
.duo-av figure {
  margin: 0; position: relative; overflow: hidden;
  aspect-ratio: 3 / 2; background: rgba(38, 29, 18, 0.12);
}
.duo-av.r43 figure { aspect-ratio: 4 / 3; }
.duo-av.r34 figure { aspect-ratio: 3 / 4; }
.duo-av img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1);
}
.duo-av figure:hover img { transform: scale(1.04); }
.duo-et {
  position: absolute; z-index: 2; left: 0; bottom: 0;
  font-family: var(--sans); font-size: 10px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--calcaire); background: rgba(38, 29, 18, 0.72);
  padding: 9px 16px 8px;
}

/* Le duo ouvre le projet : la serie qui suit reprend des cadres
   egaux, sinon deux grands formats se succedent. */
.duo-av + .proj-cols .proj-set.after .proj-grid > figure:first-child {
  flex: 0 1 calc((100% - 2 * var(--g)) / 3);
  aspect-ratio: 3 / 2;
}
.duo-av + .proj-cols .proj-set.after .proj-grid > figure:first-child.f-portrait { aspect-ratio: 3 / 4; }
.duo-av + .proj-cols .proj-set.after .proj-grid > figure:first-child.f-carre { aspect-ratio: 1 / 1; }
.duo-av + .proj-cols .proj-set.after .proj-grid > figure:first-child img {
  width: 100%; margin-inline: 0; object-fit: cover;
}
.duo-av + .proj-cols .proj-set.after .proj-grid > figure:first-child.f-portrait,
.duo-av + .proj-cols .proj-set.after .proj-grid > figure:first-child.f-carre {
  height: auto; background: rgba(38, 29, 18, 0.12);
}

@media (max-width: 700px) {
  .duo-av { grid-template-columns: repeat(2, calc((100% - var(--dg)) / 2)); }
  .duo-av.r34 figure { aspect-ratio: 3 / 4; }
  .duo-av + .proj-cols .proj-set.after .proj-grid > figure:first-child {
    flex-basis: calc((100% - var(--g)) / 2);
  }
}

/* ── Realisations : lecture de la page ────────────────────────
   Sept projets a la suite finissaient par se confondre. Les
   chantiers alternent les lieux et les echelles, et le fond
   change d'un projet a l'autre pour que la limite se voie sans
   trait ni encadrement. Le numero donne au
   visiteur un reperage dans le defilement. */
.proj.alt { background: var(--pierre); }

body { counter-reset: projn; }
.proj-head::before {
  counter-increment: projn;
  content: counter(projn, decimal-leading-zero);
  display: block; margin-bottom: 14px;
  font-family: var(--sans); font-size: 10px; font-weight: 500;
  letter-spacing: 0.24em; color: var(--brass);
}

/* ── Liste editoriale sur deux colonnes ───────────────────────
   Quatre entrees longues a la suite font defiler une section
   entiere pour un seul paragraphe de contenu utile : la colonne
   de droite a la largeur pour en tenir deux de front. */
.ul-mark.ul-duo {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 3.4vw, 64px); row-gap: clamp(22px, 2.6vw, 38px);
}
.ul-mark.ul-duo > li { max-width: 48ch; margin-bottom: 0; align-self: start; }
/* La deuxieme entree, bien plus longue que les autres, tient la
   colonne de droite sur toute la hauteur : les trois autres se
   suivent a gauche, sans la reserve de blanc qu'une grille reguliere
   laissait sous la premiere. */
.ul-mark.ul-duo > li:nth-child(2) { grid-column: 2; grid-row: 1 / span 3; }
.ul-mark.ul-duo > li:nth-child(1),
.ul-mark.ul-duo > li:nth-child(3),
.ul-mark.ul-duo > li:nth-child(4) { grid-column: 1; }
@media (max-width: 860px) {
  .ul-mark.ul-duo { grid-template-columns: 1fr; row-gap: 18px; }
  .ul-mark.ul-duo > li { max-width: 60ch; }
  .ul-mark.ul-duo > li:nth-child(1),
  .ul-mark.ul-duo > li:nth-child(2),
  .ul-mark.ul-duo > li:nth-child(3),
  .ul-mark.ul-duo > li:nth-child(4) { grid-column: 1; grid-row: auto; }
}

/* ── Plan epingle le long du texte ────────────────────────────
   La colonne de texte defile, le plan reste en place a cote
   d'elle : il se colle sous la barre de navigation et tient la
   hauteur de l'ecran tant que le texte n'est pas passe. Sous la
   barre de rupture il reprend sa place dans le flux, au-dessus du
   texte, car un element colle n'a plus de place ou glisser dans
   une colonne unique. */
.side-img.colle-cote {
  position: sticky; top: 96px; align-self: start;
  height: calc(100svh - 120px);
}
.side-img.colle-cote img,
.side-img.colle-cote .side-video {
  width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover;
}
@media (max-width: 860px) {
  .side-img.colle-cote { position: static; height: auto; }
  .side-img.colle-cote img { height: auto; }
  .side-img.colle-cote .side-video { height: auto; aspect-ratio: 3 / 4; }
}
@media (prefers-reduced-motion: reduce) {
  .side-img.colle-cote { position: static; height: auto; }
}

/* ── Le plan du hero, servi en video ──────────────────────────
   La tete de lecture suit le defilement : la video remplit le
   cadre colle comme le faisait le canevas, et l'image d'affiche
   occupe la place tant que le premier tampon n'est pas la, ce qui
   evite le rectangle noir au chargement. */
.scene-film {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; background: var(--cacao);
  opacity: 0; transition: opacity .7s ease;
}
.scene-film.vu { opacity: 1; }

/* ── Bloc editorial centre ────────────────────────────────────
   L'etiquette passe au-dessus plutot qu'en vis-a-vis : le bloc se
   lit de haut en bas, aligne sur l'axe de la page. Les entrees de
   liste gardent leur fer a gauche, un texte suivi centre se lit
   mal des qu'il depasse deux lignes. */
.ed-centre {
  max-width: 1080px; margin-inline: auto; text-align: center;
}
.ed-centre > .eyebrow { margin-bottom: clamp(20px, 2.4vw, 34px); }
.ed-centre > .lead { max-width: 64ch; margin-inline: auto; }
.ed-centre > .body { max-width: 72ch; margin-inline: auto; }
.ed-centre .ul-duo { text-align: left; margin-inline: auto; }
.ed-centre .ul-mark li { max-width: none; }

/* ── Petits ecrans : barre et menu ────────────────────────────
   Le panneau du menu couvre l'ecran : la marque et le bouton de
   fermeture doivent passer au-dessus et reprendre l'encre du
   papier, sans quoi un signe blanc sur fond clair devient
   invisible. */
@media (max-width: 980px) {
  .nav .brand { position: relative; z-index: 100; }
  .nav:has(.links.open) { background: transparent; backdrop-filter: none; border-bottom-color: transparent; }
  .nav:has(.links.open) .brand-word span,
  .nav:has(.links.open) .burger { color: var(--ink); }
  .nav:has(.links.open) .brand-sign {
    background-image: url('../images/logo-mark-orbrule.png');
    filter: none;
  }
  .links.open {
    justify-content: flex-start;
    padding-top: calc(74px + 28px);
    gap: clamp(14px, 2.4vh, 22px);
  }
  .links.open a { font-size: 17px; padding-block: 6px; }
}