@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders:opsz,wght@10..72,100..900&display=swap");


:root {
  --blue: #2448ff;

  --virton: #1d7f36;
  --joueurs: #e30220;
  --silver: #1e1e1e;
  --worldcup: #09257e;
  --footbelge: #1a1a1a;
  --gargary: #6728a7;

}


* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  background: #ffffff;
  color: var(--blue);

  font-family: "Big Shoulders", sans-serif;
  font-optical-sizing: auto;

  text-transform: uppercase;
}


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


img {
  display: block;
}



/* ======================================================
   HOME
====================================================== */

.home-page {
  width: 100%;
  max-width: none;

  /*
   * Figma = 1440 × 1536.
   * This keeps approximately the same page proportions
   * when the browser becomes narrower.
   */
  min-height: max(
    100vh,
    calc(min(100vw, 1440px) * 1.0666667)
  );

  margin: 0 auto;

  padding:
    0
    24px
    24px;

  display: flex;
  flex-direction: column;
}



/* HEADER */

.home-header {
  height: clamp(
    190px,
    18.333vw,
    264px
  );

  flex-shrink: 0;

  display: flex;
  justify-content: center;
  align-items: flex-start;

  padding-top: clamp(
    70px,
    6.736vw,
    97px
  );
}


.home-header h1 {
  margin: 0;

  font-size: clamp(
    52px,
    5vw,
    72px
  );

  line-height: 1;

  font-weight: 600;

  color: var(--blue);

  text-align: center;
}



/* GRID */

.project-grid {
  width: 100%;

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  column-gap: 23px;

  row-gap: 20px;
}


.project-card {
  min-width: 0;
}



/* COVER */

.project-cover-link {
  display: block;

  width: 100%;
}


.project-cover {
  position: relative;

  width: 100%;

  aspect-ratio: 449 / 480;

  overflow: hidden;
}


.project-cover--virton {
  background: var(--virton);
}


.project-cover--joueurs {
  background: var(--joueurs);
}


.project-cover--silver {
  background: var(--silver);
}


.project-cover--worldcup {
  background: var(--worldcup);
}


.project-cover--footbelge {
  background: var(--footbelge);
}


.project-cover--gargary {
  background: var(--gargary);
}



/* IMAGES */

.project-image {
  position: absolute;

  left: 50%;
  top: 50%;

  transform:
    translate(
      -50%,
      -50%
    );

  display: block;
}


.virton-image {
  width: 85%;
  height: auto;

  max-height: 85%;

  object-fit: contain;
}


.joueurs-image {
  width: 85%;
  height: auto;

  max-height: 85%;

  object-fit: contain;
}


.full-cover-image {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


.worldcup-image {
  width: 85%;
  height: auto;

  max-height: 85%;

  object-fit: contain;
}


/*
 * FOOTBELGE+
 * The supplied PNG is 887 x 530. Its visible cover occupies
 * x = 438..887 and y = 0..480, matching the 449 / 480 card.
 * Scale the whole PNG proportionally, align its top-right corner,
 * and let the cover clip only the transparent export margins.
 */
.footbelge-image {
  width: calc(100% * 887 / 449);
  height: auto;

  left: auto;
  right: 0;
  top: 0;

  transform: none;
}



.gargary-image {
  width: 97%;
  height: 97%;

  object-fit: contain;
}



/* CATEGORY */

.project-category {
  margin: 0;

  min-height: 28px;

  color: var(--blue);

  font-size: clamp(
    17px,
    1.6667vw,
    24px
  );

  line-height: 28px;

  font-weight: 600;

  white-space: nowrap;
}



/* HOVER */

.project-cover-link .project-cover {
  transition:
    filter 160ms ease;
}


.project-cover-link:hover .project-cover {
  filter: brightness(0.96);
}



/* FOOTER */

.site-footer {
  display: flex;

  flex-direction: column;

  align-items: flex-start;
}


.home-footer {
  /*
   * Pushes footer to the bottom of the Figma-like page.
   */
  margin-top: auto;
  padding-top: 64px;
}


.site-footer a {
  height: 24px;

  color: var(--blue);

  font-size: clamp(
    17px,
    1.6667vw,
    24px
  );

  line-height: 24px;

  font-weight: 600;
}


.site-footer a:hover {
  text-decoration: underline;
}



/* ======================================================
   JOUEURS BELGES
====================================================== */

.project-page {
  position: relative;

  width: 100%;
  max-width: none;

  margin: 0 auto;

  background: #ffffff;
  color: var(--blue);
}



/* HOME LINK */

.project-home-link {
  position: fixed;

  left: 24px;
  top: 19px;

  z-index: 1000;

  color: var(--blue);

  font-size: 24px;
  line-height: 28px;

  font-weight: 600;
}


/* Preserve blue on white. Only the letters over the red hero turn white.
 * script.js clips this duplicate text to the actual hero intersection.
 */
.project-home-link::after {
  content: attr(data-scroll-label);
  position: absolute;
  inset: 0;

  color: #ffffff;
  opacity: 0;
  pointer-events: none;

  clip-path: inset(
    var(--name-red-top, 0px)
    var(--name-red-right, 0px)
    var(--name-red-bottom, 0px)
    var(--name-red-left, 0px)
  );
}

.project-home-link.is-over-red::after {
  opacity: 1;
}


.project-home-link:hover {
  text-decoration: underline;
}



/* PROJECT HEADER */

.project-header {
  width: 100%;
  height: 264px;

  padding-top: 86px;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;
}


.project-header h1 {
  margin: 0;

  color: var(--blue);

  font-size: 72px;
  line-height: 72px;

  font-weight: 600;
}


.project-header p {
  margin:
    0
    0
    0;

  color: var(--blue);

  font-size: 24px;
  line-height: 30px;

  font-weight: 400;
}


.project-header span {
  color: var(--blue);

  font-size: 24px;
  line-height: 30px;

  font-weight: 600;
}



/* HERO */

.joueurs-hero {
  width: 100%;
  /* Preserve the original hero proportions as the page grows. */
  height: auto;
  aspect-ratio: 1440 / 765;

  display: grid;

  grid-template-columns:
    1fr
    1fr;
}


.joueurs-hero-left {
  width: 100%;
  height: 100%;

  background: var(--joueurs);

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;
}


.joueurs-hero-left img {
  width: 70.4%;
  height: auto;

  max-height: 71%;

  object-fit: contain;
}


.joueurs-hero-right {
  width: 100%;
  height: 100%;

  overflow: hidden;
}


.joueurs-hero-right img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}



