/* ====== Prochains matchs : style "timeline" ====== */
.spotmag-match-card.spotmag-card--upcoming{
  /* Palette */
  --spotmag-accent: #E3CA77; /* doré */
  --spotmag-ink: #2E373C;    /* texte foncé */
  position: relative;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: .5rem 0; margin: 0 159px 12px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Ligne horizontale qui relie les deux boîtes */
.spotmag-match-card.spotmag-card--upcoming::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 2px;
  background: var(--spotmag-accent);
  transform: translateY(-50%);
  z-index: 0; /* passe derrière les boîtes */
}

/* Les deux boîtes (date & équipes) */
.spotmag-card--upcoming .spotmag-match-header,
.spotmag-card--upcoming .spotmag-match-body{
  position: relative;
  z-index: 1; /* au-dessus de la ligne */
  display: flex;
  align-items: center;
  height: 44px;
  background: #fff;
  border: 2px solid var(--spotmag-accent);
  padding: 0 .9rem;
  white-space: nowrap;
}

/* Boîte date (à gauche) */
.spotmag-card--upcoming .spotmag-match-header{
  width: 502px;
  flex: 0 0 502px;
  justify-content: center;
  text-align: center
}

/* Texte date + icône horloge */
.spotmag-card--upcoming .spotmag-match-date{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 500;
  font-size: 16px;
  color: var(--spotmag-ink);
  letter-spacing: .01em;
  justify-content: center;
}

.spotmag-card--upcoming .spotmag-match-date::before{
  content:"";
  display:inline-block;
  width: 1.1em; height: 1.1em;
  background: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%231f2937" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">\
<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>') center/contain no-repeat;
}

/* Boîte équipes (à droite) */
.spotmag-card--upcoming .spotmag-match-body{
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: .75rem;
  margin-left: auto; margin-inline-start: auto;
}

/* Équipes en MAJUSCULES et bold */
.spotmag-card--upcoming .spotmag-team{
  text-transform: uppercase; font-weight: 500; letter-spacing: 0.55px; font-size: 16px; color: var(--spotmag-ink);
  width: 210px;
}
.spotmag-card--upcoming .spotmag-team--right {
  text-align: right;
}

/* "VS" encadré par deux traits verticaux dorés */
.spotmag-card--upcoming .spotmag-vs{
  text-transform: uppercase;
  font-weight: 400; font-size: 20px;
  letter-spacing: .08em;
  padding: .35rem .75rem;
  border-left: 2px solid var(--spotmag-accent);
  border-right: 2px solid var(--spotmag-accent);
  line-height: 33px;
  color: var(--spotmag-ink);
  margin: 0 .25rem;
}

/* On neutralise le style "carte" par défaut sur ce variant */
.spotmag-card--upcoming{
  box-shadow: none;
}
.spotmag-card--upcoming .spotmag-match-header,
.spotmag-card--upcoming .spotmag-match-body{
  /* évite les vieilles bordures/ombres héritées */
  box-shadow: none;
}

/* Responsive : en dessous de 640px, on empile et on retire la ligne */
@media (max-width: 1024px){
  .spotmag-match-card.spotmag-card--upcoming{
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
  }
  .spotmag-match-card.spotmag-card--upcoming::before{
    display: none;
  }
  .spotmag-card--upcoming .spotmag-match-header,
  .spotmag-card--upcoming .spotmag-match-body{
    width: 100%;
    flex: 0 1 auto;
    box-sizing: border-box;
  }
}


/* ====== Résultat de match (mise en page maquette) ====== */
.spotmag-result{
  --gold:#E3CA77;
  --ink:#2E373C;
  --muted:#2E373C;
  --chip:#fff;
  --chip-ink:#2E373C;
  background:#fff;
  overflow:hidden;
  margin: 0 159px 24px;
}

