/* Rematch France — feuille de style unique.
   Reprise des valeurs du design « Rematch France v2.dc.html ». */

:root {
  --bg: #0d0f12;
  --surface: #12151a;
  --text: #f2f3f5;
  --accent: #2f6bff;
  --accent-soft: #6d97ff;
  --accent-hover: #a8c0ff;
  --danger: #ff6b6b;

  --line: rgba(242, 243, 245, 0.14);
  --line-strong: rgba(242, 243, 245, 0.28);
  --line-soft: rgba(242, 243, 245, 0.1);
  --line-chip: rgba(242, 243, 245, 0.2);

  --ink-1: rgba(242, 243, 245, 0.72);
  --ink-2: rgba(242, 243, 245, 0.66);
  --ink-3: rgba(242, 243, 245, 0.62);
  --ink-4: rgba(242, 243, 245, 0.5);
  --ink-5: rgba(242, 243, 245, 0.45);
  --ink-6: rgba(242, 243, 245, 0.42);
  --ink-7: rgba(242, 243, 245, 0.38);
  --ink-8: rgba(242, 243, 245, 0.34);

  --display: "Oswald", sans-serif;
  --body: "Barlow", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: clamp(16px, 4vw, 56px);
  --nav-height: 60px;
}

/* --- Base ---------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent-soft);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--accent-hover);
}

*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

::selection {
  background: var(--accent);
  color: #fff;
}

img {
  max-width: 100%;
  display: block;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--accent);
  color: #fff;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
  color: #fff;
}

/* --- Conteneurs ---------------------------------------------------------- */

.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.wrap--md {
  max-width: 1080px;
}

.wrap--sm {
  max-width: 820px;
}

.section {
  padding: 72px 0 56px;
  border-bottom: 1px solid var(--line);
}

.section--stats {
  padding: 40px 0;
}

.section--flush {
  padding: 72px 0;
  border-bottom: 0;
}

.section--contact {
  padding: 56px 0 80px;
  border-bottom: 0;
}

.section--split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  align-items: center;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* Le titre se replie sur deux lignes plutôt que de repousser le lien d'à côté
   sur une nouvelle rangée. */
.section-head .section-title {
  max-width: 24ch;
}

.page-header {
  padding: 64px 0 40px;
  border-bottom: 1px solid var(--line);
}

.page-header--tight {
  padding: 64px 0 32px;
}

[id] {
  scroll-margin-top: calc(var(--nav-height) + 12px);
}

/* --- Typographie --------------------------------------------------------- */

.kicker {
  display: block;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin: 0 0 16px;
}

.kicker--flush {
  margin: 0;
}

.eyebrow {
  display: block;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin: 0;
}

.eyebrow--spaced {
  margin-top: 18px;
}

.page-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(40px, 6vw, 96px);
  line-height: 0.9;
  text-transform: uppercase;
  margin: 0;
}

.page-title--sm {
  font-size: clamp(36px, 5.4vw, 80px);
}

.section-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(32px, 4.4vw, 62px);
  line-height: 0.94;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
}

.section-title--lg {
  font-size: clamp(36px, 5.4vw, 80px);
  letter-spacing: -0.01em;
  max-width: 16ch;
}

.section-title--sm {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 0.96;
}

.section-title--spaced {
  margin: 0 0 28px;
}

.card-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.05;
  text-transform: uppercase;
  margin: 12px 0 0;
}

.pillar-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
  margin: 0;
}

.role-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 20px;
  text-transform: uppercase;
  margin: 0;
}

.lead {
  font-size: 17px;
  line-height: 26px;
  max-width: 60ch;
  margin: 20px 0 0;
  color: var(--ink-2);
}

.lead--wide {
  max-width: 62ch;
  margin: 22px 0 0;
}

.prose {
  font-size: 16px;
  line-height: 25px;
  margin: 20px 0 0;
  max-width: 52ch;
  color: var(--ink-2);
}

.prose--sm {
  font-size: 15px;
  line-height: 25px;
  margin: 20px 0 0;
  max-width: none;
}

.body-text {
  font-size: 15px;
  line-height: 23px;
  margin: 12px 0 0;
  color: var(--ink-3);
}

.body-text--sm {
  font-size: 14px;
  line-height: 22px;
  margin: 10px 0 0;
}

.pillar-text {
  font-size: 15px;
  line-height: 24px;
  margin: 12px 0 0;
  color: var(--ink-3);
}

.meta {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-6);
  margin: 18px 0 0;
  font-feature-settings: "tnum" 1;
}

.meta--contact {
  margin: 16px 0 0;
}

