root{
	font-size:16px;
	
}
html{
	scroll-padding-top:calc(var(--height-entete) + var(--margintop-entete) + var(--marginbottom-entete));/*pour ajuster le scroll sur les ancres*/
	
}
html,body{
  margin:0;/*reset*/
  padding:0;/*reset*/
  box-sizing:border-box;
  width:100vw;
  font-family:Georgia, serif;
	
/*---------------------------------------------dimensions----------------------------------------------------------------------*/	

	--sidebargauche-width: 20vw;
	--sidebargauche-left:3vw;
	
	--height-filarianne:4vh;
	--marginbottom-filarianne:1vh;
	
	--content-width: calc(100vw - var(--sidebargauche-width) - var(--sidebargauche-left));/*80vw*/
	--content-left: calc(var(--sidebargauche-left) + var(--sidebargauche-width));/*=1vw+15vw*/
		
		
	--height-entete:8vh;
	--margintop-entete:1vh;	
	--marginbottom-entete:2vh;	
	
	
/*-----------------------------------------effets------------------------------------------------------------------------------*/

	--box-shadow-1: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;/*relief sortant*/
	--box-shadow-2:rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;/*relief rentrant*/

	--gradient-border-vertical:linear-gradient(90deg, #161515 1%, #161515 1%, #ecdfdf 1%, rgba(248,242,242,1) 20%, #5c5555 37%, #5c5555 54%, #efe7e7 87%, #f5ecec 98%, rgba(19,19,19,1) 99%, rgba(19,18,18,1) 100%, rgba(215, 203, 203, 1) 100%);
  

	--gradient-border-horizontal:linear-gradient(180deg, #161515 1%, #161515 1%, #ecdfdf 1%, rgba(248,242,242,1) 20%, #5c5555 37%, #5c5555 54%, #efe7e7 87%, #f5ecec 98%, rgba(19,19,19,1) 99%, rgba(19,18,18,1) 100%, rgba(215, 203, 203, 1) 100%);	
	
	
   
 /*--------------------------------------backgroundcolors et colors-------------------------------------------------------------*/
	--color-borders-sections:gray;
	--mainbgcolor1:#f2f2f2;
	--mainbgcolor2:#ffffff;
	
	--bg-color-entete:white;
	
	--bg-color-sidebargauche:#ffffff;
	--bgcolor-menu:#f2f2f2;
	--color-menu:black;
	--color-menu-a-hover:gold;
	--bgcolor-menu1:#c0c0c0;
	--color-menu1:black;
	--color-menu1-a-hover:yellow;
	--bgcolor-menu2:#ffffff;
	--color-menu2:black;
	--color-menu2-a-hover:lightyellow;
	
	--bgcolor-sommaire:white;
	--bgcolor-filarianne:white;
	
	--bgcolor-content:#ffffff; 
	--bgcolor-contenu:#f2f2f2;
}
a{
  text-decoration:none;/*supprime couleur bleue et soulignement des a*/
  color:black;
}

/*-------------------------------------------------container----------------------------------------------------------------------*/

section.container{

	position:relative;
	width:100%;
	background-color:white;
	z-index:95;
}

/*---------------------------------------------------------entete--------------------------------------------------------------------*/

section.entete{
	
	position:fixed;
	width:100vw;
	height:var(--height-entete);
	
	display:flex;
	justify-content: flex-start;
	align-items: center;

	z-index:99;
	background-color:var(--bg-color-entete);
	border-bottom:2px solid var(--color-borders-sections);
	border-top:2px solid var(--color-borders-sections);
	margin-top:var(--margintop-entete);
}

div.logo{
	
	width:5vw;
	height:var(--height-entete);  
	
	background-color: white;
	display:flex;
	justify-content:center;
	align-items:center;
}
div.dimlogo{
	width:4vw;
	height:calc(var(--height-entete)-1vh);

}
div.logo img{
 
  
  width:100%;
  height:100%;
  object-fit:contain;   
  
}

div.titre{
  min-width:10ch;
  height:var(--height-entete);
  display:flex;
  justify-content: center;
  align-items: center;
  background-color:white;
  
  
}
div.titre > p{
  font-size:2.2ch;
  color:black;
  width:7ch;
 
  display:flex;
  justify-content: center;
  align-items: center;
}

div.centre{
  width:calc(100vw - 5vw - 10ch);
  height:var(--height-entete);
  
  display:flex;
  flex-direction:column;
  justify-content: center;

  
  background-color:white;
}
div.centre div.menu {
  width:100%;
  height:calc(0.8 * var(--height-entete));
  
  display:flex;
  justify-content: flex-end;
  align-items: center;
  column-gap:3.5vw;
  /*
  margin-top:auto;
  margin-bottom:auto;
  */
  
  background-color:#f2f2f2;
  
} 
div.centre div.menu a{
  
  background-color:white;
  color:black;
	border:1px solid black;
	border-radius:9%;
	padding:0.33em;
	margin-right:4vw;
	/*box-shadow:var(--box-shadow-1);*/
}
/*-----------------------------------------------------mobile------------------------------------------------------------------------*/
#ham{
	display:none;
}
#croix{
	display:none;
	
}
section.panneau-menu{
	display:none;
}

