/******Test mise en page responsive********/

body {
	border:10px solid gray;

}
body {
	border:10px solid red;

}
/***permet de redimensionner les image à 1799px sur toutes les pages.****/
img.photo {
	max-width:1799px;
	width:100%;
}

/**************************************************************************************************************************/
/***Mise en page pour les écrans de plus 1200px de large*******************************************************************/
/**************************************************************************************************************************/
/*
	Rappel de la structure principale de l'arbre HTML
	corps
		header	
		section (caroussel) en option
		main
		aside  
		aside (en option on en retrouve différent selon les pages)
		footer
	Note : chaque élément contient un div.responsiveframe pour contrôler la largeur du
	contenu
*/



div.responsiveframe {
	width:1200px;/***Responsive desing********/
	margin:auto;
	position:relative;
	border:0px solid red;
}
/**************************************************************************************************************************/
/***Mise en page pour le header********************************************************************************************/
/**************************************************************************************************************************/
header {
	border:0px solid green;
	padding-bottom:5em;
	margin-top:0;
}

header div {
	border:0px solid maroon;
	margin-bottom:2em;
	margin-top:0;
}


header img {
	border:0px solid blue;
	margin-top:1.4em;
	float:left;
}
header h2 {
	border:0px solid red;
	margin-top:1.5em;
	margin-bottom:0em;
	margin-left:44%;
	margin-top:0;
}

header p {
    border: 0px solid white;
	text-align: center;
	margin-top:0.5em;
	margin-bottom:0em;
	margin-right:18%;
	margin-left:5%;
}

header div>a {
    border: 0px solid red;
	position:absolute;
	right:0.8em;
	top:0;
}

header nav {
	border:0px solid pink;
	padding-top:3em;
}

header nav>ul{
	border:0px solid yellow;
}
header nav>ul>li{
	border:0px solid maroon;
	margin-left:3em;
	margin-top:1em;
	float:right;
	position:relative;
}
header nav li>ul {
	display:none;
}
header nav li:hover>ul{
	border:0px solid pink;
	display:block;
	position:absolute;
	padding-top:0.5em;
	border:0px solid yellow;
	z-index:1000;
	width:100%;
}

/**************************************************************************************************************************/
/***Mise en page pour section (caroussel)**********************************************************************************/
/**************************************************************************************************************************/
section {}    

/**************************************************************************************************************************/
/***Mise en page pour main**********************************************************************************/
/**************************************************************************************************************************/

/*****************mise en page accueil**********************/
/************************************************************/
body.accueil {
  border: 0px solid yellow;
}
body.accueil main {
  border: 0px solid yellow;
}
body.accueil main div.responsiveframe{
    border: 0px solid red; /* Premier enfant - Bordure rouge */
}
body.accueil main div.responsiveframe h1{
    border: 0px solid blue; /* Deuxième enfant - Bordure bleue */
}
body.accueil main > div.responsiveframe > blockquote:nth-child(2) {
	border:0px solid green;
}


body.accueil main > div.responsiveframe > .colonne-gauche {
    border: 0px solid yellow;
    float: left;
    width: 48%; /* Largeur adaptée */
    margin-right: 2%; /* Espacement entre les colonnes */
	margin-top:3em;
}

body.accueil main > div.responsiveframe > .colonne-droite {
    border: 0px solid blue;
    float: left; /* Flotte également à gauche */
    width: 48%; /* Largeur adaptée */
	margin-top:3em;
}
body.accueil main > div.responsiveframe > .colonne-droite h2:first-child {
    border: 0px solid yellow;
	margin-top:1em;
}
body.accueil main > div.responsiveframe > .colonne-droite p:nth-child(2) {
    border: 0px solid pink;
	margin-left:2em;
	margin-right:7.5em;
	margin-top:5em;
}
body.accueil main > div.responsiveframe > .colonne-droite p:nth-child(3) {
    border: 0px solid purple;
	margin-top:5em;
	text-align:right;
}
body.accueil main > div.responsiveframe > .colonne-gauche p:first-child {
    border: 0px solid yellow;
	height:20em;
}
body.accueil main > div.responsiveframe > .colonne-gauche p:first-child img {
    border: 0px solid red; /* Modifie la couleur et la taille selon tes besoins */
	width: 100%; /* L'image prend 100% de la largeur du cadre */  
	height: 100%; /* L'image prend 100% de la hauteur du cadre */ 
	object-fit: cover; /* Assure que l'image couvre tout le cadre sans être déformée */
	box-sizing: border-box; /* Inclut les bordures et le padding dans les dimensions */ 
}
body.accueil main > div.responsiveframe > .colonne-droite p:nth-child(4) {
    border: 0px solid yellow;
	height:20em;
}
body.accueil main > div.responsiveframe > .colonne-droite p:nth-child(4) img {
    border: 0px solid red;
	width: 100%; /* L'image prend 100% de la largeur du cadre */  
	height: 100%; /* L'image prend 100% de la hauteur du cadre */ 
	object-fit: cover; /* Assure que l'image couvre tout le cadre sans être déformée */
	box-sizing: border-box; /* Inclut les bordures et le padding dans les dimensions */ 
}
body.accueil main > div.responsiveframe > .colonne-gauche h2:nth-child(2){
    border: 0px solid purple;
}
body.accueil main > div.responsiveframe > .colonne-gauche p:nth-child(3){
    border: 0px solid cyan;
	margin-top:3.5em;
	margin-left:1em;
	margin-right:2em;
}
body.accueil main > div.responsiveframe > .colonne-gauche p:nth-child(4){
    border: 0px solid magenta;
	margin-top:5em;
	text-align:right;
}
body.accueil main > div.responsiveframe > .colonne-gauche p:nth-child(5){
    border: 0px solid maroon;
	height:20em;
}
body.accueil main > div.responsiveframe > .colonne-gauche p:nth-child(5) img{
    border: 0px solid green;
	width: 100%; /* L'image prend 100% de la largeur du cadre */  
	height: 100%; /* L'image prend 100% de la hauteur du cadre */ 
	object-fit: cover; /* Assure que l'image couvre tout le cadre sans être déformée */
	box-sizing: border-box; /* Inclut les bordures et le padding dans les dimensions */ 
}
body.accueil main > div.responsiveframe > .colonne-droite h2:nth-child(5) {
	border: 0px solid pink;
}
body.accueil main > div.responsiveframe > .colonne-droite p:nth-child(6) {
	border: 0px solid cyan;
	margin-top:5em;
	margin-left:1em;
	margin-right:3em;
}
body.accueil main > div.responsiveframe > .colonne-droite p:nth-child(7) {
	border: 0px solid red;
	margin-top:5.5em;
	text-align:right;
}
body.accueil main > div.responsiveframe > .colonne-gauche h2:nth-child(6) {
    border: 0px solid yellow;
	margin-top:3em;
}
body.accueil main > div.responsiveframe > .colonne-gauche p:nth-child(7) {
	border: 0px solid cyan;
	margin-top:6em;
	margin-left:1em;
	margin-right:3em;
}
body.accueil main > div.responsiveframe > .colonne-gauche p:nth-child(8) {
    border: 0px solid green;
	margin-top:5em;
	text-align:right;
}
body.accueil main > div.responsiveframe > .colonne-droite p:nth-child(8) {
	border: 0px solid maroon;
	height:20em;
}
body.accueil main > div.responsiveframe > .colonne-droite p:nth-child(8) img {
	 border: 0px solid green;
	width: 100%; /* L'image prend 100% de la largeur du cadre */  
	height: 100%; /* L'image prend 100% de la hauteur du cadre */ 
	object-fit: cover; /* Assure que l'image couvre tout le cadre sans être déformée */
	box-sizing: border-box; /* Inclut les bordures et le padding dans les dimensions */
}
body.accueil main > div.responsiveframe > .colonne-gauche p:nth-child(9) {
    border: 0px solid green;
	height:20em;
}
body.accueil main > div.responsiveframe > .colonne-gauche p:nth-child(9) img {
    border: 0x solid maroon;
	width: 100%; /* L'image prend 100% de la largeur du cadre */  
	height: 100%; /* L'image prend 100% de la hauteur du cadre */ 
	object-fit: cover; /* Assure que l'image couvre tout le cadre sans être déformée */
	box-sizing: border-box; /* Inclut les bordures et le padding dans les dimensions */
}
body.accueil main > div.responsiveframe > .colonne-droite h2:nth-child(9) {
	 border: 0px solid pink;
}
body.accueil main > div.responsiveframe > .colonne-droite p:nth-child(10){
	border: 0px solid purple;
	margin-top:5em;
	margin-left:1em;
	margin-right:3em;
	 
}
body.accueil main > div.responsiveframe > .colonne-droite p:nth-child(11){
	border: 0px solid red;
	margin-top:5em;
	text-align:right;
	 
}

