/* ------------------------------------------------------------ */
/*   Feuille de Style CSS    Jean-Pierre Perroud, Switzerland   */
/*   Les mises à jour se trouvent dans GitHub                   */
/*   https://github.com/jperroud/WEB_JPP                        */
/* ------------------------------------------------------------ */

/***********************************************/
/*  Les éléments                               */
/***********************************************/
/* Variables globales de cette page HTML */
:root {
  --fond_noir : #1c1c1c;
  --fond_gris : #252525;
  --fond_gris0: #2f2f2f;
  --fond_gris1: #555555;
  --fond_gris2: #777777;
  --fond_gris3: #999999;
  --fond_gris4: #aaaaaa;
  --fond_gris5: #cccccc;
  --fond_blanc: #eee;
  --fond_bleu1: #08085f;
  --fond-bleu2: #4173e9;

  --barre_1:#555555;
  --barre_2:#606060;
  --barre_3:#909090;
  --barre_4:#aaaaaa;

  --largeur: 300px;
  --noir : #333;
  --gris0: #555;
  --gris1: #777;
  --gris2: #999;
  --gris3: #aaa;
  --clair: #ccc;
}
/* medium = 1rem = 16px pour desktop */
/* pour le corps de cette page HTML  */
html {
  /* Essai avec 62.5% avec 10px en :root */
  font-size: 12px; /*small=12px et non plus medium de 16px*/
}
body {
  /* font-size: calc(1em + 0.5vw); Taille de police de base de 1rem + 0,5% de la largeur de l'écran */
  font-size   : 1rem; 
  font-size   : clamp(1rem, 1.63vw, 2rem);
  font-family :'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	color       : var(--clair);
  background-color : var(--fond_gris);  
  margin-left : 30px ;
  margin-right: 30px ;
  /* line-height: normal - s'adapte automatiquement*/
  /* min 1.5 */
  line-height : 1.6; /* Interligne val 1.6 */
}
table,th,tr,td {
  border  : 1px solid grey;
  padding : 8px;
  margin  : 20px;
 	font-size: 1rem;
  color   : #a9000;
  background-color : var(--fond_gris1);  
  }

address {
  font-size     : 0.8em;
  text-align    : right;
  padding-right : 10px; 
  color         : white;
  background-color: var(--barre_2);
  }
ul {
  /*list-style-image: url(point2.png);*/
  list-style-type: square;
  }
pre	{
	color             : #000038;
	background-color  : #d6d6d6;
	font-family       : 'Courier New', Courier, monospace;
  font-size         : 0.9em;
  }  
button {
  font-size     : 0.8rem;
  background-color: var(--fond_blanc);
  padding       : 3px;
  border-radius : 6px;
  }
h1{
  /* font-size         : calc(1.8rem + 0.390625vw); */
  font-size         : calc(1.8rem + 0.3vw);
  /* clamp(min, val, max) */
  font-size: clamp(1.5rem, 5vw, 3rem); /* XXXXX */
  color             : white;
  background-color  : var(--barre_1);
  padding-left      : 5px;
  }
h1:first-letter {
  font-size       : calc(2rem + 0.390625vw);
 	color           : white;
  font-size       : 130%;                            
  padding-left    : 5px;
  }
h2 {
  font-size   : calc(1.3rem + 0.390625vw);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  color: white;
  background-color: var(--barre_2);
  padding-left:5px;
  }
h2:first-letter {
  font-size       : calc(1.5rem + 0.390625vw);
 	color           : White;
  font-size       : 130%;                            
  padding-left    :5px;
  }
h3 {
  font-size:  calc(1.1rem + 0.390625vw);
  font-size: clamp(1.2rem, 3vw, 2rem);
  color: white;
  background-color: var(--barre_3);
  padding-left:5px;
  }
  h4 {
    color: var(--fond_blanc);
    background-color: var(--fond_gris0) ;
  }
img {
  margin  : auto;
  max-width: 100%;
  height  : 100%;
  object-fit: contain;
}

