/***************************************************************************************/
/************************************* GRILLE ***************************************/
/**************************************************************************************/

/*************** NORMALISE TOUS LES NAVIGATEURS **********************/

html, body, div, span, applet, object, iframe, h1, h3, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0 none;
    font: inherit;
    margin: 0;
    padding: 0;
   /* vertical-align: top;*/ /* pour permettre à mathjax de se mettre au milieu */
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: outside none none;
}

blockquote, q {
    quotes: none;
}

blockquote::before, blockquote::after, q::before, q::after {
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

*, *::before, *::after { 
    box-sizing: border-box;
}


/***************************** CONTAINER *********************************/
/******************************************************************************/

.container {
    padding-left: 0;
    padding-right: 0;
	margin-right: auto;
  	margin-left: auto;
}

.container::before, .container::after {
    content: "";
    display: table;
    line-height: 0;
}

.container::after {
    clear: both;
}

/****************************** COLONNES ********************************/
/******************************************************************************/

.col-xxxs-1, .col-xxs-1,.col-xs-1, .col-s-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xxxs-2, .col-xxs-2,.col-xs-2, .col-s-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xxxs-3, .col-xxs-3,.col-xs-3, .col-s-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xxxs-4, .col-xxs-4,.col-xs-4, .col-s-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xxxs-5, .col-xxs-5,.col-xs-5, .col-s-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xxxs-6, .col-xxs-6,.col-xs-6, .col-s-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xxxs-7, .col-xxs-7,.col-xs-7, .col-s-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xxxs-8, .col-xxs-8,.col-xs-8, .col-s-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xxxs-9, .col-xxs-9,.col-xs-9, .col-s-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xxxs-10, .col-xxs-10,.col-xs-10, .col-s-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xxxs-11, .col-xxs-11,.col-xs-11, .col-s-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xxxs-12, .col-xxs-12,.col-xs-12, .col-s-12, .col-sm-12, .col-md-12, .col-lg-12 {
	position: relative;
	min-height: 1px;
	padding-left: 0;
	padding-right: 0;
	left: 4px;
	bottom: 1px;
}

/*********************** COLONNES xxxs < 410 **************************/

@media (max-width: 409px) {
	.col-xxxs-clear {
		clear: left;
	}
	.col-xxxs-release {
		clear: none;
	}
	.col-xxxs-1, .col-xxxs-2, .col-xxxs-3, .col-xxxs-4, .col-xxxs-5, .col-xxxs-6, .col-xxxs-7, .col-xxxs-8, .col-xxxs-9, .col-xxxs-10, .col-xxxs-11, .col-xxxs-12 {
		float: left;
	}
	.col-xxxs-12 {
		width: 100%;
	}
	.col-xxxs-11 {
	  	width: 91.66666667%;
	}
	.col-xxxs-10 {
	  	width: 83.33333333%;
	}
	.col-xxxs-9 {
	  	width: 75%;
	}
	.col-xxxs-8 {
	  	width: 66.66666667%;
	}
	.col-xxxs-7 {
	  	width: 58.33333333%;
	}
	.col-xxxs-6 {
	  	width: 50%;
	}
	.col-xxxs-5 {
	  	width: 41.66666667%;
	}
	.col-xxxs-4 {
	  	width: 33.33333333%;
	}
	.col-xxxs-3 {
	  	width: 25%;
	}
	.col-xxxs-2 {
	  	width: 16.66666667%;
	}
	.col-xxxs-1 {
	  	width: 8.33333333%;
	}
}

/************************ COLONNES xxs 410-479 ************************/

@media (min-width: 410px) and (max-width: 479px) {
	.col-xxs-clear {
		clear: left;
	}
	.col-xxs-release {
		clear: none;
	}
	.col-xxs-1, .col-xxs-2, .col-xxs-3, .col-xxs-4, .col-xxs-5, .col-xxs-6, .col-xxs-7, .col-xxs-8, .col-xxs-9, .col-xxs-10, .col-xxs-11, .col-xxs-12 {
	  	float: left;
	}
	.col-xxs-12 {
	  	width: 100%;
	}
	.col-xxs-11 {
	  	width: 91.66666667%;
	}
	.col-xxs-10 {
	  	width: 83.33333333%;
	}
	.col-xxs-9 {
	  	width: 75%;
	}
	.col-xxs-8 {
	  	width: 66.66666667%;
	}
	.col-xxs-7 {
	  	width: 58.33333333%;
	}
	.col-xxs-6 {
	  	width: 50%;
	}
	.col-xxs-5 {
	  	width: 41.66666667%;
	}
	.col-xxs-4 {
	  	width: 33.33333333%;
	}
	.col-xxs-3 {
	  	width: 25%;
	}
	.col-xxs-2 {
	  	width: 16.66666667%;
	}
	.col-xxs-1 {
	  	width: 8.33333333%;
	}
}

/************************* COLONNES xs 480-599 ************************/

@media (min-width: 480px) and (max-width: 599px) {
	.col-xs-clear {
		clear: left;
	}
	.col-xs-release {
		clear: none;
	}
	.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
	  	float: left;
	}
	.col-xs-12 {
	  	width: 100%;
	}
	.col-xs-11 {
	 	width: 91.66666667%;
	}
	.col-xs-10 {
	  	width: 83.33333333%;
	}
	.col-xs-9 {
	  	width: 75%;
	}
	.col-xs-8 {
	  	width: 66.66666667%;
	}
	.col-xs-7 {
	 	 width: 58.33333333%;
	}
	.col-xs-6 {
	  	width: 50%;
	}
	.col-xs-5 {
	  	width: 41.66666667%;
	}
	.col-xs-4 {
	  	width: 33.33333333%;
	}
	.col-xs-3 {
	  	width: 25%;
	}
	.col-xs-2 {
	  	width: 16.66666667%;
	}
	.col-xs-1 {
	  	width: 8.33333333%;
	}
}

/************************* COLONNES s 600-767 *************************/

@media (min-width: 600px) and (max-width: 767px) {
	.col-s-clear {
		clear: left;
	}
	.col-s-release {
		clear: none;
	}
	.col-s-1, .col-s-2, .col-s-3, .col-s-4, .col-s-5, .col-s-6, .col-s-7, .col-s-8, .col-s-9, .col-s-10, .col-s-11, .col-s-12 {
	  	float: left;
	}
	.col-s-12 {
	  	width: 100%;
	}
	.col-s-11 {
	  	width: 91.66666667%;
	}
	.col-s-10 {
	  	width: 83.33333333%;
	}
	.col-s-9 {
	  	width: 75%;
	}
	.col-s-8 {
	  	width: 66.66666667%;
	}
	.col-s-7 {
	  	width: 58.33333333%;
	}
	.col-s-6 {
	  	width: 50%;
	}
	.col-s-5 {
	  	width: 41.66666667%;
	}
	.col-s-4 {
	  	width: 33.33333333%;
	}
	.col-s-3 {
	  	width: 25%;
	}
	.col-s-2 {
	  	width: 16.66666667%;
	}
	.col-s-1 {
	  	width: 8.33333333%;
	}
	.col-s-pull-1 {
  		right: 8.33333333%;
	}
} 

/************************ COLONNES sm 768-899 ************************/

@media (min-width: 768px) and (max-width: 899px) {
	.col-sm-clear {
		clear: left;
	}
	.col-sm-release {
		clear: none;
	}
	.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
		float: left;
  	}
	.col-sm-12 {
		width: 100%;
	}
	.col-sm-11 {
		width: 91.66666667%;
	}
	.col-sm-10 {
		width: 83.33333333%;
	}
	.col-sm-9 {
		width: 75%;
	}
	.col-sm-8 {
		width: 66.66666667%;
	}
	.col-sm-7 {
		width: 58.33333333%;
	}
	.col-sm-6 {
		width: 50%;
	}
	.col-sm-5 {
		width: 41.66666667%;
	}
	.col-sm-4 {
		width: 33.33333333%;
	}
	.col-sm-3 {
		width: 25%;
	}
	.col-sm-2 {
		width: 16.66666667%;
	}
	.col-sm-1 {
		width: 8.33333333%;
	}
}

/************************ COLONNES md >900 ***************************/

@media (min-width: 900px) {
	.col-md-clear {
		clear: left;
	}
	.col-md-release {
		clear: none;
	}
	.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
		float: left;
	}
	.col-md-12 {
		width: 100%;
	}
	.col-md-11 {
		width: 91.66666667%;
	}
	.col-md-10 {
		width: 83.33333333%;
	}
	.col-md-9 {
		width: 75%;
	}
	.col-md-8 {
		width: 66.66666667%;
	}
	.col-md-7 {
		width: 58.33333333%;
	}
	.col-md-6 {
		width: 50%;
	}
	.col-md-5 {
		width: 41.66666667%;
	}
	.col-md-4 {
		width: 33.33333333%;
	}
	.col-md-3 {
		width: 25%;
	}
	.col-md-2 {
		width: 16.66666667%;
	}
	.col-md-1 {
		width: 8.33333333%;
	}
}

/********************* COLONNES lg >1200 : inusited *******************/

@media (min-width: 1200px) {
	.col-lg-clear {
		clear: left;
	}
	.col-lg-release {
		clear: none;
	}
	.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
		float: left;
	}
	.col-lg-12 {
		width: 100%;
	}
	.col-lg-11 {
		width: 91.66666667%;
	}
	.col-lg-10 {
		width: 83.33333333%;
	}
	.col-lg-9 {
		width: 75%;
	}
	.col-lg-8 {
		width: 66.66666667%;
	}
	.col-lg-7 {
		width: 58.33333333%;
	}
	.col-lg-6 {
		width: 50%;
	}
	.col-lg-5 {
		width: 41.66666667%;
	}
	.col-lg-4 {
		width: 33.33333333%;
	}
	.col-lg-3 {
		width: 25%;
	}
	.col-lg-2 {
		width: 16.66666667%;
	}
	.col-lg-1 {
		width: 8.33333333%;
	}
}

/******************************************************************************/
/**************************  STYLES GLOBAUX ***************************/
/******************************************************************************/

html { /* met l'image de fond d'écran */
	background: url("/images/img_fond.jpg") no-repeat center fixed; 
	-webkit-background-size: cover;/* pour les versions précédentes */
	background-size: cover; /* version standard*/
    font-size: 62.5%; /*taille par défaut correspondant à 10 pixels (en effet, 62.5% de 16px donne 10px)
	Par exemple, une taille de police de body à 2.4em correspondra à un équivalent 24 pixels.*/
}

/********************************* ESSENTIELS ****************************/

.bg-main {
	background-color: #fff;
}

.bg-aside {
	background-color: #efefef;
}

/* <main class="container bg-main"> quand le main est trop court par rapport à l'aside, mais attention avec h1 en bg-aside, sinon presque toujours <main class="container bg-aside"> */

.bg-footer {
	background-color: #7ab1da;
} 

