/* ==========================================================================
   21 Corporate — Game changer career
   Feuille de style principale (design système issu de la maquette Claude Design)
   ========================================================================== */

:root {
  /* Couleurs */
  --bg: #0a0a0a;
  --bg-2: #151716;
  --bg-3: #1a1c1b;
  --bg-hover: #141615;
  --fg: #f1f1ee;
  --fg-2: #d9dbd7;
  --fg-3: #c9ccc9;
  --muted: #a9adab;
  --dim: #9a9e9c;
  --label: #7d817f;
  --ghost: #6f7372;
  --giant: #232625;
  --line: rgba(241, 241, 238, .28);
  --line-soft: rgba(241, 241, 238, .18);
  --line-faint: rgba(241, 241, 238, .12);
  --line-row: rgba(241, 241, 238, .14);
  --line-box: rgba(241, 241, 238, .22);

  /* Mise en page */
  --max: 1440px;
  --gutter: clamp(20px, 5vw, 72px);
  --font: 'Archivo', Helvetica, Arial, sans-serif;

  /* Filtres images */
  --img-filter: grayscale(1) contrast(1.08) brightness(.82);
}

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

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body { overflow-x: hidden; }

a { color: var(--fg); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--dim); }

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

h1, h2, h3, p { margin: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -100px;
  z-index: 100; padding: 10px 14px;
  background: var(--fg-2); color: var(--bg);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.skip-link:focus { top: 16px; color: var(--bg); }

.page { background: var(--bg); overflow: hidden; }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* --------------------------------------------------------------------------
   Typographie utilitaire
   -------------------------------------------------------------------------- */
.eyebrow {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.small-caps {
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.body-text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
  text-wrap: pretty;
}

.title {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: 1;
}

.title--xl { font-size: clamp(36px, 5vw, 72px); line-height: .95; letter-spacing: -.03em; }
.title--lg { font-size: clamp(30px, 3.4vw, 48px); }
.title--md { font-size: clamp(28px, 3vw, 42px); line-height: 1.02; }
.title--sm { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.05; letter-spacing: -.015em; }

/* Liens « [ entre crochets ] » */
.link-bracket { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.link-bracket::before { content: "[ "; }
.link-bracket::after { content: " ]"; }

/* Points décoratifs */
.dots { display: flex; gap: 4px; }
.dots--v { flex-direction: column; gap: 6px; }
.dots span,
.dot {
  display: block;
  width: 5px; height: 5px;
  background: var(--fg);
}
.dot--6 { width: 6px; height: 6px; }
.dot--4 { width: 4px; height: 4px; }
.dots--dark span, .dot--dark { background: var(--bg); }
.dots--soft span { background: var(--fg-3); }

/* Apparition au défilement */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 34px 24px 0;
}

.site-header__logo { display: flex; }
.site-header__logo img { height: 60px; width: auto; }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(18px, 4vw, 56px);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.site-nav .dot { width: 6px; height: 6px; }

/* Variante pour les pages secondaires */
.site-header--page { padding-bottom: 34px; border-bottom: 1px solid var(--line-faint); }

/* --------------------------------------------------------------------------
   01 · Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: max(680px, 96vh);
  background: radial-gradient(120% 90% at 78% 30%, #6c7371 0%, #3b403f 38%, #151716 72%, #0a0a0a 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.hero__media {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(62%, 960px);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%);
  mask-image: linear-gradient(to right, transparent 0%, #000 34%);
}

.hero__video {
  position: absolute; inset: 0;
  overflow: hidden;
  background: var(--bg-2);
}

.hero__video iframe {
  position: absolute;
  top: 50%; left: 50%;
  width: max(100%, calc(100vh * 1.7778 * 1.05));
  height: max(100%, calc(62vw * .5625 * 1.05));
  min-width: 177.78vh;
  min-height: 100%;
  transform: translate(-50%, -50%) scale(1.15);
  border: 0;
  pointer-events: none;
  filter: grayscale(1) contrast(1.08) brightness(.55);
}

.hero__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, #0a0a0a 0%, rgba(10, 10, 10, 0) 40%),
    linear-gradient(to bottom, rgba(10, 10, 10, .75) 0%, rgba(10, 10, 10, 0) 30%),
    linear-gradient(to right, rgba(10, 10, 10, .85) 0%, rgba(10, 10, 10, .35) 55%, rgba(10, 10, 10, .15) 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(48px, 8vh, 96px);
  padding: clamp(56px, 10vh, 120px) var(--gutter) 180px;
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
}

.hero__title {
  font-weight: 500;
  font-stretch: 96%;
  text-transform: uppercase;
  font-size: clamp(52px, 9vw, 148px);
  line-height: .92;
  letter-spacing: -.035em;
  display: flex;
  flex-direction: column;
  max-width: min(100%, 9.4em);
}
.hero__title-row {
  display: flex;
  justify-content: space-between;
  gap: .3em;
  padding-left: 1.4em;
}
.hero__title-row span:last-child { color: #d9dbd8; }
.hero__title-end { color: var(--fg-3); }

.hero__intro {
  display: flex;
  flex-direction: column;
  gap: 44px;
  max-width: 440px;
  margin-left: clamp(0px, 12vw, 180px);
}
.hero__intro p { color: #d4d6d3; text-wrap: pretty; }
.hero__links { display: flex; gap: 44px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Rubans défilants
   -------------------------------------------------------------------------- */
.ribbon {
  position: absolute;
  left: -5%; right: -5%;
  overflow: hidden;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ribbon--hero {
  bottom: 72px;
  z-index: 3;
  transform: rotate(-3.5deg);
  background: var(--fg-2);
  color: var(--bg);
  border-top: 1px solid var(--fg);
  border-bottom: 1px solid #8a8d8b;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  font-weight: 500;
}

.ribbon__track {
  display: flex;
  width: max-content;
  padding: 9px 0;
  animation: ribbon-scroll 60s linear infinite;
}
.ribbon--reverse .ribbon__track { animation-direction: reverse; }

.ribbon__item {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-right: 28px;
  white-space: nowrap;
}

.ribbon--small { font-size: 11px; }
.ribbon--small .ribbon__track { padding: 8px 0; }
.ribbon--small .ribbon__item { gap: 24px; padding-right: 24px; }

@keyframes ribbon-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   02 · Mission
   -------------------------------------------------------------------------- */
.mission {
  padding: clamp(120px, 18vw, 240px) 0 clamp(110px, 16vw, 220px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--dim);
}

/* Ligne — points — texte — points — ligne */
.statement {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(16px, 1fr) auto minmax(0, 1080px) auto minmax(16px, 1fr);
  align-items: center;
  column-gap: clamp(12px, 3vw, 40px);
}
.statement--narrow { grid-template-columns: minmax(16px, 1fr) auto minmax(0, 900px) auto minmax(16px, 1fr); }
.statement__line { height: 1px; background: var(--line); }
.statement__text {
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  font-size: clamp(28px, 4.4vw, 62px);
  line-height: 1.02;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.statement__text em,
.statement__text .ghost { font-style: normal; color: var(--ghost); }

.mission__text {
  max-width: 520px;
  padding: 0 24px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   03 · Approche
   -------------------------------------------------------------------------- */
.approach {
  padding-bottom: clamp(120px, 14vw, 200px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(40px, 6vw, 96px);
  align-items: end;
}

.approach__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-2);
}
.approach__media img,
.img-cover {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: var(--img-filter);
}

.tag {
  position: absolute;
  top: 16px; left: 16px;
  background: var(--fg-2);
  color: var(--bg);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 7px 12px;
}

.approach__list {
  display: flex;
  flex-direction: column;
  gap: 72px;
  padding-bottom: 8px;
}

.approach__item {
  display: flex;
  flex-direction: column;
  gap: 22px;
  border-top: 1px solid var(--line-soft);
  padding-top: 24px;
}
.approach__item .body-text { max-width: 480px; }

.index-row {
  display: flex;
  justify-content: space-between;
  color: var(--dim);
}

/* --------------------------------------------------------------------------
   04 · Services
   -------------------------------------------------------------------------- */
.section--bordered {
  border-top: 1px solid var(--line-faint);
  padding: clamp(96px, 12vw, 160px) 0;
}

.services__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 7vw, 96px);
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
}
.section-head__title { display: flex; flex-direction: column; gap: 18px; }
.section-head__lead { max-width: 360px; color: var(--muted); }

.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(20px, 2vw, 28px);
}

.service {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.service__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line-box);
  padding: 10px 12px;
}
.service__num {
  background: var(--fg-2);
  color: var(--bg);
  padding: 4px 10px;
}

