:root{
  --bg:#07101f;
  --border:rgba(255,255,255,.12);
  --border2:rgba(255,255,255,.08);
  --shadow: 0 18px 50px rgba(0,0,0,.35);
  --shadow2: 0 22px 60px rgba(0,0,0,.45);
  --radius:18px;

  /* ✅ font (PJ) */
  --font-sans: "Outfit", system-ui, -apple-system, Segoe UI, Roboto, Arial;

  /* ✅ AAA scale (ajusté pour coller PJ) */
  --s: 1.1;

  /* edge padding */
  --edge-pad: calc(32px * var(--s));

  /* header height */
  --header-h: calc(58px * var(--s));

  /* font sizes */
  --fs-11: calc(11px * var(--s));
  --fs-12: calc(12px * var(--s));
  --fs-13: calc(13px * var(--s));
  --fs-14: calc(14px * var(--s));
  --fs-15: calc(15px * var(--s));
  --fs-16: calc(16px * var(--s));
  --fs-18: calc(18px * var(--s));
  --fs-20: calc(20px * var(--s));
  --fs-22: calc(22px * var(--s));
  --fs-24: calc(24px * var(--s));
  --fs-26: calc(26px * var(--s));
  --fs-28: calc(28px * var(--s));
  --fs-30: calc(30px * var(--s));
  --fs-32: calc(32px * var(--s));
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

/* ✅ stop micro-overflow horizontal (sans créer de “2e scroll” interne) */
html{ overflow-x: clip; }
@supports not (overflow: clip){
  html{ overflow-x: hidden; }
}

body{
  margin:0;
  font-family: var(--font-sans);
  background:var(--bg);
  color:#fff;
  font-size: var(--fs-13);

  /* ✅ polish typographique */
  font-weight: 500;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  /* -moz-osx-font-smoothing: grayscale;  <-- retiré */
}

a{ color:#fff; text-decoration:none; }
img{ max-width:100%; display:block; }
p{ margin:0; opacity:.9; line-height:1.5; }

/* ✅ hard scroll lock (utilisé par la story) */
body.scroll-locked{
  position: fixed;
  left: 0;
  right: 0;
  overflow: hidden;
  width: 100%;
  overscroll-behavior: none;
}

.wrap{
  max-width:1100px;
  margin:0 auto;
  padding: 0 calc(18px * var(--s));
}

/* =========================================================
   ✅ FULLBLEED — FIX (plus de 100vw => plus de scroll horizontal)
   Une section est déjà full width par défaut.
========================================================= */
.fullbleed{
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.section-band{
  border-top: 1px solid var(--border2);
  border-bottom: 1px solid var(--border2);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 55%),
    linear-gradient(to bottom, rgba(7,16,31,.72), rgba(7,16,31,1));
}

/* edge wrap */
.edge-wrap{
  width: 100%;
  padding: 0 var(--edge-pad);
}

/* buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: calc(10px * var(--s)) calc(14px * var(--s));
  border-radius: calc(12px * var(--s));
  background:#fff;
  color:#07101f;
  font-weight:900;
  border: 0;
  cursor:pointer;
  transition: transform .15s ease, filter .15s ease;
  font-size: var(--fs-13);
}
.btn:active{ transform: translateY(1px); }
.btn--full{ width:100%; }

/* ========================= HEADER (verrouillé pixel-identique) ========================= */
header{
  position: sticky;
  top: 0;
  z-index: 200;
  border-bottom:1px solid var(--border);
  background: rgba(7,16,31,.62);
  backdrop-filter: blur(12px);
  transition: transform .28s ease, opacity .28s ease;
  font-size: var(--fs-13);
}

/* hide header (Home behaviour) */
body.header-off header{
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
}

header .wrap{
  height: var(--header-h);
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* ✅ reset typographique header = même rendu partout */
header, header *{
  line-height: 1;
  letter-spacing: inherit;
}

.brand{
  display:flex;
  align-items:center;
  gap: calc(12px * var(--s));
  font-weight:900;
  letter-spacing:.02em;
}

.brand img{
  width: calc(46px * var(--s));
  height: calc(46px * var(--s));
  object-fit: contain;
  border-radius: 0;
  box-shadow: 0 14px 34px rgba(0,0,0,.38);
}

.brand strong{
  font-size: var(--fs-15);
  opacity: .95;
  display:block;
}

/* nav aligné au pixel */
.nav{
  display:flex;
  gap: calc(14px * var(--s));
  flex-wrap:wrap;
  opacity:.95;
  font-size: var(--fs-13);
}

.nav a{
  opacity:.82;
  font-size: var(--fs-13);
  display:inline-flex;
  align-items:center;
  height: var(--header-h);
  padding: 0;
  margin: 0;
}

.nav a:hover{ opacity:1; }

/* lien actif sans changer la taille */
.nav a[aria-current="page"]{ opacity: 1; }

/* ========================= STORY (plein écran, pas de fuite) ========================= */
.story-band{
  min-height: 100vh;
  padding: calc(16px * var(--s)) 0 calc(16px * var(--s));
  display: flex;
  align-items: stretch;
}

.story-shell{
  width: 100%;
  position: relative;
  border-radius: calc(26px * var(--s));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow2);
  background:
    radial-gradient(ellipse at 35% 18%, rgba(255,255,255,.08), rgba(255,255,255,0) 60%),
    linear-gradient(to bottom, rgba(7,16,31,.45), rgba(7,16,31,.88));
}

.story-clip{
  position: relative;
  height: calc(100vh - var(--header-h) - (32px * var(--s)));
  border-radius: calc(26px * var(--s));
  overflow: hidden;
}

.story-shell::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  border-radius: calc(26px * var(--s));
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.12), rgba(255,255,255,0) 62%);
  opacity:.9;
  z-index:0;
}

