@charset "UTF-8";

/*FONT version du 31/10-2024*/
@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Light.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Regular.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --page-margin: 42px;
    --mobile-margin: 15px;
}
body {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    background: #000;
    min-height: 75rem;
    padding-top: calc(var(--header-height) + var(--banner-height));
    color: #fff;
    font-size: 1.2rem;
    line-height: 2rem;
    margin-left: var(--page-margin);
    margin-right: var(--page-margin);
}

.container, 
.container-fluid {
    padding-left: 42px;
    padding-right: 42px;
}
.article-container {
  max-width: 768px;
  margin: 0 auto; /* centre le contenu horizontalement */
}
.article-container strong {
  color: #00FFBB;
}
.article-container li {
  margin-bottom: 2rem;
}

.header-background .container {
    padding-left: var(--page-margin);
    padding-right: var(--page-margin);
}
.header-background {
    margin-left: calc(-1 * var(--page-margin));
    margin-right: calc(-1 * var(--page-margin));
    background-image: url('../images/andrew-kliatskyi-B_Z9jqassqE-unsplash-1.jpg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding-bottom: 50px;
    color: white;
    padding-top: 60px;
    width: calc(100% + (2 * var(--page-margin)));
}

.row
{
    margin-right: 0;
	margin-top: 6rem;
}

.custom-gutter {
  --bs-gutter-x: 10rem; /* Vous pouvez ajuster cette valeur pour obtenir la largeur souhaitée */
}
.custom-margin {
  margin-top: 4rem; /* Ajustez cette valeur pour obtenir l'espace désiré */
}
.custom-titre-header {
  margin-top: 14rem; /* Ajustez cette valeur pour obtenir l'espace désiré */
  margin-bottom: 6rem; /* Ajustez cette valeur pour obtenir l'espace désiré */
}
.col-md-4 p {
    font-size: 1.4rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.col-12 .mb-5 p {
    line-height: 1.1; /* Réduction de l'interlignage */
    margin-bottom: 0;
}
.col-12 .mb-5 p br {
    line-height: 1;
    margin: 0;
    padding: 0;
}
.col-12 .fs-1 {
    line-height: 1.1; /* Interlignage réduit */
    margin-bottom: 0.5rem;
}

/* Pour une meilleure cohérence visuelle */
.col-12 h2.blue {
    margin-bottom: 1rem;
}
/* Style pour supprimer les espaces */
.mb-0 {
    margin-bottom: 0;
}

.mt-0 {
    margin-top: 0;
}

/* Ajustement de l'interlignage */
.fs-1 {
    line-height: 1.1;
}
hr {
    border: none;
    height: 1px !important;
    background-color: #fff;
    margin: 2rem 0;
    opacity: 1;
    background: #fff;
    display: block;
}
/*image*/

.responsive-image {
    width: 100%;
    height: auto;
}

/*COLORS*/


.blue
{
    color: #00FFBB;
}

.fs-1 {
    font-size: 2em; /* Ajuste la taille de la police si nécessaire */
}

.small {
    font-size: 0.875em; /* Ajuste la taille de la police pour le texte de recherche */
}

/*TEXTS SIZES*/

h1 {
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
}

    h1.display-1 {
      font-family: 'Manrope', sans-serif;
      font-weight: 700;
}

h2 {
    color: #00FFBB;
    font-weight: 700;
    font-size: 2.383rem;
    line-height: 2.383rem;
    font-weight: normal;
}

/* Style des titres */
h3 {
    margin-top: 3rem;
    font-weight: 700; /* Gras */
    white-space: normal; /* Permet le retour à la ligne */
    word-wrap: break-word; /* Pour les mots très longs */
}
/* Style global pour tous les liens */
a {
    color: #00febb; /
    font-size: inherit; /* Hérite de la taille de police du parent */
}
a:hover {
    color: #007bff; /* Change la couleur au survol (bleu Bootstrap par exemple) */
}
a:visited {
    color: #6c757d; /* Couleur grise pour les liens déjà visités */
}
a:active {
    color: #0056b3; /* Couleur plus foncée lors du clic */
}
p {
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 2.4rem;
    margin-bottom: 0; /* Supprime les marges par défaut si nécessaire */
}

.title {
    font-weight: bold;
    margin: 20px 0;
}
.subtitle {
    font-weight: bold;
	margin-bottom: 2rem;
      }
.text-center {
    text-align: center;
    margin: 0 auto;
}

.grass {
    font-weight: 700; /* Gras */
}


/* BARRE DE NAVIGATION */
.navbar-nav .nav-item {
    margin-right: 20px; /* Ajoute de l'espace entre les liens */
}

.navbar-nav .nav-link {
    color: #ffffff !important; /* Change la couleur des liens en blanc */
    border: none !important; /* Supprime les bordures par défaut */
    box-shadow: none !important; /* Supprime les ombrages par défaut */
    font-weight: 600; /* Définit le poids de la police à 400 */
    font-size: 1.2rem; /* Augmente la taille de la police */
}

.navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus {
    color: #ffffff !important; /* Assure que la couleur reste blanche au survol et au focus */
    text-decoration: none !important; /* Supprime la décoration de texte par défaut */
}

.navbar-toggler {
    border: none !important; /* Supprime les bordures du bouton de la navbar */
    box-shadow: none !important; /* Supprime les ombrages du bouton de la navbar */
    border-color: rgba(255,255,255,.5); /* Ajoute une bordure légère */
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 0.25rem;
    transition: box-shadow .15s ease-in-out;
}

.navbar-toggler:hover, .navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(255,255,255,.25);
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/* Style pour les liens inactifs dans la navbar */
.navbar .text-gray {
    color: #808080 !important; /* Définit la couleur des liens inactifs en gris */
}
/* Style de base pour l'accordéon */
.accordion-item {
    border: none;
    padding: 1rem 0;
    margin-left: calc(-1 * var(--page-margin));
    margin-right: calc(-1 * var(--page-margin));
    border-top: 1px solid #fff !important;
    border-bottom: 1px solid #fff !important;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
/* Style du contenu de l'accordéon */
.accordion-button,
.accordion-body {
    padding-left: var(--page-margin);
    padding-right: var(--page-margin);
}

/* Style des bordures */
.border-top,
.border-bottom {
    border-color: #fff;
    margin-left: calc(-1 * var(--page-margin));
    margin-right: calc(-1 * var(--page-margin));
    padding-left: var(--page-margin);
    padding-right: var(--page-margin);
}

<!-- BANDEAU DEFILANT -->
.bandeau-container {
    width: 100%;
    overflow: hidden;
    background-color: #000;
    color: #fff;
    padding: 10px 0;
    position: relative;
}

.bandeau {
    display: inline-block;
    white-space: nowrap;
    animation: defilement 10s linear infinite;
    font-size: 2rem; /* Taille de la police */
}

@keyframes defilement {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.logo-facebook path {
  color: #fff;
}

/* Style du blog */
.bg-black {
  background-color: #000 !important;
}

.card {
  border: none;
  background-color: transparent !important;
}

.ratio-1x1 {
  aspect-ratio: 1/1;
  object-fit: cover;
}

.card-body {
  padding-top: 1rem !important;
}

.card-header-content {
  min-height: 200px; /* Ajustez selon vos besoins */
  display: flex;
  flex-direction: column;
}
.card-date {
  font-size: 1.2rem;
  font-weight: 600;
}

.card-title {
  font-size: 1.7rem;
  font-weight: 700;
}

.card-amorce {
  margin-top: 0 !important;
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 400;
}

.btn-link {
  display: inline-block;
  color: #00febb !important;
  padding: 0;
  font-size: 1.2rem;
}

.btn-link:hover {
  color: #ccc !important;
}

.btn-vert {
    background: #000;
    color: #00FFBB;
    font-size: 21.2px;
    margin-bottom: 20px;
    border: 1px solid #00FFBB;
    border-radius: 50px;
    padding: 30px 30px; /* Ajoute du padding pour rendre le bouton plus agréable visuellement */
    display: inline-block; /* Assure que le bouton prenne seulement la largeur de son contenu */
    white-space: nowrap; /* Empêche le texte de se casser sur plusieurs lignes */
}
.btn-vert:hover {
    background-color: #00FFBB;
    color: #000;
    border: 2px solid #00FFBB;
}

textarea#commentaire {
  line-height: 1.5; /* Hauteur de chaque ligne */
  font-size: 16px; /* Taille de la police */
  height: calc(1.5em * 5); /* Hauteur totale pour 5 lignes */
  resize: none; /* Désactive le redimensionnement manuel */
}

/* Style responsive de l'image */
.ratio-1x1 {
  aspect-ratio: 1/1;
  object-fit: cover;
}

<!-- Blog -->
.article-content {
  /* Style général */
  font-size: 1.1rem;
  line-height: 1.2;
  color: #fff;
}

.article-content h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: 1.8rem;
}

.article-content h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.8rem;
  font-size: 1.5rem;
}

.article-content p {
  margin-bottom: 1.5rem;
}

.article-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 1.5rem 0;
}