/* INTRO */

.project-intro {
  width: min(
    968px,
    calc(100% - 48px)
  );

  margin:
    31px
    auto
    0;

  text-align: center;
}


.project-intro p {
  margin: 0;

  color: var(--blue);

  font-size: 24px;
  line-height: 1.4;

  font-weight: 400;
  text-transform: none;
}



/* VIDEO CASE */

.video-case {
  width: 100%;

  /* Match the 29px gap below the introduction in Figma. */
  margin-top: 29px;

  text-align: center;
}


.video-case + .video-case {
  margin-top: 33px;
}


.video-case h2 {
  max-width: 1154px;

  margin:
    0
    auto;

  color: var(--blue);

  font-size: 72px;
  line-height: 1;

  font-weight: 600;
}


.video-stat {
  margin:
    34px
    auto
    0;

  color: var(--blue);

  font-size: 48px;
  line-height: 1;

  font-weight: 600;
}


.video-description {
  width: min(
    968px,
    calc(100% - 48px)
  );

  margin:
    28px
    auto
    0;

  color: var(--blue);

  font-size: 24px;
  line-height: 1.4;

  font-weight: 400;
  text-transform: none;

  text-align: center;
}



/* VIDEO */

.video-player {
  position: relative;

  width: 500px;
  height: 889px;

  margin:
    28px
    auto
    0;

  overflow: hidden;

  background: #111111;
}


.joueurs-hero + .video-case .video-player {
  margin-top: 50px;
}


.video-player video {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  cursor: pointer;

  background: #111111;
}



/* VIDEO MISSING */

.video-missing {
  position: absolute;

  inset: 0;

  z-index: 5;

  display: none;

  align-items: center;
  justify-content: center;

  background: #111111;

  color: #ffffff;

  font-size: 24px;

  font-weight: 600;
}


.video-player.is-missing
.video-missing {
  display: flex;
}


.video-player.is-missing
.video-toggle {
  display: none;
}



/* NEXT PROJECT */

.next-project {
  margin-top: 9px;

  color: var(--blue);

  text-align: center;

  font-size: 72px;
  line-height: 1;

  font-weight: 600;
}



/* PROJECT FOOTER */

.project-footer {
  padding:
    0
    24px
    24px;

  margin-top: 0;
}



/* ======================================================
   TABLET / MOBILE
====================================================== */

@media (max-width: 900px) {


  .home-page {
    min-height: 100vh;

    padding:
      0
      20px
      20px;
  }


  .home-header {
    height: 180px;

    padding-top: 62px;
  }


  .home-header h1 {
    font-size: 48px;
  }


  .project-grid {
    grid-template-columns: 1fr;

    row-gap: 30px;
  }


  .project-category {
    white-space: normal;

    font-size: 20px;
    line-height: 24px;

    min-height: 24px;
  }


  .home-footer {
    margin-top: 64px;
    padding-top: 0;
  }


  .site-footer a {
    font-size: 20px;
  }



  /* PROJECT PAGE */

  .project-home-link {
    left: 20px;
    top: 20px;

    font-size: 20px;
  }


  .project-header {
    height: 230px;

    padding:
      90px
      20px
      0;
  }


  .project-header h1 {
    font-size: 50px;
    line-height: 50px;
  }


  .project-header p,
  .project-header span {
    font-size: 19px;
    line-height: 24px;
  }


  .joueurs-hero {
    display: block;

    height: auto;
    aspect-ratio: auto;
  }


  .joueurs-hero-left,
  .joueurs-hero-right {
    width: 100%;

    height: auto;

    aspect-ratio: 720 / 765;
  }


  .joueurs-hero-left img {
    width: 68%;
  }


  .project-intro {
    margin-top: 36px;
  }


  .project-intro p,
  .video-description {
    font-size: 19px;
    line-height: 1.4;
  }


  .video-case {
    margin-top: 50px;
  }


  .video-case h2 {
    max-width:
      calc(
        100% - 32px
      );

    font-size: 42px;
  }


  .video-stat {
    margin-top: 20px;

    padding:
      0
      16px;

    font-size: 28px;
  }


  .video-player {
    width:
      min(
        500px,
        calc(100vw - 40px)
      );

    height: auto;

    aspect-ratio: 9 / 16;
  }


  .next-project {
    margin-top: 40px;

    font-size: 46px;
  }


  .project-footer {
    margin-top: 50px;
  }

}



/* ======================================================
   VERY SMALL SCREENS
====================================================== */

@media (max-width: 520px) {


  .home-header h1 {
    font-size: 42px;
  }


  .project-category {
    font-size: 18px;
  }


  .project-header h1 {
    font-size: 42px;
  }


  .project-header p,
  .project-header span {
    font-size: 17px;
  }


  .video-case h2 {
    font-size: 34px;
  }


  .video-stat {
    font-size: 24px;
  }


  .next-project {
    font-size: 40px;
  }

}



/* ======================================================
   ACCESSIBILITY
====================================================== */

@media (prefers-reduced-motion: reduce) {

  * {
    scroll-behavior: auto !important;

    transition: none !important;
  }

}

/* Updated project flow: title, introduction, then the full-width hero. */
.project-header { height: auto; padding-top: 96px; }
.project-header p { line-height: 24px; }
.project-intro { margin-top: 34px; }
.joueurs-hero { margin-top: 43px; }
.joueurs-hero + .video-case { margin-top: 25px; }
.next-project { display: block; }