.story-clip::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 42%, rgba(0,0,0,.44) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.46));
  z-index: 3;
}

.story-track{
  position: relative;
  height: 100%;
  width: 100%;
  z-index: 1;
}

.story-panel{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  transform: translateX(10%) scale(1.02);
  will-change: transform, opacity;
  transition: opacity .55s ease, transform .65s ease;
  z-index: 1;
}
.story-panel.is-active{
  opacity:1;
  transform: translateX(0%) scale(1.02);
  z-index: 2;
}
.story-panel.is-before{
  opacity:0;
  transform: translateX(-6%) scale(1.02);
}

.story-img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform: translateY(0px) scale(1.02);
  filter: contrast(1.03) saturate(1.04);
}

/* caption (baseline Home) + polish */
.story-caption{
  position:absolute;

  /* ✅ FIX: 100vw => 100% (évite overflow à cause de la scrollbar) */
  max-width: min(740px, calc(100% - 60px));

  padding: calc(16px * var(--s)) calc(20px * var(--s));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: calc(var(--radius) * var(--s));
  background: rgba(7,16,31,.52);
  backdrop-filter: blur(12px);
  text-align:center;
  box-shadow: 0 22px 62px rgba(0,0,0,.46);
  opacity:0;
  transform: translateX(-50%) translateY(10px);
  transition: opacity .45s ease, transform .55s ease, border-color .18s ease, background .18s ease, filter .18s ease;
  z-index: 4;
  outline: none;
  filter: saturate(1.05);
}

.story-caption.center{
  left:50%;
  bottom: calc(92px * var(--s));
}

.story-panel.is-active .story-caption{
  opacity:1;
  transform: translateX(-50%) translateY(0px);
}

.story-panel.is-active .story-caption:hover,
.story-panel.is-active .story-caption:focus-visible{
  transform: translateX(-50%) translateY(-2px);
  border-color: rgba(255,255,255,.22);
  background: rgba(7,16,31,.62);
}

.story-caption h2{
  margin:0 0 calc(8px * var(--s));
  font-size: clamp(calc(22px * var(--s)), 2.2vw, calc(34px * var(--s)));
  line-height: 1.08;
  letter-spacing: .01em;
  font-weight: 800;
}

