/* Vespère — base du site
   Direction : éditoriale magazine + manifeste + atelier
   Mix : grandes typos serif, marges fortes, composition asymétrique, full-bleed concentrés. */

/* Polices hébergées sur le site (fonts/), plus aucun appel à Google : RGPD. Licence SIL OFL. */
/* Montserrat : volets des fiches cas clients, à la place de Gotham des chartes clientes (choix de Watt, 23/10) */
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/montserrat-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/montserrat-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;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/montserrat-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/montserrat-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;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-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;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-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;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-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;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-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;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-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;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-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;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-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;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-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;
}
/* latin-ext */
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/spectral-italic-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/spectral-italic-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;
}
/* latin-ext */
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/spectral-italic-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/spectral-italic-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;
}
/* latin-ext */
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/spectral-italic-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/spectral-italic-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;
}
/* latin-ext */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/spectral-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/spectral-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;
}
/* latin-ext */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/spectral-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/spectral-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;
}
/* latin-ext */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/spectral-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/spectral-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;
}

:root {
  /* Inks — noir dense premium */
  --ink: #0B0B0A;
  --ink-soft: #2a2a26;
  --ink-mute: #5e5a4f;
  --line: #d4cebf;
  --line-soft: #e7e1d2;

  /* Papers — crème papier signature */
  --paper: #F4EFE6;
  --paper-2: #EDE7D8;
  --paper-3: #E2DBC8;
  --cream: #F4EFE6;                         /* crème : texte clair sur fond sombre ou vert, fixe dans les deux modes */
  --paper-rgb: 244 239 230;                 /* papier en composantes : voiles et dégradés (rgb(var(--paper-rgb) / .9)) */
  --ink-rgb: 11 11 10;                      /* encre en composantes : filets légers */
  --night: #0B0B0A;                         /* fond des bandes sombres (galerie, pied de page) */
  --black: #0B0B0A;                         /* texte des boutons crème, fixe */
  --cream-rgb: 244 239 230;                 /* crème en composantes, pour les transparences : rgb(var(--cream-rgb) / .5) */
  --black-rgb: 11 11 10;
  --cream-soft: rgba(244, 239, 230, 0.82);  /* crème adouci : texte courant sur fond vert ou noir */
  --cream-rule: rgba(244, 239, 230, 0.22);  /* filets crème sur fond vert ou noir */

  /* Vert signature + variantes */
  --accent: #00594D;          /* vert profond signature */
  --accent-mid: #4DB8A4;       /* vert moyen sur fond sombre */
  --accent-soft: #8FD3C7;      /* vert clair sur fond sombre */
  --green: #00594D;            /* vert profond fixe : bloc contact, voile de transition */

  /* Échelle commune (audit Apelle, 18/10) : un seul titre de haut de page sur ordinateur, un seul grand chiffre */
  --fs-h1: clamp(64px, min(6.4vw, 11svh), 136px);
  --fs-figure: clamp(64px, 7vw, 104px);
  --fs-lead: clamp(19px, 1.1vw, 28px); /* chapeau sous un titre de haut de page */

  --serif: 'Spectral', 'Times New Roman', serif;
  --sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --charte: 'Montserrat', var(--sans); /* volets des fiches cas clients (Gotham des chartes, remplacée) */

  /* Couleurs des chartes clientes : volets des fiches cas clients (Apelle, 23/10) */
  --mascotte-fond: #958C4E;
  --mascotte-texte: #FDFBF4;
  --mascotte-accent: #E8B535;
  --mascotte-fonce: #675A1E;
  --oken-fond: #5E9A98;
  --oken-texte: #FDFCF6;
  --oken-accent: #C9ECE7;
  --oken-bande-1: #6FA8D0;
  --oken-bande-2: #A8D8D4;
  --mascotte-lecture: #4A4115; /* aplat de lecture du volet : foncé de la charte assombri (Apelle, variante B, choix de Watt, 23/10) */
  --oken-lecture: #3A6B69;     /* bleu-vert de la charte assombri, même teinte */

  --max: clamp(1280px, 80vw, 2000px); /* 1280 jusqu'à 1600 px d'écran, puis 80 % de la largeur */
  --nav-h: clamp(84px, calc(84px + (100vw - 1440px) * 0.0267), 112px); /* hauteur de la nav : 84 px jusqu'à 1440, 112 px vers 2500 */
}