/* --- Barre de navigation -------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px var(--gutter);
  background: rgba(13, 15, 18, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.nav__brand {
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
  text-decoration: none;
}

.nav__brand:hover {
  color: var(--text);
}

.nav__brand span {
  color: var(--accent);
}

.nav__spacer {
  flex: 1;
}

.nav__link {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-1);
  text-decoration: none;
  white-space: nowrap;
}

.nav__link:hover {
  color: var(--text);
}

.nav__link[aria-current="page"] {
  color: var(--accent-soft);
}

.nav__lang {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.14em;
  padding: 6px 12px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent-soft);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.nav__lang:hover {
  color: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* --- Boutons et liens d'action ------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 22px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}

.btn--primary {
  background: var(--accent);
  color: #fff;
}

.btn--primary:hover {
  background: #1f57e0;
  color: #fff;
}

.btn--ghost {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text);
}

.btn--ghost:hover {
  border-color: var(--text);
  color: var(--text);
}

.btn--sm {
  font-size: 13px;
  padding: 11px 18px;
}

.btn--submit {
  font-size: 14px;
  padding: 14px 26px;
}

.btn-outline {
  display: inline-block;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 20px;
  padding: 10px 18px;
  border: 1px solid var(--accent);
  text-decoration: none;
}

.btn-outline--muted {
  border-color: var(--line-strong);
  color: var(--text);
}

.btn-outline--muted:hover {
  border-color: var(--text);
  color: var(--text);
}

.link-cta {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.actions--center {
  justify-content: center;
}

.actions--tight {
  margin-top: 18px;
}

.actions--page {
  margin: 36px 0 96px;
}

/* --- Visuels -------------------------------------------------------------- */

/* Les dimensions viennent de la classe de gabarit qui accompagne `.media`
   (hero__wide, media--16x9…) ; ici seulement le recadrage et le cadre. */
.media {
  display: block;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--surface);
}

.media--16x9 {
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* Grappe d'avatars de la section Communauté. Le conteneur garde le format 4/3
   du visuel qu'il remplace, pour ne pas déformer la grille de la section. Les
   bulles sont posées en pourcentages : elles se chevauchent quelle que soit la
   largeur, et l'anneau de fond détache celle du dessus de celle du dessous. */
.bubbles {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
}

.bubble {
  position: absolute;
  aspect-ratio: 1 / 1;
  display: block;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 6px var(--bg);
}

.bubble--1 { width: 30%; left: 6%;  top: 10%; }
.bubble--2 { width: 22%; left: 30%; top: 2%; }
.bubble--3 { width: 34%; left: 34%; top: 30%; }
.bubble--4 { width: 24%; left: 16%; top: 55%; }
.bubble--5 { width: 26%; left: 62%; top: 8%; }
.bubble--6 { width: 20%; left: 61%; top: 58%; }
.bubble--7 { width: 18%; left: 76%; top: 40%; }

/* Les captures officielles sont très lumineuses : on les assombrit un peu
   dans le héros pour que le titre garde son contraste. */
.hero .media {
  filter: brightness(0.82) saturate(0.95);
}

/* Portrait de la direction : le cadre carré de la maquette, avec l'avatar
   centré à son échelle plutôt qu'étiré — les sources font 80 à 128 px. Si un
   jour les avatars arrivent en 512, il suffit de passer `.portrait__avatar` à
   `width:100%; max-width:none` pour retrouver le portrait pleine largeur. */
.portrait {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: repeating-linear-gradient(135deg, #1a1e25 0 10px, #12161c 10px 20px);
}

.portrait__avatar {
  width: 55%;
  max-width: 128px;
  aspect-ratio: 1 / 1;
}

/* --- Visuels de remplacement --------------------------------------------- */

.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-7);
}

.ph--caption-bottom {
  align-items: flex-end;
  padding-bottom: 8px;
}

