/**************************************************************************************************************************/
/***Mise en page générale ********************************************************************/
/**************************************************************************************************************************/
/*
	Rappel de la structure principale de l'arbre HTML
	body
		header	
		section (caroussel) en option
		main
		aside  (vidéo et galerie)
		footer
	Note : chaque élément contient un div.responsiveframe pour contrôler la largeur du
	contenu
*/



div.responsiveframe {
	width:1150px;																		/***Responsive desing********/
	position:relative;
	margin:auto;
	border:0px solid red;
	padding:0;
}

/* Les classes suivantes permettent de faire des mises en page générales et sont destinées à une utilisation dans Wordpress */
/* design en deux colonnes 50/50 */
.colonne-gauche {
	float:left;
	width:45%;
	text-align:right;
	clear:both;
}

.colonne-droite {
	margin-left:55%;
}

/* Pour mettre les images en ligne */
.telechargement {
	background-image:url("https://htcc.setienne.ovh/wp-content/uploads/2025/06/icone-pdf.png");
	background-repeat:no-repeat;
	background-position:top left;
	background-size:contain;
	padding-left:4em;
	display:block;
	padding-top:2em;
	padding-bottom:1em;
}





/**************************************************************************************************************************/
/***Mise en page pour le header********************************************************************************************/
/**************************************************************************************************************************/


header {
	padding-bottom:5em;
	height:7em;
}

header img {
	margin:2em 0 0 3em;
	float:left;
} 

header nav {
	border:0px solid white;
	padding-top:5em;
	margin-right:3em;
	position:relative;
}
/* menu hamburger */

header nav>button.toggle {
	display:none;
	border:0;
	background:transparent;
	padding:0.5rem;
	cursor:pointer;
}
header nav span.hamburger {
	display:inline-block;
	width:28px;
	height:20px; 
	position:relative;
}
header nav span.hamburger_bar {
	display:block;
	height:2px;
	width:100%;
	background:white;
	position:absolute;
	left:0;
	transition:transform 0.28s cubic-bezier(0.4,0,0.2,1), opacity 0.28s;
}
header nav span.hamburger_bar:nth-child(1) {
	top:0;
}
header nav span.hamburger_bar:nth-child(2) {
	top:9px;
}
header nav span.hamburger_bar:nth-child(3) {
	bottom:0;
}
header nav>button.toggle[aria-expanded="true"] span.hamburger_bar:nth-child(1) {
	transform: translateY(9px) rotate(45deg);
}
header nav>button.toggle[aria-expanded="true"] span.hamburger_bar:nth-child(2) {
	transform: scaleY(0.2);
}
header nav>button.toggle[aria-expanded="true"] span.hamburger_bar:nth-child(3) {
	transform: translateY(-9px) rotate(-45deg);
}

/* fin de menu hamburger */
	
header nav>ul {
	border:0px solid red;
	display:flex;
	gap:3em;
	align-items:center;
	float:right;
}

header nav>ul>li {
	border:0px solid pink;
	/* margin-left:3em;
	margin-top:1em;
	float:right; */
	position:relative;
}
header nav li>ul {
	display:none;
	padding:1em;
	padding-top:1em;
	}
header nav li:hover>ul{
	background-color:#172239;
	display:block;
	position:absolute;
	border:0px solid yellow;
	padding:1em;
	padding-top:1em;
	z-index:1000;
}
header nav li{
	text-wrap:nowrap;
}

header nav li li:before {
	content:"→ ";
	color: white;
}

  



/**************************************************************************************************************************/
/***Mise en page pour section (caroussel)**********************************************************************************/
/**************************************************************************************************************************/
/* Toutes les images du caroussel pour ce design doivent faire 1200x500px */


body>section {
	border:0px solid red;
	
}    





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

main {
	border:0px solid red
}



/*****************Desing spécifique : page accueil*********************************************************************/
body.page-id-254>main {
	border:0px solid red;	
}


/*****************Desing spécifique : page club*********************************************************************/
body.page-id-9>main {
	border:0px solid red;
}
body.page-id-9>main figure.image-htcc>img {
	width:100%;
}
body.page-id-9>main ul, 
body.page-id-9>main ol {
	list-style-type:none;
} 

/*****************Desing spécifique : page s'inscrire*********************************************************************/
body.page-id-11>main {
	border:0px solid red; 
} 
body.page-id-11>main fieldset {
	border:1px dotted gray; 
	margin:2em;
	margin-left:0;
	padding-left:2em;
} 
body.page-id-11>main legend {
	font-size:2em;
	padding:1em;
	margin-left:1em;
} 
body.page-id-11>main .libelle {
	margin-top:2em;
	font-weight:bold;
} 
body.page-id-11>main .obligatoire {
	font-weight:bold;
	color:red;
}
body.page-id-11>main input {
	margin-left:0;
}
body.page-id-11>main h2.clear {
	border:0px solid blue;
	padding-top:2em;
}
body.page-id-11>main fieldset ul {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	padding:0;
}	
.wpcf7-list-item{
	margin:0 !important;
}
body.page-id-11>main fieldset ul>li {
	border:0px solid red;
	background:none;
	padding-left:0;
}	
body.page-id-11>main fieldset dt {
	float:left;
	width:20%;
	text-align:right;
	clear:left;
}
body.page-id-11>main fieldset dd {
	margin-left:22%;
}
body.page-id-11>main fieldset ul#tarifs-list{
	border :0px solid blue;
	display:block;
}

/******************desing spécifique : page annonces********************************************************************/

body.page-id-1535>main {
	border:2px solid red; 
} 

body.page-id-1535>main img {
	border:0px solid black; 
	width:355px;
	height:auto;
	
} 

body.page-id-1535>main .size-full img {
	border:2px solid blue; 
	float:left;
	margin-right:25px;
	margin-bottom:21px;
}  
body.page-id-1535>



/*****************Design spécifique : category-4 courses*********************************************************************/
body.category-4>main {
	border:0px solid yellow;	
}
body.category-4>main ul{
	border:0px solid red;
	margin-right:-21px;
}
body.category-4>main ul>li{
	border:3px solid blue;
	list-style-type:none;
	margin-left:0;
	width:362px;
	height:350px;
	float:left;
	margin-right:21px;
	margin-bottom:21px;
	text-align:center;
	background:none;
	padding-left:0;
}
body.category-4>main ul>li>a{
	border:0px solid pink;
	color:#172239;
	font-weight:bold;
	text-transform:uppercase;
}
body.category-4>main ul>li>a:hover{
	text-decoration:none;
}
body.category-4>main ul>li span{
	border:0px solid red;
	margin-bottom:1em;
}
	
body.category-4>main ul>li img{
	max-width:386px;
	height:auto;
}
	
body.category-4>main h2{
	border:0px solid yellow;
	text-align:center;
	font-size:2em;
    font-weight:500;
}



/****************Design spécifique : page  categories-des-courses************************************************************/

body.page-id-275>main {
	border:0px solid black;
	padding-top:3em;
	}
	
	body.page-id-275>main h2 {
		border:0px solid yellow;
		clear:both;
		
	}
	
	
	
	
body.page-id-275>main .wp-block-group {
	border:1px solid transparent; /***le bord transparent sert à garder les élément flottés alignés***/
}



/*****************Design spécifique : page coupe anto*********************************************************************/

body.page-id-280>main .colonne-droite img{
	border:2px solid purple;	
	width:80%;
	margin-top:4em;
}

/*****************Design des (articles des) courses *********************************************************************/

body.single.category-les-courses>main {
	position:relative;
}

body.single.category-les-courses>main h1 {
	border:0px solid blue;
	margin-bottom:3em;
}

body.single.category-les-courses>main img.image-a-la-une {
	border:0px solid red;
	width:50%;
	height:auto;
	margin-left:2em;
	float:left;
} 