/* Mode sombre (piste A d'Apelle, choix de Watt, 23/10) : le crème devient nuit, le noir devient encre douce,
   le vert moyen remplace le vert profond. data-theme posé dans le <head> de chaque page ; bouton : setupThemeToggle (anim.js).
   Restent fixes : --cream, --green (bloc contact), --black, couleurs des chartes clientes. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #F4EFE6;
  --ink-soft: #D9D3C6;
  --ink-mute: #A29C8E;
  --line: #34312B;
  --line-soft: #2A2824;
  --paper: #11100E;
  --paper-2: #1B1A16;          /* fonds alternés plus distincts (Apelle, 23/10) */
  --paper-3: #2A2823;
  --paper-rgb: 17 16 14;
  --ink-rgb: 244 239 230;
  --night: #22201C;
  --accent: #4DB8A4;
}

/* Même échelle, déclinée par largeur (passe responsive, Tenon, 18/10) */
@media (max-width: 1024px) {
  :root { --fs-h1: clamp(56px, 7.4vw, 76px); --fs-lead: 19px; --fs-figure: clamp(60px, 8vw, 84px); }
}
@media (max-width: 768px) {
  :root { --fs-h1: clamp(40px, 11vw, 56px); --fs-lead: 17px; --fs-figure: clamp(56px, 18vw, 88px); }
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ── PAGE ─────────────────────────────────────────────── */

.page-stage { background: var(--paper); min-height: 100vh; }
.site-canvas { background: var(--paper); min-height: 100vh; }

/* ── SITE NAV ─────────────────────────────────────────── */

.site-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 64px;
  background: var(--paper);
  position: sticky; top: 0; z-index: 5;
  border-bottom: 1px solid var(--line);
}
.site-nav .brand {
  font-family: var(--serif); font-style: italic;
  font-size: 26px; font-weight: 400;
  letter-spacing: -0.02em;
}
.site-nav ul {
  display: flex; gap: 28px;
  list-style: none; margin: 0; padding: 0;
  font-size: 13px; color: var(--ink-soft);
}
.site-nav ul a { text-decoration: none; cursor: pointer; }
.site-nav ul a:hover { color: var(--ink); }
.site-nav ul a.current { color: var(--ink); }
.site-nav ul a {
  font-family: var(--sans); font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 500;
}

.site-nav .nav-cta {
  font-size: 11px; border: 1px solid var(--ink);
  padding: 10px 22px; background: var(--ink);
  cursor: pointer; color: var(--paper);
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
  border-radius: 0;
  transition: background .25s ease, border-color .25s ease;
}
.site-nav .nav-cta:hover { background: var(--accent); border-color: var(--accent); }

/* ── SECTIONS ─────────────────────────────────────────── */

.section {
  position: relative;
  padding: 88px 64px;
  border-bottom: 1px dashed var(--line-soft);
}
.section.loose { padding: 120px 64px; }

.section.dark { background: var(--night); color: var(--cream); border-bottom-color: rgba(255,255,255,0.1); }
.section.cream { background: var(--paper-2); }
.section.green { background: var(--green); color: var(--cream); border-bottom-color: rgba(255,255,255,0.12); }
.section.green .eyebrow { color: var(--accent-soft); }
.section.green .eyebrow::before { background: var(--accent-soft); }
.section.green p, .section.green .lede { color: var(--cream-soft); }
.section.dark .eyebrow { color: var(--accent-mid); }
.section.dark .eyebrow::before { background: var(--accent-mid); }
.section.dark p, .section.dark .lede { color: rgb(var(--cream-rgb) /0.78); }

.container { max-width: var(--max); margin: 0 auto; }
.container.narrow { max-width: 880px; }

/* ── TYPE ─────────────────────────────────────────────── */

.eyebrow {
  font-family: var(--mono); font-size: clamp(11px, 0.55vw, 14px);
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--accent);
  margin: 0 0 32px;
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ''; display: inline-block;
  width: 24px; height: 1px; background: var(--accent);
}

h1, .h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(56px, 7.5vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.028em;
  margin: 0 0 28px;
  text-wrap: balance;
  font-style: italic;
}
h1 em, .h1 em { font-style: italic; font-weight: 400; }

h2, .h2 {
  font-family: var(--serif); font-weight: 400;
  /* inchangé jusqu'à ~1440 px, puis grandit avec l'écran jusqu'à 76 px (grand écran) */
  font-size: max(clamp(36px, 4.2vw, 52px), min(3.6vw, 76px));
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0 0 24px;
  text-wrap: balance;
  font-style: italic;
}
h2 em, .h2 em { font-style: italic; }

h3, .h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: 26px; line-height: 1.22;
  letter-spacing: -0.012em;
  margin: 0 0 12px;
}
h3 em { font-style: italic; font-weight: 400; }


p, .lede {
  font-family: var(--sans); font-size: 16px;
  line-height: 1.6; color: var(--ink-soft);
  margin: 0 0 16px; max-width: 60ch;
}

