@charset "UTF-8";
/* CSS Document */
@font-face {
  font-family: 'ceraproregular';
  src: url('../font/Cera-Pro/cerapro-regular.woff2') format('woff2'), url('../font/Cera-Pro/cerapro-regular.woff') format('woff'), url('../font/Cera-Pro/cerapro-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'ceraprobold';
  src: url('../font/Cera-Pro/cerapro-bold.woff2') format('woff2'), url('../font/Cera-Pro/cerapro-bold.woff') format('woff'), url('../font/Cera-Pro/cerapro-bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'ceraprolight';
  src: url('../font/Cera-Pro/cerapro-light.woff2') format('woff2'), url('../font/Cera-Pro/cerapro-light.woff') format('woff'), url('../font/Cera-Pro/cerapro-light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'cerastencilregular';
  src: url('../font/Cera-Stencil/Cera-Stencil.woff2') format('woff2'), url('../font/Cera-Pro/Cera-Stencil.woff') format('woff'), url('../font/Cera-ProCera-Stencil.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'cerastencilbold';
  src: url('../font/Cera-Stencil/Cera-Stencil-Bold.woff2') format('woff2'), url('../font/Cera-Pro/Cera-Stencil-Bold.woff') format('woff'), url('../font/Cera-Pro/Cera-Stencil-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'cerastencillight';
  src: url('../font/Cera-Stencil/Cera-Stencil-light.woff2') format('woff2'), url('../font/Cera-Pro/Cera-Stencil-light.woff') format('woff'), url('../font/Cera-Pro/Cera-Stencil-light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
		
}
/* Réduire la taille du logo */
.logo-small {
  max-width: 200px; /* Ajuste la taille ici */
  height: auto;
}
#profile .fondbleu, #profile .fondrouge {
    padding: 15px;
    min-height: 300px; /* Hauteur minimale pour que les cartes soient bien proportionnées */
    display: block; /* Suppression de flex pour éviter des comportements inattendus */
    border-radius: 10px; /* Coins arrondis */
}

#profile .card-body {
    padding: 15px;
    overflow: hidden; /* Empêche le débordement de texte ou d'images */
}

#profile .bleu, #profile .rouge {
    padding: 20px 10px;
    word-wrap: break-word; /* Empêche le texte long de dépasser */
    font-size: 20px;
}

#profile .fa-3x {
    font-size: 3em;
    line-height: 1; /* S'assure que la hauteur de ligne ne cause pas de débordement */
}

#profile img {
    max-width: 100%;
    height: auto; /* Ajustement de la taille des images */
}


.card-title {font-size:1.6rem}

.tab-pane .fa-3x {
    font-size: 2em; /* Fixer la taille des icônes */
    line-height: 1; /* Assurer que la ligne ne change pas la hauteur */
    width: 100%; /* S'assurer qu'ils occupent bien leur espace sans déborder */
}

.navbar {
  z-index: 1030; /* S'assurer que la navbar reste par-dessus tout le contenu */
}

/* Facultatif : réduire l'espacement de votre contenu pour qu'il ne soit pas masqué par la navbar */
body {
  padding-top: 80px; /* Ajustez cette valeur selon la hauteur de votre navbar */
}   
.card2{font-size: 1.1rem}


.navbar-nav {
    margin-left: auto;
}

.nav-link {
    text-align: right;
}

.offset-anchor {
    display: block;
    position: relative;
    top: -250px; /* La même hauteur que le header */
    visibility: hidden;
}



.t25{font-size: 25px}

.coins{border-radius: 25px;}

     /* Style pour la liste */
        ul.custom-bullet {
            list-style: none; /* Supprimer les puces par défaut */
            padding: 0;
        }

        ul.custom-bullet li {
            position: relative;
            padding-left: 1.5em; /* Espace pour la puce */
            font-family: 'ceraproregular'; /* Police pour le texte */
        }

        ul.custom-bullet li::before {
            content: 'o'; /* Utiliser la lettre "o" comme puce */
            font-family: 'cerastencilbold'; /* Police Tata pour la puce */
            position: absolute;
            left: 0;
            top: 0;
            color: #ff8e80; /* Optionnel : pour hériter de la couleur du texte */
        }

 .card {
            height: 100%;
        }


        .card-body {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

.titrebold{  font-family: 'cerastencilbold';}

  .nav-tabs, .nav-tabs .nav-link {
            border: none;
            border-bottom: 2px solid transparent;
            color: #000; /* Default text color */
        }
    .nav-tabs .nav-link#home-tab.active {
            border-bottom: 8px solid #0050FF; /* Color for the first tab */
            font-weight: bold;
            color: #0050FF; /* Active text color for the first tab */
        }
        .nav-tabs .nav-link#profile-tab.active {
            border-bottom: 8px solid #45e6cb; /* Color for the second tab */
            font-weight: bold;
            color: #45e6cb; /* Active text color for the second tab */
        }

    .nav-tabs .nav-link#home-tab {
  
            font-weight: bold;
            color: #0050FF; /* Active text color for the first tab */
        }
        .nav-tabs .nav-link#profile-tab {
      
            font-weight: bold;
            color: #45e6cb; /* Active text color for the second tab */
        }
