body {
    margin: 0;
    background-color: #f2f2f2;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    width: 90%;
    max-width: 1200px;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 0px; /*coins arrondis*/
    margin: 0 auto;
	margin-top: 20px;
    flex-grow: 1; /* This allows the container to grow and take up space between header and footer */
}

.container .label {
    font-weight: bold;
}
h2 {
    text-align: left;
    margin-bottom: 20px;
}

h3 {
    text-align: left;
	margin-left: 5%;
    margin-bottom: 14px;
}

p {
    text-align: justify;
    margin-bottom: 14px;
	margin-left: 5%;
	margin-right: 5%;
}

.prez {
    text-align: justify;
    margin-bottom: 14px;
	margin-left: 1%;
	margin-right: 5%;
}						
.btn-back {
	display: inline-block;
    padding: 10px 15px;
	background-color: #a9cce3;
	color: black;
	border: none;
	cursor: pointer;
	font-size: 14px;
	border-radius: 4px;
	text-decoration: none;
	text-align: center;
	float: right;
}

.btn-back:hover {
	background-color: #5499c7;
}

.suite {
    padding: 10px 15px;
    margin-top: 10px;
    margin-right: 10px;
    background-color: #a9cce3;
	font-size: 14px;
    color: black;
    border: none;
    border-radius: 4px;
    cursor: pointer;
	box-sizing: border-box;
	text-decoration: none;
}

.suite:hover {
	background-color: #5499c7;
}

/* ====== GESTION DES LOGO DE PARTENAIRES */

.partner img {
	margin-left: 5%;
}


/* ====== GESTION DU TABLEAU DES CREDITS */

.credits {
    border-collapse: collapse;
}

.credit td, th {
    padding: 10px;
    border-bottom: 1px solid #FFFFFF;
}

.credits img {
	max-width: 75px;
	max-height: 75px;
}

/* ======= GESTION DES CARDS */

.card-container {
    display: flex;
	box-sizing: border-box;
	flex-direction: row;  /*aligné en ligne sur les grands écrans */
    justify-content: space-between;
	margin: 0 auto;
	gap: 4%;
}

.card-container2 {
    width: 60%;
	display: flex;
	flex-direction:row; /* aligné en ligne sur les grands écrans */
    justify-content: space-between;
	margin: 0 auto;
	gap: 20%;
}

.card,
.card-Acc {
	flex: 1 1 calc(22% - 4%) !important;
	box-sizing: border-box;  /* Inclut padding et border dans la largeur */
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    text-align: left;
    background-color: white;
}

.card img,
.card-Acc img {
    width: 100%;
    height: auto;
}

.card h3 {
	background-color: #f2f2f2;
    margin: 0;
    padding: 10px;
}

.card-Acc h3 {
	background-color: #f2f2f2;
	color:#000;
    margin: 0;
    padding: 10px;
	text-align: center;
	text-decoration: none;
}
.card a,
.card-Acc a {
	text-decoration: none;
}

.card p {
    padding: 10px;
}

.card-Acc p {
    padding: 10px;
	text-align: center;
}

/* ============== GESTIONDES CARDS DE DECOUVRIR */

.card-container-dec {
    display: flex;
	flex-wrap: wrap;
	width: 100%;
	box-sizing: border-box;
    justify-content: space-between;
	margin: 0 auto;
	gap: 10px;
}

.row-dec {
    display: flex;
    width: 100%;
}

.row-dec:first-child {
    justify-content: space-between; /* Répartit les cartes avec des espaces égaux */
}

.row-dec:last-child {
    justify-content: space-around; /* Centre les cartes sous les espaces des cartes du haut */
    margin-top: 20px;
}


.card-dec {
    width: 30%; /* 1/3 de la largeur, en laissant un peu d'espace */
	padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    text-align: left;
    background-color: white;
	box-sizing: border-box; /* Inclut padding et border dans la largeur */
}

.card-dec img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Comprime l'image pour qu'elle s'adapte à la taille du conteneur */
}


/* ====== GESTION RESPONSIVE DES PETITS ECRANS */

@media (max-width: 768px) {
    .card-container {
        flex-direction: column; /* Affiche les cartes en colonne pour les petits écrans */
		gap: 0;
    }

    .card {
        flex: 1 1 100%; /* Les cartes prennent toute la largeur */
		margin: 20px;  /* Espace en bas de chaque card */
    }
}

