/* ═══════════════════════════════════════════════════════════
   Fondation Cherqui · direction « Catalogue cinétique »
   Noir & blanc très contrasté, Helvetica + Space Mono,
   angles vifs. La couleur ne vient que des œuvres.
   Mobile-first strict : base = mobile, @media (min-width) au-dessus.
   ═══════════════════════════════════════════════════════════ */

/* ── Fonts ───────────────────────────────────────────────── */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/space-mono-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: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/space-mono-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: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/space-mono-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: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/space-mono-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;
}

/* ── Tokens ──────────────────────────────────────────────── */
:root {
  --black: #0a0a0a;
  --white: #ffffff;

  /* Texte sur blanc. Les gris sont plafonnés au ratio WCAG AA (4.5:1 sur #fff) :
     au-delà de #767676 le texte courant ne passe plus le contraste. */
  --text: #0a0a0a;
  --text-body: #444;
  --text-soft: #555;
  --text-muted: #666;      /* 5.74:1 */
  --text-label: #737373;   /* 4.74:1 */

  /* Texte sur noir. Même plancher AA : sous 48 % de blanc sur #0a0a0a,
     le ratio tombe sous 4.5:1. */
  --on-dark: #fff;
  --on-dark-90: rgba(255, 255, 255, .9);
  --on-dark-75: rgba(255, 255, 255, .75);
  --on-dark-70: rgba(255, 255, 255, .7);
  --on-dark-60: rgba(255, 255, 255, .6);
  --on-dark-55: rgba(255, 255, 255, .55);
  --on-dark-50: rgba(255, 255, 255, .5);   /* 5.36:1 */
  --on-dark-48: rgba(255, 255, 255, .48);  /* 5.01:1, gris le plus clair admis */

  /* Filets */
  --border: rgba(0, 0, 0, .12);
  --border-light: rgba(0, 0, 0, .1);
  --rule: #0a0a0a;
  --border-dark: rgba(255, 255, 255, .14);
  --border-dark-strong: rgba(255, 255, 255, .2);

  --font-display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --header-h: 66px;
  --wrap: 1240px;
  --pad-x: 20px;

  /* Alias conventionnels (compat. blocs partagés) */
  --bg: #ffffff;
  --bg-alt: #0a0a0a;
  --text-light: #666;
  --primary: #0a0a0a;
  --primary-dark: #000;
  --radius: 0;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

html, body { overflow-x: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video, iframe { max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Utilitaires ─────────────────────────────────────────── */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--black);
  color: #fff;
  padding: 12px 18px;
  font: 700 12px/1 var(--font-mono);
  letter-spacing: 1px;
}
.skip-link:focus { left: 0; }

.only-desktop { display: none; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

.link-strong {
  color: var(--black);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.section--dark .link-strong { color: #fff; }

.link-underline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 12px/1 var(--font-mono);
  letter-spacing: .5px;
  color: #fff;
  border-bottom: 1.5px solid #fff;
  padding-bottom: 4px;
}

/* ── Eyebrow (label mono numéroté) ───────────────────────── */
.eyebrow {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font: 700 10px/1.4 var(--font-mono);
  letter-spacing: 2px;
  color: var(--text-label);
  margin: 0 0 16px;
  text-transform: uppercase;
}
.eyebrow__n { font-size: 11px; color: var(--text); }
.eyebrow--dark { color: var(--on-dark-50); }
.eyebrow--dark .eyebrow__n { color: #fff; }
.eyebrow--lead { color: var(--text); letter-spacing: 2px; }

/* ── Boutons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 700 13px/1 var(--font-mono);
  letter-spacing: 1px;
  padding: 17px 22px;
  border: 0;
  transition: background-color .2s ease, color .2s ease;
}
.btn--dark { background: var(--black); color: #fff; }
.btn--dark:hover { background: #262626; }
.btn--light { background: #fff; color: var(--black); }
.btn--light:hover { background: #e2e2e2; }
.btn--block {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

/* ═══ HEADER ═══════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--black);
  color: #fff;
  padding: 0 20px;
  height: 56px;
  border-bottom: 1px solid var(--border-dark);
}
/* Sur mobile la home démarre directement par l'image du hero : pas de barre
   haute (la navigation passe par la barre d'onglets basse). */
.is-home .site-header { display: none; }

.site-header__logo img {
  display: block;
  height: 22px;
  width: auto;
  filter: brightness(0) invert(1);
}
.site-nav { display: none; }
.site-header__cta { padding: 10px 16px; font-size: 11px; }

/* ═══ HERO ═════════════════════════════════════════════════ */
.hero__media img {
  display: block;
  width: 100%;
  height: 392px;
  object-fit: cover;
}

.hero__body {
  background: #fff;
  padding: 26px var(--pad-x) 30px;
  border-bottom: 1px solid var(--border);
}
.hero__logo { display: block; height: 34px; width: auto; margin-bottom: 20px; }

.hero__title {
  font-size: 32px;
  line-height: 1;
  letter-spacing: -.6px;
  margin: 0 0 14px;
  text-transform: uppercase;
}
.hero__sub {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-soft);
  margin: 0 0 22px;
}
.hero__actions { margin-top: 22px; }
/* Le SVG « Powered by Fever » est blanc : sur fond clair on le repasse en noir. */
.hero__fever {
  display: block;
  height: 14px;
  width: auto;
  margin-top: 14px;
  opacity: .7;
  filter: brightness(0);
}

/* ═══ MARQUEE (diviseur cinétique) ═════════════════════════ */
.marquee {
  height: 12px;
  overflow: hidden;
  position: relative;
  background: #fff;
}
.marquee__bars {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(100% + 30px);
  /* motif de période 15px → translateX(-15px) boucle au pixel près */
  background-image: repeating-linear-gradient(90deg, var(--black) 0 3px, transparent 3px 15px);
  animation: barscroll 1.4s linear infinite;
  will-change: transform;
}
@keyframes barscroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-15px); }
}

/* ═══ STATS ════════════════════════════════════════════════ */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--black);
  color: #fff;
}
.stats__item {
  padding: 26px 8px;
  text-align: center;
  border-right: 1px solid var(--border-dark);
}
.stats__item:last-child { border-right: 0; }
.stats__icon {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  margin: 0 auto 10px;
  filter: brightness(0) invert(1);
  opacity: .85;
}
.stats__big {
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -.3px;
}
.stats__sub {
  font: 700 8px/1.4 var(--font-mono);
  letter-spacing: .5px;
  color: var(--on-dark-55);
  margin-top: 8px;
  text-transform: uppercase;
}

/* ═══ SECTIONS ═════════════════════════════════════════════ */
.section {
  padding: 34px 0;
  background: #fff;
  scroll-margin-top: 8px;
}
.section + .section { border-top: 1px solid var(--border); }
.section--dark {
  background: var(--black);
  color: #fff;
  border-top-color: transparent;
}
.section + .section--dark,
.section--dark + .section { border-top: 0; }

/* ── 01 La Fondation ─────────────────────────────────────── */
.intro { padding-top: 36px; }
.intro__title {
  font-size: 25px;
  line-height: 1.1;
  letter-spacing: -.4px;
  margin: 0 0 16px;
}
.intro__text p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-body);
}
.intro__text p + p { margin-top: 13px; }

/* ── 02 / 03 / 04 Features ───────────────────────────────── */
.feature__grid { display: flex; flex-direction: column; }
/* display:contents laisse les enfants participer au flux du parent :
   sur mobile on intercale l'image entre le titre et le paragraphe. */
.feature__body { display: contents; }
.feature .eyebrow { order: 1; }
.feature__title { order: 2; }
.feature__media { order: 3; }
.feature__text { order: 4; }

.feature__title {
  font-size: 22px;
  line-height: 1.12;
  letter-spacing: -.3px;
  margin: 0 0 14px;
}
.feature__media img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
  border: 1px solid var(--border-light);
  margin-bottom: 14px;
}
.feature__text p { font-size: 14px; line-height: 1.6; color: var(--text-body); }
.feature__note {
  font-size: 13px !important;
  line-height: 1.55;
  color: var(--text-muted) !important;
  margin-top: 8px;
}

/* ── 05 Avis ─────────────────────────────────────────────── */
.reviews { padding: 34px 0 36px; }
.reviews__title {
  font-size: 22px;
  line-height: 1.15;
  margin: 0 0 20px;
}
.reviews__track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 0 var(--pad-x) 6px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.reviews__track::-webkit-scrollbar { display: none; }
.review {
  flex: 0 0 242px;
  scroll-snap-align: start;
  border: 1px solid rgba(255, 255, 255, .18);
  padding: 20px;
}
.review__stars {
  font: 700 10px/1 var(--font-mono);
  letter-spacing: 2px;
  color: #fff;
  margin-bottom: 12px;
}
.review__text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--on-dark-90);
  margin-bottom: 14px;
}
.review__name {
  font: 700 10px/1 var(--font-mono);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ── 06 Infos pratiques ──────────────────────────────────── */
.infos__media img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  border: 1px solid var(--border-light);
  margin-bottom: 20px;
}
.infos__table { border-top: 1.5px solid var(--rule); }
.infos__table tr { border-bottom: 1px solid var(--border); }
.infos__table th,
.infos__table td {
  padding: 13px 0;
  vertical-align: top;
}
.infos__table th {
  width: 36%;
  text-align: left;
  font: 700 10px/1.4 var(--font-mono);
  letter-spacing: .5px;
  text-transform: uppercase;
  padding-top: 15px;
  padding-right: 16px;
}
.infos__table td {
  text-align: right;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-body);
}
.infos__cta { margin-top: 22px; }