/*********************************** LIENS **********************************/
/***ordre visted, hoover et active doit être obligatoirement respecté***/
/*** a span permet la bulle; mais ATTENTION, on ne peut faire de a span global car perturbe les liens dur mathjax ***/

a {
	text-decoration: none;
}

a[href*="proteinatlas"] {
  color: orangered;
}

a:visited[href*="proteinatlas"] {
 color: orangered;
}

a:hover[href*="proteinatlas"] {
 color: orangered;
}

a[href*="cellsignal"] {
  color: orangered;
}

a:visited[href*="cellsignal"] {
 color: orangered;
}

a:hover[href*="cellsignal"] {
 color: orangered;
}

a[href*="wikipedia"] {
  color: maroon;
}

a:visited[href*="wikipedia"] {
 color: maroon;
}

a:hover[href*="wikipedia"] {
 color: maroon;
}

a:visited {
	text-decoration: none;
	color: #553495; /* couleur normale des liens visités sur le web */
}

a:hover {
	text-decoration: none;
	color: #970744;
}

a.atitre { /* sinon pas bien avec certains titres */
	color: #1bd8e9;
}

a.atitre1 { /* sinon pas bien avec certains titres */
	color: #333333;
}

a.atitre2 { /* comp */
	color: #CCCCCC;
}
		
a.atitre:hover {
	color: #c1c1c1;
}

a img { /* permet de pas mettre de cadre lors du lien */
  border: 0;
}

/*********************************** BODY **********************************/

body {
	margin: 3% ; /* donner une marge pour permettre de voir l'image de fond d'écran, voir si on le met en em et si on l'enlève dans les petites tailles d'écran'*/
	color: #000000; 
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1.3em;  /*Attention . et non virgule*/
	line-height: 1.3;
	text-align: justify;
	/*max-width: 1200px; ou sinon après cela n'est pas beau s*/
}

@media (max-width: 767px) {
	body {
		margin: 0; /*enlève les marges pour plus de place*/
		padding-top: 80px;  /* pour permettre ele rd-mobilrmenu */
	}
}

/******************************** HEADER **********************************/
.top {
	background: url(/images/img_top.png) no-repeat; 
	background-size: contain;
	margin:0;
}

@media (max-width: 767px) {
	.top {
		background: url(/images/img_top_s.png) no-repeat; 
		background-size: contain; /* cette image permet de mettre le bandeau incolore jusqu'au coin droit pour le rslides */
		margin:0;
	}
}

header:before, header:after{
	display:table;
	content:"";
	line-height:0;
}

header:after{
	clear:both;
}

/************************ ARTICLE  :  COLONNE -9 ************************/

section {  /* toute la page à part h1 */
	background-color: #FFF;
	text-decoration: none;
	padding: 15px;
	text-align: justify;
}

.sanssection {  /* toute la page à part h1 quand uil n'ya a p de section pour la validation */
	background-color: #FFF;
	text-decoration: none;
	padding: 15px;
	text-align: justify;
}

/************************** ASIDE : COLONNE -3 *************************/

.col3 {
	background-color: #efefef;/*gris clair*/
	color: #0080aa;/*couler bleu du texte*/
	padding-top: -40px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}

@media (max-width: 899px) {
	.aside {
		border: solid 1px #C2C2C2; /* pour séparer le aside du main */
	}
}

/********************************** FOOTER ********************************/

footer {
	text-decoration: none;
	margin: 0px;
	text-align: left;
	background-color: #7ab1da;
	line-height: 1; /* permet aux br d'être plus rapprochés dans les li */
}

/******************************************************************************/ 
/**********************LES STYLES DU HEADER ************************/
/******************************************************************************/ 

/********************************** NEWSITE *******************************/
/******************************************************************************/ 

.newsite {
	font-size: 1.8vw;
	line-height: 1.6vw;
	text-shadow: 2px 2px 5px #000;
	padding-left: 84.5vw;
	padding-top: 2.9vw;
	text-align: center;
	font-weight: bold;
}

.newsite a,  .newsite a:visited{
	color: #fff;
}

.newsite a span {  /* permet la bulle et ATTENTION, on ne peut faire de a span global car perturbe les liens dur mathjax */
    margin-top: 5.5vw;
	margin-left:-16.5vw;
	background: #c4ef0e;
    padding-top: 0.3vw; 
	padding-right: 0.5vw;
	padding-bottom: 0.5vw;
	padding-left: 0.5vw;
	font-size: 1.4vw;
	position: absolute; 
    color: #fff; 
	border-radius: 3px; 
	transform: scale(0) rotate(-90deg);  /* On determine la taille d'origine 0 et l'origine de la rotation */
	transition: all .25s;   /* durée de l'effet */
	opacity: 0; /*pour ne pas qu'elle se voit*/
}

.newsite a:hover span, .newsite a:focus span { 
	transform:scale(1) rotate(0);  /* Apparition de la bulle avec une taille normale = scale à 1 */ 
	opacity:0.8;  /* la bulle apparaît car la transparence est enlevée*/ 
}

@media (max-width: 767px) {
	.newsite {
		font-size: 2vw;
		line-height: 1.8vw;
		padding-left: 78vw;
	}
	.newsite a span {  /* permet la bulle et ATTENTION, on ne peut faire de a span global car perturbe les liens dur mathjax */
		font-size: 1.7vw;
	}
}

/************************************ RSLIDES ******************************/
/******************************************************************************/ 

.bnd {
	margin-top:8.8%;
}

.rslides {
	position: relative;
	list-style: none;
	overflow: hidden;
	width: 70%; /*permet de le positionner à % du header*/
	height: 8.6vw; /*l'oblige à prendre une certaine hauteur sachant qu'il sera supprimé sur les téléphones*/
	float:right;
	margin:0;
}

.rslides > li {
	-webkit-backface-visibility: hidden;
	position: absolute;
	display: none;
	font-family: Verdana,Geneva,sans-serif;
    font-size: 1.5vw;
	line-height: 2vw;
    font-weight: bold;
	text-align: center;
	color: #FFFFFF;
    text-shadow: 2px 2px #007fac;
	padding-top: 1.2vw;
    width:100%; /* INDISPENSABLE POUR BIEN CENTRER */
}

.rslides li ul {
	list-style: none;
	padding-top: 0.3vw;
	color: #00BFFF;
    font-size: 1.2vw;
    font-weight: bold;
    text-align: center;
}

@media (max-width: 767px) {
	.rslides > li {
		font-size: 1.8vw;
		margin-top: -1vw; /* pour pouvoir remonter le tout qui est trop bas */
	}
	.rslides li ul {
    	font-size: 1.4vw;
		padding-top: 0.3vw;
	}
}

/******************************************************************************/ 
/************************** LES STYLES DU MAIN ************************/
/******************************************************************************/ 

/***************** RECHERCHE GOOGLE ET LOGOS ******************/
/******************************************************************************/ 

.rechercher {
	color: #fff;
	height: 48px;
}

#cse-search-form { /* positionne le conteneur de la barre de recherche correctement */
	width: 70%;
    padding: 14px 10px 10px 10px;
    box-sizing: border-box;
    float: left;
}

#cse-search-form .gsc-control-cse { /* poition de la barre au sein du conteneur */
        padding: 8px 10px;
}
    

.img-rech {
	float: right;
    width: 30%;
    position: relative;
    top: 3px;
}

.img-rech li {
    list-style: none;
    display: inline;
    float: right;
}

.img-rech img {
	height: 36px;
	margin-top: 5px; 
	margin-right: 10px;
	margin-left: 10px;
}

.img-rech a span {  /* permet la bulle et ATTENTION, on ne peut faire de a span global car perturbe les liens dur mathjax */
    margin-top: -3.2vw;
	margin-left: -5.5vw;
	background: #2b5471;
    padding-top: 0.3vw; 
	padding-right: 0.5vw;
	padding-bottom: 0.5vw;
	padding-left: 0.5vw;
	font-size: 1.3vw;
	text-align: center;
	position: absolute; 
    color: #fff;
	border-radius: 3px; 
	transform: scale(0) rotate(-90deg);  /* On determine la taille d'origine 0 et l'origine de la rotation */
	transition: all .25s;   /* durée de l'effet */
	opacity: 0; /*pour ne pas qu'elle se voit*/
}

.img-rech a:hover span, .img-rech a:focus span { 
	transform: scale(1) rotate(0);  /* Apparition de la bulle avec une taille normale = scale à 1 */ 
	opacity: 0.8;  /* la bulle apparaît car la transparence est enlevée*/ 
	z-index: 999999; /* pour qu'elle apparaisse sur le rslides */
}

#resultats {
	background-image: url(/images/vagues.jpg);
	background-size: cover; 
	background-repeat: no-repeat;
    padding-top: 40px; 
	padding-bottom: 8px;
	padding-left: 10px;
}

/***************** CHANGER RECHERCHE GOOGLE ******************/ 
		
#gsc-i-id1,  #gsc-i-id2 { /* CHAMP DE RECHERCHE ET CHAMP DE RESULTAT */
	background-image: none !important; /*supprime l'image de google */
	text-indent: 2px !important; /* replace le texte à gauche */
   	position: relative;
    bottom: 3px; /*place le texte verticalement */
}	
	
input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus { /* STYLE DU BOUTON */
	/*border-color: #9B173B !important;*/
	height: 24px !important;
	/*background-color: #9B173B !important;*/
	/*width: 100%;*/

	background-repeat: no-repeat; /* on annule la répétition par défaut */
    background-position: center center; /* on positionne où l'on veut */
	background-size: 14px 14px;
    filter: none;	
	z-index: 999999;
}

.cse .gsc-search-button input.gsc-search-button-v2, input.gsc-search-button-v2 { /* permet de réduire la taille du bourton */
	padding: 5px 18px !important; /* jouer sur dernier px, en jouant sur le padding, on agrandit la loupe */
    min-width: unset !important;
    width: unset !important;
    position: relative;
    top: 1px;
}

/************ MEDIAQUERIES RECHERCHE GOOGLE ****************/ 

@media (min-width: 768px) and (max-width: 930px) {
	.rechercher {
		height: 46px;
		margin-bottom: 8px; /* attention il faut aussi voir la marge dans nav-responsive.css */
		margin-top: -1.3vw; /* car avec l'image_top_small', la rcherche est trop basse */
		border-top: solid 1px #C2C2C2; /* met un bord pour le séparer car on supprime le menu */
	}
    
	#cse-search-form {
		padding-top: 2px; /* on enlève le padding à droite pour mieux centrer les images */
		padding-bottom: 14px;
		padding-left: 10px;
        position: relative;
        top: 3px;
	}
    
    .img-rech {
        position: relative;
        top: -5px;
    }
    
	#resultats {
    	padding-top: 40px; 
		padding-bottom: 16px;
		padding-left: 10px;
	}
}