/*-------------------------------------------------------sidebargauche---------------------------------------------------------------*/

section.sidebargauche{
	
	position:fixed;
	width: var(--sidebargauche-width);
	/*height:calc(95vh - var(--height-entete) - var(--margintop-entete) - var(--marginbottom-entete) );*/
	height:auto;
	
	top:calc(var(--height-entete) + var(--margintop-entete) + var(--marginbottom-entete) + 0.4em + var(--margintop-sidebar-gauche));/*0.4em?*/
	--margintop-sidebar-gauche:-1vh;
	left:var(--sidebargauche-left);/*1vw*/
	
	border-right:2px solid var(--color-borders-sections);
	border-left:2px solid var(--color-borders-sections);
	border-bottom:2px solid var(--color-borders-sections);
	
	z-index:99;
	background-color:var(--bg-color-sidebargauche);
  
}

/*--------------------------------------------------------*/
div.fil-a{
  
	width:100%;
	height:var(--height-filarianne);
	border-top: 2px solid var(--color-borders-sections);
	border-bottom:2px solid var(--color-borders-sections);
	
	background-color:var(--bgcolor-filarianne);
	display:flex;
	justify-content: flex-start;
	align-items:center;
	
	
	margin-bottom:var(--marginbottom-filarianne);
}
.fil-a > *{
  margin:auto 0.5ch;
}
#house, #angle-right{
  width:1.4ch;
  height:1.1em;
}
/*-------------------------------------------------------*/

div.menusommaire{
  
  
  width:100%;

  height:calc(97vh - var(--height-entete) - var(--margintop-entete) - var(--height-filarianne) - var(--marginbottom-filarianne));
  overflow:scroll;
  background-color:var(--bgcolor-menu);
  
 z-index:98;
  /*
  scrollbar-* non pris en charge par safari webview-android webview-ios
  scrollbar-color:#154734;
  scrollbar-width:7px;
  */
  
}
/* webkit cible les navigateurs safari chrome edge opera brave ...*/
/*problème: overflow:scroll de div.menu ne stylise t il pas les 2 scrollbars : verticale et horizontale? */
/*navigateur intégré de acode est il webkit? webkit-android? */
/*div.menu::-webkit-scrollbar{
  width:7px;
}*/
/*div.menu::webkit-scrollbar-track{/*bande de la scrollbar
  background:#154734;
}*/
/*div.menu::-webkit-scrollbar-thumb {/*bouton de la scrollbar
  background-color: #f3f0dd;
  border-radius: 6px;
  border: 2px solid #154734;
}*/