/* Browser controls supply an accessible timeline, audio and fullscreen. */
.video-player video { object-fit: contain; cursor: auto; }
.video-missing { margin: 0; padding: 12px; text-align: center; }
.video-player--website .video-missing {
  inset: auto 0 50px;
  background: rgba(0, 0, 0, .75);
  pointer-events: none;
}
a:focus-visible, button:focus-visible, video:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
}

/* SILVER ROCKET */
.silver-hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  aspect-ratio: 1440 / 765;
  margin-top: 42px;
  background: #121212;
  overflow: hidden;
}
.silver-hero-cover { width: 100%; height: 100%; object-fit: cover; }
.silver-hero-launch { position: relative; overflow: hidden; }
.silver-hero-launch {
  background: linear-gradient(to bottom, #121212, #171717 60%, #121212);
}
.silver-hero-launch img {
  position: absolute;
  left: -18.8889%; top: -17.2549%;
  width: 118.8889%; height: 138.0392%;
  object-fit: fill;
  -webkit-mask-image: linear-gradient(to bottom, transparent 23.5%, #000 28.5%, #000 70%, transparent 76.5%);
  mask-image: linear-gradient(to bottom, transparent 23.5%, #000 28.5%, #000 70%, transparent 76.5%);
}
.silver-role { margin-top: 55px; }
.game-placeholder {
  position: relative;
  margin: 49px 0 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #121212;
  color: white;
}
.game-placeholder > img { width: 100%; height: 100%; object-fit: cover; }
.game-placeholder-label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center;
}
.game-play {
  width: 280px; min-height: 72px;
  padding: 14px 20px;
  border: 0;
  background: var(--blue); color: white;
  font: 600 32px / 1 "Big Shoulders", sans-serif;
}
.game-play:disabled { opacity: 1; cursor: default; }
.game-placeholder-label p {
  margin: 16px 0 0; font-size: 24px; line-height: 1.4;
  text-transform: none;
}
.game-preview-label { margin: 34px 24px 0; text-align: center; font-size: 24px; }
.game-preview-label span { display: block; font-size: 16px; margin-top: 4px; }
.silver-device { margin-top: 28px; text-align: center; }
.silver-page h2 { margin: 0; font-size: 72px; line-height: 1; font-weight: 600; }
.silver-description {
  width: min(968px, calc(100% - 48px));
  margin: 24px auto 0;
  font-size: 24px; line-height: 1.4; text-transform: none;
}
.device-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px; margin: 24px 0 0;
}
.device-grid figure { min-width: 0; margin: 0; }
.device-grid img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; }
.device-grid figcaption { margin-top: 16px; padding: 0 24px; font-size: 24px; line-height: 30px; font-weight: 600; text-align: left; }
.silver-website { margin-top: 84px; text-align: center; }
.silver-website .silver-description { margin-top: 35px; }
.video-player--website {
  width: 100%; height: auto;
  aspect-ratio: 16 / 10; margin-top: 43px;
}
.silver-credits {
  width: min(968px, calc(100% - 48px)); margin: 33px auto 0;
  font-size: 24px; line-height: 1.4; text-align: center;
}
.silver-page .next-project { margin-top: 65px; }

@media (max-width: 900px) {
  .project-header { padding-top: 90px; }
  .project-intro { margin-top: 30px; }
  .joueurs-hero { margin-top: 36px; }
  .joueurs-hero + .video-case { margin-top: 50px; }
  .silver-hero { margin-top: 36px; }
  .silver-role { margin-top: 36px; }
  .silver-page h2 { font-size: 50px; }
  .silver-description, .silver-credits { font-size: 19px; }
  .game-placeholder, .device-grid { margin-left: 0; margin-right: 0; }
  .game-play { min-height: 54px; width: 220px; font-size: 26px; }
  .game-placeholder-label p { font-size: 19px; margin-top: 12px; }
  .silver-device { margin-top: 40px; }
  .silver-website { margin-top: 60px; }
  .video-player--website { width: 100%; aspect-ratio: 16 / 10; }
  .device-grid figcaption { font-size: 20px; }
}
@media (max-width: 520px) {
  .project-header h1 { line-height: 1; }
  .silver-hero { display: block; aspect-ratio: auto; }
  .silver-hero-cover, .silver-hero-launch { width: 100%; height: auto; aspect-ratio: 720 / 765; }
  .device-grid { grid-template-columns: 1fr; gap: 28px; }
  .silver-page h2 { font-size: 42px; }
  .game-play { width: 190px; min-height: 44px; font-size: 23px; }
  .game-placeholder-label p { font-size: 17px; }
  .silver-credits { font-size: 18px; }
}