/*****************mise en page le-club**********************/
/************************************************************/
body.le-club {
  border: 0px solid red;
}
body.le-club main{
  border: 0px solid blue;
}
body.le-club Main div.responsiveframe{
  border: 0px solid red;
}
body.le-club main div.responsiveframe h1{
  border: 0px solid pink;
}
body.le-club main > div.responsiveframe > blockquote:nth-child(2) {
	border:0px solid black;
}
body.le-club main > div.responsiveframe>.colonne-gauche {
	border:0px solid yellow;
	float: left; /* La colonne de gauche flotte à gauche */
    width: 46%; /* Largeur de 45% pour la colonne gauche */
    margin-right: 4%; /* Ajoute un espace de 5% entre les colonnes */ 
}
body.le-club main > div.responsiveframe>.colonne-gauche h2:first-child {
	border:0px solid maroon;
	text-align:center;
}
body.le-club main > div.responsiveframe>.colonne-gauche p:nth-child(2) {
	border:0px solid magenta;
}
body.le-club main > div.responsiveframe>.colonne-gauche p:nth-child(3) {
	border:0px solid purple;
	text-align:right;
}
body.le-club main > div.responsiveframe>.colonne-gauche img:nth-child(4) {
	border:0px solid cyan;
	text-align:center;
	margin-top:2em;	
}
body.le-club main > div.responsiveframe>.colonne-gauche h2:nth-child(5) {
	border:0px solid black;
	text-align:center;
	margin-top:1em;
}
/* body.le-club main > div.responsiveframe>.colonne-gauche ul { */
	/* border:0px solid black; */
	/* list-style: none; /* Supprimer les puces par défaut */ */
	/* padding-left: 0; /* Ajuster le padding pour l'icône */ 
/* } */

/* body.le-club main > div.responsiveframe>.colonne-gauche ul li { */
  /* position: relative; */
  /* padding-left: 30px; /* Créer de l'espace pour l'icône */
/* } */

/* body.le-club main > div.responsiveframe>.colonne-gauche ul li::before { */
  /* content: url('https://setienne.ovh/clubhtcc/images/le-club-puce-volant-20.png'); /* URL de l'icône volant */
  /* position: absolute; */
  /* left: 0; */
  /* top: 0; */
  /* width: 10px; /* Ajuster la taille de l'icône */ 
  /* height: 10px; */
/* } */


body.le-club main > div.responsiveframe>.colonne-droite {
	border:0px solid yellow;
	float: left; /* La colonne de droite flotte aussi à gauche pour se placer à côté */
    width: 46%; /* Largeur de 45% pour la colonne droite */
}
body.le-club main > div.responsiveframe>.colonne-droite img:first-child {
	border:0px solid cyan;
	text-align:center;
	margin-top:3em;
}
body.le-club main > div.responsiveframe>.colonne-droite h2:nth-child(2) {
	border:0px solid red;
	text-align:center;
}

/* Colonne de gauche */

/* Supprime les puces par défaut pour les ul de la colonne gauche */
body.le-club main > div.responsiveframe > .colonne-gauche ul {
    list-style: none !important; /* Supprime les puces par défaut */
    padding-left: 0 !important; /* Pas de padding supplémentaire sur le ul */
    margin-left: 0 !important; /* Pas de marge */
}

/* Mise en forme des éléments de liste pour la colonne gauche */
body.le-club main > div.responsiveframe > .colonne-gauche ul li {
    position: relative !important; /* Permet de bien positionner l'image */
    padding-left: 30px !important; /* Laisse de l'espace pour l'image de la puce */
    margin-bottom: 1em !important; /* Espace entre chaque élément de la liste */
    line-height: 1.5 !important; /* Hauteur de ligne confortable */
}

/* Mise en forme des images de puce dans la colonne gauche */
body.le-club main > div.responsiveframe > .colonne-gauche ul li img.puce-personnalisée {
    position: absolute !important; /* Place l'image de la puce en position absolue */
    left: 0 !important; /* Place l'image tout à gauche du li */
    top: 0.2em !important; /* Ajuste l'image pour qu'elle soit alignée avec la première ligne de texte */
    width: 20px !important; /* Largeur de l'image */
    height: 20px !important; /* Hauteur de l'image */
    flex-shrink: 0 !important; /* Empêche l'image de se redimensionner */
}

/* Colonne de droite */

/* Supprime les puces par défaut pour les ul de la colonne droite */
body.le-club main > div.responsiveframe > .colonne-droite ul {
    list-style: none; /* Supprime les puces par défaut */
    padding-left: 0; /* Pas de padding supplémentaire sur le ul */
    margin-left: 0; /* Pas de marge */
}

/* Mise en forme des éléments de liste pour la colonne droite */
body.le-club main > div.responsiveframe > .colonne-droite ul li {
    display: flex; /* Utilise Flexbox pour aligner l'image et le texte */
    align-items: flex-start; /* Aligne l'image en haut par rapport au texte */
    gap: 10px; /* Espace entre l'image et le texte */
    margin-bottom: 1em; /* Espace entre chaque élément de la liste */
}

/* Mise en forme des images de puce dans la colonne droite */
body.le-club main > div.responsiveframe > .colonne-droite ul li img.puce-personnalisée {
    width: 20px; /* Largeur de l'image */
    height: 20px; /* Hauteur de l'image */
    flex-shrink: 0; /* Empêche l'image de se redimensionner */
    margin-top: 0.2em; /* Ajuste légèrement l'image pour qu'elle soit bien alignée */
}





/*****************mise en page s'inscrire**********************/
/************************************************************/
body.s-incrire{
	border:0px solid red;
}
body.s-incrire main{
	border:0px solid black;
}
body.s-incrire main div.responsiveframe{
	border:0px solid blue;
}
body.s-incrire main div.responsiveframe h1{
	border:0px solid pink;
}
main > div > blockquote:nth-child(2) {
    border: 0px solid blue; /* Cible le deuxième enfant (blockquote) */
}
main > div > p:nth-child(3) {
    border: 0px solid green; /* Cible le troisième enfant (premier <p>) */
	float: left;
    width: 45%; /* Ajuste la largeur pour les deux colonnes */
    margin-right: 5%; /* Espace entre les deux colonnes */
	margin-left:1em;
}
main > div > p:nth-child(4) {
    border: 0px solid pink; /* Deuxième paragraphe */
	float: left;
    width: 47%; /* Ajuste la largeur pour la deuxième colonne */

}
main > div > a:nth-child(5) {
    border: 0px solid purple; /* Lien 'boutique' */
	float:left;
	clear:both;
	margin-left:2em;
	margin-right:19em;
}
main > div > a:nth-child(6) {
    border: 0px solid white; /* Lien 'annonce' */
	float:left;
	margin-bottom:2em;
}
main > div > a:nth-child(7) {
    border: 0px solid yellow; /* créer un compte' */
	float:right;
	margin-right:2em;		
}
main > div > h2:nth-child(8) {
    border: 0px solid white; 
	width:12em;                   /* Assure que le h2 occupe toute la largeur du conteneur */
	background-color: #203250;        /* Arrière-plan bleu */
	color: white;                   /* Texte en blanc pour le contraste */
	padding: 0.3em;                  /* Ajoute de l'espace autour du texte */
	text-align: center;             /* Centre le texte à l'intérieur du h2 */
	margin: 0 auto;        /* Centre l'élément horizontalement */
	margin-bottom:1.5em;
	clear:both;
}
main > div > p:nth-child(9) {
    border: 0px solid red; 
	text-align:center;
	margin-bottom:2em;
	
}
main > div > p:nth-child(10) {
    border: 0px solid brown; 
	background-image: url('https://setienne.ovh/clubhtcc/images/s-inscrire-picto-pilote-48.png'); /* Remplace par l'URL de ton picto de voiture */
    background-size: 25px 25px; /* Taille de l'image */
    background-repeat: no-repeat;
    background-position: left center; /* Positionner l'icône à gauche du texte */
    padding-left: 2em; /* Espace pour que le texte ne chevauche pas l'icône */
}
main > div > p:nth-child(11) {
    border: 0px solid purple; 
	background-image: url('https://setienne.ovh/clubhtcc/images/s-inscrire-icone-voiture.png'); /* Remplace par l'URL de ton picto de pilote */
    background-size: 25px 25px; /* Taille de l'image */
    background-repeat: no-repeat;
    background-position: left center; /* Positionner l'icône à gauche du texte */
    padding-left: 2em; /* Espace pour que le texte ne chevauche pas l'icône */
}
main > div > .rib:nth-child(12) {
    border: 2px solid #203250 ; /********* NE PAS SUPPRIMER C EST UN ENCADREMENT *********/
	text-align:center;
	margin-left:9em;
	margin-right:9em;
	margin-top:2em;
}
main > div > ul:nth-child(14) {
    border: 0px solid olive;
	float: left;
    width: 30%; /* Ajuste la largeur pour chaque élément */
    text-align: left; /* Aligner le texte à gauche */
	margin-top:5em;
	list-style: none; /* Supprime les puces par défaut */
    padding-left: 0em;
	
}
main > div > ul li a {
    background-image: url('https://setienne.ovh/clubhtcc/images/les-courses-picto_pdf.gif'); /* URL du picto PDF */
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 20px 20px; /* Ajuste la taille du pictogramme */
    padding-left: 30px; /* Ajoute un espace pour l'image */
    display: inline-block;
    vertical-align: middle;
}
	
}
main > div > img:nth-child(15) {
    border: 0px solid read;	
	float: left;
    width: 30%; /* Largeur pour l'élément du centre */
    text-align: center; /* Aligne le texte au centre */
    margin-left: 5%; /* ajoute un espace entre les éléments */
	
}
main > div > img:nth-child(16) {
    border: 0px solid lightgreen;
    float: right;
    width: 30%; /* Largeur pour l'élément à droite */
    text-align: right; /* Aligner le texte à droite */
}
main > div > h2:nth-child(17) {
    border: 0px solid indigo;
	width:12em;                 
	background-color: #203250;        /* Arrière-plan bleu */
	color: white;                   /* Texte en blanc pour le contraste */
	padding: 0.3em;                  /* Ajoute de l'espace autour du texte */
	text-align: center;             /* Centre le texte à l'intérieur du h2 */
	margin: 0 auto;        /* Centre l'élément horizontalement */
	margin-bottom:1.5em;
}