/* ========== GESTION DU PREMIER ACCORDEON

/* Définit la largeur de l'accordéon. Définit la marge à 90px en haut et en bas et auto à gauche et à droite */
.accordion {
  width: 100%;
  color: black;
  background-color: white;
}

.accordion .bloc {
  position: relative;
  margin: 10px 10px;
}

/* Positionne les étiquettes par rapport au .bloc. Ajoute une marge intérieure en haut et en bas et augmente la taille de la police. Fait également de son curseur un pointeur */
.accordion .label {
  position: relative;
  padding: 10px 0;
  font-size: 20px;
  color: black;
  cursor: pointer;
}

/* Positionne le signe plus à 5px de la droite. Centrez-le en utilisant la propriété transform. */
.accordion .label::before {
  content: '+';
  color: black;
  position: absolute;
  top: 50%;
  right: -5px;
  font-size: 40px;
  transform: translateY(-50%);
}

/* Masque le contenu (height : 0), diminue la taille de la police, justifie le texte et ajoute une transition */
.accordion .content {
	position: relative;
  background: white;
  height: 0;
  font-size: 16px;
  text-align: left;
  width: 100%;
  overflow: hidden;
  transition: 0.3s;
}

/* Définit la largeur, la marge gauche et la bordure de la ligne horizontale entre les contenus */
.accordion hr {
  width: 100;
  margin-left: 0;
  border: 1px solid grey;
}

/* Désactive la partie contenu lorsqu'elle est active. Définit la hauteur */
.accordion .bloc.active .content {
  height: 100%;
}

/* Passe du signe plus au signe négatif une fois activé */
.accordion .bloc.active .label::before {
  content: '-';
  font-size: 40px;
}


/* ====== GESTION DE l'ACCORDEON SECONDAIRE  */

/* Définit la largeur de l'accordéon. Définit la marge à 90px en haut et en bas et auto à gauche et à droite */
.accordion2 {
  width: 100%;
  color: black;
  background-color: white;
}

.accordion2 .bloc2 {
  position: relative;
  margin: 10px 10px;
}

/* Positionne les étiquettes par rapport au .bloc2. Ajoute une marge intérieure en haut et en bas et augmente la taille de la police. Fait également de son curseur un pointeur */
.accordion2 .label2 {
  position: relative;
  padding: 10px 0;
  font-size: 20px;
  color: black;
  cursor: pointer;
}

/* Positionne le signe plus à 10px de la droite. Centrez-le en utilisant la propriété transform. */
.accordion2 .label2::before {
  content: '+';
  color: black;
  position: absolute;
  top: 50%;
  right: -10px;
  font-size: 40px;
  transform: translateY(-50%);
}

/* Masque le contenu (height : 0), diminue la taille de la police, justifie le texte et ajoute une transition */
.accordion2 .content2 {
	position: relative;
  background: white;
  height: 0;
  font-size: 16px;
  text-align: left;
  width: 100%;
  overflow: hidden;
  transition: 0.3s;
}

/* Définit la largeur, la marge gauche et la bordure de la ligne horizontale entre les contenus */
.accordion2 hr {
  width: 100;
  margin-left: 0;
  border: 1px solid grey;
}

/* Désactive la partie contenu lorsqu'elle est active. Définit la hauteur */
.accordion2 .bloc2.active .content2 {
  height: 100%;
   
}

/* Passe du signe plus au signe négatif une fois activé */
.accordion2 .bloc2.active .label2::before {
  content: '-';
  font-size: 40px;
}

/* ====== GESTION DU FORMULAIRE DE CONTACT */

form {
	display: flex;
	flex-direction: column;
}

label {
	margin-bottom: 5px;
	font-weight: bold;
	color: #333;
}

input, textarea, select {
	margin-bottom: 20px;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 3px;
	font-size: 16px;
}

input[type="submit"] {
	background-color: #a9cce3;
	color: black;
	border: none;
	cursor: pointer;
	font-size: 18px;
	border-radius: 4px;
}

input[type="submit"]:hover {
	background-color: #5499c7;
}

.success {
	color: green;
	font-weight: bold;
	text-align: center;
}

.error {
	color: red;
	font-weight: bold;
	text-align: center;
}