@import url('https://fonts.googleapis.com/css2?family=Metal+Mania&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/*
font-family: "Poppins", sans-serif;

font-family: "Metal Mania", system-ui;
*/

/*
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
*/
:root {
  --couleur-principale: #000000;
  --couleur-secondaire: #DA2716;
}
.font-main {
  font-family: "Poppins", sans-serif;
}
.font-secondary {
  font-family: "Metal Mania", system-ui;
  font-optical-sizing: auto;
  font-variation-settings: "slnt" 0;
}
body, html {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: var(--couleur-principale);
  background-color: #FFFFFF;
}
@media (max-width: 540px) {
  body, html {
    font-size: 18px !important;
  }
}
* {
  outline: none;
}
.couleur-principale { color: var(--couleur-principale); }
.couleur-secondaire { color: var(--couleur-secondaire); }
.couleur-blanc { color: #FFFFFF; }
a {
  /*color: var(--color-highlight);*/
}
table {
  width: 100%;
}
table tr td {
  vertical-align: top;
}
hr {
  width:90%;
  opacity: 1;
  background: #180758;
  height: 1px;
}
h1 {
  font-family: "Metal Mania", system-ui;
  font-size: 136px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  line-height: 1em;
}
@media (max-width: 980px) {
  h1 { font-size: 80px; }
}
@media (max-width: 768px) {
  h1 { font-size: 50px; }
}
/*@media (max-width: 560px) {
  #carouselHome h1 { font-size: 30px; }
}*/

h2 {
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2em;
  padding-bottom: 20px;
  margin-bottom: 0px;
}
h2 span {
  font-family: "Metal Mania", system-ui;
  font-optical-sizing: auto;
  font-variation-settings: "slnt" 0;
  font-size: 45px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
h2.titre-encadre-rotate {
  color: #FFF;
  text-align: center;
  background: var(--couleur-secondaire);
  width: fit-content;
  display: flex;
  transform: rotate(-1deg);
  padding: 0 18px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
@media (max-width: 768px) {
  h2 {
    font-size: 30px;
  }
  h2 span {
    font-size: 35px;
  }
  h2.titre-encadre-rotate {
    font-size: 30px;
  }
}

.fs-16 {
  font-size:16px;
}

.border-top-10 {
  border-top: 10px solid var(--couleur-secondaire);
}
.border-bottom-10 {
  border-bottom: 10px solid var(--couleur-secondaire);
}

/* CTA */
.cta {
  /*display: flex;*/
  padding: 6px 14px;
  justify-content: center;
  align-items: center;
  width: fit-content;
  background: var(--couleur-secondaire);
  color:#FFFFFF;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-decoration: none;
}
.cta-light {
  /*display: flex;*/
  padding: 6px 14px;
  justify-content: center;
  align-items: center;
  width: fit-content;
  background: #FFFFFF;
  color: var(--couleur-secondaire);
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-decoration: none;
}
/* /CTA */

/* BANDEAU TOP */
#bandeau-top {
  background-color: #ffffff;
  color: var(--couleur-principale);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
/* /BANDEAU TOP */

/* LOGO TOP */
#logo-top img {
  width: 100px;
}
@media (max-width: 768px) {
  #logo-top {
    margin-bottom:10px;
  }
}
/* /LOGO TOP */

/* MENU */
.bg-nav {
  background: var(--couleur-secondaire);
}
.navbar {
  --bs-navbar-padding-y: 0px;
}
.nav-link {
  --bs-nav-link-padding-y: 0rem;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color:#FFFFFF;
}
.nav-link.active {
  color:#FFFFFF !important;
}
.nav-link:hover {
  color: #FFFFFF !important;
}
.navbar li {
  margin-left : 0.5em;
  margin-right : 0.5em;
}
.navbar li:first-child {
  margin-left : 0em;
}
.navbar li:last-child {
  margin-right : 0em;
}
@media (max-width: 768px) {
  .navbar li {
    margin-left : 0em;
    margin-right : 0em;
  }
  .nav-link {
    font-size: 0.7em;
  }
}
/* /MENU */

/* HEADERS */
.top-titre {
  padding-top:40px;
  padding-bottom:40px;
}
#index .top-titre {
  background-image: url("src/img/lt-header-home.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding-top:250px;
  padding-bottom:250px;
}

@media (max-width: 768px) {
  #index .top-titre {
    padding-top:50px;
    padding-bottom:70px;
  }
}
#reglement .top-titre {
  background-image: url("src/img/lt-header-reglement.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
#carte .top-titre {
  background-image: url("src/img/lt-header-carte.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
#points .top-titre {
  background-image: url("src/img/lt-header-points.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
/* /HEADERS */

/* BANDEAU HEADER & FOOTER */
.bandeau-header-footer {
  background: var(--couleur-secondaire);
  display: flex;
  padding: 12px 0px;
  align-items: flex-start;
  gap: 96px;
  align-self: stretch;
  overflow: hidden;
}
.bandeau-header-footer div {
  color: #FFF;
  font-size: 24px;
  font-style: italic;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 17.04px;
  text-transform: uppercase;
  /* Force le texte à rester sur une seule ligne */
  white-space: nowrap;
  /* Ajout de l'animation */
  display: inline-block;
  padding-left: 0%; /* Démarre à gauche */
  animation: scroll-texte 400s linear infinite;
}
/* Définition du mouvement */
@keyframes scroll-texte {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@media (max-width: 720px) {
  .bandeau-header-footer div {
    font-size: 14px;
    letter-spacing: 10px;
  }
  .bandeau-header-footer {
    padding: 5px 0px;
  }
}
/* /BANDEAU HEADER & FOOTER */

/* FOOTER */
.footer {
  background: #FBDDDA;
  margin-bottom: 0px;
  padding: 0px;
}
/* /FOOTER */

/* CAROUSEL HOME */
#carouselHome .carousel-item .carousel-caption {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex !important;
  flex-direction: column;   /* Aligne les éléments verticalement (p, div, a) */
  justify-content: center;  /* Centre verticalement */
  align-items: center;      /* Centre horizontalement */
}
#carouselHome img.titre { max-width:687px; }
#carouselHome img.accroche { 
  max-width:638px;
  padding-top:35px;
  padding-bottom:35px;
}
@media (max-width: 1140px) {
  #carouselHome img.titre { max-width:60%; }
  #carouselHome img.accroche { 
    max-width:50%; 
    padding-top:25px;
    padding-bottom:25px;
  }
}
@media (max-width: 960px) {
  #carouselHome img.titre { max-width:40%; }
  #carouselHome img.accroche { 
    max-width:40%; 
    padding-top:20px;
    padding-bottom:20px;
  }
}
@media (max-width: 720px) {
  #carouselHome img.titre { max-width:40%; }
  #carouselHome img.accroche { 
    max-width:40%; 
    padding-top:10px;
    padding-bottom:20px;
  }
  #carouselHome a { 
    font-size: 18px;
  }
}
/* CAROUSEL HOME */