.story-caption p{
  margin:0;
  font-size: clamp(var(--fs-13), 1.15vw, var(--fs-16));
  opacity:.92;
  font-weight: 500;
}

/* progress (un peu plus net) */
.story-progress{
  position:absolute;
  left:50%;
  bottom: calc(16px * var(--s));
  transform: translateX(-50%);
  display:flex;
  gap: calc(10px * var(--s));
  padding: calc(10px * var(--s)) calc(12px * var(--s));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(7,16,31,.34);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  z-index: 50;
  user-select:none;
  transition: opacity .35s ease, transform .35s ease;
}

.story-progress .seg{
  position: relative;
  width: calc(44px * var(--s));
  height: calc(6px * var(--s));
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  overflow: hidden;
  cursor: pointer;
}

.story-progress .seg::before{
  content:"";
  position:absolute;
  inset:0;
  width:0%;
  background: rgba(255,255,255,.88);
  border-radius: 999px;
  transition: width .22s ease;
}
.story-progress .seg.passed::before{ width:100%; }
.story-progress .seg.active{ background: rgba(255,255,255,.22); }
.story-progress .seg.active::before{ width:100%; }

/* hint */
.story-hint{
  position:absolute;
  left:50%;
  bottom: calc(62px * var(--s));
  transform: translateX(-50%);
  display:flex;
  align-items:center;
  gap: calc(10px * var(--s));
  padding: calc(10px * var(--s)) calc(12px * var(--s));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(7,16,31,.22);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 40px rgba(0,0,0,.30);
  z-index: 50;
  opacity: .85;
  transition: opacity .25s ease, transform .25s ease;
  font-size: var(--fs-13);
}
.story-hint .dot{
  width: calc(8px * var(--s));
  height: calc(8px * var(--s));
  border-radius:50%;
  background: rgba(255,255,255,.75);
  box-shadow: 0 0 0 calc(6px * var(--s)) rgba(255,255,255,.06);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ transform: scale(1); opacity:.75; }
  50%{ transform: scale(1.12); opacity:1; }
}
.story-hint.hide{
  opacity:0;
  transform: translateX(-50%) translateY(8px);
  pointer-events:none;
}

.story.is-exiting .story-progress{
  opacity: 0;
  transform: translateX(-50%) translateY(12px);
  pointer-events: none;
}
.story.is-exiting .story-hint{
  opacity: 0;
  transform: translateX(-50%) translateY(14px);
  pointer-events: none;
}
.story.is-exiting .story-panel.is-active .story-caption{
  opacity: 0;
  transform: translateX(-50%) translateY(16px);
}

/* ========================= CARDS BAND (Home) ========================= */
.cards-band{ padding: calc(18px * var(--s)) 0; }

.cards-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: calc(12px * var(--s));
  padding: 0 calc(12px * var(--s));
}
@media(min-width: 900px){
  .cards-grid{ grid-template-columns: repeat(3, 1fr); }
}

.card-strip{
  position:relative;
  height: calc(170px * var(--s));
  border-radius: calc(16px * var(--s));
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
  cursor:pointer;
}
.card-strip::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--bgimg);
  background-size: cover;
  background-position: center;
  transform: scale(1.03);

  /* ✅ base Home reste identique (gris), MAIS on override plus bas pour Joueur/Marques */
  filter: grayscale(1) contrast(1.05) brightness(.62);

  opacity: .85;
  transition: filter .20s ease, opacity .20s ease, transform .35s ease;
}
.card-strip::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom, rgba(7,16,31,.22), rgba(7,16,31,.86));
  opacity: 1;
  transition: opacity .20s ease;
}
.card-strip:hover::before{
  filter: grayscale(0) contrast(1.02) brightness(.92);
  opacity: 1;
  transform: scale(1.05);
}
.card-strip:hover::after{ opacity: .92; }