.article-content blockquote {
  border-left: 4px solid #666;
  padding-left: 1rem;
  margin: 1.5rem 0;
  font-style: italic;
}

.article-content ul, 
.article-content ol {
  margin-bottom: 1.5rem;
  padding-left: 1.2rem;
}

.article-content li {
  margin-bottom: 0.5rem;
}

.bg-image{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


.clickable-link {
  text-decoration: underline; /* Supprime le soulignement par défaut des liens */
    cursor: pointer;
}

.clickable-area {
  cursor: pointer; /* Changement du curseur pour indiquer une zone cliquable */
}

.clickable-area:hover .link-text,
.clickable-area:focus .link-text {
  color: #00FFBB; /* Changement de la couleur du texte au survol */
  text-decoration: none; /* Supprime le soulignement au survol */
}

.link-text {
  font-size: 1.2rem; /* Taille de police légèrement plus grande */
  color: #fff; /* Couleur de police contrastante */
}

.link-text-courant {
  color: #00FFBB; /* Couleur de police */
  text-decoration: underline; /* Supprime le soulignement par défaut des liens */
   cursor: pointer;
}

.links-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.previous-link,
.next-link {
    width: 50%; /* Chaque colonne occupe 50% */
}
.previous-link {
    text-align: right;
}

.next-link {
    text-align: left;
}

.btn-blue {
  color: #fff;
  background-color: #5fa6e5;
  border-color: #5fa6e5;
}

.btn-blue:hover {
  color: #fff;
  background-color: #5fa6e5;
  border-color: #5fa6e5;
}

/*LIST STYLE*/

ul
{
    margin-top: 2rem;
    padding-left: 0;
}

li
{
    list-style: none;
    border-top: none;
    color: #fff;
}
.wavy-dash {
    color: #003333; /* Exemple de couleur */
	margin-left : 3rem;
	margin-right : 3rem;
}

/*FORM*/

.form-control {
    display: block;
    width: 100%;
    height: 2.125rem; /* 34px / 16px */
    padding: 0.375rem 0.75rem; /* 6px 12px / 16px */
    font-size: 0.875rem; /* 14px / 16px */
    font-weight: bold;
    line-height: 1.42857143;
    color: #fff;
    background-color: #000000;
    background-image: none;
    border: 0.5px solid #fff; /* Assurez-vous d'utiliser un point pour les valeurs en px, pas de virgule */
    transition: none;
    border-radius: 0; /* Enlever les coins arrondis */
}

.form-control:focus {
    background-color: #000;
    border-color: #00FFBB;
    color: #fff;
    box-shadow: none;
}
select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem;
}

