@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  padding:0;
  font-family:'Raleway', sans-serif;
}

header{
  background:url('/assets/images/bulles_background_header.jpg');
  background-position:25% 15%;
  width:100%;
  height:auto;
}

header nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  padding:20px;
}

header nav a{
  color:#fff;
  text-decoration:none;
  margin-right:10px;
}

header nav a:hover{
  color:#ffcc00;
  border-bottom:#919191 solid 1px;
}

header .bandeau{
  display:flex;
  flex-wrap:wrap;
  color:#fff;
}

header .bandeau .gauche img{
  height:250px;
  width:500px;
  border-radius:100%;
  width:100%;
}

header .bandeau .gauche{
	width:500px;
	padding:20px;
}

header .bandeau .droite{
  width:20%;
  margin-right:10px;
  margin-top:25px;
  margin-bottom:25px;
  padding:20px;
}

header .bandeau h4{
  margin-top:-20px;
  padding:20px;
}

.boussole{
  background-color:#fff;
}

.boussole i{
  background-color:#00699b;
  color:#fff;
  text-decoration:none;
  padding:10px;
  font-size:30px;
  text-align:right;
}

.boussole .tooltiptext {
  visibility:hidden;
  width:120px;
  background-color:#00699b;
  color:#fff;
  text-align:center;
  border-radius:30px;
  padding:5px;

  /* Position the tooltip */
  position:left;
  z-index:1;
}

.boussole:hover .tooltiptext {
  visibility:visible;
}

/* L'Histoire du Club */

.premieres-presentations{
  background-color:#222f3e;
  color:#fff;
  padding:30px;
  display:flex;
  flex-wrap:wrap;
}

.premieres-presentations .gauche{
  width:90%;
  margin-right:50px;
  text-align:justify;
}

.premieres-presentations .droite{
  margin-top:30px;
}

.premieres-presentations .droite img{
  border-radius:20px;
  width:100%;
}

/* Evenements */

.evenements{
  background-color:#222f3e;
  color:#fff;
  padding:30px;
}

.evenements h1, .evenements p{
  text-align:center;
}

.evenements .evenements-tableau{
  justify-content:center;
  display:flex;
  overflow-x:auto;
  padding:20px;
}


/* Formations */

.formations{
  background-color:#222f3e;
  color:#fff;
  padding:30px;
}

.formations h1, .formations p{
  text-align:center;
}

.formations .formations-cartes{
  margin-top:30px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
}

.formations .formations-cartes a{
  color:#000;
} /* CSS link color (white) */
.formations .formations-cartes a:hover{
  color:#00699b;
} /* CSS link color (clubcolor) */

.formations .formations-cartes .carte{
  width:120px;
  height:130px;
  background-color:#fff;
  color:#000;
  padding:20px;
  margin-bottom:20px;
  margin-right:20px;
  border-radius:20px;
}

.formations .formations-cartes .carte img{
  height:60px;
}

.formations .texte{
  width:90%;
  margin-right:50px;
  text-align:justify;
  padding:30px;
}

.formations .texte .liste{
  text-align:justify;
  padding-left:75px;
  padding-right:75px;
}

.formations .texte p{
  text-align:left;
  text-align:justify;
}

/* Apprendre */

.apprendre{
  padding-top:30px;
  background-color:#222f3e;
  padding-bottom:30px;
  color:#fff;
}

.apprendre h1{
  text-align:center;
}

.apprendre .apprendre-tableau{
  display:flex;
  overflow-x:auto;
  padding:20px;
}

.apprendre .apprendre-tableau .apprendre-card{
  margin-right:30px;
}

.apprendre .apprendre-tableau .apprendre-card img{
  height:250px;
  border-radius:100%;
  width:250px;
}

.apprendre .apprendre-tableau .apprendre-card h4{
  text-align:center;
}

.apprendre .texte{
  width:90%;
  margin-right:50px;
  text-align:justify;
  padding:30px;
}

.apprendre .texte .liste{
  text-align:justify;
  padding-left:75px;
  padding-right:75px;
}

.apprendre .texte p{
  text-align:left;
  text-align:justify;
}

/* Progresser */

.progresser{
  padding-top:30px;
  background-color:#222f3e;
  padding-bottom:30px;
  color:#fff;
}

.progresser h1{
  text-align:center;
}

.progresser .progresser-tableau{
  display:flex;
  overflow-x:auto;
  padding:20px;
}

.progresser .progresser-tableau .progresser-card{
  margin-right:30px;
}

.progresser .progresser-tableau .progresser-card img{
  height:250px;
  border-radius:100%;
  width:250px;
}

.progresser .progresser-tableau .progresser-card h4{
  text-align:center;
}

.progresser .texte{
  width:90%;
  margin-right:50px;
  text-align:justify;
  padding:30px;
}

.progresser .texte .liste{
  text-align:justify;
  padding-left:75px;
  padding-right:75px;
}

.progresser .texte p{
  text-align:left;
  text-align:justify;
}

/* Pratiquer */

.pratiquer{
  padding-top:30px;
  background-color:#222f3e;
  padding-bottom:30px;
  color:#fff;
}

.pratiquer h1{
  text-align:center;
}

.pratiquer .pratiquer-tableau{
  display:flex;
  overflow-x:auto;
  padding:30px;
}

