/* Mise en Forme Pages */
:root {
	color-scheme: light dark;
	--body-BgCol: #F2F2F2; /* Gris clair , #E0E0E0; white; */
	--body-Color: #000000; /* black; */
	--awards-Color: #D8FBD8;
	--anchorN-Color: #0000EE;
	--anchorV-Color: #520488;
	--InpFdNrm-Color: White;
	--InpFdRempl-Color: LemonChiffon; /* #FFFACD LightGoldenRodYellow; */
	--InpFdLire-Color: Linen; /* #FAF0E6 LightGreen; PaleGreen; DarkSeaGreen; PaleGreen; MediumOrchid; */
	--InpFdInterm-Color: Linen; /* #FAF0E6 LightGreen; PaleGreen; DarkSeaGreen; PaleGreen; MediumOrchid; */
	--InpFdActu-Color: DarkSeaGreen; /* #8FBC8F PaleGreen; MediumOrchid; */
	--InpFd_Rslt-Color: Plum; /* #DDA0DD MediumOrchid; */
	/* G-letter-spacing: 0; */
	--pgEnt-BgCol: #FFFFFF;; /* white; */
	--imgBrdCol: #DDDDDD;
	--imgHoverCol: rgba(0, 140, 186, 0.5);
	--mBar-BgCol: #FFFFFF;
	--mBarSurv-BgCol: #E2E2E2;
	--mBar-Color: #000000;
}
@media (prefers-color-scheme: dark) {
	:root {
		--body-BgCol: #2B2B2B; /* #1C1C1E; */
		--body-Color: #FEFEFE;
		--awards-Color: #283828;
		--anchorN-Color: #5FA9EE;
		--anchorV-Color: #8F74A2;
		--InpFdNrm-Color: #1C1C1E;
		--InpFdRempl-Color: #4F3A1D; /* DarkKhaki LightGoldenRodYellow; */
		--InpFdLire-Color: #6A3026; /* #A0522D SaddleBrown Sienna RosyBrown; #CC6600; */
		--InpFdInterm-Color: #6A3026; /* #A0522D SaddleBrown Sienna RosyBrown; #CC6600; */
		--InpFdActu-Color: #0F4C0F; /* PaleGreen; MediumOrchid; */
		--InpFd_Rslt-Color: #5D205D; /* MediumOrchid; */
		/* G-letter-spacing: 0.1; */
		--pgEnt-BgCol: #1C1C1E;
		--imgBrdCol: #4A4A4A;
		--imgHoverCol: rgba(0, 200, 186, 0.5);
		--mBar-BgCol: #1C1C1E;
		--mBarSurv-BgCol: #4C4C4E;
		--mBar-Color: #FEFEFE;
	}
	img {
		filter: grayscale(20%);
	}
	input {
		/* background-color: #1C1C1E; NON car on ne peut plus le changer par Class sinon */
		border-color: #404040;
		color: #FEFEFE;
	}
	textarea {
		/* background-color: #1C1C1E; NON car on ne peut plus le changer par Class sinon */
		color: #FEFEFE;
	}
	select {
		background-color: #1C1C1E;
		color: #FEFEFE;
	}
	object {
		background-color: #4C4C4E; /* Pas #1C1C1E car trop foncé car texte reste noir sous certains navigateurs */
		color: #FEFEFE; /* C'est que le tour (boder), pas le texte ?! */
	}
}
body { /* Si marges définies pour les frame ça ne marche pas avec FireFox, seulement avec Safari */
	/* margin-left:10px; margin-right:10px; margin-top:10px; margin-bottom:10px; */
	background-color: var(--body-BgCol);
	color: var(--body-Color);
	max-width: 1200px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
}
img { /* NoOcr , évite que l'utilisateur sélectionne le texte d'une image */
	-webkit-user-select: none; /* !important; */
	cursor: auto; /* default; */
}
input { /* Je mets aussi le code ppour NoOcr car ça sélectionne le texte du bouton Paypal sinon */
	font-size: small; /* x-small */
	-webkit-user-select: none; /* !important; */
	cursor: auto; /* default; */
}
textarea {
	font-size: small; /* x-small */
	/* resize: none; */
	resize: vertical; /* user can resize vertically, but width is fixed */
}
a:link { /* Lien normal (non visité) */
	color: var(--anchorN-Color);
}
a:visited { /* Lien ayant été cliqué (visité) */
  color: var(--anchorV-Color);;
}
div.DivPgEntiere {
	max-width: 1000px; /* Doit être plus grand que mes Div plus bas */
	margin: auto;
	background-color: var(--pgEnt-BgCol);
	padding: 20px;
	/* padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px; */
}
div.DivCentr {
	text-align: center;
	/* margin: auto; */
	/* width: 50%; */
	/* border: 3px solid green; */
	/* padding: 10px; */
}
div.DivPgauchA {
	/* position: fixed;
	left: 0;
	overflow: auto;
	height: 600px;
	top: 0;
	border: 1px solid black; */
	text-align: left;
	float:left;
	width: 34px;
}
div.DivPgauchB {
	/* position: fixed;
	left: 0;
	overflow: auto;
	height: 600px;
	top: 0;
	border: 1px solid black; */
	text-align: left;
	float:left;
	width: 80px;
}
div.DivPdroit {
	/* position: fixed;
	left: 0;
	overflow: auto;
	vertical-align: middle;
	height: 600px;
	top: 0;
	border: 1px solid black; */
	text-align: right;
	float:right;
	width: 70px;
}
div.DivPpalBox { /* Div contenant les images PayPal */
	float: left;
	/* width: 70px;
	border: 0;
	border-radius: 10px;
	border: 5px solid #0055EE;
	background-color: #0066FF; */
	padding: 0px;
}
div.DivLcmtBox { /* Div contenant le lien Awards, Ratings & Reviews */
	float: right;
	background-color: var(--awards-Color);
	width: 240px;
	text-align: center;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}
