:root {
  /* --sda_blue: #003399;*/
  --sda_blue: rgba(33, 67, 141, 1);
/*  --sda_logo: rgba(41, 65, 135, 0.5);
  --sda_logo: rgba(41, 65, 135, 0.3);  */
/* --sda_logo: rgba(208, 227, 244, 0.4); */
  --sda_logo: rgba(217, 217, 217, 0.6);
  --sda_mauv: rgb(115, 157, 247);
  --sda_grey: rgba(217, 217, 217, 1);
  --sda_shadow: rgb(153, 192, 231);
  --sda_white: #ffffff;
  --sda_red: #fc0404;
}

.sda {
  text-align: center;
  background-color: var(--sda_mauv);
  margin-bottom: 0px;
  padding-bottom: 20px;
}

.sda_warn {
  text-align: center;
  background-color: var(--sda_mauv);
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 2px;
  padding-bottom: 2px;
}

#sda_bg {
/* background-color: var(--sda_mauv); */
/* background-color: rgb(0, 255, 179); */
/* background: linear-gradient(120deg,#ffffff,var(--sda_blue)); */
/* background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c); */
background: radial-gradient(closest-side, var(--sda_mauv), var(--sda_white), var(--sda_blue));
}

.jumbotron {
  padding-top: 0px;
  padding-bottom:20px;
  background-color: radial-gradient(closest-side, var(--sda_mauv), var(--sda_white), var(--sda_blue));
  background-image: url("../../pic/accueil_sda_2025_2.png");
  background-size: contain; 
  background-position: center;
  background-repeat: no-repeat;

  /* background-size: auto 100%;
  height: 100%;
  padding: 5em inherit;*/
  min-height: 30vh;
  /*width: 100%;
  height:100%;
  max-height: 521px; 
  max-width:1920px;
  background-position: 0 0;*/
}

.jumbotron-footer {
  padding-top: 0px;
  padding-bottom:0px;
  background-image: url("../../pic/couverture-sda-1.png");
  background-size: contain; 
  /* background-size: auto 100%;
  height: 100%;
  padding: 5em inherit; */
  min-height: auto;
  max-height: auto;
  /*width: 100%;
  height:100%;
  max-height: 60vh; 
  max-width:1920px;
  background-position: 0 0;*/
}

#sda_navbar {
  margin-top:-5px;
  margin-bottom:0;
  padding-left:20px;
  padding-top:0px;
  padding-bottom:0px;
  background-color:white;
}

@font-face {
  font-family: Ubuntu;
  font-style: normal;
  font-weight: 400;
  src: local(Ubuntu), url(../../fonts/ubuntu/Ubuntu-Regular.ttf) format('truetype');
}

#sda_title1 {
  margin-top:0.1em;
  margin-bottom:0em;
  font-size: 10em;
  font-family: Ubuntu, Verdana, Geneva, Tahoma, sans-serif;
  color: var(--sda_blue);
  text-shadow: 4px -4px 2px #FFF, -4px 4px 12px var(--sda_shadow);
}

#sda_title2 {
  margin-top:0.1em;
  margin-bottom:0.1em;
  font-size: 2.5em;
  font-family: Ubuntu, Verdana, Geneva, Tahoma, sans-serif;
  color: var(--sda_blue);
  text-shadow: 3px -3px 2px #FFF, -3px 3px 8px var(--sda_shadow);
}

#sda_title3 {
  margin-top:0.3em;
  margin-bottom:0em;
  font-size: 2.0em;
  font-family: Ubuntu, Verdana, Geneva, Tahoma, sans-serif;
  color: var(--sda_blue);
  text-shadow: 3px -3px 2px #FFF, -3px 3px 8px var(--sda_shadow);
}

label.error {
  color: var(--sda_red);
  margin-left:0em;
  padding:0px 5px 0px 5px;
  font-size:0.9rem;
}