.pratiquer .pratiquer-tableau .pratiquer-card{
  margin-left:50px;
  margin-right:30px;
}

.pratiquer .pratiquer-tableau .pratiquer-card img{
  height:250px;
  border-radius:100%;
  width:250px;
}

.pratiquer .pratiquer-tableau .pratiquer-card h4{
  text-align:center;
  font-size:20px;
}

.pratiquer .pratiquer-tableau .pratiquer-card h3{
  text-align:center;
  font-size:18px;
}

.pratiquer .texte{
  width:90%;
  margin-right:50px;
  text-align:justify;
  padding:30px;
}

.pratiquer .texte .liste{
  text-align:justify;
  padding-left:75px;
  padding-right:75px;
}

.pratiquer .texte p{
  text-align:left;
  text-align:justify;
}

/* Formateurs */

.formateurs{
  padding-top:30px;
  background-color:#222f3e;
  padding-bottom:30px;
  color:#fff;
}

.formateurs h1{
  text-align:center;
}

.formateurs .formateurs-tableau{
  display:flex;
  overflow-x:auto;
  padding:20px;
}

.formateurs .formateurs-tableau .formateur-card{
  justify-content:center;
  margin-right:30px;
}

.formateurs .formateurs-tableau .formateur-card .more{
    /*margin:auto;
    position:absolute;
    top:50%;
    left:50%;
    
	transform:translate(-50%, -50%);
    */
	height:175px;
	width:175px;
	border-radius:100%;
    /*background:yellow;*/
	margin-left:10px;
    /*font-family:'Lato';
	font-size:24px;*/
}

.formateurs .formateurs-tableau .formateur-card h4{
  text-align:center;
  font-size:20px;
}

.formateurs .formateurs-tableau .formateur-card h3{
  text-align:center;
  font-size:18px;
}


/* Sorties */

.sorties{
  padding-top:30px;
  background-color:#222f3e;
  padding-bottom:30px;
  color:#fff;
}

.sorties h1{
  text-align:center;
}

.sorties .sorties-tableau{
  display:flex;
  overflow-x:auto;
  padding:20px;
}

.sorties .sorties-tableau .sortie-card{
  margin-right:30px;
}

.sorties .sorties-tableau .sortie-card img{
  height:250px;
  border-radius:100%;
  width:250px;
}

.sorties .sorties-tableau .sortie-card h4{
  text-align:center;
  font-size:24px;
}

.sorties .sorties-tableau .sortie-card h3{
  text-align:center;
  font-size:20px;
}

.sorties .sorties-tableau .sortie-card h2{
  text-align:center;
  font-size:16px;
}

/* On_Build */

section.build {
  padding-top:30px;
  background-color:#222f3e;
  padding-bottom:30px;
  color:#fff;
}

.build .info h1,
.build .info h4,
.build .facebook h4 {
  text-align: center;
}

.build .facebook {
  margin-top: 20px;
  text-align: center;
}

.build .facebook a {
  color: #ffcc00; /* jaune */
  text-decoration: none;
}

.build .facebook a:hover {
  color: #00699b; /* bleu au survol */
  border-bottom: 1px solid #ffcc00; /* souligné jaune */
}

/* Voyages */

.voyages{
  padding-top:30px;
  background-color:#222f3e;
  padding-bottom:30px;
  color:#fff;
}

.voyages h1{
  text-align:center;
}

.voyages h4{
  text-align:center;
}

.voyages .voyages-tableau{
  display:flex;
  overflow-x:auto;
  padding:20px;
}

.voyages .voyages-tableau .voyage-card{
  margin-right:30px;
}

.voyages .voyages-tableau .voyage-card img{
  height:250px;
  border-radius:100%;
  width:250px;
}

.voyages .voyages-tableau .voyage-card h4{
  text-align:center;
  font-size:24px;
}

.voyages .voyages-tableau .voyage-card h3{
  text-align:center;
  font-size:20px;
}

.voyages .voyages-tableau .voyage-card h2{
  text-align:center;
  font-size:16px;
}

.voyages .voyages-tableau .voyage-card a{
  color:#fff;
  text-decoration:none;
}

.voyages .voyages-tableau .voyage-card a:hover{
  color:#00699b;
}

/****************/
/* Pied de page */

footer {
  background-color:#18212b;
  padding:30px;
  color:#fff;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}

footer .copyright-tel{
  display:flex;
}

footer .copyright-tel a{
  color:#fff;
} /* CSS link color (white) */
footer .copyright-tel a:hover{
  color:#00699b;
} /* CSS link color (clubcolor) */

footer .social-media{
  display:flex;
}

footer .social-media a{
  color:#fff;
} /* CSS link color (white) */
footer .social-media a:hover{
  color:#00699b;
} /* CSS link color (clubcolor) */

footer .social-media p{
  margin-right:15px;
  border:1px solid #fff;
  border-radius:100%;
  padding:5px;
  text-align:center;
  width:20px;
  cursor:pointer;
}

@media screen and (max-width:810px){

header .bandeau .gauche{
  display:block;
  margin-left:auto;
  margin-right:auto;
}
header .bandeau .droite{
  width:100%;
  margin-right:10px;
}

.premieres-presentations .gauche{
    width:100%;
    margin-right:10px;
  }
.premieres-presentations .droite{
    display:block;
    margin-left:auto;
    margin-right:auto;
  }
}