/* ── 07 Lieu / Accès ─────────────────────────────────────── */
.place__title { font-size: 22px; margin: 0 0 3px; }
.place__address {
  font: 400 11.5px/1.5 var(--font-mono);
  letter-spacing: .5px;
  color: var(--on-dark-60);
  margin-bottom: 20px;
}
.transport { border-top: 1px solid var(--border-dark-strong); }
.transport__row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-dark);
}
.transport__mode {
  flex: 0 0 118px;
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 10px/1.2 var(--font-mono);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.transport__mode svg { flex: 0 0 auto; }
.transport__detail {
  flex: 1;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--on-dark-75);
}
.place__head .link-underline { margin-top: 20px; }
.place__grid > .transport { margin-bottom: 20px; }

/* ── 08 FAQ ──────────────────────────────────────────────── */
.faq__title { font-size: 24px; margin: 0 0 4px; }
.faq__lead { font-size: 13.5px; color: var(--text-muted); margin-bottom: 16px; }
.faq__cat {
  font: 700 10px/1.4 var(--font-mono);
  letter-spacing: 2px;
  color: var(--text-label);
  margin: 20px 0 4px;
}
.qa { border-bottom: 1px solid var(--border); }
.qa__q {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
}
.qa__q::-webkit-details-marker { display: none; }
.qa__q h3 {
  flex: 1;
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
}
.qa__q::after {
  content: '+';
  flex: 0 0 auto;
  font: 400 18px/1 var(--font-mono);
}
.qa[open] > .qa__q::after { content: '\2212'; }
.qa__a {
  font-size: 13px;
  line-height: 1.58;
  color: var(--text-soft);
  padding-bottom: 15px;
}

/* ── 09 Galerie ──────────────────────────────────────────── */
.gallery { padding-bottom: 0; }
.gallery__head { margin-bottom: 16px; }
.gallery__title { font-size: 22px; margin: 0 0 4px; }
.gallery__handle { font: 700 12px/1.4 var(--font-mono); color: var(--black); }
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
.gallery__grid img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

/* ═══ FOOTER ═══════════════════════════════════════════════ */
.site-footer {
  background: var(--black);
  color: #fff;
  padding: 0 0 40px;
}
.footer-grid {
  display: grid;
  gap: 26px;
  padding: 26px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.footer-logo {
  display: block;
  height: 26px;
  width: auto;
  filter: brightness(0) invert(1);
  margin-bottom: 14px;
}
.footer-baseline {
  font: 400 12px/1.6 var(--font-mono);
  letter-spacing: .5px;
  color: var(--on-dark-50);
}
.footer-label {
  font: 700 8px/1 var(--font-mono);
  letter-spacing: 1.5px;
  color: var(--on-dark-48);
  margin-bottom: 9px;
  text-transform: uppercase;
}
.footer-partners { display: flex; flex-wrap: wrap; gap: 26px; }
.footer-partners img { display: block; height: 20px; width: auto; }
.footer-partner-secret { height: 22px !important; }
.footer-email {
  font: 700 13px/1.4 var(--font-mono);
  letter-spacing: .3px;
  color: #fff;
  word-break: break-word;
}
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 16px;
  font: 700 10px/1 var(--font-mono);
  letter-spacing: 1px;
  color: var(--on-dark-75);
}
.footer-bottom {
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  font: 700 9px/1 var(--font-mono);
  letter-spacing: 1px;
  color: var(--on-dark-75);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.footer-legal a:hover { color: #fff; }
.footer-copy {
  font: 400 9.5px/1.6 var(--font-mono);
  color: var(--on-dark-48);
}
.footer-credit {
  margin-top: .5rem;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--on-dark-48);
}
/* Souligné : le lien doit rester identifiable sans la couleur seule. */
.footer-credit a {
  color: var(--on-dark-75);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-credit a:hover { color: #fff; }

/* ═══ BARRE D'ONGLETS MOBILE ═══════════════════════════════ */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  background: rgba(10, 10, 10, .96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding: 9px 12px calc(12px + env(safe-area-inset-bottom, 0px));
}
.tabbar__group { display: flex; flex: 1; justify-content: space-around; }
.tabbar__spacer { flex: 0 0 66px; }
.tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 6px 2px;
  color: var(--on-dark-55);
  transition: color .2s ease;
}
.tabbar__item span {
  font: 700 8px/1 var(--font-mono);
  letter-spacing: .3px;
}
.tabbar__item.is-active,
.tabbar__item[aria-expanded="true"] { color: #fff; }

/* FAB Billets */
.fab {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.fab__circle {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #fff;
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, .6);
}
/* Halo pulsé : on anime transform/opacity (composables) et non box-shadow. */
.fab__circle::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 13px rgba(255, 255, 255, .4);
  animation: fabpulse 2.8s ease-out infinite;
  will-change: transform, opacity;
  pointer-events: none;
}
@keyframes fabpulse {
  0%        { transform: scale(.86); opacity: .5; }
  70%, 100% { transform: scale(1.3); opacity: 0; }
}
.fab__label {
  font: 700 9px/1 var(--font-mono);
  letter-spacing: .5px;
  color: #fff;
}

/* Réserve de place sous le contenu pour la barre fixe */
.site-footer { padding-bottom: calc(40px + 92px + env(safe-area-inset-bottom, 0px)); }

/* ═══ MENU PLEIN ÉCRAN MOBILE ══════════════════════════════ */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  background: var(--black);
  color: #fff;
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .42s cubic-bezier(.32, .72, 0, 1), opacity .3s ease, visibility .42s;
}
.mobile-menu.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.mobile-menu__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 20px 15px;
  border-bottom: 1px solid var(--border-dark);
}
.mobile-menu__head img {
  height: 22px;
  width: auto;
  filter: brightness(0) invert(1);
}
.mobile-menu__close {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease;
}
.mobile-menu__close:hover { background: rgba(255, 255, 255, .08); }
.mobile-menu__body {
  flex: 1;
  overflow-y: auto;
  padding: 22px 20px calc(30px + env(safe-area-inset-bottom, 0px));
}
.menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  padding: 15px 4px 15px 0;
  transition: padding-left .2s ease;
}
.menu-row:hover { padding-left: 10px; }
.menu-row__left { display: flex; align-items: baseline; gap: 13px; }
.menu-row__n {
  font: 700 11px/1 var(--font-mono);
  color: var(--on-dark-50);
}
.menu-row__label {
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.3px;
  text-transform: uppercase;
}
.menu-row__arrow { font-size: 16px; color: var(--on-dark-50); }
.mobile-menu__rule {
  height: 1px;
  background: var(--border-dark);
  border: 0;
  margin: 24px 0 18px;
}
.mobile-menu__email {
  display: inline-block;
  font: 700 14px/1.4 var(--font-mono);
  letter-spacing: .3px;
}
.mobile-menu__social {
  display: flex;
  gap: 20px;
  margin-top: 16px;
  font: 700 10px/1 var(--font-mono);
  letter-spacing: 1px;
  color: rgba(255, 255, 255, .8);
}
.mobile-menu__body .btn { margin-top: 26px; }

body.menu-open { overflow: hidden; }