@media (min-width: 621px) and (max-width: 767px) {
	.rechercher {
		height: 46px;
		margin-bottom: 8px; /* attention il faut aussi voir la marge dans nav-responsive.css */
		margin-top: -1.3vw; /* car avec l'image_top_small', la rcherche est trop basse */
		border-top: solid 1px #C2C2C2; /* met un bord pour le séparer car on supprime le menu */
	}
    
	#cse-search-form {
		padding-top: 10px; /* on enlève le padding à droite pour mieux centrer les images */
		padding-bottom: 14px;
		padding-left: 10px;
        position: relative;
        bottom: 4px;
	}
    
    .img-rech {
        position: relative;
        top: -3px;
    }

	#resultats {
    	padding-top: 40px; 
		padding-bottom: 16px;
		padding-left: 10px;
	}
}

@media (min-width: 480px) and (max-width: 620px) {
	.rechercher {
		height: 46px;
		margin-bottom: 6px; /* attention il faut aussi voir la marge dans nav-responsive.css */
		margin-top: -1.3vw; /* car avec l'image_top_small', la rcherche est trop basse */
		border-top: solid 1px #C2C2C2;
	}
    
	#cse-search-form {
		padding-top: 7px; /* on enlève le padding à droite pour mieux centrer les images */
		padding-bottom: 10px;
		padding-left: 10px;
        position: relative;
        bottom: 2px;
	}
    
        .img-rech {
        position: relative;
        top: -3px;
    }
    
	.img-rech img {
		height: 30px;
		margin-top: 4px; 
		margin-right: 5px;
		margin-left: 5px;
	}
	.img-rech a span {
		margin-top: 40px; /* passe en dessous */
		margin-left: -49px;
		font-size: 11px;
	}
	.img-rech a span span {
		margin-top: -1px; /* passe en dessous */
		margin-left: -10px;
		font-size: 11px;
	}
	#resultats {
    	padding-top: 40px; 
		padding-bottom: 12px;
		padding-left: 10px;
	}
}

@media (max-width: 479px) {
	.rechercher {
		height: 46px;
		margin-bottom: 6px; /* attention il faut aussi voir la marge dans nav-responsive.css */
		margin-top: -1.3vw; /* car avec l'image_top_small', la rcherche est trop basse */
		border-top: solid 1px #C2C2C2;
	}
	#cse-search-form {
		padding-top: 7px; /* on enlève le padding à droite pour mieux centrer les images */
		padding-bottom: 10px;
		padding-left: 10px;
	}
	.img-rech img {
		height: 30px;
		margin-top: 4px; 
		margin-right: 2px;
		margin-left: 2px;
	}
	.img-rech a span {
		margin-top: 42px; /* passe en dessous */
		margin-left: -49px;
		font-size: 11px;
	}
	.img-rech a span span {
		margin-top: -2px; /* passe en dessous */
		margin-left: -10px;
		font-size: 11px;
	}
	#resultats {
    	padding-top: 40px; 
		padding-bottom: 14px;
		padding-left: 10px;
	}
}

/****************************** NAVIGATION *******************************/
/******************************************************************************/ 

/******************************************************************************/ 
/***************************** MENU HAUT ********************************/

.menu a {
  color: #fff; 
}

.menu a:hover {
  color: #FFFF00; 
}

/******************* GRANDS TITRES NON CACHÉS *******************/

.menu > ul { 
	display: flex;
	flex-direction: row;
	font-weight: bold; /*en 14px; */	
	width: 100%;
} 

.menu:before, .menu:after {
    display: table;
    content: "";
    line-height: 0; 
}

.menu:after {
    clear: both; 
}

.menu > ul > li { /* concerne les grands titres non cachés */
	display: flex;
	flex-direction: row;
	justify-content: center; /*centre le texte des  grands titres dans les enfants*/
	align-items: center;/*aligne les grands titres verticalement*/
	flex: 1; /* tous les titres ont la même largeur */
	position: relative; /* permet de bien positionner le menus en dessous */
	text-align: center;/* permet de centrer le texte des  grands titres, mais pas dans la box extensible*/
	font-size: 14px;
	line-height: 1.3;
	padding: 4px 5px 5px 5px ; /* il faut le mettre là pour donner du large aux titres */
}

.submenu1, .submenu2, .submenu3 { 
	display: none; /* on cache ltous les  submenu si on ne passe pas dessus : not hoover*/
}

@media  (min-width: 785px) and (max-width: 844px) {
	.menu > ul > li  {
		font-size: 13px; 
	 } 
}

@media  (min-width: 768px) and (max-width: 784px) {
	.menu > ul > li  {
		font-size: 12px; 
	 } 
}

@media (max-width: 767px) {
	.menu {
    	display: none;  /* pour faire disparaître la bordure noire du menu et permet de supprimer le menu en même temps*/
	}
}

/***************** MENU EN-DESSOUS submenu1 ******************/

.menu li:hover > .submenu1 { 
display: flex;
flex-direction: column;
position: absolute; /* permet de bien positionner le submenu1 en dessous */
top: 146%; /* permet de placer le menu déroulant en-dessous pour qu'on voit la flèche */
/*top: 100%; /* permet de jouer sur la hauteur de l'ensemble du submenu1 par rapport aux grands titres */
left: 0%; /* permet de  jouer sur le déplacement de l'ensemble du submenu1 par rapport aux grands titres */
z-index: 555; /* permet de placer l'ensemble des submenu1 au-dessus du texte de l'article*/
width: 150px; /* permet de faire la bonne largeur pour les menus déroulants au dessous */
text-align: left; /* permet de centrer les titres autres que les grands*/	
font-size: 13px; /*met pour tout le reste en 12px*/
}

.submenu1  li  { 
    border-bottom: 1px solid #ccc; /* donne la séparation trait des submenus*/
	padding: 6px;  /* met une marge à tous les submenus*/
}

.submenu1:before { 
	background-image: url(/images/godown.svg);
	background-repeat: no-repeat; /* on annule la répétition par défaut */
	background-size: 18px;
	background-position: center;
	content: ''; /* ATTENTION, c'est ' et ' et non pas " */
	display: block;
	position: absolute;
	width: 150px;
	height: 30px; /* hauteur du block pour qu'il passe légèrement sur lles grands titres */
	top: -25px;
}

/******************** SUBMENU2 ET SUBMENU3 **********************/

.submenu1 li:hover > .submenu2 { 
	display:flex;
	flex-direction: column;
	position: absolute;
	top: 0%; /* permet de jouer sur la hauteur de l'ensemble du submenu2 par rapport aux submenus1 */
		/*pourquoi il ne se met pas à 0% du li du submenu1, mais à  0% de l'ensemble?*/
	left: 114%; /* permet de jouer sur le déplacement de l'ensemble du submenu2 par rapport aux submenus1 */
	text-align: left; /* permet de placer les titres autres que les grands*/
	width: 160px; /* permet de faire la bonne largeur pour les menus déroulants au dessous */
}

.submenu2:before { 
	background-image: url(/images/goright.svg);
	background-repeat: no-repeat; /* on annule la répétition par défaut */
	background-size: 18px;
	background-position: top;
	content: ''; /* ATTENTION, c'est ' et ' et non pas " */
	display: block;
	position: absolute;
	width: 30px;
	height: 100%; /* hauteur du block pour qu'il passe légèrement sur lles grands titres */
	top: 5px; /* pour régler la hauteur */
	left: -25px; 
}

.submenu1  li:hover > .submenu3 { 
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 0%; /* permet de jouer sur la hauteur de l'ensemble du submenu2 par rapport aux submenus1 */
		/*pourquoi il ne se met pas à 0% du li du submenu1, mais à  0% de l'ensemble?*/
	right: 114%; /* permet de jouer sur le déplacement de l'ensemble du submenu2 par rapport aux submenus1 */
	text-align: left; /* permet de placer les titres autres que les grands*/
	/*box-shadow: 5px 5px 5px #7D7D7D;*/
	width: 150px; /* permet de faire la bonne largeur pour les menus déroulants au dessous */
}

.submenu3:before { 
	background-image: url(/images/goleft.svg);
	background-repeat: no-repeat; /* on annule la répétition par défaut */
	background-size: 18px;
	background-position: top;
	content: ''; /* ATTENTION, c'est ' et ' et non pas " */
	display: block;
	position: absolute;
	width: 30px;
	height: 100%; /* hauteur du block pour qu'il passe légèrement sur lles grands titres */
	top: 5px; /* pour régler la hauteur */
	left: 145px; 
	/* background-color: gold;
	opacity: 0.3; */ /* pour voir où cela se trouve */
}

/******************************************************************************/ 
/************************** NAV-RD-MOBILEMENU ***********************/

.rd-mobilemenu {
	display: none;
	position: fixed;
	top: 0%;
	left: 0;
	bottom: 0;
	z-index: 9999999;
	text-align: left;
	-moz-transition: 0.3s all ease;
	-o-transition: 0.3s all ease;
	-webkit-transition: 0.3s all ease;
	transition: 0.3s all ease;
}

/************* MENU EN GENERAL SOUS LA COLONNE **************/

.rd-mobilemenu_ul {
	position: fixed;
	top: -70px; /*permet de rementer tout le menu*/
	left: 0;
	width: 180px;   /* au lieu de 200 */
	padding-top: 132px; /* permet de position le submenu1 */
	background-color: #719ecd; /* couleur du fond de ce qui s'ouvre du menu */
	font-size: 14px;
	line-height: 16px; /* permet de diminuer les br */
	overflow: auto; /* tout ce qui est en-dessous sert à ouvrir le menu par le bouton */
	-webkit-box-shadow: 5px 0 5px 0 rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 5px 0 5px 0 rgba(0, 0, 0, 0.1);
	box-shadow: 5px 0 5px 0 rgba(0, 0, 0, 0.1);
	-moz-transform: translateX(-240px);
	-ms-transform: translateX(-240px);
	-o-transform: translateX(-240px);
	-webkit-transform: translateX(-240px);
	transform: translateX(-240px);
	-moz-transition: 0.3s ease;
	-o-transition: 0.3s ease;
	-webkit-transition: 0.3s ease;
	transition: 0.3s ease;
	/*-moz-transition: 0.3s cubic-bezier(0.55, 0, 0.1, 1);*/
	/*-o-transition: 0.3s cubic-bezier(0.55, 0, 0.1, 1);
	-webkit-transition: 0.3s cubic-bezier(0.55, 0, 0.1, 1);*/
	/*transition: 0.3s cubic-bezier(0.55, 0, 0.1, 1); */
}

.rd-mobilemenu.active .rd-mobilemenu_ul {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0); 
}

.rd-mobilemenu_ul a {
    display: block;
    padding: 10px;  /*paddiing du grand menu*/
	color: #000; 
}

.rd-mobilemenu_ul a:hover {
      /*background: #1cbbb1;*/
     color: #FFF; 
}

.rd-mobilemenu_ul .menu-icon {
    display: inline;
}

.rd-mobilemenu_ul .menu-icon span {
    display: none;
}

.rd-mobilemenu_ul .menu-icon a {
    width: 31.5%;
    display: inline-block;
}