@media (min-width: 300px) {
  sda_title1, #sda_title1 {
    font-size: 2rem;
  }
  sda_title2, #sda_title2 {
    font-size: 1.2rem;
  }
  sda_title3, #sda_title3 {
    font-size: 0.9rem;
  }
}

@media (min-width: 576px) {
  sda_title1, #sda_title1 {
    font-size: 3rem;
  }
  sda_title2, #sda_title2 {
    font-size: 1.5rem;
  }
  sda_title3, #sda_title3 {
    font-size: 1.2rem;
  }
}

@media (min-width: 768px) {
  sda_title1, #sda_title1 {
    font-size: 4rem;
  }
  sda_title2, #sda_title2 {
    font-size: 2.0rem;
  }
  sda_title3, #sda_title3 {
    font-size: 1.6rem;
  }
}

@media (min-width: 1200px) {
  sda_title1, #sda_title1 {
    font-size: 5rem;
  }
  sda_title2, #sda_title2 {
    font-size: 2.5rem;
  }
  sda_title3, #sda_title3 {
    font-size: 2.0rem;
  }
}

/* le block conteneur */
.marquee-rtl {
  max-width: auto; /* largeur de la fenêtre */
  margin: 0 0 0 0;
  border: 5px solid #F0F0FF;
  overflow: hidden; /* masque tout ce qui dépasse */
  box-shadow: 0 .25em .5em #CCC,inset 0 0 1em .25em #CCC;
}

  /* le bloc défilant */
.marquee-rtl > :first-child {
  display: inline-block;/* modèle de boîte en ligne */
  padding-right: 2em;  /* un peu d'espace pour la transition */
  padding-left: 100%;  /* placement à droite du conteneur */
  white-space: nowrap; /* pas de passage à la ligne */
  animation: defilement-rtl 15s infinite linear;
}

@keyframes defilement-rtl {
  0% {
    transform: translate3d(0,0,0); /* position initiale à droite */
  }
  100% {
    transform: translate3d(-100%,0,0);/* position finale à gauche */
  }
}


/* Button */
.button {
  height: 50px;
  width: 150px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
}

.button:hover {
  box-shadow: .5px .5px 150px #252525;
}

.typeback::after {
  content: "le formulaire";
  height: 50px;
  width: 150px;
  background-color: var(--sda_blue);
  color: var(--sda_white);
  position: absolute;
  top: 0%;
  left: 0%;
  transform: translateY(50px);
  font-size: 1.0rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease-in-out;
}

.typeback::before {
  content: "Modifier";
  height: 50px;
  width: 150px;
  background-color: #fff;
  color: var(--sda_blue);
  position: absolute;
  top: 0%;
  left: 0%;
  transform: translateY(0px) scale(1.2);
  font-size: 1.0rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease-in-out;
}

.typeback:hover::after {
  transform: translateY(0) scale(1.2);
}

.typeback:hover::before {
  transform: translateY(-50px) scale(0) rotate(120deg);
}


.type1::after {
  content: "Suivant";
  height: 50px;
  width: 150px;
  background-color: var(--sda_blue);
  color: var(--sda_white);
  position: absolute;
  top: 0%;
  left: 0%;
  transform: translateY(50px);
  font-size: 1.0rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease-in-out;
}

.type1::before {
  content: "Valider";
  height: 50px;
  width: 150px;
  background-color: var(--sda_white);
  color: var(--sda_blue);
  position: absolute;
  top: 0%;
  left: 0%;
  transform: translateY(0px) scale(1.2);
  font-size: 1.0rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease-in-out;
}

.type1:hover::after {
  transform: translateY(0) scale(1.2);
}

.type1:hover::before {
  transform: translateY(-50px) scale(0) rotate(120deg);
}

.typecb::after {
  content: "CB";
  height: 50px;
  width: 150px;
  background-color: var(--sda_blue);
  color: var(--sda_white);
  position: absolute;
  top: 0%;
  left: 0%;
  transform: translateY(50px);
  font-size: 1.0rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease-in-out;
}

