/* ---------- FONTS (self-hosted, subset from Google Fonts) ---------- */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-normal-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-normal-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: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-normal-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: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-normal-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-normal-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: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-normal-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: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-normal-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-normal-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: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-normal-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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-normal-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-normal-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-normal-400-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-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;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-normal-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-normal-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-normal-500-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-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-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/newsreader-italic-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-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: 400;
  font-display: swap;
  src: url(../fonts/newsreader-italic-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/newsreader-italic-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: 400;
  font-display: swap;
  src: url(../fonts/newsreader-italic-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-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/newsreader-normal-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-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-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/newsreader-normal-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-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: 500;
  font-display: swap;
  src: url(../fonts/newsreader-normal-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/newsreader-normal-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: 500;
  font-display: swap;
  src: url(../fonts/newsreader-normal-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;
}

/* ============================================================
   LA BRUXELLOISE — relevé
   Palette : pierre bleue de Belgique, chaux, brique XVIIe, minium
   ============================================================ */
:root{
  --pierre:#252C31;
  --pierre-mid:#4E585F;
  --pierre-mid1:#4e2c21;
  --pierre-pale:#8D979C;
  --chaux:#EDEEEA;
  --chaux-2:#E1E3DD;
  --sable:#D3D5CD;
  --brique:#8E4B39;
  --minium:#C0361D;
  --nuit2:#1B2125;
   --nuit1:  #4e2c21;
   --nuit: #121b24;

  --nuit-txt:#D2D6D1;

  --ff-display:"Bricolage Grotesque",system-ui,sans-serif;
  --ff-body:"Newsreader",Georgia,serif;
  --ff-data:"IBM Plex Mono",ui-monospace,monospace;

  --rail:84px;
  --gut:clamp(20px,5vw,72px);
  --measure:33rem;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--chaux);color:var(--pierre);
  font-family:var(--ff-body);font-weight:300;
  font-size:clamp(17px,1.05vw,19px);line-height:1.62;
  font-optical-sizing:auto;
}
img,video{max-width:100%;display:block;height:auto}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px;text-decoration-color:var(--minium)}
a:focus-visible,button:focus-visible{outline:2px solid var(--minium);outline-offset:3px}

/* ---------- RAIL : la règle graduée ---------- */
.rail{
  position:fixed;inset:0 auto 0 0;width:var(--rail);z-index:40;
  border-right:1px solid rgba(37,44,49,.18);
  background:linear-gradient(90deg,transparent 0 calc(var(--rail) - 1px),transparent);
  display:none;
}
.rail__ticks{
  position:absolute;top:0;bottom:0;right:0;width:13px;
  background-image:repeating-linear-gradient(to bottom,rgba(37,44,49,.34) 0 1px,transparent 1px 12px);
}
.rail__ticks::after{
  content:"";position:absolute;inset:0;right:0;width:26px;
  background-image:repeating-linear-gradient(to bottom,rgba(37,44,49,.42) 0 1px,transparent 1px 60px);
}
.rail__cursor{
  position:absolute;right:0;width:var(--rail);height:1px;background:var(--minium);
  transform:translateY(0);will-change:transform;
}
.rail__cursor::after{
  content:attr(data-pct);position:absolute;right:16px;top:5px;
  font-family:var(--ff-data);font-size:9px;letter-spacing:.1em;color:var(--minium);
}
.rail__logo{
  position:absolute;left:16px;top:50%;width:40px;height:auto;
  transform:translateY(-50%);pointer-events:none;-webkit-user-select:none;user-select:none;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.rail__marks{position:absolute;inset:0}
.rail__mark{
  position:absolute;left:8px;right:26px;height:1px;background:rgba(37,44,49,.5);
  border:0;padding:0;cursor:pointer;transition:background .2s;
}
.rail__mark span{
  position:absolute;left:0;top:-6px;white-space:nowrap;
  font-family:var(--ff-data);font-size:10px;letter-spacing:.06em;
  color:var(--pierre);background:var(--chaux);padding:2px 6px;
  opacity:0;transform:translateX(6px);transition:opacity .18s,transform .18s;pointer-events:none;
  border:1px solid rgba(37,44,49,.2);
}
.rail__mark:hover span,.rail__mark:focus span{opacity:1;transform:translateX(12px)}
.rail__mark[aria-current="true"]{background:var(--minium);height:2px}
.rail__foot{
  position:absolute;bottom:18px;left:0;width:var(--rail);text-align:center;
  font-family:var(--ff-data);font-size:9px;letter-spacing:.14em;color:var(--pierre-pale);
}
/* "desktop" = souris/trackpad (hover fin), quelle que soit la largeur de fenêtre —
   une fenêtre de bureau réduite sous 1024px reste ainsi fixe, pas flottante */
@media(min-width:1024px),(hover:hover) and (pointer:fine){.rail{display:block}main,.sitefoot{margin-left:var(--rail)}}

/* sous 1024px ET sans pointeur fin (tactile) : le rail devient un overlay qui
   n'apparaît qu'au scroll, sans marques de section cliquables (pas d'état hover au tactile) */
@media(max-width:1023.98px) and (not ((hover:hover) and (pointer:fine))){
  .rail{
    display:block;pointer-events:none;opacity:0;
    transition:opacity .18s ease;
    background:linear-gradient(90deg,rgba(237,238,234,.5) 0 calc(var(--rail) - 1px),transparent);
  }
  .rail.is-visible{opacity:1;transition:opacity .35s ease}
  .rail__marks{display:none}
}

/* ---------- LANGUES ---------- */
.langs{
  position:fixed;top:0;right:0;z-index:45;display:flex;
  background:var(--chaux);border-left:1px solid rgba(37,44,49,.18);border-bottom:1px solid rgba(37,44,49,.18);
}
.langs button{
  appearance:none;border:0;background:none;cursor:pointer;
  font-family:var(--ff-data);font-size:11px;letter-spacing:.1em;color:var(--pierre-mid);
  padding:11px 12px;
}
.langs button[aria-pressed="true"]{color:var(--minium)}
.langs button+button{border-left:1px solid rgba(37,44,49,.14)}

/* ---------- COTES (le trait de cote, signature) ---------- */
.cote{
  display:flex;align-items:center;gap:10px;
  font-family:var(--ff-data);font-size:11px;letter-spacing:.12em;color:var(--minium);
  text-transform:uppercase;
}
.cote::before,.cote::after{content:"";height:1px;background:var(--minium);flex:1}
.cote--h{position:relative;width:100%;max-width:340px}
.cote--h .tick{position:absolute;top:-5px;width:1px;height:11px;background:var(--minium)}
.cote--h .tick.l{left:0}.cote--h .tick.r{right:0}

/* ---------- PANNEAUX ---------- */
main{display:block}
.panel{position:relative;padding:clamp(72px,11vh,140px) var(--gut)}
.panel--dark{background:var(--nuit);color:var(--nuit-txt)}
.panel--dark a{color:#fff}
.panel--stone{background:var(--chaux-2)}
.panel--video{overflow:hidden}
.panel__bgvideo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;
}
.panel__overlay{
  position:absolute;inset:0;z-index:1;
  background:rgba(18,27,36,.62);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.panel--video .panel__in{position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){.panel__bgvideo{display:none}}
.panel__in{max-width:1120px;margin:0 auto}
.eyebrow{
  font-family:var(--ff-data);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--minium);margin:0 0 22px;display:block;
}
.panel--dark .eyebrow{color:#D9663F}
h1,h2,h3{font-family:var(--ff-display);font-weight:600;letter-spacing:-.02em;margin:0}
h2{font-size:clamp(2.1rem,4.6vw,3.7rem);line-height:.98;font-variation-settings:"wdth" 90}

#s-contact h2 {
    font-size: clamp(1.1rem, 1.6vw, 3.7rem);
    line-height: .98;
    font-variation-settings: "wdth" 80;
}


h2 .thin{font-weight:400;font-style:normal;color:var(--pierre-mid);display:block;
  font-size:clamp(1rem,1.5vw,1.35rem);letter-spacing:0;line-height:1.35;margin-top:16px;
  font-family:var(--ff-body);font-style:italic;font-weight:300;max-width:30rem}
.panel--dark h2 .thin{color:var(--pierre-pale)}
h3{font-size:1.05rem;font-variation-settings:"wdth" 92;letter-spacing:-.01em}
.measure{max-width:var(--measure)}
.panel p{margin:0 0 1.15em}
.panel p:last-child{margin-bottom:0}
.lede{font-size:1.18em;line-height:1.5}
.chute{
  font-family:var(--ff-display);font-weight:400;font-size:clamp(1.15rem,2vw,1.6rem);
  line-height:1.28;letter-spacing:-.015em;margin-top:1.6em;
  border-top:1px solid rgba(37,44,49,.22);padding-top:1.1em;max-width:28rem;
}
.panel--dark .chute{border-top-color:rgba(255,255,255,.2)}

/* ---------- STREAMS (accordéon des trois frères) ---------- */
.streams{border-top:1px solid rgba(37,44,49,.22);margin:1.7em 0}
.panel--dark .streams{border-top-color:rgba(255,255,255,.2)}
.streams__item{border-bottom:1px solid rgba(37,44,49,.14);overflow-anchor:none}
.panel--dark .streams__item{border-bottom-color:rgba(255,255,255,.13)}
.streams__item summary{
  list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:18px;
  padding:20px 2px;font-family:var(--ff-display);font-weight:600;
  font-size:clamp(1.05rem,1.6vw,1.3rem);letter-spacing:-.01em;
  -webkit-tap-highlight-color:transparent;
}
.streams__item summary::-webkit-details-marker{display:none}
.streams__item summary:focus-visible{outline:2px solid var(--minium);outline-offset:3px}
.streams__num{
  font-family:var(--ff-data);font-size:11px;letter-spacing:.14em;color:var(--minium);
  flex-shrink:0;padding-top:.35em;
}
.streams__name{flex:1;transition:color .2s}
.streams__item summary:hover .streams__name{color:var(--minium)}
.panel--dark .streams__item summary:hover .streams__name{color:#fff}
.streams__toggle{
  position:relative;flex-shrink:0;width:14px;height:14px;margin-top:.4em;
}
.streams__toggle::before,.streams__toggle::after{
  content:"";position:absolute;inset:0;margin:auto;background:var(--minium);
  transition:transform .25s;
}
.streams__toggle::before{width:14px;height:1px}
.streams__toggle::after{width:1px;height:14px}
.streams__item[open] .streams__toggle::after{transform:rotate(90deg);opacity:0}
.streams__item[open] .streams__name{color:var(--minium)}
.streams__body{padding:0 0 26px;max-width:var(--measure)}
.streams__body p{margin:0 0 1.1em}
.streams__body p:last-child{margin-bottom:0}

/* ---------- GRILLES ---------- */
.duo{display:grid;gap:clamp(28px,4vw,64px);grid-template-columns:1fr;align-items:start}
@media(min-width:860px){
  .duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .duo--narrow-first{grid-template-columns:minmax(0,.72fr) minmax(0,1fr)}
  .duo--narrow-last{grid-template-columns:minmax(0,1fr) minmax(0,.72fr)}
  .duo--flip>*:first-child{order:2}
}
.head{margin-bottom:clamp(34px,5vw,56px)}
figure{margin:0}
figcaption{
  font-family:var(--ff-data);font-size:10.5px;letter-spacing:.05em;line-height:1.5;
  color:var(--pierre-mid);margin-top:15px;padding-left:12px;border-left:1px solid var(--minium);
}
.panel--dark figcaption{color:var(--pierre-pale)}
.frame{position:relative}
.frame picture,.frame video{display:block;background:var(--sable)}
.panel--dark .frame picture,.panel--dark .frame video{background:#2A3237}
.frame img,.frame video{width:100%}

/* ---------- SONGBOX (complainte, fenêtre déroulante) ---------- */
.head-row{
  display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,48px);justify-content:space-between;
  align-items:flex-start;margin-bottom:clamp(34px,5vw,56px);
}
.head-row .head{margin-bottom:0;flex:1 1 260px}
.songbox{
  width:100%;max-width:300px;flex-shrink:0;
  border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.28);
  padding:16px 18px;
}
.songbox__title{
  font-family:var(--ff-data);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:#D9663F;margin:0 0 12px;display:block;
}
.songbox__scroll{
  max-height:240px;overflow-y:auto;padding-right:10px;
  font-family:var(--ff-body);font-style:italic;font-weight:300;
  font-size:.86rem;line-height:1.55;color:var(--nuit-txt);
}
.songbox__scroll p{margin:0 0 1em}
.songbox__scroll p:last-child{margin-bottom:0}
.songbox__scroll::-webkit-scrollbar{width:6px}
.songbox__scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.08)}
.songbox__scroll::-webkit-scrollbar-thumb{background:var(--minium)}

