btlinkbody
	{
	margin: 0px;
	padding: 0px;
	outline: 0px;
	background: var(--fnd_pied);
	}

/* ********************************************* */

.overlay
	{
	position: absolute;
	top: 5%;
	left: 5%;
	width: 40%;
	background-color: color-mix(in srgb, var(--fnd_inact) 60%, transparent);
	transform: translate(0, 0);
	text-align: center;
	color: var(--txt_actif);
	z-index: 10;
	/*	padding: 2vw;	*/
	height: auto;
	max-width: none;
	box-sizing: border-box;
	}

.overlay a,
.overlay a:link,
.overlay a:visited
	{
	font-weight: bold;
	font-style: normal;
	color:var(--txt_clair);
	text-decoration:none;
	} 
.overlay a:hover
	{
	font-weight: bold;
	font-style: normal;
	color: var(--txt_clair);
	text-decoration:underline;
	}

.overlay h1
	{
	text-align: left;
	padding-left: 20px;

	font-family: var(--font-titres);
	font-weight: 600;
	letter-spacing: 0.08em;
	/*	font-optical-sizing: auto;	*/
	font-style: normal;

	color: var(--txt_pale);
	/*	font-size: 2.6em;	*/
	font-size: clamp(1.0rem, 5vw, 2.0rem);
	margin-bottom: 15px;
	/*	text-shadow:
	-2px -2px 0px var(--fnd_inact),
	 2px -2px 0px var(--fnd_inact),
	-2px  2px 0px var(--fnd_inact),
	 2px  2px 0px var(--fnd_inact);	*/
	}

.overlay h1 small
	{
	font-weight: 300; /* ou "lighter" */
	}

.overlay h2
	{
	text-align: left;
	padding-left: 20px;
	font-family: var(--font-titres);

	font-weight: 400;
	font-optical-sizing: auto;
	font-style: normal;
	/*	font-weight: bold;	*/

	color: var(--txt_pale);
	/*	font-size: 3.0em;	*/
	font-size: clamp(0.5rem, 3vw, 1.4rem);
	margin-bottom: 15px;
	/*	text-shadow:
	-2px -2px 10px var(--fnd_inact),
	 2px -2px 10px var(--fnd_inact),
	-2px  2px 10px var(--fnd_inact),
	 2px  2px 10px var(--fnd_inact);	*/
	}

/* ********************************************* */

.parallax
	{
	height: 500px;
	width: 100%;
	background-image: var(--img);
	background-size: cover;
	background-position: center;
	background-attachment: fixed; /* Effet parallax */
	}







.bandeaufonce
	{
	padding:0px;
	margin: 0px;
	background-color: var(--fnd_fonce);
	color: var(--txt_clair);
	}

.pavetransp
	{
	margin: 5px 20px 5px 20px;
	padding:20px;
	box-sizing: border-box;	/*	Sans ça : combiné à .bary (width:100%), le padding s'ajoute à la
								largeur au lieu d'être inclus dedans -> déborde de 40px (2x padding),
								invisible sur grand écran (absorbé par la marge de page), mais casse
								la mise en page en pleine largeur mobile où il ne reste plus de marge.
								Bug confirmé en test réel (375px), présent depuis le socle d'origine
								tits_rsp/mfb_2026 — corrigé ici, pas dans les sites sources.			*/
	-webkit-border-radius: 20px;
	-moz-border-radius: 0px;
	border-radius: 20px;
	}

.pavetransp.bary
	{
	/*	.bary (plus bas dans ce fichier) impose width:100% — correct pour un simple texte
		centré, mais ici .pavetransp a en plus 20px de marge de chaque côté : 100% + marges
		déborde toujours du conteneur, quel que soit le box-sizing. Neutralisé ici pour ce
		duo de classes précis (sélecteur composé, l'emporte sur les deux règles simples).	*/
	width: auto;
	}

.pavenum
	{
	margin: 5px 15px 5px 15px;
	padding:0px 5px 0px 5px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 0px;
	border-radius: 20px;
	text-align: right;
	}

.pavimage
	{
	padding:0px 0px;
	position: relative;
	}