.typecb::before {
  content: "Payer";
  height: 50px;
  width: 150px;
  background-color: var(--sda_white);
  color: var(--sda_blue);
  position: absolute;
  top: 0%;
  left: 0%;
  transform: translateY(0px) scale(1.2);
  font-size: 1.0rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease-in-out;
}

.typecb:hover::after {
  transform: translateY(0) scale(1.2);
}

.typecb:hover::before {
  transform: translateY(-50px) scale(0) rotate(120deg);
}

.type_dis::before {
  content: "Formulaire incomplet";
  height: 50px;
  width: 150px;
  background-color: var(--sda_grey);
  color: var(--sda_blue);
  position: absolute;
  top: 0%;
  left: 0%;
  transform: translateY(0px) scale(1.2);
  font-size: 0.8rem;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease-in-out;
}

.type_end::before {
  content: "Terminer";
  height: 50px;
  width: 150px;
  background-color: var(--sda_blue);
  color: var(--sda_white);
  position: absolute;
  top: 0%;
  left: 0%;
  transform: translateY(0px) scale(1.2);
  font-size: 1.0rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease-in-out;
}

/* Modal: Payment section */

.modal-title {
  width: 100%;
  align-items: center;
  position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 2px;
  padding-bottom: 2px;
}

.modal-footer {
  align-items: center;
  justify-content: flex-end;
}

.errorTxt{
  border: 1px solid red;
  min-height: 20px;
}

/* Footer */
.svg-inline--fa {
  vertical-align: -0.200em;
}

.rounded-social-buttons {
  text-align: center;
}

.rounded-social-buttons .social-button {
  display: inline-block;
  position: relative;
  cursor: pointer;
  width: 3.125rem;
  height: 3.125rem;
  border: 0.125rem solid transparent;
  padding: 0;
  text-decoration: none;
  text-align: center;
  color: #fefefe;
  font-size: 1.5625rem;
  font-weight: normal;
  line-height: 2em;
  border-radius: 1.6875rem;
  transition: all 0.5s ease;
  margin-right: 0.25rem;
  margin-bottom: 0.25rem;
}

.rounded-social-buttons .social-button:hover, .rounded-social-buttons .social-button:focus {
  -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}

.rounded-social-buttons .fa-twitter, .fa-facebook-f, .fa-linkedin, .fa-youtube, .fa-instagram {
  font-size: 25px;
}

.rounded-social-buttons .social-button.facebook {
  background: #3b5998;
}

.rounded-social-buttons .social-button.facebook:hover, .rounded-social-buttons .social-button.facebook:focus {
  color: #3b5998;
  background: #fefefe;
  border-color: #3b5998;
}

.rounded-social-buttons .social-button.twitter {
  background: #55acee;
}

.rounded-social-buttons .social-button.twitter:hover, .rounded-social-buttons .social-button.twitter:focus {
  color: #55acee;
  background: #fefefe;
  border-color: #55acee;
}

.rounded-social-buttons .social-button.linkedin {
  background: #007bb5;
}

.rounded-social-buttons .social-button.linkedin:hover, .rounded-social-buttons .social-button.linkedin:focus {
  color: #007bb5;
  background: #fefefe;
  border-color: #007bb5;
}

.rounded-social-buttons .social-button.youtube {
  background: #bb0000;
}

.rounded-social-buttons .social-button.youtube:hover, .rounded-social-buttons .social-button.youtube:focus {
  color: #bb0000;
  background: #fefefe;
  border-color: #bb0000;
}

.rounded-social-buttons .social-button.instagram {
  background: #f057a3;
}

.rounded-social-buttons .social-button.instagram:hover, .rounded-social-buttons .social-button.instagram:focus {
  color: #125688;
  background: #f59425;
  border-color: #125688;
}