/* Blue video controls, always visible below the image. */
.video-player { height: auto; aspect-ratio: auto; overflow: hidden; }
.video-player video { height: auto; aspect-ratio: 9 / 16; }
.video-player--website video { aspect-ratio: 16 / 10; }
.video-controls {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  min-height: 56px;
  background: white; color: var(--blue);
  text-transform: none;
}
.video-control {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 36px; width: 36px; height: 40px;
  border: 0; padding: 8px;
  background: transparent; color: var(--blue);
  cursor: pointer;
}
.video-control svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.video-play svg path { fill: currentColor; }
.video-control:disabled { opacity: .4; cursor: default; }
.video-control[hidden] { display: none; }
.video-time { flex: 0 0 auto; font: 400 18px / 1.2 "Big Shoulders", sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.video-seek { flex: 1 1 60px; min-width: 40px; width: 100%; }
.video-volume { flex: 0 0 56px; width: 56px; }
.video-seek, .video-volume {
  --range-progress: 0%;
  -webkit-appearance: none; appearance: none;
  height: 24px; margin: 0; padding: 0;
  background: transparent; color: var(--blue); accent-color: var(--blue);
  cursor: pointer;
}
.video-seek::-webkit-slider-runnable-track, .video-volume::-webkit-slider-runnable-track {
  height: 4px;
  background: linear-gradient(to right, var(--blue) var(--range-progress), #2448ff33 var(--range-progress));
}
.video-seek::-moz-range-track, .video-volume::-moz-range-track { height: 4px; background: #2448ff33; }
.video-seek::-moz-range-progress, .video-volume::-moz-range-progress { height: 4px; background: var(--blue); }
.video-seek::-webkit-slider-thumb, .video-volume::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; margin-top: -4px;
  border: 0; border-radius: 50%; background: var(--blue);
}
.video-seek::-moz-range-thumb, .video-volume::-moz-range-thumb {
  width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--blue);
}
.video-seek:disabled { opacity: .4; cursor: default; }
.video-seek-notice:not([hidden]) { position: absolute; z-index: 2; bottom: 58px; left: 0; right: 0; margin: 0; padding: 10px; background: white; color: var(--blue); text-align: center; font: 400 18px / 1.2 "Big Shoulders", sans-serif; pointer-events: none; }
.video-seek:focus-visible, .video-volume:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.video-player .video-missing {
  inset: auto 0 56px; padding: 12px; font-size: 20px;
  background: rgba(0, 0, 0, .75); pointer-events: none;
}
.video-player:fullscreen { width: 100%; height: 100%; margin: 0; display: flex; flex-direction: column; background: #111; }
.video-player:fullscreen video { flex: 1 1 0; min-height: 0; height: 0; aspect-ratio: auto; object-fit: contain; }
.video-player:fullscreen .video-controls { flex: 0 0 auto; }
@media (max-width: 600px) {
  .video-controls { gap: 4px; padding: 8px; }
  .video-volume { display: none; }
  .video-control { flex-basis: 32px; width: 32px; padding: 6px; }
  .video-time { font-size: 16px; }
  .video-player .video-missing { font-size: 17px; }
}

/* Full experience video and speed selector. */
.video-player--experience { width: 100%; margin-top: 24px; }
.video-player--experience video { aspect-ratio: 16 / 10; }
.experience-video > summary {
  display: block; width: fit-content; margin-left: auto; margin-right: auto;
  padding: 8px 20px; color: var(--blue); cursor: pointer; list-style: none;
}
.experience-video > summary::-webkit-details-marker { display: none; }
.experience-video > summary:hover { text-decoration: underline; }
.experience-video > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.video-speed {
  flex: 0 0 auto; padding: 5px 6px;
  border: 1px solid currentColor; border-radius: 0;
  background: white; color: var(--blue);
  font: 600 18px / 1.2 "Big Shoulders", sans-serif; cursor: pointer;
}
.video-speed:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Playable Construct export. */
.game-status { max-width: 700px; padding: 0 20px; }
.game-shell .game-status[hidden] { display: none; }
.game-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #111; }
.game-shell.is-game-loaded > img, .game-shell.is-game-loaded > .game-placeholder-label { display: none; }
.game-actions {
  display: flex; justify-content: center; gap: 24px; flex-wrap: wrap;
  padding: 20px; font-size: 24px;
}
.game-actions[hidden] { display: none; }
.game-actions button { border: 0; padding: 0; background: transparent; color: var(--blue); font: inherit; cursor: pointer; }
.game-actions button:hover, .game-actions a:hover { text-decoration: underline; }
.game-shell:fullscreen { width: 100%; height: 100%; margin: 0; aspect-ratio: auto; background: #111; }
@media (max-width: 600px) {
  .video-player--experience .video-controls { flex-wrap: wrap; }
  .video-player--experience .video-seek { order: -1; flex-basis: 100%; }
  .video-player--experience .video-time { margin-right: auto; }
  .game-actions { font-size: 20px; }
  .game-placeholder-label .game-status { font-size: 15px; margin-top: 8px; }
}

/* Centre the experience link between the game actions and Physical Device. */
.game-actions { padding: 20px 20px 0; }
.experience-video > .game-preview-label { margin-top: 20px; padding: 0 20px; line-height: 30px; }
.experience-video + .silver-device { margin-top: 20px; }

/* Crop the recording's 54px top/bottom borders, retaining all game content. */
.experience-viewport { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.video-player--experience .experience-viewport video {
  position: absolute; left: 0; top: -5.555556%;
  width: 100%; height: 111.111111%; aspect-ratio: auto; object-fit: fill;
}
.video-player--experience:fullscreen .experience-viewport {
  width: min(100vw, calc((100vh - 56px) * 16 / 9));
  margin: auto; flex: 0 0 auto;
}
.video-player--experience:fullscreen .experience-viewport video {
  height: 111.111111%; flex: none; object-fit: fill;
}

/* Hybrid name: blue on white, chosen colour on solid surfaces, blend on media. */
.device-grid figcaption { text-align: center; }
.project-home-link { color: var(--blue); mix-blend-mode: normal; }
.project-home-link::after {
  content: attr(data-scroll-label); display: block; opacity: 0;
  color: var(--name-surface-color, #fff);
}
.project-home-link.is-name-solid::after { opacity: 1; }
.project-home-link.is-name-auto::after { content: none; }
@supports (mix-blend-mode: difference) {
  .project-home-link.is-name-auto { color: #ffffff; mix-blend-mode: difference; }
}

/* Neutralize the inverted hue using a separate layer in the page context.
 * The original link remains the only interactive/accessibility element.
 */
.project-name-neutralizer {
  position: fixed;
  z-index: 1001;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffffff;
  mix-blend-mode: color;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.project-name-neutralizer[hidden] { display: none; }

/* Keep the fixed blue name readable over blue video controls as well. */
.project-name-controls {
  position: fixed;
  z-index: 1107;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blue);
  -webkit-text-stroke: 2px #ffffff;
  paint-order: stroke fill;
  text-shadow: -1px 0 #ffffff, 1px 0 #ffffff, 0 -1px #ffffff, 0 1px #ffffff;
  mix-blend-mode: normal;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.project-name-controls[hidden] { display: none; }

/* Final spacing and hover refinements. */
.site-footer { gap: 9px; }
.site-footer a { text-underline-offset: 2px; }
.next-project:hover, .next-project:focus-visible {
  text-decoration: underline;
  text-underline-offset: .08em;
}
/* Positions validees dans Figma par Adrien (page Accueil, 1440 px).
 * Les decalages verticaux sont proportionnels a la hauteur des tuiles
 * pour conserver le cadrage sur les ecrans plus petits.
 * Virton: centre de l'image 8 px au-dessus du centre de sa tuile.
 * Joueurs Belges: centre de l'image 14.28 px en dessous du centre de sa tuile.
 * Les tailles validees restent inchangees. */
.home-page .virton-image {
  top: 48.332%;
}
.home-page .joueurs-image {
  width: 78.5%;
  max-height: 78.5%;
  top: 52.978%;
}

/* FOOTBELGE+ — final Figma composition, 1440px desktop reference. */
.footbelge-hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  aspect-ratio: 1440 / 765;
  margin-top: 43px;
  overflow: hidden;
}
.footbelge-hero-logo {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #1a1a1a;
}
.footbelge-hero-logo img {
  position: absolute;
  right: 0;
  top: 0;
  width: 197.550117%;
  height: 110.416659%;
  object-fit: cover;
}
.footbelge-hero-photo {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}
.footbelge-role { margin-top: 55px; }
.footbelge-page h2 {
  margin: 0;
  padding: 0 24px;
  font-size: 72px;
  line-height: 1;
  font-weight: 600;
}
.footbelge-documentary,
.footbelge-story,
.footbelge-transmedia { text-align: center; }
.footbelge-documentary { margin-top: 55px; }
.footbelge-video-meta {
  margin: 16px 24px 0;
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
}
.footbelge-description {
  width: min(968px, calc(100% - 48px));
  margin: 24px auto 0;
  font-size: 24px;
  line-height: 1.4;
  font-weight: 400;
  text-transform: none;
}
.footbelge-prototype-note { margin-top: 16px; }
.video-player--footbelge {
  width: 100%;
  height: auto;
  margin-top: 32px;
}
.video-player--footbelge video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: contain;
}
.footbelge-story,
.footbelge-transmedia { margin-top: 84px; }
.footbelge-stills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 24px;
}
.footbelge-stills figure { min-width: 0; margin: 0; }
.footbelge-stills img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.footbelge-stills figcaption {
  margin-top: 16px;
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
  text-align: center;
}
.footbelge-format-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 32px 24px 0;
}
.footbelge-format-grid article { min-width: 0; }
.footbelge-format-grid h3 {
  margin: 0;
  font-size: 32px;
  line-height: 38px;
  font-weight: 600;
}
.footbelge-format-status {
  margin: 16px 0 0;
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
}
.footbelge-format-copy {
  margin: 16px 0 0;
  font-size: 24px;
  line-height: 1.4;
  text-transform: none;
}
.footbelge-page .next-project { margin-top: 65px; }

@media (max-width: 900px) {
  .footbelge-hero { margin-top: 36px; }
  .footbelge-role { margin-top: 36px; }
  .footbelge-documentary { margin-top: 40px; }
  .footbelge-page h2 { font-size: 50px; padding: 0 20px; }
  .footbelge-description { width: calc(100% - 40px); font-size: 19px; }
  .footbelge-video-meta { font-size: 20px; }
  .footbelge-story, .footbelge-transmedia { margin-top: 60px; }
  .footbelge-stills { gap: 16px; }
  .footbelge-stills figcaption { padding: 0 8px; font-size: 20px; line-height: 26px; }
  .footbelge-format-grid { margin-left: 20px; margin-right: 20px; gap: 20px; }
  .footbelge-format-grid h3 { font-size: 28px; line-height: 34px; }
  .footbelge-format-status { font-size: 18px; line-height: 24px; }
  .footbelge-format-copy { font-size: 19px; }
}
@media (max-width: 600px) {
  .footbelge-hero { display: block; aspect-ratio: auto; }
  .footbelge-hero-logo, .footbelge-hero-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 720 / 765;
  }
  .footbelge-stills { grid-template-columns: 1fr; gap: 28px; }
  .footbelge-format-grid { grid-template-columns: 1fr; gap: 32px; }
  .footbelge-format-status { margin-top: 10px; }
  .footbelge-format-copy { max-width: 448px; margin: 12px auto 0; }
  .footbelge-page .next-project { margin-top: 50px; }
}
@media (max-width: 520px) {
  .footbelge-page h2 { font-size: 42px; }
}

/* WORLD CUP — final Figma composition, 1440px desktop reference. */
.worldcup-page .project-header span { display: block; }
.worldcup-page > .project-intro { min-height: 135px; }
.worldcup-introduction-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  aspect-ratio: 1440 / 765;
  margin-top: 43px;
  overflow: hidden;
}
.worldcup-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--worldcup);
}
.worldcup-cover img {
  width: 85%;
  height: auto;
  object-fit: contain;
}
.worldcup-question {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}
.worldcup-video,
.worldcup-analysis { text-align: center; }
.worldcup-video { margin-top: 55px; }
.worldcup-page h2 {
  margin: 0;
  padding: 0 24px;
  font-size: 72px;
  line-height: 1;
  font-weight: 600;
}
.worldcup-video-meta {
  margin: 16px 24px 0;
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
}
.video-player--worldcup {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  margin-top: 16px;
}
.video-player--worldcup video {
  flex: none;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
}
.video-player--worldcup .video-controls { flex: 0 0 56px; }
.video-player--worldcup:fullscreen video {
  flex: 1 1 0;
  height: 0;
  aspect-ratio: auto;
}
.worldcup-analysis { margin-top: 58px; }
.worldcup-description {
  width: min(968px, calc(100% - 48px));
  min-height: 101px;
  margin: 24px auto 0;
  font-size: 24px;
  line-height: 1.4;
  font-weight: 400;
  text-transform: none;
}
.worldcup-stills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 28px;
}
.worldcup-stills figure { min-width: 0; margin: 0; }
.worldcup-stills img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.worldcup-stills figcaption {
  margin-top: 12px;
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
  text-align: center;
}
.worldcup-page .next-project { margin-top: 65px; }