/******** MENU EN GENERAL ET COULEURS DES TOGGLE ********/

.rd-mobilemenu_ul a .rd-submenu-toggle {
	position: absolute; /* position de la flèche et du cercle */
	top: 50%; /* se retrouve au milieu */
	right: 10px; /* à 10px du bord du menu */
	margin-top: -17.5px;
	width: 26px; /* pour que la forme soit un cercle*/
	height: 26px; /* pour que la forme soit un cercle*/
	font: 400 13px "FontAwesome"; /*donne la taille de la flèche*/
	line-height: 26px; /* permet l'alignement vertical de la flèche dans le cercle */
	text-align: center;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-moz-transition: 0.5s all ease;
	-o-transition: 0.5s all ease;
	-webkit-transition: 0.5s all ease;
	transition: 0.5s all ease;
	z-index: 1;
	background: rgba(0, 0, 0, 0.3);  /*CORRESPOND À LA COULEUR DE FOND DE LA FLÈCHE*/
}

.rd-mobilemenu_ul a .rd-submenu-toggle:after {
	content: '\f078'; /*correspond à la flèche à droite du ul*/
}

.rd-mobilemenu_ul a .rd-submenu-toggle:hover {
	background: #FFF; /* lui donne un fond blanc */
	color: #666; /* couleur grise */
}
    
.rd-mobilemenu_ul a.rd-with-ul {
	position: relative; 
}

.rd-mobilemenu_ul ul a { /* correspond au submenu 2 et  3 */
	background: #a7cdf5;
	padding-left: 30px; /* pour les écarter */
	padding-top : 6px;
	padding-bottom : 6px;
}

.rd-mobilemenu_ul ul ul a { /* correspond au 1er submenu 2 et  3  */
	background: #a7cdf5;
	padding-left: 30px; 
}

/************* CACHE TOUT CE QUI EST EN-DESSOUS **************/	

.rd-mobilemenu_ul:after {
	content: '';
	display: block;
	height: 20px;
}

/************************ BANDEAU DU TOGGLE *************************/

.rd-mobilepanel {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 46px; /* hauteur du bandeau */
	background: #FFF;
	color: #000;
	-webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
	box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
	z-index: 99999991; 
}

/********************* TITRE: MENU DE NAVIGATION *******************/

.rd-mobilepanel_title {
	position: fixed;
	top: 2px;
	left: 60px;
	right: 56px;
	text-align: left; /*J'ai aligné à gauche parce que sinon çà le centre */
	color: #000;
	font-size: 20px;
	font-weight:bold;
	line-height: 40px; /* pour bien le mettre au milieu par rapport à la descente du body en bas à 56 px*/
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: 0;
	padding: 0; 
}

.rd-mobilepanel_title:after {
	display: none; 
}

/************************** BOUTON DU TOGGLE ************************/

.rd-mobilepanel_toggle { /*bouton complet du bandeau */
	position: fixed;
	top: 4px;
	left: 12px;
	width: 38px; /* au lieu de 48px */
	height: 38px; /* au lieu de 48px */
}

.rd-mobilepanel_toggle span {
	position: relative;
    display: block;
    margin-top: 3px; /* au lieu de margin auto : permet demettre eles 3 barres au milieu */
	margin-left: -8px;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease; 
}

.rd-mobilepanel_toggle span:after, .rd-mobilepanel_toggle span:before {
	content: "";
	position: absolute;
	left: 0;
	top: -8px;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease; 
}

.rd-mobilepanel_toggle span:after {
	top: 8px; 
}

.rd-mobilepanel_toggle span:after, .rd-mobilepanel_toggle span:before, .rd-mobilepanel_toggle span {
	width: 24px; /* corespond aux trois traits à l'intérieur du bouton */ 
	height: 4px;
	background-color: #000; /*couleur du toggle*/
	backface-visibility: hidden;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px; 
}

.rd-mobilepanel_toggle span {
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); 
}

.rd-mobilepanel_toggle span:before, .rd-mobilepanel_toggle span:after {
	-moz-transform-origin: 1.71429px center;
	-ms-transform-origin: 1.71429px center;
	-o-transform-origin: 1.71429px center;
	-webkit-transform-origin: 1.71429px center;
	transform-origin: 1.71429px center;
}

.rd-mobilepanel_toggle.active span {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); 
}

.rd-mobilepanel_toggle.active span:before, .rd-mobilepanel_toggle.active span:after {
	top: 0;
	width: 15px; 
}

.rd-mobilepanel_toggle.active span:before {
	-webkit-transform: rotate3d(0, 0, 1, -40deg);
	transform: rotate3d(0, 0, 1, -40deg);
}
    
.rd-mobilepanel_toggle.active span:after {
	-webkit-transform: rotate3d(0, 0, 1, 40deg);
	transform: rotate3d(0, 0, 1, 40deg); 
}

@media (max-width: 767px) { /* le body descend cf body plus haut */
	.rd-mobilemenu, .rd-mobilepanel {
		display: block; 
	} 
    
    .img-rech {
        display: none !important;
    }
    
    #cse-search-form {
        width: 100% !important;
    }
}

@media (max-width: 359px) {
	.rd-mobilepanel_title {
		font-size: 18px; 
	} 
}

/*********************************** TITRE **********************************/
/******************************************************************************/ 

.titre {
	width:100%;  /* pour couvrir la colone 9 et la colonne 3 */
	background-color: #efefef;
}

h1 {
	font-size: 1.53846153em; /*20 sur 13 qui est la base du body et qui correspond à 1.3em*/
	line-height: 1.2;
	font-weight: bold;
	text-align: left;
	color: #B25371;
	text-shadow: 3px 3px 5px #888888;
	/*text-shadow: 2px 2px 5px #000;*/
}

.tit2l  { /* quand il y a deux  lignes */
	padding: 0.4em 0.4em 0.5em 0.4em ;
}		  
	
.tit1l { /* quand il n'y a qu"une ligne */
	min-height: 2.4em; /* pour  pouvoir colorier en gris tout quand moins large */
	padding: 0.4em 0.4em 0.5em 0.4em ;
	/*padding: 0.4em 0 0.2em 1.2em;*/
}

@media (max-width: 899px) {
   .tit2l,  .tit1l  {
		text-align: center;
		padding-right: 1.2em; /* pour que le titre soit vraiment au milieu */
	}
}	

@media (max-width: 767px) {
	h1 {
		border: solid 1px #C2C2C2; /* pour séparer le titre du rechercher car le menu disparaît */
		margin-top :-8px; /* pour le remonter et mettre le recherche au milieu de son container */
	}
}

@media (max-width: 599px) {
	h1 {
	font-size: 1.384615384615385em; /*18 sur 13 qui est la base du body et qui correspond à 1.3em*/
	}
}

/******************************* SOMMAIRE ********************************/
/******************************************************************************/ 

#sommaire, #sommaire:hover {
	background: url(/images/img_som.png) no-repeat; 
	display: block;
	font-weight: bold;
	height: 34px;
	margin: 0;
	padding: 2px 0px 40px 14px;
	text-align: left;
	text-decoration: none;
	width: 100%; /* au lieu de 100% car l'image se répète et dépasse à droite */
}

#sommaire {
	color: #0080aa;
}

#sommaire:hover {
	color: #9B173B;
    cursor: pointer;
}

#sommaire_list {
	color: #000;
	display: none; /* permet de maintenir le sommaire caché à l'ouverture */
	margin: 0px;
	padding: 0px;
}
		
ol, ol li ol, ol li ol li ol, ol li ol li ol li ol, ol li ol li ol li ol li ol, ol li ol li ol li ol li ol li ol, ol li ol li ol li ol li ol li ol li ol, ol li ol li ol li ol li ol li ol li ol li ol, ol li ol li ol li ol li ol li ol li ol li ol li ol, ol li ol li ol li ol li ol li ol li ol li ol li ol li ol, ol li ol li ol li ol li ol li ol li ol li ol li ol li ol li ol, ol li ol li ol li ol li ol li ol li ol li ol li ol li ol li ol li ol {
	font-weight: bold;
	color: #0000CC;
	list-style-position: outside;
	line-height: 15px;
	text-align: left;
}

ol {
	list-style-type: upper-roman;
	margin-left: 40px;
}

.pastillesom {
	margin-left: 32px;
	color: #666666;
}
	
ol li ol {
	list-style-type: upper-alpha;
	margin-left: 18px;
}
	
ol li ol li ol {
	list-style-type: decimal;
}
	
ol li ol li ol li ol {
	list-style-type: lower-alpha;
}
	
ol li ol li ol li ol li ol {
	list-style-type: lower-greek;
}
	
ol li ol li ol li ol li ol li ol {
	list-style-type: lower-roman;
}
	
ol li ol li ol li ol li ol li ol li ol {
	list-style-type: decimal-leading-zero;
}

ol li ol li ol li ol li ol li ol li ol li ol {
	list-style-type: decimal;
}

ol li ol li ol li ol li ol li ol li ol li ol li ol {
	list-style-type: lower-alpha;
}
	
ol li ol li ol li ol li ol li ol li ol li ol li ol li ol {
	list-style-type: lower-greek;
}
	
ol li ol li ol li ol li ol li ol li ol li ol li ol li ol li ol {
	list-style-type: lower-roman;
}

ol li ol li ol li ol li ol li ol li ol li ol li ol li ol li ol li ol {
	list-style-type: decimal-leading-zero;
} 

.olnone {
	list-style-type: none;
	font-weight: bold;
	color: #0000CC;
	line-height: 15px;
	text-align: left;
	margin-left: -30px;
}
	
/* A VOIR SI ON CHANGE */
	
.olbib { /* quand il y a des chiffres romains */
	font-weight: bold;
	color: #0000CC;
	text-align: left;
	margin-left: 22px;
	padding-top: 10px;
	padding-bottom: 20px;
}

.bib { /* quand il n'y a pas des chiffres romains */
	font-family: Verdana, Geneva, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #0000CC;
	text-align: left;
	margin-left: 22px;
	padding-bottom: 16px;
}

/*************************** FLÈCHES DU BAS ****************************/
/******************************************************************************/
	
.fleches {
	text-indent: 0px;
	text-align: center;
	font-weight: bold;
	color: #909090;
	line-height: 1.6;
	padding-top: 20px;
}

/********************************* BIBLIO ***********************************/
/******************************************************************************/ 

#biblio  {
	background: url(/images/img_biblio.svg) center no-repeat; 
	background-size: contain; 
	display: block;
	font-weight: bold;
	height: 50px;
	margin-top: 10px;
	padding: 16px 0 40px 0px;
	text-align: center;
	text-decoration: none;
}

#biblio {
	color: #0080aa;
}

#biblio:hover {
	color: #9B173B;
    cursor: pointer;
}

#biblioligne {
	color: #000000; /* OBLIGATOIRE SANS CELA LE MENU DÉROULANT NE MARCHE PAS */
	display: none;
	margin-top: 6px; /* pour éloigner un peu les li */
	padding: 0;
}