.social-buttons{
  /* background: linear-gradient(45deg,#22a6b3,#f1fd46);*/
  /* background: linear-gradient(0.25turn,var(--sda_blue), #ffffff); */
  background: radial-gradient(closest-side, var(--sda_blue), var(--sda_white), var(--sda_blue));
  background: radial-gradient(var(--sda_mauv), var(--sda_blue));
}

.social-buttons a{
  display: inline-flex;
  text-decoration: none;
  font-size: 28px;
  width: 60px;
  height: 60px;
  color: #fff;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 0 8px;
  z-index: 2;
}

.social-buttons a::before{
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  background: linear-gradient(45deg,#dde9eb,#021fa3);
  border-radius: 50%;
  z-index: -1;
  transition: 0.3s ease-in;
}

.social-buttons a:hover::before{
  transform: scale(0);
}

.social-buttons a i{
  transition: 0.3s ease-in;
}

.social-buttons a:hover i{
  background: linear-gradient(45deg,#eceae7,#6b3042);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: scale(2.2);
}

.social-buttons a.facebook::before{
  background: linear-gradient(45deg,#dde9eb,#021fa3);
}
.social-buttons a.facebook:hover i{
  background: linear-gradient(10deg,#021fa3,#dde9eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: scale(2.2);
}


.social-buttons a.x-twitter::before{
  background: linear-gradient(45deg,#f0eeef,#312e31);
}
.social-buttons a.x-twitter:hover i{
  background: linear-gradient(10deg,#312e31, #f0eeef);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: scale(2.2);
}


.social-buttons a.instagram::before{
  background: linear-gradient(45deg,#fcdaf4,#ca17bb);
}
.social-buttons a.instagram:hover i{
  background: linear-gradient(10deg,#ca17bb, #fcdaf4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: scale(2.2);
}








/* .social_test ul li:hover{
  color: #ffa502;
  box-shadow: 0 0 15px #d35400;
  text-shadow: 0 0 15px #d35400;
} */

/* 
.main {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 0.5em;
}

.up {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
}

.down {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
}

.card1 {
  width: 90px;
  height: 90px;
  outline: none;
  border: none;
  background: white;
  border-radius: 90px 5px 5px 5px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  transition: .2s ease-in-out;
}

.instagram {
  margin-top: 1.5em;
  margin-left: 1.2em;
  fill: #cc39a4;
}

.card2 {
  width: 90px;
  height: 90px;
  outline: none;
  border: none;
  background: white;
  border-radius: 5px 90px 5px 5px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  transition: .2s ease-in-out;
}

.twitter {
  margin-top: 1.5em;
  margin-left: -.9em;
  fill: #03A9F4;
}

.card3 {
  width: 90px;
  height: 90px;
  outline: none;
  border: none;
  background: white;
  border-radius: 5px 5px 5px 90px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  transition: .2s ease-in-out;
}

.github {
  margin-top: -.6em;
  margin-left: 1.2em;
}

.card4 {
  width: 90px;
  height: 90px;
  outline: none;
  border: none;
  background: white;
  border-radius: 5px 5px 90px 5px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  transition: .2s ease-in-out;
}

.discord {
  margin-top: -.9em;
  margin-left: -1.2em;
  fill: #8c9eff;
}

.card1:hover {
  cursor: pointer;
  scale: 1.1;
  background-color: #cc39a4;
}

.card1:hover .instagram {
  fill: white;
}

.card2:hover {
  cursor: pointer;
  scale: 1.1;
  background-color: #03A9F4;
}

.card2:hover .twitter {
  fill: white;
}

.card3:hover {
  cursor: pointer;
  scale: 1.1;
  background-color: black;
}

.card3:hover .github {
  fill: white;
}

.card4:hover {
  cursor: pointer;
  scale: 1.1;
  background-color: #8c9eff;
}

.card4:hover .discord {
  fill: white;
}
*/