@media (max-width: 900px) {
  .worldcup-page > .project-intro {
    width: calc(100% - 40px);
    min-height: 0;
  }
  .worldcup-introduction-images { margin-top: 36px; }
  .worldcup-video { margin-top: 40px; }
  .worldcup-page h2 { padding: 0 20px; font-size: 50px; }
  .worldcup-video-meta { font-size: 20px; }
  .worldcup-analysis { margin-top: 50px; }
  .worldcup-description {
    width: calc(100% - 40px);
    min-height: 0;
    font-size: 19px;
  }
  .worldcup-stills { gap: 16px; }
  .worldcup-stills figcaption { padding: 0 8px; font-size: 20px; line-height: 26px; }
}
@media (max-width: 600px) {
  .worldcup-introduction-images { display: block; aspect-ratio: auto; }
  .worldcup-cover,
  .worldcup-question {
    width: 100%;
    height: auto;
    aspect-ratio: 720 / 765;
  }
  .video-player--worldcup { aspect-ratio: auto; }
  .video-player--worldcup video { flex: none; height: auto; aspect-ratio: 16 / 9; }
  .video-player--worldcup .video-controls { flex-wrap: wrap; flex-basis: auto; }
  .video-player--worldcup .video-seek { order: -1; flex-basis: 100%; }
  .video-player--worldcup .video-time { margin-right: auto; }
  .worldcup-stills { grid-template-columns: 1fr; gap: 28px; }
  .worldcup-page .next-project { margin-top: 50px; }
}
@media (max-width: 520px) {
  .worldcup-page h2 { font-size: 42px; }
}

