/* ---------------------------------------------------- */
/* ---------------------------------------------------- */
/* Styles site phdn.org.                                */
/* Copyright Gilles Karmasyn 2000-2016                  */
/* ---------------------------------------------------- */


@font-face{
    font-family : 'monteserrat';
    src: url('fonts/montserrat-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/montserrat-light-webfont.woff') format('woff'),
         url('fonts/montserrat-light-webfont.ttf') format('truetype'),
         url('fonts/montserrat-light-webfont.svg#montserratlight') format('svg');
	font-weight: normal;
}
@font-face{
    font-family : 'monteserrat';
    src: url('fonts/montserrat-bold-webfont.eot');
    src: url('fonts/montserrat-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/montserrat-bold-webfont.woff') format('woff'),
         url('fonts/montserrat-bold-webfont.ttf') format('truetype'),
         url('fonts/montserrat-bold-webfont.svg#montserratbold') format('svg');
	font-weight: bold;
}
@font-face{
    font-family : 'monteserrat';
    src: url('fonts/montserrat-regular-webfont.eot');
    src: url('fonts/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/montserrat-regular-webfont.woff') format('woff'),
         url('fonts/montserrat-regular-webfont.ttf') format('truetype'),
         url('fonts/montserrat-regular-webfont.svg#montserratbold') format('svg');
    font-weight: 500;
}


/* ASTUCE DE FOLIE POUR AVOIR UNE AUTRE POLICE + SYMPA POUR ‘ ’ “ ” , */
/* LA MAGIE DE UNICODE RANGE */
/* https://jakearchibald.com/2017/combining-fonts/ */
/* Finalement Times est mieux que Lora pour ces caractères */

@font-face{
    font-family : 'monteserrat';
	src: local('Times New Roman');
	font-weight: normal;
	unicode-range: U+2018, U+2019, U+201D, U+201C, U+2C, U+201E;
}
@font-face{
    font-family : 'monteserrat';
	src: local('Times New Roman');
	font-weight: bold;
	unicode-range: U+2018, U+2019, U+201D, U+201C, U+2C, U+201E;
}




/*@font-face{
    font-family : 'monteserrat';
	src: url('fonts/montserrat-light-webfont.woff2') format('woff2'),
         url('fonts/montserrat-light-webfont.woff') format('woff');
	font-weight: normal;
}
@font-face{
    font-family : 'monteserrat';
    src: url('fonts/montserrat-bold-webfont.woff2') format('woff2'),
         url('fonts/montserrat-bold-webfont.woff') format('woff');
	font-weight: bold;
}
@font-face{
    font-family : 'monteserrat';
    src: url('fonts/montserrat-regular-webfont.woff2') format('woff2'),
         url('fonts/montserrat-regular-webfont.woff') format('woff');
    font-weight: 500;
}
*/

/* VERSION QUI MARCHE */
/*
@font-face{
    font-family : 'monteserrat';
	src:	url('fonts/Montserrat-Light.otf') format("opentype"),
			url('fonts/montserrat-light-webfont.woff') format('woff'),
			url('fonts/montserrat-light-webfont.svg') format('svg'),
			url('fonts/montserrat-light-webfont.ttf') format('truetype'),
			url('fonts/montserrat-light-webfont.eot') format('embedded-opentype');
	font-weight: normal;
}
@font-face{
    font-family : 'monteserrat';
  	src: 	url('fonts/Montserrat-Bold.otf')  format("opentype"),
			url('fonts/montserrat-bold-webfont.woff') format('woff'),
			url('fonts/montserrat-bold-webfont.svg') format('svg'),
			url('fonts/montserrat-bold-webfont.ttf') format('truetype'),
			url('fonts/montserrat-bold-webfont.eot') format('embedded-opentype');
	font-weight: bold;
}
@font-face{
    font-family : 'monteserrat';
	src:	url('fonts/Montserrat-Regular.otf') format("opentype"),
			url('fonts/montserrat-regular-webfont.woff') format('woff'),
			url('fonts/montserrat-regular-webfont.svg') format('svg'),
			url('fonts/montserrat-regular-webfont.ttf') format('truetype'),
			url('fonts/montserrat-regular-webfont.eot') format('embedded-opentype');
	font-weight: 500;
}
*/