/* ---------- HERO ---------- */
.hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(26px,4vw,44px) var(--gut) clamp(26px,4vw,40px);
  border-bottom:1px solid rgba(37,44,49,.18);
}
.hero__top{padding-right:0;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  font-family:var(--ff-data);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--pierre-mid)}
.hero__mid{display:grid;gap:clamp(24px,4vw,56px);grid-template-columns:1fr;align-items:end;padding:clamp(30px,6vh,70px) 0}
@media(min-width:860px){.hero__mid{grid-template-columns:minmax(0,1fr) 264px}}
h1{
  font-size:clamp(3.2rem,11.5vw,9.5rem);line-height:.84;font-weight:800;
  font-variation-settings:"wdth" 78;letter-spacing:-.045em;text-transform:none;
}
h1 em{display:block;font-style:normal;font-weight:400;font-variation-settings:"wdth" 100;
  font-size:clamp(1rem,2.4vw,2rem);letter-spacing:-.01em;color:var(--pierre-mid);margin-top:.5em}
.hero__note{max-width:26rem;margin-top:26px;font-size:.98rem;line-height:1.55;color:var(--pierre-mid)}
.hero__img{position:relative;background:var(--sable)}
.hero__img img{width:100%}
.hero__bot{display:flex;flex-wrap:wrap;gap:18px 34px;align-items:center;justify-content:space-between;
  border-top:1px solid rgba(37,44,49,.22);padding-top:16px}