.service__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-2);
}

.service__text { display: flex; flex-direction: column; gap: 12px; }
.service__text strong { color: var(--fg); font-weight: 600; }

/* --------------------------------------------------------------------------
   05 · Talents
   -------------------------------------------------------------------------- */
.talents__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}

.talents__aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 40px;
}
.talents__aside .title { max-width: 12em; }
.talents__aside .link-bracket { margin-top: 20px; }

.roster {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.roster__row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1.3fr) minmax(0, 1fr) 24px;
  gap: 16px;
  align-items: center;
}

.roster__head {
  background: var(--fg-2);
  color: var(--bg);
  padding: 10px 14px;
  font-size: 11px;
}
.roster__head .dots { gap: 3px; }
.roster__head .dots span { width: 4px; height: 4px; background: var(--bg); }

.roster__item {
  padding: 17px 14px;
  border-bottom: 1px solid var(--line-row);
  color: var(--fg);
  transition: background .2s ease;
}
.roster__item:hover { background: var(--bg-hover); color: var(--fg); }
.roster__num { color: var(--label); }
.roster__name { font-weight: 500; }
.roster__club { color: var(--muted); }
.roster__item .dot { justify-self: end; width: 6px; height: 6px; }

/* --------------------------------------------------------------------------
   06 · CTA
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  padding-top: clamp(96px, 12vw, 160px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cta .statement { position: relative; z-index: 2; }
.cta__title {
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  font-size: clamp(40px, 7vw, 104px);
  line-height: .95;
  letter-spacing: -.035em;
}
.cta__title .ghost { color: var(--ghost); }

.cta__stage {
  position: relative;
  width: 100%;
  height: clamp(420px, 52vw, 680px);
  margin-top: -20px;
  background: radial-gradient(90% 100% at 50% 20%, #5c6361 0%, #2b2f2e 50%, #0a0a0a 100%);
  overflow: hidden;
}

.cta__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: var(--img-filter);
  opacity: .75;
  -webkit-mask-image: radial-gradient(70% 80% at 50% 45%, #000 40%, transparent 100%);
  mask-image: radial-gradient(70% 80% at 50% 45%, #000 40%, transparent 100%);
}

.ribbon--cta-dark {
  top: 58%;
  transform: rotate(2.5deg);
  background: var(--bg-3);
  color: var(--fg-3);
  border-top: 1px solid rgba(241, 241, 238, .25);
  border-bottom: 1px solid rgba(241, 241, 238, .25);
}
.ribbon--cta-light {
  top: 70%;
  transform: rotate(-2deg);
  background: var(--fg-2);
  color: var(--bg);
  font-weight: 500;
}

.cta__links {
  position: absolute;
  left: 0; right: 0; bottom: 40px;
  display: flex;
  justify-content: center;
  gap: 44px;
  flex-wrap: wrap;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   07 · Contact / Pied de page
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  padding: clamp(96px, 12vw, 160px) 0 0;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 56px;
}

.site-footer__contact { display: flex; flex-direction: column; gap: 22px; }
.site-footer__contact .title { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.05; letter-spacing: -.01em; }
.site-footer__contact .small-caps { max-width: 340px; color: var(--muted); }

.site-footer__mail {
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 500;
  border-bottom: 1px solid rgba(241, 241, 238, .35);
  align-self: flex-start;
  padding-bottom: 6px;
}

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  justify-self: end;
  width: min(100%, 420px);
}
.site-footer__col { display: flex; flex-direction: column; gap: 12px; }
.site-footer__col-title { color: var(--label); }

.site-footer__giant {
  position: relative;
  margin-top: clamp(80px, 10vw, 140px);
  height: clamp(120px, 19vw, 300px);
  overflow: hidden;
}
.site-footer__wordmark {
  position: absolute;
  left: 0; right: 0; top: 0;
  text-align: center;
  white-space: nowrap;
  font-weight: 700;
  font-stretch: 72%;
  text-transform: uppercase;
  font-size: clamp(150px, 24vw, 380px);
  line-height: .8;
  letter-spacing: -.04em;
  color: var(--giant);
  user-select: none;
}
.site-footer__legal {
  position: absolute;
  left: 0; right: 0; bottom: 16px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 0 var(--gutter);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
}
.site-footer__legal a { color: var(--dim); }
.site-footer__legal a:hover { color: var(--fg); }

/* --------------------------------------------------------------------------
   Pages secondaires
   -------------------------------------------------------------------------- */