main > div > p:nth-child(18) {
    border: 0px solid crimson;
}
main > div > p:nth-child(19) {
    border: 0px solid indigo;
}
main > div > p:nth-child(20) {
    border: 0px solid pink;
}
main > div > h2:nth-child(21) {
    border: 0px solid olive;
	width:12em;                  
	background-color: #203250;        /* Arrière-plan bleu */
	color: white;                   /* Texte en blanc pour le contraste */
	padding: 0.3em;                  /* Ajoute de l'espace autour du texte */
	text-align: center;             /* Centre le texte à l'intérieur du h2 */
	margin: 0 auto;        /* Centre l'élément horizontalement */
	margin-bottom:1.5em;
}
/* Pour la colonne de gauche après le h2 'Réglementation' */
main > div > div.colonne-gauche {
	border: 0px solid red;
    float: left; /* La colonne de gauche flotte à gauche */
    width: 45%; /* Largeur de 45% pour la colonne gauche */
    margin-right: 5%; /* Ajoute un espace de 5% entre les colonnes */
   
}

/* Pour la colonne de droite après le h2 'Réglementation' */
main > div > div.colonne-droite {
	border: 0px solid blue;
    float: left; /* La colonne de droite flotte aussi à gauche pour se placer à côté */
    width: 45%; /* Largeur de 45% pour la colonne droite */
   
}
main > div > div.colonne-gauche p:nth-child(3) img {
    border: 0px solid blue;
	margin-top:5em;
}
main > div > div.colonne-gauche h3:nth-child(4) {
    border: 0px solid blue; 
	margin-top:2em;
}
main > div > div.colonne-droite p:nth-child(9) img {
    border: 0px solid red; 
    margin-top:2em;
}


/*****************mise en page 1 course**********************/
/************************************************************/
body.unecourse {
	border:0px solid red;
}
body.unecourse main {
	border:0px solid black;
}
body.unecourse main div.responsiveframe {
	border:0px solid yellow;
}
body.unecourse main div.responsiveframe h1 {
	border:0px solid blue;
	margin-bottom:0.5em;	
}
body.unecourse main div.responsiveframe>h2:nth-child(6){
	border:0px solid pink;
	text-align:center;
	
}
body.unecourse main div.responsiveframe blockquote:nth-child(3){
	border:0px solid maroon;
}
/*****************/
/*class technique*/
/*****************/

body.unecourse main div.responsiveframe div.technique {
	border:0px solid pink;
	height:20em;
}
body.unecourse main div.responsiveframe div.technique .colonne-gauche {
	border:0px solid yellow;
	float:left;
	width:41%;
	height:19em;
	margin-left:4em;
}
body.unecourse main div.responsiveframe div.technique .colonne-gauche h2 {
	border:0px solid yellow;
	margin-top:0em;
	margin-bottom:3em;
}

body.unecourse main div.responsiveframe div.technique .colonne-droite {
	border:0px solid blue;
	float:right;
	width:40%;/* Définit la largeur de chaque élément de liste pour qu'ils aient la même taille */
	height:19em;
	margin-right:6em;
}


body.unecourse main div.responsiveframe div.technique .colonne-droite img{
	border:0px solid red;
	width: 100%; /* L'image prend 100% de la largeur du cadre */  
	height: auto; /* L'image prend 100% de la hauteur du cadre */ 
	object-fit: cover; /* Assure que l'image couvre tout le cadre sans être déformée */
}
/***************/
/*class general*/
/***************/
body.unecourse main div.responsiveframe div.generales {
	border:0px solid pink;
	height:21em;
}
body.unecourse main div.responsiveframe div.generales .colonne-gauche {
	border:0px solid red;
	float:left;
	width:41%;
	height:19em;
	margin-left:4em;
	
}
body.unecourse main div.responsiveframe div.generales .colonne-gauche img{
	border:0px solid blue;
	width: 100%; /* L'image prend 100% de la largeur du cadre */  
	height: 100%; /* L'image prend 100% de la hauteur du cadre */ 
	object-fit: cover; /* Assure que l'image couvre tout le cadre sans être déformée */
	margin-bottom:0.2em;
}
body.unecourse main div.responsiveframe div.generales .colonne-gauche a{
	border:0px solid blue;
}
body.unecourse main div.responsiveframe div.generales .colonne-droite {
	border:0px solid maroon;
	float:right;
	width:40%;
	height:19em;
	margin-right:6em;
}
body.unecourse main div.responsiveframe div.generales .colonne-droite h2 {
	border:0px solid maroon;
	margin-top:0em;
}
	
/*****************mise en page les courses**********************/
/************************************************************/
body.lescourses {
	border:0px solid yellow;
}
body.lescourses main {
	border:0px solid black;
}
body.lescourses main div.responsiveframe {
	border:0px solid blue;
}
body.lescourses main div.responsiveframe h1{
	border:0px solid yellow;
	margin-bottom:0em;
}
body.lescourses main div.responsiveframe blockquote:nth-child(2){
	border:0px solid maroon;
}
body.lescourses main div.responsiveframe .section-1 p:first-child{
	border:0px solid red;
}
body.lescourses main div.responsiveframe .section-1 p:nth-child(2){
	border:0px solid maroon;
}
/* body.lescourses main div.responsiveframe>div.categorie  { */
	/* border:1px solid white; */
/* } */
body.lescourses main div.responsiveframe .section-1 h2:nth-child(3) {
	border:0px solid white;
	width:12em;                   /* Assure que le h2 occupe toute la largeur du conteneur */
	background-color: #203250;        /* Arrière-plan bleu */
	color: white;                   /* Texte en blanc pour le contraste */
	padding: 0.3em;                  /* Ajoute de l'espace autour du texte */
	text-align: center;             /* Centre le texte à l'intérieur du h2 */
	margin: 0 auto;        /* Centre l'élément horizontalement */
}
body.lescourses main div.responsiveframe .section-1 h2:nth-child(4)  {
	border:0px solid red;
	margin-left: 2em;              /* Ajoute un espace autour du h2 */
	margin-right: 2em;
	margin-bottom:0.5em;
}
body.lescourses main div.responsiveframe .section-1 p:nth-child(5)  {
	border:0px solid blue;
	margin-left: 5em;
	margin-right: 5em;
}
body.lescourses main div.responsiveframe .section-1 h2:nth-child(6)  {
	border:0px solid pink;
	margin-left: 2em;	
	margin-right: 2em;
	margin-bottom:0.5em;
}
body.lescourses main div.responsiveframe .section-1 ul:nth-child(7)  {
	border:0px solid blue;
	margin-left: 5em;
	margin-right: 5em;
}
body.lescourses main div.responsiveframe  .section-1 h2:nth-child(8)  {
	border:0px solid blue;
	margin-left: 2em;	
	margin-right: 2em;
	margin-bottom:0.5em;
}
body.lescourses main div.responsiveframe .section-1 p:nth-child(9)  {
	border:0px solid blue;
	margin-left: 5em;
	margin-right: 5em;
}
body.lescourses main div.responsiveframe .section-1 h2:nth-child(10)  {
	border:0px solid blue;
	width:16em;                   /* Assure que le h2 occupe toute la largeur du conteneur */
	background-color: #203250;        /* Arrière-plan bleu */
	color: white;                   /* Texte en blanc pour le contraste */
	padding: 0.3em;                  /* Ajoute de l'espace autour du texte */
	text-align: center;             /* Centre le texte à l'intérieur du h2 */
	margin: 0 auto;        /* Centre l'élément horizontalement */
	margin-bottom:1em;
}
/********Colonne 1********/
body.lescourses main div.responsiveframe div.colonne-1 {
	border:0px solid blue;
	width:33%;
	float:left;
}	
body.lescourses main div.responsiveframe div.colonne-1>ul {
	border:0px solid yellow;
}
body.lescourses main div.responsiveframe div.colonne-1>ul>li {
	border:0px solid red;
	height:21em;
	list-style: none;
}
body.lescourses main div.responsiveframe div.colonne-1>ul>li>p:first-child {
	border:0px solid yellow;
	margin:left;
	margin-bottom:0em;
}
body.lescourses main div.responsiveframe div.colonne-1>ul>li>p:nth-child(2) {
	border:0px solid blue;
	text-align:center;
	margin-bottom:0em;
}
body.lescourses main div.responsiveframe div.colonne-1>ul>li>img {
	border:0px solid maroon;
	margin-bottom:0.3em;
}