.pavecadre
	{
	margin: 5px 15px 5px 15px;
	padding:10px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 0px;
	border-radius: 20px;
	border: solid var(--txt_titre);
	font-size: clamp(0.5rem, 4vw, 1.0rem);
	background-color: color-mix(in srgb, var(--fnd_clair) 50%, transparent);
	}

.pavetext
	{
	padding:0px 10px 0px 10px;
	}

.pavedark
	{
	margin: 5px 15px 5px 15px;
	padding:0px 5px 0px 5px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;

	background:	var(--fnd_fonce);

	/*	background:	linear-gradient(to bottom, var(--fnd_pied) 0%, var(--fnd_fonce) 100%);	*/
	/*	background-image: url("../images/fond_dark_lagoon.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;	*/

	color: var(--txt_clair);

	/*	border: 2px solid var(--fnd_moyen); /* --fnd_moycl */
	}
.pavedark h2
	{
	color: var(--txt_clair);
	font-family: var(--font-texte);
	font-weight: 300;
	font-style: normal;
	font-size: clamp(0.6rem, 4vw, 1.2rem);
	line-height: 1.00;
	/*	text-shadow: 2px 2px 4px var(--txt_titre), -2px -2px 4px var(--txt_titre), -2px 2px 4px var(--txt_titre), 2px -2px 4px var(--txt_titre);	*/
	}
.pavedark hr
	{
	border-top: 1px solid var(--txt_clair);
	}


.arrondi
	{
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	}

.petitarrondi
	{
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	}

img.symbol
	{
	max-width: min(128px, 70%);
	width: 100%;
	opacity: 0.5;
	filter: alpha(opacity=50); /* For IE8 and earlier */
	}

.transp50
	{
	opacity: 0.5;
	filter: alpha(opacity=50); /* For IE8 and earlier */
	}

.transp25
	{
    opacity: 0.25;
    filter: alpha(opacity=25); /* For IE8 and earlier */
	}

.hover13 figure:hover img
	{
	opacity: 1;
	-webkit-animation: flash 1.5s;
	animation: flash 1.5s;
	}

@-webkit-keyframes flash
	{
	0%
		{
		opacity: .4;
		}
	100%
		{
		opacity: 1;
		}
	}

@keyframes flash
	{
	0%
		{
		opacity: .4;
		}
	100%
		{
		opacity: 1;
		}
	}


/* ********************************************* */
.facult
	{
	color: var(--txt_discr);
	}

.btlink
	{
	width: 100%;
	text-align: center; /* centre le contenu */
	}

.btlink a
	{
	display: inline-block; /* permet de centrer avec text-align */
	width: 90%;
	height: 40px;
	line-height: 40px;
	border-radius: 20px;
	background: var(--fnd_inact);
	color: var(--txt_inact);
	/*	color: #FFFFFF;		*/
	font-size: 14pt;
	font-weight: normal;
	/*	font-family: var(--font-texte);	*/
	text-decoration: none;
	/*	transition: background 0.2s, color 0.2s; /* optionnel mais joli */	
	}

.btlink a:hover
	{
	background: var(--fnd_actif);
	color: var(--txt_actif);
	}


/* ********************************************* */

.btlinkfoot
	{
	width: 100%;
	text-align: center; /* centre le contenu */
	color: var(--txt_titre);
	}

.btlinkfoot a,
.btlinkfoot a:link,
.btlinkfoot a:visited
	{
	display: inline-block; /* permet de centrer avec text-align */
	width: 90%;
	height: 40px;
	line-height: 40px;
	border-radius: 20px;
	background: var(--fnd_clair);
	color: var(--txt_titre);
	font-size: 14pt;
	text-decoration: none;
	/*	transition: background 0.2s, color 0.2s; /* optionnel mais joli */
	}

.btlinkfoot a:hover
	{
	background: var(--fnd_actif);
	color: var(--txt_actif);
	text-decoration: none;
	}

/* ********************************************* */

.zoom
{
transform: scale(0.98);
transition: transform .2s; /* Animation */
}