div.DivPage {
	margin-top: 0;
	/* margin-left: 202px; A modifier suivant largeur Cadre de Index.html
	/* overflow: scroll;
	float:left; */
}
div.DivPgColAB { /* Même chose dans  DivPgColAB  et  DivCmtColAB  (sauf larg colonnes) */
	/* max-width: 900px; */
	display: grid;
	grid-template-columns: 45% auto; /* 600px 1fr; */
	/* background-color: #F8F8F8; #E0E0E0; */
	grid-gap: 0px 20px; /* Espace entre chaque cellule  Haut/Bas et Gauche/Droite */
	padding: 0px 0px 0px 0px; /* Espace autour de tout le cadre des cellules  top right bottom left */
}
/* Responsive  Même LargeurMax dans  DivPgColAB  et  DivDlColABCD  */
/* @media (max-width: 1000px) { */
@media only screen and (max-width: 1000px) { /*  and (max-width: 800px), only(max-width: 800px) */
	div.DivPgColAB {
	/* grid-template-areas: "a" "d"; */
	grid-template-columns: 1fr;
	grid-gap: 0px 0px; /* Espace entre chaque cellule  Haut/Bas et Gauche/Droite */
	padding: 0px 0px 0px 0px; /* Espace autour de tout le cadre des cellules  top right bottom left */
	}
}
div.PgColA {
	grid-column: 1; /* placement en colonne 1 */
}
div.PgColB {
	grid-column: 2; /* placement en colonne 2 */
}
.PgImg {
	/* width: 96%; 100%; 1050px; */
	max-width: 96%; /* 100%; 1050px; */
	height: auto; /* 100%; 150px; */
	object-fit: contain; /* cover; */
	border: 2px solid var(--imgBrdCol); /* #DDDDDD; */
	border-radius: 4px;
	padding: 4px;
}
.PgImg:hover {
	box-shadow: 0 0 2px 1px var(--imgHoverCol); /* rgba(0, 140, 186, 0.5); DarkMode? */
}
.ImgLnPgA {
	opacity: 1;
	transition: 0.3s;
}
.ImgLnPgA:hover {
	opacity: 0.5;
}
.ImgLnPgB {
	opacity: 0.7;
	transition: 0.3s;
}
.ImgLnPgB:hover {
	opacity: 1;
}
.ImgLnPgC {
	/* Rien */
}
.ImgLnPgC:hover { /* Comme  DrapImgC  pour le cadre bleu  */
	box-shadow: 0 0 2px 1px var(--imgHoverCol);
}
.DrapImgO {
	/* border: 20px solid transparent; */
	padding: 2px 4px 2px 4px; /* top right bottom left */
	vertical-align: -4px; /* baseline length % sub super top text-top middle bottom text-bottom initial inherit */
}
.DrapImgC {
	/* border: 20px solid transparent; */
	padding: 2px 4px 2px 4px; /* top right bottom left */
	vertical-align: -4px; /* baseline length % sub super top text-top middle bottom text-bottom initial inherit */
	opacity: 0.6;
	/* transition: 0.3s; */
}
.DrapImgC:hover { /* Comme  ImgLnPgC  pour le cadre bleu  */
	opacity: 1;
	box-shadow: 0 0 2px 1px var(--imgHoverCol);
}
div.DivDlColABCD {
	display: grid; /* Plus maintenant : Ci-dessous, la somme des colonnes doit être  @media (max-width: xxx)  */
	grid-template-columns: 200px 200px 200px 200px; /* 600px 1fr; */
	grid-gap: 0px 0px; /* Espace entre chaque cellule  Haut/Bas et Gauche/Droite */
	padding: 0px 20px 0px 20px; /* Espace autour de tout le cadre des cellules  top right bottom left */
}
/* Responsive  Même LargeurMax dans  DivPgColAB  et  DivDlColABCD  */
@media (max-width: 1000px) { /* Ou somme des 3 largeurs de colonnes ci-dessus */
	div.DivDlColABCD {
	/* grid-template-areas: "a" "d"; */
	grid-template-columns: 200px 200px; /* 1fr; */
	grid-gap: 0px 0px; /* Espace entre chaque cellule  Haut/Bas et Gauche/Droite */
	padding: 0px 20px 0px 20px; /* Espace autour de tout le cadre des cellules  top right bottom left */
	}
}
.DlColA {
	grid-column: 1; /* placement en colonne 1 */
}
.DlColB {
	grid-column: 2; /* placement en colonne 2 */
}
.DlColC {
	grid-column: 3; /* placement en colonne 3 */
}
.DlColD {
	grid-column: 4; /* placement en colonne 4 */
}
.RectDwnl {
	display: block;
	/* background: #73AD21; */
	padding: 2px;
	width: 144px;
	height: 32px;
	border-radius: 10px;
	border: 5px solid #0055EE; /* outset MidnightBlue; */
	background-color: #0066FF; /* RoyalBlue; */
	/* text-align: center;
	vertical-align: text-top; middle;
	text-decoration: none; */
	opacity: 0.7;
	transition: 0.3s;
}
.RectDwnl:hover {
	opacity: 1;
}
.Coul_FdSep {
	background-color: var(--body-BgCol);
}
.CadrArrondiT {
	border-radius: 10px 10px 10px 10px; /* haut gauche, haut droite, bas droite, bas gauche */
}
.CadrArrondiH {
	border-radius: 10px 10px 0 0; /* haut gauche, haut droite, bas droite, bas gauche */
}
.CadrArrondiB {
	border-radius: 0 0 10px 10px; /* haut gauche, haut droite, bas droite, bas gauche */
}
.Titre_Page {
	font-size: x-large;
	font-weight: bold;
	/* color: #006633; Voir en DarkMode */
}
.St_Titre_Page {
	font-size: large;
	font-weight: bold;
	/* color: #006633; */
}
.Ss_Titre_Page { /* En fait le titre des pages, correspond au ss_titre_somm (Sommaire) */
	font-size: medium;
	font-weight: bold; /* Sauf que ss_titre_somm pas T_Gras */
	/* color: #00FF66; Voir en DarkMode */
}
.Ptite_Note {
	font-size: x-small;
}
.Code_Src {
	color: #996600; /* Marron , idem en DarkMode */
}
.Coul_Imp {
	color: #FF0000; /* Rouge , idem en DarkMode */
}
.Coul_Gris { /* Gris , idem en DarkMode */
	color: gray;
}
.T_Gras {
	font-weight: bold;
}
.T_Soul {
	text-decoration: underline;
}
.T_exp { /* Même taille que ci-dessous */
	vertical-align: super;
	font-size: x-small; /* 70%;  trop grand:smaller */
	line-height: 70%;
}
.T_ind { /* Même taille que ci-dessus */
	vertical-align: sub;
	font-size: x-small; /* 70%;  trop grand:smaller */
	line-height: 70%;
}
.SurLign {
	background-color: yellow;
}
.Transp_b { /* Même taille que ci-dessus */
	opacity: 0.4;
}
.NonVisibl {
	visibility: hidden;
}
table.Tbl_SsBdSsEsp {
	border: 0; /* 1px solid red; */
	border-collapse: collapse; /* separate; */
	/* display: inline-table;
	margin: 1em;
	border: dashed 6px;
	border-width: 6px; */
}
table.Tbl_SsBdSsEsp th, table.Tbl_SsBdSsEsp td {
	border: 0; /* 1px solid green; */
	padding: 0; /* 6px; */
	/* padding-top: 3px;
	padding-bottom: 20px;
	padding-left: 30px;
	padding-right: 40px; */
}
table.Tbl_SsBdAvEsp5 {
	border: 0; /* 1px solid green; */
	border-collapse: separate; /* collapse; */
	border-spacing: 5px;
	/* display: inline-table;
	margin: 1em;
	border: dashed 6px;
	border-width: 6px; */
}
table.Tbl_SsBdAvEsp5 th, table.Tbl_SsBdAvEsp5 td {
	border: 0; /* 1px solid green; */
	padding: 0; /* 6px; */
	/* padding-top: 3px;
	padding-bottom: 20px;
	padding-left: 30px;
	padding-right: 40px; */
}
/* table.Tbl_Spec
	tr:nth-child(even) { background-color: #f2f2f2; }
	/* tr { height: 26px; } */