/* VERSION QUI MARCHE AUSSI + IE qui ne marche pas*/
/*
@font-face{
    font-family : 'monteserrat';
    src: 	url('fonts/montserrat-light-webfont.eot');
    src: 	url('fonts/montserrat-light-webfont.eot?#iefix') format('embedded-opentype'),
			url('fonts/Montserrat-Light.otf') format("opentype"),
			url('fonts/montserrat-light-webfont.woff') format('woff'),
			url('fonts/montserrat-light-webfont.svg') format('svg'),
			url('fonts/montserrat-light-webfont.ttf') format('truetype');
			font-weight: normal;
}
@font-face{
    font-family : 'monteserrat';
    src: 	url('fonts/montserrat-light-webfont.eot');
    src: 	url('fonts/montserrat-light-webfont.eot?#iefix') format('embedded-opentype'),
			url('fonts/Montserrat-Bold.otf')  format("opentype"),
			url('fonts/montserrat-bold-webfont.woff') format('woff'),
			url('fonts/montserrat-bold-webfont.svg') format('svg'),
			url('fonts/montserrat-bold-webfont.ttf') format('truetype');
			font-weight: bold;
}
@font-face{
    font-family : 'monteserrat';
    src: 	url('fonts/montserrat-regular-webfont.eot');
    src: 	url('fonts/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'),
			url('fonts/Montserrat-Regular.otf') format("opentype"),
			url('fonts/montserrat-regular-webfont.woff') format('woff'),
			url('fonts/montserrat-regular-webfont.svg') format('svg'),
			url('fonts/montserrat-regular-webfont.ttf') format('truetype');
	font-weight: 500;
}
*/
@font-face{
    font-family : 'lora';
  	src: 	url('fonts/lora-bold-webfont.woff2') format('woff2'),
			url('fonts/lora-bold-webfont.woff') format('woff'),
			url('fonts/Lora-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}
@font-face{
    font-family : 'lora';
	src:	url('fonts/lora-regular-webfont.woff2') format('woff2'),
			url('fonts/lora-regular-webfont.woff') format('woff'),
			url('fonts/Lora-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face{
    font-family : 'lora';
  	src: 	url('fonts/lora-bolditalic-webfont.woff2') format('woff2'),
			url('fonts/lora-bolditalic-webfont.woff') format('woff'),
			url('fonts/Lora-Bolditalic.ttf') format('truetype');
	font-weight: bold;
    font-style: italic;
}
@font-face{
    font-family : 'lora';
	src:	url('fonts/lora-italic-webfont.woff2') format('woff2'),
			url('fonts/lora-italic-webfont.woff') format('woff'),
			url('fonts/Lora-Italic.ttf') format('truetype');
	font-weight: normal;
    font-style: italic;
}

/* 	ATTENTION FONT-FAMILY DOIT ETRE REDEFINI AVEC monteserrat 
	DANS TOUS LES TAGS AVEC DU TEXTE MAIS PAS DANS BODY, SINON
	LARGEUR KO DANS IE VOIRE FF
*/

BODY { 
    font-family: monteserrat, verdana, arial, sans-serif;
    
    /* ESSAI CSS 2018 */
    font-size: 14pt;

	background-image: url("images/mybckgroundOLD.jpg"); 
	background-attachment: fixed;   
    margin: 0px;
    padding: 0px;
    z-index: 0;
}

#toutelapage
{

    /* GIK FLEX 2018 */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  justify-content: -webkit-center;
  justify-content: center;

	XXwidth: 56em;
	width: 61em;
	
	XXborder: 3px solid green;
    XXmargin-left: auto;
    XXmargin-right: auto;	
    XXmargin-top: 2ex;
    margin-left: calc(((100% - 61em)/2));
    XXmargin-right: auto;
}
@media(max-width: 1024px) {
#toutelapage
	{
		width: 37em;
		flex-direction: column;
	    XXXmargin-left: 10px;
	    XXXmargin-right: 10px;
	    margin-left: auto;
	    margin-right: auto;

		padding-left: 0px;
		padding-right: 0px;
		XXXborder: 1px solid green;
	}
}

@media(max-width: 800px) {
body 
	{
		width: 100%;
	    font-size: 16pt;
	}
#toutelapage
	{
		width: 100%;
		flex-direction: column;
	    margin-left: 0px;
	    margin-right: 5px;
	    XXmargin-left: auto;
	    XXmargin-right: auto;

		padding-left: 0px;
		padding-right: 0px;
		XXborder: 1px solid green;
	}
BLOCKQUOTE 
	{
	    margin-right: 0px;
	}
}

@media(max-width: 500px) {
body 
	{
		width: 100%;
	    font-size: 12pt;
	}
}

.afterbody {

    /* GIK FLEX 2018 */
    order: 2;
    
	box-sizing: border-box; /* POUR INCLURE LES PADDING ET BORDER DANS LA WIDTH */
	
	/* ESSAI CSS 2018 */
    /* width: 60ex; */
	width: 37em;

    /* background-image: url("images/mybckground.jpg"); */
	/* firefox a un bug d'affichage avec une image de background repetable sur de longues pages => couleur ok*/
	background-color: Linen;

    margin-top: 0px;
    margin-left: 2ex;
    margin-right: 2ex;
	XXpadding-left: 2ex;
	XXpadding-right: 2ex; 
	padding-left: 1em;
	padding-right: 1em; 
	XXpadding-top: 0px!important; /* important ‡ cause d'IE 9 qui fait chier avec son inline style top ‡ 6ex!!! */
	padding-bottom: 2ex;
	XXXXtop: 0px; /* FLEX */
	
	border-right: 1px solid gray;	
	border-left: 1px solid gray;
	border-bottom: 1px solid gray;
	border-top: 1px solid gray;
	
    z-index: 2;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
@media(max-width: 1024px) {
.afterbody 
	{
		XXpadding-top: 6em;
		width: 37em;
		margin-top: 0px;
	    margin-left: auto;
	    margin-right: auto;
	}
}
@media(max-width: 800px) {
.afterbody 
	{
		XXpadding-top: 6em;
		width: 100%;
		margin-top: 0px;
	    margin-left: 0px;
	    margin-right: 0px;
	}
}

H1, H2, H3 {
    font-family: arial;
}

@media(max-width: 800px) {
h1 
	{
	  font-size: 20px;
	}
h2 
	{
	  font-size: 18px;
	}
h3 
	{
	  font-size: 16px;
	} 
h4 
	{
	  font-size: 14px;
	}
}

@media(max-width: 500px) {
h1 
	{
	  font-size: 18px;
	}
h2 
	{
	  font-size: 16px;
	}
h3 
	{
	  font-size: 14px;
	} 
h4 
	{
	  font-size: 12px;
	}
}

SPAN.titresection {
    font-family: monteserrat, arial;
    font-weight: bold;
    font-size: 140%;
	line-height: 1.2em;
}
SPAN.tresgros {
    font-weight: bold;
    font-size: 140%;
}
.plusgros {
    font-weight: bold;
    font-size: 110%;
}
.bigger {
    font-size: 110%;
}

@media(max-width: 800px) {
	SPAN.titresection {
		font-size: 110%;
		line-height: 1.2em;
	}
	SPAN.tresgros {
		font-weight: bold;
		font-size: 110%;
	}
	.plusgros {
		font-weight: bold;
		font-size: 105%;
	}
	.bigger {
		font-size: 105%;
	}
}

SPAN.minrouge {
    color: red;
    font-size: 75%;
}
.pluspetit {
    font-size: 75%;
}
SPAN.trespetit {
    font-size: 65%;
}
.fine
{
    font-size: 50%;
}
.vraiefine
{
	white-space: nowrap;
}
SPAN.zerow
{
	font-size: 0%;
}

/* -------------------------------------------------------------------- */
/* Pour resoudre le probleme penible de chrome qui n'applique pas la */
/* propriete nowrap aux fixed width spaces     &thinsp     */
/* on utilise l'espace insecable etroit qu'on ajoute automatiquement */
/* apres les guillemets ouvrants, avant les guillemets fermants */
/* et une fois avant les deux points */
 
/* U+202F = &#8239 = &thinsp non breakable = narrow no-break space */
SPAN.gouvr::after
{
    content: "\202F";
}
SPAN.gferm::before
{
    content: "\202F"; 
}
SPAN.ponctuesp::before
{
    content: "\202F"; 
}

/* La directive ci-après permet de n'être appliquée QUE par Safari */
/* vu sur https://www.ryadel.com/en/css3-media-query-target-only-ie-ie6-ie11-firefox-chrome-safari-edge/ */
/* Safari est KO avec \202F auquel il attribue une largeur nulle! */
/* On résoud en utilisant \2009 =   + nowrap qui évite les retours */
/* a la ligne intempestifs. On ne le fait pas pour tous les navigateurs /*
/* car Chrome n'applique pas correctement nowrap sur \2009 */

/* update 2020: on utilise \2007 (numeric space) qui est non breaking et de dimension fixe */
/* on ajoute font-size: 80%; pour avoir une espace fine */

@media not all and (min-resolution:.001dpcm) { 
    @media {
    /*
  	  Safari (10.1+)
      styles applied only to Safari browsers (any version and any device)
     */
	SPAN.gouvr
	{	
		/* white-space: nowrap!important; */
	}
	SPAN.gouvr::after
	{
	    XXcontent: '\2013\A0'; 
	    XXcontent: '\2009'; 
	    content: '\2007';
		font-size: 90%;
		/* white-space: nowrap!important; */
	}
	SPAN.gferm::before
	{
	    content: '\2007';
		font-size: 90%;
		/* white-space: nowrap!important; */
	}
	SPAN.ponctuesp:before
	{
	    content: '\2007';
		font-size: 100%;
		/* white-space: nowrap!important; */
	}
}}


SPAN.insecable
{
	white-space: nowrap;
}


SPAN.gillescopy {
    font-family: lora, "Times New Roman", Palatino, Times, serif;
    font-size: 65%;
    font-style: italic;
}
SPAN.pagecour { 
    font-weight: bold;
    font-style: italic;
    /* color: #616161; */
    /* color: #993300; */ 
    color: #336699; 
}
SPAN.pliage
{
    font-size: 75%;
	color: purple;	
    font-style: italic;
}
SPAN.pliage:hover
{
	color: red;
	cursor: pointer;
	border-bottom: 1px solid grey;
	border-top: 1px solid grey;
}
SPAN.guill {
    font-family: lora, "Times New Roman", Palatino, Times, serif;
    font-size: 110%;
}

A:link {
	text-decoration: none;
} 
A:visited {
	/* color: #AD0000; */
	text-decoration: none;
} 
/* A:hover  {color:#D60000; background-color: #FFFF9C} */
A:hover  {color:white; background-color: #3152A5}
A.appel-note {
    fontXX-family: lora, "Times New Roman", Times, serif;
    font-family: monteserrat, verdana, arial, sans-serif;
    text-decoration: none;
    font-style: normal;
    font-weight: normal;
	margin-left: 1px;
}
.citation-k  > p  > A.appel-note {
    font-size: 95%;
}
A.appel-note:hover {
    text-decoration:underline;
    color: blue;
    background-color: transparent;
}
A.lienlire {
    font-size: 90%;
    font-style: italic;
/*    color: #003300; */
	color: purple;
}
A.lienlire:hover {
    color: red;
	background-color: transparent;     
	border-top: 1px solid grey;
	border-bottom: 1px solid grey;
}

.asanscouleur A:hover{
	background-color: transparent;     
}

A.asanscouleur:hover{
	background-color: transparent;     
}

span.lienlire {
    font-size: 85%;
    font-style: italic;
	color: purple;
}
span.lienlire:hover {
    color: red;
	background-color: transparent;     
	border-top: 1px solid grey;
	border-bottom: 1px solid grey;
	cursor:pointer;
}
A.lienpage {
	color: purple;
	border-bottom: 1px dotted purple;
}
A.lienpage:hover {
	color: white;
}
div.notesbaspage {
    font-family: monteserrat, Verdana, Arial, sans-serif;
    font-size: 80%;
}
div.notesbaspage > P {
    margin-bottom:0.75em;
    margin-top:0em;
}

.cesureok {
	/* CESURE PARTOUT
	// -ms-word-break: break-all;
	// word-break: break-all;
	// Non standard for webkit
	// word-break: break-word; */
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

P.colle
{
    margin-top: 0.35em;
    margin-bottom: 0em;
}
P.corpscolle
{
 	text-indent: 2em;
	margin-left: 2em; 
    margin-top: 0.35em;
    margin-bottom: 0em;
}
div.notesbaspage > P.corpscolle
{
 	text-indent: 2em;
	margin-left: 2em; 
    margin-top: 0.35em;
    margin-bottom: 0em;
}
P.corpscolle + P.corps
{
    margin-top: 0.75em;
}
SUP {
    font-weight: normal;
}
SUP.changeFONT {
    font-family: lora, "Times New Roman", serif;
}
SUP.petit {
    font-size: 80%;
    vertical-align: baseline;
    position: relative;
    bottom: 0.33em;
}
SUB.petit {
    font-size: 80%;
    vertical-align: baseline;
    position: relative;
    top: 0.33em;
}
SUP.trespetit {
    font-size: 70%;
    vertical-align: baseline;
    position: relative;
    bottom: 0.3em;
}
SUP.supnormal
{
}
A.appel-note>SUP
{
    font-size: 85%;
    vertical-align: baseline;
    position: relative;
    bottom: 0.33em;
}

/* INDISPENSABLE CAR SI ON APPLIQUE LE STYLE A BODY, IE et FF foirent */
/* div et blockquote font foirer aussi */ 
P, OL, UL, TABLE
{
    font-family: monteserrat, verdana, arial, sans-serif;
}

P {
	text-align: justify;
	/* ESSAIS GIK 092010 */
	line-height: 1.3em;
	font-size: 1em;
}
P.LegendeEtImageDte {
    text-align:right;
  	margin-bottom : 0px;
}
.legendedroite
{
    text-align:right;
    font-size: 70%;
    font-style: italic;
}
.legendegauche
{
    text-align:left;
    font-size: 70%;
    font-style: italic;
}
P.LegendeEtImageGche {
    text-align:left;
  	margin-bottom : 0px;
}
P.SuiteImage {
    text-indent: 2em;
    text-align:justify;
  	margin-top : 0px;
}
P.SuiteImageAlignGauche {
    text-align:left;
  	margin-top : 0px;
}

span.legendephoto
{
	font-family: Arial, Helvetica;
	font-size: x-small;
	font-style: italic;	
	background-color: Linen;
}
img.gauchephoto
{
	float: left;
	margin-bottom: 2px;
	margin-right:5px;
	width: 30%;
}
img.droitephoto
{
	float: right;
	margin-bottom: 2px;
	margin-left: 10px;
	width: 30%;
}
img.centrephoto
{
	float: center;
	margin-bottom: 2px;
	margin-left: 10px;
	width: 30%;
}

p.unephotoD
{
	text-align: right;
	margin-bottom: 5px;
	padding-bottom: 0px;
}
p.unephotoG
{
	text-align: left;
	margin-bottom: 5px;
	padding-bottom: 0px;
}

p.unephotoC
{
	text-align: center;
	margin-bottom: 5px;
	padding-bottom: 0px;
}
p.unephotoD + p
{
	margin-top: -1.5ex;
	padding-top: 0px;
}
p.unephotoG + p
{
	margin-top: -1.5ex;
	padding-top: 0px;
}
p.unephotoC + p
{
	margin-top: -1.5ex;
	padding-top: 0px;
}
p.unephotoDenBas
{
	position: relative;
	bottom: 10px;
}



P.tableau {
    text-align:justify;
  	margin-top : 0px;
}
P.corps
{
 	text-indent: 2em;
}
P.corpsdecalle
{
 	text-indent: 2em;
	margin-left: 7%;
}
P.sansespace
{
 	text-indent: 2em;
	margin-bottom: 0.3em;
	margin-top: 0.3em;
}
.noespace
{
	margin-bottom: 0.3em;
	margin-top: 0.3em;
}
.margehaute
{
	margin-top: 2em;
}

P.liste1
{
	text-align: justify;
	margin-left:3ex; 
	text-indent:-3ex
}
.exergue
{
    background-image: url("images/mybckgroundOLD.jpg");
    font-weight: bold;
    font-size: 90%;
    color: #990000;
    border: 2px solid gray;
    margin-left: 0px; 		
    margin-right: 100px;
    margin-bottom: 30px;
    padding: 5px;
}
HR 
{ 
	text-align: center ;
	margin-left: auto;
	margin-right: auto;
}
HR.demi { width: 50% }
TABLE.centrer {
    margin-left: auto;
    margin-right: auto;
}
TD.justifie  {text-align:justify }
TD.gauche  {text-align:left}
TD.docori {
    font-size: 100%;
    font-family: "Courier New", monospace;
    font-weight: bold;
}
TD.docorileft {
    font-size: smaller;
    font-family: "Courier New", serif;
    text-align: left;
    font-weight: bold;
}
/*
docorileft et doriright utilisés seulement dans Markiewitz (HCN study)
*/
TD.docoriright {
    font-size: smaller;
    font-family: "Courier New", serif;
    text-align: right;
    font-weight: bold;
}
TD.docoricenter {
    font-size: smaller;
    font-family: "Courier New", serif;
    text-align: center;
    font-weight: bold;
}
TD.listeliens {
	padding-bottom: 0.5em;
	text-align:justify;
}

.docori > p, .docorileft > p, .docoriright > p, .docoricenter > p {
    font-family: "Courier New", serif;
}

.tapuscrit
{
    font-family: "Courier", serif;
    font-weightXX: 600;
}



/*
BODY>BLOCKQUOTE {
    background-image: url("images/mybckground.jpg"); 
	width: 600px;
	margin-left: 40px;
	width: 680px;
	margin-left: 0;
	padding-top: 15px;
	padding-left: 40px;
	padding-right: 40px;
	NOborder-right: 2px solid gray;	
	NOborder-left: 4px solid gray;	
}
*/
table.listeliens 
{
	border-spacing: 0.7ex;
}
td.lafleche
{
	padding-top: 0.5ex;
	padding-right: 0.5em;

}
td.lafleche A:hover
{
    background-color: transparent;
}
table.listeliens tr
{
	vertical-align: top;
}
table.listeliens td
{
	padding-bottom: 1ex;
	line-height: 1.3em;
}
/* ---------------------------------------------------- */
/* Styles pour listes bibliogrpahiques
/* A remplacer un jour par le pseudo element marker
/* ---------------------------------------------------- */
table.listebib 
{
	border-spacing: 0.3ex;
}
table.listebib tr
{
	vertical-align: top;
}
table.listebib td
{
	padding-bottom: 0.3ex;
	line-height: 1.3em;
}
table.listebib2 tr
{
	vertical-align: top;
}
table.listebib2 TR TD:first-child 
{
    padding-right:2ex;
    font-weight: bold;
}
table.listebib2 TR TD:first-child:before
{
    content: "-";
}
table.listebib2 TR TD 
{
    text-align:justify;
    padding-bottom: 1.5ex;
}
table.imagescentr
{
    margin-left: auto;
    margin-right: auto;
	border: 1px solid grey;
}
table.imagescentr TR TD 
{
	padding: 1ex;
	font-style: normal;
}
table.imagescentr:hover
{
    text-decoration:underline;
    color: red;
    background-color: transparent;
}

.toutleblock
{
    margin: 0px;
    padding: 0px; 
    z-index: 0;
	padding-top: 2ex;
	padding-left: 2ex;
	padding-right: 2ex;
}


BODY>H1 
{
    background-image: url("images/mybckground.jpg"); 
	width: 600px;
	margin-left: 40px;
/*	width: 680px;
	margin-left: 0;
	padding-left: 40px;
	padding-right: 40px;
	NOborder-right: 2px solid gray;	
	NOborder-left: 4px solid gray;	*/
}
BODY>H2 
{
    background-image: url("images/mybckground.jpg"); 
	width: 600px;
	margin-left: 40px;
/*	width: 680px;
	margin-left: 0;
	padding-left: 40px;
	padding-right: 40px;
	NOborder-right: 2px solid gray;	
	NOborder-left: 4px solid gray;	*/
}
BODY>P {
    background-image: url("images/mybckground.jpg"); 
	width: 600px;
	margin-left: 40px;
/*	width: 680px;
	margin-left: 0;
	padding-left: 40px;
	padding-right: 40px;
	NOborder-right: 2px solid gray;	
	NOborder-left: 4px solid gray;	*/
}
BLOCKQUOTE 
{
	text-align:justify;
}
BLOCKQUOTE.citation {
    font-family: monteserrat, verdana, arial, sans-serif;
	text-align: justify;
	margin-left: 10%;
	margin-right: 5%;
	/* ESSAIS GIK 092010 */
	line-height: 1.3em;
}
@media(max-width: 800px) {
	BLOCKQUOTE.citation {
		margin-right: 0%;
	}
}

BLOCKQUOTE.citation-gen {
    font-family: monteserrat, verdana, arial, sans-serif;
	text-align: justify;
	margin-left: 10%;
	margin-right: 0%;
	line-height: 1.3em;
}
BLOCKQUOTE.citation-etroit {
	font-family: lora, "Times New Roman", Palatino, Times, serif;
	font-size: 110%;
	text-align: justify;
	margin-left: 10%;
	/* ESSAIS GIK 092010 */
	line-height: 1.3em;
}

BLOCKQUOTE.citation-guill {
    font-family: monteserrat, verdana, arial, sans-serif;
	text-align:justify;
	text-indent: -0.65em;
	margin-left: 12%;
	margin-right: 10%;
	line-height: 1.3em;
}

BLOCKQUOTE.citation-gen-guill {
    font-family: monteserrat, verdana, arial, sans-serif;
	text-align: justify;
	text-indent: -0.65em;
	margin-left: 12%;
	margin-right: 0%;
	line-height: 1.3em;
}

BLOCKQUOTE.ITAL
{
    font-family: monteserrat, verdana, arial, sans-serif;
	text-align:justify;
}
BLOCKQUOTE.global 
{
    font-family: monteserrat, verdana, arial, sans-serif;
  border: 1px solid black;
  margin-right: 3em;
  margin-left: 3em;
}
BLOCKQUOTE.petitretrait {
    font-family: monteserrat, verdana, arial, sans-serif;
	text-align:justify;
	margin-left: 3%;
	margin-right: 3%;
}
/* style necessaire pour les 66 QER a cause d'un blockquote non suivi dun p */
P+BLOCKQUOTE {
    font-family: monteserrat, verdana, arial, sans-serif;
}

P+H4 { margin-top: 2em; }
P+H3 { margin-top: 2em; }


/* Pour les 66 QER */
td > h4
{
	line-height: 1.4em;
}


div.citation-intro 
{
  font-family: monteserrat, arial, sans-serif;
  font-size: 90%;
  font-weight: bold;
  line-height: 1.1;
  text-indent: 1.5em;
  text-align: justify;
  margin-left: 50%;
  /* background-color: #ffef73; */
}
div.citation-intro > P 
{
  text-indent: 1.5em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
div.citation-txt 
{
  text-indent: 1.5em;
  text-align: justify;
  margin-left: 10%;
  line-height: 1.3em;
}
div.citation-txt > P
{
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
div.citation-txtcode 
{
  font-family: "Courier New", courier;
  text-align: justify;
  margin-left: 5%;
  font-size: 80%;
  font-weight: bold;
}
div.citation-txtcode > P
{
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
div.citation-auteur
{
  font-family: monteserrat, Arial, sans-serif;
  font-size: 90% /*smaller*/;
  font-weight: bold;
  line-height: 1.1;
  text-align: right;
  /* background-color: yellow; */
}
.urlcourrier
{
  font-family: "Courier New", courier;
  font-size: 80%;
  font-weight: bold;
}
.PETITCAP {
font-size: 90%;
}
span.nomfambib
{
	Ffont-weight: 500;
    font-variant: small-caps;
    text-transform: capitalize;
}


TABLE.centrerbern
{
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
}


LI 
{
	/* comme P */
	/* text-align: justify; */
	line-height: 1.3em;
	font-size: 1em;
	margin-bottom: 0.6em; /* sinon colle moche */
}

LI.avecMarge 
{
	margin-bottom: 6pt;
	/* ESSAIS GIK 092010 */
	line-height: 1.3em;
}

UL.article > LI 
{
	margin-bottom:6pt;
	line-height: 1.3em;
}

UL.wide > LI 
{
	margin-bottom:12pt;
	padding-left: 1em;
}

UL.avecMarge > LI 
{
	margin-bottom: 6pt;
	line-height: 1.3em;
}

OL.avecMarge > LI 
{
	margin-bottom: 6pt;
	line-height: 1.3em;
}

/* ci dessous la methode pour avoir enfin des listes avec tirets */

ul.listetiretANCIEN
{	
	list-style-type: none;

}
ul.listetiretANCIEN li:before

{
	content:"\2013\2002"; /* ATTENTION: \2002 est le caractère unicode */
					  /* pour &ensp; => evite de rajouter &ensp; apres <li> */
					  /* assez sioux, non? */
	position:relative;
	margin-left: -1em; /* optional, for multiline li element */
	Xleft: -0.4em;
	font-weight: 500;
}
ul.listetiretANCIEN > li
{
	margin-left: -1em;
	line-height: 1.3em;
	margin-bottom: 2ex;
}

/* Nouvelle version liste avec tiret, 2021, bien meilleur alignement */

ul.listetiret {
    list-style: none;
    padding-left: 0;
	margin-left: 1.3em;
}

ul.listetiret > li:before {
    content: "\2013";
    left: -0.7em;
    position: relative;
	font-weight: 500;
}

ul.listetiret > li {
	text-indent: -0.4em;
	line-height: 1.3em;
	margin-bottom: 2ex;
	borderX: 1px solid green;
}

ul.listetiretsmall > li {
	margin-bottom: 1ex!important;
}

ul.listetiretlong {
    list-style: none;
    padding-left: 0;
	margin-left: 1.3em;
}

ul.listetiretlong > li:before {
    content: "\2014";
    left: -0.7em;
    position: relative;
	font-weight: 800;
}

ul.listetiretlong > li {
	text-indent: -0.7em;
	line-height: 1.3em;
	margin-bottom: 2ex;
	borderX: 1px solid green;
}

ul.listetiretlong > li {
	margin-bottom: 1ex!important;
}



ul.dashed {
    list-style: none;
    padding-left: 0;
	margin-left: 1.5em;
}

ul.dashed > li:before {
    content: "\2013";
    left: -1em;
    position: relative;
	font-weight: 500;
}

ul.dashed > li {
	text-indent: -0.4em;
	line-height: 1.3em;
	margin-bottom: 2ex;
	borderX: 1px solid green;
}

/* ci dessous la methode pour avoir enfin des listes avec a), b), etc. */

ol.alphaminusc {
	counter-reset: list;
}
ol.alphaminusc li {
	list-style: none;
	margin-left: -0.5em;
	padding-left: 1em;
	line-height: 1.3em;
	margin-bottom: 2ex;
}
ol.alphaminusc li:before {
	content: counter(list, lower-alpha) ")";
	counter-increment: list;
	position:relative;
	margin-left: -1em; /* optional, for multiline li element */
	left: -1em;
}

.aligncentre {text-align: center}
.aligngauche {text-align: left}
.aligndroite {text-align: right}
.textbord { color: #990000}

BODY > UL
{
    background-image: url("images/mybckground.jpg"); 
	width: 600px;
	margin-left: 40px;
/*	width: 680px;
	margin-left: 0;
	padding-left: 40px;
	padding-right: 40px;
	NOborder-right: 2px solid gray;	
	NOborder-left: 4px solid gray;	*/
}
p.itemlien 
{
     display: list-item;
     list-style : disc;
     margin-left: 1.3em;
     padding-left: 0.1em;
	 line-height: 1.3em;
}
div.entete-body
{
    background-image: url("images/mybckground.jpg"); 
	width: 600px;
	margin-left: 40px;
	text-align: center;
/*	width: 680px;
	margin-left: 0;
	padding-left: 40px;
	padding-right: 40px;
	NOborder-right: 2px solid gray;	
	NOborder-left: 4px solid gray;	*/
}
.INVISIBLE {visibility: hidden; display: none;}
.notes-dyn {
	position: absolute;
	width: 300px;
	visibility: hidden;
	font-size: 75%;
	text-align: justify;
	text-indent: 0;
	font-family: monteserrat, arial, sans-serif;
	padding-top: 0px;
	padding-bottom : 0px;
	padding-right: 8px;
	padding-left: 8px;
	border: 1px solid black;
	background-color: #FFFFCC;
	z-index:20;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px; 
}
.notesgrandes-dyn {
	position: absolute;
	width: 450px;
	visibility: hidden;
	font-size: 75%;
	text-align: justify;
	text-indent: 0;
	font-family: monteserrat, arial, sans-serif;
	padding-top: 0px;
	padding-bottom : 0px;
	padding-right: 8px;
	padding-left: 8px;
	border: 1px solid black;
	background-color: #FFFFCC;
	z-index:20;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px; 
}
.notestresgrandes-dyn {
	position: absolute;
	width: 550px;
	visibility: hidden;
	font-size: 75%;
	text-align: justify;
	text-indent: 0;
	font-family: monteserrat, arial, sans-serif;
	padding-top: 0px;
	padding-bottom : 0px;
	padding-right: 8px;
	padding-left: 8px;
	border: 1px solid black;
	background-color: #FFFFCC;
	z-index:20;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px; 
}
.notesmax-dyn {
	position: absolute;
	width: 550px;
	visibility: hidden;
	font-size: 75%;
	text-align: justify;
	text-indent: 0;
	font-family: monteserrat, arial, sans-serif;
	padding-top: 0px;
	padding-bottom : 0px;
	padding-right: 8px;
	padding-left: 8px;
	border: 1px solid black;
	background-color: #FFFFCC;
	z-index:20;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px; 
}
.commentaires-dyn {
	position: absolute;
	width: 120px;
	visibility: hidden;
	font-size: 75%;
	text-align: left;
	text-indent: 0;
	font-family: monteserrat, arial, sans-serif;
	padding-top: 0px;
	padding-bottom : 0px;
	padding-right: 8px;
	padding-left: 8px;
	border: 1px solid black;
	background-color: #ffef73;
	z-index:9;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px; 
}

@media(max-width: 1024px) {
.commentaires-dyn, .notesmax-dyn, .notestresgrandes-dyn, .notesgrandes-dyn, .notes-dyn
	{    
		font-size: 80%;
		XXwidth: 37em;
  	}
}

@media(max-width: 800px) {
.commentaires-dyn, .notesmax-dyn, .notestresgrandes-dyn, .notesgrandes-dyn, .notes-dyn
	{    
		/* font-size: 80%; */
		width: 90%;
  	}
}



.paletteFlottante {
    position: fixed;
	visibility: visible; 
    width: 40px;
	z-index: 6;
	top: 5px;
	right: 5px;
}
.paletteFlottante2 {
    position: fixed;
	visibility: visible; 
    width: 40px;
	z-index: 11;
	top: 5px;
	left: 5px;
}
@media(max-width: 800px) {
.paletteFlottante, .paletteFlottante2
	{    
		display: none;
  	}
}
.DimFont {
	font-size: 87%;
}
.PetCap {
font-variant:small-caps;
}

span.nombiblio
{
	display: inline-block;
    margin-leftXXXX: -0.5ex;
    padding-leftXXXX: 0ex;
	font-size:85%;
}
span.nombiblio::first-letter
{ 
    font-size: 118%;
}


.texteInvisible {
	display: none;
}


/* serie de styles heterogenes a retravailler pour imagette a droite 2018 */

div.imagedroite20  /* LARGEUR 20 %*/
{
		display: inline;
		float: right;
		margin-top: 1.1ex;
		margin-bottom: 0.5ex;
		margin-left: 8px;
		borderXXX: 1px solid grey; /* SANS BORD */
		text-align: center;
		background-color: transparent;
		width: 20%;
}
div.imagedroite20 > A:hover { background-color: transparent} 

div.imagedroite40  /* LARGEUR 40 %*/
{
		display: inline;
		float: right;
		margin-top: 1.1ex;
		margin-bottom: 0.5ex;
		margin-left: 8px;
		borderXXX: 1px solid grey; /* SANS BORD */
		text-align: center;
		background-color: transparent;
		width: 40%;
}
div.imagedroite40 > A:hover { background-color: transparent} 

/* POUR YOUTUBE */
div.videoDroite40
{
	position: relative;
	float: right;
	width: 40%;
	XXpadding-bottom: 56.25%; /* 16:9 */
	padding-bottom: 28.5%; /* 16:9 */
	margin-bottom: 0.5ex;
	margin-left: 8px;
	overflow: hidden; 
}

.videoDroite40 iframe , .videoDroite40 object, .videoDroite40 embed 
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.vidLegendeResponsive
{
	text-align: right;
}
.legendeVideoResponsive
{
	borderXX: 1px solid red;
	z-index:100; 
	vertical-align: baseline; 
	position: relative; 
	bottom: -1em;
}

@media(max-width: 1024px) {
	.vidLegendeResponsive
	{
		borderXXX: 1px solid green;
		position: static;
		float: none!important;
		width: 98%!important;
		padding-top:1ex;
		text-align: center;
		padding-bottom: 10px!important; /* plus de respect de ratio */
	}
	.videoDroite40 iframe , .videoDroite40 object, .videoDroite40 embed 
	{
		borderXX: 1px solid blue;
		position: static;
		XXwidth: 100%;
	}
	.legendeVideoResponsive
	{
		borderXX: 1px solid red;
		position: static; 
		vertical-align: top; 
		bottom: 0px;
	}
}

IMG.adroite
{
    float: right;
}
img.droitecadre
{
	float: right;
	margin-bottom: 6px;
	margin-left: 6px;
	border: 1px solid black;
}
IMG.agauche
{
    float: left;
    border-width: 0px;
    margin-right: 5px;
}
IMG.centrer
{
    /* float: center; */
}
/* Attention: largeur a mettre en coherence avec la largeur du Blockquote principal */
IMG.full
{
	width: 55ex;
}
A:link IMG, A:visited IMG { border-style: none } /* cassé dans NS 4 */
A IMG { color: #f4f2ec } /* pour cacher à NS 4.x */
.bord1noir { border: 1px solid black; }
.bord2noir { border: 2px solid black; }
IMG.full_pub
{
	width: 55ex;
}
IMG.realfull
{
	width: 100%;
}
IMG.part_pub
{
	width: 30ex;
}
.legendecentre
{
	text-align: center;
	font-style: italic;
	margin-bottom: 1.5em;
	margin-top: 0px;
}
.positionne {
    position: relative;
}
.legende1 {
    display:block;
    position: absolute;
	text-align: left;
	text-indent: 0;
    padding-left:3px;
    font-weight: bold;
	visibility: hidden;
    width: 25em;
    left: 0;
    top: 0;
	border: 2px solid black;
	background-color: #ffffc6;
	color: #6b0042;
    font-size: 80%;
    z-index: 8;
}
A span.legende1:hover {background-color: transparent;}
/* ---------------------------------------------------- */
/* Styles non utilises */
/* ---------------------------------------------------- */
body div.banner { display: block } /* Overrides 'none' in banner-*.css */
div.banner {
  margin: 0;
  font-size: 90% /*smaller*/;
  font-weight: bold;
  line-height: 1.1;
  text-align: right;
  position: absolute; /* Fallback if 'fixed' is not supported */
  top: 0.2em;
  left: auto;
  width: 8.5em;
  right: 0.1em;
}
body>div.banner {
  position: fixed;		/* Overrides 'absolute' above */
}
div.banner p {
  margin: 0; 
  padding: 0.3em 0.4em;
  font-family: Arial, sans-serif;
  background: #999;		
  border: thin outset #999;	
  color: white;
}

/* ----------------------------------------------------------------------- */
/* Styles du bandeau de navigation supérieur et bandeaux d'icones latéraux */
/* ----------------------------------------------------------------------- */
div.bandcontexte-100
{   
    background-color: transparent;
    XXXborder: 1px solid red;	
    width: 100%; 
    XXposition: fixed;
    position: sticky;   /* ENORME: rÈsoud le placement des div en dessous */
	position: -webkit-sticky;
    top: 0; /* associÈ ‡ sticky */
    margin-top: 0px;
    padding-top: 0px;
    margin-bottom: 0px;
    z-index: 3;
    line-height: 70%; /* LE PROBLEME DE LA HAUTEUR ETAIT ICI */ 
}
@media(max-width: 1024px) {
div.bandcontexte-100
	{
		width: 37em;
	    margin-right: 0px;
	    margin-left: 0px;
	    margin-left: calc(((100% - 37em)/2));
		z-index: 9;
	}
}
@media(max-width: 800px) {
div.bandcontexte-100
	{
		width: 100%;
	    XXmargin-right: auto;
	    XXmargin-left: auto;
	    margin-right: 0px;
	    margin-left: 0px;
	}
}

div.bandcontexte-flex
{
/* GIK BANDEAU 2018 */	
	XXXborder: 1px solid blue;
	background-image: url("images/mybckgroundOLD.jpg"); 

    /* GIK FLEX 2018 */
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	XXjustify-content: -webkit-center;
	XXjustify-content: center;
	/* center ne fonctionne pas pour IE, saloperie */
	justify-content: -webkit-space-between;
	justify-content: space-between;

	width: 61em; /* 54 ? */

    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: calc(((100% - 61em)/2));
    padding-left: 0px;
}
@media(max-width: 1024px) {
div.bandcontexte-flex
	{
		width: 37em;
	    margin-right: auto;
	    margin-left: auto;
		margin-bottom: 0px;
	}
}
@media(max-width: 800px) {
div.bandcontexte-flex
	{
		width: 100%;
	    XXmargin-right: auto;
	    XXmargin-left: auto;
	    margin-right: 0px;
	    margin-left: 0px;
	    background-image: none;
	}
}

#burgermenu /* img */
{
	width: 0.1ex;
	display: none;
	filter: opacity(0%); /* sinon au retour fenÍtre large on voit le burger */
}
#burgermenu:hover
{
	text-decoration: none;
}
@media(max-width: 1024px) {
#burgermenu
	{
		XXmin-height: 100%;
		XXmax-height: 100%;
		XXwidth: 4ex;
		width: 2em;
		display: inline;
		float: right;
		margin-top: -1px;
		margin-left: 2px;
		margin-right: 3px;
		cursor: pointer;
		filter: opacity(60%);
		background-color: WhiteSmoke;
	}
}
@media(max-width: 800px) {
#burgermenu
	{
		XXwidth: 4ex;
		width: 2em;
	}
}
#closemenu /* img */
{
	width: 0.1ex;
	display: none;
	filter: opacity(0%); /* sinon au retour fenÍtre large on voit le burger */
}
#closemenu:hover
{
	text-decoration: none;
}
@media(max-width: 1024px) {
#closemenu
	{
		XXwidth: 4ex;
		width: 2em;
		display: none;
		float: right;
		margin-top: -1px;
		margin-left: 2px;
		margin-right: 3px;
		cursor: pointer;
		filter: opacity(60%);
		 background-color: WhiteSmoke;
	}
}
@media(max-width: 800px) {
#closemenu
	{
		XXwidth: 4ex;
		width: 2em;
	}
}
div.bandgauche
{ 
    order: 1;
    width: 6em;
	flex: initial;
	webkit-flex: initial;
	moz-flex: initial;
    margin-bottom: 0px;
    padding-bottom: 0px;
    margin-left: 0px;
	XXXborder: 1px solid green;	
}
@media(max-width: 1024px) {
div.bandgauche
	{
		display: none;
	}
}


div.banddroite
{   
    order: 3;
    width: 12em;
    margin-bottom: 0px;
    padding-bottom: 0px;
	XXXborder: 1px solid red;
}
@media(max-width: 1024px) {
div.banddroite
	{
		display: none;
	}
}


div.bandcont-middle
{
    /* GIK FLEX 2018 */
    order: 2;

	/* GIK BANDEAU 2018 */	
    XXborder: 3px solid green;
    width: 37em;
  
    font-stretch: condensed;

    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

div.bandcont-centre
{
    font-size: 60%;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 2ex;
	border: 1px solid gray;
	background-color: WhiteSmoke;
    z-index: 5;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px; 
/*	-moz-box-shadow: 5px 5px 5px #606060 ;
	-webkit-box-shadow: 5px 5px 5px #606060 ;
     box-shadow: 5px 5px 5px #606060 ;
*/
  borderXX: 2px solid blue;
    padding-top: 0.2ex;
    margin-bottom: 0px;
    padding-bottom: 0.1ex;

}
@media(max-width: 1024px) {
div.bandcont-centre
		{
			line-height: 1.5em;
			overflow:auto;
		}
}
@media(max-width: 800px) {
div.bandcont-centre
		{
			font-size: 50%;
			z-index: 10;
			padding-left: 2px;
			overflow:auto;
		}
}
@media(max-width: 500px) {
div.bandcont-centre
		{
			font-size: 70%;
			padding-left: 2px;
			z-index: 10;
		}
}

div.bandcontexte-100 A:link {
	text-decoration: none;
}
table.menuhaut {
	margin-top: 0px;
	padding: 0px;
	border-spacing: 0px;
}
.menuband
{
	padding: 0px;
	text-align: left;
	margin-left: 0px;
}
A.menuband:visited {color:blue} 
/* A.menuband:hover  {color:blue; background-color: #FFFF9C} */
A.menuband:hover  {color:white;}
A.menubandcourant:hover  
{
	background-color: transparent;
}

/* -------------------------------------------------------- */
/* Styles devolus au champs de recherche de la barre d'etat */
/* -------------------------------------------------------- */
form.topnavsearch {
	text-align: right;
	position: relative;
	right: -15px; 
	padding: 0px;
/*	top: -3.2ex;
	padding: 0px;
    border: 1px solid red;
    z-index: 0; */
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
*/
}
html>body form.topnavsearchRRR {
	padding: 1px 0;
    margin: 0;
}
html>body form.topnavsearchRRR {
	padding: 0 0 1px 0;
}
input.topnavsearchq {
	height: 14px; 
	font-size: 10px;
	border: 1px solid #787878;
	vertical-align: top;
	padding: 0px 4px;
	width: 100px;
	margin-bottom: 0px;
}
#topnavsubmit {
	padding-top: 3px;
}
#txttrouve
{
	vertical-align: 20%;
}
.commentaires-dyn-rech {
	position: absolute;
	widthXX: 10ex;
	visibility: hidden;
	font-size: 70%;
	text-align: left;
	text-indent: 0;
	font-family: monteserrat, arial, sans-serif;
	padding-top: 0px;
	padding-bottom : 0px;
	padding-right: 8px;
	padding-left: 8px;
	border: 1px solid black;
	background-color: #FFFFCC;
	z-index:20;
}



/* ------------------------------------- */
/* Styles devolus au cartouche de gauche */
/* ------------------------------------- */
div.cartouche-contexte-gauche
{

    /* GIK FLEX 2018 */
    order: 1;

    /* ESSAI CSS 2018 */
	XXposition: fixed; /* mis dans inside */

   	XXwidth:12em; 
   	width:6em; 

	margin-top: 0.5ex; 

    /* GIK FLEX 2018 */
	/* left: 10px; */
	text-align: right;
	float:right;

	XXXz-index: 15;
	
	flex: initial;
	webkit-flex: initial;
	moz-flex: initial;


	display: inline-block;

}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */  
div.cartouche-contexte-gauche
		{
			margin-top: 0.8em;
		}
}
@media(max-width: 1024px) {
div.cartouche-contexte-gauche
	{
   		width:37em; 
		margin-top: 0px; 
		padding-top: 0px; 
		margin-left: 0px;
		text-align: left;
		float:left;
		display: inline-block;
	}
}

@media screen and (-ms-high-contrast: active) and (max-width: 1024px), screen and (-ms-high-contrast: none) and (max-width: 1024px) {  
   /* IE10+ specific styles go here */  
div.cartouche-contexte-gauche
		{
			margin-top: 1em;
		}
}


@media(max-width: 800px) {
div.cartouche-contexte-gauche
	{
   		width:100%; 
		margin-top: 0px;
		padding-top: 0px; 
		margin-left: 1px;
		margin-left: 1px;
		text-align: left;
		float:left;
		display: inline-block;
		XXborder: 2px solid red;
	}
}
@media screen and (-ms-high-contrast: active) and (max-width: 800px), screen and (-ms-high-contrast: none) and (max-width: 800px) {  
   /* IE10+ specific styles go here */  
div.cartouche-contexte-gauche
		{
			margin-top: 1em;
		}
}


div.inside-cartouche-contexte-gauche
{
	position: fixed;
	float:left;
   	width:6em; 
}
@media(max-width: 1024px) {
div.inside-cartouche-contexte-gauche
	{
   		width:37em; 
		margin-top: 0px; 
		margin-left: 0px;
		padding-bottom: 0px;
		padding-left: 0px;
		text-align: left;
		float:left;
		display: inline-block;
		position: relative;
		XXborder: 1px solid red;
		display: flex;
	  	align-items: center;
  		justify-content: left;
		background-image: url("/beckerhead.jpg"); 
		background-position: bottom;
		background-size: cover;
	}
}
@media(max-width: 800px) {
div.inside-cartouche-contexte-gauche
	{
   		width:100%; 
		margin-top: 0px; 
		margin-left: 0px;
		padding-bottom: 0px;
		text-align: left;
		float:left;
		display: inline-block;
		position: relative;
		display: flex;
	  	align-items: center;
  		justify-content: left;
		background-image: url("/beckerhead.jpg"); 
		background-position: bottom;
		background-size: cover;
		XXborder: 2px solid green;
	}
}




IMG.logophdn
{
	width:6em; 
	margin-top: 0px;
}
IMG.logophdn:hover
{
	cursor:pointer;
}
IMG.logophdn-simple
{
	display:none;
}
@media(max-width: 1024px) {
#lelogo
	{
		order: 1;
	  	align-self: left;
		padding-left: 0px;
		padding-top: 5px;
	  	margin-left: -4em; /* NECESSAIRE POUR ALIGNER LE LOGO A GAUCHE MAIS POURQUOI POURQUOI POURQUOI? */
		XXborder: 1px solid blue;
		float: left;
		left: 0px;
	}
}

@media(max-width: 1024px) {
#lelogo
	{
		order: 1;
	  	align-self: left;
		padding-left: 0px;
		margin-top: 0px;
		padding-top: 0px;
	  	margin-left: -4em; /* NECESSAIRE POUR ALIGNER LE LOGO A GAUCHE MAIS POURQUOI POURQUOI POURQUOI? */
		XXborder: 1px solid blue;
		float: left;
		left: 0px;
	}
}

/* ------------------------------------- */
/* Styles devolus au cartouche de droite */
/* ------------------------------------- */

#cart-cont /* id de la classe cartouche-contexte-droit */
{
    /* GIK FLEX 2018 */
    order: 3;
}

div.cartouche-contexte-droit 
{
	margin-top: 1ex; 
	z-index:7;
    width: 12em;
}

/* Selecteur pour IE10+ */  
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
div.cartouche-contexte-droit 
		{
			margin-top: 0.9em;
			display: inline-block;
			z-index: 20;
		}
}

@media(max-width: 1024px) {
#cart-cont
	{
		display: none
	}
div.cartouche-contexte-droit
	{
/*		display: none; */
	}
}

#cart-cont-touch /* cartouche de droite pour Ècran Ètroit ou mobiles */
{
    /* pas flex */
    display: none;
}
@media(max-width: 1024px) {
#cart-cont-touch
	{
		/* pas flex */
		position: absolute;
		top: 3.5ex;
		float: right;
		right: calc(((100% - 36em)/2));
		z-index:8;
	}
}

div.inside-cartouche-contexte-droite-touch
{
	padding-top: 3.5ex;
    width: 12em;
}

/* Selecteur pour IE10+ */  
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
div.inside-cartouche-contexte-droite-touch
		{
			display: inline-block; 
			z-index: 20;
		}
}

@media(max-width: 1024px) {
div.inside-cartouche-contexte-droite-touch
	{
		display: inline;
		float: right;
	}
div.inside-cartouche-contexte-droite-touch  > .cartouche-phdn
	{
		margin-bottom: 5px;
	}
}

@media(max-width: 800px) {
#cart-cont-touch
	{
		/* pas flex */
		position: absolute;
		float: right;
		right: 5px;
		width: 99%;
	}
div.inside-cartouche-contexte-droite-touch
	{
		display: inline;
		float: right;
		padding-top: 3ex;
		width: 70%;
	}
}

div.inside-cartouche-contexte-droite
{
	XXposition: fixed;
    width: 12em;
}

div.cartouche-phdn
{
	border: 1px solid black;
	visibility: visible; 
    widthXXX: 30ex;    
	top: 25px; 
	right: 25px;

    /* ESSAI CSS 2018 */
	/* font-size: 60%; */
	font-size: 70%;

	margin-bottom: 2em;
	
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px; 
	-moz-box-shadow: 5px 5px 5px #606060 ;
	-webkit-box-shadow: 5px 5px 5px #606060 ;
    box-shadow: 5px 5px 5px #606060 ;
}
@media(max-width: 800px) {
div.cartouche-phdn
	{
		font-size: 80%;
	}
}

div.entete-cartouche
{
	position: relative;
	background-color-avant-2020: #FFFFCC;
	background-color: WhiteSmoke;
	padding-left: 3px;
	padding-top: 3px;
	padding-bottom: 3px;
	border-bottom: 1px solid gray;
	-moz-border-radius-topleft :	 10px;
	-moz-border-radius-topright:	 10px;
	-webkit-border-top-left-radius:	 10px;
	-webkit-border-top-right-radius: 10px;
	border-top-left-radius:	 10px;
	border-top-right-radius: 10px;
    font-family: monteserrat, verdana, arial, sans-serif;
    font-weight: 500;
}
div.entete-cartcomp
{
	position: relative;
	background-color-avant-2020: #CCFF99;
	background-color: #d0e2d2;
	padding-left: 3px;
	padding-top: 3px;
	padding-bottom: 3px;
	border-bottom: 1px solid gray;
	-moz-border-radius-topleft :	 10px;
	-moz-border-radius-topright:	 10px;
	-webkit-border-top-left-radius:	 10px;
	-webkit-border-top-right-radius: 10px;
	border-top-left-radius:	 10px;
	border-top-right-radius: 10px;
    font-family: monteserrat, verdana, arial, sans-serif;
    font-weight: 500;
}
div.item-cartouche
{
	border-top: 1px solid gray;
	position: relative;
	padding-left: 3px;
	background-color-avant-2020: #F8F8FF; 
	background-color: #fcf4ee;
	text-align: left;
    font-family: monteserrat, verdana, arial, sans-serif;
}
div.item-cartouche:hover
{
	color: white;
}
.item-cartouche>A
{
	background-color: inherit;
	color: black;
}
.item-cartouche>A:visited
{
	color: black;
}
.item-cartouche>A:hover
{
	background-color: inherit;
	color: white;
	text-decoration: none;
}

div.cartouche-phdn div.item-cartouche:last-child
{
	-moz-border-radius-bottomleft :     10px;
	-moz-border-radius-bottomright:    10px;
	-webkit-border-bottom-left-radius:     10px;
	-webkit-border-bottom-right-radius:    10px;
	border-bottom-left-radius:     10px;
	border-bottom-right-radius:    10px;
}

div.item-cartouche2
{
	border-top: 1px solid gray;
	position: relative;
	padding-left: 0px;
	background-color: #F8F8FF; 
    font-family: monteserrat, verdana, arial, sans-serif;
}
div.item-cartouche:hover
{
	/* background-color: #FFFF9C; */
	background-color: #3152A5;
	color: white;
	cursor: pointer;
}
form.formrecherche {
	/* text-align: right; */
	padding: 0px;
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}
input.formrecherche-in {
	/*border: 1px solid #787878; */
	border-top: 1px solid #787878;
	border-right: 1px solid #787878;
	border-left: 0px solid red;
	border-bottom: 0px solid red;
	vertical-align: top;
	padding: 0px 4px;
	width: 80%;
	margin-bottom: 0px;
	margin-left: 0px;
	heightXXX: 100%; 
	-moz-border-radius-bottomleft :     9px;
	-webkit-border-bottom-left-radius:     8px;
	border-bottom-left-radius:     8px;
/*	height: 14px; 
	font-size: 10px;*/
}
@media(max-width: 1024px) {
form.formrecherche
	{
		width: 95%;
		background-color: linen;
		margin-bottom: 0.1ex;
		padding-bottom: 0.1ex;
	}
#cartouche2, #cartouche5
	{
		background-color: linen;
		-moz-border-radius-bottomright:    10px;
		-webkit-border-bottom-right-radius:    10px;
		border-bottom-right-radius:    10px;
	}
}
#conteneurFormRecherche /* la ligne du cartouche recherche contenant le formulaire */
{
	-moz-border-radius-bottomleft :     10px;
	-moz-border-radius-bottomright:    10px;
	-webkit-border-bottom-left-radius:     10px;
	-webkit-border-bottom-right-radius:    10px;
	border-bottom-left-radius:     10px;
	border-bottom-right-radius:    10px;
}
#conteneurFormRecherche:hover
{
	background-color: #F8F8FF; 
	color: black;
}

/* 
div.nepasimprimer 
{
    background-image: url("images/mybckgroundOLD.jpg");
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 120%;
    margin-left: 680px;
}
*/
div.pourimpression 
{
	position: absolute;
	top: 0;
	left: 0;
	width: 600px;
	text-align: center;
	font-size: 80%;
    margin: 0px;
	display: none;
}
div.sectiontoggle
{
        display:none;
}
span.eclaire
{
	color:black; 
	background-color:yellow;
	font-weight: bold;
}
span.testspan
{
	color:black; 
	background-color:transparent;
}
div.avertissement_ocr
{
	border: 1px solid grey;
    font-size: 70%;
}
div.text_ocr
{
	margin-top: 2em;
    font-size: 90%;
    font-family: "Courier New", monospace;
}
.disqueNiv 
{
	display: block;
	width: 1.1em;
	height: 1.1em;
	background: transparent;
	-moz-border-radius: 0.55em;
	-webkit-border-radius: 0.55em;
	border-radius: 0.55em; 
	margin:2px auto;
	border:1px solid grey;
}
.disqueNiv#niv0:hover 
{
	background: chartreuse;
}
.disqueNiv#niv1:hover
{
	background: yellow;
}
.disqueNiv#niv2:hover {
	background: orange;
}
.disqueNiv#niv3:hover {
	background: mediumblue;
}

div.cartoucheNiveaux
{
	font-family: monteserrat, arial, sans-serif;
	text-align: center;
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
}


#idCartoucheFB /* même largeur que logophdn FLEX */
{
	width:6em; 
	XXborder: 1px solid orange;
	right: 0px;
}
@media(max-width: 1024px) {
#idCartoucheFB
	{
		order: 2;
	  	align-self: left;
	  	margin-left: 2ex;
	  	margin-right: 0px;
	}
div.cartoucheNiveaux
	{
		margin-top: 0px;
		XXborder: 1px solid orange;
	}
}

.plusgras
{
    font-weight:500;
}

p.css-vertical-text {
	/* color:#333; */
	font-family: monteserrat, arial, sans-serif;
	color:#606060;
 	border:0px solid red;
	writing-modeXX:tb-rl;
	-webkit-transform:rotate(270deg);
	-moz-transform:rotate(270deg);
	transform: rotate(270deg);
	white-space:nowrap;
	display:inline-block;
	bottom:0;
	width:20px;
 	/* height:20px; */	
	/* font-family: ‘Trebuchet MS’, Helvetica, sans-serif; */
	/* font-size:24px; */
	font-size:70%;
    font-weight:normal;
 	outline: 1px solid transparent;
	/* text-shadow: 0px 0px 1px #333; */
}

/* style niveau pour écran étroit */
p.css-horizontal-text {
	/* color:#333; */
	font-family: monteserrat, arial, sans-serif;
	color: #a34729;
 	border:0px solid red;
	white-space:nowrap;
	display:inline-block;
	font-size:70%;
    font-weight:bold;
 	outline: 1px solid transparent;
 	margin-top: 0px;
 	margin-bottom: 0px;
 	text-align: center;
	/* text-shadow: 0px 0px 1px #333; */
}



/* ----------------------------------------------- */
/* Vieux style pour highlighting des mots search   */

div.bouttonToggleEclaire
{
	text-align: center;
	margin-top: 20px;
	visibility: hidden;
}
input.HLboutton-OLD
{
	font-size: 80%;
	background-color: #fed; 
	border:1px solid; 	
	border-color: #696 #363 #363 #696; 

	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px; 

	-moz-box-shadow: 5px 5px 5px #606060 ;
	-webkit-box-shadow: 5px 5px 5px #606060 ;
    box-shadow: 5px 5px 5px #606060 ;
}
input.HLboutton-OLD:hover
{
	border-color: orange; 
	background-color: #fed; 
}

input.HLboutton
{
	background: #222 url(/images/alert-overlay.png) repeat-x; 
	display: inline-block; 
	padding: 5px 10px 6px; 
	color: #fff; 
	text-decoration: none;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer;
}

input.HLboutton:hover
{
	background-color: #111;
	color: #fff;
}

input.HLboutton:active { top: 1px; }

input.HLboutton, input.HLboutton:visited
{ 
	font-size: 11px;
	line-height: 1;
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25); 
}



.awesome, .awesome:visited {
	background: #222 url(/images/alert-overlay.png) repeat-x; 
	display: inline-block; 
	padding: 5px 10px 6px; 
	color: #fff; 
	text-decoration: none;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer;
}

	.awesome:hover							{ background-color: #111; color: #fff; }
	.awesome:active							{ top: 1px; }
	.small.awesome, .small.awesome:visited 			{ font-size: 11px; padding: ; }
	.awesome, .awesome:visited,
	.medium.awesome, .medium.awesome:visited 		{ font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
	.large.awesome, .large.awesome:visited 			{ font-size: 14px; padding: 8px 14px 9px; }
	
	.green.awesome, .green.awesome:visited		{ background-color: #91bd09; }
	.green.awesome:hover						{ background-color: #749a02; }
	.blue.awesome, .blue.awesome:visited		{ background-color: #2daebf; }
	.blue.awesome:hover							{ background-color: #007d9a; }
	.red.awesome, .red.awesome:visited			{ background-color: #e33100; }
	.red.awesome:hover							{ background-color: #872300; }
	.magenta.awesome, .magenta.awesome:visited		{ background-color: #a9014b; }
	.magenta.awesome:hover							{ background-color: #630030; }
	.orange.awesome, .orange.awesome:visited		{ background-color: #ff5c00; }
	.orange.awesome:hover							{ background-color: #d45500; }
	.yellow.awesome, .yellow.awesome:visited		{ background-color: #ffb515; }
	.yellow.awesome:hover							{ background-color: #fc9200; }

/* ----------------------------------------------- */



/* pour les boutons de suivi sur les reseaux sociaux, cartouche de gauche */
a.btnSuivreFB
{
	filter: opacity(30%);
}
@media(max-width: 1024px) {
a.btnSuivreFB
	{
		filter: opacity(60%);
	}
}
a.btnSuivreFB img
{
	width: 30%;
}
a.btnSuivreFB:hover
{
	filter: opacity(100%);
	text-decoration: none;
	background-color: transparent!important;
}
div.cSuivi
{
	display: none;
	font-family: monteserrat;
	font-size: 80%;
	font-weight: 600;
	color: grey;
}
@media(max-width: 1024px) {
div.cSuivi
	{
	color: #a34729;
	}
}
div.cSuiviVide
{
	display: block;
	font-family: monteserrat;
	font-size: 80%;
	font-weight: 600;
	color: transparent;
}

#idCartoucheNiveaux
{
	margin-top: 0px;
}
#idCartoucheFB
{
	margin-top: 10px;
	margin-bottom: 0px;
}
#idCartoucheNiveauxTouch
{
	display: none;
}
@media(max-width: 1024px) {
#idCartoucheNiveaux
	{
		display: none;
	}
#idCartoucheNiveauxTouch
	{
		display: inline-block;
		order: 3;
	  	margin-left: 2ex;
	}
#idCartoucheFB
	{
		XXdisplay: inline-block;
	}
}




/* ------------------------------------- */
/* addthis style */
/* ------------------------------------- */

.addthis_sharing_toolbox, #atstbx, .at-share-btn-elements, .at-share-tbx-element, .addthis-smartlayers, .addthis-animated, .at4-show
{
	XXdisplay: inline;
}
.at-share-btn-elements
{
	XXborder:1px solid red;
	margin-left: 5px;
}
#tabaddthis:hover
{
	text-decoration: none;
	Xbackground-color: transparent!important;
}
.addthis_sharing_toolbox:hover
{
	text-decoration: none;
	Xbackground-color: transparent!important;
}
#atstbx:hover
{
	text-decoration: none;
	Xbackground-color: transparent!important;
}
.at-share-btn-elements:hover
{
	text-decoration: none;
	Xbackground-color: transparent!important;
}
.at-share-tbx-element:hover
{
	text-decoration: none;
	Xbackground-color: transparent!important;
}
a.at-icon-wrapper:hover
{
	text-decoration: underline;
	Xbackground-color: transparent!important;
}
.addthis_sharing_toolbox:hover
{
	text-decoration: none;
	background-color: transparent!important;
}
#tabaddthis td:hover
{
	text-decoration: none;
	background-color: transparent!important;
}
a.myAddRssGik:hover
{
	text-decoration: none;
	background-color: transparent!important;
}
a.myAddRssGik img:hover
{
	text-decoration: none;
	background-color: inherit!important;
}


@media print {
.afterbody {
	width: 100%;
    margin-left: auto;
    margin-right: auto;
    border: 0px;
}
}