body.lescourses main div.responsiveframe div.colonne-1>ul>li>a {
	border:0px solid red;
	float:right;
}

/********Colonne 2********/
body.lescourses main div.responsiveframe div.colonne-2 {
	border:0px solid red;
	width:33%;
	float:left;
}
body.lescourses main div.responsiveframe div.colonne-2>ul {
	border:0px solid yellow;
}
body.lescourses main div.responsiveframe div.colonne-2>ul>li {
	border:0px solid red;
	height:21em;
	list-style: none;
}
body.lescourses main div.responsiveframe div.colonne-2>ul>li>p:first-child {
	border:0px solid red;
	margin:left;
	margin-bottom:0em;
}
body.lescourses main div.responsiveframe div.colonne-2>ul>li>p:nth-child(2) {
	border:0px solid red;
	text-align:center;
	margin-bottom:0em;
}
body.lescourses main div.responsiveframe div.colonne-2>ul>li>img {
	border:0px solid maroon;
	margin-bottom:0.3em;
}

body.lescourses main div.responsiveframe div.colonne-2>ul>li>a {
	border:0px solid red;
	float:right;
}

/********Colonne 3********/
body.lescourses main div.responsiveframe div.colonne-3 {
	border:0px solid pink;
	width:33%;
	float:right;
}	
body.lescourses main div.responsiveframe div.colonne-3>ul {
	border:0px solid yellow;
}
body.lescourses main div.responsiveframe div.colonne-3>ul>li {
	border:0px solid red;
	height:21em;
	list-style: none;
}
body.lescourses main div.responsiveframe div.colonne-3>ul>li>p:first-child {
	border:0px solid red;
	margin:left;
	margin-bottom:0em;
}
body.lescourses main div.responsiveframe div.colonne-3>ul>li>p:nth-child(2) {
	border:0px solid red;
	text-align:center;
	margin-bottom:0em;
}
body.lescourses main div.responsiveframe div.colonne-3>ul>li>img {
	border:0px solid maroon;
	margin-bottom:0.3em;
}

body.lescourses main div.responsiveframe div.colonne-3>ul>li>a {
	border:0px solid red;
	float:right;
}
body.lescourses main div.responsiveframe div.coupe-anto{
	border:0px solid red;
	clear:both;
}
body.lescourses main div.responsiveframe div.coupe-anto h2 {
	border:0px solid red;
    margin-left: 0em;    
}
body.lescourses main div.responsiveframe div.coupe-anto .colonne-gauche{
	border:3px solid blue;
	width: 60%;
	height:90em;
	float:left;
	
}
body.lescourses main div.responsiveframe div.coupe-anto .colonne-gauche h2:first-child{
	border:1px solid blue;
	margin-bottom:0.5em;	
}
body.lescourses main div.responsiveframe div.coupe-anto .colonne-gauche h3:nth-child(2){
	border:1px solid blue;
	margin-top:1em;	
}
body.lescourses main div.responsiveframe div.coupe-anto .colonne-gauche a:nth-child(3){
	border:1px solid blue;
	margin-top:0.5em;
}
body.lescourses main div.responsiveframe div.coupe-anto .colonne-gauche h3:nth-child(4){
	border:1px solid blue;
	margin-top:0.5em;
}
body.lescourses main div.responsiveframe div.coupe-anto .colonne-gauche a:nth-child(5){
	border:1px solid blue;
	margin-top:0.5em;
}
body.lescourses main div.responsiveframe div.coupe-anto .colonne-gauche h2:nth-child(6){
	border:1px solid blue;
	margin-top:1em;
	margin-bottom:1em;
}
body.lescourses main div.responsiveframe div.coupe-anto .colonne-gauche a:nth-child(7){
	border:1px solid blue;
}
body.lescourses main div.responsiveframe div.coupe-anto .colonne-gauche h2:nth-child(8){
	border:1px solid blue;
	margin-top:1em;
	margin-bottom:1em;
}
body.lescourses main div.responsiveframe div.coupe-anto .colonne-gauche h3:nth-child(9){
	border:1px solid blue;
	margin-top:1em;
	margin-bottom:1em;
}
body.lescourses main div.responsiveframe div.coupe-anto .colonne-gauche ul:nth-child(10){
	border:1px solid blue;
	margin-bottom:1em;
}
body.lescourses main div.responsiveframe div.coupe-anto .colonne-gauche > * {
    margin-bottom: 1em; /* Ajoute un espace de 1em entre chaque élément enfant direct de .colonne-gauche */
}

/* Supprime la marge pour le dernier élément pour éviter un espace supplémentaire en bas */
body.lescourses main div.responsiveframe div.coupe-anto .colonne-gauche > *:last-child {
    margin-bottom: 0;
}



/* Bordure pour la colonne droite avec image*/
body.lescourses main div.responsiveframe div.coupe-anto .colonne-droite {
	border: 3px solid green; /* Bordure rouge pour visualiser */
	width: 39%;
	height:77em;
	float:right;
}
body.lescourses main div.responsiveframe div.coupe-anto .colonne-droite img:first-child {
	border: 0px solid red; /* Bordure rouge pour visualiser */
	margin-top:2.5em;
	margin-bottom:20em;
}
body.lescourses main div.responsiveframe div.coupe-anto .colonne-droite img:nth-child(2) {
	border: 0px solid pink; /* Bordure rouge pour visualiser */
    width: 80%; /* Ajuste la largeur à ce que tu souhaites, par exemple 80% */
    height: auto; /* Maintient l'aspect ratio pour éviter toute déformation */
    display: block; /* S'assure que l'image soit correctement affichée */
    margin-left: auto; /* Centre l'image horizontalement */
    margin-right: auto; /* Centre l'image horizontalement */
}
body.lescourses main div.responsiveframe div.coupe-anto a img.icone-picto {  
    vertical-align: middle; /* Aligne l'icône au milieu de la ligne de texte */
    margin-right: 5px; /* Espace entre l'image et le texte du lien */
    width: 20px; /* Largeur de l'image */
    height: 20px; /* Hauteur de l'image */
    display: inline-block; /* Assure que l'image reste bien alignée */
}


body.lescourses main div.responsiveframe div.coupe-anto ul {
    list-style: none; /* Supprime les puces par défaut */
    padding-left: 0; /* Pas de padding supplémentaire sur le ul */
    margin-left: 0; /* Pas de marge */
}

body.lescourses main div.responsiveframe div.coupe-anto ul li {
    display: flex; /* Utilise Flexbox pour aligner l'image et le texte */
    align-items: flex-start; /* Aligne l'image en haut par rapport au texte */
    gap: 10px; /* Espace entre l'image et le texte */
    margin-bottom: 0.3em; /* Espace entre chaque élément de la liste */
}
body.lescourses main div.responsiveframe div.coupe-anto ul li img.puce-personnalisée {
	width: 20px; /* Largeur de l'image, ajustée selon les besoins */
    height: 20px; /* Hauteur de l'image, ajustée selon les besoins */
    flex-shrink: 0; /* Empêche l'image de se redimensionner */
}


body.lescourses main div.responsiveframe div.coupe-anto h3 {
    margin-left: 1em; /* Ajoute une marge de 1em à gauche */
}


/*****************mise en page classement*********************/
/************************************************************/
body.classement {
	border:0px solid yellow;
}
body.classement main {
	border:0px solid black;
}
body.classement main div.responsiveframe {
	border:0px solid blue;
}
body.classement main div.responsiveframe h1{
	border:0px solid yellow;
	margin-bottom:0em;
}
body.classement main div.responsiveframe blockquote:nth-child(2){
	border:0px solid maroon;	
}
body.classement main div.responsiveframe p:nth-child(3){
	border:0px solid pink;	
}
body.classement main div.responsiveframe p:nth-child(4){
	border:0px solid black;	
}
body.classement main .responsiveframe p:nth-child(4) a {
	border:0px solid red;	
}
body.classement main .responsiveframe h2:nth-child(5) {
	border:0px solid maroon;
	width:15em;                   /* Assure que le h2 occupe toute la largeur du conteneur */
	background-color: #203250;        /* Arrière-plan bleu */
	color: white;                   /* Texte en blanc pour le contraste */
	padding: 0.3em;                  /* Ajoute de l'espace autour du texte */
	text-align: center;             /* Centre le texte à l'intérieur du h2 */
	margin: 0 auto;        /* Centre l'élément horizontalement */
	margin-bottom:1.5em;
	clear:both;
}


body.classement main .responsiveframe .colonne-gauche-1 {
	border: 0px solid pink; /* Bordure rose pour visualiser */
	width: 48%; /* Chaque colonne prend 48% de l'espace */
    margin-bottom: 2em; /* Espace entre les paires de colonnes */
    padding: 1em; /* Ajoute un peu d'espace à l'intérieur des colonnes */
    box-sizing: border-box; /* Inclut la bordure dans la largeur totale de la colonne */
    float: left; /* Aligner la colonne gauche à gauche */
    margin-right: 2%; /* Espacement avec la colonne droite */
	height:34em;
	padding-top:0em;
}

/* Bordure pour la colonne droite avec image*/
body.classement main .responsiveframe .colonne-droite-2 {
	border: 0px solid red; /* Bordure rouge pour visualiser */
	width: 48%; /* Chaque colonne prend 48% de l'espace */
    margin-bottom: 2em; /* Espace entre les paires de colonnes */
    padding: 1em; /* Ajoute un peu d'espace à l'intérieur des colonnes */ 
    box-sizing: border-box; /* Inclut la bordure dans la largeur totale de la colonne */
    float: right; /* Aligner la colonne droite à droite */   
	height:34em;
	padding-top:6em;
	
 
}
/* Bordure pour la colonne gauche avec image */
body.classement main .responsiveframe .colonne-gauche-3 {
	border: 0px solid red; /* Bordure rouge pour visualiser */
	width: 48%; /* Chaque colonne prend 48% de l'espace */
    margin-bottom: 2em; /* Espace entre les paires de colonnes */
    padding: 1em; /* Ajoute un peu d'espace à l'intérieur des colonnes */
    box-sizing: border-box; /* Inclut la bordure dans la largeur totale de la colonne */
    float: left; /* Aligner la colonne droite à droite */
	clear: both; /* Commence un nouveau bloc sur une nouvelle ligne */
	height:34em;
	padding-top:4em;
	
}
/* Bordure pour la colonne droite */
body.classement main .responsiveframe .colonne-droite-4 {
	border: 0px solid pink; /* Bordure bleue pour visualiser */
	width: 48%; /* Chaque colonne prend 48% de l'espace */
    margin-bottom: 2em; /* Espace entre les paires de colonnes */
    padding: 1em; /* Ajoute un peu d'espace à l'intérieur des colonnes */
    box-sizing: border-box; /* Inclut la bordure dans la largeur totale de la colonne */
    float: right; /* Aligner la colonne gauche à gauche */
    margin-right: 2%; /* Espacement avec la colonne droite */   
	height:34em;
	padding-top:0em;
}
body.classement main .responsiveframe .colonne-droite-4 h2 {
	border: 0px solid pink; /* Bordure bleue pour visualiser */
	margin-top:1em;
}

body.classement main .responsiveframe .colonne-gauche-5 {
	border: 0px solid pink; /* Bordure rose pour visualiser */
	width: 48%; /* Chaque colonne prend 48% de l'espace */
    margin-bottom: 2em; /* Espace entre les paires de colonnes */
    padding: 1em; /* Ajoute un peu d'espace à l'intérieur des colonnes */
    box-sizing: border-box; /* Inclut la bordure dans la largeur totale de la colonne */
    float: left; /* Aligner la colonne gauche à gauche */
    margin-right: 2%; /* Espacement avec la colonne droite */   
    clear: both; /* Commence un nouveau bloc sur une nouvelle ligne */
	height:34em;
	padding-top:0em;
}
body.classement main .responsiveframe .colonne-gauche-5 h2 {
	border: 0px solid pink; /* Bordure bleue pour visualiser */
	margin-top:1em;
}
/* Bordure pour la colonne droite avec image */
body.classement main .responsiveframe .colonne-droite-6 {
	border: 0px solid red; /* Bordure rouge pour visualiser */
	width: 48%; /* Chaque colonne prend 48% de l'espace */
    margin-bottom: 2em; /* Espace entre les paires de colonnes */
    padding: 1em; /* Ajoute un peu d'espace à l'intérieur des colonnes */
    box-sizing: border-box; /* Inclut la bordure dans la largeur totale de la colonne */
    float: right; /* Aligner la colonne droite à droite */
	height:34em;
	padding-top:6em;
	
}
/* Bordure pour la colonne gauche avec image */
body.classement main .responsiveframe .colonne-gauche-7 {
	border: 0px solid red; /* Bordure rouge pour visualiser */
	width: 48%; /* Chaque colonne prend 48% de l'espace */
    margin-bottom: 1em; /* Espace entre les paires de colonnes */
    padding: 1em; /* Ajoute un peu d'espace à l'intérieur des colonnes */
    box-sizing: border-box; /* Inclut la bordure dans la largeur totale de la colonne */
    float: left; /* Aligner la colonne droite à droite */
	clear: both; /* Commence un nouveau bloc sur une nouvelle ligne */
	height:34em;
	padding-top:6em;
}
body.classement main .responsiveframe .colonne-droite-8 {
	border: 0px solid pink; /* Bordure rose pour visualiser */
	width: 48%; /* Chaque colonne prend 48% de l'espace */
    margin-bottom: 2em; /* Espace entre les paires de colonnes */
    padding: 1em; /* Ajoute un peu d'espace à l'intérieur des colonnes */
    box-sizing: border-box; /* Inclut la bordure dans la largeur totale de la colonne */
    float: right; /* Aligner la colonne gauche à gauche */
    margin-right: 2%; /* Espacement avec la colonne droite */
	height:34em;
}
body.classement main .responsiveframe .colonne-droite-8 h2 {
	border: 0px solid pink; /* Bordure rose pour visualiser */
	margin-top:1em;
}
body.classement main .responsiveframe .colonne-gauche-9 {
	width: 48%; /* Chaque colonne prend 48% de l'espace */
	 border: 0px solid pink; /* Bordure rose pour visualiser */
    margin-bottom: 2em; /* Espace entre les paires de colonnes */
    padding: 1em; /* Ajoute un peu d'espace à l'intérieur des colonnes */
    box-sizing: border-box; /* Inclut la bordure dans la largeur totale de la colonne */
    float: left; /* Aligner la colonne gauche à gauche */
    margin-left: 2%; /* Espacement avec la colonne droite */  
    clear: both; /* Commence un nouveau bloc sur une nouvelle ligne */
	height:34em;
}
body.classement main .responsiveframe .colonne-gauche-9 h2 {
	border: 0px solid pink; /* Bordure rose pour visualiser */
	margin-top:1em;
}
/* Bordure pour la colonne droite avec image */
body.classement main .responsiveframe .colonne-droite-10 {
	border: 0px solid red; /* Bordure rouge pour visualiser */
	width: 48%; /* Chaque colonne prend 48% de l'espace */
    margin-bottom: 2em; /* Espace entre les paires de colonnes */
    padding: 1em; /* Ajoute un peu d'espace à l'intérieur des colonnes */
    box-sizing: border-box; /* Inclut la bordure dans la largeur totale de la colonne */
    float: right; /* Aligner la colonne droite à droite */ 
	height:34em;
	padding-top:6em;
	
}
/* Bordure pour la colonne gauche avec image */
body.classement main .responsiveframe .colonne-gauche-11 {
	border: 0px solid red; /* Bordure rouge pour visualiser */
	width: 48%; /* Chaque colonne prend 48% de l'espace */
    margin-bottom: 2em; /* Espace entre les paires de colonnes */
    padding: 1em; /* Ajoute un peu d'espace à l'intérieur des colonnes */
    box-sizing: border-box; /* Inclut la bordure dans la largeur totale de la colonne */
    float: left; /* Aligner la colonne droite à droite */
	clear: both; /* Commence un nouveau bloc sur une nouvelle ligne */
	height:34em;
	padding-top:6em;	
}
body.classement main .responsiveframe .colonne-droite-12 {
	border: 0px solid pink; /* Bordure rose pour visualiser */
	width: 48%; /* Chaque colonne prend 48% de l'espace */
    margin-bottom: 2em; /* Espace entre les paires de colonnes */
    padding: 1em; /* Ajoute un peu d'espace à l'intérieur des colonnes */
    box-sizing: border-box; /* Inclut la bordure dans la largeur totale de la colonne */
    float: right; /* Aligner la colonne gauche à gauche */
    margin-right: 2%; /* Espacement avec la colonne droite */  
	height:34em;
}
body.classement main .responsiveframe .colonne-droite-12 h2 {
	border: 0px solid pink; /* Bordure rose pour visualiser */
	margin-top:1em;
}
/* Bordure pour la colonne gauche avec image */
body.classement main .responsiveframe .colonne-gauche-13 {
	border: 0px solid red; /* Bordure rouge pour visualiser */
	width: 48%; /* Chaque colonne prend 48% de l'espace */
    margin-bottom: 2em; /* Espace entre les paires de colonnes */
    padding: 1em; /* Ajoute un peu d'espace à l'intérieur des colonnes */
    box-sizing: border-box; /* Inclut la bordure dans la largeur totale de la colonne */
    float: left; /* Aligner la colonne droite à droite */
	clear: both; /* Commence un nouveau bloc sur une nouvelle ligne */
	height:34em;
	padding-top:6em;	
}
body.classement main .responsiveframe .colonne-droite-14 {
	border: 0px solid pink; /* Bordure rose pour visualiser */
	width: 48%; /* Chaque colonne prend 48% de l'espace */
    margin-bottom: 2em; /* Espace entre les paires de colonnes */
    padding: 1em; /* Ajoute un peu d'espace à l'intérieur des colonnes */
    box-sizing: border-box; /* Inclut la bordure dans la largeur totale de la colonne */
    float: right; /* Aligner la colonne gauche à gauche */
    margin-right: 2%; /* Espacement avec la colonne droite */  
	height:34em;
}


/* Applique Flexbox pour centrer verticalement les colonnes sans ul */
.colonne-droite-2, .colonne-gauche-3, .colonne-droite-6,
.colonne-gauche-7, .colonne-droite-10, .colonne-gauche-11, .colonne-gauche-13 {
	border: 0px solid red; /* Ajoute une bordure pour visualiser */
    display: flex; /* Active Flexbox */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    height: 35em; /* Définit la hauteur à 35em comme spécifié */
    padding: 1em; /* Ajoute du padding si nécessaire */
    box-sizing: border-box; /* Assure que padding est inclus dans la taille totale */
}


/* Style pour les liens dans les ul, en ciblant les colonnes concernées */
.colonne-gauche-1 ul li a, .colonne-droite-4 ul li a, 
.colonne-gauche-5 ul li a, .colonne-droite-8 ul li a, 
.colonne-gauche-9 ul li a, .colonne-droite-12 ul li a, .colonne-droite-14 ul li a {
    display: block; /* Les liens prennent toute la largeur du li */
    background-color: #203250; /* Fond bleu */
    color: white; /* Texte blanc */
    padding: 1em; /* Ajoute un peu d'espace interne pour rendre les liens plus cliquables */
    text-decoration: none; /* Supprime le soulignement des liens */
    border-radius: 5px; /* Coins arrondis pour les rectangles */
    margin-bottom: 1em; /* Espace de 2em entre les rectangles */
    text-align: left; /* Aligne le texte à gauche */
    width: 95%; /* Ajuste la largeur des rectangles à 90% */
    margin-left: auto; /* Centre le rectangle horizontalement */
    margin-right: auto; /* Centre le rectangle horizontalement */
    display: flex; /* Utilise Flexbox pour aligner le logo et le texte */
    align-items: center; /* Centre verticalement le contenu */
}

/* Suppression des puces et ajout d'un logo en forme de drapeau */
.colonne-gauche-1 ul li, .colonne-droite-4 ul li, 
.colonne-gauche-5 ul li, .colonne-droite-8 ul li, 
.colonne-gauche-9 ul li, .colonne-droite-12 ul li, .colonne-droite-14 ul li {
    list-style-type: none; /* Supprime les puces */
    background: url('https://setienne.ovh/clubhtcc/images/classement-drapeau-gauche.png') no-repeat left center; /* Remplace les puces par une image de drapeau */
    padding-left: 2.5em; /* Crée un espace pour l'image du drapeau */
    background-size: 2em; /* Ajuste la taille du drapeau pour qu'il soit légèrement plus grand qu'une puce */
}

/* Effet hover pour rendre les liens plus interactifs */
.colonne-gauche-1 ul li a:hover, .colonne-droite-4 ul li a:hover, 
.colonne-gauche-5 ul li a:hover, .colonne-droite-8 ul li a:hover, 
.colonne-gauche-9 ul li a:hover, .colonne-droite-12 ul li a:hover, .colonne-gauche-14 ul li a:hover {
    background-color: darkblue; /* Change la couleur au survol */
}
body.classement main .responsiveframe .archives{
	border:0px solid pink;	
}
body.classement main .responsiveframe .archives h2{
	border:0px solid blue;
	width:15em;                   /* Assure que le h2 occupe toute la largeur du conteneur */
	background-color: #203250;        /* Arrière-plan bleu */
	color: white;                   /* Texte en blanc pour le contraste */
	padding: 0.3em;                  /* Ajoute de l'espace autour du texte */
	text-align: center;             /* Centre le texte à l'intérieur du h2 */
	margin: 0 auto;        /* Centre l'élément horizontalement */	
	margin-bottom:2em;
}
body.classement main .responsiveframe .archives p{
	border:0px solid pink;	
	text-align:center;
}
body.classement main .responsiveframe .archives>ul{
	border:0px solid red;
	height:3em;
	text-align:center;
	padding-right:4em;
	list-style: none; /* Supprime les puces */
}
body.classement main .responsiveframe .archives>ul>li{
	border:0px solid maroon;
	margin-top:1em;
	margin-bottom:1em; 
	width:10em;
	float:right;
	
}

body.classement main .responsiveframe .archives>ul>li>a{
	border:0px solid maroon;
	background-color: #203250;        /* Arrière-plan bleu */
	color: white;                   /* Texte en blanc pour le contraste */
	padding-top: 0.5em; 
	padding-bottom:0.5em;
	padding-left:1.5em;
	padding-right:1.5em;	
}



/*****************mise en page contact*********************/
/************************************************************/

body.contact {
	border:0px solid yellow;
}
body.contact main {
	border:0px solid black;
}
body.contact main div.responsiveframe {
	border:0px solid blue;
}
body.contact main div.responsiveframe h1{
	border:0px solid yellow;
	margin-bottom:0em;
}
body.contact main div.responsiveframe blockquote:nth-child(2){
	border:0px solid maroon;
	
}
body.contact main div.responsiveframe .colonne-gauche{
	border:0px solid yellow;
	width:50%;
	float:left;
	height:41em;
}

body.contact main div.responsiveframe .colonne-gauche p:first-child{
	border:0px solid yellow;
}
body.contact main div.responsiveframe .colonne-gauche p:nth-child(2){
	border:0px solid yellow;
}
body.contact main div.responsiveframe .colonne-gauche p:nth-child(3){
	border:0px solid yellow;
}
body.contact main div.responsiveframe .colonne-gauche form:nth-child(4){
	border:0px solid red;
}
body.contact main div.responsiveframe .colonne-gauche form>dl{
	border:0px solid red;
}
body.contact main div.responsiveframe .colonne-gauche form>dl>dt:first-child{
	border:0px solid yellow;
}
body.contact main div.responsiveframe .colonne-gauche form>dl>dd:nth-child(2){
	border:0px solid blue;
}
body.contact main div.responsiveframe .colonne-gauche form>dl>dt:nth-child(3){
	border:0px solid yellow;
}
body.contact main div.responsiveframe .colonne-gauche form>dl>dd:nth-child(4){
	border:0px solid blue;
}
body.contact main div.responsiveframe .colonne-gauche form>dl>dt:nth-child(5){
	border:0px solid yellow;
}
body.contact main div.responsiveframe .colonne-gauche form>dl>dd:nth-child(6){
	border:0px solid blue;
}
body.contact main div.responsiveframe .colonne-gauche form>dl>dt:nth-child(7){
	border:0px solid yellow;
}
body.contact main div.responsiveframe .colonne-gauche form>dl>dd:nth-child(8){
	border:0px solid blue;
}
body.contact main div.responsiveframe .colonne-gauche form>dl>dt:nth-child(9){
	border:0px solid yellow;
}
body.contact main div.responsiveframe .colonne-gauche form>dl>dd:nth-child(10){
	border:0px solid blue;
}
body.contact main div.responsiveframe .colonne-gauche form>button{
	border:0px solid yellow;
}
body.contact main div.responsiveframe .colonne-droite{
	border:0px solid red;
	float:right;
	width:45%;
	height:41em;
	float:both;
}
body.contact main div.responsiveframe .colonne-droite iframe.map-frame {
	border: 0px solid black !important;
	margin-bottom:1em;
	margin-left:2.5em;
}
body.contact main div.responsiveframe .colonne-droite address{
	border:0px solid yellow;
}
body.contact main div.responsiveframe .colonne-droite address>dl{
	border:0px solid blue;
}
address dl dt:first-child {
    /* background-color: red; /* Couleur de fond pour le premier dt */ 
}
/* Premier dd (après le premier dt) */
address dl dd:nth-child(2) {
    /* background-color: lightblue; /* Couleur de fond pour le premier dd */ 
	border: 0px solid blue;
	margin-top:0.6em;
}
/* Cibler l'image dans le premier dt */
address dl dt:first-child img {
    border: 0px solid yellow; /* Bordure jaune pour l'image dans le premier dt */
	margin-bottom:0.5em;
	
}
/* Deuxième dt */
address dl dt:nth-child(3) {
    /* background-color: green; /* Couleur de fond pour le deuxième dt */ 
}

/* Image dans le deuxième dt */
address dl dt:nth-child(3) img {
    border: 0px solid yellow; /* Bordure jaune pour l'image dans le deuxième dt */
	margin-bottom:0.5em;
}

/* Deuxième dd (après le deuxième dt) */
address dl dd:nth-child(4) {
    /* background-color: yellow; /* Couleur de fond pour le deuxième dd */ 
	margin-top:0.5em;
}

/* Troisième dt */
address dl dt:nth-child(5) {
    /* background-color: blue; /* Couleur de fond pour le troisième dt */ 
}

/* Image dans le troisième dt */
address dl dt:nth-child(5) img {
    border: 0px solid yellow; /* Bordure jaune pour l'image dans le troisième dt */
}

/* Troisième dd (après le troisième dt) */
address dl dd:nth-child(6) {
    /* background-color: pink; /* Couleur de fond pour le troisième dd */ 
	margin-top:1.5em;
}
/* quatième dt */
address dl dt:nth-child(7) {
    /* background-color: red; /* Couleur de fond pour le quatrième dt */ 
	margin-top:0.5em;
}

/* Image dans le quatrième dt */
address dl dt:nth-child(7) img {
    border: 0px solid yellow; /* Bordure yellow pour l'image dans le quatrième dt */
}

/* quatrième dd (après le quatrième dt) */
address dl dd:nth-child(8) {
    /* background-color: pink; /* Couleur de fond pour le quatrième dd */ 
	margin-top:2.5em;
}
/* cinquième dt */
address dl dt:nth-child(9) {
    /* background-color: red; /* Couleur de fond pour le cinquième dt */ 
	margin-top:0.5em;
}

/* Image dans le cinquième dt */
address dl dt:nth-child(9) img {
    border: 0px solid yellow; /* Bordure yellow pour l'image dans le cinquième dt */
}

/* cinquième dd (après le cinquième dt) */
address dl dd:nth-child(10) {
    /* background-color: pink; /* Couleur de fond pour le cinquième dd */
	margin-top:2em;
}
/* sixième dt */
address dl dt:nth-child(11) {
    /* background-color: red; /* Couleur de fond pour le sixième dt */
	margin-top:0.5em;
}

/* Image dans le sixième dt */
address dl dt:nth-child(11) img {
    border: 0px solid yellow; /* Bordure yellow pour l'image dans le sixième dt */
}

/* sixième dd (après le sixième dt) */
address dl dd:nth-child(12) {
    /* background-color: pink; /* Couleur de fond pour le cinquième dd */ 
	margin-top:2em;
}
/* Taille uniforme des logos dans les dt */
address dl dt img {
    width: auto;         /* La largeur s'ajuste automatiquement pour garder les proportions */
    height: 40px;        /* Hauteur fixe de 40px */
    object-fit: contain; /* Garde les proportions des images sans les déformer */
    display: inline-block; /* Assure que les logos sont alignés correctement dans la ligne */
}
/* Uniformiser la taille des dt */
address dl dt {
    width: 60px;   /* Largeur fixe pour le dt */
	height:40px;
    display: inline-block;
    vertical-align: middle; /* Aligner les dt avec les dd sur la même ligne */
    text-align: center; /* Centrer le contenu des dt */
	float:left;
	margin-right: 1em; /* Espacement entre le dt (logo) et le dd (texte) */
	clear:both
}
address dl dd {
    overflow: hidden; /* Évite que les dd prennent la largeur complète et garde l'alignement */
    margin-bottom: 10px; /* Ajoute un espace entre les lignes de définition */
}


/**************************************************************************************************************************/
/***Mise en page pour aside.informations ************************************************************************/
/**************************************************************************************************************************/
/* Style pour le titre H2 */

aside.informations h2 {
	border:0px solid blue;
    text-align: center; /* Centre le titre */
    width: 100%; /* Le titre prend toute la largeur */
    margin-bottom: 1em; /* Espacement sous le titre */
}

/* Conteneur des colonnes avec float */
aside.informations .responsiveframe {
	border:0px solid red;
	max-width: 1200px; /* Largeur maximale du conteneur pour éviter qu'il s'étende trop */
    margin: 0 auto; /* Centre le conteneur dans la page */
    /* overflow: hidden; /* Clearfix pour gérer les flottants */ */
	margin-bottom:2em;
}

/* Colonnes de gauche et de droite */
aside.informations .colonne-gauche {
	border: 0px solid green;
    float: left; /* Flotte à gauche */
	width:48%;
	height:28em;
    /* margin-right: 2%; /* Ajoute un espace de 2% entre les colonnes */ 
    
}

aside.informations .colonne-droite {
	border: 0px solid blue;
    margin-left:52; /* Flotte à gauche pour rester à côté de la colonne de gauche */
	height:28em;
}


/*Styles des blocs à l'intérieur des colonnes*/
aside.informations .colonne-droite div.restauration {
	border: 0px solid red;
	margin-top:1.5em;
	padding-bottom:0em;
}
aside.informations .colonne-droite div.restauration h3 {
	border: 0px solid red;
	margin-bottom:2em;
	margin-top:0em;
}
aside.informations .colonne-droite div.restauration p {
	border: 0px solid red;
	margin-bottom:2em;
	padding:0em;
	margin-left:0em;
}

aside.informations .colonne-droite div.hotel {
	border: 0px solid blue;
	margin-top:1.5em;
}
aside.informations .colonne-droite div.hotel h3 {
	border: 0px solid blue;
	margin-bottom:1.5em;
	margin-top:0em;
	padding:0em;
}
aside.informations .colonne-droite div.hotel p {
	border: 0px solid blue;
	margin:0em;
	padding:0em;
}
aside.informations.colonne-droite div.hotel a {
    display: inline-block; /* S'assure que le lien est traité comme un bloc en ligne */
    text-align: left; /* Aligne le texte à gauche */
    padding: 10px; /* Ajoute un espace interne */
    border: 2px solid red; /* Bordure rouge autour du lien */
    margin-top: 10px; /* Ajoute un espace au-dessus du lien */
    width: auto; /* Laisse le lien s'ajuster à sa largeur naturelle */
}

aside.informations .colonne-droite div.responsable {
	border: 0px solid pink;
	margin-bottom:2em;
	padding:0em;
}
aside.informations .colonne-droite div.responsable p {
	border: 0px solid pink;
	margin:0em;
	padding:0em;
}

/* Clearfix pour gérer les flottants */
.clear {
    clear: both;
}



/**************************************************************************************************************************/
/***Mise en page pour main div galerie, div vidéo,*************************************************************************************************/
/**************************************************************************************************************************/

/***************************Galerie******************************/
aside.photo {
	border:0px solid pink;
    margin-bottom: 0em; /* Espacement en bas */
    display: flex; /* Utilise Flexbox pour gérer la mise en page */
    justify-content: space-between; /* Assure que le contenu soit bien réparti */
    align-items: center; /* Aligne verticalement le contenu */
	padding-left:0em;
}
aside.photo .responsiveframe {
	border:0px solid green;
}

/* Colonne gauche */
aside div.galerie .colonne-gauche {
	border:0x solid yellow; /* Bordure de la colonne gauche */
    float: left; /* Flotte à gauche */
    width: 50%; /* Occupe 50% de la largeur du conteneur */
	height:22em;
    box-sizing: border-box; /* Inclut les bordures et le padding dans les dimensions */
}

/* Image dans la colonne gauche */
aside div.galerie .colonne-gauche img {
	border: 0px solid red; /* Bordure rouge pour l'image */
	width: 100%; /* L'image prend 100% de la largeur du cadre */  
	height: 100%; /* L'image prend 100% de la hauteur du cadre */ 
	object-fit: cover; /* Assure que l'image couvre tout le cadre sans être déformée */
	box-sizing: border-box; /* Inclut les bordures et le padding dans les dimensions */ 
}

/* Colonne droite */
aside div.galerie .colonne-droite {
	border: 0px solid blue; /* Bordure de la colonne droite */
    float: left; /* Flotte à droite de la colonne gauche */
    width: 50%; /* Occupe 48% de la largeur du conteneur */
    box-sizing: border-box; /* Inclut les bordures dans la largeur totale */   
    margin-top:0em;
	height:22em;
}

/* Cible tous les h2 à l'intérieur de la colonne-droite */
aside div.galerie .colonne-droite h2 {
    border: 0px solid black;
	margin-bottom:3em;
	margin-left:1em;
	margin-top:0em;
}

