/*/general */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html {
/*     width: 100vw; */
    margin: 0;
    padding: 0;
    font-size: 10px; 
    scroll-behavior: smooth;
    overflow-x: hidden;
}
body {
    font-family: 'Inter', sans-serif;
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
    margin: 0;
    padding: 0;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.2;
    min-height: 95vh;
}
a { color: #009fe3; font-weight: 700; text-decoration: none; }
img { max-width: 100%; height: auto; vertical-align: top; }

h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; }

.text-primary { color: #009FE3 !important; }
.text-secondary { color: #003C56 !important; }
.text-danger { color: #E6007E !important }
.txt-bleu-clair { color: #8CDDFF !important; }
.txt-rouge { color: #E42313 !important; }
.txt-jaune { color: #FBBA00 !important; }

/* Repris du back-office pour que ça corresponde à l'affichage front */
.alignleft { float: left; margin: 0.5em 1em 0.5em 0; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; margin: 0.5em 0 0.5em 1em; }

.fond-blanc { background: #FFF; }
.fond-gris { background: #F5F5F5; }

.bt-bleu, .bt-rouge, .bt-blanc {
    vertical-align: middle;
    display: inline-block;
    padding: 1.35rem 3rem;
    margin: 0;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    text-decoration: none;
    text-align: center;
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: 0.025rem;
	cursor: pointer;
	border-radius: 5rem;
/* 	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15); */
/* 	text-transform: uppercase; */
	border: 0;
	border-radius: 0.6rem;
}
.bt-bleu {
	background: #009FE3 url(./../img/arrow-btn.png) no-repeat 90% center;
	color: #FFF !important;
	border: 0.2rem solid #009FE3;
	padding: 1.7rem 6rem 1.7rem 2.48rem;
}
.bt-bleu:hover {
	background: #fff url(./../img/arrow-btn-bleu.png) no-repeat 90% center;
	color: #009FE3 !important;
}
.bt-bleu a {
	color: #FFF !important;
}
.bt-bleu:hover a {
	color: #009FE3 !important;
}

.bt-rouge {
	background-color: #CA1820;
	color: #fff;
}

.bt-blanc {
	background-color: #fff;
	color: #CA1820;
}

.bt-retour {
	padding-left: 5.2rem;
	background-image: url(./../img/arrow-retour-blanc.png);
	background-repeat: no-repeat;
	background-position: 3rem center;
}

.bt-more {
	padding-right: 5.2rem;
	background-image: url(./../img/arrow-more-blanc.png);
	background-repeat: no-repeat;
	background-position: right 3rem center;
}

.site-max-width { max-width: 156.8rem; width: 100%; padding: 0 2rem; margin-left: auto; margin-right: auto; }
.petit-site-max-width { max-width: 126.6rem; }

input, select {
	padding: 1.55rem 2.48rem;
	letter-spacing: 0.05rem;
	border: 0;
	width: 100%;
	font-size: 1.2rem;
	border-radius: 1rem;
	color: #8B8B8B;
}
input {
	border: 1px solid #8B8B8B;
}
select {
	background-color: #FFF;
/* 	background-image: url(./../img/arrow-dropdown-bleu-clair.png); */
/* 	background-repeat: no-repeat; */
/* 	background-position: right 0.8rem center; */
	border: 0.1rem solid #7E7E7E;
	font-size: 1.4rem;
	font-weight: 600;
	color: #7E7E7E;
}
input.input-recherche {
	background-image: url(./../img/picto-loupe-grise.png);
	background-repeat: no-repeat;
	background-position: 2rem center;
	padding-left: 4rem;
}
input.input-calendrier {
	background-image: url(./../img/picto-calendrier.png);
	background-repeat: no-repeat;
	background-position: 2rem center;
	padding-left: 5rem
}



/* Style case à cocher */
.css-checkbox:not(:checked), .css-checkbox:checked { 
	position: absolute;
	left: 1rem;
	top: 1rem;
	opacity: 0.0000001; 
}
.css-checkbox:not(:checked) + .css-checkbox-label, .css-checkbox:checked + .css-checkbox-label {
	position: relative; /* permet de positionner les pseudo-éléments */
	padding-left: 3rem; /* fait un peu d'espace pour notre case à venir */
	cursor: pointer;   /* affiche un curseur adapté */
	display: inline-block;
	width: 100%;
	vertical-align: top;
	color: #8B8B8B;
	font-size: 1.4rem;
	line-height: 1.6rem;
	font-weight: 400;
}
.css-checkbox:not(:checked) + .css-checkbox-label:before, .css-checkbox:checked + .css-checkbox-label:before {
	content: '';
	position: absolute;
	left: 0; top: -0.2rem;
	width: 2rem; height: 2rem; /* dim. de la case */
	border: 0.1rem solid #8B8B8B;
	background: #fff;
	border-radius: 0.3rem; /* angles arrondis */
	/*   box-shadow: inset 0 1px 3px rgba(0,0,0,.3) légère ombre interne */
}
.css-checkbox:checked + .css-checkbox-label:before {
	border: 0.1rem solid #024995;
	background: #009FE3;
}

.css-checkbox:not(:checked) + .css-checkbox-label:after, .css-checkbox:checked + .css-checkbox-label:after {
	content: '✔';
	position: absolute;
	top: 0; left: 0.5rem;
	font-size: 1.4rem;
	color: #fff;
	transition: all .2s; /* on prévoit une animation */
}
.css-checkbox:not(:checked) + .css-checkbox-label:after {
	opacity: 0; /* coche invisible */
	transform: scale(0); /* mise à l'échelle à 0 */
}
.css-checkbox:checked + .css-checkbox-label:after {
	opacity: 1; /* coche opaque */
	transform: scale(1); /* mise à l'échelle 1:1 */
}
.css-checkbox-checked:before { border: 0.2rem solid red !important; }


/* Swiper */
.swiper { width: 100%; height: 100%; }
.swiper-slide { display: flex; justify-content: center; align-items: center; }

/* Fil ariane */
.conteneur-fil-ariane { margin-top: 2rem; margin-bottom: 2rem; }
.fil-ariane { font-size: 1.2rem; font-weight: 500; color: #7E7E7E; }
.fil-ariane span { text-decoration: underline; }
.fil-ariane span:last-child { text-decoration: none; }

/******************** SECTIONS ********************/

/* Mea Compet */
.section-mea-compet { padding: 6rem 0 10rem; }
.mea-compet-titre { font-size: 2rem; font-weight: 900; color: #1D3867; }
.mea-compet-conteneur-slides { position: relative; }
.mea-compet-conteneur-slides:before {
	position: absolute;
	top: -2rem;
	bottom: -2rem;
	right: 100%;
	content: '';
	display: block;
	background: #FFF;
	height: auto;
	width: 100vw;
	z-index: 5;
}
.mea-compet-categories { margin-top: 3rem; background: #F1F3F4; display: flex; justify-content: center; gap: 0.6rem; padding: 0.6rem 0; border-radius: 0.8rem; }
.mea-compet-cat { background: transparent url(./../img/picto-batte-grise.png) no-repeat 1.4rem center / 1.2rem; color: #7E7E7E; border-radius: 10rem; padding: 1rem 1.4rem 1rem 3.2rem; }
.mea-compet-cat-selected { background: #2F528F url(./../img/picto-batte-blanche.png) no-repeat 1.4rem center / 1.2rem; color: #fff; }
.mea-compet-cat-txt { font-size: 1.1rem; font-weight: 600; }

.mea-compet-cont-liste { margin-top: 4.6rem; }
.mea-compet-item { background: #F1F3F4; border-radius: 1rem; width: 23rem; padding: 1.5rem; display: flex; justify-content: center; align-items: center; }

.mea-compet-actions { background: #fff; position: relative; z-index: 10; display: flex; justify-content: end; align-items: center; padding-right: 2rem; }
.mea-compet-prev, .mea-compet-next { display: inline-block; width: 6rem; height: 6rem; cursor: pointer; }
.mea-compet-prev { background: url(./../img/arrow-slider-left.png) no-repeat center; }
.mea-compet-next { background: url(./../img/arrow-slider-right.png) no-repeat center; margin-left: 0.8rem; }
.mea-compet-prev.swiper-button-disabled { background: url(./../img/arrow-slider-left-disable.png) no-repeat center; }
.mea-compet-next.swiper-button-disabled { background: url(./../img/arrow-slider-right-disable.png) no-repeat center; }

@media (min-width: 992px) {
	.mea-compet-titre { font-size: 4rem; }
	.mea-compet-categories { gap: 1rem; }
	.mea-compet-cat { background: transparent url(./../img/picto-batte-grise.png) no-repeat 3rem center; padding: 1rem 3rem 1rem 6rem; }
	.mea-compet-cat-selected { background: #2F528F url(./../img/picto-batte-blanche.png) no-repeat 3rem center; }
	.mea-compet-cat-txt { font-size: 1.4rem; }
	
	.mea-compet-item { height: 23rem; }
}

/* Carte Accueil */
.section-carte-acc { background: #1D3867; color: #fff; padding: 8rem 0; }
.carte-acc-conteneur { max-width: 102.8rem; width: 100%; padding: 0 2.2rem }
.carte-acc-picto { margin-bottom: 2rem; }
.carte-acc-titre { font-size: 2rem; font-weight: 900; margin-bottom: 3rem; text-transform: uppercase; }
.carte-acc-intro { font-size: 1.4rem; font-weight: 600; margin-bottom: 4rem; }
.carte-acc-intro-arrow { vertical-align: middle; margin-right: 1rem; transform: rotate(-90deg); }
.carte-acc-contenu { font-size: 1.4rem; font-weight: 500; line-height: 2.2rem; margin-bottom: 2rem; }

@media (min-width: 992px) {
/* 	.section-carte-acc { background: #1D3867 url(./../img/bg-search-compet-acc.png) no-repeat right bottom; } */
	.carte-acc-conteneur { padding: 0 1rem; }
	.carte-acc-picto { margin-bottom: 1rem; }
	.carte-acc-titre { font-size: 4rem; text-transform: none; }
	.carte-acc-intro { font-size: 1.8rem; }
	.carte-acc-intro-arrow { transform: none; }
	.carte-acc-contenu { margin-bottom: 0; }
	.carte-acc-intro { margin-bottom: 3rem; }
}

/* Mea Vidéos */
.section-mea-videos { padding: 5.6rem 0; }
.mea-videos-entete { margin-bottom: 2.5rem; }
.mea-videos-titre { font-size: 2rem; font-weight: 900; color: #1D3867; }
.mea-videos-titre img { vertical-align: middle; margin-bottom: 0.5rem; }
.mea-videos-picto-titre { vertical-align: middle; display: inline-block; margin-right: 1rem; }
.mea-videos-conteneur-slides { overflow: visible; }

.mea-videos-item-inner { color: #1D3867; }
.mea-videos-item-img { margin-bottom: 1.2rem; position: relative; }
.mea-videos-item-img img { border-radius: 1rem; }
.mea-videos-item-filtre { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.mea-videos-item-cat { margin-bottom: 0.6rem; font-size: 1.2rem; font-weight: 600; }
.mea-videos-item-titre { font-size: 1.4rem; font-weight: 700; }
.mea-videos-bt { margin-top: 4.4rem; }


.mea-videos-prev, .mea-videos-next { display: inline-block; width: 6rem; height: 6rem; cursor: pointer; }
.mea-videos-prev { background: url(./../img/arrow-slider-left.png) no-repeat center; }
.mea-videos-next { background: url(./../img/arrow-slider-right.png) no-repeat center; margin-left: 0.8rem; }
.mea-videos-prev.swiper-button-disabled { background: url(./../img/arrow-slider-left-disable.png) no-repeat center; }
.mea-videos-next.swiper-button-disabled { background: url(./../img/arrow-slider-right-disable.png) no-repeat center; }

@media (min-width: 992px) {
	.section-mea-videos { padding: 10rem 0 15rem; }
	.mea-videos-titre { font-size: 4rem; }
	.mea-videos-item-img { margin-bottom: 2rem; }
	.mea-videos-item-cat { margin-bottom: 1rem; font-size: 1.6rem; }
	.mea-videos-item-titre { font-size: 2rem; }
	.mea-videos-bt { margin-top: 6rem; }
}

/* editorial */
.section-edito {
	padding: 5rem 1rem;
	color: #fff;
	font-size: 1.4rem;
	line-height: 2.2rem;
	font-weight: 500;
	background-color: #1D3867;
	background-image: url(./../img/graphisme_courbe_haut.png), url(./../img/graphisme_courbe_bas.png);
	background-position: top 4rem center, bottom 45rem center;
	background-repeat: no-repeat, no-repeat;
	background-size: 100% auto, 100% auto;
}
.edito-liste { gap: 6rem; }
.edito-item-titre { font-size: 2rem; font-weight: 900; margin-bottom: 2rem; }
.edito-item-contenu { margin-bottom: 3rem; }
.edito-item-encart { font-size: 1.2rem; background: #33548E; padding: 1.4rem; border-radius: 0.8rem; }
.edito-item-contenu p, .edito-item-encart p { margin-bottom: 3rem; }
.edito-item-contenu p:last-child, .edito-item-encart p:last-child { margin-bottom: 0; }
.edito-item-img { width: 100%; margin-top: 3.4rem; }

@media (min-width: 992px) {
	.section-edito { padding: 13rem; background-position: top center, bottom center; }
	.edito-item-titre { font-size: 4rem; }
	.edito-item-encart { font-size: 1.2rem; padding: 2rem; }
	.edito-item-img { width: 100%; margin-top: 0; }
}

/* search club */
.section-search-club { padding: 8.6rem 0 9.5rem; background: #F1F3F4; }
.search-club-inner { color: #1D3867; }
.search-club-logo { margin-bottom: 3rem; }
.search-club-intro { font-size: 2rem; font-weight: 500; margin-bottom: 3rem; }
.search-club-titre { font-size: 3rem; font-weight: 900; text-transform: uppercase; margin-bottom: 4rem; }

@media (min-width: 992px) {
	.section-search-club { padding: 11rem 0; }
	.search-club-intro { font-size: 3rem; margin-bottom: 2rem; }
	.search-club-titre { font-size: 5rem; margin-bottom: 3rem; }
}

/* Bandeau */
.bandeau-bg {
	background: linear-gradient(92.5deg, #1D3867 23.92%, #3A6FCD 86.72%);
/* 	background: linear-gradient(92.5deg, #0B3D2E 23.92%, #5B8266 86.72%); */
	position: relative;
	border-radius: 0.8rem;
	padding: 2.6rem 1rem 3.4rem;
	margin-top: 2rem;
}
.bandeau-logo { max-width: 10.8rem; margin-bottom: 1.9rem; }
.bandeau-titre { text-align: center; font-size: 3rem; font-weight: 900; line-height: 3.2rem; color: #fff; text-transform: uppercase; }
.bandeau-titre-ligne1 { font-weight: 300; }

@media (min-width: 992px) {
	.bandeau-bg { height: 25rem; padding: 0; margin: 0; }
	.bandeau-logo { position: absolute; top: 50%; left: 10%; -webkit-transform: translateY(-50%); transform: translateY(-50%); max-width: 100%; margin: 0; }
	.bandeau-titre { font-size: 6rem; line-height: 6.2rem; }
}


/* Compétitions / résultats */
.section-compet-results { padding: 2rem 0 8rem; }
.sousmenu { background: #2F528F; }
.sousmenu-liste { padding: 0.8rem 0; display: flex; justify-content: start; gap: 0.6rem; text-transform: uppercase; font-size: 1.1rem; font-weight: 700; color: #fff; margin-bottom: 4rem; overflow-x: scroll; }
.sousmenu-item { background: transparent; padding: 1.35rem 1.4rem; cursor: pointer; border-radius: 10rem; }
.sousmenu-item.selected { background: #fff; color: #1D3867; }

.filtre-liste { justify-content: space-between; margin-bottom: 3rem; gap: 1.2rem; }
.filtre-select { width: 100%; color: #7E7E7E; }

@media (min-width: 992px) {
	.sousmenu-liste { justify-content: center; gap: 1.2rem; font-size: 1.4rem; overflow-x: auto; }
	.sousmenu-item { padding: 1.35rem 3rem; }
	.filtre-liste { margin-bottom: 4rem; gap: 0; }
}

.compet-conteneur { display: flex; flex-direction: column; gap: 3rem; margin-bottom: 8rem; }
.compet-item { background: #F1F3F4; border-radius: 0.8rem; padding: 2rem; }
.compet-contenu-main { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem; }
.compet-club { max-width: 7.2rem; gap: 0.7rem; }
.compet-club-nom { font-size: 1.2rem; font-weight: 600; letter-spacing: 0.025rem; color: #1D3867; }
.compet-scores { gap: 0.8rem; margin-top: 2.7rem; }
.compet-score-bg { background: #2F528F; width: 4.3rem; height: 5.8rem; border-radius: 0.6rem; }
.compet-score-valeur { font-size: 2rem; font-weight: 900; letter-spacing: 0.025rem; color: #fff; }

.compet-infos { font-size: 1.2rem; font-weight: 600; letter-spacing: 0.025rem; color: #7E7E7E; }
.compet-infos.mobile { margin-top: 2rem; }
.compet-info-ligne { margin-bottom: 0.6rem; }
.compet-info-ligne:last-child { margin-bottom: 0; }
.compet-info-etat { display: inline-block; margin-top: 0.6rem; font-weight: 700; color: #fff; padding: 1.2rem 2rem; border-radius: 0.6rem; }

.compet-boutons { margin-top: 3.3rem; gap: 1.2rem; }
.compet-bt-item { display: inline-block; font-size: 1.2rem; padding: 1.35rem 3rem; background: #fff; border-radius: 10rem; color: #7E7E7E; }
.compet-bt-picto { display: inline-block; margin-right: 0.6rem; vertical-align: middle; }

.classement-tableau { display: none; }

.classement-tableau .col-MJ,
.classement-tableau .col-VIC,
.classement-tableau .col-DEF,
.classement-tableau .col-pourcent,
.classement-tableau .col-forme {
	display: none;
}

.classement-tab-mobile, .mobile-tab-tableau { display: table; }
.mobile-tab-ligne { display: table-row; }
.mobile-tab-cell { display: table-cell; }










@media (min-width: 992px) {
	.compet-conteneur { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; }
	.compet-contenu-main { align-items: center; gap: 1rem; }
	.compet-item { padding: 4rem 5.5rem 3rem; }
	.compet-club { max-width: 100%; gap: 2rem; }
	.compet-club-nom { font-size: 1.4rem; }
	.compet-scores { margin-bottom: 3rem; margin-top: 0; }
	.compet-score-bg { width: 6rem; height: 8rem; }
	.compet-score-valeur { font-size: 3rem; }
	
	.compet-infos { font-size: 1.4rem; }
	.compet-info-ligne { margin-bottom: 0.8rem; }
	.compet-info-etat { margin-top: 0.8rem; }
	
	.compet-boutons { margin-top: 5.5rem; }
	.compet-bt-item { font-size: 1.6rem; }
	
	.classement-tableau .col-MJ,
	.classement-tableau .col-VIC,
	.classement-tableau .col-DEF,
	.classement-tableau .col-pourcent,
	.classement-tableau .col-forme {
		display: table-cell;
	}
	
	.classement-tableau { display: table; }
	.classement-tab-mobile { display: none; }
}

.classement-conteneur { background: #F1F3F4; border-radius: 0.8rem; padding: 2rem; }
.classement-tableau { font-size: 1.4rem; font-weight: 600; text-transform: uppercase; border-collapse: separate; border-spacing: 0.4rem; }
.classement-tableau th { padding: 2.04rem 0.5rem; vertical-align: middle; color: #7E7E7E; border-radius: 0.8rem; text-align: center; }
.classement-tableau td { padding: 1.3rem 1rem; vertical-align: middle; color: #1D3867; border-radius: 0.8rem; text-align: center; }

.classement-tableau .col-rang { width: 5.7rem; }
.classement-tableau .col-logo { width: 6.3rem; }
.classement-tableau .col-nom { text-align: left; }
.classement-tableau .col-MJ { width: 7rem; }
.classement-tableau .col-VIC { width: 7rem; }
.classement-tableau .col-DEF { width: 7rem; }
.classement-tableau .col-pourcent { width: 22rem; }
.classement-tableau .col-forme { width: 44rem; }

.classement-tableau .liste-pastille { gap: 3rem; }
.classement-tableau .pastille { width: 2rem; height: 2rem; border-radius: 10rem; }
.classement-tableau .pastille.vert { background: #4ED605; }
.classement-tableau .pastille.rouge { background: #CA1820; }




.ranking {
  --ranking-cols: 60px 60px 1fr 40px;
  font-size: 1.4rem;
  font-weight: 600;
  text-transform: uppercase;
}
.ranking__header {
  display: grid;
  grid-template-columns: var(--ranking-cols);
  column-gap: 12px;
  margin-bottom: 12px;
  font-weight: 600;
  color: #7E7E7E;
  padding-left: 15px;
  padding-right: 15px;
}
.ranking__header-rank {
  grid-column: 1;
}
.ranking__header-team {
  grid-column: 3;
}
.ranking__card {
  display: grid;
  grid-template-columns: var(--ranking-cols);
/*   gap: 12px; */
  padding: 15px;
  border-radius: 12px;
}
.ranking__card:nth-child(even) {
	background: #fff;
}

.ranking__rank  { grid-column: 1; }
.ranking__logo  { grid-column: 2; }
.ranking__team  { 
  grid-column: 3;
  font-weight: 600;
}
.ranking__arrow { 
  grid-column: 4;
/*   justify-self: end; */
	text-align: right;
/*   align-self: center; */
}

.ranking__mj  { grid-column: 1 / span 2; }
.ranking__vic { grid-column: 3; }
.ranking__def { grid-column: 4; }

.ranking__pct { grid-column: 1 / span 3; }
.ranking__gb  { grid-column: 4; }

.ranking__form-label {
	grid-column: 1 / span 4;
}

.ranking__form-dots {
  grid-column: 2 / span 3;
  display: flex;
  gap: 8px;
  align-items: center;
}

.ranking__mj,
.ranking__vic,
.ranking__def,
.ranking__pct,
.ranking__gb,
.ranking__form-label {
	display: none;
}

.ranking__card.selected .ranking__mj,
.ranking__card.selected .ranking__vic,
.ranking__card.selected .ranking__def,
.ranking__card.selected .ranking__pct,
.ranking__card.selected .ranking__gb,
.ranking__card.selected .ranking__form-label {
  display: flex;
  flex-direction: column;
  font-size: 12px;
}

.ranking__mj strong,
.ranking__vic strong,
.ranking__def strong,
.ranking__pct strong,
.ranking__gb strong {
  font-size: 14px;
}

/* Pastilles */
.ranking__form-dots span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #32cd32;
}

.ranking__card > div {
	border-bottom: 1px solid #F1F3F4;
	padding: 8px 0;
}
.ranking__card > .ranking__form-label {
	border-bottom: 0;
}




@media (min-width: 992px) {
	.ranking { display: none; }
}

































