@charset "utf-8";
/*
Theme Name: Thème Club HTCC
Theme URI: https://wordpress.org/themes/twentytwentyfour/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Four is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.0
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfour
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/
/*************************************************************************************************************************************************/
/*1 reinitialisation******************************************************************************************************************************/
/*************************************************************************************************************************************************/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	border:0px solid blue;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	 quotes: '« ' ' »'; 
}
blockquote>p:before, q:before {
	content: open-quote;
}
blockquote>p:after, q:after {
	content: close-quote;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}











/*************************************************************************************************************************************************/
/* 2 Typographie, couleur et espacement général à toutes mes pages HTML***************************************************************************/
/*************************************************************************************************************************************************/

@font-face {
	font-family:"akzident";
	src:
		url("AkzidenzGroteskBQ-Bold.woff") format("woff");
}
html,body{
	padding:0;
	margin:0;
	height:100%;
}

body{
	color:#172239;  /* bleue fonçé */
	background-color:white;
	font-family:"EB Garamond", serif;
/***font-family:"Roboto Serif", serif;***/
/***font-family:"Montserrat", sans-serif;***/	
	font-size:100%;
	letter-spacing:0.08em;
	line-height:1.5;
}



input,textarea,button { font-family:"Montserrat", sans-serif;}

h1	{ font-family:"Roboto Serif", serif;
	  text-transform:uppercase;
	  color:#172239;  /* bleue fonçé */ 
	  text-align:center;
}
h2	{ font-family:"Roboto Serif", serif;
	  text-transform:uppercase;
	  color:#172239;  /* bleue fonçé */
}


h3,h4,h5,h6 { font-family:"Montserrat", sans-serif;
			  text-transform:uppercase;
			  color:#172239;  /* bleue fonçé */
 }
 
p { font-family: "EB Garamond", serif; 
	color:#172239;  /* bleue fonçé */
}



h1,h2,h3,h4,h5,h6 {
	margin-top:1.5em;
	margin-bottom:1em;
	font-weight:bold;
	letter-spacing:0.15em;
}

h1	{font-size:2em;
     font-weight:500;
 }

h2 {
	font-size:1.5em;
	letter-spacing:0.05em;
	font-weight:500;
}
p {
	font-size:1.em;
	letter-spacing:0.05em;
	font-weight:500;
}
ul,li { 
	font-family: "EB Garamond", serif; 
	color:#172239;  /* bleue fonçé */
}

dl,dt,dd {
	font-family: "EB Garamond", serif; 
	color:#172239;  /* bleue fonçé */
}

aside h2 {
	font-family:"EB Garamond", serif;
	font-size: 1.5em;
	font-weight:bold;
}

aside h3 {
	font-family:"EB Garamond", serif;
	font-size: 1em;
	font-variant:small-caps;
	color:#172239;  /* bleue fonçé */
}
    
aside p  { 
	font-family:'EB Garamond', serif;
	font-size: 1em;
	line-height:1.5em;
	letter-spacing:0.05em;
	color:#172239;                         /* bleue fonçé */
}

footer p {
	font-family:"Montserrat", sans-serif;
	color:#172239;  /* bleue fonçé */
	font-size: 1em; /* Taille de la police pour le paragraphe */
    line-height: 1.5; /* Espacement entre les lignes */
}
header h2 {
	font-family:"Roboto Serif", serif;
	color:white;  /* blanc */
	font-size: 1.5em; /* Taille de la police pour le paragraphe */
    line-height: 1.5; /* Espacement entre les lignes */
}


figcaption {
	font-family:'EB Garamond', serif;
	font-size:1em;
	padding-top:1em;
	padding-bottom:0em;
	color:#172239;                         /* bleue fonçé */
}
	

/* q:before,blockquote:before { */
	/* content:"«" */
/* } */
/* q:after,blockquote:after { */
	/* content:"»" */
/* } */