.lede {
  font-size: 22px; line-height: 1.45;
  color: var(--ink-soft); max-width: 56ch;
  font-weight: 400;
}

/* Ghost text — grands mots fantômes en arrière-plan */
/* Ghost text — discret marqueur de chapitre, plus un slab de fond */
.ghost {
  position: absolute;
  font-family: var(--mono);
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-mute);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}
.ghost::before {
  content: '— ';
  color: var(--accent);
  margin-right: 2px;
}
.section.dark .ghost, .section.green .ghost {
  color: rgb(var(--cream-rgb) /0.55);
  opacity: 0.7;
}
.section.dark .ghost::before, .section.green .ghost::before {
  color: var(--accent-soft);
}
.ghost.bottom-right { bottom: 32px; right: 64px; }

.section > .container, .section > * { position: relative; z-index: 1; }

/* ── PLACEHOLDERS / PHOTOS ───────────────────────────── */

:root[data-theme="dark"] .ph { background: var(--paper-3); } /* emplacements photo : un ton au-dessus de la nuit */
.ph {
  background: linear-gradient(155deg, #d8d3c4 0%, #c8c2b0 100%);
  position: relative; overflow: hidden;
}
.ph::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 28% 36%, rgba(255,255,255,0.20) 0%, transparent 55%),
    radial-gradient(ellipse at 72% 80%, rgba(0,0,0,0.10) 0%, transparent 60%);
  pointer-events: none;
}
.ph::after {
  content: ''; position: absolute; inset: 16px;
  border: 1px solid rgba(0,0,0,0.10);
  pointer-events: none;
}
.ph-label {
  position: absolute; bottom: 18px; left: 18px;
  transform: none;
  font-family: var(--mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: rgb(var(--ink-rgb) / 0.55);
  background: transparent;
  padding: 0; z-index: 2;
  max-width: 70%;
}
.ph-img-portrait { aspect-ratio: 4/5; }

/* ── BUTTONS ──────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 28px;
  font-family: var(--sans); font-size: 12px;
  font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--accent); background: var(--accent);
  color: var(--paper); text-decoration: none; cursor: pointer;
  border-radius: 0; /* coins droits, dans la ligne des filets éditoriaux */
  transition: background .25s ease, color .25s ease;
}
/* Le vert signale l'action, partout ; au survol, un aplat encre le traverse (anim.css) */
.btn:hover { color: var(--paper); border-color: var(--ink); }
.btn .arr { font-weight: 400; text-transform: none; letter-spacing: 0; }

.btn-link {
  background: transparent; border: none;
  position: relative;
  color: var(--ink); padding: 4px 0 6px; text-decoration: none;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  cursor: pointer; letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
  transition: gap 0.32s cubic-bezier(.2,.7,.2,1), color 0.25s;
}
.btn-link::before {
  content: ''; position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--ink);
  transform-origin: right center;
  transform: scaleX(1);
  transition: transform 0.45s cubic-bezier(.65,.05,.36,1);
}
.btn-link::after {
  content: ''; position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--accent);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.45s cubic-bezier(.65,.05,.36,1) 0.05s;
}
.btn-link:hover { color: var(--accent); gap: 14px; }
.btn-link:hover::before { transform: scaleX(0); }
.btn-link:hover::after { transform: scaleX(1); }

.section.dark .btn, .section.green .btn { background: var(--cream); color: var(--black); border-color: var(--cream); }
/* Sur vert ou noir : le fond papier reste, l'aplat vert le traverse ; même rendu au clavier */
.section.dark .btn:hover, .section.green .btn:hover,
.section.dark .btn:focus-visible, .section.green .btn:focus-visible { color: var(--cream); border-color: var(--cream); }
.section.dark .btn-link, .section.green .btn-link { color: var(--cream); }
.section.dark .btn-link::before, .section.green .btn-link::before { background: var(--cream); }
.section.dark .btn-link::after, .section.green .btn-link::after { background: var(--accent-soft); }
.section.dark .btn-link:hover, .section.green .btn-link:hover { color: var(--accent-soft); }

/* ── FOOTER ───────────────────────────────────────────── */

.site-footer {
  position: relative;
  background: var(--night);
  color: var(--cream);
  font-family: var(--sans); font-size: 13px;
  overflow: hidden;
}
/* Mode sombre : pied de la même couleur que la barre du haut, un filet le sépare d'une section de même fond (Watt, 23/10) */
:root[data-theme="dark"] .site-footer { background: var(--paper); border-top: 1px solid var(--line); }
.site-footer .ft-brand {
  font-family: var(--serif); font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--cream);
}
.site-footer .ft-brand em {
  font-style: italic; font-weight: 400;
  color: var(--cream);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }