body             { color:black;
                   background-color:ivory;
                   margin:0 0 0 0; padding:5 12 5 12;
                   border-style: solid; border-width: 15;
                   border-color:#000080;
                   font-family:avantgarde,sans-serif;
                   font-size:11pt; }

img              { margin:5 20 5 10;
                   border-width:0;
                   vertical-align:middle; }

a:active         { color: #000080; }
a:visited        { color: #551a8b; }
a:link           { color: #0000bb; }
a:hover          { color: #df0000; }

h1, h2           { font-family:times,serif; font-style:italic;
                   font-weight:bold;  color:#000080;
                   background:ivory; border-color: #000080;
                   border-style: solid; border-width: 3 5 5 3; }

h3, h4, h5, h6   { font-family: avantgarde, sans-serif; }
h1               { font-size: 250%; }
h2               { font-size: 180%; }
h3               { font-size: 110%; font-weight: bold; }
h4               { font-size: 100%; font-weight: normal; }

ul               { list-style-type:circle; }
li               { margin: 3 0 3 0; }

table            { margin: 5 0 5 0;
                   font-family:sans-serif;
                   background-color:ivory;
                   border-style: solid; border-width: 5 5 5 5;
                   border-color:#000080; }

td               { text-align:center; padding: 2 5 2 5; }

tr               { background-color:ivory; height:15px }

input            { margin: 0 0 0 5; padding: 1 2 1 2;
                   background-color:#ffffc9;
                   font-size: 105%; font-weight: bold }

option            { background-color:#ffffc9;
                   font-size: 105%; font-weight: bold }

.button          { margin:3 2 3 2;  padding:2 5 2 5;
                   color:#000080; background-color:Gainsboro }
                   
.boutonCache 	{ margin:3 2 3 2;  padding:2 5 2 5;
						color:#000080; background-color:Gainsboro;
						visibility: hidden }	

.boutonVisi 	{ margin:3 2 3 2;  padding:2 5 2 5;
						color:#000080; background-color:Gainsboro;
						visibility: visible }	

canvas          { border: 1px solid black }

.tdgauche        { text-align:left; padding: 2 5 2 5 }
.tddroite        { text-align:right; padding: 2 5 2 5 }
             
.libCachedroit               { text-align:right; padding: 2 5 2 5; visibility: hidden  }
.libCachegauche               { text-align:left; padding: 2 5 2 5; visibility: hidden  }

.inputCache        { margin: 0 0 0 5; padding: 1 2 1 2; background-color:#ffffc9;
                   font-size: 105%; font-weight: bold; visibility: hidden }
                   
.zoneList	{ color:#000080; background-color:Gainsboro; font-size: 100%; font-weight: bold; visibility: hidden }
.optionZone { background-color:ivory; font-size: 100%; font-weight: bold }

.checkCache	{ border: 0.125em solid #000080; background:#000080; outline: 1px solid #000080; visibility: hidden }
                   
@media screen and (max-width: 600px) {			/* smartphone  orientation portrait*/

body  { border-style: none; }

h1, h2  { font-family:times,serif; font-style:italic;
          font-weight:bold;  color:#000080;
          background:ivory; border-color: #000080;
          border-style: solid; border-width: 2 3 2 3; }

h3, h4, h5, h6   { font-family: avantgarde, sans-serif; }
h1               { font-size: 200%; }
h2               { font-size: 150%; }
h3               { font-size: 100%; font-weight: bold; }
h4               { font-size: 100%; font-weight: normal; }

table { margin: 2 0 2 0;
        font-family:sans-serif;
        background-color:ivory;
        border-style: solid; border-width: 2 2 2 2;
        border-color:#000080; }
p {
    width: 100%;
    max-width: 90vw;               /* 90 % de la largeur de la fenêtre */
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 1rem;               /* 16 px de marge intérieure à gauche et droite */
    font-size: clamp(0.9rem, 2.5vw, 1.2rem);
    line-height: 1.5;
    overflow-wrap: break-word;
}

button          { padding: 10px 20px; font-size: 14px;
                   color:#000080; background-color:Gainsboro }

.button          { padding: 10px 20px; font-size: 14px;
                   color:#000080; background-color:Gainsboro }
                   
.boutonCache 	{ padding: 10px 20px; font-size: 14px;
						color:#000080; background-color:Gainsboro;
						visibility: hidden }	

.boutonVisi 	{ padding: 10px 20px; font-size: 14px;
						color:#000080; background-color:Gainsboro;
						visibility: visible }	

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  		width: 100%;
  		padding: 10px;
  		font-size: 16px;
  		border: 1px solid #ccc;
  		border-radius: 4px;
  		box-sizing: border-box;
	}
}

@media screen and (max-height: 600px) {			/* smartphone  orientation paysage*/

body  { border-style: none; }

h1, h2  { font-family:times,serif; font-style:italic;
          font-weight:bold;  color:#000080;
          background:ivory; border-color: #000080;
          border-style: solid; border-width: 2 3 2 3; }

h3, h4, h5, h6   { font-family: avantgarde, sans-serif; }
h1               { font-size: 200%; }
h2               { font-size: 150%; }
h3               { font-size: 100%; font-weight: bold; }
h4               { font-size: 100%; font-weight: normal; }

table { margin: 2 0 2 0;
        font-family:sans-serif;
        background-color:ivory;
        border-style: solid; border-width: 2 2 2 2;
        border-color:#000080; }
p {
    width: 100%;
    max-width: 90vw;               /* 90 % de la largeur de la fenêtre */
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 1rem;               /* 16 px de marge intérieure à gauche et droite */
    font-size: clamp(0.9rem, 2.5vw, 1.2rem);
    line-height: 1.5;
    overflow-wrap: break-word;
}

button          { padding: 10px 20px; font-size: 14px;
                   color:#000080; background-color:Gainsboro }

.button          { padding: 10px 20px; font-size: 14px;
                   color:#000080; background-color:Gainsboro }
                   
.boutonCache 	{ padding: 10px 20px; font-size: 14px;
						color:#000080; background-color:Gainsboro;
						visibility: hidden }	

.boutonVisi 	{ padding: 10px 20px; font-size: 14px;
						color:#000080; background-color:Gainsboro;
						visibility: visible }	

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  		width: 100%;
  		padding: 10px;
  		font-size: 16px;
  		border: 1px solid #ccc;
  		border-radius: 4px;
  		box-sizing: border-box;
	}
}