/* Hero : slider du calendrier R1 */
.hero {
  position: relative;
  background:
    radial-gradient(900px 460px at 85% 8%, rgba(0, 0, 0, .38), transparent 60%),
    radial-gradient(700px 400px at 8% 95%, rgba(234, 196, 20, .18), transparent 55%),
    linear-gradient(155deg, var(--rouge) 0%, var(--rouge-fonce) 55%, #7a0310 100%);
  color: var(--blanc);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 90px);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  padding: var(--section-pad) 0;
  display: grid;
  gap: 1.5rem;
}
.hero__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
@media (min-width: 900px) {
  .hero__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
  }
}
.hero__head .kicker { color: var(--or); }
.hero__head .kicker::before { background: linear-gradient(90deg, var(--or) 60%, var(--blanc) 60%); }
.hero h1 { font-size: clamp(1.8rem, 4.8vw, 3.4rem); }
.hero h1 .accent { color: var(--or); }
.hero__sub {
  color: rgba(255,255,255,.85);
  font-size: clamp(.92rem, 2.2vw, 1.02rem);
  margin-top: .5rem;
}

/* Flèches du slider */
.cal-nav { display: flex; gap: .6rem; flex-shrink: 0; }
.cal-nav button {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4);
  display: grid; place-items: center;
  font-size: .9rem;
  transition: background var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition);
}
.cal-nav button:hover { background: var(--or); border-color: var(--or); color: var(--noir-pur); }
.cal-nav button:disabled { opacity: .3; pointer-events: none; }

/* Piste du slider (scroll-snap + flèches) */
.cal-slider { position: relative; min-width: 0; }
.cal__track {
  display: flex;
  gap: .9rem;
  max-width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: .25rem 0 .5rem;
}
.cal__track::-webkit-scrollbar { display: none; }

.cal__month {
  flex: 0 0 min(255px, 82vw);
  scroll-snap-align: start;
  background: rgba(0, 0, 0, .26);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  padding: .85rem .9rem 1rem;
  backdrop-filter: blur(2px);
  transition: background var(--transition), border-color var(--transition);
}
.cal__month:hover { background: rgba(0,0,0,.36); border-color: rgba(234,196,20,.45); }
.cal__month h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: .04em;
  margin-bottom: .55rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid rgba(234,196,20,.55);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.cal__month h3 small {
  font-family: var(--font-body);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: rgba(255,255,255,.55);
}
.cal__row {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  padding: .32rem 0;
}
.cal__row + .cal__row { border-top: 1px solid rgba(255,255,255,.08); }
.cal__day { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 1.6em; }
.cal__j {
  font-family: var(--font-display);
  font-size: .78rem;
  color: var(--or);
  min-width: 2.4em;
}
.cal__opp {
  flex: 1;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal__loc {
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .08em;
  padding: .14rem .45rem;
  border-radius: 3px;
  flex-shrink: 0;
  text-transform: uppercase;
}
.cal__loc--dom { background: var(--or); color: var(--noir-pur); }
.cal__loc--ext { border: 1px solid rgba(255,255,255,.5); color: rgba(255,255,255,.85); }

.cal__empty {
  font-weight: 700;
  color: rgba(255,255,255,.85);
  padding: 1rem 0;
}

/* Boutique */
.shop {
  position: relative;
  background: var(--noir-pur);
  color: var(--blanc);
  overflow: hidden;
}
.shop::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 340px at 85% 20%, rgba(227,5,26,.3), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 80px);
}
.shop__inner {
  position: relative;
  padding: var(--section-pad) 0;
  display: grid;
  gap: 2rem;
  align-items: center;
}
.shop__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--or);
}
.shop h2 { font-size: clamp(1.8rem, 5vw, 2.9rem); }
.shop p { color: rgba(255,255,255,.8); margin: .9rem 0 1.4rem; }
.shop__visual {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  background: linear-gradient(160deg, #26262b 0%, #0c0c0e 75%);
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  transition: transform .5s cubic-bezier(.22, .8, .3, 1);
}
@media (min-width: 900px) {
  .shop__visual {
    justify-self: center;
    width: min(250px, 65vw);
    aspect-ratio: 3 / 4;
    transform: rotate(2.5deg);
  }
  .shop__visual:hover { transform: rotate(0deg) scale(1.02); }
}
.shop__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 42%, var(--rouge) 42% 52%, var(--or) 52% 58%, transparent 58%);
  opacity: .9;
}
.shop__visual i { font-size: 4.5rem; color: rgba(255,255,255,.35); position: relative; }
.shop__visual .badge-new {
  position: absolute;
  top: 1rem; right: 1rem;
  background: var(--or);
  color: var(--noir-pur);
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: .4rem .75rem;
  border-radius: 999px;
  z-index: 2;
}

/* Équipes */
.teams { padding: var(--section-pad) 0; }
.teams__grid { display: grid; gap: 1.25rem; }
.team-tile {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: grid;
  align-items: end;
  color: var(--blanc);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
}
.team-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }
.team-tile__bg { position: absolute; inset: 0; transition: transform .6s cubic-bezier(.22,.8,.3,1); }
.team-tile:hover .team-tile__bg { transform: scale(1.05); }
.tile-bg--r1 {
  background:
    linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.82)),
    url('/images/r1/759932283_3948395072136295_3780271345984550601_n.jpg') center 25% / cover no-repeat,
    linear-gradient(135deg, #2c2c31, #0a0a0a);
}
.tile-bg--seniors {
  background:
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.85)),
    url('/images/seniors/762998571_879603298235785_8327743435650117634_n.jpg') center 25% / cover no-repeat,
    linear-gradient(135deg, #3a3a40, #131316);
}
.tile-bg--feminines {
  background:
    linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.82)),
    url('/images/feminines/730182438_17895684393489781_8617685992211831143_n.jpg') center 25% / cover no-repeat,
    linear-gradient(135deg, var(--rouge-fonce), #520006);
}
.tile-bg--formation {
  background:
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.85)),
    url('/images/formation/760555048_1340077964961041_568946598223028154_n.jpg') center 25% / cover no-repeat,
    linear-gradient(135deg, #2c2c31, #0a0a0a);
}
.tile-bg--prefo {
  background:
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.85)),
    url('/images/pre-formation/768452838_1517758956341722_6023382321517623438_n.jpg') center 25% / cover no-repeat,
    linear-gradient(135deg, #9c8109, #635104);
}
.tile-bg--ecole {
  background:
    linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.85)),
    url('/images/ecole-de-football/729784621_17895684324489781_4979605608560167550_n.jpg') center 25% / cover no-repeat,
    linear-gradient(135deg, #7a0310, #2b0004);
}
.team-tile__body { position: relative; padding: 1.4rem; display: grid; gap: .35rem; }
.team-tile__body .count {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--or);
}
.team-tile__body h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 1.5rem; }
.team-tile__body .cta-line {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255,255,255,.85);
  transition: gap var(--transition), color var(--transition);
}
.team-tile:hover .cta-line { gap: .85rem; color: var(--blanc); }
.team-tile a::after { content: ""; position: absolute; inset: 0; }

/* Formation Calais & Marck */
.formation {
  background: var(--gris-05);
  padding: var(--section-pad) 0;
}
.formation__intro {
  display: grid;
  gap: 2rem;
  align-items: center;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.formation__photo {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  aspect-ratio: 16 / 10;
}
.formation__photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.formation__photo::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--rouge) 0 55%, var(--or) 55%);
}
.formation__text p { color: var(--gris-60); margin: .9rem 0 1.5rem; }
.formation__text h2 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); }

.formation h3.staff-title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.formation h3.staff-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gris-10);
}

.staff-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, 1fr); }
.staff-card {
  background: var(--blanc);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
}
.staff-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); }
.staff-card__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(135deg, #2b2b30, #0a0a0a);
}
.staff-card__photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform .6s cubic-bezier(.22,.8,.3,1);
}
.staff-card:hover .staff-card__photo img { transform: scale(1.05); }
.staff-card__body { padding: .9rem 1rem 1.1rem; text-align: center; }
.staff-card__body h4 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: .98rem;
  line-height: 1.2;
}
.staff-card__body p {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--rouge);
  margin-top: .3rem;
}