.card-hud{
  position:absolute;
  left: calc(16px * var(--s));
  top: 50%;
  transform: translateY(-50%);
  right: auto;
  width: min(calc(420px * var(--s)), calc(100% - (32px * var(--s))));
  max-width: 78%;
  padding: calc(14px * var(--s)) calc(14px * var(--s)) calc(12px * var(--s));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: calc(14px * var(--s));
  background: rgba(7,16,31,.62);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow2);
  text-align: left;
}
.card-hud h3{
  margin:0 0 calc(6px * var(--s));
  font-size: var(--fs-14);
  font-weight: 900;
}
.card-hud p{
  margin:0 0 calc(10px * var(--s));
  font-size: var(--fs-12);
  opacity:.88;
}
.card-hud .btn{
  height: calc(38px * var(--s));
  border-radius: calc(12px * var(--s));
  font-size: var(--fs-12);
  justify-content:center;
}

/* ========================= HOW (Home) ========================= */
.how{ padding: calc(26px * var(--s)) 0; }

.how-wrap{
  position: relative;
  width: 100%;
  height: clamp(calc(520px * var(--s)), 60vh, calc(720px * var(--s)));
  border-radius: calc(26px * var(--s));
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow2);
}

.how-art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.12);
  filter: contrast(1.03) saturate(1.05);
}

.how-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 35% 28%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%),
    linear-gradient(to bottom, rgba(7,16,31,.10), rgba(7,16,31,.90));
}

.how-inner{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding: calc(26px * var(--s));
  gap: calc(14px * var(--s));
}

.how-kicker{
  display:inline-flex;
  width: fit-content;
  padding: calc(8px * var(--s)) calc(12px * var(--s));
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(7,16,31,.40);
  backdrop-filter: blur(10px);
  font-size: var(--fs-13);
  opacity: .95;
  font-weight: 600;
}

.how-title{
  margin:0;
  font-size: clamp(var(--fs-26), 2.4vw, calc(40px * var(--s)));
  line-height: 1.08;
  letter-spacing: .01em;
  font-weight: 800;
}

.how-steps{
  display:grid;
  grid-template-columns: 1fr;
  gap: calc(12px * var(--s));
}
@media (min-width: 900px){
  .how-steps{ grid-template-columns: repeat(3, 1fr); gap: calc(14px * var(--s)); }
}

.how-step{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: calc(14px * var(--s));
  padding: calc(16px * var(--s));
  border-radius: calc(16px * var(--s));
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(7,16,31,.55);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  cursor: default;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.how-step:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.22);
  background: rgba(7,16,31,.62);
}

.how-step strong{
  font-size: var(--fs-14);
  display:block;
  margin-bottom: calc(6px * var(--s));
  font-weight: 800;
}
.how-sub{
  font-size: var(--fs-12);
  opacity: .82;
  line-height: 1.35;
}
.how-badge{
  width: calc(28px * var(--s));
  height: calc(28px * var(--s));
  border-radius: calc(10px * var(--s));
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-size: var(--fs-13);
  opacity:.95;
  font-weight: 700;
}

/* espace visuel entre sections */
.section-gap{ height: calc(18px * var(--s)); }

/* ========================= ENGAGEMENTS (Home) ========================= */
.engagements{ padding: calc(22px * var(--s)) 0 calc(26px * var(--s)); }

.eng-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: calc(12px * var(--s));
}
@media(min-width:900px){
  .eng-grid{ grid-template-columns: repeat(4, 1fr); gap: calc(14px * var(--s)); }
}

.eng-card{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: calc(18px * var(--s));
  padding: calc(18px * var(--s)) calc(14px * var(--s));
  text-align:center;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.eng-card:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.20);
  background: rgba(255,255,255,.055);
}
.eng-card img{
  width: calc(104px * var(--s));
  height: calc(104px * var(--s));
  object-fit: cover;
  margin: 0 auto calc(12px * var(--s));
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.40));
  transition: transform .18s ease;
}
.eng-card:hover img{ transform: scale(1.06); }
.eng-card h3{ margin:0 0 calc(6px * var(--s)); font-size: var(--fs-14); font-weight: 800; }
.eng-card p{
  margin:0 auto;
  font-size: var(--fs-12);
  opacity:.78;
  max-width: 280px;
}