.hero__facts{display:flex;flex-wrap:wrap;gap:10px 30px;font-family:var(--ff-data);font-size:11px;letter-spacing:.06em;color:var(--pierre-mid)}
.hero__facts b{font-weight:500;color:var(--pierre)}
.hero__snippets{display:flex;align-items:center}
.hero__snippets span{display:flex;flex-wrap:wrap;align-items:center;gap:30px}
.hero__snippets img{width:40px;height:40px}
.hero__top>span:last-child{padding-right:180px}
@media(max-width:700px){.hero__top>span:last-child{display:none}}
.scrollhint{font-family:var(--ff-data);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--minium)}

/* ---------- TABLE DES EFFACEMENTS ---------- */
.effac{border-top:1px solid rgba(37,44,49,.22);margin-top:2.4em}
.panel--dark .effac{border-top-color:rgba(255,255,255,.2)}
.effac__row{display:grid;grid-template-columns:1fr 22px 1fr;gap:12px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid rgba(37,44,49,.12);font-family:var(--ff-data);font-size:12.5px}
.panel--dark .effac__row{border-bottom-color:rgba(255,255,255,.12)}
.effac__row s{text-decoration-color:var(--minium);text-decoration-thickness:1px;color:var(--pierre-mid)}
.panel--dark .effac__row s{color:var(--pierre-pale)}
.effac__row i{font-style:normal;color:var(--minium);text-align:center}