.page-hero {
  padding-top: clamp(72px, 10vw, 140px);
  padding-bottom: clamp(56px, 7vw, 96px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.page-hero .title--xl { max-width: 12em; }
.page-hero .body-text { max-width: 560px; }

.prose {
  max-width: 760px;
  padding-bottom: clamp(96px, 12vw, 160px);
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.prose section { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--line-soft); padding-top: 24px; }
.prose h2 { font-size: clamp(20px, 2vw, 26px); }
.prose p, .prose li { font-size: 15px; line-height: 1.65; color: var(--muted); }
.prose ul { margin: 0; padding-left: 18px; }
.prose a { color: var(--fg); border-bottom: 1px solid var(--line); }
.prose a:hover { color: var(--dim); }
.placeholder { color: var(--fg-2); background: rgba(241, 241, 238, .06); padding: 0 4px; }

/* Grille des talents (page dédiée) */
.talent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: clamp(20px, 2vw, 28px);
  padding-bottom: clamp(96px, 12vw, 160px);
}
.talent-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--fg);
}
.talent-card__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-2);
  position: relative;
}
.talent-card__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 10, .6), transparent 50%);
}
.talent-card__placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 16px;
  font-weight: 700;
  font-stretch: 72%;
  text-transform: uppercase;
  font-size: clamp(64px, 8vw, 110px);
  line-height: .8;
  letter-spacing: -.04em;
  color: var(--giant);
  background: radial-gradient(90% 90% at 70% 20%, #2b2f2e 0%, #151716 60%, #0a0a0a 100%);
}
.talent-card__meta { display: flex; justify-content: space-between; align-items: center; color: var(--dim); }
.talent-card__name { font-size: clamp(20px, 1.8vw, 24px); }
.talent-card__club { color: var(--muted); }
.talent-card:hover .talent-card__name { color: var(--fg-3); }

/* Fiche joueur */
.player {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  padding-bottom: clamp(96px, 12vw, 160px);
}
.player__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-2); position: relative; }
.player__body { display: flex; flex-direction: column; gap: 40px; }
.player__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line-soft);
}
.player__fact {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-row);
}
.player__fact dt { color: var(--label); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.player__fact dd { margin: 0; font-size: 15px; font-weight: 500; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .talents__aside { position: static; }
}

@media (max-width: 768px) {
  .hero__media {
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 20%);
    mask-image: linear-gradient(to right, transparent 0%, #000 20%);
    opacity: .75;
  }
  .hero__video iframe { width: max(100%, calc(100vh * 1.7778 * 1.05)); height: max(100%, calc(100vw * .5625 * 1.05)); min-width: 0; }
  .hero__content { padding-bottom: 150px; }
  .hero__intro { margin-left: 0; gap: 32px; }
  .ribbon--hero { bottom: 56px; }
  .site-footer__cols { justify-self: start; }
}

@media (max-width: 640px) {
  .hero__title { font-size: clamp(36px, 10.5vw, 148px); }
  .hero__title-row { padding-left: 0; }
  .site-header { padding-top: 28px; gap: 18px; }
  .site-header__logo img { height: 48px; }
  .site-nav { gap: 14px; }
  .site-nav .dot { width: 4px; height: 4px; }
  .mission { gap: 40px; }
  .statement { column-gap: 10px; }
  .approach__list { gap: 48px; }
  .roster__row { grid-template-columns: 36px minmax(0, 1.3fr) minmax(0, 1fr) 16px; gap: 10px; }
  .roster__item { padding: 14px 10px; }
  .cta__stage { height: 460px; }
  .cta__links { gap: 24px; }
  .site-footer__legal { justify-content: center; text-align: center; }
  .player__facts { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Accessibilité : mouvement réduit
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ribbon__track { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Site multi-pages — composants ajoutés
   ========================================================================== */

/* Lien actif dans la navigation */
.site-nav a[aria-current="page"] { color: var(--dim); position: relative; }
.site-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px;
  height: 1px; background: var(--fg);
}

/* Bloc de section générique */
.block { padding: clamp(72px, 9vw, 140px) 0; }
.block--top-line { border-top: 1px solid var(--line-faint); }
.block__inner { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 72px); }

/* Accroche en fin de page (remplace le grand CTA sur les pages secondaires) */
.cta-band {
  border-top: 1px solid var(--line-faint);
  padding: clamp(72px, 9vw, 140px) 0;
}
.cta-band__inner {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px; flex-wrap: wrap;
}
.cta-band__title { font-size: clamp(32px, 4.4vw, 64px); line-height: .98; letter-spacing: -.03em; max-width: 12em; }
.cta-band__title .ghost { color: var(--ghost); }
.cta-band__links { display: flex; gap: 32px; flex-wrap: wrap; }

/* Aperçu des services (accueil) */
.teaser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(20px, 2vw, 28px);
}
.teaser {
  display: flex; flex-direction: column; gap: 20px;
  padding: 24px;
  border: 1px solid var(--line-box);
  color: var(--fg);
  transition: background .2s ease;
}
.teaser:hover { background: var(--bg-hover); color: var(--fg); }
.teaser__num { color: var(--label); }
.teaser .body-text { flex: 1; }

/* Services détaillés (page Services) */
.service-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  padding: clamp(48px, 6vw, 96px) 0;
  border-top: 1px solid var(--line-soft);
}
.service-row:first-of-type { border-top: 0; padding-top: 0; }
.service-row__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-2); position: relative; }
.service-row__body { display: flex; flex-direction: column; gap: 24px; }
.service-row__body .body-text { max-width: 520px; }
.service-row--flip .service-row__media { order: 2; }
.feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.feature-list li {
  display: grid; grid-template-columns: 16px 1fr; gap: 14px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--line-row);
  font-size: 15px; line-height: 1.55; color: var(--muted);
}
.feature-list li::before { content: ""; width: 5px; height: 5px; background: var(--fg); margin-top: 7px; }
.feature-list strong { color: var(--fg); font-weight: 600; }

/* Grille de valeurs / publics */
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(20px, 2vw, 28px);
}
.value {
  display: flex; flex-direction: column; gap: 16px;
  border-top: 1px solid var(--line-soft);
  padding-top: 20px;
}
.value__title { font-size: clamp(20px, 1.8vw, 24px); }

/* Parcours en étapes */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 0;
  border-top: 1px solid var(--line-soft);
}
.step {
  display: flex; flex-direction: column; gap: 18px;
  padding: 28px clamp(16px, 2vw, 28px) 28px 0;
  border-right: 1px solid var(--line-row);
}
.step:last-child { border-right: 0; }
.step__num { color: var(--label); }
.step__title { font-size: clamp(20px, 1.8vw, 24px); }

/* Actualités */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: clamp(20px, 2vw, 28px);
}
.news-card { display: flex; flex-direction: column; gap: 16px; color: var(--fg); }
.news-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-2); position: relative; }
.news-card__meta { display: flex; justify-content: space-between; gap: 12px; color: var(--dim); }
.news-card__title { font-size: clamp(20px, 1.8vw, 24px); }
.news-card:hover .news-card__title { color: var(--fg-3); }
.news-card__placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--label);
  background: radial-gradient(90% 90% at 70% 20%, #2b2f2e 0%, #151716 60%, #0a0a0a 100%);
}

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}
.contact-list { display: flex; flex-direction: column; }
.contact-list__row {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid var(--line-row);
}
.contact-list__label { color: var(--label); }
.contact-list__value { font-weight: 500; }

.form { display: flex; flex-direction: column; gap: 22px; }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 22px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.field input, .field select, .field textarea {
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--fg);
  font: inherit; font-size: 15px;
  padding: 12px 0;
  outline: none;
  transition: border-color .2s ease;
}
.field select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.field select option { background: var(--bg-2); color: var(--fg); }
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--fg); }
.field input::placeholder, .field textarea::placeholder { color: var(--label); }
.button {
  align-self: flex-start;
  background: var(--fg-2); color: var(--bg);
  border: 0; cursor: pointer;
  font: inherit; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
  padding: 14px 22px;
  transition: background .2s ease;
}
.button:hover { background: var(--fg); }
.form__note { font-size: 12px; line-height: 1.55; color: var(--label); }

/* FAQ */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--line-soft); }
.faq details { border-bottom: 1px solid var(--line-row); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 22px 0;
  font-weight: 500; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--dim); font-weight: 300; font-size: 22px; flex-shrink: 0; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 24px; max-width: 680px; }

@media (max-width: 640px) {
  .step { border-right: 0; border-bottom: 1px solid var(--line-row); padding-right: 0; }
  .step:last-child { border-bottom: 0; }
  .service-row--flip .service-row__media { order: 0; }
}

/* --------------------------------------------------------------------------
   Logos de clubs (tableau des joueurs et cartes talents)
   -------------------------------------------------------------------------- */
.roster__club, .talent-card__club { display: flex; align-items: center; gap: 10px; min-width: 0; }
.club-logo {
  width: 20px; height: 20px; flex-shrink: 0;
  object-fit: contain;
}
@media (max-width: 640px) { .club-logo { width: 16px; height: 16px; } }

/* --------------------------------------------------------------------------
   Fondateur (page L'agence)
   -------------------------------------------------------------------------- */
.founder__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.founder__media {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 520px;
  overflow: hidden;
  background: var(--bg-2);
}
.founder__body { display: flex; flex-direction: column; gap: 28px; }
.founder__role { color: var(--muted); margin-top: 12px; }
.founder__quote {
  margin: 0;
  padding: 20px 0 20px 24px;
  border-left: 1px solid var(--line);
}
.founder__quote p {
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.35;
  font-weight: 500;
  text-wrap: pretty;
}
.founder__body .body-text { max-width: 560px; }

/* ==========================================================================
   Animations, transitions et interactions
   ========================================================================== */

/* Fondu d'arrivée de la page */
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
.page { animation: page-in .6s ease both; }

/* --- Hero : entrée en cascade ------------------------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ribbon-in { from { opacity: 0; transform: rotate(-3.5deg) translateY(60px); } to { opacity: 1; transform: rotate(-3.5deg) translateY(0); } }

.hero .site-header { animation: fade 1s ease .1s both; }
.hero__title-row, .hero__title-end { display: flex; animation: rise 1s cubic-bezier(.2,.7,.2,1) both; }
.hero__title-row { animation-delay: .25s; }
.hero__title-end { animation-delay: .4s; }
.hero__intro p { animation: rise .9s cubic-bezier(.2,.7,.2,1) .65s both; }
.hero__links { animation: rise .9s cubic-bezier(.2,.7,.2,1) .8s both; }
.hero__media { animation: fade 1.6s ease .3s both; }
.ribbon--hero { animation: ribbon-in 1s cubic-bezier(.2,.7,.2,1) .9s both; }

/* Parallaxe (valeurs mises à jour en JS) */
.hero__content { will-change: transform; transform: translateY(var(--py, 0px)); }
.hero__media { transform: translateY(calc(var(--py, 0px) * .5)); }
.site-footer__wordmark { transform: translateX(var(--px, 0px)); transition: transform .1s linear; }

/* --- Apparition au défilement : cascade dans les grilles ---------------- */
.reveal { transition-delay: var(--d, 0s); }
.services__grid > .reveal:nth-child(2), .talent-grid > .reveal:nth-child(3n+2), .value-grid > .reveal:nth-child(2),
.steps > .step:nth-child(2), .news-grid > .reveal:nth-child(3n+2) { --d: .12s; }
.services__grid > .reveal:nth-child(3), .talent-grid > .reveal:nth-child(3n+3), .value-grid > .reveal:nth-child(3),
.steps > .step:nth-child(3), .news-grid > .reveal:nth-child(3n+3) { --d: .24s; }
.value-grid > .reveal:nth-child(4), .steps > .step:nth-child(4) { --d: .36s; }
.talent-grid > .reveal:nth-child(4n) { --d: .36s; }

/* Les étapes et le tableau s'animent ligne par ligne */
.steps.reveal .step { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; transition-delay: var(--d, 0s); }
.steps.reveal.is-visible .step { opacity: 1; transform: none; }
.roster.reveal .roster__item { opacity: 0; transform: translateX(-12px); transition: opacity .5s ease, transform .5s ease, background .2s ease; }
.roster.reveal.is-visible .roster__item { opacity: 1; transform: none; }
.roster__item:nth-child(2) { transition-delay: .05s } .roster__item:nth-child(3) { transition-delay: .1s }
.roster__item:nth-child(4) { transition-delay: .15s } .roster__item:nth-child(5) { transition-delay: .2s }
.roster__item:nth-child(6) { transition-delay: .25s } .roster__item:nth-child(7) { transition-delay: .3s }
.roster__item:nth-child(8) { transition-delay: .35s } .roster__item:nth-child(9) { transition-delay: .4s }
.roster__item:nth-child(10) { transition-delay: .45s } .roster__item:nth-child(11) { transition-delay: .5s }
.roster__item:nth-child(12) { transition-delay: .55s } .roster__item:nth-child(13) { transition-delay: .6s }

/* Les lignes des citations se tracent depuis le centre */
.statement.reveal .statement__line { transform: scaleX(0); transition: transform 1.1s cubic-bezier(.2,.7,.2,1) .15s; }
.statement.reveal .statement__line:first-child { transform-origin: right; }
.statement.reveal .statement__line:last-child { transform-origin: left; }
.statement.reveal.is-visible .statement__line { transform: scaleX(1); }

/* Bordures des blocs qui se dessinent */
.approach__item, .value, .service-row, .prose section { position: relative; border-top-color: transparent; }
.approach__item::before, .value::before, .service-row::before, .prose section::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%;
  background: var(--line-soft); transform: scaleX(0); transform-origin: left;
  transition: transform 1s cubic-bezier(.2,.7,.2,1) .1s;
}
.service-row:first-of-type::before { display: none; }
.approach__item.is-visible::before, .value.is-visible::before, .service-row.is-visible::before, .prose section::before { transform: scaleX(1); }
.service-row::before { transition-delay: 0s; }

/* --- Liens [ entre crochets ] : les crochets s'écartent ----------------- */
.link-bracket { position: relative; display: inline-flex; gap: 0; white-space: nowrap; transition: color .25s ease; }
.link-bracket::before, .link-bracket::after { display: inline-block; transition: transform .3s cubic-bezier(.2,.7,.2,1), color .25s ease; }
.link-bracket:hover::before { transform: translateX(-4px); }
.link-bracket:hover::after { transform: translateX(4px); }
.link-bracket:hover { color: var(--fg); }
.link-bracket:hover::before, .link-bracket:hover::after { color: var(--dim); }

/* --- Navigation : soulignement qui glisse ------------------------------ */
.site-nav a { position: relative; padding-bottom: 8px; margin-bottom: -8px; }
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--fg); transform: scaleX(0); transform-origin: right;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.site-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.site-nav a[aria-current="page"]::after { transform: scaleX(1); bottom: 0; }
.site-nav .dot { transition: transform .3s ease; }
.site-nav a:hover + .dot { transform: rotate(45deg); }
.site-header__logo img { transition: transform .4s cubic-bezier(.2,.7,.2,1), opacity .3s ease; }
.site-header__logo:hover img { transform: scale(1.06); }