/* ========================= NEWSLETTER (Home) ========================= */
.newsletter{ padding: calc(26px * var(--s)) 0 calc(30px * var(--s)); }

.news-wrap{
  position: relative;
  width: 100%;
  height: clamp(calc(320px * var(--s)), 42vh, calc(480px * var(--s)));
  border-radius: calc(26px * var(--s));
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow2);
}

.news-art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.14);
  filter: contrast(1.03) saturate(1.05);
}
.news-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.10), rgba(255,255,255,0) 58%),
    linear-gradient(to bottom, rgba(7,16,31,.12), rgba(7,16,31,.92));
}

.news-panel{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  z-index:2;
  width: min(calc(980px * var(--s)), calc(100% - (64px * var(--s))));
  max-width: 100%;
  display:flex;
  flex-direction:column;
  gap: calc(10px * var(--s));
  padding: calc(22px * var(--s));
  border-radius: calc(20px * var(--s));
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(7,16,31,.62);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 60px rgba(0,0,0,.40);
  overflow: hidden;
}
.news-panel *{ max-width:100%; }

.news-tag{
  display:inline-flex;
  width: fit-content;
  padding: calc(7px * var(--s)) calc(12px * var(--s));
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-size: var(--fs-13);
  opacity:.95;
  font-weight: 600;
}
.news-title{ margin: 0; font-size: var(--fs-22); letter-spacing:.01em; font-weight: 800; }
.news-desc{ margin: 0; font-size: var(--fs-13); opacity: .85; }

.news-form{
  display:flex;
  gap: calc(12px * var(--s));
  align-items:center;
  flex-wrap: wrap;
  margin-top: calc(6px * var(--s));
}
.news-form input{
  flex: 1 1 calc(320px * var(--s));
  height: calc(46px * var(--s));
  border-radius: calc(14px * var(--s));
  padding: 0 calc(14px * var(--s));
  outline: none;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(7,16,31,.55);
  color:#fff;
  font-size: var(--fs-13);
}
.news-form input::placeholder{ color: rgba(255,255,255,.55); }
.news-form .btn{
  height: calc(46px * var(--s));
  border-radius: calc(14px * var(--s));
  font-size: var(--fs-13);
  padding: 0 calc(18px * var(--s));
  font-weight: 900;
  white-space: nowrap;
}
.news-legal{
  margin: 0;
  font-size: var(--fs-11);
  opacity: .72;
  line-height: 1.35;
}

/* ========================= FOOTER (Home) ========================= */
.site-footer{
  margin-top: calc(18px * var(--s));
  border-top: 1px solid var(--border2);
  background: linear-gradient(180deg, rgba(7,16,31,.92), rgba(7,16,31,1));
}

.footer-social{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: calc(12px * var(--s));
  padding: calc(14px * var(--s)) calc(18px * var(--s));
  border-bottom:1px solid var(--border2);
  background: rgba(0,0,0,.18);
}
.footer-social span{ font-size: var(--fs-12); opacity:.8; }

.social-links{
  display:flex;
  gap: calc(10px * var(--s));
}
.social-links a{
  width: calc(34px * var(--s));
  height: calc(34px * var(--s));
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-size: var(--fs-14);
  transition: transform .18s ease, background .18s ease;
}
.social-links a:hover{
  background: rgba(255,255,255,.14);
  transform: translateY(-1px);
}

.footer-main{
  padding: calc(24px * var(--s)) calc(18px * var(--s)) calc(18px * var(--s));
}
.footer-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: calc(14px * var(--s));
  margin-bottom: calc(18px * var(--s));
}
.footer-brand{
  display:flex;
  align-items:center;
  gap: calc(12px * var(--s));
  font-weight: 900;
  font-size: var(--fs-14);
}
.footer-brand img{
  width: calc(60px * var(--s));
  height: calc(60px * var(--s));
  object-fit: contain;
  border-radius: 0;
  box-shadow: 0 18px 46px rgba(0,0,0,.45);
}
.footer-cta{
  padding: calc(10px * var(--s)) calc(16px * var(--s));
  border-radius: 999px;
  background:#fff;
  color:#07101f;
  font-weight: 900;
  font-size: var(--fs-12);
}