/* Bandeau doré + date + équipes + score */
.spotmag-result .result-head{
  background:var(--gold);
  padding: 0 1rem;
  position:relative;
}
.spotmag-result .result-date{
  display:flex; align-items:center; justify-content:center;
  gap:.5rem; font-size:16px; color:var(--ink);
  padding: 12px 0; margin: 0;
}
.spotmag-result .result-date .ico{
  width:1.05em; height:1.05em; display:inline-block;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%231f2937" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>') center/contain no-repeat;
}

/* Bandeau noms + score */
.spotmag-result .result-banner{
  position:relative;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap: 1rem;
  padding: .0 .5rem;
}
.spotmag-result .team{
  text-transform:uppercase; letter-spacing:5%;
  font-weight:400; color:var(--ink);
  font-size: 32px;
}
.spotmag-result .team--left{ text-align:right; }
.spotmag-result .team--right{ text-align:left; }

.spotmag-result .score-pill{
  background:#fff; color:var(--ink);
  padding: 0 28px;
  display:inline-flex; align-items:center; gap:.6rem;
  font-weight:400; font-size: 48px;
  height: 82px;
}

/* Grille 3 colonnes */
.spotmag-result .result-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr 1.1fr;
  padding: 0;
}

/* Winner (gauche) */
.spotmag-result .winner-figure{
  position:relative; margin:0; overflow:hidden;
  aspect-ratio: 3/2;
}
.spotmag-result .winner-figure img{
  width:100%; height:auto; display:block;
  border-radius: 0;
}
.spotmag-result .winner-badge{
  position:absolute; left:0; bottom:0;
  display:inline-flex; flex-direction:column; align-items:center; gap:.25rem;
  width: 100%;
  text-align: center;
}
.spotmag-result .winner-badge .winner {
  background:var(--gold); color:var(--ink);
  padding: 5px 24px 1px;
}
.spotmag-result .winner-badge .tag{
  font-size:13px; font-weight:700; letter-spacing:5%; text-transform:uppercase; line-height: 13px;
  display: block;
}
.spotmag-result .winner-badge .name{
  font-weight:500; font-size: 16px;
  display: block;
}

/* Stats (centre) */
.spotmag-result .stats-panel{
  padding:48px 36px 0;
  width: 430px;
}
.spotmag-result .row{
  display:grid; grid-template-columns: 1fr 1fr; align-items:center; gap:.75rem; margin:.5rem 0;
  font-size: 20px;
}
.spotmag-result .row .label{ color:var(--muted); }
.spotmag-result .row .value{
  color:var(--ink); text-align: right;
  justify-content: flex-end;
}

.spotmag-result .chips .chip{
  display:inline-block; background:var(--chip); color:var(--chip-ink);
  border:1px solid rgba(0,0,0,.08);
  padding:.15rem .45rem; font-weight:700; margin-left:5px;
  font-size:16px;
}
.spotmag-result .chips .chip.is-last{
  background:#2E373C; color:#fff; border-color:#2E373C;
}

.spotmag-result .dual{ display:flex; align-items:center; gap:.5rem; }
.spotmag-result .dual .box{
  display:inline-block; text-align:center;
  padding:6px;
  background:#fff; border:1px solid #2E373C; font-weight:700;
  font-size: 16px; line-height: normal;
}
.spotmag-result .dual .box.is-strong{
  background:#2E373C; color:#fff; border-color:#2E373C;
}
.spotmag-result .dual .sep{
  text-transform: uppercase;
}

/* Galerie (droite) */
.spotmag-result .gallery-slider{
  position:relative; overflow:hidden;
}
.spotmag-result .gallery-slider .viewport{ overflow:hidden; width:100%; }
.spotmag-result .gallery-slider .track{ display:flex; transition:transform .35s ease; }
.spotmag-result .gallery-slider .spotmag-gallery-item{
  flex:0 0 100%; margin:0;
  border-radius: 0;
}
.spotmag-result .spotmag-gallery-img{
  width:100%; height:auto; display:block;
  border-radius: 0;
}