h1{ font-family: 'cerastencilbold'!important; color:#0050FF;}
h2{  font-family: 'cerastencilbold'!important; color:#0050FF;}
h3{  font-family: 'ceraprobold'!important; color:#ff8e80;}
h4{  font-family: 'ceraprobold'!important; color:#45e6cb;}
.soustitre{  font-family: 'cerastencillight'!important;  font-size: 1.5rem}

.note{ font-family: 'ceraprobold'!important;color:#0050FF;}
    .centered-header {
            width: 100%;
            text-align: center;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }


.blanc{
	color:#fff;
}
.bleu{
	color:#0050FF;
}
.rouge{
	color:#ff8e80;
}
.vert{
	color:#45e6cb;
}
.fondGris{
	background-color:#ccc;
}

.fondbleu{
	background-color:#0050FF;
}
.fondrouge{
	background-color:#ff8e80;
}
.fondvert{
	background-color:#45e6cb;
}
.fondblanc{
	background-color:#fff;
}
   
body {
  font-family: 'ceraproregular', serif;
	color: #000;
  padding-top: 140px; /* Hauteur de la navbar */
	font-size: 1.3rem
	
}
header {
  background-size: cover;
  color: white;
  text-align: center;
  padding: 50px 0;
}
section {
  padding: 50px 0;
}


.btnRouge{color:#fff;
background-color: #ff8e80;
border-radius: 25px;
border:solid 2px #ff8e80;
 font-family: 'cerastencilbold'!important;
padding:10px 15px 10px 15px}

.btnRouge:hover{color:#ff8e80;
background-color: #fff;
	border:solid 2px #ff8e80;
border-radius: 25px;
}
	
	
	.btnBleu{color:#fff;
background-color: #0050FF;
border-radius: 25px;
border:solid 2px #0050FF;
 font-family: 'cerastencilbold'!important;
padding:10px 15px 10px 15px}

.btnBleu:hover{
background-color: #fff;
	border:solid 2px #0050FF;
border-radius: 25px;color: #0050FF;}
	
	
	
	
	.btnVert{color:#fff;
background-color: #45e6cb;
border-radius: 25px;
border:solid 2px #45e6cb;
 font-family: 'cerastencilbold'!important;
padding:10px 15px 10px 15px}

.btnVert:hover{
background-color: #fff;
	border:solid 2px #45e6cb;
border-radius: 25px;color: #45e6cb;
	
	

 font-family: 'cerastencilbold'!important;
padding:10px 15px 10px 15px}


	
		.btnGris{color:#0050FF;
background-color: #f8f9fa;
border-radius: 25px;
border:solid 2px #f8f9fa;
 font-family: 'cerastencilbold'!important;
padding:10px 15px 10px 15px}

.btnGris:hover{color:#f8f9fa;
background-color: transparent;
	border:solid 2px #f8f9fa;
	border-radius: 25px;}

   .carousel-control-prev-icon,
    .carousel-control-next-icon {
      width: 3rem;
      height: 3rem;
    }
.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: none;
}

.carousel-control-prev-icon i,
.carousel-control-next-icon i {
  font-size: 30px;
  color: blue; /* Changez la couleur ici si besoin */
}
   
 .carousel-item {
      padding:40px;
    }
/* Extra small (xs) - aucun media query nécessaire */
	h1{font-size:20px!important}
/* Small (sm) */
@media (min-width: 576px) {
	.soustitre{  font-family: 'cerastencillight'!important;  font-size: 1.4rem}
    /* Ajoutez vos styles ici pour les écrans ≥ 576px */
	h1{font-size:28px!important}
	 .card2 {
   height: inherit;
	 margin-bottom: 40px
        }
	 .carousel-item {
      padding:30px;
    }
	.t25{font-size: 20px}
	
	body{font-size:1.4rem}
	.logo-small {
  max-width: 250px; /* Ajuste la taille ici */
  height: auto;
}

}

/* Medium (md) */
@media (min-width: 768px) {
    /* Ajoutez vos styles ici pour les écrans ≥ 768px */
	h1{font-size:28px!important}
		 .card2 {
 height: inherit;
	 margin-bottom: 40px
        }
	 .carousel-item {
      padding:30px;
    }
		.t25{font-size: 20px}
		body{font-size: 1.3rem}
	.logo-small {
  max-width: 250px; /* Ajuste la taille ici */
  height: auto;
}

}

/* Large (lg) */
@media (min-width: 992px) {
    /* Ajoutez vos styles ici pour les écrans ≥ 992px */
		h1{font-size:37px!important}
	 .card2 {
            height: 500px;
	 margin-bottom: 30px
        }
	 .carousel-item {
      padding:100px;
    }
		.t25{font-size: 25px}
		body{font-size: 1.4rem}
	.logo-small {
  max-width: 350px; /* Ajuste la taille ici */
  height: auto;
}
	h1{font-size: 27px!important}

}

/* Extra large (xl) */
@media (min-width: 1200px) {
	 .card2 {
            height: 240px;
	 margin-bottom: 30px
        }
	 .carousel-item {
      padding:100px;
    }
    /* Ajoutez vos styles ici pour les écrans ≥ 1200px */
		.t25{font-size: 25px}
		body{font-size: 1.4rem}
	h1{font-size: 37px!important}
}

/* Extra extra large (xxl) */
@media (min-width: 1400px) {
	 .card2 {
            height: 240px;
	 margin-bottom: 30px
        }
	 .carousel-item {
      padding:100px;
    }
    /* Ajoutez vos styles ici pour les écrans ≥ 1400px */
		.t25{font-size: 25px}
		body{font-size: 1.4rem}
}

/* Media queries pour les plages de tailles */

/* Entre sm et md */
@media (min-width: 576px) and (max-width: 767.98px) {
	 .card2 {
            height: 240px;
	 margin-bottom: 30px
        }
	 .carousel-item {
      padding:100px;
    }
    /* Ajoutez vos styles ici pour les écrans entre 576px et 767.98px */
		.t25{font-size: 20px}
		body{font-size: 1.4rem}
}

/* Entre md et lg */
@media (min-width: 768px) and (max-width: 991.98px) {
	 .card2 {
            height: 500px;
	 margin-bottom: 30px
        }
	 .carousel-item {
      padding:50px;
    }
    /* Ajoutez vos styles ici pour les écrans entre 768px et 991.98px */
		.t25{font-size: 20px}
		body{font-size: 1.4rem}
}

/* Entre lg et xl */
@media (min-width: 992px) and (max-width: 1199.98px) {
	 .card2 {
            height: 450px;
	 margin-bottom: 30px
        }
	 .carousel-item {
      padding:100px;
    }
    /* Ajoutez vos styles ici pour les écrans entre 992px et 1199.98px */
		.t25{font-size: 25px}
		body{font-size: 1.4rem}
}

/* Entre xl et xxl */
@media (min-width: 1200px)  {
	body {

  padding-top: 200px; /* Hauteur de la navbar */
}
 .card2 {
            height: 250px;
	 margin-bottom: 30px
        }
	 .carousel-item {
      padding:100px;
    }
		.t25{font-size: 25px}
		body{font-size: 1.4rem}
    /* Ajoutez vos styles ici pour les écrans entre 1200px et 1399.98px */
}

.borderVert {
	border : 1px solid #ff8e80!important;
	border-radius: 25px;
	padding: 30px;
		color:#ff8e80!important;
}