/* =========================================
   HERO SECTION - SELECTIONS NATIONALES
========================================= */


:root{

  --rts-red:#e30613;
  --gold:#ffc632;
  --ink:#1a1a1a;
  --gray-text:#5c6167;
  --gray-line:#e4e6e9;
  --bg-soft:#f7f8fa;

  --uefa:#1653c9;
  --conmebol:#ffb400;
  --concacaf:#e30613;
  --caf:#1c9c4a;
  --afc:#7b3fe4;
  --ofc:#00a3a3;

}

/* =========================
   HERO
========================= */
.equipe-hero{
  position:relative;
  overflow:hidden;

  min-height:420px;

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

  text-align:center;

  padding:60px 20px;
   background:
    linear-gradient(90deg, rgba(8,28,58,.96) 0%, #081c3ae0 42%, rgba(8,28,58,.45) 68%, rgba(8,28,58,.15) 100%),
    linear-gradient(135deg, #081C3A 0%, #0b2a57 45%, #0f3b7a 100%);

}



/* lumière projecteurs */

.equipe-hero::after{

  content:"";

  position:absolute;

  top:-30%;

  left:50%;

  transform:translateX(-50%);

  width:900px;

  height:500px;

  background:
  radial-gradient(
    ellipse at center,
    rgba(255,255,255,0.08),
    transparent 70%
  );

  z-index:0;

}



.equipe-hero .hero-couverture{

  position:relative;

  z-index:1;

  max-width:640px;

  display:flex;

  flex-direction:column;

  align-items:center;

}



.equipe-hero .hero-sous-titre{

  display:inline-flex;

  align-items:center;

  gap:8px;

  font-size:12px;

  font-weight:800;

  letter-spacing:2.5px;

  color:var(--gold);

  margin-bottom:16px;

}



.equipe-hero .hero-sous-titre::before,
.equipe-hero .hero-sous-titre::after{

  content:"";

  width:22px;

  height:2px;

  background:var(--gold);

}



.equipe-hero h1{

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

  font-weight:800;

  color:#fff;

  margin:0 0 16px;

  text-transform:uppercase;

}



.equipe-hero p{

  font-size:15px;

  line-height:1.6;

  color:rgba(238,242,251,0.75);

  margin:0 0 34px;

}



.equipe-hero .hero-stats{

  display:flex;

  gap:14px;

  flex-wrap:wrap;

  justify-content:center;

}



.equipe-hero .stat-box{

  background:rgba(255,255,255,0.06);

  border:1px solid rgba(255,255,255,0.15);

  backdrop-filter:blur(6px);

  border-radius:14px;

  padding:18px 32px;

  min-width:120px;

  transition:.2s ease;

}



.equipe-hero .stat-box:hover{

  transform:translateY(-4px);

  border-color:var(--gold);

}



.equipe-hero .stat-box h3{

  font-size:32px;

  font-weight:800;

  color:var(--gold);

  margin:0 0 4px;

}



.equipe-hero .stat-box span{

  font-size:12.5px;

  font-weight:600;

  color:rgba(238,242,251,0.7);

  text-transform:uppercase;

}



/* =========================================
   SECTION SELECTIONS
========================================= */


.selections-section{

  background:#fff;

  color:var(--ink);

  max-width:1100px;

  margin:0 auto;

}





/* titre */

.selections-section .page-title{

  padding:30px 24px 14px;

  border-bottom:1px solid var(--gray-line);

}



.selections-section .page-title h2{

  font-size:26px;

  font-weight:800;

  margin:0 0 4px;

}



.selections-section .page-title p{

  color:var(--gray-text);

  font-size:14px;

}



/* =========================================
   CONFEDERATION
========================================= */


.selections-section .confederation-block{

  padding:24px 24px 6px;

}



.selections-section .confederation-en-tete{

  display:flex;

  align-items:center;

  gap:12px;

  margin-bottom:12px;

}



.selections-section .confederation-en-tete h3{

  font-size:17px;

  font-weight:800;

  margin:0;

}



.selections-section .confed-count{

  margin-left:auto;

  font-size:12.5px;

  color:var(--gray-text);

  font-weight:600;

}



.selections-section .confederation-nom{

  color:#fff;

  font-size:11.5px;

  font-weight:800;

  letter-spacing:.5px;

  padding:4px 10px;

  border-radius:5px;

}



.confederation-nom.uefa{
background:var(--uefa);
}


.confederation-nom.conmebol{
background:var(--conmebol);
color:#1a1a1a;
}


.confederation-nom.concacaf{
background:var(--concacaf);
}


.confederation-nom.caf{
background:var(--caf);
}


.confederation-nom.afc{
background:var(--afc);
}


.confederation-nom.ofc{
background:var(--ofc);
}



/* =========================================
   LISTE EQUIPES
========================================= */


.selections-section .equipe-liste{

  background:var(--bg-soft);

  border-radius:10px;

  overflow:hidden;

  border:1px solid var(--gray-line);

}

/* =========================================
    EQUIPES + DETAILS
========================================= */


.selections-section .equipe-ligne{

  display:flex;

  align-items:center;

  gap:14px;

  padding:13px 16px;

  text-decoration:none;

  color:var(--ink);

  border-bottom:1px solid var(--gray-line);

  transition:
  background .15s ease,
  padding-left .15s ease;

}



/* enlever le dernier trait */

.selections-section .equipe-ligne:last-child{

  border-bottom:none;

}



/* ===============================
   SUPPORT DETAILS / SUMMARY
================================ */


.equipe{

  border-bottom:1px solid var(--gray-line);

}



.equipe:last-child{

  border-bottom:none;

}



/* summary devient exactement comme un lien */

.equipe summary.equipe-ligne{

  list-style:none;

  cursor:pointer;

  user-select:none;

}



.equipe summary::-webkit-details-marker{

  display:none;

}



.equipe summary::marker{

  display:none;

}



/* hover */

.selections-section .equipe-ligne:hover{

  background:#fff;

  padding-left:22px;

}



.selections-section .equipe-ligne:hover .equipe-nom{

  color:var(--rts-red);

}



/* drapeau */


.selections-section .sigle{

  font-size:22px;

  line-height:1;

  width:28px;

  text-align:center;

}



/* nom equipe */


.selections-section .equipe-nom{

  font-weight:600;

  font-size:14.5px;

  flex:1;

}



/* fleche */


.equipe .chevron{

  color:var(--gray-text);

  font-size:16px;

  display:inline-block;

  transition:transform .3s ease;

}



/* rotation quand ouvert */


.equipe[open] .chevron{

  transform:rotate(90deg);

}



/* ===============================
   CONTENU DETAIL EQUIPE
================================ */


.equipe-details{

  background:#fff;

  padding:20px 30px;

  border-top:1px solid #ddd;

  animation:fade .3s ease;

}



.equipe-details h4{

  margin:0 0 15px;

  color:#081C3A;

  font-size:20px;

}



.equipe-details p{

  margin:8px 0;

  font-size:14px;

}



.equipe-details h5{

  margin-top:20px;

  margin-bottom:10px;

  font-size:15px;

}



.equipe-details ul{

  margin-left:20px;

  line-height:1.8;

}



/* bouton fiche complete */


.btn-details{

  display:inline-block;

  margin-top:20px;

  padding:10px 18px;

  background:#081C3A;

  color:#fff;

  text-decoration:none;

  border-radius:6px;

  font-size:14px;

  transition:.2s ease;
  
  cursor:pointer;


}



.btn-details:hover{

   background:var(--rts-red);

}



/* animation ouverture */


@keyframes fade{

  from{

    opacity:0;

    transform:translateY(-8px);

  }


  to{

    opacity:1;

    transform:translateY(0);

  }

}