.ph--far {
  background: repeating-linear-gradient(135deg, #16191e 0 10px, #101317 10px 20px);
  border-color: var(--line-soft);
  color: var(--ink-8);
}

.ph--mid {
  background: repeating-linear-gradient(135deg, #181b21 0 10px, #111419 10px 20px);
  border-color: var(--line-soft);
  color: var(--ink-8);
}

.ph--near {
  background: repeating-linear-gradient(135deg, #1c2027 0 10px, #131720 10px 20px);
  color: rgba(242, 243, 245, 0.4);
  padding-bottom: 12px;
}

.ph--tile {
  background: repeating-linear-gradient(135deg, #1a1e25 0 10px, #12161c 10px 20px);
}

.ph--16x9 {
  aspect-ratio: 16 / 9;
}

.ph--4x3 {
  aspect-ratio: 4 / 3;
}

.ph--1x1 {
  aspect-ratio: 1 / 1;
}

/* --- Héros --------------------------------------------------------------- */

.hero {
  position: relative;
  height: 180vh;
}

.hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

.hero__layer {
  position: absolute;
  left: 0;
  right: 0;
  will-change: transform;
}

.hero__layer--far {
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
}

/* Les deux panneaux latéraux viennent à ras des bords de la fenêtre : aucune
   gouttière, ils sont poussés dos à dos aux extrémités. */
.hero__layer--stands {
  top: 22vh;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  padding: 0;
}

.hero__layer--copy {
  top: 19vh;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 var(--gutter);
}

.hero__layer--near {
  bottom: -30vh;
  z-index: 3;
  display: flex;
  justify-content: center;
}

.hero__wide {
  width: min(1500px, 96vw);
  height: 14vh;
}

/* Ce sont des détourages sur fond transparent : ni cadre ni fond, sinon la
   silhouette flotte dans un rectangle gris. Annule le cadrage de `.media`.

   `contain` et non `cover` : un détourage rogné perd des membres, et les deux
   fichiers n'ont pas le même format (946×422 à gauche, 980×1178 à droite).
   L'ancrage sur le bord garde la silhouette collée au bord de la fenêtre —
   c'est la moitié transparente du cadre qui absorbe la différence. */
.hero__stand {
  width: 47vw;
  height: 58vh;
  border: 0;
  background: none;
  object-fit: contain;
}

.hero__stand--left {
  object-position: left center;
}

.hero__stand--right {
  object-position: right center;
}

.hero__front {
  width: min(1200px, 92vw);
  height: 40vh;
}

.hero__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12vh;
  z-index: 4;
  background: linear-gradient(to bottom, rgba(13, 15, 18, 0), #0d0f12);
  pointer-events: none;
}

.hero__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(56px, 11vw, 168px);
  line-height: 0.86;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 14px 0 0;
}

.hero__title span {
  color: var(--accent);
}

.hero__sub {
  font-size: 17px;
  line-height: 25px;
  max-width: 46ch;
  margin: 20px 0 0;
  color: var(--ink-2);
}

/* --- Grilles ------------------------------------------------------------- */

.grid {
  display: grid;
  gap: 16px;
}

.grid--stats {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 24px;
}

.grid--home-guides {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-top: 36px;
}

.grid--guides {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  padding: 40px 0 64px;
}

.grid--clips {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-top: 36px;
}

.grid--members {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 40px 0 0;
}

/* Grilles « hairline » : chaque cellule dessine son filet dans la gouttière
   d'1px, où les contours des voisines se superposent exactement. Le fond de la
   grille reste transparent, sinon une dernière rangée incomplète laisse un
   grand aplat gris à la place des cellules manquantes. */
.hairline-grid {
  display: grid;
  gap: 1px;
  border: 1px solid var(--line);
}

.hairline-grid > * {
  background: var(--bg);
  outline: 1px solid var(--line);
}

.hairline-grid--pillars {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 42px;
}

.hairline-grid--pillars > * {
  padding: 24px;
}

.hairline-grid--roles {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 36px;
}

.hairline-grid--roles > * {
  padding: 20px;
}

/* --- Chiffres ------------------------------------------------------------ */

.stat__value {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 0.9;
  margin: 0;
  font-feature-settings: "tnum" 1;
}

.stat__value--accent {
  color: var(--accent);
}

.stat__label {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 10px 0 0;
}

/* --- Cartes -------------------------------------------------------------- */

.card {
  border: 1px solid var(--line);
  padding: 22px;
  background: var(--surface);
}

.card--roomy {
  padding: 24px;
}

.card--boxed {
  padding: 24px;
}

/* --- Fil d'actualités ---------------------------------------------------- */

.news {
  display: grid;
  gap: 0;
}

.news__row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 20px;
  align-items: baseline;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}

.news__row:last-child {
  border-bottom: 1px solid var(--line);
}

a.news__row:hover {
  color: inherit;
  background: rgba(242, 243, 245, 0.03);
}

.news--full {
  padding: 20px 0 64px;
}

.news--full .news__row {
  grid-template-columns: 130px 1fr auto;
  padding: 22px 0;
  border-top: 0;
  border-bottom: 1px solid var(--line);
}

.news--full .news__row:last-child {
  border-bottom: 1px solid var(--line);
}

.news__date {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-6);
  font-feature-settings: "tnum" 1;
}

.news__title {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.1;
  text-transform: uppercase;
}

.news__excerpt {
  display: block;
  font-size: 15px;
  line-height: 23px;
  margin-top: 8px;
  color: var(--ink-3);
}

.news__tag {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

/* --- Clips --------------------------------------------------------------- */

.clip {
  margin: 0;
}

.clip__caption {
  font-size: 14px;
  line-height: 22px;
  margin-top: 10px;
  color: var(--ink-3);
}

/* --- Filtres des guides -------------------------------------------------- */

.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-block;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid var(--line-chip);
  color: rgba(242, 243, 245, 0.6);
  text-decoration: none;
}

.chip:hover {
  border-color: var(--line-strong);
  color: var(--text);
}

.chip[aria-current="true"] {
  border-color: var(--accent);
  color: var(--accent-soft);
}

.empty {
  font-size: 15px;
  line-height: 24px;
  color: var(--ink-3);
  padding: 40px 0 64px;
}

/* --- Patch notes --------------------------------------------------------- */

.patches {
  padding: 16px 0 80px;
}

.patch {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 28px;
  padding: 36px 0;
  border-bottom: 1px solid var(--line);
}

.patch__version {
  font-family: var(--display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1;
  text-transform: uppercase;
  margin: 0;
  color: var(--accent);
  font-feature-settings: "tnum" 1;
}

.patch__date {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-6);
  margin: 10px 0 0;
  font-feature-settings: "tnum" 1;
}

.patch__tag {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-6);
  margin: 6px 0 0;
}