/* plan du circuit */
body.single.category-les-courses>main .image-a-la-une+figure,
body.single.category-les-courses>main .image-a-la-une+figure>img {
	border:0px solid purple;
	margin-bottom:0;
} 
/* VUE INITIALE */
body.single.category-les-courses>main .image-a-la-une+figure.vue-initiale  {
	border :5px solid #172239;
	width:15%;
	position:absolute; 
	top:5em;
} 
/* VUE AGRANDIE */
body.single.category-les-courses>main .image-a-la-une+figure.vue-agrandie {
	background-color:rgba(0,0,0,0.7);
	border :5px solid #172239;
	position:fixed;
	top:0;
	left:0;
} 
body.single.category-les-courses>main .image-a-la-une+figure.vue-agrandie,
body.single.category-les-courses>main .image-a-la-une+figure.vue-agrandie>img   {
	border :0px solid red;
	height:100vh;
	display:flex;
	justify-content:center;
	align-items:center;
	object-fit:contain;
} 

/* courte navigation */
body.single.category-les-courses>main .image-a-la-une+figure+ul{
	border:0px solid red;
	margin-left:55%;
	margin-top:10em;
}
body.single.category-les-courses>main .image-a-la-une+figure+ul>li {
	border:0px solid green;	
	margin-bottom:0.5em;
	background:none;
}
/* caractéristiques techniques*/
body.single.category-les-courses>main .ct{
	border:0px solid yellow;
	width:50%;
	clear:left;
	float:right;
}
/* caractéristiques générales */
body.single.category-les-courses>main .cg{
	border:1px solid transparent;
	margin-right:53%;
	clear:left;
}
/* informations pratiques */
body.single.category-les-courses>main .cg+h2{
	border:0px solid blue;
	padding-top:5em;
	text-align:center;
	clear:right;
}
body.single.category-les-courses>main .conteneur{
	border:0px solid red;
	padding-top:2em;
	clear:both;
}
body.single.category-les-courses>main .conteneur h3{
	border:0px solid pink;
	margin-top:0;	
}
body.single.category-les-courses>main .historique{
	border:0px solid pink;
	clear:both;
}


/*****************Design spécifique catégorie classement *******************************************************************/
body.category-3>main img{
	border:0px solid red;
	float:right;
	width:50%;
	height:auto;
}
body.category-3>main p.clear{
	border-bottom:1px solid silver;
}




/****************************************************************************************************************************/
/***Mise en page pour aside *************************************************************************************************/
/****************************************************************************************************************************/
aside {
	clear:both;
	margin-top:6em;
}
aside blockquote{
	border:0px solid green;
}	
aside blockquote>p{
	border:0px solid red;
	margin:0;
	margin-bottom:6em;
	width:auto;
}	
aside img {
	max-height:22em;																		
}
aside li {
	border:0px solid red;
	height:22.5em;
	margin-bottom:1em;
    box-sizing: border-box; /* Inclut les bordures et le padding dans les dimensions */
}	
aside li:first-child img {
	border:0px solid yellow; /* Bordure de la colonne gauche */ 
    float: left; /* Flotte à gauche */
    width: 50%; /* Occupe 50% de la largeur du conteneur */
}
aside li:first-child figcaption {
	border: 0px solid blue; /* Bordure de la colonne droite */
    margin-left: 52%; /* Occupe 48% de la largeur du conteneur */
}
aside li:nth-child(2) img {
	border:0px solid yellow; /* Bordure de la colonne gauche */ 
    float: right; /* Flotte à gauche */
    width: 50%; /* Occupe 50% de la largeur du conteneur */
}
aside li:nth-child(2) figcaption {
	border: 0px solid blue; /* Bordure de la colonne droite */
	width:48%;
}
aside h2 {
    border: 0px solid black;
	margin-bottom:3em;
	margin-left:1em;
	margin-top:0em;
}
aside p {
    border: 0px solid green;
	width:70%;
	margin-bottom:4em;
	margin-left:2em;
}
aside a {
    border: 0px solid red;
	display:block;
	text-align:right;
}






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

footer{ 
	border:0px solid black;
	background-color:#172239;
	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:#172239;                         /* bleue fonçé */
	padding-left:0.5em;
}

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:#172239;
	margin-top:0.5em;
	margin-left:0.5em;
} 
footer section div.partenaires p {
	border :0px solid black;
	color:#172239;
	margin-left:0.5em;
	text-align:left;
}

/*********************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:#172239;
	margin-left:0.5em;
	text-align:left;
} 
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;
	padding-right:0.5em;

} 
/*******************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-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 */
 } 
 
/*******************************************Mentions légales**********************************************/

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