@import url(custom_styles.css);

/* -- Titres -- */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #B9034F;
  font-family: loyola;
}

p.titles {
  flex-basis: 100%;
  text-align: center;
  margin: 36px 0;

  color: #e73062;
  font-size: calc(1.275rem + .3vw);
  font-family: loyola;
}

p.simple_title {
  flex-basis: 100%;
  text-align: center;
  font-size: calc(1.275rem + .3vw);
}

/* -- Liens -- */
a {
  color: #ed145b;
  font-weight: 500;
}

a:hover,
a:focus,
a:active {
  color: rgb(185, 3, 79);
}

a.lienBlanc {
  color: white !important;
  text-decoration: underline;
  transition: 0.3s !important;
}

a.lienBlanc:hover {
  color: #FFFF00 !important;
  text-decoration: underline;
}

/* -- couleurs du site -- */
.jaune {
  color: #FFFF00;
}

.rose-clair {
  color: #e73062;
}

.rose-fonce {
  color: #B9034F;
}

/* -- Boutons -- */
button.bouton {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  cursor: pointer;
  display: block;
  padding: 0 1.5em;
  height: 3em;
  line-height: 2.9em;
  border-radius: 6px;
  text-align: center;
  transition: 0.3s ease-in-out;
  font-size: 10pt;
}

/* bouton fond blanc */
button.bouton.rose {
  color: white;
  background-color: rgb(231, 48, 98);
  border: solid 2px rgb(231, 48, 98);
  box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
}

button.bouton.rose a {
  color: white !important;
  text-decoration: none !important;
  transition: 0.3s !important;
}

button.bouton.rose:hover {
  background-color: #fff;
  text-shadow: none;
  color: #D91338;
}

button.bouton.rose a {
  color: #D91338 !important;
  text-decoration: none !important;
}

/* bouton fond rose */
button.bouton.blanc {
  color: rgb(231, 48, 98);
  background-color: white;
  border: solid 2px rgb(231, 48, 98);
  box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
}

button.bouton.blanc a {
  color: rgb(231, 48, 98) !important;
  text-decoration: none !important;
  transition: 0.3s !important;
}

button.bouton.blanc:hover {
  background-color: rgb(231, 48, 98);
  text-shadow: none;
  color: white;
}

button.bouton.blanc:hover a {
  color: white !important;
  text-decoration: none !important;
}

button.bouton a:focus {
  outline: none;
}

.cardChristmasRun {
  border-top: 5px solid rgb(231, 48, 98);
  box-shadow: rgb(0 0 0 / 35%) 0px 5px 15px;
  border-radius: 6px;
  margin: 10px auto;
  padding: 19px;
}

/* SDS ADZ */
.body-innerwrapper {
  /* solution à la suite d'une double scrollbar non désirée */
  overflow-y: hidden;
}

body {
  font-family: Inter, sans-serif;
  font-size: 14px;
}

body:not(.home) div[itemprop="articleBody"] {
  line-height: 24px;
}

@media screen and (max-width: 600px) {
  body {
    font-size: 18px;
  }
}

@media (max-width: 1200px) {
  .hidden-sm {
    display: none !important;
  }

  .visible-sm {
    display: block !important;
    margin-right: 103px;
  }
}

.header-annule {

  margin-top: -20px;
}

.header-santa {
  margin-top: 30px !important;
  width: 100%;
  margin: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  FLEX-WRAP: nowrap;
}

.header-santa img {
  width: 53%;
}

.txtChristmasRun {
  color: white;
  text-align: center;
}

@media screen and (max-width: 500px) {
  .header-santa {
    display: block;
  }

  .header-santa img {
    width: 100%;
  }
}

@media screen and (min-width: 1140px) {
  .header-santa {
    margin-bottom: 20px;
  }
}

/******************************/
/* MENU - header              */
/*****************************/
/* -- Logo christmas Run -- */
#sp-logo-menu img {
  position: relative;
  top: 15px;
}