.spotmag-result .gallery-slider .nav{
  position:absolute; top:50%; z-index: 10;
  transform:translateY(-50%);
  width:34px; height:34px; border-radius:50%;
  border:0; background:var(--gold); color:var(--ink);
  font-size:20px; line-height:1; cursor:pointer; opacity:.95;
}
.spotmag-result .gallery-slider .nav.prev{ left:.5rem; }
.spotmag-result .gallery-slider .nav.next{ right:.5rem; }

.spotmag-result .gallery-slider .badge{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:0; background:var(--gold); color:var(--ink);
  font-weight:800; font-size:.7rem; letter-spacing:.08em;
  padding:.25rem .6rem; text-transform:uppercase;
}

/* Responsive */
@media (max-width: 960px){
  .spotmag-result .result-grid{ grid-template-columns: 1fr; }
}
.spotmag-result .gallery-slider{
  --gallery-ratio: 3/2;
}
.spotmag-result .gallery-slider .viewport{
  width: 100%;
  aspect-ratio: var(--gallery-ratio);
}
.spotmag-result .gallery-slider .track,
.spotmag-result .gallery-slider .spotmag-gallery-item{
  height: 100%;
}
.spotmag-result .gallery-slider .spotmag-gallery-item{
  position: relative;
}
.spotmag-result .spotmag-gallery-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.hide-footer .spotmag-result {
  display: none;
}
.spotmag-result-cta {
  margin: -24px 159px 24px; padding: 48px 353px;
  text-align: center;
  background: url(images/bg.png) no-repeat center; background-size: cover;
}
.spotmag-result-cta h4.cta-title {
  text-transform: uppercase; color: #fff; font-size: 32px;
  margin: 0 0 24px;
}
.spotmag-result-cta a {
    background-color: #E3CA77!important;
    border-radius: 50px;
    font-weight: 700; font-size: 16px; line-height: 43px; color: #2E373C!important;
    padding: 0 48px;
    display: inline-block;
}

@media (max-width: 1024px){
  .spotmag-match-card.spotmag-card--upcoming {
    margin-left: 24px; margin-right: 24px;
    display: block;
  }
  .spotmag-card--upcoming .spotmag-match-header {
    border-bottom: none;
  }
  .spotmag-card--upcoming .spotmag-team {
    font-size: 11px;
    width: 45%;
  }
  .spotmag-card--upcoming .spotmag-match-date {
    font-size: 12px;
  }
  .spotmag-card--upcoming .spotmag-vs {
    width: 10%;
    font-size: 16px; text-align: center;
  }
  .spotmag-card--upcoming .spotmag-match-body {
    display: flex;
  }
  .spotmag-result {
    margin-left: 24px; margin-right: 24px;
    border:1px solid #E3CA77;
  }
  .spotmag-result .team {
    font-size: 13px; text-align: center; line-height: normal;
  }
  .spotmag-result .score-pill {
    font-size: 20px;
    padding: 0 12px;
    height: 44px;
  }
  .spotmag-result .result-date {
    font-size: 14px ;
  }
  .spotmag-result .result-grid {
    display: block;
  }
  .spotmag-result .winner-badge .tag,
  .spotmag-result .winner-badge .name {
    font-size: 11px;
  }
  .spotmag-result .row {
    font-size: 13px;
  }
  .spotmag-result .stats-panel {
    padding: 24px 12px;
    width: 100%;
    box-sizing: border-box;
  }
  .spotmag-result .chips .chip,
  .spotmag-result .dual .box {
    font-size: 13px;
  }
  .spotmag-result .row {
    gap: 0; grid-template-columns: 0.7fr 1fr;
  }
  .spotmag-result-cta {
    padding: 24px 12px; margin: -25px 24px 24px;
    border: 1px solid #E3CA77; border-top: none;
  }
  .spotmag-result-cta h4.cta-title {
    font-size: 20px; line-height: normal;
  }
  .spotmag-result-cta a {
    font-size: 13px; line-height: 33px;
    padding: 0 24px;
  }
}