div.menusommaire > ol {
   
  list-style:none;
  margin-left:0;/* casse l’indentation*/
  padding-left:0;/*casse l’indentation*/
  z-index:97;
  
}

div.menusommaire > ol > li{
  
  padding-top:0.3em;
  padding-bottom:0.3em;
  background-color:#ffffff;
  /*box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;*/
	/*box-shadow: var(--box-shadow-1);*/
  
}
div.menusommaire > ol > li:not(div.menusommaire > ol:last-child){
	border-bottom:1px solid lightgray;
}
div.menusommaire ol.niv1{
  background-color:var(--bgcolor-menu1);
  list-style:none;
  margin-left:0;
  padding-left:0;
  border-top: 1px solid lightgray;
  border-bottom: 1px solid lightgray;
}
div.menusommaire ol.niv1 > li{
	padding-top:0.3em;
	padding-bottom:0.3em;
	
}
div.menusommaire ol.niv1 li a{
  color:var(--color-menu1);
  font-size:68%;
}

div.menusommaire ol.niv2{
  background-color:var(--bgcolor-menu2);
  list-style:none;
  padding-top:0.3em;
  padding-bottom:0.3em;
  margin-left:0;
  padding-left:0;
  border-top: 1px solid lightgray;
  border-bottom: 1px solid lightgray;
  
  
}
div.menusommaire ol.niv2 > li{
	padding-top:0.3em;
	padding-bottom:0.3em;
}

div.menusommaire ol.niv2 li a{
  color:var(--color-menu2);
  font-size:75%;
}
.menu > ol > li > a:hover,.menu > ol > li > div.aligndoss:hover {
	background-color:var(--color-menu-a-hover);
}

div.menusommaire ol.niv1 > li > a:hover, div.menusommaire  ol.niv1 > li > div.aligndoss:hover{
	background-color:var(--color-menu1-a-hover);
}
div.menusommaire ol.niv2 > li > a:hover, div.menusommaire ol.niv2 > li > div.aligndoss:hover{
	background-color:var(--color-menu2-a-hover);
}


.deroulant{
  display:none;
}
div.aligndoss{  
  display:flex;
  justify-content:flex-start;  
  align-items:center;
  cursor:pointer;
}
.menusommaire i.dossclose{
  font-size:1.35em;
  margin-left:auto;
  cursor:pointer;
}
.menusommaire i.dossopen{
  display:none;
  margin-left:auto;
  font-size:1.35em;
  cursor:pointer;
}

/*----------------------------------------------------------*/
section.sidebargauche div.menutitres{
  width:100%;
  height:auto;
  max-height:calc(97vh - var(--height-entete) - var(--margintop-entete) - var(--height-filarianne) - var(--marginbottom-filarianne));
  overflow:scroll;
  background-color: white;
  
 z-index:98;
}
div.menutitres ul{
 margin-left:0;
 padding-left:0;
 list-style:none;
}
div.menutitres ul li.heading1:not(.menutitres ul li:first-child){
  font-size:100%;
  margin-top:1.5em;
}
div.menutitres ul li.heading2{
  font-size:91%;
  display:block;
  margin-left:3vw;
  margin-top:0.8em;
}
div.menutitres ul li.heading3{
  font-size:84%;
  display:block;
  margin-left:4vw;
  margin-top:0.5em;
}

/*---------------------------------------------icones page index.html --------------------------------------------------------------*/
section.icones{
  position:fixed;
  top:calc(var(--height-entete) + var(--margintop-entete) + var(--marginbottom-entete));
  margin-top:5vh;
  width:100vw;
  height:75vh;
  background-color:white;
  
}
div.schema{
  width:100%;
  height:100%;
}
div.schema img{
  width:75vw;
  height:75vh;
  display:block;
	margin:auto;

	background-color:white;
	color:black;
}