/* --  Réseaux sociaux -- */
#sp-reseaux-sociaux i {
  color: #FFFFFF !important;
  top: 6px;
  position: relative;
}

/* --  Menu -- */
#sp-header {
  height: 76px;
  background-color: #ffffff !important;
}

.sp-menu-item .sp-menu-separator,
.sp-menu-item a {
  color: #D91338;
  font-weight: 600;
  transition: 0.3s !important;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item a:hover {
  color: #D91338 !important;
  width: 100%;
  text-decoration: underline;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item a {
  width: 100%;
}

#sp-reseaux-sociaux i:hover,
.sp-megamenu-parent>li>a:hover,
.sp-dropdown>.sp-dropdown-inner>.sp-dropdown-items>.sp-menu-item.current-item.active a,
.sp-megamenu-parent>.sp-menu-item.sp-has-child.active>.sp-menu-separator {
  color: #D91338;
  text-decoration: underline;

}

.sp-megamenu-parent>li.active>a,
.sp-megamenu-parent>li.active:hover>a,
li.sp-menu-item.sp-has-child.active {
  font-weight: 600;
  color: #D91338 !important;
  text-decoration: underline;
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  background: #ffffff;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 100%;
  background-color: #e6e6e6;
  border: 1px solid #b9034f;
}

.sp-dropdown-inner {
  background-color: #ffffff !important;
}

/* -- BOUTON INSCRIPTION --*/

@media screen and (max-width: 767px) {
  #sp-bouton-menu {
    margin: 14px 0px 0px 0px !important;
  }
}

#sp-bouton-menu {
  margin: 18px auto;
}

/* -- OFFCANVAS --*/
/* couleur offcanvas menu */
.offcanvas-menu .menu.nav-pills li a,
.offcanvas-menu .menu.nav-pills li span {
  color: white !important;
  opacity: 1 !important;
}

.offcanvas-active .burger-icon>span {
  background-color: #ffffff !important;
}

body.ltr .offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>.menu-separator>.menu-toggler {
  top: 19px;
}

/* sous-menu */
.offcanvas-menu {
  background-color: #B9034F;
}

.offcanvas-menu .offcanvas-inner ul.menu li.active a {
  color: #ffffff !important;
  opacity: 0.8;
}

.offcanvas-menu .offcanvas-inner ul.menu>li>.btnInscription {
  color: #E73062 !important;
}

.offcanvas-menu .offcanvas-inner ul.menu>li>span {
  font-size: 20px;
}

.offcanvas-menu .offcanvas-inner ul.menu>li>ul li a {
  font-size: 20px;
  width: 100% !important;
  display: block;
  line-height: 31px;
}

.offcanvas-menu .offcanvas-inner ul.menu>li>a,
.offcanvas-menu .offcanvas-inner ul.menu>li>span {
  height: 55px;
  font-size: 20px;
}

.burger-icon>span {
  background-color: #b9034f;
}

/* offcanva menu sélectionné */
ul.menu.nav-pills li.active .menu-separator,
ul.menu.nav-pills li.active .menu-toggler {
  color: #ffff00 !important;
}

.offcanvas-menu .offcanvas-inner ul.menu li.current.active a {
  color: #ffff00 !important;
}

/* offcanvas icones */
.offcanvas-menu .offcanvas-inner .social-icons {
  font-size: 28px;
}

.offcanvas-menu .offcanvas-inner .social-icons li a span {
  color: white;
  opacity: 1;
  transition: 0.3s !important;
}

.offcanvas-menu .offcanvas-inner .social-icons li a span:hover {
  color: #ffff00;
}

/* -- Titre de l'article -- */
@font-face {
  font-family: 'loyola';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url("../../../fonts/Loyola.otf") format('truetype');
}

.article-header h1 {
  font-size: 34px;
  color: white;
  margin: -120px 0px 75px 0px;
  font-family: loyola;
  letter-spacing: 2px !important;
  display: flow-root;
  position: relative;
  text-align: center;
}