/* REGLEMENT */
.reglement h2 {
  padding-bottom:0;
}
/* /REGLEMENT */

/* CARTE ETAPES */
.etape-mastercard {
  background: url('src/img/bg-points-noir.png') #FFFFFF center left repeat;
  background-size: 1000px 666px;
  border: 1px solid #180758;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.num {
  color: var(--couleur-secondaire);
  font-size: 46px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  display: inline-block;
}
/* /CARTE ETAPES */

/* TABLEAU DES POINTS */
#points table {
  font-size: 26px;
}
#points table .etiquette {
  background: var(--couleur-secondaire);
  width: fit-content;
  padding: 0 18px;
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
  margin: 0 auto;
  transform: rotate(-2deg);
}
#points table sup {
  font-size:0.5em;
  top: -1em;
}
#points table thead tr {
  padding-left:0.25em;
  padding-right:0.25em;
}
#points table thead tr th {
  font-weight:700;
  padding-bottom:25px;
  padding-left:0.5em;
  padding-right:0.5em;
}
#points table tbody tr td {
  padding-bottom:10px;
  padding-left:0.5em;
  padding-right:0.5em;
  vertical-align: middle;
}
#points table tbody tr:last-child td {
  padding-bottom:0px;
}

/* encadré partie bonus */
#points table.bonus {
  background: url('src/img/bg-points-noir.png') #ffffff no-repeat center center;
  background-size: cover;
  border: 1px solid #180758;
}
#points table.bonus-bis {
  background: url('src/img/bg-points-rouge.png') #ffffff no-repeat bottom left;
  background-size: cover;
  border: 1px solid #180758;
}
#points table thead.bonus th.titre {
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
#points .mentions p {
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
  line-height: normal;
}
#points .bloc-point p {
  font-size: 22px;
  font-weight: 300;
  line-height: normal;
}
#points .bloc-point .tableau {
  font-size: 26px;
  line-height: 1.2em;
  font-weight: 300;
  border:1px solid #fff;
}

@media (max-width: 768px) {
  #points table { font-size: 18px; }
  #points table tbody tr td.points { font-size: 17px; }
  #points table tbody.bonus tr td.points { font-size: 18px; }
  #points table thead.bonus th.titre { font-size: 22px; }
  #points .mentions p { font-size: 15px; }
  #points .bloc-point p { font-size: 18px; }
  #points .bloc-point .tableau { font-size: 18px; }
}
/* /encadré partie bonus */


/* /TABLEAU DES POINTS */

/* BG */
.bg-couleur-secondaire { background: var(--couleur-secondaire) !important; }
.bg-guitare-home {
  background: url('src/img/lt-guitare-home.svg') transparent 100% / cover no-repeat;
  width: 322px;
  height: 266px;
  position: absolute;
  right: 0px;
  bottom: 0px;
}
@media (max-width: 768px) {
  .bg-guitare-home {
    opacity: 0.5;
  }
}
.bg-guitare-points {
  background: url('src/img/guitare-opacity-10.svg') center center no-repeat;
  background-size: contain;
}
.bg-hotline {
  background: url('src/img/bg-points-rouge.png') #ffffff no-repeat bottom left;
  background-size: cover;
}
/* /BG */

/* POPUP */
.modal-content {
  font-size: 22px;
  border: 2px solid var(--couleur-secondaire); 
  background: #FFFFFF; 
  padding:20px 0px;
  border-radius:0px;
}
.modal-content h2 {
  font-size:30px;
}
.modal-content a {  
  margin:0 auto;
  font-size:22px; 
  transform: rotate(-1deg);
}
.modal-content a:hover {
  cursor: pointer;
} 
@media (max-width: 768px) {
  .modal-content {
    font-size: 18px;
  }
  .modal-content a { 
    font-size:18px; 
  }
}
/* /POPUP */