.footer-cols{
  display:grid;
  grid-template-columns: 1fr;
  gap: calc(14px * var(--s));
}
@media(min-width:900px){
  .footer-cols{ grid-template-columns: repeat(4, 1fr); gap: calc(18px * var(--s)); }
}
.footer-col h4{
  margin:0 0 calc(10px * var(--s));
  font-size: var(--fs-12);
  opacity:.9;
  letter-spacing:.04em;
  font-weight: 800;
}
.footer-col a{
  display:block;
  font-size: var(--fs-12);
  opacity: .70;
  margin-bottom: calc(8px * var(--s));
}
.footer-col a:hover{ opacity: 1; }

.footer-bottom{
  border-top: 1px solid var(--border2);
  padding: calc(12px * var(--s)) calc(18px * var(--s)) calc(16px * var(--s));
  text-align:center;
  font-size: var(--fs-11);
  opacity: .65;
}

/* ========================= Responsive + Motion ========================= */
@media (max-width: 600px){
  :root{
    --s: 1.12;
    --edge-pad: calc(14px * var(--s));
    --header-h: calc(56px * var(--s));
  }
  .card-hud{ max-width: 88%; }

  .story-clip{
    height: calc(100vh - var(--header-h) - (32px * var(--s)));
  }
}

@media (prefers-reduced-motion: reduce){
  .story-panel{ transition: none; }
  .story-progress .seg::before{ transition:none; }
  .story-hint .dot{ animation:none; }
}

/* ========================= GAMEPLAY HERO (Joueur) ========================= */
.gameplay-hero{ padding: calc(18px * var(--s)) 0; }

.gameplay-shell{
  position: relative;
  height: clamp(520px, 75vh, 820px);
  border-radius: calc(26px * var(--s));
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow2);
}

.gameplay-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.06);
  filter: contrast(1.04) saturate(1.05);
}

.gameplay-shell::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 38%, rgba(0,0,0,.55) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.45));
  pointer-events:none;
}

.gameplay-huds{
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  align-items:end;
  padding: calc(26px * var(--s));
  gap: calc(16px * var(--s));
}

.gp-hud{
  padding: calc(18px * var(--s));
  border-radius: calc(18px * var(--s));
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(7,16,31,.62);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow2);
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
}
.gp-hud:hover,
.gp-hud:focus-visible{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,.24);
  background: rgba(7,16,31,.72);
}
.gp-hud h3{ margin:0 0 calc(10px * var(--s)); font-size: var(--fs-16); font-weight: 800; }
.gp-hud ul{ margin:0; padding-left: 18px; font-size: var(--fs-13); opacity:.9; }
.gp-hud li{ margin-bottom: 6px; }

@media (max-width: 900px){
  .gameplay-huds{ grid-template-columns: 1fr; align-items:stretch; }
}

/* ========================= LOOPS (Joueur) ========================= */
.loops{ padding: calc(26px * var(--s)) 0 calc(30px * var(--s)); }

.loops-shell{
  width: 100%;
  display:flex;
  flex-direction:column;
  gap: calc(18px * var(--s));
}

.loops-head{
  max-width: 920px;
}

.loops-kicker{
  display:inline-flex;
  width: fit-content;
  padding: calc(8px * var(--s)) calc(12px * var(--s));
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(7,16,31,.40);
  backdrop-filter: blur(10px);
  font-size: var(--fs-13);
  opacity: .95;
  margin-bottom: calc(10px * var(--s));
  font-weight: 600;
}

.loops-title{
  margin:0 0 calc(8px * var(--s));
  font-size: clamp(var(--fs-26), 2.4vw, calc(40px * var(--s)));
  line-height: 1.08;
  letter-spacing: .01em;
  font-weight: 800;
}

.loops-desc{
  margin:0;
  font-size: var(--fs-13);
  opacity: .84;
  max-width: 760px;
}