.patch__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.1;
  text-transform: uppercase;
  margin: 0;
}

.patch__items {
  margin: 16px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

.patch__items li {
  font-size: 15px;
  line-height: 23px;
  color: var(--ink-1);
}

.patch__note {
  font-size: 15px;
  line-height: 23px;
  margin: 18px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--accent);
  color: rgba(242, 243, 245, 0.6);
}

/* --- Formulaires --------------------------------------------------------- */

input,
textarea,
select {
  font-family: var(--body);
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  width: 100%;
  box-sizing: border-box;
}

input:hover,
textarea:hover,
select:hover {
  border-color: rgba(242, 243, 245, 0.5);
}

textarea {
  resize: vertical;
}

.form {
  display: grid;
  gap: 20px;
  padding: 36px 0 80px;
}

.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.field {
  display: grid;
  gap: 8px;
}

.field__label {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(242, 243, 245, 0.7);
}

.field__optional {
  font-family: var(--body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-6);
}

.field__error {
  font-size: 13px;
  line-height: 20px;
  color: var(--danger);
}

.field--invalid input,
.field--invalid textarea,
.field--invalid select {
  border-color: var(--danger);
}

.checkbox {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.checkbox input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 3px;
  padding: 0;
  accent-color: var(--accent);
}

.checkbox span {
  font-size: 14px;
  line-height: 22px;
  color: var(--ink-2);
}

.form__errors {
  border: 1px solid var(--danger);
  padding: 16px 18px;
  background: rgba(255, 107, 107, 0.06);
  font-size: 15px;
  line-height: 23px;
  color: var(--text);
}

.notice {
  margin: 40px 0 80px;
  border: 1px solid var(--accent);
  padding: 28px;
  background: var(--surface);
}

.notice__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 26px;
  text-transform: uppercase;
  margin: 0;
}

.notice__body {
  font-size: 15px;
  line-height: 24px;
  margin: 12px 0 0;
  color: var(--ink-2);
}

/* --- Pied de page -------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--line);
  padding: 32px 0 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 28px;
}

.footer__col {
  display: grid;
  gap: 8px;
  align-content: start;
}

.footer__brand {
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}

.footer__brand span {
  color: var(--accent);
}

.footer__note {
  font-size: 13px;
  line-height: 21px;
  margin: 10px 0 0;
  color: var(--ink-5);
  max-width: 36ch;
}

.footer__heading {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-5);
}

.footer a {
  font-size: 14px;
}

/* --- Adaptations petites largeurs ---------------------------------------- */

/* Les panneaux du héros et la colonne centrale se disputent la largeur. En
   dessous de 1200 px on réduit les silhouettes, et sous 1000 px on les retire :
   plus bas, elles passent derrière le chapeau et les boutons, qui deviennent
   illisibles. Le héros garde son plan large, son titre et son premier plan. */
@media (max-width: 1200px) {
  .hero__stand {
    width: 22vw;
    height: 32vh;
  }
}

@media (max-width: 1000px) {
  .hero__layer--stands {
    display: none;
  }
}

@media (max-width: 640px) {
  .news__row,
  .news--full .news__row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .patch {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .section {
    padding: 48px 0 40px;
  }

  .page-header,
  .page-header--tight {
    padding: 40px 0 28px;
  }
}

/* --- Mouvement réduit ---------------------------------------------------- */

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

  /* Le parallaxe est désactivé côté script ; sans lui, les 80vh de course
     supplémentaires ne servent plus à rien. */
  .hero {
    height: 100vh;
  }
}