/* Réseaux sociaux */
.social { padding: var(--section-pad) 0; }
.social__grid { display: grid; gap: 1.25rem; }
.social-card {
  position: relative;
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  color: var(--blanc);
  overflow: hidden;
  display: grid;
  gap: 1.1rem;
  align-content: start;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
}
.social-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); }
.social-card--rcc {
  background:
    radial-gradient(500px 260px at 85% 10%, rgba(227,5,26,.4), transparent 60%),
    linear-gradient(150deg, #1c1c20, var(--noir-pur));
}
.social-card--fcm {
  background:
    radial-gradient(500px 260px at 85% 10%, rgba(234,196,20,.3), transparent 60%),
    linear-gradient(150deg, var(--rouge) 0%, var(--rouge-fonce) 70%);
}
.social-card__head { display: flex; align-items: center; gap: 1rem; }
.social-card__head img { width: 64px; height: 64px; object-fit: contain; }
.social-card__head .icon-badge {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  font-size: 1.5rem;
  color: var(--or);
}
.social-card__head h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  line-height: 1.15;
}
.social-card__head .followers {
  display: block;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--or);
  margin-top: .3rem;
}
.social-card > p { font-size: .92rem; color: rgba(255,255,255,.82); }
.social-card__links { display: flex; flex-wrap: wrap; gap: .6rem; }
.social-card__links a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .65rem 1.1rem;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.25);
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.social-card__links a:hover {
  background: var(--blanc);
  color: var(--noir-pur);
  border-color: var(--blanc);
  transform: translateY(-2px);
}

/* Héritage et Épopée */
.heritage {
  background: var(--noir-pur);
  color: var(--blanc);
  padding: var(--section-pad) 0;
  position: relative;
  overflow: hidden;
}
.heritage::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(800px 400px at 15% 20%, rgba(234,196,20,.14), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.94)),
    url('/images/pelouse-vide.webp') center 70% / cover no-repeat;
}
.heritage .section-head { position: relative; }
.heritage .section-head h2 { color: var(--blanc); }
.heritage__timeline {
  position: relative;
  display: grid;
  gap: 1.25rem;
}
.milestone {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: grid;
  gap: .5rem;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.milestone:hover { background: rgba(255,255,255,.09); border-color: rgba(234,196,20,.4); transform: translateY(-4px); }
.milestone .year {
  font-family: var(--font-display);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--or);
}
.milestone h3 { font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.milestone p { font-size: .88rem; color: rgba(255,255,255,.7); }

/* Partenaires */
.partners { padding: var(--section-pad) 0; }
.partners__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.partner {
  display: grid;
  place-items: center;
  height: 96px;
  padding: .5rem .7rem;
  border-radius: 8px;
  background: linear-gradient(150deg, #1c1c20, var(--noir-pur));
  border: 1px solid var(--gris-10);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.partner img {
  max-height: 70px;
  max-width: 100%;
  object-fit: contain;
  opacity: .85;
  transition: opacity var(--transition), transform var(--transition);
}
.partner:hover {
  border-color: var(--rouge);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  background: linear-gradient(150deg, #26262b, #0c0c0e);
}
.partner:hover img { opacity: 1; transform: scale(1.04); }

/* Breakpoints */
@media (min-width: 640px) {

  .partners__row { grid-template-columns: repeat(3, 1fr); }
  .heritage__timeline { grid-template-columns: repeat(2, 1fr); }
  .staff-grid { grid-template-columns: repeat(3, 1fr); }
  .teams__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {

  .shop__inner { grid-template-columns: 1.1fr .9fr; }
  .teams__grid { grid-template-columns: repeat(3, 1fr); }
  .formation__intro { grid-template-columns: 1fr 1.05fr; }
  .staff-grid { grid-template-columns: repeat(4, 1fr); }
  .social__grid { grid-template-columns: 1fr 1fr; }
  .heritage__timeline { grid-template-columns: repeat(4, 1fr); }
  .partners__row { grid-template-columns: repeat(6, 1fr); }
}