/* ═══════════════════════════════════════════════════════════
   ≥ 640px · respirations intermédiaires
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 640px) {
  :root { --pad-x: 32px; }

  .hero__media img { height: 460px; }
  .hero__title { font-size: 42px; }
  .btn--block { display: inline-flex; width: auto; justify-content: flex-start; }
  .infos__cta, .mobile-menu__body .btn { display: flex; width: 100%; justify-content: space-between; }
  .stats__big { font-size: 26px; }
  .stats__sub { font-size: 9px; }
  .feature__media img { height: 320px; }
  .gallery__grid { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .review { flex: 0 0 300px; }
}

/* ═══════════════════════════════════════════════════════════
   ≥ 1024px · DESKTOP : en-tête collant, nav horizontale,
   grilles 2 et 3 colonnes. Plus de barre d'onglets.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  :root { --pad-x: 60px; }

  body { font-size: 16px; }

  .only-desktop { display: inline; }

  .section {
    padding: 78px 0;
    scroll-margin-top: calc(var(--header-h) + 8px);
  }

  /* ── Header ──────────────────────────────────────────── */
  .site-header,
  .is-home .site-header {
    display: flex;
    height: var(--header-h);
    padding: 0 40px;
  }
  .site-header__logo img { height: 24px; }
  .site-nav {
    display: flex;
    align-items: center;
    gap: 26px;
  }
  .site-nav__link {
    font: 700 11px/1 var(--font-mono);
    letter-spacing: 1.2px;
    color: var(--on-dark-55);
    transition: color .2s ease;
  }
  .site-nav__link:hover,
  .site-nav__link.is-active { color: #fff; }
  .site-header__cta { padding: 11px 20px; font-size: 11px; gap: 8px; }

  /* ── Hero split ──────────────────────────────────────── */
  .hero {
    display: grid;
    grid-template-columns: 1.08fr 1fr;
    min-height: 600px;
  }
  .hero__body {
    order: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--black);
    color: #fff;
    padding: 60px;
    border-bottom: 0;
  }
  .hero__media {
    order: 2;
    position: relative;
    background: #000;
    min-height: 600px;
  }
  .hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .hero__logo { display: none; }
  .hero .eyebrow--lead {
    font-size: 12px;
    letter-spacing: 3px;
    color: #fff;
    margin-bottom: 26px;
  }
  .hero__title {
    font-size: 58px;
    line-height: .96;
    letter-spacing: -1.6px;
    margin-bottom: 24px;
  }
  .hero__sub {
    font-size: 17px;
    line-height: 1.6;
    color: var(--on-dark-70);
    max-width: 440px;
    margin-bottom: 0;
  }
  .hero__actions {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 34px;
  }
  .hero__actions .btn { padding: 17px 30px; }
  .hero__fever {
    height: 15px;
    margin-top: 0;
    filter: none; /* le SVG est déjà blanc, on est sur fond noir */
  }

  /* Le diviseur cinétique est une signature mobile */
  .marquee { display: none; }

  /* ── Stats : bande blanche sur desktop ───────────────── */
  .stats {
    background: #fff;
    color: var(--text);
    border-bottom: 1px solid var(--border);
  }
  .stats__item {
    padding: 44px 20px;
    border-right: 1px solid var(--border-light);
  }
  .stats__icon {
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
    /* Les fichiers sources sont blancs sur transparent : ils ont ete
       dessines pour la version sombre de ce bandeau, ou le filtre les
       remet en blanc. Ici le fond repasse en blanc, et « filter: none »
       laissait donc une icone blanche sur fond blanc, c'est-a-dire rien.
       brightness(0) la rend noire, comme le reste du bandeau clair. */
    filter: brightness(0);
    opacity: 1;
  }
  .stats__big { font-size: 40px; letter-spacing: -1px; }
  .stats__sub {
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--text-label);
    margin-top: 10px;
  }

  /* ── 01 La Fondation ─────────────────────────────────── */
  .intro { padding: 90px 0; }
  .intro .eyebrow { margin-bottom: 26px; }
  .intro__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
  }
  .intro__title {
    font-size: 42px;
    line-height: 1.06;
    letter-spacing: -1px;
    margin: 0;
  }
  .intro__text p { font-size: 16px; line-height: 1.75; }
  .intro__text p + p { margin-top: 16px; }

  /* ── Features alternées ──────────────────────────────── */
  .feature__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
  }
  .feature__body { display: block; }
  .feature__media { order: 1; }
  .feature__body { order: 2; }
  .feature--reverse .feature__media { order: 2; }
  .feature--reverse .feature__body { order: 1; }

  .feature .eyebrow { margin-bottom: 16px; }
  .feature__title {
    font-size: 34px;
    line-height: 1.08;
    letter-spacing: -.8px;
    margin: 0 0 20px;
  }
  .feature__media img { height: 440px; margin-bottom: 0; }
  .feature__text p { font-size: 16px; line-height: 1.72; }
  .feature__note { font-size: 14px !important; margin-top: 10px; }

  /* ── 05 Avis ─────────────────────────────────────────── */
  .reviews { padding: 80px 0; }
  .reviews .wrap { padding-bottom: 34px; }
  .reviews .eyebrow { margin-bottom: 14px; }
  .reviews__title {
    font-size: 40px;
    line-height: 1.08;
    letter-spacing: -.8px;
    max-width: 820px;
    margin: 0;
  }
  .reviews__track {
    gap: 20px;
    padding: 0 max(var(--pad-x), calc((100vw - var(--wrap)) / 2 + var(--pad-x))) 12px;
  }
  .review { flex: 0 0 380px; padding: 32px; }
  .review__stars { font-size: 11px; margin-bottom: 16px; }
  .review__text { font-size: 15px; line-height: 1.6; margin-bottom: 18px; }
  .review__name { font-size: 11px; }

  /* ── 06 Infos pratiques ──────────────────────────────── */
  .infos { padding: 90px 0; }
  .infos .eyebrow { margin-bottom: 26px; }
  .infos__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
  }
  .infos__media img { height: 520px; margin-bottom: 0; }
  .infos__table th,
  .infos__table td { padding: 17px 0; }
  .infos__table th { width: 38%; font-size: 11px; padding-top: 19px; padding-right: 24px; }
  .infos__table td { font-size: 15px; line-height: 1.5; }
  .infos__cta { margin-top: 28px; padding: 18px 24px; }

  /* ── 07 Lieu / Accès ─────────────────────────────────── */
  .place { padding: 90px 0; }
  .place .eyebrow { margin-bottom: 26px; }
  .place__grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 64px;
    align-items: start;
  }
  .place__title { font-size: 40px; letter-spacing: -.8px; margin-bottom: 8px; }
  .place__address { font-size: 13px; margin-bottom: 26px; }
  .place__head .link-underline { margin-top: 0; }
  .place__grid > .transport { margin-bottom: 0; }
  .transport__row { gap: 24px; padding: 15px 0; }
  .transport__mode { flex: 0 0 184px; font-size: 11px; gap: 13px; }
  .transport__detail { font-size: 15px; line-height: 1.45; }

  /* ── 08 FAQ : 3 colonnes, une par catégorie ──────────── */
  .faq { padding: 90px 0; }
  .faq .eyebrow { margin-bottom: 12px; }
  .faq__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 46px;
  }
  .faq__title { font-size: 40px; letter-spacing: -.8px; margin: 0; }
  .faq__lead { font-size: 15px; margin: 0; }
  .faq__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
    align-items: start;
  }
  .faq__cat {
    font-size: 11px;
    color: var(--black);
    padding-bottom: 12px;
    border-bottom: 2px solid var(--black);
    margin: 0;
  }
  .qa__q { padding: 15px 0; }
  .qa__q h3 { font-size: 14.5px; }
  .qa__a { font-size: 13.5px; line-height: 1.6; padding-bottom: 16px; }

  /* ── 09 Galerie ──────────────────────────────────────── */
  .gallery { padding: 90px 0 0; }
  .gallery__head { margin-bottom: 40px; }
  .gallery .eyebrow { margin-bottom: 14px; }
  .gallery__headline {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
  }
  .gallery__title { font-size: 40px; letter-spacing: -.8px; margin: 0; }
  .gallery__handle { font-size: 13px; white-space: nowrap; }
  .gallery__grid { grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0 6px; }

  /* ── Footer ──────────────────────────────────────────── */
  .site-footer { padding: 0 0 40px; }
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1.2fr;
    gap: 48px;
    align-items: start;
    padding: 56px 0 0;
    border-top: 0;
  }
  .footer-logo { height: 30px; margin-bottom: 16px; }
  .footer-partners { flex-direction: column; gap: 22px; }
  .footer-email { font-size: 14px; }
  .footer-social { gap: 20px; margin-top: 20px; }
  .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 28px;
    margin-top: 36px;
    padding-top: 20px;
  }
  .footer-legal { margin-bottom: 0; font-size: 10px; }
  .footer-copy { font-size: 10px; flex: 1 1 320px; }
  .footer-credit { margin-top: 0; }

  /* ── Plus de nav mobile ──────────────────────────────── */
  .tabbar, .mobile-menu { display: none; }
}

/* Le header collant du desktop mérite une ombre légère au scroll */
@media (min-width: 1024px) {
  .site-header { box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
}

/* ═══════════════════════════════════════════════════════════
   PAGES INTÉRIEURES (mentions légales, RGPD, 404)
   Même grammaire éditoriale : mono pour les labels, filets nets.
   ═══════════════════════════════════════════════════════════ */
.page {
  background: #fff;
  padding: 30px 0 50px;
}
.breadcrumb {
  font: 700 9px/1.6 var(--font-mono);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-label);
  margin-bottom: 26px;
}
.breadcrumb a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.breadcrumb span[aria-current] { color: var(--text-label); }

.page__title {
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -.6px;
  text-transform: uppercase;
  margin: 0 0 20px;
}
.page__lead {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-soft);
  padding-bottom: 24px;
  border-bottom: 1.5px solid var(--rule);
  margin-bottom: 8px;
}
.page h2 {
  font-size: 15px;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin: 34px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.page__lead + h2 { border-top: 0; padding-top: 0; }
.page p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-body);
}
.page p + p { margin-top: 12px; }
.page ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.page ul li {
  position: relative;
  padding: 0 0 0 22px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-body);
}
.page ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  background: var(--black);
}
.page strong { color: var(--text); font-weight: 700; }

.page__table {
  margin: 16px 0 0;
  border-top: 1.5px solid var(--rule);
  font-size: 13px;
}
.page__table th,
.page__table td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--border);
  line-height: 1.55;
}
.page__table thead th {
  font: 700 9px/1.4 var(--font-mono);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text);
}
.page__table tbody td { color: var(--text-body); }
.page__table tbody td:first-child { color: var(--text); font-weight: 700; }

/* 404 : les lignes reprennent le style du menu, en version claire */
.error404__links { margin: 26px 0 0; }
.error404__links li { padding: 0; margin: 0; }
.error404__links li::before { content: none; }
.error404 .menu-row {
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.error404 .menu-row__n { color: var(--text-label); }
.error404 .menu-row__arrow { color: var(--text-muted); }
.error404__cta { margin-top: 30px; }

@media (min-width: 1024px) {
  .page { padding: 60px 0 90px; }
  .page .wrap { max-width: 820px; }
  .page__title { font-size: 46px; letter-spacing: -1.2px; margin-bottom: 24px; }
  .page__lead { font-size: 18px; line-height: 1.6; padding-bottom: 30px; }
  .page h2 { font-size: 17px; margin: 44px 0 14px; padding-top: 24px; }
  .page p, .page ul li { font-size: 16px; }
  .page__table { font-size: 14px; }
  .error404__cta { margin-top: 40px; }
}

/* ═══════════════════════════════════════════════════════════
   Refonte multi-pages
   Header solide, navigation déroulante, fil d'ariane,
   bandeau de conversion. Mobile-first, deux seuils.
   ═══════════════════════════════════════════════════════════ */

/* ── Header des pages intérieures ─────────────────────────
   L'accueil garde son header transparent posé sur le hero
   (.is-home). Partout ailleurs : fond blanc, filet noir. */
body:not(.is-home) .site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--header-h);
  padding: 0 var(--pad-x);
  background: var(--white);
  border-bottom: 1px solid var(--rule);
}
body:not(.is-home) .site-header__logo img { height: 22px; width: auto; }

/* Le fil d'ariane se cale sous un header collant. */
body:not(.is-home) .breadcrumb { padding-top: 18px; }