@media only screen and (max-width: 322px) {
  .article-header h1 {
    font-size: 22pt !important;
  }
}

/******************************/
/* Body                       */
/*****************************/
#sp-main-body {
  padding: 0 !important;
}

/* -- site web scrollbar -- */
/* width */
body::-webkit-scrollbar {
  width: 10px;
}

/* Handle */
body::-webkit-scrollbar-thumb {
  background: #ddd !important;
  border-radius: 10px;
  height: 10px;
  border-color: 3px solid #b9034f;
}

/* Handle on hover */
body::-webkit-scrollbar-thumb:hover {
  background: #b9044f;
}

/******************************/
/* MODULE Footer              */
/*****************************/
/* -- Sponsor principaux -- */
#sp-sponsor-principaux #mod_partners .title-partners {
  color: white !important;
}

.title-partners {
  margin-bottom: 1rem;
  margin-top: 3rem;
}

#sp-sponsor-principaux #mod_partners .flex-item {
  height: 9rem;
}

#sp-sponsor-principaux #mod_partners .flex-container {
  margin-bottom: 54px;
}

/* -- Sponsor section -- */
#sp-footer1 {
  color: white !important;
  text-align: center;
}

#sp-footer-contact-newsletter {
  color: white;
}

#sp-footer-contact-newsletter a {
  color: #ffffff !important;
  transition: 0.3s !important;
}

#sp-footer-contact-newsletter a:hover {
  color: rgb(255, 255, 0) !important;
}

#sp-bottom1,
#sp-bottom2,
#sp-bottom3 {
  padding: 20px;
}

.title-bottom {
  color: #ffffff !important;
}

/* -- Ver5sion tablette et mobile -- */
@media (max-width: 768px) {
  #sp-sponsor-principaux {
    background-size: contain !important;
  }
}