select.form-control::-ms-expand {
    display: none;
}
.form-select {
    background-color: #000;
    border: 1px solid #fff;
    color: #fff;
    font-size: 1.2rem;
}

.form-select:focus {
    background-color: #000;
    border-color: #00FFBB;
    color: #fff;
    box-shadow: none;
}

.form-label {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.form-control::placeholder {
    color: #808080;
    opacity: 1; /* Firefox */
}

/* Pour les anciens navigateurs WebKit */
.form-control::-webkit-input-placeholder {
    color: #808080;
}

/* Pour Firefox 18- */
.form-control:-moz-placeholder {
    color: #808080;
    opacity: 1;
}

/* Pour Firefox 19+ */
.form-control::-moz-placeholder {
    color: #808080;
    opacity: 1;
}

/* Pour IE 10+ */
.form-control:-ms-input-placeholder {
    color: #808080;
}

/* Pour Edge */
.form-control::-ms-input-placeholder {
    color: #808080;
}
/* Style de base pour les icônes Bootstrap */
.bi {
    font-size: 1.3rem;
    color: #fff;
}

/* Style spécifique pour l'icône WhatsApp */
.bi-whatsapp {
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
}

/* Variantes de taille */
.bi-lg {
    font-size: 3rem;
}

.bi-xl {
    font-size: 4rem;
}

header .container {
    margin-top: 0.625rem; /* 10px / 16px */
    padding-bottom: 1.5625rem; /* 25px / 16px */
}

header a:link, header a:hover {
    text-decoration: underline;
    font-size: 1.046rem; /* 16.73px / 16px */
}

header a:hover {
    text-decoration: none;
    color: #ccc;
}


.content {
    border-bottom: 1px solid #fff;
    padding-bottom: 2.1875rem; /* 35px / 16px */
    margin-bottom: 1.25rem; /* 20px / 16px */
    margin-left: 0.625rem;
}

.footer {
    margin: 0;
    padding: 2rem 0;
}

.footer-links li {
    margin-bottom: 0.2rem; /* Réduction de l'interlignage */
    line-height: 1.2; /* Réduction de la hauteur de ligne */
}

.footer-links a {
    font-weight: 700;
    color: #fff;
    text-decoration-line: underline;
    text-decoration-thickness: 0.5px; /* Épaisseur plus fine du soulignement */
    text-underline-offset: 6px;
    font-size: 1.6rem;
    line-height: 1.2;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #00FFBB;
}

.image_plus{
    margin-top: 30px;
    max-width: 20%;
	}

/* Media queries spécifiques aux mobiles */

@media screen and (min-width: 20em) { /* 320px / 16px = 20em */
    .capture, .recherche, .tiret {
        display: none;
    }
    .capture, .recherche, .tiret {
        display: none;
    }
}

@media screen and (min-width: 36em) { /* 576px / 16px = 36em */
    .vbottom {
        float: none;
        display: table-cell;
        vertical-align: bottom;
    }
    .bandeau {
        font-size: 2rem; /* Taille de la police pour les écrans plus petite que 576px */
    }
}

@media screen and (max-width: 768px) {
    body {
        margin-left: var(--mobile-margin);
        margin-right: var(--mobile-margin);
    }
    .container,
    .container-fluid {
        padding-left: var(--mobile-margin);
        padding-right: var(--mobile-margin);
    }
    .header-background {
        margin-left: calc(-1 * var(--mobile-margin));
        margin-right: calc(-1 * var(--mobile-margin));
        width: calc(100% + (2 * var(--mobile-margin)));
    }
	.display-1 {
        font-size: calc(2rem + 3vw);
        line-height: 1.2;
    }
    .col-md-4 {
        margin-bottom: 3rem;
    }
 	.capture {
        display: block;
    }
    .recherche, .tiret {
        display: inline;
    }
    .bandeau {
        font-size: 2rem; /* Taille de la police pour les écrans plus petit que 768px */
    }
    .accordion-item {
        margin-left: calc(-1 * var(--mobile-margin));
        margin-right: calc(-1 * var(--mobile-margin));
        padding-left: var(--mobile-margin);
        padding-right: var(--mobile-margin);
    }
    .accordion-button,
    .accordion-body,
    .border-top,
    .border-bottom {
        padding-left: 20px;
        padding-right: 20px;
    }
    .full-width-image {
        margin-left: -20px;
        margin-right: -20px;
        width: calc(100% + 40px);
    }
    .footer-menu {
        padding: 1rem 0;
    }    
    .footer-links {
        padding: 0.5rem 0;
    }
    
    .footer-links li {
        margin-bottom: 0.3rem;
    }
    .col-12 {
        margin-bottom: 2rem;
    }
    .table {
        font-size: 0.875rem;
    }
    
    .table td, 
    .table th {
        padding: 0.5rem;
    }
    
    .btn-sm {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    .links-container {
        flex-direction: column;
        align-items: center;
    }
}

@media screen and (min-width: 64em) { /* 1024px / 16px = 64em */
    /* La règle .vbottom est déjà définie à 36em, pas besoin de la répéter ici */
}

@media screen and (min-width: 75em) { /* 1200px / 16px = 75em */
    .bandeau {
        font-size: 2rem; /* Taille de la police pour les écrans plus petite 1200px */
    }
}