/* GARGARY LABS — current Figma composition, 1440px reference. */
.gargary-page .project-header span { display: block; }
.gargary-page > .project-intro { min-height: 135px; }
.gargary-presentation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  aspect-ratio: 1440 / 765;
  margin-top: 43px;
  overflow: hidden;
}
.gargary-cover,
.gargary-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.gargary-cover { background: var(--gargary); }
.gargary-cover img {
  display: block;
  width: 97%;
  height: auto;
}
.gargary-illustration { background: #ffffff; }
.gargary-illustration img {
  display: block;
  width: 66.666667%;
  height: auto;
}
.gargary-film,
.gargary-story { text-align: center; }
.gargary-film { margin-top: 55px; }
.gargary-page h2 {
  margin: 0;
  padding: 0 24px;
  font-size: 72px;
  line-height: 1;
  font-weight: 600;
}
.gargary-film-meta {
  margin: 16px 24px 0;
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
}
.video-player--gargary {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  margin-top: 47px;
}
.video-player--gargary video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
}
.video-player--gargary:fullscreen video {
  flex: 1 1 0;
  height: 0;
  aspect-ratio: auto;
}
.gargary-story { margin-top: 27px; }
.gargary-description {
  width: min(968px, calc(100% - 48px));
  min-height: 135px;
  margin: 24px auto 0;
  font-size: 24px;
  line-height: 1.4;
  font-weight: 400;
  text-transform: none;
}
.gargary-page .next-project { margin-top: 65px; }

@media (max-width: 900px) {
  .gargary-page > .project-intro {
    width: calc(100% - 40px);
    min-height: 0;
  }
  .gargary-presentation { margin-top: 36px; }
  .gargary-film { margin-top: 40px; }
  .gargary-page h2 { padding: 0 20px; font-size: 50px; }
  .gargary-film-meta { font-size: 20px; }
  .video-player--gargary { margin-top: 32px; }
  .gargary-story { margin-top: 40px; }
  .gargary-description {
    width: calc(100% - 40px);
    min-height: 0;
    font-size: 19px;
  }
}
@media (max-width: 600px) {
  .gargary-presentation { display: block; aspect-ratio: auto; }
  .gargary-cover,
  .gargary-illustration { width: 100%; aspect-ratio: 720 / 765; }
  .video-player--gargary .video-controls { flex-wrap: wrap; }
  .video-player--gargary .video-seek { order: -1; flex-basis: 100%; }
  .video-player--gargary .video-time { margin-right: auto; }
  .gargary-page .next-project { margin-top: 50px; }
}
@media (max-width: 520px) {
  .gargary-page h2 { font-size: 42px; }
}

/* ======================================================
   RE VIRTON — portfolio page
   Reference: final Figma frame, 1440px desktop width.
   Shared type / blue / video controls remain inherited.
====================================================== */
.virton-page .project-header { padding-top: 96px; }
.virton-page .project-header p { line-height: 24px; }
.virton-page > .virton-introduction { margin-top: 35px; }

