/* Feuille de style de Jean-Pierre Perroud, Switzerland */
/* Révision janv - mai 2023									*/
/********************************************************/
/*     Les éléments                       				*/
/********************************************************/

/*  Définition des variables globales du site */
:root {
	--fond_noir : #242424;
	--fond_gris : #3c3c3c;
	--fond_gris1: #535353;
	--fond_gris2: #767676;
	--fond_gris3: #afafaf;
	--fond_gris4: #cccccc;
	--fond_gris5: #e3e3e3;
	--fond_blanc: #eee;
	--fond_bleu1: #002255;
	--fond_bleu2: #0022aa;
	--fond_bleu3: #0022ff;
	--noir : #333;
	--gris1: #777777;
	--clair: #ccc ;
	--clair1: #cca;
	--clair1: #cc8;
	--clair1: #cc0;
	--barre_1:#00a5a9;
	--barre_2:#30a9a9;
	--barre_3:#60a9a9;
	--barre_4:#a0a9a9;
	--text_col:#432200;
	--back_color:#d5c9ab;
	--largeur: 300px;
 } 

html {
	/* font-size: 12px; medium = 16px = standard */
	font-size: 12px; /*small;*/
}
body 	{
	font-family		 : Verdana, Geneva, Tahoma, sans-serif;
	font-size: clamp(1rem, 1.63vw, 2rem);
	color		   	 : var(--text_col);
	background-color: var(--back_color);
	margin-left : 30px ;
	margin-right: 30px ;
 
	}	
tr,th,td {
	font-family		 : calibri, 'comic sans ms', Arial, Helvetica, Verdana, Univers;
	font-size       : 1rem;   
	color 			 : var(--text_col);
	background-color: var(--back_color); 
	}
address	{
	font-size  		: calc(0.8rem + 0.390625vw); 
	/* font-style 		: italic; */
	text-align 		: right;
	padding-right	: 10px;
	color      		: var(--clair);
  	background-color: #423D33;
	}
button {
	font-size		: 0.8rem;
	padding			: 3px;
	border-radius	: 6;
	background-color: #cec8bf;
 	}
h1	{ 
	font-size         : calc(1.8rem + 0.390625vw); 
	color           	: #E3E0DB;
	background-color	: #423D33;
	padding-left		: 5px;
	}
h1:first-letter {
	font-size     		: calc(2rem + 0.390625vw);                        
 	color            	: #F3F0EB; /*C3C0BB*/
	margin-left			: 5px;                       
	padding-left		: 5px;
	}
h2	{
	font-size     		: calc(1.3rem + 0.390625vw);                        
	color            	: #E3E0DB;
	background-color 	: #736A59;
	padding-left		: 5px;
	}
h2:first-letter {
	font-size     		: calc(1.5rem + 0.390625vw);                        
	color            	: #F3F0EB;
   padding-left:5px;                      
    }
h3	{
	font-size     		: calc(1.1rem + 0.390625vw);                        
	color            	: #E3E0DB;
	background-color 	: #978C77;
	padding-left		: 5px;
	}
ul{
	/*list-style-image: url(point2.png);*/
	list-style-type: square;
	}	
pre	{
	color            	: #4b3804;
	background-color 	: #f7f1e3;
	font-family	     	: courier bold;
	font-size			: calc(0.6em + 0.390625vw);
	}
button {
  font-size     : calc(0.8em + 0.390625vw);
  padding       : 3px;
  border-radius : 6;
	}
hr {
	color				: #B38E26;
	border-width	: 2px;	
	}
kbd {
	background	: #ddd;
	padding		: 0.1em 0.3em;   
	box-shadow	: 2px 2px 1px #aaa;
	color			: #0aa;
	}
img {
	/*height:auto;*/
	margin:auto;
	height    : 100%;
	max-width : 95%;
	object-fit:cover;
	object-position:center;
	}
A:link	{
	color: #0000FF;
	}
A:visited{
	color: #aa3366;
}	  

/* Responsive -------------------------------------- */
@media screen and (min-width: 1024px) {
  body,th,tr,td  {                                                                        
    font-size		: 1.01rem; /*0.9rem;"*/
    font-size: calc(1rem + 0.390625vw);
    margin-left: 25px ;
    margin-right: 25px ;
  }
  button {
    font-size: calc(1rem + 0.390625vw);
  }
  .split {
    column-count: 3;
    column-rule : solid 4px var(--fond_gris3);
    column-gap  : 5rem; /* espace entre colonnes */
	} 
}
/* Desktop */
@media screen and (max-width: 1023px) {
	body,th,tr,td {
	  /*font-size		: 1.01rem;*/
	  font-size: calc(1rem + 0.390625vw);
     margin-left	: 15px ;
	  margin-right	: 15px ;
	}
	 button {
    font-size: calc(1rem + 0.390625vw);
  }
    .split {
    column-count: 2;
    column-rule : solid 4px  var(--fond_gris3);
    column-gap  : 5rem; /* espace entre colonnes */
	} 
 }
 /* Tablet */
 @media screen and (max-width: 768px) {
	body,th,tr,td {
	  /*font-size		: 1.06rem;*/
	  font-size: calc(1rem + 0.390625vw);
     margin-left	:10px;
	  margin-right	:10px;
	}
	 button {
    font-size: calc(1rem + 0.390625vw);
  }
    .split {
    column-count: 1;
	 column-rule : solid 4px var(--fond_gris3);
    column-gap  : 5rem; /* espace entre colonnes */
   } 
 }
 /* Smartphone */
 @media screen and (max-width: 479px) {
	body,th,tr,td {
	/*  font-size		: 1.08rem;*/
	font-size: calc(1rem + 0.390625vw);
	margin-left	:6px;
	margin-right	:6px;
	}
	 button {
    font-size		:calc(1rem + 0.390625vw);
  }
 }
 /* --------------------------------------------------- */
 