/* ── Fil d'ariane ─────────────────────────────────────────── */
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumb__item + .breadcrumb__item::before {
  content: "/";
  margin-right: 6px;
  color: var(--text-label);
}
.breadcrumb__item { display: flex; align-items: center; }

/* ── Navigation déroulante ────────────────────────────────
   Ouverture au survol ET au focus clavier, sans JavaScript :
   :focus-within suffit. Masquée sous 1024 px, où la tabbar
   et le menu plein écran prennent le relais. */
.site-nav__list {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav__item { position: relative; }

.site-nav__panel {
  position: absolute;
  top: calc(100% + 14px);
  left: -18px;
  z-index: 70;
  display: grid;
  min-width: 230px;
  padding: 6px 0;
  background: var(--black);
  border: 1px solid var(--border-dark-strong);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.site-nav__item:hover .site-nav__panel,
.site-nav__item:focus-within .site-nav__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}
/* Rattrape l'espace entre le lien et le panneau : sans ça, le
   survol se perd dans le vide et le panneau se referme. */
.site-nav__panel::before {
  content: "";
  position: absolute;
  inset: -14px 0 100% 0;
}
.site-nav__sub {
  padding: 11px 18px;
  font: 400 14px/1.3 var(--font-display);
  color: var(--on-dark-90);
  transition: background .16s ease, color .16s ease;
}
.site-nav__sub + .site-nav__sub { border-top: 1px solid var(--border-dark); }
.site-nav__sub:hover,
.site-nav__sub:focus-visible { background: rgba(255, 255, 255, .08); color: #fff; }

/* Sur les pages intérieures, le header est blanc : la nav s'inverse. */
body:not(.is-home) .site-nav__link { color: var(--text-soft); }
body:not(.is-home) .site-nav__link:hover { color: var(--black); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); }
body:not(.is-home) .site-nav__link.is-active {
  color: var(--black);
  font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--black);
}
.site-nav__link { padding-bottom: 4px; }

/* ── Sous-niveaux du menu mobile ──────────────────────────── */
.menu-sub {
  display: grid;
  padding: 2px 0 14px 2px;
  border-bottom: 1px solid var(--border-dark);
}
.menu-sub__link {
  min-height: 44px;
  display: flex;
  align-items: center;
  font: 400 15px/1.3 var(--font-display);
  color: var(--on-dark-70);
}
.menu-sub__link:hover, .menu-sub__link:focus-visible { color: #fff; }

/* ── Bandeau de conversion ────────────────────────────────
   Le titre est un <p> : identique sur tout le site, il n'a
   rien à faire dans la hiérarchie des titres. */
.cta {
  padding: 60px 0;
  background: var(--black);
  color: var(--on-dark);
}
.cta__title {
  max-width: 20ch;
  margin: 0 0 16px;
  font: 800 30px/1.06 var(--font-display);
  letter-spacing: -1px;
}
.cta__text {
  max-width: 54ch;
  margin: 0 0 28px;
  font: 400 16px/1.6 var(--font-display);
  color: rgba(255, 255, 255, .82);
}
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .5);
}
.btn--ghost:hover, .btn--ghost:focus-visible { border-color: #fff; background: rgba(255, 255, 255, .08); }


/* ── Focus clavier, partout ───────────────────────────────── */
:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
.site-nav__sub:focus-visible,
.menu-sub__link:focus-visible,
.cta a:focus-visible { outline-color: #fff; }

@media (min-width: 640px) {
  .cta { padding: 72px 0; }
  .cta__title { font-size: 38px; letter-spacing: -1.4px; }
}

@media (min-width: 1024px) {
  body:not(.is-home) .site-header { padding: 0 60px; }
  .cta__title { font-size: 44px; letter-spacing: -1.8px; }
  .cta { padding: 90px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav__panel,
  .site-nav__sub { transition: none; }
}

/* ── Gabarit de page intérieure ──────────────────────────── */
.page-head { padding: 28px 0 36px; }
.page-head__title {
  margin: 12px 0 18px;
  font: 800 40px/.98 var(--font-display);
  letter-spacing: -1.2px;
}
.page-head__lead {
  max-width: 62ch;
  margin: 0;
  font: 400 17px/1.55 var(--font-display);
  color: var(--text-body);
}
.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.btn--outline {
  background: transparent;
  color: var(--black);
  border: 1px solid rgba(0, 0, 0, .35);
}
.btn--outline:hover, .btn--outline:focus-visible { border-color: var(--black); background: #f5f5f5; }

.section { padding: 40px 0; }
.section--rule { border-top: 1px solid var(--border); }
.section__title {
  margin: 0 0 24px;
  font: 800 26px/1.06 var(--font-display);
  letter-spacing: -.6px;
}
.section__note { margin: 22px 0 0; font-size: 15px; }

/* ── Cartes de hub ───────────────────────────────────────── */
.hub-list { margin: 0; padding: 0; list-style: none; }
.hub-list__item + .hub-list__item { border-top: 1px solid var(--border); }
.hub-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 16px;
  min-height: 44px;
  padding: 22px 0;
  color: inherit;
  transition: background .16s ease;
}
.hub-card:hover, .hub-card:focus-visible { background: #fafafa; }
.hub-card__n {
  font: 700 11px/1.6 var(--font-mono);
  letter-spacing: 1px;
  color: var(--text-label);
}
.hub-card__label {
  display: block;
  margin-bottom: 6px;
  font: 800 19px/1.2 var(--font-display);
  letter-spacing: -.3px;
}
.hub-card__text {
  display: block;
  max-width: 58ch;
  font: 400 15px/1.55 var(--font-display);
  color: var(--text-soft);
}
.hub-card__arrow { font-size: 18px; color: var(--text-label); }
.hub-card:hover .hub-card__arrow { color: var(--black); }

/* ── Accès (pages Visiter, fond blanc) ───────────────────
   Classe distincte de .transport, qui appartient à la section
   « Lieu / Accès » de l'accueil : markup différent et fond noir. */
.acces { margin: 0; padding: 0; list-style: none; border-top: 1.5px solid var(--rule); }
.acces__row {
  display: grid;
  grid-template-columns: auto 90px 1fr;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-light);
}
.acces__icon { display: flex; color: var(--black); }
.acces__mode {
  font: 700 11px/1.4 var(--font-mono);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.acces__detail { font-size: 14.5px; line-height: 1.5; color: var(--text-body); }

@media (min-width: 640px) {
  .page-head { padding: 34px 0 44px; }
  .page-head__title { font-size: 56px; letter-spacing: -1.8px; }
  .page-head__lead { font-size: 20px; }
  .section { padding: 52px 0; }
  .hub-card { gap: 22px; }
}

@media (min-width: 1024px) {
  .page-head__title { font-size: 76px; letter-spacing: -2.6px; }
  .section { padding: 60px 0; }
  .section__title { font-size: 34px; }
  .acces__row { grid-template-columns: auto 130px 1fr; }
}

/* ── Listes de questions hors accueil ────────────────────── */
.qa-list { border-top: 1px solid var(--border); }
.qa-list .qa { border-bottom: 1px solid var(--border); }

/* ── Faits en ligne libellé / valeur ─────────────────────── */
.facts { margin: 0; padding: 0; list-style: none; border-top: 1.5px solid var(--rule); }
.facts__item {
  display: grid;
  gap: 2px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-light);
}
.facts__label {
  font: 700 10px/1.6 var(--font-mono);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-label);
}
.facts__value { font-size: 15.5px; line-height: 1.5; }
.section__text { max-width: 68ch; font-size: 16px; line-height: 1.7; color: var(--text-body); }

@media (min-width: 640px) {
  .facts__item { grid-template-columns: 200px 1fr; gap: 20px; align-items: baseline; }
}

/* Le logo est inversé par défaut pour le header noir de l'accueil.
   Sur les pages intérieures, le header est blanc : il reprend sa
   couleur d'origine, sinon il disparaît. */
body:not(.is-home) .site-header__logo img { filter: none; }
body:not(.is-home) .site-header { color: var(--text); }

/* ── Bandeau d'identité (personne, artiste) ──────────────── */
.identity {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 22px 0 24px;
  padding: 0;
  background: var(--border);
  border: 1px solid var(--border);
}
.identity__cell {
  display: grid;
  gap: 3px;
  padding: 14px 16px;
  background: var(--white);
}
.identity__label {
  font: 700 9.5px/1.6 var(--font-mono);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-label);
}
.identity__value { font: 700 14.5px/1.3 var(--font-display); }

/* ── Adresse ─────────────────────────────────────────────── */
.address {
  font-style: normal;
  font-size: 16px;
  line-height: 1.8;
  padding-left: 16px;
  border-left: 2px solid var(--black);
}

/* ── Tableau de données ──────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th, .table td {
  padding: 12px 10px 12px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-light);
}
.table thead th {
  font: 700 10px/1.6 var(--font-mono);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-label);
  border-bottom: 1.5px solid var(--rule);
}
.table tbody th { font-weight: 700; }

/* Une carte de hub sans lien : même gabarit, pas d'interaction. */
.hub-card--static { cursor: default; }
.hub-card--static:hover { background: transparent; }
.hub-card__meta {
  display: block;
  margin-bottom: 8px;
  font: 700 10px/1.6 var(--font-mono);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-label);
}
.section__sub {
  margin: 34px 0 10px;
  font: 800 18px/1.25 var(--font-display);
  letter-spacing: -.3px;
}
.section__text + .section__text { margin-top: 14px; }

@media (min-width: 640px) {
  .identity { grid-template-columns: repeat(3, 1fr); }
  .identity__value { font-size: 16px; }
  .table { font-size: 15px; }
}

@media (min-width: 1024px) {
  .section__sub { font-size: 19px; }
}