.loops-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: calc(12px * var(--s));
}
@media (min-width: 900px){
  .loops-grid{
    grid-template-columns: repeat(3, 1fr);
    gap: calc(14px * var(--s));
  }
}

.loop-card{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(7,16,31,.55);
  backdrop-filter: blur(12px);
  border-radius: calc(18px * var(--s));
  padding: calc(18px * var(--s));
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  outline: none;
}

.loop-card:hover,
.loop-card:focus-visible{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.22);
  background: rgba(7,16,31,.62);
}

.loop-top{
  display:flex;
  align-items:center;
  gap: calc(12px * var(--s));
  margin-bottom: calc(10px * var(--s));
}

.loop-icon{
  width: calc(44px * var(--s));
  height: calc(44px * var(--s));
  border-radius: calc(14px * var(--s));
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
  flex: 0 0 auto;
}

.loop-card h3{
  margin:0;
  font-size: var(--fs-16);
  letter-spacing:.01em;
  font-weight: 800;
}

.loop-card p{
  margin:0 0 calc(12px * var(--s));
  font-size: var(--fs-13);
  opacity: .85;
  line-height: 1.45;
}

.loop-card ul{
  margin:0;
  padding-left: calc(18px * var(--s));
  font-size: var(--fs-13);
  opacity: .9;
}
.loop-card li{ margin-bottom: 6px; }

/* ========================= SECTION UNIVERS — poster (artwork mis en valeur) ========================= */
.universe-poster{
  position: relative;
  overflow: hidden;
  border-radius: calc(26px * var(--s));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow2);
  background: rgba(7,16,31,.22);
  min-height: min(620px, 82vh);
  display: grid;
  place-items: center;
  isolation: isolate;
}

.universe-poster::before{
  content:"";
  position:absolute;
  inset:-40px;
  background-image: url("../assets/artworks/universe-cta.webp");
  background-size: cover;
  background-position: center;
  filter: blur(22px) saturate(1.2) brightness(.45);
  transform: scale(1.12);
  opacity:.85;
  z-index:0;
  pointer-events:none;
}

.universe-poster::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 44%, rgba(0,0,0,.62) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,.36));
  z-index:2;
}

.universe-img{
  position: relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.03);
  filter: contrast(1.06) saturate(1.08);
  opacity:.95;
}

.universe-btn{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  z-index:3;

  padding: calc(8px * var(--s)) calc(14px * var(--s));
  font-size: var(--fs-12);
  letter-spacing: .10em;
  text-transform: uppercase;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(7,16,31,.55);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 60px rgba(0,0,0,.42);

  transition: transform .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}

.universe-btn:hover,
.universe-btn:focus-visible{
  transform: translate(-50%, -50%) scale(1.03);
  background: rgba(7,16,31,.70);
  border-color: rgba(255,255,255,.26);
  opacity: 1;
}

@media (max-width: 900px){
  .universe-poster{
    min-height: min(520px, 78vh);
  }
}

/* =========================================================
   ✅ OVERRIDES: pas de “gris forcé” sur artworks (Joueur/Marques)
   Utile si l’artwork contient du texte intégré.
========================================================= */
body.page-marques .card-strip::before,
body.page-joueur .card-strip::before,
body.page-joueurs .card-strip::before{
  filter: grayscale(0) contrast(1.05) brightness(.62);
}

/* Marques: si un autre CSS met grayscale sur l’image support */
body.page-marques .brand-supportArt{
  filter: grayscale(0) contrast(1.02) !important;
}

.header-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: calc(12px * var(--s)) calc(16px * var(--s));
  border-radius: calc(14px * var(--s));
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color:#fff;
  font-weight: 900;
  text-decoration:none;
  box-shadow: var(--shadow2);
  margin-right: calc(12px * var(--s));
}
.header-cta:hover{ background: rgba(255,255,255,.18); }
@media(max-width: 780px){
  .header-cta{ display:none; } /* optionnel: cache sur mobile si trop chargé */
}