/* ---------- JAUGES ---------- */
.gauges{display:grid;gap:22px;margin-top:8px}
.gauge__top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:8px}
.gauge__val{font-family:var(--ff-data);font-size:12px;color:var(--minium);letter-spacing:.06em}
.gauge__track{height:3px;background:rgba(37,44,49,.16);position:relative}
.panel--dark .gauge__track{background:rgba(255,255,255,.16)}
.gauge__fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--minium);transition:width 1.1s cubic-bezier(.22,1,.36,1)}

/* ---------- CHRONOLOGIE ---------- */
.tl{border-top:1px solid rgba(255,255,255,.18);margin-top:8px}
.tl__row{display:grid;grid-template-columns:1fr;gap:6px 34px;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.13)}
@media(min-width:760px){.tl__row{grid-template-columns:120px minmax(0,1fr)}}
.tl__year{font-family:var(--ff-data);font-size:13px;letter-spacing:.08em;color:#D9663F;padding-top:3px}
.tl__body h3{font-size:1rem;margin-bottom:6px}
.tl__body ul{margin:0;padding-left:1.05em}
.tl__body li{margin:.2em 0;font-size:.94rem;color:var(--nuit-txt)}
.tl__row--stall{background:rgba(255,255,255,.03)}
.tl__stallyears{font-family:var(--ff-data);font-size:13px;line-height:1.9;color:#D9663F}
.tl__note{font-family:var(--ff-data);font-size:11px;letter-spacing:.05em;color:var(--pierre-pale);margin-top:10px}
.tl__row--dream .tl__year{color:#fff}

/* ---------- CARTES / PISTES ---------- */
.cards{display:grid;gap:1px;background:rgba(37,44,49,.18);grid-template-columns:1fr}
@media(min-width:700px){.cards{grid-template-columns:1fr 1fr}}
@media(min-width:1050px){.cards{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--chaux);padding:26px 22px 30px;display:flex;flex-direction:column;gap:10px;min-height:210px}
.card h3{font-size:1.02rem}
.card p{font-size:.92rem;line-height:1.5;color:var(--pierre-mid);margin:0}
.card__go{margin-top:auto;font-family:var(--ff-data);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--minium)}

/* ---------- CONTACT ---------- */
.contact{display:grid;gap:clamp(28px,4vw,60px);grid-template-columns:1fr}
@media(min-width:860px){.contact{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}}
.contact dl{margin:0;font-family:var(--ff-data);font-size:12.5px;line-height:1.9}
.contact dt{color:var(--pierre-pale);letter-spacing:.14em;text-transform:uppercase;font-size:10px;margin-top:16px}
.honeypot{display:none}
.field{display:block;margin-bottom:14px}
.field span{display:block;font-family:var(--ff-data);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--pierre-mid);margin-bottom:6px}
.field input,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid rgba(37,44,49,.3);
  font-family:var(--ff-body);font-size:1rem;color:var(--pierre);padding:8px 0;border-radius:0;
}
.field textarea{resize:vertical;min-height:96px}
.field input:focus,.field textarea:focus{outline:0;border-bottom-color:var(--minium)}
.send{
  appearance:none;border:1px solid var(--pierre);background:transparent;color:var(--pierre);
  font-family:var(--ff-data);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  padding:13px 26px;cursor:pointer;transition:background .2s,color .2s;
}
.send:hover{background:var(--pierre);color:var(--chaux)}
.send:disabled{cursor:default;opacity:.5}
#contactForm.is-sent .field,#contactForm.is-sent .send{opacity:.45;pointer-events:none}
.mapwrap{position:relative;aspect-ratio:4/3;background:var(--sable);filter:grayscale(1) contrast(.92)}
.mapwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- PIED ---------- */
.sitefoot{border-top:1px solid rgba(37,44,49,.2);padding:26px var(--gut);
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  font-family:var(--ff-data);font-size:10.5px;letter-spacing:.1em;color:var(--pierre-mid)}