/****************************************/
/* MODULE Accueil - banner              */
/***************************************/
/* -- Banner santa --*/
.accueil-banner {
  background-image: linear-gradient(#5c0021, #b9044f);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* -- Banner flocons de neige --*/
.accueil-banner-flocons {
  background-image: url("../../../images/banners/header_flocon.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 130px;
}

/* -- Description ChristmanRun --*/
.presentationChristmasRun {
  color: white;
  margin: 10px;
  text-align: center;
  width: 80%;
  font-size: 15pt;
  font-weight: 600;
}

/* -- Version desktop -- */
@media only screen and (max-width: 900px) {
  .header-santa {
    width: 100%;
  }
}

@media only screen and (max-width: 790px) {
  .accueil-banner-christmas-texte {
    font-size: 12pt;
    line-height: 18px;
  }
}

/******************************/
/* ARTICLE Infos générales    */
/*****************************/
.imgInfosGenerales {
  position: relative;
  left: 125%;
  transform: translate(-60%, 5%);
  z-index: 1;
}

@media (max-width: 700px) {
  .imgInfosGenerales {
    position: relative;
    left: 92%;
    transform: translate(-50%, 15%);
    z-index: 1;
  }
}

/*****************************
* ARTICLE Entrainements      *
*****************************/
/* -- card contenu -- */
.entraienement-infos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 75%;
  margin: 36px auto;
  border: 1px solid #E8E8E8;
  padding: 24px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}

/* Styles spécifiques pour corner-card */
.corner-card {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 0;
}

.corner {
  border-radius: 18px;
  width: 18px;
  height: 48px;
  background-color: #e73062;
  border: 4px solid white;
  flex-shrink: 0;
  top: -46px;
  position: relative;
}

.top-left-center,
.top-right-center {
  position: absolute;
  top: -48px;
  transform: translateX(-50%);
}

.top-left-center {
  left: 25%;
}

.top-right-center {
  right: 25%;
}

.corner+.corner {
  margin-left: 10px;
}

/* -- dates -- */
.dates span {
  display: block;
  margin-bottom: 5px;
  width: 100%;
  text-align: right;
}

.annee {
  color: #E8E8E8;
  font-size: 30px;
  position: relative;
  font-weight: bold;
  margin: 11px 0;
}

.dates {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 1.2em;
  font-weight: bold;
  flex-basis: 29%;
}

.mois {
  display: block;
  font-size: 1.2em;
  margin-top: 10px;
  color: black;
}

.jour {
  margin-right: 5px;
  color: #e73062;
}

/* -- informations -- */
.entraienement-contenu {
  flex-basis: 53%;
}

.entraienement-contenu {
  font-size: 1em;
  color: black;
  text-align: left;
}

.entraienement-contenu i {
  color: #e73062;
  margin: auto;
  text-align: center;
  width: 20px;
}

.entraienement-contenu b {
  font-weight: bold;
}

/* -- ligne separateur -- */
.separeteur-infos {
  display: block;
  border: 1px solid #E8E8E8;
  margin: 0px 26px;
  height: 230px;
}

/* -- image -- */
.entraienement-infos .entraienement-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: auto;
}

/* -- version desktop -- */
@media (min-width: 996px) {
  .entraienement-infos .entraienement-img {
    background-image: url("../../../images/banners/entraintement_banner_desktop.webp");
    width: 100%;
    height: 150px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
}

/* -- version mobile et tablette -- */
@media (max-width: 996px) AND (min-width: 764px) {
  .entraienement-infos .entraienement-img {
    background-image: url("../../../images/banners/entrainement_banner_tablette.webp");
    width: 100%;
    height: 150px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
}

@media (max-width: 763px) {
  .entraienement-infos {
    width: 100%;
  }

  .entraienement-infos .entraienement-img {
    background-image: url("../../../images/banners/entrainement_banner_mobile.webp");
    width: 320px;
    height: 150px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
}

@media (max-width: 763px) {
  .entraienement-infos {
    flex-direction: column;
  }

  .titles,
  .dates,
  .entraienement-contenu,
  .separeteur-infos {
    flex-basis: 100%;
    width: 100%;
  }

  .dates span {
    text-align: center;
  }

  .separeteur-infos {
    margin: 40px 0px;
  }
}

/******************************/
/* ARTICLE Newsletter         */
/*****************************/
.laNewsletter h6 {
  text-align: center;
  width: 300px;
  font-weight: 0;
  color: #E73062;
}

.cardNewsletterInscription {
  width: 60%;
  margin: 30px auto;
  background-color: #f9f9f9;
  border-radius: 18px;
  box-shadow: rgb(228, 3, 46, 0.35) 0px 5px 15px;
  padding: 17px;
}

input[type="text"]:not(.form-control),
input[type="email"]:not(.form-control),
input[type="url"]:not(.form-control),
input[type="date"]:not(.form-control),
input[type="password"]:not(.form-control),
input[type="search"]:not(.form-control),
input[type="tel"]:not(.form-control),
input[type="number"]:not(.form-control),
select:not(.form-select):not(.form-control) {
  display: block;
  width: 246px !important;
  padding: 0.5rem 0.5rem !important;
  font-size: 1rem;
  line-height: 1.25;
  color: #495057;
  background-color: #fff;
  background-image: none;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  border: 1px solid #e4032e !important;
  height: 39.8px;
}

/* -- bouton -- */
.btnNewsletterInscription {
  float: right;
  width: 100px !important;
  display: block;
  width: 140px !important;
  padding: 0.5rem 0.5rem !important;
  font-size: 1rem;
  background-color: #fff;
  background-image: none;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
}

.btnNewsletterInscription {
  float: right;
  width: 100px;
  background: linear-gradient(#e4032e, black);
  background: linear-gradient(to right, #e4032e, black);
  color: white;
  background: linear-gradient(to right, #e4032e, black);

}

/***************************
* Boutons par niveau       *
***************************/
.btn {
  padding: 10px 20px;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  font-family: sans-serif;
  border-radius: 5px;
  cursor: pointer;
  border: none;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s !important;
}

.btnMenu {
  padding: 10px 20px;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border-radius: 5px;
  padding: 2px 10px !important;
  height: 44px;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  cursor: pointer;
  border: none;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s !important;
}

.lvl1 {
  background-color: #E73062 !important;
  border: 1px solid #fff;
  color: #ffffff !important;
}

.lvl1:hover {
  background-color: #ffffff !important;
  border: 1px solid #E73062;
  color: #E73062 !important;
}

.lvl1:focus {
  background-color: #ffffff !important;
  border: 1px solid #B9034F;
  color: #B9034F !important;
}

.lvl2 {
  background-color: #ffffff !important;
  color: #E73062 !important;
  border: 1px solid #E73062;
}

.lvl2:hover {
  background-color: #E73062 !important;
  color: #ffffff !important;

}

.lvl2:focus {
  background-color: #B9034F !important;
  border: 1px solid #B9034F;
  color: #ffffff !important;
}

.lvl3 {
  background-color: #EDEDED !important;
  color: #E73062 !important;
}

.lvl3:hover {
  background-color: #cacaca !important;
  color: #E73062 !important;

}

.lvl3:focus {
  background-color: #B9034F !important;
  color: #ffffff !important;
}

.lvl4 {
  background-color: transparent;
  color: #E73062;
  border: none;
}

.lvl4:hover {
  color: #000000 !important;
}

.lvl4:focus {
  color: #B9034F;
}

.closed {
  background-color: #A0A0A0 !important;
  color: #666666 !important;
  pointer-events: none;
  cursor: default;
  opacity: 0.8;
}

/*======================================*/
.inf-content div {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
}

.inf-content {
  width: 100%;
  margin: auto;
  text-align: center;
  flex-wrap: wrap;
}

.inf-content div~.inf-submit {
  flex-wrap: wrap;
  margin-top: 27px;
}

.inf-content {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px auto;
}

.inf-input {
  display: flex;
  flex-direction: column;
  margin-right: 10px;
}

.inf-input label {
  align-self: flex-start;
  /* Alignez le label à gauche */
  margin-bottom: 5px;
}

.inf-input input[type="text"] {
  box-sizing: border-box;
}

.inf-submit input[type="submit"] {
  box-sizing: border-box;
}

@media only screen and (max-width: 767px) {
  .cardNewsletterInscription {
    width: 88%;
  }
}

/***************************
* COMPOSANT Contact        *
***************************/
.contact-form {
  width: 100%;
  margin: auto;
}

.contact input[type="text"],
.contact input[type="email"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
}

.contact textarea {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 230px;
}

/*******************************
* ARTICLE Accès                *
*******************************/
.itemTransport {
  width: 80%;
  margin: auto;
  padding: 0 20px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: rgb(0 0 0 / 35%) 0px 5px 15px;
  border-top: 5px solid rgb(231, 48, 98);
  border-radius: 6px;
  margin-bottom: 2pc;
}

.imgTransport {
  width: 320px;
  margin: auto;
}

.itemTransport-right {
  padding: 40px
}

.itemTransport-left {
  width: 100%;
  padding: 18px 20px 27px 20px;
  border-top: 3px dotted #999;
}

.itemTransport-left .title {
  text-align: center;
  margin: 16px;
}

.itemTransport-left .sce {
  margin-top: 5px;
  display: block
}

.itemTransport-left .sce .fa {
  font-size: 6pt;
  vertical-align: middle;
}

.itemTransport-left .sce .icon,
.itemTransport-left .sce p,
.itemTransport-left .loc .icon,
.itemTransport-left .loc p {
  float: left;
  word-spacing: 5px;
  letter-spacing: 1px;
  color: #888;
  margin-bottom: 10px;
}

.itemTransport-left .sce .icon {
  position: absolute;
}

.itemTransport-left .sce .icon,
.itemTransport-left .loc .icon {
  margin-right: 10px;
  font-size: 20px;
  color: #666
}

@media only screen and (max-width : 600px) {
  .imgTransport {
    width: 100%;
    margin: auto;
  }

  .itemTransport-left {
    width: 100%;
    padding: 18px 0px 27px 0px;
  }
}

/***********************************
* ARTICLE Action Soutenue          *
***********************************/
.contactAssociation {
  border-top: 5px solid rgb(231, 48, 98);
  box-shadow: rgb(0 0 0 / 35%) 0px 5px 15px;
  border-radius: 6px;
  padding: 14px;
  margin-top: 10px;
}

/*******************************
* ARTICLE Course               *
*******************************/
.row.rowPageCourses {
  margin: auto;
  padding: 10px;
  column-gap: 38px;
}

/******************************
* COOKIES                     *
******************************/
/* couleur de la section cookies après avoir accepter 
#sp-cookies {
  color: white;
  text-align: center;
  background-color: #B9034F;
}*/
/*******************************
* BLOG CATÉGORIES              *
* Communiqués de presse        *
*******************************/
.row.communiques {
  margin: auto;
}

/* FENTRE MODAL */
.modal-content {
  margin-top: 100px;
}

.modal-header h5 {
  text-align: center;
  font-size: 18pt;
}

.modal-dialog {
  width: 80%;
}

.table-bordered>tbody>tr>td,
.table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>td,
.table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>thead>tr>th {
  border: none !important;
  margin: 30px;
}

@media (max-width: 770px) {
  .modal-dialog {
    width: 96%;
  }
}

/******************************
* ARTICLE Erreur 404          *
******************************/
.itemid-136 #sp-main-body {
  background-image: linear-gradient(#5c0021, #b9044f);
}

.erreur404 {
  padding: 33px 0px 50px 0px;
}

.erreur404 img {
  width: 50%;
}

/******************************
* CONFIRMATION FRM CONTACT    *
******************************/
body.itemid-262 {
  background-image: linear-gradient(#5c0021, #b9044f);
}

/******************************
* ARTICLE action soutenue     *
******************************/
.row.imgActionSoutenue {
  margin: 35px 0px;
}

.row.imgActionSoutenue img,
.imgActionSoutenue {
  border-radius: 6px;
}

img.imgActionSoutenuePortrait {
  width: 57%;
  margin: auto;
  margin: 10px auto;
}

/* afficher les images dans une modale */
/* Ajoutez ces styles pour la modale */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  /* Couleur de fond avec opacité foncée */
  overflow: auto;
}

.modal-content {
  max-width: 45%;
  margin: auto;
  display: block;
}

/* Styles pour centrer l'image au milieu de l'écran */
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.close {
  position: absolute;
  top: 100px;
  right: 35px;
  font-size: 40px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
}

/* version mobile */
@media screen and (max-width: 635px) {
  .modal-content {
    max-width: 75%;
    margin: auto;
    display: block;
  }
}

.invisiblelink {
  text-decoration: none !important;
  color: #ffffff !important;
  cursor: default !important;
}

.invisiblelink:hover {
  color: #ffffff !important;
}

.galerie-action-soutenue {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.galerie-action-soutenue-child {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.galerie-action-soutenue img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: rgb(0 0 0 / 35%) 0px 5px 15px;
  transition: transform 0.2s;
}

.galerie-action-soutenue img:hover {
  transform: scale(1.05);
  box-shadow: rgb(0 0 0 / 35%) 0px 7px 22px;
}

@media (max-width: 600px) {
  .galerie-action-soutenue {
    grid-template-columns: 1fr;
  }
}

.planbanner1 {
  background-image: url(https://christmasrun.ch/images/courses/Parcours_CMR2025.webp);
  background-color: #E73062;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 5px;
  height: 250px;
  width: 100%;
  margin-bottom: 60px;
}

.planbanner2 {
  background-image: url(https://christmasrun.ch/images/banners/plan_de_site-CMR2024.webp);
  background-color: #E73062;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 5px;
  height: 250px;
  width: 100%;
  margin-bottom: 60px;
}

.btnBig {
  font-size: 24pt;
  letter-spacing: 0.25pt;
  position: absolute;
  text-align: center;
  background-color: #ffffff;
  border: 3px solid #E73062;
  border-radius: 6px;
  padding: 10px;
  transition: visibility 0.3s 0.3s ease-in-out, background-color 0.3s ease-in-out, color 0.3s ease-in-out, border 0.3s ease-in-out;
  z-index: 1;
}

.btnBig a {
  color: #E73062;
}

.btnBig:hover {
  color: #ffffff !important;
  background-color: #E73062;
  border: 3px solid #ffffff;
  z-index: 2;
  transition-delay: 0s;
}

.btnBig:hover a {
  color: #ffffff !important;

}

@media only screen and (max-width: 600px) {
  .btnBig {
    font-size: 16pt;
  }
}

.alerteIntro {
  /* cadre alerte parcours*/
  background-color: #e9e9e9;
  height: 500px;
  width: 500px;

}

iframe {
  border-radius: 10px;
}

.course-article {
  margin: 0 auto;
  padding: 2rem;
  line-height: 1.6;
  color: #333;
}

.course-banner img {
  width: 100%;
  height: auto;
  object-fit: cover;
  margin-bottom: 1.5rem;
}

.course-header .course-title {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}

.course-header .course-intro {
  font-style: italic;
  color: #555;
  margin-bottom: 1.5rem;
}

.course-meta {
  background: #f8f8f8;
  border-left: 4px solid #B9034F;
  border-radius: 4px 0px 0px 4px;
  padding: 2rem 1rem 1rem 1rem;
  margin-bottom: 2rem;
}

.course-meta p {
  margin: 0.5rem 0;
}

.course-meta .btn.course-register {
  display: inline-block;
  margin-top: 1rem;
  background-color: #e53935;
  color: white;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  border-radius: 4px;
}

.course-content {
  margin-bottom: 2rem;
}

.course-map {
  max-width: 600px;
  margin: 0 auto;
  margin-bottom: 2rem;
}

.info-course {
  background-color: #B9034F;
  color: #fff;
  max-width: 100%;
  display: inline-block;
  padding: 10px;
  border-radius: 4px;
  position: absolute;
  top: -20px;
}

.course-data {
  position: relative;
  margin-top: 0.5rem;
}

.course-description {
  margin-bottom: 3rem;
}

.course-img img{
  aspect-ratio: 16/10;
  object-fit: cover;
  object-position: 50% calc(50% - 10px);
}

.sponsor-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 2vw, 24px);
  row-gap: 5rem;
  margin: 2rem 0;
  padding-bottom: 5rem;
}

.sponsor-item {
  flex: 0 1 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sponsor-item img {
  max-width: 100%;
  max-height: 100px;
  height: auto;
  object-fit: contain;
}

.article-galerie-ac .aga-masonry {
  column-gap: 16px;
}
.article-galerie-ac .aga-item {
  break-inside: avoid;
  margin-bottom: 16px;
}
.article-galerie-ac .aga-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}
.article-galerie-ac .aga-credit {
  font-size: 0.8rem;
  color: #666;
  margin-top: 4px;
  text-align: right;
  font-style: italic;
}
@media (max-width: 1024px) {
  .article-galerie-ac .aga-masonry { column-count: 2 !important; }
}
@media (max-width: 640px) {
  .article-galerie-ac .aga-masonry { column-count: 1 !important; }
}


.hero-video {
  margin-bottom: 40px;
}

.hero-container {
  position: relative;
}

.hero-title {
  position: absolute;
  bottom: 15px;
  left: 25px;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0px 2px 6px rgba(0,0,0,0.8);
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  margin-left: 20px;
  margin-bottom: 15px;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.video-item {
  background: #111;
  border-radius: 5px;
  overflow: hidden;
  transition: transform 0.2s;
}

.video-item:hover {
  transform: scale(1.03);
}

.video-title {
  padding: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  text-align: center;
}