/*------------------------------------------------contenu-------------------------------------------------------------------------*/

section.content{
	position:absolute;	
	width: var(--content-width);/*100vw -15vw-1vw:64vw*/
	left: var(--content-left);/*15vw+1vw*/
	top:calc(var(--height-entete) + var(--margintop-entete) + var(--marginbottom-entete));
	min-height:calc(90vh - var(--height-entete) - var(--margintop-entete) - var(--marginbottom-entete));
	background-color:var(--bgcolor-content);
	
	
	
}

div.wp-contenu{ 
    min-height:calc(90vh - var(--height-entete) - var(--margintop-entete) - var(--marginbottom-entete));
    --content-margins-left-and-right:13vw; 
	width:calc(var(--content-width) - (2 * var(--content-margins-left-and-right)));
	margin-left:auto;
	margin-right: auto;
	background-color:var(--bgcolor-contenu);
	color:var(--color-content1);/*cf --color-content2*/
  
}
.sommaire ol{
  list-style:none;
}

div.contenu{ 
      min-height:calc(90vh - var(--height-entete) - var(--margintop-entete) - var(--marginbottom-entete));

	  line-height: 1.5;
	  font-family: Georgia, serif;
	  font-size: 20px;
	  color: #1a1a1a;
	  background-color: #fdfdfd;
	
	
	  margin: 0 auto;
	  max-width: 36em;
	  padding-left: 50px;
	  padding-right: 50px;
	  padding-top: 50px;
	  padding-bottom: 50px;
	  hyphens: auto;
	  overflow-wrap: break-word;
	  text-rendering: optimizeLegibility;
	  font-kerning: normal;
	}
	
	
.contenu p {
  margin: 1em 0;
}
.contenu a {
  color: blue;
}
.contenu a:visited {
  color: green;
}
.contenu img {
  max-width: 100%;
}
.contenu h1, .contenu h2, .contenu h3,.contenu h4, .contenu h5, .contenu h6 {
  margin-top: 0.4em;
}
.contenu h5, .contenu h6 {
  font-size: 1em;
  font-style: italic;
}
.contenu h6 {
  font-weight: normal;
}
.contenu ol, .contenu ul {
  padding-left: 1.7em;
  margin-top: 1em;
}
.contenu li > ol, .contenu li > ul {
  margin-top: 0;
}
.contenu blockquote {
  margin: 1em 0 1em 1.7em;
  padding-left: 1em;
  border-left: 2px solid #e6e6e6;
  color: #606060;
}
.contenu code {
  font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
  font-size: 85%;
  margin: 0;
}
.contenu pre {
  margin: 1em 0;
  overflow: auto;
}
.contenu pre code {
  padding: 0;
  overflow: visible;
  overflow-wrap: normal;
}
.contenu .sourceCode {
 background-color: transparent;
 overflow: visible;
}
.contenu hr {
  background-color: #1a1a1a;
  border: none;
  height: 1px;
  margin: 1em 0;
}
.contenu table {
  margin: 1em 0;
  border-collapse: collapse;
  width: 100%;
  overflow-x: auto;
  display: block;
  font-variant-numeric: lining-nums tabular-nums;
}
.contenu table caption {
  margin-bottom: 0.75em;
}
.contenu tbody {
  margin-top: 0.5em;
  border-top: 1px solid #1a1a1a;
  border-bottom: 1px solid #1a1a1a;
}
.contenu th {
  border-top: 1px solid #1a1a1a;
  padding: 0.25em 0.5em 0.25em 0.5em;
}
.contenu td {
  padding: 0.125em 0.5em 0.25em 0.5em;
}
.contenu contenu-header{
  margin-bottom: 4em;
  text-align: center;
}
.contenu #TOC li {
  list-style: none;
}
.contenu #TOC ul {
  padding-left: 1.3em;
}
.contenu #TOC > ul {
  padding-left: 0;
}
.contenu #TOC a:not(:hover) {
  text-decoration: none;
}
.contenu code{white-space: pre-wrap;}
.contenu span.smallcaps{font-variant: small-caps;}
.contenu div.columns{display: flex; gap: min(4vw, 1.5em);}
.contenu div.column{flex: auto; overflow-x: auto;}
.contenu div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
.contenu ul.task-list{list-style: none;}
.contenu ul.task-list li input[type="checkbox"] {
  width: 0.8em;
  margin: 0 0.8em 0.2em -1.6em;
  vertical-align: middle;
}
.contenu .display.math{display: block; text-align: center; margin: 0.5rem auto;}