.zoom:hover
{
transform: scale(1.02); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

/* ********************************************* */

.btsubmit
	{
	height:40px;
	line-height: normal;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0 3px 0;	/*	Compense les métriques verticales asymétriques de	*/
						/*	--font-titres (ascendant/descendant déséquilibrés	*/
						/*	selon la police) : sans ça, le texte reste ~1,5px	*/
						/*	trop bas même avec un centrage flexbox parfait.	*/
	width: 100%;
	border-radius: 20px;
	border: none;
	outline: none;
	cursor: pointer;
	font-size:14pt;
	font-weight: normal;
	text-decoration: none;
	text-align:center;
	background: var(--fnd_actif);
	color:var(--txt_actif);
	}

.btsubmit:hover
	{
	border: none;
	background: var(--txt_rollo);
	color: var(--txt_actif);
	}

.btsubmit:active
	{
	border: none;
	background: var(--txt_rollo);
	transform: translateY(4px);
	}



/* ********************************************* */

.btsubvert
	{
	height:40px;
	line-height: normal;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0 3px 0;	/*	Compense les métriques verticales asymétriques de	*/
						/*	--font-titres (ascendant/descendant déséquilibrés	*/
						/*	selon la police) : sans ça, le texte reste ~1,5px	*/
						/*	trop bas même avec un centrage flexbox parfait.	*/
	width: 100%;
	border-radius: 20px;
	border: none;
	outline: none;
	cursor: pointer;
	font-size:14pt;
	font-weight: normal;
	text-decoration: none;
	text-align:center;
	background: var(--fnd_inact);
	color:var(--txt_clair);
	}

.btsubvert:hover
	{
	border: none;
	background: var(--fnd_actif);
	color: var(--txt_actif);
	}

.btsubvert:active 
	{
	border: none;
	background: var(--fnd_actif);
	transform: translateY(4px);
	}



.btsubvertsel
	{
	height:40px;
	line-height: normal;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0 3px 0;	/*	Compense les métriques verticales asymétriques de	*/
						/*	--font-titres (ascendant/descendant déséquilibrés	*/
						/*	selon la police) : sans ça, le texte reste ~1,5px	*/
						/*	trop bas même avec un centrage flexbox parfait.	*/
	width: 100%;
	border: none;
	outline: none;
	cursor: pointer;
	font-size:14pt;
	font-weight: normal;
	text-decoration: none;
	text-align:center;
	color: #FFFFFF;
	background: rgba(30, 122, 147, 1);
	}

.btsubvertsel:hover
	{
	border: none;
	color: #FFFFFF;
	background: rgba(30, 122, 147, 1);
	}

.btsubvertsel:active 
	{
	border: none;
	/*	border-radius: 17px;	*/
	background: #1e7a93;
	transform: translateY(4px);
	}

/* ********************************************* */

.btsubrouge
	{
	height:40px;
	line-height: normal;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0 3px 0;	/*	Compense les métriques verticales asymétriques de	*/
						/*	--font-titres (ascendant/descendant déséquilibrés	*/
						/*	selon la police) : sans ça, le texte reste ~1,5px	*/
						/*	trop bas même avec un centrage flexbox parfait.	*/
	width: 100%;
	border: none;
	outline: none;
	cursor: pointer;
	font-size:14pt;
	font-weight: normal;
	text-decoration: none;
	text-align:center;
	color: #FFFFFF;
	background: rgba(153, 0, 0, 0.50);
	}

.btsubrouge:hover
	{
	border: none;
	color: #FFFFFF;
	/*	border-radius: 17px;	*/
	/*	background: #990000;	*/
	background: rgba(153, 0, 0, 1);
	}

.btsubrouge:active 
	{
	border: none;
	background: #990000;
	transform: translateY(4px);
	}



.btsubfinal
	{
	height:35px;
	line-height: normal;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0 3px 0;	/*	Compense les métriques verticales asymétriques de	*/
						/*	--font-titres (ascendant/descendant déséquilibrés	*/
						/*	selon la police) : sans ça, le texte reste ~1,5px	*/
						/*	trop bas même avec un centrage flexbox parfait.	*/
	width: 90%;
	border: none;
	outline: none;
	cursor: pointer;
	font-size:12pt;
	font-weight: bold;
	text-decoration: none;
	text-align:center;
	color: #FFFFFF;
	border-radius: 17px;
	background: #E27C00;
	}

.btsubfinal:hover
	{
	border: none;
	color: #FFFFFF;
	border-radius: 17px;
	background: #993300;
	}

.btsubfinal:active 
	{
	border: none;
	color: #FFFFFF;
	border-radius: 17px;
	background: #993300;
	transform: translateY(4px);
	}

/* ********************************************* */

.btsubblanc
	{
	height:40px;
	line-height: normal;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0 3px 0;	/*	Compense les métriques verticales asymétriques de	*/
						/*	--font-titres (ascendant/descendant déséquilibrés	*/
						/*	selon la police) : sans ça, le texte reste ~1,5px	*/
						/*	trop bas même avec un centrage flexbox parfait.	*/
	width: 100%;
	border: none;
	outline: none;
	cursor: pointer;
	font-size:14pt;
	font-weight: normal;
	text-decoration: none;
	text-align:center;
	color:#1e7a93;
	/*	border-radius: 17px;	*/
	background: #FFFFFF;
	/*	background: rgba(184, 184, 184, 0.50);	*/
	}

.btsubblanc:hover
	{
	border: none;
	color: #000000;
	/*	border-radius: 17px;	*/
	background: #d2e4e9;
	/*	background: rgba(184, 184, 184, 1);	*/
	}

.btsubblanc:active
	{
	border: none;
	/*	border-radius: 17px;	*/
	background: #FFFFFF;
	transform: translateY(4px);
	}

/*	RGAA 4.1, critère 10.7 (visibilité du focus) : ces 6 boutons ont outline:none plus	*/
/*	haut sans aucun style de remplacement — au clavier, impossible de voir lequel a le	*/
/*	focus. :focus-visible (et non :focus) pour ne montrer l'anneau qu'à la navigation	*/
/*	clavier, pas au clic souris — cohérent avec le comportement natif des navigateurs.	*/
.btsubmit:focus-visible,
.btsubvert:focus-visible,
.btsubvertsel:focus-visible,
.btsubrouge:focus-visible,
.btsubfinal:focus-visible,
.btsubblanc:focus-visible
	{
	outline: 3px solid var(--fnd_actif);
	outline-offset: 2px;
	}

/* ********************************************* */

.premier
	{
	margin-left: 10px;
	}

.dernier
	{
	margin-right: 10px;
	}

.droite
	{
	text-align:right;
	}

.droitelib
	{
	text-align:right;
	padding-right: 15px;
	}

.centre
	{
	text-align:center;
	}

.gauche
	{
	text-align:left;
	}

.haut
	{
	vertical-align:top;
	}

.milieu
	{
	vertical-align:middle;
	}

.bas
	{
	vertical-align:bottom;
	}

.justine
	{
	text-align:justify;
	}

.bary
	{
	width: 100%;
	vertical-align: middle;
	text-align: center;
	}

.baryflex
	{
	display: flex;
	justify-content: center; /* Centre horizontalement */
	align-items: center; /* Centre verticalement */
	/*	height: 100vh; /* Exemple : occuper toute la hauteur de l'écran */	
	}

.leftflex0
	{
	display: flex;
	justify-content: left; /* Centre horizontalement */
	align-items: center; /* Centre verticalement */
	padding-left: 0px;
	/*	height: 100vh; /* Exemple : occuper toute la hauteur de l'écran */	
	}

.leftflex
	{
	display: flex;
	justify-content: left; /* Centre horizontalement */
	align-items: center; /* Centre verticalement */
	padding-left: 10px;
	/*	height: 100vh; /* Exemple : occuper toute la hauteur de l'écran */	
	}

.marge
	{
	padding: 10px;
	}

.margoriz
	{
	margin-left: 5px;
	margin-right: 5px;
	padding-left: 5px;
	padding-right: 5px;
	}

.marginput
	{
	padding-top: 4px;
	padding-left: 5px;
	padding-right: 5px;
	}

.marge2
	{
	margin: 15px 10px 15px 10px;
	}

.marge5
	{
	margin: 5px 5px 5px 5px;
	}


.imgfloatl
	{
	float:left;
	margin:0 10px 0 0;
	}

.imgfloatr
	{
	float:right;
	margin:0 0 0 10px;
	}

.padding
	{
	padding:10px 0px 10px 0px;
	}

.margegauche
	{
	padding-left: 10px;
	}

.margedroite
	{
	padding-right: 10px;
	text-align:right;
	}

/* ********************************************* */

.standard
	{
	font-weight:normal;
	text-align:left;
	font-size:18pt;
	line-height: 150%;
	}

.titcol a,
.titcol
	{
	font-size:12pt;
	color:#000000;
	font-weight:bold;
	}
.titcol a:hover
	{
	font-size:12pt;
	color:#000000;
	font-weight:bold;
	/*	background: rgba(30, 122, 147, 1);	*/
	text-decoration:underline;
	}

.titprod
	{
	font-size:16pt;
	color:#0033FF;
	}

.black
	{
	font-weight:bold;
	color:#000000;
	}

.red
	{
	font-weight:bold;
	color:#990000;
	}

.mandatory
	{
	font-weight:bold;
	color:#FF0000;
	}

.mandalegende
	{
	font-size:10pt;
	font-weight:bold;
	color:#FFFF00;
	}

.avertissement
	{
	font-size:12pt;
	font-weight:normal;
	color:var(--txt_titre);
	}

.moyen
	{
	font-size: 0.8em;
	}

.petit
	{
	font-size:9pt;	/*	agrandi le 31/08/2026 (depuis 8pt) pour plus de lisibilité (WAVE "Very small text")	*/
	line-height : 20px;
	}

.minus
	{
	font-size:6pt;
	}

.entete1
	{
	color: var(--txt_titre);
	font-size: 2.2em;
	text-align: center;
	font-weight:normal;
	padding-top: 20px;
	padding-bottom: 10px;
	}

.entete2
	{
	color: var(--txt_titre);
	font-weight:normal;
	font-size: 1.6em;
	text-align: center;
	padding-top: 0px;
	padding-bottom: 5px;
	}

.entete
	{
	letter-spacing: 0.1em;
	font-size: 1.0em;
	font-weight: normal;
	font-style: normal;
	line-height: 1.5;
	padding-top: 5px;
	padding-bottom: 10px;
	color: var(--txt_norma);
	text-shadow: 2px 2px 4px #FFFFFF, -2px -2px 4px #FFFFFF, -2px 2px 4px #FFFFFF, 2px -2px 4px #FFFFFF;
	}	

.titre2
	{
	color: var(--txt_norma);
	font-weight:normal;
	font-size: 1.8em;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 10px;
	}

.titreHS
	{
	color:#CBDB2F;
	font-size:14pt;
	font-weight:normal;
	font-style: normal;
	/*	text-shadow: 2px 2px 3px rgba(0,0,0,1);	*/
	}

.titreBS
	{
	color:#FFFFFF;
	font-size:14pt;
	font-weight:normal;
	font-style: normal;
	/*	text-shadow: 2px 2px 3px rgba(0,0,0,1);	*/
	}

.texteHS
	{
	color:#CBDB2F;
	font-weight:normal;
	font-style: normal;
	/*	text-shadow: 2px 2px 3px rgba(0,0,0,1);	*/
	}

.texteBS
	{
	color:#FFFFFF;
	font-weight:normal;
	font-style: normal;
	/*	text-shadow: 2px 2px 3px rgba(0,0,0,1);	*/
	}

.texteB
	{
	color:#99CCFF;
	}

.texteW
	{
	color:#FFFFFF;
	}

.green
	{
	color:#CBDB2F;
	font-weight:normal;
	font-style: normal;
	/*	text-shadow: 2px 2px 3px rgba(0,0,0,1);	*/
	}

.msgOKold
	{
	text-align:center;
	color:#66ff66;
	font-size:16pt;
	font-weight:bold;
	/*	text-shadow: 0px 0px 5px rgba(24,59,78,1);	*/
	}

.msgERold
	{
	text-align:center;
	color:#ff66ff;
	font-size:16pt;
	font-weight:bold;
	/*	text-shadow: 0px 0px 5px rgba(24,59,78,1);	*/
	}

.msgOK
	{
	text-align:center;
	color:#009900;
	font-size:16pt;
	font-weight:bold;
	/*	text-shadow: 0px 0px 5px rgba(24,59,78,1);	*/
	}

.msgER
	{
	text-align:center;
	color:#990000;
	font-size:16pt;
	font-weight:bold;
	/*	text-shadow: 0px 0px 5px rgba(24,59,78,1);	*/
	}

.msgNB
	{
	text-align:center;
	color:#FFFFFF;
	font-size:14pt;
	font-weight:normal;
	/*	text-shadow: 0px 0px 5px rgba(24,59,78,1);	*/
	}	

.etoile
	{
	vertical-align:middle;
	text-align:center;
	color:#FF0000;
	font-weight:bold;
	font-size:12pt;
	}


/* ********************************************* */

input
	{
	max-width: 100%;
	padding: 10px 0px 10px 10px;
	margin-bottom: 25px;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-sizing: border-box;
	resize: vertical;
	}

input[type=radio]
	{
	margin: 0px 20px 0px 0px;
	}

input[type=text], select, textarea, input[type=password]
	{
	width: 100%;
	background-color: var(--fnd_clair);
	padding: 10px 0px 10px 10px;
	margin-bottom: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-sizing: border-box;
	resize: vertical;
	}

#reponse
	{
	/*	Input de la question anti-spam (voir common.php, fonction Humain()) : inséré au
		milieu d'une phrase en flux inline normal (pas de display:flex sur le <label>
		parent, qui casserait le retour à la ligne sur petit écran). vertical-align:middle
		aligne l'input sur le texte qui l'entoure, comme n'importe quel élément inline.	*/
	vertical-align: middle;
	margin: 0 4px;
	}

input[type=date], input[type=number], input[type=checkbox]
	{
	padding: 10px 0px 10px 10px;
	margin-bottom: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-sizing: border-box;
	}

input.special
	{
	background: #e5ff1a;
	}

table
	{
	margin: auto;
	border-collapse: collapse;
	}

td
	{
	text-align:left;
	vertical-align:top;
	border: 0px;
	padding: 0px;
	}

img
	{
	width: 100%;
	height: auto;	/*	Sans ça : un <img width height> (attributs HTML, ajoutés pour réserver l'espace
					avant chargement / éviter les sauts de mise en page) fixe la hauteur en dur en CSS
					dès lors qu'aucune règle ne dit le contraire — la largeur suit le conteneur
					(width:100% ci-dessus) mais la hauteur reste figée à la valeur de l'attribut :
					l'image se déforme. Confirmé en prod sur mfb_2026 (photos de véhicules carrées
					étirées en rectangles). height:auto restaure l'ajustement proportionnel tout en
					gardant le bénéfice des attributs width/height (ratio calculé par le navigateur,
					plus de saut de mise en page au chargement).								*/
	}
img.arrondi
	{
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	}

label
	{
	margin-bottom: 25px;
	}



.puce
	{
	padding-left: 30px; /* Décale toute la liste (puces + texte) de 30 pixels */
	}


.sticky
	{
	z-index: 9;
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;
	}
/************************************VIDEO RESPONSIVE************************************/
.video-responsive { overflow:hidden; padding-bottom:56.25%; position:relative; height:0;}	/*	56.25	*/

.video-responsive iframe { left:0; top:20; height:100%; width:100%; position:absolute;}
/****************************************************************************************/

.box
	{
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	}

.box > div
	{
	/*	margin: 5px;	*/
	}

/******************** BOX DRAPEAUX **********************/

.boxdrapeau
	{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-evenly;
	padding: 15px 0px 0px 0px;
	}

.boxdrapeau > div
	{
	margin: 5px;
	}

/* Responsive layout  */
/*	Ligne de prix (tarifs.php) : libellé/XPF/€ alignés horizontalement sur grand écran.	*/
/*	Volontairement une classe dédiée plutôt que de réutiliser .lignoriz/.box (partagées	*/
/*	avec d'autres usages, ex. le pied de page) : évite de changer leur comportement		*/
/*	ailleurs sur le site pour un besoin propre aux grilles tarifaires.						*/
.ligne-tarif
	{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: baseline;
	padding: 8px 10px;
	box-sizing: border-box;
	border-radius: 5px;
	}

/*	Alternance de fond (zébrage) une ligne sur deux, pour la lisibilité — convention à	*/
/*	reprendre sur tout futur listing en lignes du site (pas les grilles de vignettes/	*/
/*	cartes, où la notion de "ligne alternée" ne s'applique pas). nth-of-type(odd) et	*/
/*	non (even) : la 1ʳᵉ ligne doit porter la couleur différente du fond général, pas	*/
/*	la 2ᵉ (préférence explicite d'Hervé, 30/08/2026). Couleur : --fnd_moycl, la même	*/
/*	que le fond du formulaire (cssmenu.css) — pour garder une palette de gris cohérente	*/
/*	sur tout le site.																	*/
.ligne-tarif:nth-of-type(odd)
	{
	background-color: var(--fnd_moycl);
	}

.ligne-tarif .tarif-label	{ width: 55%; }
.ligne-tarif .tarif-xpf	{ width: 25%; }
.ligne-tarif .tarif-eur	{ width: 20%; }
.ligne-tarif .tarif-note	{ width: 45%; }

@media (max-width: 800px)
	{
	.boxdrapeau {flex-direction: raw;}

	/*	Variante empilée pour smartphone : libellé/XPF/€ chacun sur leur ligne plutôt qu'en	*/
	/*	défilement horizontal (comportement par défaut d'un flex-row nowrap trop étroit).	*/
	.ligne-tarif
		{
		flex-direction: column;
		}
	.ligne-tarif .tarif-label,
	.ligne-tarif .tarif-xpf,
	.ligne-tarif .tarif-eur,
	.ligne-tarif .tarif-note
		{
		width: 100%;
		}
	.ligne-tarif .tarif-label { font-weight: bold; }

	/*	Bug d'origine du gabarit : .overlay est à width:40% en dur (voir plus haut dans	*/
	/*	ce fichier), pensé pour un écran large — en format smartphone le pavé devient	*/
	/*	plus étroit que son propre texte (H1/H2), qui déborde. Occupe toute la largeur	*/
	/*	disponible ici, en gardant la marge de 5% (left:5% dans .overlay) symétrique.	*/
	.overlay {width: 90%;}
	}


/*******************IFRAME RESPONSIVE****************************/
.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  /*	padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* ********************************************* */

div.polaroid {
  width: 100%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box
}

div.container {
  text-align: center;
  padding: 5px 5px;
}

/* ********************************************* */

.slide
	{
	position: relative; /* Nécessaire pour que l'overlay-text soit positionné par rapport à ce conteneur */
	}

img
	{
	width: 100%; /* Pour que l'image prenne tout l'espace du conteneur */
	height: auto;	/*	Voir le commentaire de la règle img{} plus haut dans ce fichier — même cause */
	display: block;
	}

.overlay-text
	{
	position: absolute;
	/*	bottom: 10px; /* Positionne le texte en bas de l'image, ajuste selon besoin */
	top: 20%;
	left: 5%; /* Centre horizontalement */
	/*	transform: translateX(-50%); /* Centre parfaitement */
	color: var(--txt_norma);
	background-color: rgba(255, 255, 255, 0.55); /* Fond semi-transparent pour que le texte ressorte */
	padding: 20px 20px;

	font-family: var(--font-texte);
	font-size: 2.6em;
	font-weight: 700;
	font-style: bold;
	letter-spacing: 6px;
	line-height: 1.0;


	text-align: center;
	border-radius: 25px;
	}


/* **************PAVE MAGE AVEC TEXTE SUR FOND TRANSPARENT****************** */
 
.paveimg
	{
	position: relative;
	max-width: 1000;
	margin: 0 auto;
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	padding: 15px;

	}

.paveimg .content 
{
 	position: relative;
  background: rgb(255, 255, 255); /* Fallback color */
  background: rgba(255, 255, 255, 0.7); /* Black background with 0.5 opacity */
  color: var(--txt_fonce);
  width: 100%;
	padding: 15px;
	box-sizing: border-box;
}


.paveimg a:link, .paveimg a:visited
	{
	color: var(--txt_fonce);
	font-weight:normal;
	text-decoration:none;
	}

.paveimg a:hover
	{
	color: var(--txt_fonce);
	font-weight:normal;
	background-color:none;
	text-decoration:none;
	}

.paveimg a:active
	{
	color: var(--txt_fonce);
	font-weight:bold;
	background-color:transparent;
	text-decoration:none;
	}

@media only screen and (max-width: 800px) 
	{
  .paveimg .content
  	{
    width: 100%;
  	}
	}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}