/* Cible tous les p à l'intérieur de la colonne-droite */
aside div.galerie .colonne-droite p {
    border: 0px solid green;
	width:70%;
	margin-bottom:4.5em;
	margin-left:2em;
}

/* Cible tous les liens (a) à l'intérieur de la colonne-droite */
aside div.galerie .colonne-droite a {
    border: 0px solid red;
	float:right;
}

/***************************vidéo******************************/

/* Colonne gauche pour le texte dans la vidéo */
aside .video .colonne-gauche {
	border: 0px solid blue;
    width: 50%; /*Colonne gauche prend 50% de la largeur*/
    box-sizing: border-box; /*Inclut les bordures et padding dans la largeur totale;*/
	height:22em;
	float:left;
}
/* Cible tous les h2 à l'intérieur de la colonne-gauche */
aside div.video .colonne-gauche h2 {
    border: 0px solid black;
	float:left;
	margin-top:0em;
}


/* Cible tous les p à l'intérieur de la colonne-gauche */
aside div.video .colonne-gauche p {
    border: 0px solid green; 
	/* float:left; */
	width:75%;
	margin-top:7em;
	margin-left:2em;
	margin-bottom:6em;
}

/* Cible tous les liens (a) à l'intérieur de la colonne-gauche */
aside div.video .colonne-gauche a {
    border: 0px solid red; 
	float:right;
}
/* Colonne droite pour l'image dans la vidéo */
aside div.video .colonne-droite {
	border: 0px solid red; 
    width: 48%; /*Colonne droite prend 48% de la largeur */
    box-sizing: border-box; /* Inclut les bordures et padding dans la largeur totale */
    text-align: right; /* Assure que l'image est alignée à droite */
	float:right;
	height:22em;
}

/* Image dans la colonne droite (assure que l'image prend toute la place) */
aside div.video .colonne-droite img {
	border:0px solid yellow;
    width: 100%; /*L'image prend 100% de la largeur du cadre*/
    height: 100%; /*L'image prend 100% de la hauteur du cadre */
    /* object-fit: cover; Assure que l'image couvre tout le cadre sans être déformée */
    /* box-sizing: border-box; Inclut les bordures et le padding dans les dimensions */
	/* height:22em; */
}




/**************************************************************************************************************************/
/***Mise en page pour aside.petite-galerie ********************************************************************************/
/**************************************************************************************************************************/	

aside.petite-galerie{
	border:0px solid pink;
	margin-top:2.5em;
} 


aside.petite-galerie div {
	border:0px solid red
}

aside.petite-galerie ul {
	border:0px solid yellow;
	height:12em;
	margin-bottom:2em;	
} 
	
 
aside.petite-galerie ul>li {
	border:0px solid maroon;
} 
aside.petite-galerie ul>li{
	border:0px solid green;
	float:left;
	margin-left:0em;
	width:23%;
	margin-bottom:2em;	
} 
aside.petite-galerie ul>li>img {
	border:0px solid pink;
	width:100%;
}

aside.petite-galerie ul {
    display: flex; /* Utilise Flexbox pour organiser les éléments de la liste horizontalement */
    justify-content: space-between; /* Espace les éléments de manière égale avec la première image collée au début et la dernière à la fin */
}

aside.petite-galerie ul>li {
    width: 23%; /* Définit la largeur de chaque élément de liste pour qu'ils aient la même taille */
}

aside.petite-galerie ul>li img {
    width: 100%; /* Fait en sorte que l'image prenne toute la largeur disponible dans son conteneur */
    height: auto; /* Maintient le ratio d'aspect de l'image pour éviter les déformations */
}

/**************************************************************************************************************************/
/***Mise en page pour footer***********************************************************************************************/
/**************************************************************************************************************************/

footer{ 
	border:0px solid black;
	background-color:#203250;
	font-size:85%; /*descend la police de caractères dans le footer seulement*/
}	
footer>div {
	border:0px solid red;
}
/************************************************SECTION 1*****************************************/

footer section:first-child {
	border-bottom:0px solid green;
	width: 33%; /* La navigation prend 33% de la largeur totale */
	float:left;
	height:612px;				/*ATTENTION RELALATIF A LA HAUTEUR DE L'IMAGE DU MILIEU*/		
	background-color:white;
}


/**********************Style pour la navigation*********/
footer section:first-child nav  {
	border:0px solid pink;
	padding-top:1em;
	background-color:#203250;                         /* bleue fonçé */
}

footer section:first-child nav>ul{
	border:0px solid orange;
	padding-bottom:3em;
}

footer section:first-child nav>ul>li{
	border:0px solid maroon;
}

/********************Style pour partenaires*******/
footer section:first-child div.partenaires {
	border :0px solid red;	
	margin-top:0em;
	padding-bottom:4em;
} 
footer section div.partenaires h2 {
	border :0px solid pink;
	color:#203250;
	margin-top:0.5em;
	margin-left:0.5em;
} 
footer section div.partenaires p {
	border :0px solid black;
	color:#203250;
	margin-left:1em;
}

/*********************Style pour reseaux********/
footer section:first-child div.reseaux {
	border :0px solid red;
	background-color:white;
}

footer section:first-child div.reseaux p {
	border :0px solid black;
	color:#203250;
	margin-left:0.5em;
} 
footer section:first-child div.reseaux ul {
	border :0px solid black;
	margin-left:0.5em;
}
footer section:first-child div.reseaux ul>li {
	border :0px solid black;
	float:left;
}
footer section:first-child div.reseaux ul>li>a>img {
	border :0px solid black;
	margin-right:1em;
	height:30px;
} 


 
/***********************************************SECTION 2****************************************/
footer section:nth-child(2) {
	border:0px solid yellow;
	width: 33%; /* La navigation prend 30% de la largeur totale */
	float:right;
}
/*******************Style  de l'adresse*************/
footer section:nth-child(2)>div.address { 
	border :0px solid red;
	margin-top:2.5em;
	text-align:right;
	padding-bottom:4.3em;
}

footer section:nth-child(2)>.address>p { 
	border :0px solid black;
	color:white;
} 
/*******************Style  des logo************/
footer section:nth-child(2) div.logo { 
	border :0px solid white;
	background-color:white;
}
footer section:nth-child(2) div.logo ul { 
	border :0px solid yellow;
	height:405px;
}
footer section:nth-child(2) div.logo ul>li { 
	border :0px solid pink;
}
footer section:nth-child(2) div.logo ul>li>a>img { 
	border :0px solid black;
}
footer section:nth-child(2) div.logo ul li:first-child a img {
    border: 0px solid red;
    width: 25%;
    float: left;
    margin-top: 5em;
	margin-left:1em;
	margin-right:1em;
	margin-bottom:5em;
} 
footer section:nth-child(2) div.logo ul li:nth-child(2) a img {
    border: 0px solid red;
    width: 25%;
    float: left;
    margin-top: 3.5em;
	margin-bottom:5em;	
}
footer section:nth-child(2) div.logo ul li:nth-child(3) a img {
    border: 0px solid red;
    width: 28%;
    float: right;
    margin-top: 4.5em;
	margin-left:2em;
	margin-bottom:5em;
	margin-right:1em;  
}
footer section:nth-child(2) div.logo ul li:nth-child(4) a img {
    border: 0px solid red;
    width: 40%;
    float: left;
	clear: both;/* S'assure que cette section est en dessous des sections flottantes */
	margin-left:1.2em;
	margin-bottom:3em;
}
footer section:nth-child(2) div.logo ul li:nth-child(5) a img {
    border: 0px solid red;
    width: 40%;
    float: right;
	margin-right:1em;	  
}
footer section:nth-child(2) div.logo ul li:nth-child(6) a img {
    border: 0px solid red;
    width: 20%;
	clear: both;/* S'assure que cette section est en dessous des sections flottantes */
    float: left;
	margin-left:1.2em;
	margin-top:3em;
}
footer section:nth-child(2) div.logo ul li:nth-child(7) a img {
    border: 0px solid red;
    width: 30%;	
    float: left;
	margin-left:3em; 
	margin-top:3.5em;
}
footer section:nth-child(2) div.logo ul li:nth-child(8) a img {
    border: 0px solid red;
    width: 20%;	
    float: right;
	margin-left:1em;
	margin-right:1em;
	margin-top:2.5em;
}
/************************************************Figure*****************************************/

footer figure {
	border:0px solid maroon;
	width: 34%; /* La navigation prend 33% de la largeur totale */
	margin-left:33%;
}

footer figure>figcaption {
	display:none;
}
/* Style pour l'image elle-même */
footer figure>img {
	border:0px solid red;
	width: 100%; /* L'image occupe toute la largeur de son conteneur */
 } 
 
/*******************************************Mention légal**********************************************/

 footer p {
	border:0px solid white;
	margin-top:1em;
	padding-bottom:1em;
	text-align:right;
}