.contenu a.footnote-ref:visited{
  color:green;
}
.contenu a.footnote-back:visited{
  color:blue;
}
	
	
	
	
/*---------------------------------------------------design mobile--------------------------------------------------------*/

@media (max-width : 700px){

body,html{
	--height-entete:5vh;
	--margintop-entete:0.5vh;
	--marginbottom-entete:1vh;

	--ham-size:30px;
	
	--content-left-mobile:0vw;
	--content-width-mobile:100vw;
	--content-margins-left-and-right-mobile:5vw;

	--font-size-menumobile:1.3em;

}
div.centre{
	width:calc(100vw - 5vw - 10ch - var(--ham-size));
	height:var(--height-entete);
	  
	display:flex;
	flex-direction:column;
	justify-content: center;

	  
	background-color:white;
}
div.centre div.menu{
	display:none;
}

section.panneau-menu {
	display:none;/*js*/
	flex-direction:column;
	position:fixed;
	top:calc(var(--margintop-entete) + var(--height-entete));
	width:100%;
	/*height:calc(5 * var(--height-li-menumobile) + 5 * var(--font-size-menumobile) / 2 * 2);*/
	height:auto;
	background-color:var(--bg-color-entete);
	/*box-shadow: 2px 2px 4px gray;*/
	z-index:999;
	border-top:2px solid gray;
	border-bottom:2px solid gray;
	
	
}
.panneau-menu div.menumobile{


	
}
.panneau-menu div.menumobile ul{
	list-style:none;
	
	padding-left:0;
	margin-left:0;
	padding-bottom:0;
	margin-bottom:0;
	padding-top:0;
	margin-top:0;
	
	width:100%;
	
}
.panneau-menu div.menumobile li{

	width:100%;

	display:flex;
	justify-content: flex-start;
	align-items: center;
	
	font-size:var(--font-size-menumobile);
	
	padding:0.5em;
  
}
.panneau-menu div.menumobile li:not(.panneau-menu .menumobile > ul > li:last-child){
	border-bottom:1px solid lightgray;
	
}

#ham{
  display:block;/*+js*/
  
  font-size:2em;
  color:gray;
  margin-right:0.4em;
  margin-top:0;
  margin-left:auto;  
}
#croix{
	display:none;/*js*/
	font-size:2em;
	color:gray;
	margin-right:0.4em;
    margin-top:0em;
    margin-left:auto; 
	
}
section.sidebargauche{
	display:none;
}






section.icones{
  /*hérite de positio:fixed et top:calc...*/
  
  margin-top:5vh;
  width:100vw;
  height:75vh;
  background-color:white;
  
}
div.schema{
  width:100%;
  height:100%;
}
div.schema img{
  width:75vw;
  height:75vh;
  display:block;
	margin:auto;

	background-color:white;
	color:black;
}





section.content{	
  width:100vw;
  left:var(--content-left-mobile);
  
}
div.wp-contenu{
  width:calc(var(--content-width-mobile) - 2 * var(--content-margins-left-and-right-mobile));
  margin-left:auto;
  margin-right:auto;
  
  
}
div.contenu {
	font-size: 0.9em;
	padding: 1em;
	
	
	
}
.contenu h1 {
font-size: 1.8em;
}


}