/*
	Lien d'évitement ("Aller au contenu") : masqué hors écran par défaut, redevient visible
	au focus clavier (Tab) — pattern d'accessibilité standard (RGAA / WCAG 2.4.1).
	Remplace l'ancien #skiptomain qui était display:none en permanence, donc jamais
	atteignable au clavier malgré son intention.
*/
.skip-link
	{
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	padding: 12px 20px;
	background: var(--fnd_actif);
	color: var(--txt_actif);
	font-family: var(--font-texte);
	font-weight: 600;
	text-decoration: none;
	}

.skip-link:focus
	{
	left: 10px;
	top: 10px;
	}

#nav { background:#e1e0dc url(/images/bodyback.png); box-shadow:0px 2px 4px rgba(0,0,0,0.1); float:left; width:100%; position:fixed; z-index:9; }
#nav ul, #nav li { display:inline-block; margin:0; padding:0; }
#nav a { display:block; padding:.9em 1.5em; font-size:1em; font-family: var(--font-texte); font-weight:300; color:#000; }
#nav a:hover {  color:#ed1518; }
#nav a.active, #nav a.active:hover { background:#fff; color:#000; }
#nav a.button { color:#fff; padding:.6em .75em; }

/*	########################################################################################################################	*/

#wrapper
	{
	width: 100%;
	position: relative;
	background: var(--fnd_fonce);
	}

/*	########################################################################################################################	*/

#headcontainer
	{
	z-index: 9;
	width: 100%;
	min-height: 90px;
	/*	max-height: 250px;	*/
	text-align: center;
	/*	max-height: 150px;	*/
	background-color: var(--fnd_tete);
	/*	background:	linear-gradient(to bottom, var(--fnd_pied) 0%, var(--fnd_moyen) 100%);	*/
	/*	background:	linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(8,54,96,1) 100%);	*/
	/*	background-position: top;						*/
	/*	background-repeat: no-repeat;					*/
	/*	background-attachment:fixed;					*/
	/*	background-size: auto;							*/
	}

header
	{
	max-width: 100%;
	color: var(--txt_norma);
	font-family: var(--font-texte);
	font-weight: 500;
	letter-spacing: 0em;
	font-size: 1.6em;
	font-style: normal;
	line-height: 1.8;
	/*	padding-top: 10px;	*/
	}

header .lignoriz
	{
	width: 100%;
	display: flex;
	flex-direction: row;	/* Aligne horizontalement */
	flex-wrap: nowrap;		/* Empêche le retour à la ligne */
	overflow-x: auto;		/* Permet le scroll horizontal si nécessaire */
	}

header .box,
header .box a,
header .box a:link,
header .box a:visited
	{
	display: block;
	flex: 0 0 auto;			/* Empêche la réduction automatique */
	box-sizing: border-box;
	}

header h1
	{
	font-family: var(--font-titres);
	font-optical-sizing: auto;
	font-style: normal;
	font-size: 2.0em;
	font-weight: 700;
	font-style: normal;
	}

header a,
header a:link,
header a:visited
	{
	color: #000080;
	font-weight:normal;
	text-decoration:underline;
	}

header a:hover
	{
	color:#FFFF99;
	font-weight:normal;
	background-color:none;
	text-decoration:underline;
	}

header a:active
	{
	color:#FFFFFF;
	font-weight:normal;
	background-color:transparent;
	text-decoration:none;
	}

header a.button { font-size:1.5em; margin:2em 0 1.5em 0; }

/*	########################################################################################################################	*/

#menucontainer
	{
	z-index: 9;
	text-align: center;
	width: 100%;		/*	100%	*/
	/*	max-height: 42px;	*/
	background: var(--fnd_inact);
	/*	border-bottom: solid 2px var(--fnd_corps);		/*	--fnd_moycl	*/	
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;
	}


/*	########################################################################################################################	*/

.twitter-share-button { margin-top:.5em; }

/*	########################################################################################################################	*/

#maincontentcontainer
	{
	width: 100%;
	min-height: 400px;
	/*	background: url("../images/fond_fun_bike.jpg") repeat left top;	*/
	background-color: #FFFFFF;
	background-size: auto;
	}




/*	########################################	  MAIN CONTENT 	  ########################################################	*/

.maincontent
	{
	z-index: 1;
	max-width: 100%;
	clear: both;

	font-family: var(--font-texte);
	font-weight: 300;
	font-optical-sizing: auto;
	font-style: normal;

	/*	font-size: 0.8125em;	*/
	font-size: clamp(0.6rem, 4vw, 1.2rem);
	color: var(--txt_norma);
	margin: 0 auto;
	padding: 0 0 0 0;
	line-height: 1.6em;
	position: relative;
	}