tr.Tbl_HtLg { /* Ci-dessus c'est toutes les lignes, là que les lignes où on applique la Class */
	height: 26px;
}
.Inpt_Txt {
	text-align: left;
	/* color: black; par défaut mais si on le définit on ne peut plus la changer par une autre class */
	/* background: LemonChiffon; ou LightGoldenRodYellow; */
}
.Inpt_Nbr {
	text-align: right;
	/* color: black; par défaut mais si on le définit on ne peut plus la changer par une autre class */
	/* background: LemonChiffon; ou LightGoldenRodYellow; */
}
.Inpt_Ta {
	width: 60px;
	height: 14px;
}
.Fd_Nrm {
	background: var(--InpFdNrm-Color);
}
.Fd_Rempl {
	background: var(--InpFdRempl-Color);
}
.Fd_Lire {
	background: var(--InpFdLire-Color);
}
.Fd_Interm {
	background: var(--InpFdInterm-Color);
}
.Fd_Actu {
	background: var(--InpFdActu-Color);
}
.Fd_Rslt {
	background: var(--InpFd_Rslt-Color);
}

/* ### Début CSS MenuBar ### */
.TteLargeur { /* https://fr.w3docs.com/snippets/css/comment-creer-un-menu-de-navigation-deroulant-avec-css.html */
	width: 100%; /* Pour le symbole Dropdown triangle il y a :  ∇ ∨ &#9660 &#9662 &#9663 */
	height: 33px;
	margin: 0;
	z-index: 99;
	position: relative;
	background-color: var(--mBar-BgCol); /* Turquoise; #444444; a3a1a1; Couleur d'arrière plan de la MenuBar */
}
.MbarEntiere {
	/* height: 36px; */
	padding: 0 60px 0 40px; /* Haut Droit Bas Gauch - Ecart extérieur de la MenuBar */
	margin: 0; /* Marge du haut de la MenuBar */
	position: absolute;
	top: 0; /* -1px; */
}
.MbarSplA { /* MenuBar sans menus */
	display: inline-block;
	position: relative;
	outline: none;
	background-color: var(--body-BgCol); /* Salmon #444444; Couleur de la MenuBar */
	text-align: left; /* center; */
	font: normal bold 13px/1em Arial, Verdana, Helvetica;
	/* width: 120px; */
	height: 14px;
	padding: 10px 6px 10px 6px; /* Haut Droit Bas Gauch */
	margin: 0 -2px 0 -2px; /* Haut Droit Bas Gauch */
	/* opacity: 0.8; */
}
.MbarSplB { /* MenuBar sans menus */
	padding: 8px 6px 8px 6px; /* */
	color: var(--mBar-Color); /* green; Couleur du texte */
	cursor: pointer;
}
.MbarSplA a { /* MenuBar sans menus */
	color: var(--mBar-Color); /* green; Couleur du texte */
	text-decoration: none;
}
.MbarSplB a { /* MenuBar sans menus */
	color: var(--mBar-Color); /* green; Couleur du texte */
	text-decoration: none;
}
.MbarSplB:hover { /* MenuBar sans menus */
	background-color: var(--mBarSurv-BgCol); /* ; #444444; Couleur lors du survol */
}
.MbarGnrl { /* dd container - MenuBar Générale */
	display: inline-block;
	position: relative;
	outline: none;
	background-color: var(--body-BgCol); /* Salmon #444444; Couleur de la MenuBar */
	text-align: left; /* center; */
	font: normal bold 13px/1em Arial, Verdana, Helvetica;
	/* width: 120px; */
	height: 14px;
	padding: 10px 8px 10px 4px; /* Haut Droit Bas Gauch */
	margin: 0 -2px 0 -2px; /* Haut Droit Bas Gauch */
	/* opacity: 0.8; */
}
.MbarBtn { /* MenuBar bouton avec menus */
	padding: 8px 6px 8px 6px; /* Haut Droit Bas Gauch */
	color: color: var(--mBar-Color); /* green; Couleur du texte */
	cursor: pointer;
	transition: 0.35s ease-out;
}
.MbarGnrl .MbarGnrl-content { /* dd content */
	position: absolute;
	top: 16px ; /* 50%; */
	background-color: var(--mBarSurv-BgCol); /* ; #444444; Couleur lors du survol */
	width: 132px; /* min-width: 120%; */
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
	z-index: 100000;
	visibility: hidden;
	opacity: 0;
	transition: 0.35s ease-out;
}
.MbarGnrl-content a {
	color: var(--mBar-Color); /* green; Couleur du texte */
	background-color: var(--body-BgCol); /* Salmon #444444; Couleur de la MenuBar */
	padding: 10px 6px 10px 6px; /* Haut Droit Bas Gauch - Ecart du texte des MenuBar et Menus */
	display: block;
	text-decoration: none;
	transition: 0.35s ease-out;
}
.MbarGnrl-content a:hover {
	background-color: var(--mBarSurv-BgCol); /* ; #444444; Couleur lors du survol */
}
.MbarGnrl:focus .MbarGnrl-content { /* show dd content */
	outline: none;
	transform: translateY(20px);
	visibility: visible;
	opacity: 1; /* 0.8; Attention, si je mettais de l'opacité dans  MbarGnrl  ça s'ajouterait */
}
.MbarBtn:hover, .MbarGnrl:focus .MbarBtn {
	background-color: var(--mBarSurv-BgCol); /* ; #444444; Couleur lors du survol */
}
.MbarGnrl .db2 { /* mask to close menu by clicking on the button */
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0; opacity: 0;
	cursor: pointer;
	z-index: 10;
	display: none;
}
.MbarGnrl:focus .db2 {
	display: inline-block;
}
.MbarGnrl .db2:focus .MbarGnrl-content {
	outline: none;
	visibility: hidden;
	opacity: 0;
}
/* ### Fin CSS MenuBar ### */