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: 103%; font-weight: bold; }

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; }

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; }

.optionZone      { background-color:#ffffc9; font-size: 100%; font-weight: bold }

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

@media screen and (max-device-width: 600px) and (orientation: portrait) {	/* smartphone orientation portrait*/

body  { border-style: none; font-size:30pt;}

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; }

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

.optionZone      { background-color:#ffffc9; font-size: 240%; font-weight: bold }

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(1.8rem, 5vw, 2.5rem);
    line-height: 1.5;
    overflow-wrap: break-word;
}

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

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

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

body  { border-style: none; font-size:15pt;}

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; }

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

.optionZone      { background-color:#ffffc9; font-size: 120%; font-weight: bold }

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: 18px;
                   color:#000080; background-color:Gainsboro }
                   
.button          { padding: 10px 20px; font-size: 18px;
                   color:#000080; background-color:Gainsboro }

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