.small
	{
	font-size: 0.6em;
	font-weight: 300;
	}


.maincontent b,
.maincontent strong
	{
	/*	31/08/2026 : sans cette règle, <b>/<strong> hérite du "bolder" par défaut du		*/
	/*	navigateur, qui ne saute qu'à 400 depuis la base 300 de .maincontent — à peine	*/
	/*	plus gras que le texte courant. font-weight explicite pour un gras visible mais	*/
	/*	pas trop appuyé (700 jugé trop marqué au retour de Hervé, 600 = bon compromis).	*/
	font-weight: 600;
	}


.maincontent a
	{
	color: var(--fnd_actif);
	font-weight: bold;
	text-decoration: none;
	transition: color 0.2s ease;
	}

.maincontent a:hover
	{
	/*	--fnd_moycl est un gris quasi blanc (pensé comme couleur de FOND) : utilisé ici
		comme couleur de TEXTE au survol, il devenait quasi invisible sur fond clair.
		--txt_rollo est justement documenté comme "couleur de survol lien" dans
		cssmenu.css — jamais réellement branché ici jusqu'à cette correction.		*/
	color: var(--txt_rollo);
	}

.maincontent a:active
	{
	color: var(--txt_rollo);
	}


.maincontent h1
	{
	color: var(--txt_titre);
	font-family: var(--font-titres);
	letter-spacing: 0.08em;
	font-weight: 600;
	/*	font-optical-sizing: auto;	*/
	font-style: normal;
	font-size: clamp(1.0rem, 6vw, 2.0rem);
	line-height: 1.75;
	padding-top: 10px;
	}

.maincontent h2
	{
	color: var(--txt_titre);
	font-family: var(--font-titres);
	letter-spacing: 0.08em;
	font-weight: 400;
	font-style: normal;
	/*	Anciennement clamp(0.8rem, 5vw, 1.6rem) : sur petit écran, cette formule en vw
		retombait sous la taille de .maincontent h3 (1.4em) — un h2 plus petit qu'un h3,
		hiérarchie de titres inversée visuellement. Remplacé par un multiplicateur em du
		même type que h3 (1.7em > 1.4em) : le ratio h2/h3 reste garanti à toute largeur
		d'écran, plus besoin de recalibrer un clamp() à chaque changement de contenu.	*/
	font-size: 1.7em;
	line-height: 1.50;
	padding-top: 5px;
	}

.maincontent h2 a
	{
	text-decoration:normal;
	text-align: center;
	}
.maincontent h2 a:hover
	{
	text-decoration:underline;
	text-align: center;
	}

.maincontent h3
	{
	color: var(--txt_titre);
	font-family: var(--font-titres);
	font-weight: 400;
	font-style: normal;
	font-size: 1.4em;
	line-height: 1.75;
	letter-spacing: 0.08em;

	padding-top: 10px;
	padding-bottom: 15px;
	text-align: center;
	}

/*	Sur petit écran, 1.7em/1.4em (valeurs "bureau" ci-dessus) restent visuellement gros —
	réduits ici, en gardant h2 > h3 pour ne pas reproduire l'inversion corrigée plus haut.	*/
@media (max-width: 800px)
	{
	.maincontent h2
		{
		font-size: 1.4em;
		}
	.maincontent h3
		{
		font-size: 1.15em;
		}
	}

.maincontent h4
	{
	color: var(--txt_titre);
	font-family: var(--font-titres);
	font-weight: 400;
	font-style: normal;
	font-size: 1.0em;
	line-height: 1.5;
	letter-spacing: 0.08em;
	padding-top: 0px;
	}

.maincontent ul
	{
	padding-left: 30px;
	}

.maincontent hr
	{
	border-top: 1px solid var(--txt_norma);
	max-width: 100%;
	margin-left: 0%;
	margin-right: 0%;
	}

.maincontent .lignoriz
	{
	width: 100%;
	display: flex;
	flex-direction: row;	/* Aligne horizontalement */
	flex-wrap: nowrap;		/* Empêche le retour à la ligne */
	overflow-x: auto;		/* Permet le scroll horizontal si nécessaire */
	}

.maincontent .box,
.maincontent .box a,
.maincontent .box a:link,
.maincontent .box a:visited
	{
	display: block;
	/*	min-width: 100px;		/* Largeur minimale pour chaque box */
	flex: 0 0 auto;			/* Empêche la réduction automatique */
	/*	margin-right: 10px;			*/
	/*	background: #eee;			*/
	/*	padding-left: 5px;			*/
	/*	color: var(--txt_norma);	*/
	box-sizing: border-box;
	}