/* ═══════════════════════════════════════════════════════════
   Collection : fiche artiste et index
   ═══════════════════════════════════════════════════════════ */

/* ── Hero de fiche ───────────────────────────────────────── */
.artiste-hero { padding: 26px 0 30px; }
.artiste-hero__grid { display: grid; gap: 24px; }
.artiste-hero__title {
  margin: 10px 0 16px;
  font: 800 44px/.92 var(--font-display);
  letter-spacing: -1.4px;
  text-transform: uppercase;
}
/* Le nom reste un seul texte : les deux lignes viennent d'ici, pas d'un <br>. */
.artiste-hero__prenom,
.artiste-hero__nom { display: block; }
.artiste-hero__resume {
  max-width: 54ch;
  margin: 0;
  font: 500 17px/1.5 var(--font-display);
  color: var(--text-body);
}
.artiste-hero__media img { display: block; width: 100%; height: auto; }

/* Remplacement typographique quand aucun visuel n'existe. */
.artiste-hero__initiales {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 190px;
  font: 800 64px/1 var(--font-display);
  letter-spacing: -2px;
  color: #d4d4d4;
  border: 1px solid var(--border);
}

/* ── Corps de texte ──────────────────────────────────────── */
.prose { max-width: 68ch; }
.prose p { font-size: 17px; line-height: 1.7; color: var(--text-body); }
.prose p + p { margin-top: 16px; }

/* ── Œuvres citées ───────────────────────────────────────── */
.oeuvres {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.oeuvre__visuel {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  margin-bottom: 10px;
  border: 1px dashed rgba(0, 0, 0, .28);
}
.oeuvre__visuel span {
  font: 700 9.5px/1 var(--font-mono);
  letter-spacing: 1.4px;
  color: var(--text-label);
}
.oeuvre__cartel { display: grid; gap: 2px; margin: 0; }
.oeuvre__titre { font: 700 14.5px/1.3 var(--font-display); }
.oeuvre__annee,
.oeuvre__technique {
  font: 400 11px/1.5 var(--font-mono);
  color: var(--text-label);
}

/* ── Navigation d'une fiche à l'autre ────────────────────── */
.artiste-nav { border-top: 1px solid var(--border); }
.artiste-nav__grid { display: grid; }
.artiste-nav__link {
  display: grid;
  gap: 5px;
  padding: 22px 0;
  color: inherit;
}
.artiste-nav__link + .artiste-nav__link { border-top: 1px solid var(--border); }
.artiste-nav__label {
  font: 700 10px/1.6 var(--font-mono);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-label);
}
.artiste-nav__nom { font: 800 19px/1.2 var(--font-display); letter-spacing: -.3px; }
.artiste-nav__link:hover .artiste-nav__nom { text-decoration: underline; text-underline-offset: 3px; }

/* ── Filtres par courant ─────────────────────────────────── */
.filtres { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.filtres__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.filtre {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  font: 700 11px/1 var(--font-mono);
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text);
  border: 1px solid rgba(0, 0, 0, .2);
  transition: background .16s ease, color .16s ease;
}
.filtre:hover { background: #f5f5f5; }
.filtre.is-active { background: var(--black); color: #fff; border-color: var(--black); }
.filtre__n { color: var(--text-label); }
.filtre.is-active .filtre__n { color: rgba(255, 255, 255, .6); }

/* ── Grille d'artistes ───────────────────────────────────── */
.grid-artistes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--border);
  border: 1px solid var(--border);
}
.grid-artistes__item { background: var(--white); }
.carte {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 14px;
  color: inherit;
  transition: background .16s ease;
}
.carte:hover { background: #fafafa; }
.carte__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 12px; }
.carte__body { display: grid; gap: 4px; }
.carte__dates { font: 400 11px/1.4 var(--font-mono); color: var(--text-label); }
.carte__nom { font: 800 16px/1.15 var(--font-display); letter-spacing: -.3px; }
.carte__courant { font-size: 13px; color: var(--text-soft); }
.carte__pied {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 12px;
  margin-top: auto;
  padding-top: 14px;
}
.carte__oeuvres { font: 400 11px/1.4 var(--font-mono); color: var(--text-label); }
.carte__fiche { font: 700 11px/1.4 var(--font-mono); letter-spacing: 1px; }

/* Sans visuel : aucun bloc média réservé, le nom prend la place
   et la carte se centre pour tenir la hauteur de sa rangée. */
.carte--sans-image {
  justify-content: center;
  box-shadow: inset 0 3px 0 var(--black);
}
.carte--sans-image .carte__nom { font-size: 23px; line-height: 1.1; }
.carte__ini {
  font: 800 13px/1 var(--font-mono);
  letter-spacing: 2px;
  color: #d4d4d4;
  margin-bottom: 10px;
}

.notice {
  padding: 16px;
  margin: 0 0 24px;
  background: #f5f5f5;
  font-size: 15px;
}

@media (min-width: 640px) {
  .artiste-hero__title { font-size: 60px; letter-spacing: -2px; }
  .oeuvres { grid-template-columns: repeat(3, 1fr); }
  .artiste-nav__grid { grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); }
  .artiste-nav__link { background: var(--white); padding: 24px 18px; }
  .artiste-nav__link + .artiste-nav__link { border-top: 0; }
  .artiste-nav__link--next { text-align: right; }
}