/* ---------- ANIMATION ---------- */
.rise{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none;transition:none}
  .gauge__fill{transition:none}
  video{display:none}
}

/* ---------- ACTIONS FLOTTANTES : retour en haut + sommaire ---------- */
#scrollTopBtn{
  position:fixed;bottom:20px;right:20px;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  background:rgba(37,44,49,.92);border:1px solid rgba(192,54,29,.5);
  color:var(--chaux);cursor:pointer;text-decoration:none;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .35s ease,visibility .35s ease,transform .35s ease,border-color .2s ease,background .2s ease;
}
#scrollTopBtn.visible{opacity:1;visibility:visible;transform:translateY(0)}
#scrollTopBtn:hover,#scrollTopBtn:focus-visible{border-color:var(--minium);background:#1B2125}
#scrollTopBtn svg{width:18px;height:18px;fill:currentColor}

.section-jump{
  position:fixed;bottom:72px;right:20px;z-index:1000;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .35s ease,visibility .35s ease,transform .35s ease;
}
.section-jump.visible{opacity:1;visibility:visible;transform:translateY(0)}
.section-jump-btn{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  background:rgba(37,44,49,.92);border:1px solid rgba(192,54,29,.5);
  color:var(--chaux);cursor:pointer;
  transition:border-color .2s ease,background .2s ease;
}
.section-jump-btn:hover,.section-jump-btn[aria-expanded="true"]{border-color:var(--minium);background:#1B2125}
.section-jump-btn svg{width:18px;height:18px;stroke:currentColor}
.section-jump-menu{
  position:absolute;bottom:100%;right:0;margin-bottom:10px;
  min-width:250px;max-width:min(320px,80vw);max-height:70vh;overflow-y:auto;
  scrollbar-width:none;-ms-overflow-style:none;
  background:rgba(27,33,37,.97);border:1px solid rgba(192,54,29,.4);
  padding:6px 0;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .22s ease,visibility .22s ease,transform .22s ease;
  pointer-events:none;
}
.section-jump-menu::-webkit-scrollbar{display:none}
.section-jump.open .section-jump-menu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.section-jump-menu li+li{border-top:1px solid rgba(255,255,255,.08)}
.section-jump-menu a{
  display:block;padding:.62rem 1.1rem;
  font-family:var(--ff-data);font-size:11px;letter-spacing:.08em;
  color:var(--chaux-2);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .15s ease,background .15s ease;
}
.section-jump-menu a:hover,.section-jump-menu a:focus-visible{color:#fff;background:rgba(192,54,29,.25)}
@media(max-width:480px){
  .section-jump-menu{min-width:210px;max-width:88vw}
}
@media(prefers-reduced-motion:reduce){
  #scrollTopBtn,.section-jump,.section-jump-menu{transition:none}
}

::selection{background:var(--minium);color:var(--chaux)}


.mb-1 { margin-bottom: 1rem !important; } /* Espace léger */
.mb-2 { margin-bottom: 2rem !important; } /* Espace moyen */
.mb-3 { margin-bottom: 3rem !important; } /* Grand espace */

.mbt-1 { margin-bottom: 1rem !important; } /* Espace léger */
.mbt-2 { margin-bottom: 2rem !important; } /* Espace moyen */
.mbt-3 { margin-bottom: 3rem !important; } /* Grand espace */

.mt-1 { margin-top: 1rem !important; } /* Espace léger */
.mt-2 { margin-top: 2rem !important; } /* Espace moyen */
.mt-3 { margin-top: 3rem !important; } /* Grand espace */
.mt-6 { margin-top: 6rem !important; } /* Grand espace */