/* --- Images : zoom lent au survol --------------------------------------- */
.approach__media, .service__media, .service-row__media, .talent-card__media, .news-card__media, .founder__media, .player__media { overflow: hidden; }
.approach__media img, .service__media img, .service-row__media img, .talent-card__media > *, .news-card__media > *, .founder__media img {
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .6s ease;
}
.approach__media:hover img, .service:hover .service__media img, .service-row:hover .service-row__media img,
.talent-card:hover .talent-card__media > *, .news-card:hover .news-card__media > *, .founder__media:hover img { transform: scale(1.04); }
.service:hover .service__media img, .service-row:hover .service-row__media img, .founder__media:hover img { filter: grayscale(1) contrast(1.08) brightness(.95); }
.tag { transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.approach__media:hover .tag, .service-row__media:hover .tag, .founder__media:hover .tag { transform: translateY(-2px); }

/* --- Tableau des joueurs ------------------------------------------------ */
.roster__item { position: relative; }
.roster__item::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
  background: var(--fg); transition: width .5s cubic-bezier(.2,.7,.2,1);
}
.roster__item:hover::after { width: 100%; }
.roster__name, .roster__club, .roster__num { transition: transform .35s cubic-bezier(.2,.7,.2,1), color .25s ease; }
.roster__item:hover .roster__name { transform: translateX(6px); }
.roster__item:hover .roster__club { color: var(--fg); }
.roster__item:hover .roster__num { color: var(--fg); }
.roster__item .dot { transition: transform .35s cubic-bezier(.2,.7,.2,1), background .25s ease; }
.roster__item:hover .dot { transform: rotate(45deg) scale(1.2); }
.club-logo { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.roster__item:hover .club-logo, .talent-card:hover .club-logo { transform: scale(1.25); }

/* --- Cartes et blocs ---------------------------------------------------- */
.service, .talent-card, .news-card, .value, .step { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.service:hover, .talent-card:hover, .news-card:hover { transform: translateY(-6px); }
.service__bar { transition: border-color .3s ease, background .3s ease; }
.service:hover .service__bar, .service-row:hover .service__bar { border-color: var(--fg); }
.service__bar .dot, .index-row .dot, .talent-card__meta .dot { transition: transform .35s ease; }
.service:hover .service__bar .dot, .approach__item:hover .index-row .dot, .talent-card:hover .talent-card__meta .dot { transform: rotate(45deg); }
.talent-card__name, .news-card__title, .value__title, .step__title { transition: color .25s ease, transform .4s cubic-bezier(.2,.7,.2,1); }
.talent-card:hover .talent-card__name { transform: translateX(4px); }
.value:hover .value__title, .step:hover .step__title { color: var(--fg-3); }
.value::before, .step { transition-property: transform, opacity, border-color; }
.value:hover::before { background: var(--fg); }

/* --- Rubans : ralentissent au survol ----------------------------------- */
.ribbon:hover .ribbon__track { animation-play-state: paused; }

/* --- Formulaire, FAQ, boutons ------------------------------------------- */
.button { transition: background .25s ease, transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.button:active { transform: translateY(0); }
.field input, .field select, .field textarea { transition: border-color .3s ease, padding-left .3s ease; }
.field input:focus, .field textarea:focus { padding-left: 6px; }
.faq summary::after { transition: transform .35s cubic-bezier(.2,.7,.2,1), color .25s ease; }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq summary:hover { color: var(--fg-3); }
.faq summary:hover::after { color: var(--fg); }
@keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.faq details[open] > p { animation: faq-open .4s ease both; }
.contact-list__row { transition: padding-left .3s ease; }
.contact-list__row:hover { padding-left: 6px; }
.site-footer__mail { transition: color .25s ease, border-color .25s ease, letter-spacing .4s ease; }
.site-footer__mail:hover { border-color: var(--fg); letter-spacing: .02em; }

/* --- Mouvement réduit : tout désactiver -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .page, .hero *, .ribbon--hero { animation: none !important; }
  .hero__content, .hero__media, .site-footer__wordmark { transform: none !important; }
  .statement.reveal .statement__line, .approach__item::before, .value::before, .service-row::before,
  .steps.reveal .step, .roster.reveal .roster__item { transform: none !important; opacity: 1 !important; transition: none !important; }
  .reveal { transition-delay: 0s; }
}

/* --- CTA : le titre « Your career starts now! » se superpose à l'image --- */
.cta .statement { height: 0; overflow: visible; }
.cta .statement.reveal { transform: translateY(calc(clamp(90px, 11vw, 165px) + 18px)); }
.cta .statement.reveal.is-visible { transform: translateY(clamp(90px, 11vw, 165px)); }
.cta__title { text-shadow: 0 6px 30px rgba(0, 0, 0, .55); }
.cta__stage { margin-top: 0; }

/* --------------------------------------------------------------------------
   Actualités : flux Instagram
   -------------------------------------------------------------------------- */
.ig-profile {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(18px, 3vw, 36px);
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--line-box);
  color: var(--fg);
  margin-bottom: clamp(48px, 6vw, 80px);
  transition: border-color .3s ease, background .3s ease;
}
.ig-profile:hover { border-color: var(--fg); background: var(--bg-hover); color: var(--fg); }
.ig-profile__avatar {
  width: clamp(72px, 8vw, 104px); height: clamp(72px, 8vw, 104px);
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(80% 80% at 50% 30%, #3b403f 0%, #151716 100%);
  flex-shrink: 0;
}
.ig-profile__avatar img { width: 46%; height: auto; }
.ig-profile__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ig-profile__handle { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.ig-profile__name { font-size: clamp(22px, 2.2vw, 30px); }
.ig-profile__bio { color: var(--muted); }
.ig-profile__cta .button { pointer-events: none; }

.ig-head { margin-bottom: clamp(28px, 3vw, 40px); }

.ig-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
}
.ig-grid li { min-width: 0; }
.ig-grid li a.ig-fallback {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 5; border: 1px solid var(--line-box);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim);
}
/* Intégrations officielles : on neutralise les marges et largeurs imposées par Instagram */
.ig-grid .instagram-media {
  margin: 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-shadow: none !important;
  border: 1px solid var(--line-box) !important;
  border-radius: 0 !important;
  background: var(--bg-2) !important;
}
.ig-more { margin-top: clamp(32px, 4vw, 48px); padding-bottom: clamp(96px, 12vw, 160px); }

@media (max-width: 640px) {
  .ig-profile { grid-template-columns: auto 1fr; }
  .ig-profile__cta { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Actualités : aperçu image du compte Instagram
   -------------------------------------------------------------------------- */
.ig-snapshot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  max-width: 820px;
  margin: 0 auto;
  padding-bottom: clamp(96px, 12vw, 160px);
  color: var(--fg);
}
.ig-snapshot__frame {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line-box);
  padding: clamp(10px, 1.5vw, 18px);
  transition: border-color .3s ease;
}
.ig-snapshot:hover .ig-snapshot__frame { border-color: var(--fg); }
.ig-snapshot__frame img {
  width: 100%; height: auto;
  filter: var(--img-filter);
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .6s ease;
}
.ig-snapshot:hover .ig-snapshot__frame img { transform: scale(1.02); filter: grayscale(1) contrast(1.08) brightness(.95); }
.ig-snapshot__frame .tag { top: clamp(22px, 3vw, 34px); left: clamp(22px, 3vw, 34px); }
.ig-snapshot__hover {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 10, 10, .35);
  opacity: 0; transition: opacity .35s ease;
}
.ig-snapshot:hover .ig-snapshot__hover { opacity: 1; }
.ig-snapshot__hover .button { pointer-events: none; }
.ig-snapshot__caption {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
.ig-snapshot__date { color: var(--dim); }

/* --------------------------------------------------------------------------
   Icônes des réseaux sociaux
   -------------------------------------------------------------------------- */
.icon { width: 20px; height: 20px; display: block; }
.social { display: flex; align-items: center; gap: 18px; margin-top: 2px; }
.social__link {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--line-box);
  color: var(--fg);
  transition: border-color .3s ease, background .3s ease, transform .35s cubic-bezier(.2,.7,.2,1), color .25s ease;
}
.social__link:hover { border-color: var(--fg); background: var(--fg); color: var(--bg); transform: translateY(-3px); }
.contact-list__label--icon { display: flex; align-items: center; color: var(--fg); }
.contact-list__label--icon .icon { width: 18px; height: 18px; }

/* Vidéo du hero indisponible (autoplay refusé) : on masque le lecteur, le dégradé reste */
.hero__media.is-unavailable { display: none !important; }

/* --- Services : sur une colonne (mobile / tablette), ordre titre > image > texte --- */
@media (max-width: 900px) {
  .service-row { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .service-row__body { display: contents; }
  .service-row .service__bar { order: 1; }
  .service-row .title { order: 2; }
  .service-row__media { order: 3; margin-top: 4px; }
  .service-row .body-text { order: 4; margin-top: 8px; }
  .service-row .feature-list { order: 5; }
  .service-row--flip .service-row__media { order: 3; }
}

/* --------------------------------------------------------------------------
   Sélecteur de langue (en haut à droite de l'en-tête)
   -------------------------------------------------------------------------- */
.lang {
  position: absolute; top: 44px; right: var(--gutter); z-index: 4;
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.lang a { color: var(--dim); padding: 4px 0; }
.lang a:hover { color: var(--fg); }
.lang a[aria-current] { color: var(--fg); border-bottom: 1px solid var(--fg); }
.lang__sep { width: 1px; height: 10px; background: var(--line); }
@media (max-width: 640px) { .lang { top: 36px; right: 20px; } }

/* --- Page Services : les photos des trois services restent en couleur --- */
.service-row__media img { filter: none; }
.service-row:hover .service-row__media img { filter: none; }

/* Image affichée en couleur, quel que soit le bloc */
.img-cover--color, .approach__media:hover .img-cover--color { filter: none !important; }

/* --- Page Talents : photos des joueurs en couleur --- */
.talent-card__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  filter: none !important;
}

/* Cartes talents sans lien (fiches individuelles désactivées) */
div.talent-card { cursor: default; }
div.talent-card:hover { transform: none; }
div.talent-card:hover .talent-card__name { transform: none; color: var(--fg); }

/* --- Accessibilité : focus visible au clavier --- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--fg); outline-offset: 3px;
}

/* --- Pied de page : bandeau noir pleine largeur pour les mentions --- */
.site-footer__giant { height: clamp(100px, 16vw, 250px); }
.site-footer__bar {
  width: 100vw; margin-left: calc(50% - 50vw);
  background: #000;
  border-top: 1px solid var(--line-faint);
}
.site-footer__legal {
  position: static;
  max-width: var(--max); margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); line-height: 1.6;
}
@media (max-width: 640px) { .site-footer__legal { justify-content: center; text-align: center; padding: 16px 20px; } }

/* --- Bouton « retour en haut » --- */
.to-top {
  position: fixed; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px); z-index: 50;
  width: 44px; height: 44px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--line); border-radius: 0; cursor: pointer;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1), background .25s ease, color .25s ease, border-color .25s ease;
}
.to-top svg { width: 20px; height: 20px; }
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* --- Page Talents (mobile) : plus d'espace entre les joueurs --- */
@media (max-width: 640px) {
  .talent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; row-gap: 36px; }
  .talent-card { gap: 10px; padding-bottom: 18px; border-bottom: 1px solid var(--line-row); }
  .talent-card__name { font-size: 16px; line-height: 1.1; letter-spacing: -.01em; }
  .talent-card__club { font-size: 10px; letter-spacing: .04em; gap: 6px; }
  .talent-card__club .club-logo { width: 14px; height: 14px; }
  .talent-card__placeholder { font-size: 48px; padding: 12px; }
}