/*	########################################	  MAIN CONTENT formulaire	  ########################################################	*/

.bandeau
	{
	z-index: 1;
	max-width: 100%;
	clear: both;
	background-color: var(--fnd_clair);
	color: var(--txt_norma);
	font-family: var(--font-texte);
	font-weight: 400;
	font-style: normal;
	font-size: 1em;
	margin: 0 auto;
	padding: 0 0 0 0;
	line-height: 1.4em;
	position: relative;
	background-repeat: no-repeat;
	border-top-style: solid;
	}

.bandeau h1,
.bandeau h2
	{
	font-family: var(--font-titres);
	color: var(--txt_titre);
	}

.bandeau a
	{
	font-weight: normal;
	text-decoration: none;
	background-color: transparent;
	}

.bandeau a:link,
.bandeau a:visited
	{
	color: var(--fnd_actif);
	}

.bandeau a:hover,
.bandeau a:active
	{
	color: var(--fnd_moycl);
	}

.bandeau hr
	{
	background-color:var(--fnd_actif);
	}

.bandeau .red
	{
	font-weight:normal;
	color:#FF6666;
	}

/*	########################################	  MAIN CONTENT formulaire	  ########################################################	*/

.maincontentform
	{
	/*	Appliquée directement sur <form> (contact.php, index.php), NESTÉE dans .maincontent —
		volontairement réduite au strict nécessaire (fond distinct des champs de saisie, qui
		restent blancs, voir plus bas dans frenchstyle.css). Contenait auparavant tout un jeu
		de sous-règles (h1-h4, a:hover, .lignoriz, .box...) qui dupliquaient EXACTEMENT celles
		de .maincontent — un vrai piège de maintenance (les deux jeux de règles à garder
		synchronisés indéfiniment) pour un résultat identique. Supprimées le 30/08/2026: le
		formulaire hérite normalement de .maincontent pour tout le reste (police, couleurs,
		.lignoriz, .box...), pas besoin de dupliquer quoi que ce soit ici.
		Fond texture image d'origine remplacé par un aplat de couleur — le fichier
		images/fond_texture.jpg n'existe pas sur ce projet.	*/
	background-color: var(--fnd_moycl);
	padding: 20px;
	border-radius: 10px;
	box-sizing: border-box;
	}

/*	########################################################################################################################	*/

#footercontainer
	{
	z-index: 9;
	width: 100%;
	min-height: 100px;
	text-align: center;
	background: var(--fnd_pied);
	/*	border-top: solid 1px var(--txt_inact);	*/
	}

footer
	{
	padding: 5px 0px 0px 0px;
	max-width: 95%;
	min-height: 100px;
	clear: both;
	margin: 0 auto;
	background: var(--fnd_pied);

	color: var(--txt_clair);
	font-family: var(--font-texte);
	font-weight: 300;
	font-optical-sizing: auto;
	font-size: clamp(0.6rem, 4vw, 1.2rem);
	font-style: normal;

	letter-spacing: 0em;

	line-height: 1.6;
	padding-top: 10px;
	}

footer .lignoriz
	{
	width: 100%;
	display: flex;
	flex-direction: row;	/* Aligne horizontalement */
	flex-wrap: nowrap;		/* Empêche le retour à la ligne */
	overflow-x: auto;		/* Permet le scroll horizontal si nécessaire */
	}

footer .box,
footer .box a,
footer .box a:link,
footer .box a:visited
	{
	display: block;
	flex: 0 0 auto;			/* Empêche la réduction automatique */
	box-sizing: border-box;
	}

footer h1
	{
	font-family: var(--font-titres);
	font-weight: 300;
	font-size: 1.9em;
	font-style: normal;
	}

footer h2
	{
	font-family: var(--font-titres);
	font-weight: 300;
	font-size: 1.6em;
	font-style: normal;
	}

footer a,
footer a:link,
footer a:visited
	{
	color: var(--txt_actif);
	letter-spacing: 0.1em;
	font-weight:normal;
	font-style: normal;
	text-decoration:none;
	}

footer a:hover
	{
	color: var(--txt_clair);	
	font-weight:normal;
	background-color:none;
	text-decoration:underline;
	}

footer a:active
	{
	color: var(--txt_inact);	
	font-weight:normal;
	background-color:transparent;
	text-decoration:none;
	}