@media (min-width: 1024px) {
  .artiste-hero { padding: 40px 0 50px; }
  .artiste-hero__grid { grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
  .artiste-hero__title { font-size: 88px; letter-spacing: -3px; }
  .artiste-hero__initiales { min-height: 300px; font-size: 96px; }
  .grid-artistes { grid-template-columns: repeat(3, 1fr); }
  .carte { padding: 20px; }
  .carte--sans-image .carte__nom { font-size: 30px; }
  .oeuvres { grid-template-columns: repeat(4, 1fr); }
}

/* ═══ Gabarit éditorial : les quatre pages piliers ═══ */
.ed { padding: 24px 0 10px; }
.ed__titre { margin: 0 0 18px; font: 800 38px/.98 var(--font-display); letter-spacing: -1px; }
.ed__chapeau { max-width: 62ch; margin: 0 0 22px; font: 400 17px/1.55 var(--font-display); color: var(--text-body); }
.ed__meta {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 12px 0;
  font: 700 10px/1.6 var(--font-mono); letter-spacing: 1.4px; color: var(--text-label);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}

/* Sommaire : accordeon sous 1024px, colonne collante au-dela. */
.sommaire { margin: 26px 0 30px; background: #fafafa; }
.sommaire__toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: 44px; padding: 0 16px;
  font: 700 11px/1 var(--font-mono); letter-spacing: 1.4px; color: var(--text);
  background: none; border: 1px solid var(--border); cursor: pointer;
}
.sommaire__chevron {
  width: 9px; height: 9px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .18s ease;
}
.sommaire__toggle[aria-expanded="true"] .sommaire__chevron { transform: rotate(-135deg) translateY(-2px); }
.sommaire__liste {
  display: none; margin: 0; padding: 6px 16px 16px; list-style: none; counter-reset: som;
  border: 1px solid var(--border); border-top: 0;
}
.sommaire__toggle[aria-expanded="true"] + .sommaire__liste { display: block; }
.sommaire__item { counter-increment: som; }
.sommaire__item a {
  display: block; min-height: 44px; padding: 12px 0 12px 12px;
  font-size: 14.5px; line-height: 1.35; color: var(--text-label);
  border-left: 2px solid transparent;
}
.sommaire__item a::before {
  content: counter(som, decimal-leading-zero) "  ";
  font: 700 10px var(--font-mono); color: var(--text-label);
}
.sommaire__item a:hover { color: var(--black); }
.sommaire__item a.is-active { color: var(--black); font-weight: 700; border-left-color: var(--black); }

.ed-section { padding: 30px 0; border-top: 1px solid var(--border); }
.ed-section:first-child { border-top: 0; }
.ed-section__titre { margin: 0 0 16px; font: 800 26px/1.06 var(--font-display); letter-spacing: -.6px; scroll-margin-top: 84px; }
.ed .prose h3 { margin: 26px 0 8px; font: 800 18px/1.25 var(--font-display); letter-spacing: -.3px; }
.ed .prose h3:first-child { margin-top: 0; }

/* Encadre definition : du texte ordinaire, le cadre est visuel. */
.definition { margin: 26px 0; padding: 22px 20px; border: 1.5px solid var(--black); }
.definition__label { margin: 0 0 8px; font: 700 10px/1 var(--font-mono); letter-spacing: 1.6px; color: var(--text-label); }
.definition__texte { margin: 0; font: 500 16.5px/1.6 var(--font-display); }
.definition__texte strong { font-weight: 800; }

/* Bloc « a voir a la Fondation ». */
.oeuvre-bloc { margin: 30px 0; border: 1px solid var(--border); }
.oeuvre-bloc__head { padding: 10px 16px; font: 700 10px/1.4 var(--font-mono); letter-spacing: 1.6px; color: #fff; background: var(--black); }
.oeuvre-bloc__grid { display: grid; }
.oeuvre-bloc__visuel { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; border-bottom: 1px solid var(--border); }
.oeuvre-bloc__visuel span { font: 700 9.5px/1 var(--font-mono); letter-spacing: 1.4px; color: var(--text-label); }
.oeuvre-bloc__cartel { padding: 16px; }
.oeuvre-bloc__artiste { margin: 0 0 3px; font: 700 10px/1.4 var(--font-mono); letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-label); }
.oeuvre-bloc__titre { margin: 0 0 8px; font: 800 17px/1.25 var(--font-display); }
.oeuvre-bloc__annee { font-weight: 400; color: var(--text-soft); }
.oeuvre-bloc__legende { margin: 0 0 10px; font-size: 14.5px; line-height: 1.55; color: var(--text-body); }
.oeuvre-bloc__lien { margin: 0; font-size: 13.5px; }

.lies { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.lies__item { border-bottom: 1px solid var(--border); }
.lies__lien { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 14px; min-height: 44px; padding: 14px 0; color: inherit; }
.lies__nom { font: 800 16px/1.2 var(--font-display); }
.lies__meta { font: 400 11px/1.4 var(--font-mono); color: var(--text-label); }
.lies__lien:hover .lies__nom { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 640px) {
  .ed__titre { font-size: 54px; letter-spacing: -1.6px; }
  .ed__chapeau { font-size: 20px; }
  .oeuvre-bloc__grid { grid-template-columns: 1fr 1fr; }
  .oeuvre-bloc__visuel { border-bottom: 0; border-right: 1px solid var(--border); }
}

@media (min-width: 1024px) {
  .ed { padding: 40px 0 20px; }
  .ed__grid { display: grid; grid-template-columns: 230px minmax(0, 1fr); column-gap: 80px; }
  .ed__head { grid-column: 1 / -1; }
  .ed__titre { font-size: 76px; letter-spacing: -2.6px; }
  .ed-section__titre { font-size: 32px; }
  .ed .prose { max-width: 72ch; }
  .sommaire { position: sticky; top: 100px; align-self: start; margin: 0; background: none; }
  .sommaire__toggle { display: none; }
  .sommaire__liste { display: block; padding: 0; border: 0; }
  .ed-section { padding: 40px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sommaire__chevron { transition: none; }
  html { scroll-behavior: auto; }
}

/* ── Bloc de telechargement ──────────────────────────────── */
.download {
  display: grid;
  gap: 12px;
  padding: 22px 20px;
  color: inherit;
  border: 1.5px solid var(--black);
  transition: background .16s ease;
}
.download:hover { background: #fafafa; }
.download__titre { display: block; margin-bottom: 6px; font: 800 18px/1.25 var(--font-display); letter-spacing: -.3px; }
.download__desc { display: block; max-width: 56ch; font-size: 15px; line-height: 1.55; color: var(--text-body); }
.download__meta {
  font: 700 10px/1.6 var(--font-mono);
  letter-spacing: 1.4px;
  color: var(--text-label);
  white-space: nowrap;
}

@media (min-width: 640px) {
  .download { grid-template-columns: 1fr auto; align-items: start; gap: 24px; }
  .download__meta { text-align: right; }
}

/* ═══ Avis Google ═══════════════════════════════════════════
   Aucun AggregateRating n'est emis : Google interdit qu'une
   entreprise balise sur son propre site une note qui la
   concerne. L'affichage reste visuel, le rich snippet est
   porte par la fiche Google elle-meme. */

.avis { display: grid; gap: 26px; }

/* Etoiles : une couche vide, une couche pleine coupee au pourcentage. */
/* width max-content + justify-self : dans un conteneur grid, un
   inline-block s'etire sur toute la colonne. La couche pleine, calee
   en pourcentage sur ce bloc etire, afficherait alors cinq etoiles
   pleines quelle que soit la note. */
.stars {
  position: relative; display: inline-block;
  width: max-content; justify-self: start;
  white-space: nowrap; font-size: 17px; line-height: 1; letter-spacing: 2px;
}
.stars__vide { color: rgba(0, 0, 0, .18); }
.stars__plein { position: absolute; top: 0; left: 0; overflow: hidden; color: #f5a623; }
.stars--sm { font-size: 13px; letter-spacing: 1.5px; }
.avis--dark .stars__vide { color: rgba(255, 255, 255, .22); }

.avis__resume { display: grid; gap: 20px; padding: 20px; border: 1px solid var(--border); }
.avis--dark .avis__resume { border-color: var(--border-dark-strong); }
.avis__note-bloc { display: grid; gap: 6px; justify-items: start; }
.avis__note { margin: 0; font: 800 46px/1 var(--font-display); letter-spacing: -2px; }
.avis__compte { margin: 0; font: 400 12px/1.4 var(--font-mono); color: var(--text-label); }
.avis--dark .avis__compte { color: var(--on-dark-60); }

.avis__barres { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.avis__barre { display: grid; grid-template-columns: 10px 1fr 34px; align-items: center; gap: 8px; }
.avis__barre-label, .avis__barre-nb { font: 400 11px/1.4 var(--font-mono); color: var(--text-label); }
.avis__barre-nb { text-align: right; }
.avis--dark .avis__barre-label, .avis--dark .avis__barre-nb { color: var(--on-dark-60); }
.avis__barre-piste { height: 6px; background: rgba(0, 0, 0, .1); }
.avis--dark .avis__barre-piste { background: rgba(255, 255, 255, .16); }
.avis__barre-jauge { display: block; height: 100%; background: #f5a623; }

.avis__liste { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--border); border: 1px solid var(--border); }
.avis--dark .avis__liste { background: var(--border-dark); border-color: var(--border-dark-strong); }
.avis__item { display: grid; gap: 9px; padding: 18px; background: var(--white); }
.avis--dark .avis__item { background: var(--black); }
.avis__tete { display: flex; align-items: center; gap: 11px; }
.avis__avatar {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%;
  font: 700 15px/1 var(--font-display); color: #fff;
}
.avis--dark .avis__avatar { outline: 1px solid rgba(255, 255, 255, .25); }
.avis__identite { display: grid; gap: 2px; }
.avis__nom { margin: 0; font: 700 14.5px/1.2 var(--font-display); }
.avis__source { display: flex; align-items: center; gap: 5px; margin: 0; font: 400 10.5px/1.3 var(--font-mono); color: var(--text-label); }
.avis--dark .avis__source { color: var(--on-dark-55); }
.g-logo { flex: 0 0 auto; }
.avis__texte { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-body); }
.avis--dark .avis__texte { color: rgba(255, 255, 255, .82); }

.avis__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.avis__maj { margin: 0; font: 400 11px/1.5 var(--font-mono); color: var(--text-label); }
.avis--dark .avis__maj { color: var(--on-dark-50); }

@media (min-width: 640px) {
  .avis__resume { grid-template-columns: auto 1fr; align-items: center; gap: 36px; padding: 24px 28px; }
  .avis__liste { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .avis__note { font-size: 56px; }
  .avis__liste { grid-template-columns: repeat(3, 1fr); }
}

/* Largeurs en pourcentage, sous forme de classes.
   La CSP du site interdit les styles inline : une jauge ne peut pas
   porter son width en attribut. 101 classes de 3 Ko au total, c'est
   le prix a payer pour garder style-src 'self'. */
.fill-0 { width: 0%; }
.fill-1 { width: 1%; }
.fill-2 { width: 2%; }
.fill-3 { width: 3%; }
.fill-4 { width: 4%; }
.fill-5 { width: 5%; }
.fill-6 { width: 6%; }
.fill-7 { width: 7%; }
.fill-8 { width: 8%; }
.fill-9 { width: 9%; }
.fill-10 { width: 10%; }
.fill-11 { width: 11%; }
.fill-12 { width: 12%; }
.fill-13 { width: 13%; }
.fill-14 { width: 14%; }
.fill-15 { width: 15%; }
.fill-16 { width: 16%; }
.fill-17 { width: 17%; }
.fill-18 { width: 18%; }
.fill-19 { width: 19%; }
.fill-20 { width: 20%; }
.fill-21 { width: 21%; }
.fill-22 { width: 22%; }
.fill-23 { width: 23%; }
.fill-24 { width: 24%; }
.fill-25 { width: 25%; }
.fill-26 { width: 26%; }
.fill-27 { width: 27%; }
.fill-28 { width: 28%; }
.fill-29 { width: 29%; }
.fill-30 { width: 30%; }
.fill-31 { width: 31%; }
.fill-32 { width: 32%; }
.fill-33 { width: 33%; }
.fill-34 { width: 34%; }
.fill-35 { width: 35%; }
.fill-36 { width: 36%; }
.fill-37 { width: 37%; }
.fill-38 { width: 38%; }
.fill-39 { width: 39%; }
.fill-40 { width: 40%; }
.fill-41 { width: 41%; }
.fill-42 { width: 42%; }
.fill-43 { width: 43%; }
.fill-44 { width: 44%; }
.fill-45 { width: 45%; }
.fill-46 { width: 46%; }
.fill-47 { width: 47%; }
.fill-48 { width: 48%; }
.fill-49 { width: 49%; }
.fill-50 { width: 50%; }
.fill-51 { width: 51%; }
.fill-52 { width: 52%; }
.fill-53 { width: 53%; }
.fill-54 { width: 54%; }
.fill-55 { width: 55%; }
.fill-56 { width: 56%; }
.fill-57 { width: 57%; }
.fill-58 { width: 58%; }
.fill-59 { width: 59%; }
.fill-60 { width: 60%; }
.fill-61 { width: 61%; }
.fill-62 { width: 62%; }
.fill-63 { width: 63%; }
.fill-64 { width: 64%; }
.fill-65 { width: 65%; }
.fill-66 { width: 66%; }
.fill-67 { width: 67%; }
.fill-68 { width: 68%; }
.fill-69 { width: 69%; }
.fill-70 { width: 70%; }
.fill-71 { width: 71%; }
.fill-72 { width: 72%; }
.fill-73 { width: 73%; }
.fill-74 { width: 74%; }
.fill-75 { width: 75%; }
.fill-76 { width: 76%; }
.fill-77 { width: 77%; }
.fill-78 { width: 78%; }
.fill-79 { width: 79%; }
.fill-80 { width: 80%; }
.fill-81 { width: 81%; }
.fill-82 { width: 82%; }
.fill-83 { width: 83%; }
.fill-84 { width: 84%; }
.fill-85 { width: 85%; }
.fill-86 { width: 86%; }
.fill-87 { width: 87%; }
.fill-88 { width: 88%; }
.fill-89 { width: 89%; }
.fill-90 { width: 90%; }
.fill-91 { width: 91%; }
.fill-92 { width: 92%; }
.fill-93 { width: 93%; }
.fill-94 { width: 94%; }
.fill-95 { width: 95%; }
.fill-96 { width: 96%; }
.fill-97 { width: 97%; }
.fill-98 { width: 98%; }
.fill-99 { width: 99%; }
.fill-100 { width: 100%; }

/* Teintes d'avatar, derivees du nom cote PHP. */
.avis__avatar--1 { background: #0a0a0a; }
.avis__avatar--2 { background: #404040; }
.avis__avatar--3 { background: #525252; }
.avis__avatar--4 { background: #262626; }
.avis__avatar--5 { background: #737373; }

/* ── Bandeau d'avis compact ──────────────────────────────── */
.avis-bandeau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 22px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--border);
}
.avis-bandeau--dark { border-color: var(--border-dark-strong); }
.avis-bandeau__note { font: 800 19px/1 var(--font-display); letter-spacing: -.5px; }
.avis-bandeau__compte { font: 400 11.5px/1.4 var(--font-mono); color: var(--text-label); }
.avis-bandeau--dark .avis-bandeau__compte { color: var(--on-dark-60); }
.avis-bandeau__lien {
  margin-left: auto;
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Sous-titre et lien de la section avis de l'accueil. */
.reviews__sous { margin: 8px 0 0; font: 400 12px/1.5 var(--font-mono); color: var(--on-dark-55); }
.reviews__lien { margin: 20px 0 0; font-size: 14px; }
.avis__traduit { margin: -3px 0 0; font: 400 10.5px/1.4 var(--font-mono); color: var(--text-label); }
.avis--dark .avis__traduit { color: var(--on-dark-50); }

/* ── Widget avis sans repartition (hors page dediee) ─────
   Le resume se resume a la note : il passe en ligne plutot
   qu'en encadre a deux colonnes. */
.avis__resume--simple {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 14px 18px;
}
.avis__resume--simple .avis__note-bloc {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.avis__resume--simple .avis__note { font-size: 30px; letter-spacing: -1.2px; }
.avis__resume--simple .avis__compte { margin: 0; }

/* Les avis tronques tiennent tous la meme hauteur : la grille
   ne se deforme plus selon la longueur du temoignage. */
.avis__texte { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }

@media (min-width: 1024px) {
  .avis__resume--simple .avis__note { font-size: 34px; }
}

/* ═══ Mega-menu (desktop) ═══════════════════════════════════
   Remplace le petit panneau de 230 px. Bandeau pleine largeur
   sous le header, ouvert au survol ET au focus clavier, sans
   une ligne de JavaScript. Masque sous 1024 px, ou la tabbar
   et le menu plein ecran prennent le relais. */

.mega { display: none; }

@media (min-width: 1024px) {
  .site-nav__item { position: static; }

  .mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 70;
    display: block;
    background: var(--black);
    border-top: 1px solid var(--border-dark-strong);
    border-bottom: 1px solid var(--border-dark-strong);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .site-nav__item:hover .mega,
  .site-nav__item:focus-within .mega {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .mega__inner {
    display: grid;
    grid-template-columns: 1fr 1.5fr 280px;
    gap: 44px;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 34px 60px 38px;
  }

  /* Colonne 1 : de quoi parle cette entree. */
  .mega__titre {
    margin: 0 0 10px;
    font: 700 10px/1.4 var(--font-mono);
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--on-dark-55);
  }
  .mega__texte {
    margin: 0 0 16px;
    max-width: 30ch;
    font: 500 17px/1.45 var(--font-display);
    color: #fff;
    letter-spacing: -.2px;
  }
  .mega__tout {
    font: 700 11px/1 var(--font-mono);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #fff;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .45);
    padding-bottom: 3px;
  }
  .mega__tout:hover { box-shadow: inset 0 -2px 0 #fff; }

  /* Colonne 2 : les liens, en deux colonnes au-dela de 4 entrees. */
  .mega__liens {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
  }
  .mega__lien {
    display: grid;
    gap: 3px;
    padding: 13px 16px;
    color: #fff;
    border-top: 1px solid var(--border-dark);
    transition: background .16s ease;
  }
  /* Les deux premiers liens n'ont pas de filet au-dessus. */
  .mega__lien:nth-child(-n+2) { border-top: 0; }
  .mega__lien:hover, .mega__lien:focus-visible { background: rgba(255, 255, 255, .08); }
  .mega__lien-label { font: 700 14.5px/1.25 var(--font-display); letter-spacing: -.2px; }
  .mega__lien-desc { font-size: 12.5px; line-height: 1.4; color: var(--on-dark-60); }

  /* Colonne 3 : la preuve et l'action. */
  .mega__aside { display: grid; gap: 12px; align-content: start; }
  .mega__aside .avis-bandeau { margin: 0; padding: 11px 13px; gap: 6px 9px; }
  .mega__aside .avis-bandeau__note { font-size: 17px; }
  .mega__aside .avis-bandeau__compte { font-size: 10.5px; }
  .mega__aside .avis-bandeau__lien { font-size: 10px; }
  .mega__adresse {
    margin: 0;
    font: 400 11.5px/1.6 var(--font-mono);
    color: var(--on-dark-55);
  }

  /* Le header doit pouvoir porter un enfant en position absolue. */
  body:not(.is-home) .site-header,
  .is-home .site-header { position: sticky; }
  .site-header { position: relative; }
}

@media (prefers-reduced-motion: reduce) {
  .mega { transition: none; }
}

/* ═══ Menu mobile en accordeon ══════════════════════════════
   Les cinq entrees tiennent dans un ecran : on ne scrolle plus
   pour trouver une rubrique. Le sous-menu de la section
   courante s'ouvre seul. */

.menu-acc { display: grid; border-top: 1px solid var(--border-dark); }
.menu-acc__bloc { border-bottom: 1px solid var(--border-dark); }
.menu-acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 4px 2px;
  cursor: pointer;
  list-style: none;
}
.menu-acc__head::-webkit-details-marker { display: none; }
.menu-acc__label {
  font: 800 21px/1.15 var(--font-display);
  letter-spacing: -.5px;
  color: #fff;
}
/* Signe + / − dessine en CSS : deux trais, dont un pivote. */
.menu-acc__signe {
  position: relative;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}
.menu-acc__signe::before,
.menu-acc__signe::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 1.5px;
  background: var(--on-dark-70);
  transform: translateY(-50%);
  transition: transform .18s ease, opacity .18s ease;
}
.menu-acc__signe::after { transform: translateY(-50%) rotate(90deg); }
.menu-acc__bloc[open] .menu-acc__signe::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.menu-acc__bloc[open] .menu-acc__label { color: #fff; }

.menu-acc__body { display: grid; padding: 0 0 14px; }
.menu-acc__lien {
  display: grid;
  gap: 2px;
  min-height: 44px;
  padding: 9px 0 9px 14px;
  border-left: 2px solid var(--border-dark-strong);
}
.menu-acc__lien:hover, .menu-acc__lien:focus-visible { border-left-color: #fff; }
.menu-acc__lien-label { font: 500 15.5px/1.3 var(--font-display); color: var(--on-dark-90); }
.menu-acc__lien-desc { font-size: 12px; line-height: 1.4; color: var(--on-dark-55); }
.menu-acc__tout {
  margin-top: 8px;
  padding-left: 14px;
  font: 700 10.5px/1 var(--font-mono);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--on-dark-70);
}

.mobile-menu__body > .btn--block { margin-top: 22px; }
.mobile-menu__body > .avis-bandeau { margin-top: 14px; }
.mobile-menu__pied {
  display: grid;
  gap: 10px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border-dark);
}

@media (prefers-reduced-motion: reduce) {
  .menu-acc__signe::before, .menu-acc__signe::after { transition: none; }
}

/* ═══ HERO DES PAGES DE SECTION ═════════════════════════════
   Reprend l'idiome du hero d'accueil : un bloc de texte et une image
   cote a cote. L'image occupe environ 520 px, jamais toute la largeur :
   les photos disponibles font 900 a 1400 px de large, elles restent donc
   nettes, y compris sur un ecran a forte densite. Un bandeau pleine
   largeur les aurait agrandies et rendues molles. */
.page-head--media .wrap { display: grid; gap: 26px; }
.page-head__visuel { margin: 0; }
.page-head__visuel img {
  display: block; width: 100%;
  aspect-ratio: 4 / 3; object-fit: cover;
  background: #f0f0f0;
}
.page-head__legende {
  margin: 10px 0 0;
  font: 400 11.5px/1.5 var(--font-mono); color: var(--text-label);
}

@media (min-width: 1024px) {
  .page-head--media .wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    gap: 52px; align-items: center;
  }
  /* Le chapeau se serre dans sa colonne : sans cela, 62ch deborderaient
     sur l'image. */
  .page-head--media .page-head__lead { max-width: 54ch; }
}

/* ═══ FORMULAIRE DE DEMANDE ═════════════════════════════════
   Posé en bas des pages de conversion. Monochrome comme le reste :
   filets d'un pixel, angles vifs, libellés en mono. Aucun attribut
   style= : la CSP du site interdit l'inline. */
.demande { border-top: 1.5px solid var(--rule); }
.demande__intro {
  max-width: 62ch; margin: 0 0 30px;
  font-size: 15.5px; line-height: 1.6; color: var(--text-body);
}

.demande__form { max-width: 760px; }
/* Champ appat : hors de l'ecran, hors du parcours clavier, hors de
   l'arbre d'accessibilite. Un robot qui remplit tout le remplit aussi. */
.demande__appat {
  position: absolute; left: -9999px; top: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}
.demande__grille { display: grid; gap: 20px; }

.demande__champ { margin: 0; display: block; }
.demande__label {
  display: block; margin-bottom: 7px;
  font: 700 10px/1.4 var(--font-mono);
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-label);
}
/* L'asterisque des champs requis reste noire : sur fond blanc, un gris
   clair la rendrait invisible pour qui distingue mal les contrastes. */
.demande__requis { color: var(--black); }

.demande__input {
  display: block; width: 100%;
  padding: 12px 13px;
  font: 400 15px/1.4 var(--font-display); color: var(--text);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0;
  transition: border-color .14s ease;
}
.demande__input:hover { border-color: rgba(0, 0, 0, .28); }
.demande__input:focus {
  outline: none;
  border-color: var(--black);
  box-shadow: inset 0 0 0 1px var(--black);
}
.demande__input::placeholder { color: var(--text-label); }
.demande__zone { resize: vertical; min-height: 130px; line-height: 1.6; }

/* Erreur : un filet epais a gauche double le message ecrit, pour ne pas
   reposer sur la seule couleur. */
.demande__input.is-erreur { border-color: #8a1f11; box-shadow: inset 2px 0 0 #8a1f11; }
.demande__erreur {
  display: block; margin-top: 6px;
  font: 400 12.5px/1.45 var(--font-display); color: #8a1f11;
}

.demande__alerte {
  margin: 0 0 22px; padding: 13px 15px;
  border-left: 2px solid #8a1f11; background: #faf3f2;
  font-size: 14.5px; line-height: 1.55; color: var(--text-body);
}

.demande__pied { margin: 26px 0 0; display: grid; gap: 14px; }
.demande__envoi { justify-self: start; }
.demande__mentions {
  max-width: 62ch;
  font: 400 12px/1.6 var(--font-display); color: var(--text-muted);
}
.demande__mentions a { text-decoration: underline; text-underline-offset: 2px; }
/* Badge reCAPTCHA masqué : il recouvrirait le bouton flottant. La mention
   écrite sous le formulaire le remplace, comme Google l'autorise.
   visibility et non display:none, qui couperait le contrôle. */
.grecaptcha-badge { visibility: hidden; }

/* Accusé de réception : même bloc, sans le formulaire. */
.demande__reponse {
  max-width: 62ch; padding: 22px 24px;
  border: 1px solid var(--border); border-left: 2px solid var(--black);
  background: #fafafa;
}
.demande__reponse-titre {
  margin: 0 0 8px;
  font: 800 19px/1.25 var(--font-display); letter-spacing: -.3px; color: var(--black);
}
.demande__reponse p { font-size: 15px; line-height: 1.6; color: var(--text-body); }

@media (min-width: 640px) {
  .demande__grille { grid-template-columns: repeat(2, 1fr); gap: 20px 22px; }
  .demande__pied { grid-template-columns: auto 1fr; align-items: center; gap: 22px; }
}

/* ═══ VISUELS DE PAGE ═══════════════════════════════════════
   Montrer le lieu plutot que le decrire. Les pages qui doivent
   convertir — privatisation, groupes — ouvrent sur une vue de la salle
   avant le premier argument : quelqu'un qui cherche un lieu a privatiser
   veut d'abord savoir a quoi il ressemble. */
.visuel { margin: 0 0 30px; }
.visuel img { display: block; width: 100%; height: auto; }
.visuel__legende {
  margin-top: 10px;
  font: 400 11.5px/1.5 var(--font-mono);
  color: var(--text-label);
}

/* Bande de plusieurs vues, quand une seule image ne suffit pas a montrer
   ce que le lieu sait faire. Meme idiome que .articles : un fond de
   filet, des cellules blanches, un interstice d'un pixel. */
.visuels {
  display: grid; gap: 1px; margin: 0; padding: 0; list-style: none;
  background: var(--border); border: 1px solid var(--border);
}
.visuels__item { background: var(--white); }
.visuels__item img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
}
.visuels__legende {
  margin: 0; padding: 11px 13px 13px;
  font: 400 11.5px/1.45 var(--font-mono); color: var(--text-label);
}

@media (min-width: 640px) {
  .visuels { grid-template-columns: repeat(3, 1fr); }
}

/* ═══ Journal ═══════════════════════════════════════════════ */
.articles { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--border); border: 1px solid var(--border); }
.articles__item { background: var(--white); }
.article-carte {
  display: grid;
  gap: 8px;
  height: 100%;
  padding: 20px 18px;
  color: inherit;
  transition: background .16s ease;
}
.article-carte:hover, .article-carte:focus-visible { background: #fafafa; }
.article-carte__meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; }
.article-carte__cat {
  font: 700 9.5px/1.4 var(--font-mono);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 3px 7px;
  border: 1px solid var(--border);
}
.article-carte__date { font: 400 11px/1.4 var(--font-mono); color: var(--text-label); }
.article-carte__titre { font: 800 19px/1.2 var(--font-display); letter-spacing: -.4px; }
.article-carte__chapeau { max-width: 60ch; font-size: 14.5px; line-height: 1.55; color: var(--text-soft); }
.article-carte__lire { margin-top: auto; padding-top: 6px; font: 700 10.5px/1 var(--font-mono); letter-spacing: 1.2px; }

/* Visuel de carte : affiche seulement si la redaction a joint une image.
   Marges negatives pour que la bande touche les bords de la carte. */
.article-carte__visuel {
  display: block; margin: -20px -18px 4px;
  aspect-ratio: 16 / 9; overflow: hidden;
  background: #f0f0f0; border-bottom: 1px solid var(--border);
}
.article-carte__visuel img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── Article ─────────────────────────────────────────────── */
.post { padding: 22px 0 10px; }
/* Le conteneur se resserre sur desktop, exactement comme .page .wrap des
   pages legales : c'est l'idiome du site pour un texte long. Auparavant
   l'article gardait le conteneur large de 1240 px et bridait chaque bloc
   a 72ch, ce qui collait toute la colonne a gauche et laissait la moitie
   droite de l'ecran vide. */
.post__head { margin-bottom: 26px; }
.post__meta {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px;
  font: 700 10px/1.6 var(--font-mono); letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--text-label);
}
.post__cat { color: var(--black); }
.post__titre { margin: 0 0 16px; font: 800 34px/1.02 var(--font-display); letter-spacing: -1px; }
.post__chapeau { margin: 0; font: 500 18px/1.5 var(--font-display); color: var(--text-body); }
.post__corps { padding-top: 24px; border-top: 1px solid var(--border); }
/* Cale a gauche et plafonne a 600 px, soit la mesure de .prose : l'image
   partage ainsi les deux bords du texte qu'elle accompagne. Centree, elle
   paraissait decalee au milieu de blocs alignes a gauche. Le plafond tient
   aussi a la resolution : les photos disponibles font 450 px de large, les
   etirer sur toute la colonne les rendrait molles. A relever quand le
   musee fournira des visuels plus grands. */
.post__visuel {
  max-width: 600px; margin: 0 0 26px;
  aspect-ratio: 16 / 9; overflow: hidden; background: #f0f0f0;
}
.post__visuel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post__corps h2 { margin: 30px 0 10px; font: 800 22px/1.2 var(--font-display); letter-spacing: -.5px; }
.post__corps h2:first-child { margin-top: 0; }
.post__corps h3 { margin: 26px 0 8px; font: 800 18px/1.25 var(--font-display); letter-spacing: -.3px; }

/* Le corps vient de l'editeur : il peut contenir listes, citations et
   images, qu'aucune autre page du site n'utilise. Sans ces regles, un
   article ecrit par le musee tomberait sur les styles par defaut du
   navigateur au milieu d'une mise en page qui n'en a aucun. */
/* Le reset du site enleve les puces a tous les ul : il faut les rendre
   ici, sinon une liste a puces ecrite dans l'editeur sort en lignes
   simplement indentees, a cote d'une liste numerotee qui, elle, garde
   ses numeros. */
.post__corps ul, .post__corps ol { margin: 16px 0; padding-left: 22px; }
.post__corps ul { list-style: disc; }
.post__corps ol { list-style: decimal; }
.post__corps li { font-size: 17px; line-height: 1.7; color: var(--text-body); }
.post__corps li + li { margin-top: 6px; }
.post__corps a { text-decoration: underline; text-underline-offset: 3px; }
.post__corps strong { font-weight: 700; color: var(--black); }
.post__corps blockquote {
  margin: 22px 0; padding: 4px 0 4px 18px;
  border-left: 2px solid var(--black);
  font: 500 18px/1.5 var(--font-display); color: var(--text-body);
}
.post__corps blockquote p { font: inherit; color: inherit; }
.post__corps img { display: block; max-width: 100%; height: auto; margin: 22px 0; }
.post__corps figure { margin: 22px 0; }
.post__corps figcaption { margin-top: 8px; font: 400 12px/1.5 var(--font-mono); color: var(--text-label); }
.post__note {
  margin-top: 22px; padding: 14px 16px;
  background: #f5f5f5; font-size: 14.5px; line-height: 1.55; color: var(--text-body);
}
.post__lies, .post__suite { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--border); }

@media (min-width: 640px) {
  .articles { grid-template-columns: repeat(2, 1fr); }
  .post__titre { font-size: 46px; letter-spacing: -1.6px; }
  .post { padding: 34px 0 10px; }
}

@media (min-width: 1024px) {
  .post .wrap { max-width: 820px; }
  .articles { grid-template-columns: repeat(2, 1fr); }
  .post__titre { font-size: 58px; letter-spacing: -2px; }
  .article-carte { padding: 26px 24px; }
  .article-carte__visuel { margin: -26px -24px 4px; }
  .article-carte__titre { font-size: 22px; }
}