.past_biblio {
	list-style-type: none;
	background-image: url(/images/loupe.svg);
    background-repeat: no-repeat; /* on annule la répétition par défaut */
    background-position: left top; /* on positionne où l'on veut */
	background-size: 17px 17px;
	text-align: justify;
	margin-left: 10px;
	margin-right: 10px;
	padding-left: 24px; /* pour éviter la superposition du contenu */
}

@media (max-width: 767px) {
	#biblio, #biblio:hover  {
		background: url(/images/img_biblio_s.svg) center no-repeat; 
		background-size: contain; 
		padding: 18px 0 40px 0px;
	}
}

@media (max-width: 479px) {
	#biblio, #biblio:hover  {
		background: url(/images/img_biblio_xxs.svg) center no-repeat; 
		background-size: contain; 
	}
}

@media (max-width: 479px) {
	#biblio, #biblio:hover  {
		background: url(/images/img_biblio_xxxs.svg) center no-repeat; 
		background-size: contain; 
	}
}

/******************************************************************************/ 
/************************ LES STYLES DU ASIDE ************************/
/******************************************************************************/ 

/**************** CIGOGNE REMPLACE NEWSLETTER ****************/
/******************************************************************************/

.cigogne {
	background: url(/images/cigogne.svg) no-repeat;
	float: right;
	height: 100px;
    width: 140px; /* la largeur est supérieure à la largeur de l'image pour que le texte puisse être plus à droite et dépasser l'image*/
	margin-top: 10px;
}
	
.cigognecontact {
	float: right;
	font-size: 0.9em;
	font-weight: bold;
	text-indent: 0;
	text-align: right;
	margin: 5.2em 1.1em 0em 0em;
}

.cigognecontact a,.cigognecontact a:visited {
	color: #3333ff;
	text-decoration: none;
}

.cigognecontact a:hover {
  color: #9B173B;
 }	

.cigogne a span {  /* permet la bulle et ATTENTION, on ne peut faire de a span global car perturbe les liens dur mathjax */
    margin-top: -50px;
    margin-left: -160px;
    /*	background: #2b5471;*/
    background: #0099CC;
    padding-top: 3px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    font-size: 13px;
    text-align: center;
    position: absolute;
    color: #fff;
    border-radius: 3px;
    transform: scale(0) rotate(-90deg);  /* On determine la taille d'origine 0 et l'origine de la rotation */
    transition: all .25s;   /* durée de l'effet */
    opacity: 0; /*pour ne pas qu'elle se voit*/
    left: 296px;
}

.cigogne a:hover span, .cigogne a:focus span { 
	transform: scale(1) rotate(0);  /* Apparition de la bulle avec une taille normale = scale à 1 */ 
	opacity: 0.8;  /* la bulle apparaît car la transparence est enlevée*/ 
	z-index: 999999; /* pour qu'elle apparaisse sur le rslides */
}

@media (max-width: 899px) {
	.cigogne a span {  /* permet la bulle et ATTENTION, on ne peut faire de a span global car perturbe les liens dur mathjax */
    	margin-top: -60px;
		margin-left: -160px;
	}
}	

/******************* CIT REMPLACE CITATION **************************/
/******************************************************************************/

.cit-titre {
	text-indent: 0;
	font-weight: bold;
	text-align: center;
	margin-top: 6.5em;
	}	
	
.cit-p {
	text-indent: 0.6em;
	text-align: justify;
	font-weight: normal;
   	margin-top: 1em;
}

@media (max-width: 899px) {
	.cigogne {
		margin-top: 0; 
	}
	.cit-titre {
		margin-top: 15px;
	}	
	.cit-p {
		margin-left: 24px; /* comme webdoc */
		margin-right: 160px; /* PERMET DE LE METTRE À DISTANCE DE LA CIGOGNE CAR FAIT TOUTE LA COLONNE */
	}
}

@media (max-width: 767px) {
	.cit-p {
		margin-left: 24px; /* comme webdoc */
		margin-right: 170px; 
	}
}

/*************************** BARRES DU ASIDE **************************/
/******************************************************************************/

.barrecol1, .barrecol2 { /* barrecol1 dans la colonne gauche après doc */
	height: 6px;
	padding-top: 6px;
	padding-bottom: 26px;
}



.barrecol91, .barrecol92 { /* LES MÊMES, MAIS AVEC UN 9 DEDANS POUR MONTRER QU'ILS SONT SUR 1 SEULE COLONNE */
	height: 20px;
	padding-top: 4px;
	padding-right: 10px;
	padding-bottom: 30px;
	padding-left: 10px;
}

.barrecol92 { /* LES MÊMES, MAIS AVEC UN 9 DEDANS POUR MONTRER QU'ILS SONT SUR 1 SEULE COLONNE */
	padding-bottom: 18px;
} 

@media (min-width: 900px) {
	.barrecol91, .barrecol92 {
		display: none;
	}
}

@media (max-width: 899px) {
	.barrecol1, .barrecol2 { 
		display: none;
	}
	.barrecol91, .barrecol92 { 
		display: block;
	}
}
/* les barres sont les mêmes, mais, si je veux mettre quelque chose au-dessous, ce sera plus facile pour les retrouver dans le rechercher, il suffira de le mettre après barrecol2 */

/************************ DOCUMENTATION WEB ************************/
/******************************************************************************/

.webdoc { /* titre */
	text-indent: 0px;
	font-weight: bold;
	color: #970744;
	padding-bottom: 12px;
}

.webdocsanscit { /* titre quand il n'y a pas de citation */
	text-indent: 0px;
	font-weight: bold;
	color: #970744;
	padding-bottom: 12px;
    padding-top: 110px;
}

.past_webdoc > li { /* pour mettre les loupes si le li n'a pas de class */
    background-repeat: no-repeat; /* on annule la répétition par défaut */
    background-position: left top; /* on positionne où l'on veut */
	padding-left: 24px; /* pour éviter la superposition du contenu */
	background-image: url(/images/loupe.svg);
	background-size: 17px 17px;
	margin-top: 8px; /* pour éviter la superposition des images */
	color: #000000;
}

.past_webdoc > .past_cam {
	background-image: url(/images/camera.svg);
	background-size: 19px 15px;
}

.past_webdoc > .past_photo {
	background-image: url(/images/photo.svg);
	background-size: 19px 15px;
}

.pastille2sr  { /* quand il n'y a pas de svg */
	margin-left: 10px;
}

@media (max-width: 899px) {
    
	.webdoc {
		margin-left: 24px; /* comme cit-p */
		margin-top: 5px;
		padding-bottom: 8px;
	}
    
    .webdocsanscit {
		margin-left: 24px; /* comme cit-p */
		margin-top: -5px;
		padding-top: 96px;
      
	}
    
	.past_webdoc > li { /* pour mettre les loupes si le li n'a pas de class */
		margin-left: 34px; /* pour éviter la superposition du contenu */
	}
    
	.past_webdoc > li > ul  { /* pour mettre les loupes si le li n'a pas de class */
		margin-left: 0; /* pour éviter la superposition du contenu */
	}
}



/********************************** PUBS ************************************/
/******************************************************************************/

.pub {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: 10px;
	min-width: 200px;
}

/******************************* PUB ASIDE ********************************/

.pub1 {  /*.pub1 est bon sans rien faire */
   margin-top: -8px;
}
.pub2 {  /*.pub1 est bon sans rien faire */
   margin-top: 10px;
}

/* ATTENTION J'AI MODIFIÉ PUBAMAZON DE L4ANCIEN SITE */

/******************************** MA PUB ***********************************/

.pubcontact {
    background-image: url(/images/ordi-chat.png);  
	background-repeat: no-repeat;
	background-position: center; 
	height: 200px;
	width: 200px;
	 margin-top: -10px;
}

.pubcontact p {
	text-align: left;
	font-weight: bold;
	text-indent: 0;
	font-size: 13px;
	line-height: 1.1;
	text-shadow: 2px 2px 5px #000;
	padding-top: 58px; /*pour le mettre au milieu */
	padding-left: 19px;
}

.pubcontact  p a {
	color: #fff;
}

 .pubcontact a span { 
    text-align: center;
    background: #7ab1da;
	font-size: 12px;
	padding-top: 3px; /* pour donner une marge au texte */
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	margin-top: 40px;
	margin-left: -86px;
	position: absolute; 
    color: #fff; 
	border-radius: 3px; 
	transform: scale(0) rotate(-90deg);  /* On determine la taille d'origine 0 et l'origine de la rotation */
	transition: all .25s;   /* durée de l'effet */
	opacity:0; /*pour ne pas qu'elle se voit*/
}

.pubcontact a:hover span, .pubontact a:focus span { 
	transform: scale(1) rotate(0);  /* Apparition de la bulle avec une taille normale = scale à 1 */ 
	opacity: 0.8;  /* la bulle apparaît car la transparence est enlevée*/ 
}