.virton-hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  aspect-ratio: 1440 / 765;
  margin-top: 74px;
}
.virton-hero-panel {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}
.virton-hero-panel--green { background: #1d7f36; }
.virton-hero-panel--white { background: #fff; }
.virton-hero-panel img {
  display: block;
  width: 80%;
  height: auto;
  max-height: 90%;
  object-fit: contain;
}
/* Capture du motion design : occupe davantage le panneau de droite.
   Garde les proportions et laisse les axes de construction traverser les bords.
   Le blason historique a gauche conserve sa taille d'origine. */
.virton-page .virton-hero-panel--white img {
  width: 120%;
  max-width: none;
  height: auto;
  max-height: none;
  flex-shrink: 0;
  object-fit: contain;
}
.virton-page > .virton-role { margin-top: 60px; }
.virton-identity, .virton-social, .virton-motion { text-align: center; }
.virton-page h2 {
  margin: 0;
  padding: 0 24px;
  color: var(--blue);
  font-size: 72px;
  line-height: 1;
  font-weight: 600;
}
.virton-identity { margin-top: 89px; }
.virton-description {
  width: min(968px, calc(100% - 48px));
  margin: 18px auto 0;
  color: var(--blue);
  font-size: 24px;
  line-height: 1.4;
  font-weight: 400;
  text-transform: none;
}
.virton-logo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 41px 0 0;
}
.virton-logo-grid figure { min-width: 0; margin: 0; }
.virton-logo-tile {
  width: 100%;
  aspect-ratio: 448 / 425;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.virton-logo-tile--original { background: #fff; }
.virton-logo-tile--dark { background: #f1f1f1; }
.virton-logo-tile--light { background: #1d7f36; }
.virton-logo-tile img {
  width: 83.04%;
  height: auto;
  max-height: 90%;
  object-fit: contain;
}
.virton-logo-grid figcaption,
.virton-design-grid figcaption {
  margin: 16px 0 0;
  color: var(--blue);
  font-size: 24px;
  line-height: 28px;
  font-weight: 600;
  text-align: center;
}
.virton-palette { margin-top: 56px; }
.virton-palette h3 {
  margin: 0;
  color: var(--blue);
  font-size: 32px;
  line-height: 1;
  font-weight: 600;
}
.virton-palette-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 26px 0 0;
}
.virton-swatch { width: 100%; height: 65px; }
.virton-swatch--green { background: #1d7f36; }
.virton-swatch--red { background: #e20613; }
.virton-swatch--white { background: #fff; }
.virton-palette-item p {
  margin: 5px 0 0;
  color: var(--blue);
  font-size: 22px;
  line-height: 27px;
  font-weight: 600;
}
.virton-social { margin-top: 61px; }
.virton-social .virton-description { margin-top: 12px; }
.virton-design-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 45px;
  margin: 37px 0 0;
}
.virton-design-grid figure { margin: 0; min-width: 0; }
.virton-design-grid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.virton-motion { margin-top: 84px; }
.virton-motion-meta {
  margin: 13px 24px 0;
  color: var(--blue);
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
}
.virton-motion .virton-description { margin-top: 21px; }
.video-player--virton {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  margin-top: 58px;
}
.video-player--virton video {
  flex: none;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #fff;
}
.video-player--virton:fullscreen video {
  flex: 1 1 0;
  height: 0;
  aspect-ratio: auto;
}
.virton-page .next-project { margin-top: 61px; }

@media (max-width: 900px) {
  .virton-page .project-header { padding-top: 90px; }
  .virton-page h2 { font-size: 50px; padding: 0 20px; }
  .virton-page > .virton-introduction { margin-top: 30px; }
  .virton-hero { margin-top: 38px; }
  .virton-page > .virton-role { margin-top: 36px; }
  .virton-identity { margin-top: 60px; }
  .virton-description { width: calc(100% - 40px); font-size: 19px; }
  .virton-logo-grid { gap: 16px; margin: 30px 0 0; }
  .virton-logo-grid figcaption, .virton-design-grid figcaption { font-size: 20px; line-height: 25px; }
  .virton-palette { margin-top: 42px; }
  .virton-palette-grid { gap: 16px; margin: 22px 0 0; }
  .virton-palette-item p { font-size: 17px; }
  .virton-social { margin-top: 54px; }
  .virton-design-grid { margin: 30px 0 0; gap: 38px 16px; }
  .virton-motion { margin-top: 60px; }
  .virton-motion-meta { font-size: 20px; }
  .video-player--virton { margin-top: 35px; }
}
@media (max-width: 600px) {
  .virton-hero { display: block; aspect-ratio: auto; }
  .virton-hero-panel { width: 100%; aspect-ratio: 720 / 765; }
  .virton-hero-panel img { width: 80%; }
  .virton-logo-grid { grid-template-columns: 1fr; gap: 28px; }
  .virton-logo-tile { aspect-ratio: 448 / 425; }
  .virton-logo-tile img { max-width: 370px; }
  .virton-palette-grid { grid-template-columns: 1fr; gap: 20px; }
  .virton-swatch { height: 52px; }
  .virton-design-grid { grid-template-columns: 1fr; gap: 28px; }
  .virton-motion .virton-description { margin-top: 17px; }
  .video-player--virton .video-controls { flex-wrap: wrap; }
  .video-player--virton .video-seek { order: -1; flex-basis: 100%; }
  .video-player--virton .video-time { margin-right: auto; }
  .virton-page .next-project { margin-top: 50px; }
}
@media (max-width: 520px) {
  .virton-page h2 { font-size: 42px; }
  .virton-palette h3 { font-size: 28px; }
}

/* Selecteur EN | FR — aucun drapeau. Bleu portfolio #2448FF et blanc.
   Les boutons restent compatibles avec script.js (langue, stockage, fondu). */
.language-switch {
  position: fixed;
  z-index: 1200;
  top: 12px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0 4px;
  border: none;
  border-radius: 0;
  background: #fff;
  color: #2448FF;
  opacity: var(--language-scroll-opacity, 1);
  visibility: visible;
  transition: none;
}
/* Simple separateur vertical EN | FR. */
.language-switch::before {
  content: '|';
  order: 2;
  align-self: center;
  font: 600 19px/1 'Big Shoulders', sans-serif;
  color: #2448FF;
  opacity: 1;
}
.language-switch__button[data-lang='en'] { order: 1; }
.language-switch__button[data-lang='fr'] { order: 3; }
.language-switch.is-scroll-hidden {
  visibility: hidden;
  pointer-events: none;
}
.language-switch__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 7px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #2448FF;
  font-family: 'Big Shoulders', sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .04em;
  opacity: .50;
  cursor: pointer;
  transition: opacity .18s ease;
}
.language-switch__button:hover,
.language-switch__button.is-selected {
  opacity: 1;
}
/* Soulignement de la largeur exacte des lettres, pas des 44px cliquables. */
.language-switch__label {
  display: inline-block;
  position: relative;
  line-height: 1;
}
.language-switch__label::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom:   -2px; /* Espace vertical volontaire : meme respiration que EN | FR */
  height: 2px;
  background: #2448FF;
  opacity: 0;
  transition: opacity .18s ease;
}
.language-switch__button.is-selected .language-switch__label::after {
  opacity: 1;
}
.language-switch__button:focus-visible {
  outline: 2px solid #2448FF;
  outline-offset: 2px;
}
@media (max-width: 600px) {
  .language-switch { top: 9px; right: 12px; }
  .language-switch__button { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .language-switch__button, .language-switch__label::after { transition: none; }
}

/* ======================================================
   ABOUT — reprend exactement la direction artistique du portfolio
   Design source : frame « About » de Figma, 1440 × 1220.
   Photo carrée, libellés bleu #2448ff, liens non encadrés.
====================================================== */
.home-name-link {
  color: inherit;
  text-decoration: none;
}
.home-name-link:hover,
.home-name-link:focus-visible {
  /* Same native underline as .project-home-link:hover on project pages. */
  text-decoration: underline;
}
.about-page {
  min-height: 100vh;
  padding-bottom: 84px;
}
.about-header {
  height: 264px;
  padding-top: 96px;
}
.about-header p {
  line-height: 28px;
}
.about-intro-grid {
  display: grid;
  /* Photo left (square), biography right: same dimensions as the approved Figma. */
  grid-template-columns: minmax(0, 400px) minmax(0, 680px);
  gap: 52px;
  align-items: start;
  width: min(1132px, calc(100% - 48px));
  margin: 22px auto 0;
}
.about-biography {
  grid-column: 2;
  color: var(--blue);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.4;
  text-transform: none;
}
.about-biography p { margin: 0 0 26px; }
.about-biography p:last-child { margin-bottom: 0; }
.about-photo {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  min-width: 0;
  margin: 0;
  border: none;
  background: #fff;
  overflow: hidden;
}
.about-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.about-contact { margin-top: 130px; }
.about-contact h2 {
  margin: 0 24px;
  font-size: 72px;
  line-height: 72px;
  font-weight: 600;
  text-align: center;
}
.about-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 38px 24px 0;
}
.about-contact-item { min-width: 0; text-align: center; }
.about-contact-item h3 {
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 28px;
  font-weight: 600;
}
.about-contact-value {
  display: inline-block;
  font-size: 30px;
  line-height: 36px;
  font-weight: 600;
  color: var(--blue);
}
.about-contact-email {
  text-transform: none;
  overflow-wrap: anywhere;
}
.about-contact-item a:hover,
.about-contact-item a:focus-visible { text-decoration: underline; }
.about-cv-pending { cursor: default; }
.about-return {
  display: block;
  margin: 104px 24px 0;
  font-size: 72px;
  line-height: 72px;
}

@media (max-width: 1190px) {
  .about-intro-grid {
    gap: 32px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  }
  .about-biography { font-size: 22px; }
  .about-contact-value { font-size: 25px; }
}
@media (max-width: 760px) {
  .about-header {
    height: 200px;
    padding-top: 70px;
    padding-inline: 20px;
  }
  .about-header h1 { font-size: clamp(37px, 7.6vw, 60px); line-height: 1; }
  .about-header p { font-size: 20px; line-height: 24px; }
  .about-intro-grid {
    width: auto;
    grid-template-columns: 1fr;
    gap: 26px;
    margin: 10px 20px 0;
  }
  .about-photo {
    grid-column: 1;
    grid-row: 1;
    order: -1;
    width: min(100%, 400px);
    justify-self: center;
  }
  .about-biography { grid-column: 1; grid-row: 2; font-size: 20px; line-height: 1.45; }
  .about-biography p { margin-bottom: 18px; }
  .about-contact { margin-top: 76px; }
  .about-contact h2 { font-size: 52px; line-height: 1; }
  .about-contact-grid { grid-template-columns: 1fr; gap: 21px; margin: 30px 20px 0; }
  .about-contact-item h3 { margin-bottom: 3px; font-size: 21px; }
  .about-contact-value { font-size: 26px; }
  /* Keep the long email address on one centered line on phones. */
  .about-contact-item .about-contact-email { font-size: clamp(17px, 5.4vw, 23px); white-space: nowrap; }
  .about-return { margin: 70px 20px 0; font-size: clamp(38px, 7vw, 52px); line-height: 1.05; }
  .about-page { padding-bottom: 70px; }
}
@media (max-width: 380px) {
  .about-header h1 { font-size: 33px; }
  .about-contact-value { font-size: 23px; }
}


/* === Regles RE Virton conservees, chargees uniquement par les selecteurs locaux === */
/* RE VIRTON V5: name uses blue on pale areas; precise white overlays on dark tiles and crests.
 * Scoped to RE Virton. All other project pages retain their own name-contrast behavior. */
.virton-page .virton-logo-grid,
.virton-page .virton-palette-grid,
.virton-page .virton-design-grid { margin-left:0; margin-right:0; }
body.virton-v5-controls-name .virton-page .project-home-link {
  color:#2448ff !important;
  -webkit-text-fill-color:#2448ff !important;
  mix-blend-mode:normal !important;
}
body.virton-v5-controls-name .virton-page .project-home-link::after {
  display:none !important;
}
body.virton-v5-controls-name .project-name-neutralizer { display:none !important; }
.virton-v5-ink {
  position:fixed;
  z-index:1105;
  display:block;
  margin:0;
  padding:0;
  border:0;
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
  overflow:visible;
  mix-blend-mode:normal !important;
  background:transparent;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-mode:alpha;
  mask-mode:alpha;
}
.virton-v5-ink--white { color:white !important; -webkit-text-fill-color:white !important; }
.virton-v5-ink--blue { color:#2448ff !important; -webkit-text-fill-color:#2448ff !important; z-index:1106; }
.virton-v5-ink[hidden] { display:none !important; }

.full-video-action { margin: 20px 24px 0; text-align: center; }
.full-video-link { display: inline-block; max-width: 100%; font-size: 24px; line-height: 1.3; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width:600px) { .full-video-link { font-size: 20px; } }