/******************************************/
/*	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: 320px;
	column-rule: solid 4px var(--fond_gris3);
}
	
.tille {
  outline: 1px dashed red;
}
.cadre1	{
	border-style : ridge;
	border-width : 10;
	border-color : #00FFFF ;
	padding      : 10;
	}
.cadre2 {
	border-style : groove;
	border-width : 10;
	border-color : #00FFFF ;
	padding      : 10;
	}
.cadre3 {
	border-style : inset;
	border-width : 10;
	border-color : #00FFFF ;
	padding      : 10;
	}
.cadre4 {
	border-style : outset;
	border-width : 10;
	border-color : #00FFFF ;
	padding      : 10;
	}
.cadre5 {
	border-style : ridge;
	border-width : 15px;
	border-radius : 10px;
	border-color : #5c5a58 ;
   background	 : #d8d6d4;
	padding      : 10px;
	margin		 : 20px;
}
.remarque {
  border-left		: 8px #91c78d solid;
  padding			: 10px;
  margin-bottom	: 8px;
  background-color: var(--fond_gris4);
  }
.attention {
	border-left		: 8px #f5a9a9 solid;
	padding				: 10px;
	margin-bottom	: 8px;
	background-color: var(--fond_gris4);
}
.pre{
	color        : #ffffff;
	background-color:#b9a577;
   font-family	 : courier;
 	}
.entete{
	color       : #F1F0ED;
	font-family : calibri, 'comic sans ms', Arial, Helvetica, Verdana, Univers;;
	font-size	: 22pt;
	font-weight	: 700;
	text-align 	: center;
	background-color:#423D33;
    }
.bar1{
	color       : #F1F0ED;
	font-size   : 18pt;
	font-weight : 700;
	font-style  : normal;
	text-align  : left;
	background-color:#423D33;
    }
.bar2{
	color      : #F1F0ED;
	font-size  : 16pt;
	font-weight: 700;
	font-style : normal;
	text-align : left;
	background-color:#736A59;
    }
.bar3{
	color      : #F1F0ED;
	font-size  : 14pt;
	font-weight: 700;
	font-style : normal;
	text-align : left;
	background-color:#736A59;
    }
.adr{
	font-size  : 10pt;
	font-style : italic;
	text-align : right;
	color      : #F1F0ED;
  	background-color:#423D33;
	}
.titre1	{
	width       : 400;
	height      : 40;
	font-family : calibri, 'comic sans ms', Arial, Helvetica, Verdana, Univers;;
	font-size   : 40pt;
	font-weight : 900;
	filter      : dropShadow(color=#FFFF00, offX=5, offY=5, positive=1);
	}

/* cadres et tableaux */
/* 1 - simple à deux colonnes */
.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;
}
/* Fin 1 - simple, tout utiliser !!! */

/*  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 #aaa;
		padding: 2em; 
	}
figcaption.jp{
		text-align : center;
		margin : 1em 0 0 0;
		color : #666;
		font-style: italic;
		font-family : arial;
		font-size: 1em
	}
  
/******************************************/
/*	Les identificateurs                   */
/*	appel avec <DIV ID=remarque> 	      */
/******************************************/
#remarque{
}
/*
/* ATTENTION si plusieurs appel à un "ID= " identique alors passer en "class= " , � d�finir au dessus !!! */
/*
/* cadres et tableaux */

/* 2 - pour menus, textes, entête et pied de page */   
#entete, #menu, #contenu, #pied {
	padding:1px 0;
}
#entete {
	background-color:#FF9900;
	text-align:center;
}
#main {
	max-with:960px;
	margin:auto;
}
#menu  {
	float:left;
	width:240px;
	background-color:#FF3366;
}
#contenu {
	margin-left:245px;
	background-color:#9966FF;
}
#col12{
	float:	left;
	width:	48%;
	margin:	0 0%;
}
#col22{
	float:	right;
	width:	48%;
	margin:	0 0%;
}

#pied {
	background-color:#669933;
	text-align:center;
	clear:both;
}