@media (max-width: 899px) {
	.pub {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.pub1, .pub2, .pubcontact {
		margin: 0;
		padding: 0;
	}
}

@media (max-width: 621px) {
	footer { /* permet de diminuer la marge- bottom de ma pub car elle passe en dessous des autres */
		margin-top:-20px;
	}
	footer h4  {
		background-color: #7ab1da; /* car a 621px, on relève le footer et le h4 apparaît sur le blenc */
	}
	.pubcontact {
	 	margin-top: -20px;
	}
}

/******************************************************************************/ 
/************************* STYLES DU FOOTER **************************/
/******************************************************************************/ 

.pad-15 {
	padding : 15px;
}

.copyright {
	text-align: center;
	color:#000;
	margin-top: 6%;
}

.copyright a:hover{
	color:#fff;
}

footer h4 {
	color: #fff;
	text-align: left;
	padding-bottom: 15px;
	text-shadow: 3px 3px 5px #2b5471; /* couleur des svg du footer */
}

footer li {
	padding-bottom: 6px; /* j'ai mis la line-height à 1 pour diminuer l'espace du br, donc il faut que j'augmente la taille entre les li */
}

.liste1, .liste2, .liste3, .liste4 {
	padding-top: 0.8vw;/* pour les mettre au milieu */
	padding-right: 2vw;
	padding-bottom: 1vw;
	padding-left: 2vw;
}

.fa-check-square {
	color: #2b5471; /* pour la pastille en bleu comme svg */
}

footer a {
	color:#000;
}

footer a:visited {
	color:#5c5c5c;
}

footer a:hover {
	color:#fff;
}

.pave {
	width: 50px;
}

.pave1, .pave2, .pave3, .pave4 {
	padding-top:5%;
	padding-right:15%;
	padding-bottom:8%;
	padding-left:15%;	
}

.pave1 a span, .pave2 a span, .pave3 a span, .pave4 a span {  /* permet la bulle et ATTENTION, on ne peut faire de a span global car perturbe les liens dur mathjax */
	background: #2b5471;
    padding-top: 5px; 
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	font-size: 12px;
	text-align: center;
	position: absolute; 
    color: #fff; 
	border-radius: 3px; 
	transform: scale(0) rotate(-90deg);  /* On determine la taille d'origine 0 et l'origine de la rotation */
	transition: all .25s;   /* durée de l'effet */
	opacity: 0; /*pour ne pas qu'elle se voit*/
}

.pave1 a span {  /* permet la bulle et ATTENTION, on ne peut faire de a span global car perturbe les liens dur mathjax */
    margin-top: 46px;
	margin-left: -52px;
}

.pave2 a span {  /* permet la bulle et ATTENTION, on ne peut faire de a span global car perturbe les liens dur mathjax */
    margin-top: 36px;
	margin-left: -104px;
}

.pave3 a span {  /* permet la bulle et ATTENTION, on ne peut faire de a span global car perturbe les liens dur mathjax */
    margin-top: 48px;
	margin-left: -54px;
}

.pave4 a span {  /* permet la bulle et ATTENTION, on ne peut faire de a span global car perturbe les liens dur mathjax */
    margin-top: 48px;
	margin-left: -47px;
}

.pave1 a:hover span, .pave1 a:focus span, .pave2 a:hover span, .pave2 a:focus span, .pave3 a:hover span, .pave3 a:focus span, .pave4 a:hover span, .pave4 a:focus span { 
	transform: scale(1) rotate(0);  /* Apparition de la bulle avec une taille normale = scale à 1 */ 
	opacity: 0.8;  /* la bulle apparaît car la transparence est enlevée*/ 
}

.footer-s,	.footer-xs,  .footer-xxs, .footer-xxxs {
     display: none;  /* différents footer cachés */
}

@media (min-width: 900px) and (max-width: 1004px) {
	.pave1 a span {  /* permet la bulle et ATTENTION, on ne peut faire de a span global car perturbe les liens dur mathjax */
		margin-top: 44px;
		margin-left: -49px;
	}
	.pave2 a span {  /* permet la bulle et ATTENTION, on ne peut faire de a span global car perturbe les liens dur mathjax */
		margin-top: 36px;
		margin-left: -104px;
	}
	.pave3 a span {  /* permet la bulle et ATTENTION, on ne peut faire de a span global car perturbe les liens dur mathjax */
		margin-top: 44px;
		margin-left: -52px;
	}
	.pave4 a span {  /* permet la bulle et ATTENTION, on ne peut faire de a span global car perturbe les liens dur mathjax */
		margin-top: 44px;
		margin-left: -45px;
	}
	.copyright {
		margin-top: 12%;
	}
}

@media (min-width: 768px) and (max-width: 899px) {
	.footer-md {
		display: block;
 	}
	.pave1, .pave2, .pave3, .pave4 {
		padding-top: 0.5%;
		padding-right: 7%;
		padding-bottom: 1.5%;
		padding-left: 3%;	
	}	
	.copyright{
		padding-top: 9%;
		padding-left: 14%; /* pour l'aligner avec la liste4 */
	}	
	.pave1 a span {
		margin-top: -10px;
		margin-left: -6px;
	}
	.pave2 a span {  
		margin-top: -10px;
		margin-left: 2px;
	}
	.pave3 a span { 
		margin-top: -10px;
		margin-left: -6px;
	}
	.pave4 a span { 
		margin-top: -10px;
		margin-left: 1px;
	}
	.copyright {
		margin-top: -2%;
	}
}

@media (min-width: 600px) and (max-width: 767px) {
	.footer-md,	.footer-xs, .footer-xxs, .footer-xxxs {
     display: none;
    }
	.footer-s {
     display: block;
    }
	.liste1, .liste2, .liste3 {
		padding-left: 5vw; /* pour les mettre au milieu */
	}
	.liste4 {
		padding-left: 13.3vw; /* pour les mettre au milieu */
	}
	.pave1, .pave2, .pave3, .pave4 {
		margin-top: -2%;
		padding-right:7%;
		padding-bottom:1.5%;
		padding-left:12%;
	}
	.pave1 a span {
		margin-top: 28px;
		margin-left: 0;
	}
	.pave2 a span {  
		margin-top: 30px;
		margin-left: -116px;
	}
	.pave3 a span { 
		margin-top: 30px;
		margin-left: 4px;
	}
	.pave4 a span { 
		margin-top: 30px;
		margin-left: -98px;
	}
	.copyright{
		margin-top: 6%;
		margin-left: 20%; /* pour l'aligner avec la liste4 */
	}	
}

@media (min-width: 480px) and (max-width: 599px) {
	.footer-md,	.footer-s, .footer-xxs, .footer-xxxs {
     display: none;
    }
	.footer-xs {
     display: block;
    }
	.liste1, .liste2, .liste3, .liste4 {
		padding-left: 9vw; /* pour les mettre au milieu */
	}
	.pave1, .pave2, .pave3, .pave4 {
		margin-top: -2%;
		padding-right:3%;
		padding-left:6%;
	}	
	.pave1 a span {
		margin-top: -10px;
		margin-left: -6px;
	}
	.pave2 a span {  
		margin-top: -10px;
		margin-left: 2px;
	}
	.pave3 a span { 
		margin-top: -10px;
		margin-left: -6px;
	}
	.pave4 a span { 
		margin-top: -10px;
		margin-left: -96px;
	}
	.copyright{
		margin-top: -5%;
		margin-right: 5.5%; /* pour l'aligner avec les logos */
	}	
}

@media (min-width: 410px) and (max-width: 479px) {
	.footer-md,	.footer-s, .footer-xs, .footer-xxxs {
     display: none;
    }
	.footer-xxs {
     display: block;
    }
	.liste1, .liste2, .liste3, .liste4 {
		padding-left: 5vw; /* pour les mettre au milieu */
	}
	.pave1, .pave2, .pave3, .pave4 {
		margin-top: -2%;
		padding-right:3%;
		padding-left:6%;
	}	
	.pave1 a span {
		margin-top: -10px;
		margin-left: -6px;
	}
	.pave2 a span {  
		margin-top: -28px;
		margin-left: 2px;
	}
	.pave3 a span { 
		margin-top: -10px;
		margin-left: -6px;
	}
	.pave4 a span { 
		margin-top: -10px;
		margin-left: -96px;
	}
	.copyright{
		margin-top: -5%;
		margin-right: 5.5%; /* pour l'aligner avec les logos */
	}	
}

@media (max-width: 409px) {
	.footer-md,	.footer-s, .footer-xs, .footer-xxs {
     display: none;
    }
	.footer-xxxs {
     display: block;
    }
	.liste1, .liste2, .liste3, .liste4 {
		padding: 0;
		margin-bottom: 16px;
		margin-left: 10vw;
	}
	.liste3 {
		margin-top: -16px;
	}
	.pave1 a span {
		margin-top: 28px;
		margin-left: 0;
	}
	.pave2 a span {  
		margin-top: 30px;
		margin-left: -116px;
	}
	.pave3 a span { 
		margin-top: 30px;
		margin-left: 4px;
	}
	.pave4 a span { 
		margin-top: 30px;
		margin-left: -98px;
	}
	.copyright{
		margin-top: -5%;
		margin-right: 5.5%; /* pour l'aligner avec les logos */
	}	
}

/******************************************************************************/
/********************** STYLES TEXTE COMPLET  **********************/
/******************************************************************************/
.italic {
	font-style:italic;
}

strong {
	font-weight: bold;
}

 /* text-transform: capitalize; }*//*transforme les premières lettres des mots en capitatles*/
/*    text-transform: uppercase;*/ /*met tout en majuscule*/

em {
	font-style:italic;
}

.centretext {
	text-indent: 0px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

.gauchetext {
	text-indent: 0px;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
}

.font-normal {
	font-style:normal;
}

.gristext {
	font-style: italic;
	color: #666666;
}

/********************** COULEURS TEXTE  **********************/

.rougetext {
	color: #FF0000;
}

.rougetextveto {
	/*color: #970744; */
	 	color: #FF4500;
}

.verttext {
	color: #00FF00;
}

.bleutext {
	color: #0000FF;
}

.date {
	color: #999999;
font-style: italic;
	font-weight: normal;
}

.jaunetext {
	color: #FFFF00;
}

.magentatext {
	color: #6600CC;
}

.cyantext {
	color: #339999;
}

.ombrebox {
     box-shadow: 3px 3px 5px #888888;
}

.ombretext {
   text-shadow:3px 3px 3px rgba(103, 113, 121, 0.7);
}

.aacorriger {
	background-color: #FFFF00;	
}

.aaplacerailleurs {
	background-color: #c1c1c1;	
}

.aafrancais {
	background-color: #bc8ebe;	
}

.aanglais {
	background-color: #00ff00;	
}

.aareflexion {
	background-color: #f9ae64;	
}

.aawiki {
	background-color: #66ffff;	
}

.textcontact { /* dans contact pour asterisque */
	font-size: 12px;
	font-weight: normal;
	text-decoration: none;
	/*color: #FF0000;*/
	color: #970744;
	margin-right: 0px;
} 

.pdeb { /* quand il n'y a pas de sommaire pour mettre correctement le p au  niveau de la citation */
	margin-top: 12px;
}

.hdeb { /* quand c'est le premier */
	margin-top: 6px;
}

.souligne {
	text-decoration: underline;
}

/********************** CITATIONS DANS LE MAIN ***********************/

.cit, .citabold, .citproprio,  .citpropriobold,.citanim, .citanimbold, citcom  {
	font-style: italic;
	font-weight: normal;
	/*font-family: "Comic Sans MS", cursive;
	font-size: 14px;;**/
	text-indent: 0pt;
	color: #0080aa;
}

.citabold { /*5*/
	font-weight: bold;
}

.citcom {
	color: #0080aa;
}

.citproprio { /*33*/
	color: #936;
}

.citpropriobold { /*33*/
	color: #936;
	font-weight: bold;
}

.citanim { /*4*/
	color: #960;
}

.citanimbold { /*33*/
	color: #960;
	font-weight: bold;
}

.citationgrise { /*1*/
	font-style: normal;
	color: #666666;
}

/******************************* CHAPITRES *******************************/
/******************************************************************************/ 

h2, h3, h4, h5, h6 {
	font-weight: bold;
	text-decoration: none;
	text-align: left;
	text-shadow:  3px 3px 3px rgba(103, 113, 121, 0.7);
}

h2 {
	font-size: 1.230769230769231em; /*16px sur 13*/
	color:#FFF;
}

h3, h4, h5, h6 {
	font-size: 1.153846153846154em; /*15px sur 13px */
}

h3 {
	color: #FFF; /* ne change pas de couleur avec les pages */
}

h5 {
	color: #666666;
}

h2 > span, h3 > span,  h4 > span, h5 > span, h6 > span {
	border: 1px solid #5c5c5c;
	padding: 5px;
	line-height: 2.1; /* pour povoir le mettre correctement quand il passe sur 2 lignes */
	box-shadow: 5px 5px 8px #5c5c5c;
}

h3 span { /*reste de la même couleur quelle que soit le chapitre (cn, ct… */
	background-color: #999999;
}

h4 span { /*reste de la même couleur quelle que soit le chapitre (cn, ct… */
	background-color: #fff; /* car sinon problème lors de contraction */
}

/******************* MARGES ENTRE LES DIV TEXT *******************/

h2 + h3 , h3 + h4, h4 + h5, h5 + h6 {
	margin-top: 20px;
}

h2 + p,  h3 + p, h4 + p, h5 + p, h6 + p {
	margin-top: 20px;
}

h2 + ul,  h3 + ul, h4 + ul, h5 + ul, h6 + ul {
	margin-top: 20px;
}

p + h2,  p + h3, p + h4, p + h5, ul + h2,  ul + h3, ul + h4, ul + h5, ul + h6 {
	margin-top: 20px;
}

p + p {
	margin-top: 15px;
} 

p + ul {
	margin-top: 6px;
}

figure + p {
	margin-top: 15px; /* pour pouvoir mettre les paragaphes au même niveau même s'il y a une figure  */
}

figure + h2, figure + h3, figure + h4, figure + h5, figure + h6 {
	margin-top: 25px; /* pour une image centrée, permet de bien la séparer du h */
}

table + p {
	margin-top: 15px; /* pour pouvoir mettre les paragaphes au même niveau même s'il y a une figure  */
}

.sousga { /* pour h2 afin de l'éloigner du ga : à voir si d'autres div */
	margin-top: 24px;
}

/*************************** PARAGRAPHES  ******************************/
/******************************************************************************/

p {
	text-indent: 0.769230769230769em; /*10px sur 13px */
}

.noindent { /*pour que les fa dans les paragraphes ne prennent pas indent */
    text-indent: 0px; 
}

.norm, .norm1, .normsouspast, .normsousga, .normsousgam, .normsousgam2,  .normsousgasp, .normsousmedia {
	text-indent: 0;
}

.norm1 {
	padding-left: 24px;
}

.normsousmedia {
	margin-top: 14px;
}

.sousmedia {
	margin-top: 14px;
}

.normsouspast { /*114 à voir si padding-left correct*/
	padding-left: 60px;
    margin-top: 7px; /* pour le mettre correctement en hauteur par rapport au li */
}

.normsousga { 
    padding-left: 90px;
	margin-top: -10px; /* car trop loin du text du ga */
}

.normsousgam { /* quand bien.gif par exemple */
	padding-left: 72px;
	margin-top: -10px;
}

.normsousgam2 { /* quand bien.gif par exemple */
	padding-left: 61px;
	margin-top: -10px;
}

.normsousgasp { /* quand le ga est sous une pastille */
	padding-left: 105px;
	margin-top: -10px; /* car trop loin du text du ga */
}

.exnorm, .exnormsouspast, .exnormsouspast, .exnormsouspastfin, .exnormsouspast2, .exnormsouspast2fin, .exnormsouspast3, .exnormsousga, .exnormsousga2, .exnormsousgadef  {
	text-indent: 0pt;
	font-style: italic;
	color: #666666;
}

.exnorm {
	padding-left: 24px; /* pour qu'il soit aligné avec les puces */
}
		
.exnormsousga {  /* left moyen selon les ga */
	padding-left: 72px;
	margin-top: -10px; /* car trop loin du text du ga */
}

.exnormsousga2 {  /* left moyen selon les ga */
	padding-left: 64px;
	margin-top: 5px; /* car trop loin du text du ga */
}

.exnormsousgadef {  /* left moyen selon les ga */
	padding-left: 86px;
	margin-top: 5px; /* car trop loin du text du ga */
}


.exnormsouspast { /* 419  */
	margin-top: 7px; /* pour le mettre correctement en hauteur par rapport au li */
	padding-left: 60px;
	/* padding-bottom : 10px; */
}

.exnormsouspastfin { /* 419  */
	margin-top: 7px; /* pour le mettre correctement en hauteur par rapport au li */
	padding-left: 60px; /* on enlève le padding-bottom */
}

/******************* PAS VERIFIÉ *************************/

.exnormsouspast2 { /* 419 */
	padding-left: 84px;
}

.exnormsouspast2fin { /* 419 */
	padding-left: 84px;
	padding-bottom: 8px;
}

.exnormsouspast3 { /* 419 */
	padding-left: 110px;
}


.exnormsousgaimgg { /* quand il est à côté d'une image gauche */
	padding-left: 290px;
}

/********************** PASTILLES GÉNÉRALES *************************/
/******************************************************************************/

ul {
	list-style-type: none;
}

ul + p {
	margin-top: 15px;
}

.pastille, .pastille2, .pastille3 {
	list-style-position: outside;
}

.pastille { 
	margin-left: 40px;
}

.pastillesr { /* correspond à des ul sans rien - sr - devant */
	margin-left: 24px;
}

.pastillesousnorm1 {
	margin-left: 70px;
}

.pastilleapressr { /* correspond à des ul sans rien - sr - devant */
	margin-left: 36px;
}

.pastillesrg { /* correspond à des ul sans rien avec des grandes images dans les li */
	margin-left: 2px;
}

.pastillesousga, .pastillesousgasr ,  .pastillesousgasrg {
	margin-top: -10px;
	list-style-position: outside;
	margin-left: 110px;
}

 .pastillesousgasrg {
	margin-left: 48px;
}

 .pastillesousgasr {
	margin-left: 64px;
}

.pastillesousnorm1 {
	margin-left: 60px;
}

.pastilledialogue { /* 11 */
	list-style-position: outside;
	margin-left: 170px;
}

.pastille2, .pastille3  {
	margin-left: 15px;
}
	
/***************** PASTILLES AVEC SVG GRANDES *******************/

.pastillefem, .pastillehom, .pastillechat, .pastille2chat {
	list-style-type: none;
    background-repeat: no-repeat; /* on annule la répétition par défaut */
    background-position: left top; /* on positionne où l'on veut */
    margin-left: 19px;
	padding-left: 23px; /* pour éviter la superposition du contenu */
	padding-bottom: 2px;
}

.pastillefem {
	background-image: url(/images/femme.svg);
	background-size: 16px 17px;
}

.pastillehom {
	background-image: url(/images/homme.svg);
	background-size: 17px 17px;
}

.pastillechat, .pastille2chat {
	background-image: url(/images/chat.svg);
	background-size: 16px 17px;
}

.pastille2chat {
	margin-left: -4px;
}

.pastillechien, .pastille2chien {
	list-style-type: none;
	background-image: url(/images/chien.svg);
    background-repeat: no-repeat; /* on annule la répétition par défaut */
    background-position: left top; /* on positionne où l'on veut */
	background-size: 23px 17px;
    margin-left: 16px;
	padding-left: 27px; /* pour éviter la superposition du contenu */
	padding-bottom: 2px;
}

.pastille2chien {
	margin-left: -7px;
}


/* à voir si on garde : c'est dans la sémiologie */

.pastsemx {
	list-style-position: outside;
	list-style-image:  url(/images/sem1.gif);
	margin-left: 40px;
	margin-top: 10px;
}
		
.pastsemx2 {
	list-style-position: outside;
	list-style-image:  url(/images/sem1.gif);
	margin-left: -6px;
}

.pastillesousicone { /* 1 */
	list-style-position: outside;
	margin-left: 24px;
	margin-top: -10px;
}

/****************************** EXPASTILLES ******************************/
/******************************************************************************/

.expastille, .expastillesousganorm, .expastillesouspastexnorm, .expastillesousgaexnorm, .expastille1, .expastille2 {
	list-style-position: outside;
	list-style-image: url(/images/past_ex.svg);
	font-style: italic;
	color: #666666;
}

.expastille {
	margin-left: 60px;
}

/******************* PAS VERIFIÉ *************************/

.expastillesousganorm { /*6*/
	margin-left: 62px;
}

.expastillesouspastexnorm { /*10*/
	margin-left: 50px;
}

.expastillesousgaexnorm { /*6*/
	margin-left: 100px;
}

.expastille1 { /*5  normalement derrière un exnormsouspast*/
	margin-left: 60px;
}

/***************************** EXPASTILLE2 *******************************/

.expastille2 { /*11*/
	list-style-image: url(/images/past2_ex.svg);
	margin-left: 15px;
}

/******************************************************************************/
/********************************* TABLEAU ********************************/
/******************************************************************************/

/****** ATTENTION OBLIGÉ DE METTRE CES STYLES CAR SINON RECHERCHE GOOGLE NUL CAR C'EST UNE TABLE  *************/

.tabcentre, .tabdroite, .tabsousga , .tabdroitepast {
    color:  #000; /* le mettre là car si on veut mettre du rouge ailleurs */
	border: 1px solid #000;
    border-collapse: collapse;
	text-align: center;
	vertical-align: middle;
	padding: 5px;
	box-shadow: 5px 5px 8px #5c5c5c;
}

.tabcentre {
	margin-right:  auto; /* À VOIR SI BONNES MARGIN */
	margin-left:  auto;
	margin-top: 20px;
	margin-bottom: 24px;
}

.tabdroite {
	float: right;
	margin-top: 21px;
	margin-bottom: 0;
	margin-right: 0;
	margin-left: 10px;
}

.tabdroitepast {
	float: right;
	margin-top: 5px;
	margin-bottom: 0;
	margin-right: 0;
	margin-left: 10px;
}

.tabsousga {
	float: right;
	margin-top: 5px;
	margin-bottom: 0;
	margin-right: 0;
	margin-left: 10px;
}

.pst  { /* quand il est dans une pastille */
	margin-top: 6px;
}

.tabcentre th, .tabdroite th, .tabdroitepast th,.tabsousga th { /* titre */
	font-weight: bold;
	background-color: #99FFCC;
	border: 1px solid #000;
    border-collapse: collapse;
	text-align: center;
	vertical-align: middle;
	padding: 5px;
/*	text-shadow: 2px 2px 5px #000;*/
}

.tabcentre td, .tabdroite td, .tabdroitepast td, .tabsousga td  {
    border: 1px solid #000;
    border-collapse: collapse;
	text-align: center;
	vertical-align: middle;
	padding: 5px;
}

.tabcentre > tbody tr:nth-child(odd), .tabdroite > tbody tr:nth-child(odd), .tabdroitepast > tbody tr:nth-child(odd), .tabsousga > tbody tr:nth-child(odd) { /*permet de mettre les couleurs alternativement */
	background-color: #CCCCCC;
}

.tabcentre > tbody tr:nth-child(even), .tabdroite > tbody tr:nth-child(even), .tabdroitepast> tbody tr:nth-child(even), .tabsousga > tbody tr:nth-child(even)  { /*permet de mettre les couleurs alternativement */
	background:#FFFF99;
}

.gris { /* pour les tableaux */
	background-color: #CCCCCC;
}

.grisclair { /* pour les tableaux */
	background-color: #efefef;
}

.jaune { /*pour les tableaux */
	background-color: #FFFF99;
}

.vert { /*pour les tableaux */
	background-color: #9ddfbd;
}

.vertclair { /*pour les tableaux */
	background-color: #cdf8df;
}

.rose { /*pour les tableaux */
	background-color: #f5d0e1;
}

.bleu { /*pour les tableaux */
	background-color: #99ccff;
}

.orange { /*pour les tableaux */
	background-color: #ffcc99;
}

.marron { /*pour les tableaux */
	background-color: #999966;
}

.violet { /*pour les tableaux */
	background-color: #decdf8;
}

.rouge { /*pour les tableaux */
	background-color: #ff6666;
}

.tabcentre > img { /* img dans les tableaux */
	min-height: 100px;
	min-width: 100px;
}

.pastilletab {
	list-style-position: outside;
	list-style-image: url(/images/past_tab.svg);
	margin-left: 20px;
	text-align: left;
}

.pastilletab2 {
	list-style-position: outside;
	list-style-image: url(/images/past2_tab.svg);
	margin-left: 24px;
	text-align: left;
}

/* voir pour padding pour que les images couvrent tout */
/******************************************************************************/
/**************************** IMAGES ET FA *******************************/
/******************************************************************************/

figure {
	display: block;
	float: right;
	border: 1px solid #5c5c5c;
	margin: 6px 0px 6px 10px;
 	box-shadow: 5px 5px 8px #5c5c5c;
}

figcaption {
	text-align: center;
	font-style: normal;
	color: #000;
	padding: 5px;
	border-top: 1px solid #000000;
	margin-top: -3px; /* pour remonter le figcaption quelle que soit l'image centree ou non */
}

.mat { /* pour remonter le figcaption à côté de mathjax */
	margin-top: -2px; 
}

/*.pp, .ph2, .pp2, .pm  { permet de régler la figure sur le texte 
	margin-bottom: 6px;
}*/

.pp { /* permet quand il est dans un paragraphe de le mettre au dessus du p  et de ne pas avoir de problème de validation */
	margin-top: 20px;
}

.ph {
	margin-top: 28px;
}

.pp1 { 
	margin-top: 14px;
}

.ptab { 
	margin-top: 8px;
}

.pm { 
	margin-top: -4px;
}
	
img {
	max-width:100%;
	height: auto;
}

/************************************* FA**************************************/
/******************************************************************************/

.indent0 {
	margin-left: -10px; /* permet au fa qui sont dans les p avec une indentation d'être bien positionnés */
}
.decrois {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.crois {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.fa_custom {
	color: #0099CC; /* POUR LES <i class="fa fa-chevron-circle-right fa-lg fa_custom"></i> ET left */
	margin-right: 6px;
	margin-bottom: 4px;
	margin-left: -5px;
}

.iconbgv {
    color: #99cc66;
}

.iconbgn {
    color: #000;
}

/*********************** alignement vertical des ga ???? *****************/
/******************************************************************************/

.almid  { /* 1996 ? car droite en texte */
	vertical-align: middle;
	}
	
.albas { /* 1996 ? car droite en texte */
	vertical-align: baseline;
	}	

.alsub { /* 1996 ? car droite en texte */
	vertical-align: -1px;
	}
	
.alsubgd { /* 1996 ? car droite en texte */
	vertical-align: -3px;
	}

/*************************** IMAGES DROITES ****************************/
/******************************************************************************/

img.droite { /* 1996 ? car droite en texte */
	float: right;
	margin: 4px 0px 0px 10px;
	border: 1px solid #000000;
}
		
img.droitesc { /* 76 */
	float: right;
	margin: 2px 0px 0px 10px;
}
		
/*************** A VOIR si utile car a priori plutôt nuisible ? **************/ 

img.droitetit { /* 80 */
	float: right;
	margin: 2px 27px 0px 10px;
	border: 1px solid #000000;
}
		
img.droitetitsc { /* 12 */
	float: right;
	margin: 2px 27px 0px 10px;
}

/********************* GA ET IMAGES GAUCHES  ***********************/
/******************************************************************************/ 

/************************************* GA*************************************/ 

.ga, .gadeb, .ga1l, .gadeb1l, .ga1, .ga11l, .gasp, .gasp1l { /* div qui met le ga et le text dans une flex */
	display: flex;
	margin-top: 15px;
	margin-bottom: 15px;
    align-items: start;
}


.ga1, .ga11l { /* en retrait comme norm1 */
	margin-left: 24px;
}

.gasp, .gasp1l { /* en retrait comme norm1 */
	margin-left: 40px;
}

.gadeb { /* quand c'est au tout debut du contenu */
	margin-top: 0; /* pour ne pas qu'il soit trop bas */
}

.ga1l, .ga11l, .gasp1l { /* quand il n'y a qu'une ligne  pour l'aligner sur le ga et ATTENTION avec gatext1l */
	align-items: center;
}

.gadeb1l { /* quand il n'y a qu'une ligne et ATTENTION avec gatext1l */
	margin-top: 0;
	align-items: center;
}

 .ga > img, .gadeb > img, .ga1l > img, .gadeb1l > img, .ga1 > img, .ga11l > img, .gasp > img, .gasp1l  > img { 
	  max-height: 100%; /* conserve la taille correcte de l'image en enlevant max  */
}

.gatext, .gatext1l {
	text-indent: 0; /* style du p de la flexbox */
	font-weight: bold;
	padding-top: 7px;
	padding-left: 10px;
}

.gatext1l { /* quand il n'y a qu'une ligne quel que soit le ga et ATTENTION avec ga1l… */
	padding-top: 0;
}

 /************* IMAGES DANS LE TEXTE AVEC INFOS DERRIÈRE ************/

.intext, .intextcl, .intextlet, .intextcn, .intextct { 
/*	margin-right: 0px;*/ /* loupe et photo et le tout */
	margin-left: 2px;
	margin-right: 3px;
	width: 16px;
}

.intextcl { 
	width: 17px; /* camera et livre */
}

.intextlet { 
	width: 30px; /* lettre */
}

.intexts {
	margin-left: 0;
	margin-right: 1px;
	width: 20px;
}

.intextcn { 
	width: 22px; /* lettre */
	  margin-bottom: -4px;
}

.intextct {
  margin-bottom: -4px;
}


.intextyt { 
	width: 22px; /* lettre */
   vertical-align: sub;
}

.intextent { /* pour les chiffres entourés pour neurologie et autres cercles de couleur svg */
	margin-left: 1px;
	width: 18px;
	vertical-align: middle;
}

 /********** QUAND ON FAIT RESORTIR UN FILM DANS LE TEXTE **********/

/* À DROITE */

/* pour le ga */
.camd, .camd1, .camdm, .camdp { 
	float: right;
	padding: 2px 6px 2px 6px;
 	box-shadow: 5px 5px 8px #5c5c5c;
	background-color: #D3D3D3;
}

.camd { /* dans un p ? */
	margin: 15px 0px 6px 10px;
}

.camd1 { /* dans un p ? */
	margin: 12px 0px 6px 10px;
}

.camdm { /* quand elle est dans une li */
	margin: 5px 0px 6px 10px;
}

.camdp { /* quand elle est dans une li  ? */
	margin: 24px 0px 6px 10px;
}

.mt15 {  /* pour remettre la marge du texte qui l'entoure qui est enlevée avec le camd  dans le p*/
	margin-top: 15px;
}

.mt-5s {  /* pour remettre la marge du texte qui l'entoure qui est enlevée avec le camd  dans le p*/
	margin-top: -5px;
}

.mt0 {  /* pour remettre la marge du texte qui l'entoure qui est enlevée avec le camd  dans le p*/
	margin-top: 0;
}

/* pour la camera */
.infig {  /* pour que la camera soit plus grande */
	margin: 4px;
	width: 30px;
}

/* pour le texte */
.gatextd {
	padding : 2px 4px 2px 10px;
	line-height: 1;
	font-size: normal;
	text-indent: 0;
}

/* 0 gauche  pareil que ga normal mais lui mettre une ombre */
.ombre {
	box-shadow: 5px 5px 8px #5c5c5c;
	background-color: #D3D3D3;
	margin-left: 12px;
}

/********************************** AUTRES **********************************/ 

img.gauche { /* 650 ? car gauche en texte */
	float: left;
	margin: 2px 10px 1px 0px;
	border: 1px solid #000000;
}
		
/*img.gauchec {  3051 correspond à tous les ga et autre images 
	float: left;
	padding: 0px 10px 0px 0px;
	vertical-align: middle;
}*/

.vet {
	float: left;
	margin-right: 10px;
	margin-top: 2px;
	margin-bottom: 1px;
	margin-left: -86px;
	vertical-align: middle;
	background-position: center;
}

img.gaucheim { /* 1 voir si remplacer par gauche, mais pas sûr car imge à droite en même temps */
	float: left;
	border: 1px solid #000000;
	margin-right: 10px;
	margin-top: 2px;
	margin-bottom: 1px;
	margin-left: -30px;	
}
	
/************************* IMAGES CENTRÉES  **************************/
/******************************************************************************/ 

.centrefig, .centrefigt { /* style de figure pour la centrer */
	float: inherit; /* iNDISPENSABLE CAR SINON RIGHT */
	margin-right:  auto; /* À VOIR SI BONNES MARGIN */
	margin-left:  auto;
	margin-top: 20px;
	margin-bottom: 10px;
}

.centrefigt {
	margin-top: 34px;
}

/**************** A enlever quand passer sous figure  *******************/
	
img.centre {
	margin:0 auto;
	border: 1px solid #000000;
	text-align: center;
}
		
img.centresc {
	margin:0 auto;
	text-align: center;
}

/******************************************************************************/ 
/****************************** HABILLAGE ********************************/
/******************************************************************************/ 

.comp {
background-color: #004667;	
}

.cn {
background-color: #007FAA;
}

.ct {
background-color: #600a55;
}

.com {
	background-color: #e36d24;
}

.bio {
	background-color: #7fa786;
}

.trou {
background-color: #b3433d;
}

.genconst {
background-color: #970744;
}

/***************************************** GOTOP *************************************/
/***************************** ne pas oublier gotop.js  *******************************/ 

#gotop {
	display: none;
	position: fixed;
	right: 40px;
	bottom: 40px;
	Z-index:150;
}
	
#gotop a {
	background-image: url(/images/gotop.svg);
    background-repeat: no-repeat; /* on annule la répétition par défaut */
	background-size: 50px 50px;
	float: left; /* A VOIR SI ON SUPPRIME OU NON */
	width: 50px;
	opacity: 0.7;
	height: 50px;
}
	
#gotop a:hover {
	/*opacity: 0.6;*/
	opacity: 1;
}

@media (max-width: 767px) {
	#gotop  {
		right: 20px;
		bottom: 20px;
	}
}