.centred {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
  /* object-fit:cover;
  object-position:center;  */

a {
  color:rgb(224, 68, 238);
  /*text-decoration:blink;*/
  }
a:visited {
  color:rgb(82, 116, 227);
  /*text-decoration:blink;*/
  font-style:"italic"
  }

/* Menu Vertical en flexbox */
.container2{
  display: flex;
  flex-direction: column;
}

/* ---  */
.menuV {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-start;
}
.menuV ul {
  list-style: none;
  padding: 0;
  width: 200px;
}
.menuV li {
  margin: 5px 0;
}
.menuV a {
  text-decoration: none;
  display: block;
  padding: 3px 15px;
  color: #a6a6a6;
  font-size: calc(1.1rem + 0.390625vw);   /* taille texte menu */
  font-weight: bold;
}
.menuV li a:hover {
  color: #ffffff;
  background-color: #5d6163;
  border-radius: 5px;
}

/* Responsive -------------------------------------- */
/* Grands écrans UHD 4K */
@media screen and (min-width: 1024px) {
  body,th,tr,td {
    border      : 2px solid #red;
    font-size   : calc(1rem + 0.390625vw);
    color       : #f3e0f8;
    margin-left : 55px ;
    margin-right: 55px ;
  }
  button {
    font-size: 1em;
  }
  .split {
      column-count: 3;
      column-rule: solid 4px #2f2f2f;
      column-gap: 5rem; /* espace entre colonnes */
  } 
}
/* Desktop */
@media screen and (max-width: 1023px) {
  body,th,tr,td {
    border  : 2px solid #red;
    font-size   : calc(1rem + 0.390625vw);
    color: #bfedf6;
    margin-left : 35px ;
    margin-right: 35px ;
  }
  button {
    font-size: 1.01em;
  }
  .split {
    column-count: 2;
    column-rule: solid 4px #2f2f2f;
    column-gap: 5rem;
  }
}
/* Tablet */
@media screen and (max-width: 768px) {
  body,th,tr,td {
    border      : 2px solid #red;
    font-size		: 1.1em;
    font-size   : calc(1rem + 0.390625vw);
    color: #eaeabd;
    margin-left :25px;
    margin-right:25px;
  }
  button {
    font-size: 1.06em;
  }
  .split {
    column-count: 1;
  }

}
/* Smartphone */
@media screen and (max-width: 479px) {
  body,th,tr,td {
    border      : 2px solid #red;
    font-size		: 1.2em;
    font-size   : calc(1rem + 0.390625vw);
    color       : var(--clair);
    margin-left : 10px ;
    margin-right: 10px ;
  }
  button {
    font-size: 1.08rem;
  }
  .split {
    column-count: 1;
  }
}

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

/******************************************/
/*	Les classes                           */
/* 	appel avec <B CLASS=titre> 	          */
/******************************************/

/* Utilisation de flexbox */
.container {
  display         : flex;
  flex-wrap       : wrap;
  flex-direction  : row;  /*column ou row-reverse*/
  justify-content : space-around;

}
.box {
  flex:300px;    /* largeur ... */
}
/* Fin de flexbox*/

.col {
  /* column-count: 2; */
  column-width: 350px; 
  column-rule: solid 4px #2f2f2f;
  column-gap: 5rem;
}
  
.tille {
  outline: 1px dashed blue;
}
.titre {
  font-size: 20pt;
  }
.ombre2 {
  text-shadow: #222 0.15em 0.10em 0.1em;
  }
.date {
  font-size: 8pt;
  }
.menu {
  color: white;
  background-color: var(--fond_gris1);
  }
.
/*.image {
  width: 100%;
}
*/
.sub ul{
  display:none; 
  } 
.sub:hover > ul{
  display:block;
  position:absolute;
  top:0;
  left:100%;
  margin:0;
  } 
.sub {
 position:relative;
} 
.cadre{
  background-image: url(g_rose.gif);
  text-align:center;
  padding : 1em;
  }
.cadre1	{
	border-style : ridge;
	border-width : 10px;
	border-color : #00FFFF ;
	padding : 10px;
	}
.cadre2 {
	border-style : groove;
	border-width : 10px;
	border-color : #00FFFF ;
	padding : 10px;
	}
.remarque{
  border-left: 8px #a0ce9d solid;
  padding: 10px;
  margin-bottom: 8px;
  background-color: var(--fond_gris1);
}  
.bar1{
	color: #000000;
	font-size : 18pt;
	font-weight: 700;
	font-style: normal;
	text-align : left;
	background-color:#60a0c0;
	}
.ombre{
  width:800px;
  height:100px;
  font-style: italic;
  font-weight:bolder;
  font-size: 50pt;
  filter: shadow(color=red, Direction=150);
}

/* ---- TRAITEMENT DES IMAGES ---------------------------------- */   
figure.jp { 
		display: inline-block;
		-moz-box-shadow: 7px 7px 13px #aaa; 
		-webkit-box-shadow: 7px 7px 13px #aaa;
		box-shadow : 7px 7px 13px #000000;
		padding: 2em; 
		background-color:#eeeeee;
	}
figcaption.jp {
		text-align : center;
		margin : 1em 0 0 0;
		color : #666;
		font-style: italic;
		font-family : arial;
		font-size : 1em;
		background-color : #eeeeee;
	}
	
/* -------------------------------------------------------------- */
/* -- Menu vertical simple 0 -- */
/* -- Ancienne version       -- */ 
.navcontainer
{
background-color: #F4F9FD;
width: 200px;
}
.navlist
{
padding-left: 0;
margin-left: 0;
border-bottom: 1px solid gray;
width: 200px;
}
.navlist li
{
list-style: none;
margin: 	0;
padding: 	0.25em;
border-top: 1px solid gray;
}
.navlist li a 
{
text-decoration: none;
font-weight: bold;
}


/* -- NOUVELLE VERSION -- */
/* -- menu1 débute ici -- */
.menu1 {
width: 200px;
float:left;
}

.menu1 ul  {
/*font-family: Arial, Helvetica, sans-serif; */
list-style-type:none;
margin:0;
padding:0;
}

.menu1 li {
display: inline;
/* for IE5 and IE6 */
}

.menu1 a {
color: #fff;
text-decoration: none;
font-size: 12px;  /* taille du texte sur le menu*/
display: block;
padding: 3px;
width: 200px;
background-color: #787C8A; /* couleur des touches */
border-bottom: 1px solid #eee;
}

.menu1 a:link, .menu a:visited {
color: ddd;
text-decoration: none;
}

.menu1 a:hover {
background-color: #52a2c1;
color: #fff;
}

.menu1 li a.current {
border-bottom: 3px solid #DAD6B7;
background: #00BEE4;
}
/* menu1 se termine ici */


/* ---- Menu horizontal simple avec onglets ---- */

.onglets  {		/* Onglets horizontaux*/
    font : bold 11px verdana, arial, serif;
    list-style-type : none;
    padding-bottom : 24px; /* à modifier suivant la taille de la police et de la hauteur de l'onglet dans #onglets li */
    border-bottom : 1px solid #EEA0A1;
    margin-left : 0;
	  background : #fff;
    }
.onglets li  {
    float : left;
    height : 21px; /* à modifier suivant la taille de la police pour centrer le texte dans l'onglet */
    background-color: #E4E9FD; 
    margin : 2px 2px 0 2px !important;  /* Pour les navigateurs autre que IE */
    margin : 1px 2px 0 2px;             /* Pour IE  */
    border : 1px solid #9EA0A1;
    }
.onglets li.active {
    border-bottom: 1px solid #fff;
    background-color: #fff;
  }
.onglets a  {
    display : block;
    color : #666;
    text-decoration : none;
    padding : 4px;
  }
.onglets a:hover {
    background : #fff;
  }


/******************************************/
/*	Les identificateurs                   */
/*	appel avec <DIV ID=remarque>  	      */
/*  Ils sont uniques dans la page 		    */
/******************************************/

/* -- cadres et tableaux -- */

/* 1 - simple */
#colonnes {
	max-with:960px;
	margin:auto;
}
#gauche {
	float:	left;
	width:	48%;
	margin:	0 0%;
}
#droite {
	float:	right;
	width:	48%;
	margin:	0 0%;
}
#footer {
	clear: both;
}

/* -- Menus horizontal avec onglets et images  */
#tabs1 {
	font: bold 11 Verdana, arial, serif;
	float:left;
	width:100%;
	background:change-background;
	line-height:normal;
  }
#tabs1 ul {
	margin:0;
	padding:10px 10px 0 50px;
	list-style:none;
  }
#tabs1 li {
	display:inline;
	margin:0;
	padding:0;
  }
#tabs1 a {
  float:left;
  background:url("images/tableft1.gif") no-repeat left top;
  margin:0;
  padding:0 0 0 4px;
  text-decoration:none;
  }
#tabs1 a span {
  float:left;
  display:block;
  background:url("images/tabright1.gif") no-repeat right top;
  padding:5px 15px 4px 6px;
  color:#627EB7;
  }
/* Commented Backslash Hack hides rule from IE5-Mac \*/

#tabs1 a span {float:none;}
	/* End IE5-Mac hack */
#tabs a:hover span {
  color:#627EB7;
}
#tabs1 a:hover {
  background-position:0% -42px;
}
#tabs1 a:hover span {
  background-position:100% -42px;
}


/* ------------------------------------------------------------ */
/*   Fin des définitions de la feuille de Style CSS             */
/*   Jean-Pierre Perroud, Switzerland                           */
/* ------------------------------------------------------------ */