strong { font-weight:700 }
em { font-style : italic }
q { 
    color:white;
	font-family:'EB Garamond', serif;
	font-size:1.5em;	
 }

blockquote, blockquote>p { 
	font-family:'EB Garamond', serif;
	font-size:0.8em;
	color:#D46610;							/* orange */
	font-weight:bold;
	text-transform:uppercase;
	text-align:center;
}
blockquote {
	padding-top:1em;
	padding-bottom:0em;
	font-size:1.4em;
}

a,a:visited,a:active {
	color:#cc3429 ; /*rouge*/
	text-decoration:none;/*Pour ne pas avoir des liens soulignés*/
	font-size:.0.5em;
}

a:hover {
	color:#white;
	text-decoration:underline;/*Pour avoir des liens soulignés*/
	font-size:.0.5em;
}
	











/*************************************************************************************************************************************************/
/*3 design général des parties communes***********************************************************************************************************/
/*************************************************************************************************************************************************/

header nav a, a {
	font-family:"Montserrat", sans-serif;
	font-size:.0.5em;
}
header nav a:link,
header nav a:visited {
	color:white
}
header nav a:hover {
	color:#cc3429 ; /*rouge*/
	text-decoration:none	
}
header a:link,
header a:visited {
	color:#cc3429 ; /*rouge*/
}
header nav a:hover {
	color:white
	text-decoration:none	
}

footer nav a {
	font-size:1em;
	font-family: 'Montserrat', sans-serif;
	line-height: 1.5; 
}
footer nav a:link,
footer nav a:visited {
	color:white
	
}
footer nav a:hover {
	color:#cc3429 ; /*rouge*/
	text-decoration:none	
}

/* Spécifique à l'élément <address> */
footer address p {
    color: #FFFFFF; /* Définit la couleur du texte de l'adresse en blanc */
    font-family: "Montserrat", sans-serif; /* Assure que l'adresse utilise la même police que le reste du footer */
    font-size: 1em; /* Taille du texte dans l'adresse */
    line-height: 1.5; /* Espacement entre les lignes dans l'adresse */
}

/* COULEURS DE STRUCTURE */


header {
	background-color:#172239                         /* bleue fonçé */;
	color:#FFFFFF
}
footer {
	background-color:                         ;     /* footer section 1*/;
	color: ;
}
footer {
	background-color:                         ;      /* footer section 2*/;
	color: ;
}
footer {
	background-color:                         ;      /* footer section 3*/;
	color: ;
}

main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
main p,
main table,
main img,
main figure,
main ul,
main ol{
	margin-bottom:1em; /****Marge en dessous****/
}

main li {
	border:0px solid black;
	padding-left:2em;
	background:url("https://htcc.setienne.ovh/wp-content/themes/htcc-theme/images/le-club-puce-volant-23.png") no-repeat left top;
}

main td,th { 
	border :1px solid #1E3D59;
	padding:0.5em;
}
main p {
	text-align:justify;
}
main blockquote, main blockquote>p {
	text-align:center;
}
















/****************************************************************************************
**4 Classes spéciales ********************************************************************
*****************************************************************************************/

.clear {
	border:0px solid red;
	clear:both; /*empêche l’élément de se positionner à droite et à gauche d’un l’élément précédemment flotté*/
}
.ligne {
	clear:both;
}

.align-left {
	text-align:left !important;
}
.align-right {
	text-align:right !important;
}
.center {
	text-align:center !important;
}
.justify {
	text-align:justify !important;
}

.hide {
	display:none;
}

/****CSS vidéo youtube dans vidéo.html***/
.no-border {
    border: none; /* Supprime la bordure */
}

/**** Css effet de zoom sur les images en galerie**/
span.img-hover-zoom{
	display:block;
	width:100%;
	overflow:hidden;
}
span.img-hover-zoom>img{
	transition:transform .5s ease;
	width:100%;
	transform:scale(1.5);
	height:auto;
}
span.img-hover-zoom:hover>img{
	transform:scale(1);
}