/*
Par exemple, « q > em » désigne un élément contenu dans des balises em et q imbriquées comme suit : <q>…<em>…</em>…</q>
A:link    { color: red }    /* lien non-visité 
A:visited { color: blue }   /* lien visité   
A:hover   { color: yellow } /* lien survolé     
A:active  { color: lime }   /* lien activé  

Noter que la règle A:hover doit être placé après A:link et A:visited, 
autrement les règles de cascade feront que la propriété 'color' spécifiée par celle-ci sera cachée.
La pseudo-classe :active est d'une utilisation assez marginale, son effet étant extrêmement bref. 
On peut par exemple l'utiliser lors du clic sur un bouton dans un formulaire pour simuler l'enfoncement du bouton par un changement de couleur.
*/
/*
@viewport {
   width: device-width /* largeur du viewport */
   /*zoom: 1 
}
*/
/*font-size: calc(16px + 0.5vw);*/
/*
Vo u s n e p o u v e z p a s m o d i f i e r l ' a l i g n e m e n t d u t e x t e d ' u n e b a l i s e i n l i n e 
( c o m m e < s p a n > , < a > , < e m > , < s t r o n g > ... ) . L'alignement ne fonctionne que sur des balises de type block (<p>,<div>,<h1>,<h2>, ...)

P90 :clear: both;
P131+ les marges
P143+ le positionnement
    éviter float, préfèrer inline-block, réserver float pour mettre quelque chose à droite ou gauche d'un block ou image
http://www.css-faciles.com/bloc-en-ligne.php
une balise de type block sur votre page web crée automatiquement un retour à la ligne avant et après. 
une balise de type inline se trouve obligatoirement à l'intérieur d'une balise block. 
Contrairement à un inline, un bloc a des dimensions précises. Il possède une largeur et une hauteur. 

inline-block avec vertical-align : 3vw sera monté de 3vw à partir de la base de l'inline-block


Una Kravets également designer montre qu’il est possible d’obtenir les mêmes résultats en se servant CSSSlider ou encore Pure CSS Slider. 
Pour ceux par exemple qui souhaitent concevoir des galeries photo, 
il est également possible d’utiliser HTML et CSS en faisant appel à l’outil Gallery.CSS
$html = file_get_html($url);
https://www.developpez.net/forums/d306858/php/langage/envoyer-donnees-post-formulaire/

valider plusieurs formulaires avec un seul bouton


*/
@import url("./variables.css");

html {
    height:100vh;
    font: 1.1em sans-serif;
}
body {
    position :absolute;
    font: .81em/150% Arial, Helvetica, sans-serif;
    height:100vh;
    width: 100vw;  
    background: -webkit-linear-gradient(#fff, #ff0);
    background: -o-linear-gradient(#fff, #ff0);
    background: -moz-linear-gradient(#fff, #ff0); 
    background: linear-gradient(#fff, #ff0);
    background-attachment:fixed; 
}
.bandeau
{
    height:5vh;
    width: 100vw;  
}
.diapos
{
  display : inline-block; 
  width : var(--largDiapo);
  margin-left: 2%;
  margin-right: 2%;
	}
#slideshow0, #slideshow1, #slideshow2  {
    position: relative;
    width  : var(--largDiapo);
    height: var(--hautDiapo);
    display: block;
    padding: var(--CadreDiapo);;/*le cadre */
    margin-bottom: 2%;
    border: 1px solid #ddd;
    background: var(--tourDiapo);;
    /*background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);*/
    border-radius: 22px 22px 22px 22px;
    /*box-shadow: 0 0 3px rgba(0,0,0, 0.2);*/
}
.clImage{
    width  : var(--largDiapo);
    height: var(--hautDiapo);
}
.slider0:hover{
    animation-play-state: paused;
}
.slider1:hover{
    animation-play-state: paused;
}
.slider2:hover{
    animation-play-state: paused;
}
.container {
    position:relative;
    width  : var(--largDiapo);
    height: var(--hautDiapo);
    border-radius: 22px 22px 22px 22px;
    overflow: hidden;
}
.text_slide
{
    font: bold 1.5vw Arial, Helvetica, sans-serif;
    color: var(--ColorText);
    text-align: center;
}
.text_slide a:link
{
    text-decoration:none;
    color: var(--ColorText);
}    
#menu{
    position : absolute;
    width  : var(--Lmenu);
    height: var(--Hmenu);
    z-index: 1000;   
}
#menu ul {
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;
 }
#menu li {
 float:left;
 margin:auto;
 padding:0;
 background:  var(--ColorFmenu);
 border-radius: 10px;
 }
#menu li a {
 display:block;
 width: var(--Amenu);
 text-decoration:none;
 font: bold var(--Ppfont), Arial, Helvetica, sans-serif;
 display: block;
 text-align: center;
 color: var(--ColorTmenu); 
 text-decoration: none;
 padding: 5px 5px 5px 5px;
 text-shadow: 0 -1px 0 rgba(0,0,0,.5);
 }
#menu li a:hover {
 color:#FFD700;
 }
#menu ul li ul {
 display:none;
 }
#menu ul li:hover ul {
 display:block;
 /*z-index: 1000;*/
 }
#menu li:hover ul li {
 float:none;
 }
#menu ul li a:hover, 
#menu ul li a:focus{
 background: rgba(255,255,255,.2);
 padding: 8px 25px 17px 25px;
 transition: all .3s 0s;
} 

#Gtitre 
{
 width:95%;
 font: bold var(--Gtitrefont) Arial, Helvetica, sans-serif;
 color: var(--ColorText);
 position: relative;
 margin-left: auto;
 margin-right: auto;
}
#Gtitre a:link
{
    text-decoration:none;
    color: var(--ColorText);
}    
#Mtitre 
{
 width:95%;
 font: bold var(--Mtitrefont) Arial, Helvetica, sans-serif;
 color: var(--ColorText);
 position: relative;
 margin-left: auto;
 margin-right: auto;
}
#Mtitre a:link
{
    text-decoration:none;
    color: var(--ColorText);
}    
#Ptitre 
{
 width:95%;
 font: bold var(--Ptitrefont) Arial, Helvetica, sans-serif;
 color: var(--ColorText);
 margin-left: auto;
 margin-right: auto;
}
#Ptitre a:link
{
    text-decoration:none;
    color: var(--ColorText);
}    

#Pptitre 
{
 width:95%;
 font: bold var(--Pptextefont) Arial, Helvetica, sans-serif;
 color: var(--ColorText);
 margin-top: 5vw;
 margin-left: auto;
 margin-right: auto;
}
#Pptitre a:link
{
    text-decoration:none;
    color: var(--ColorText);
}    

.cadrePp {
    background: rgba(150, 150, 150, 0.2);
    margin: 30px 30px 30px 30px;
    overflow : auto;
    position: relative;
    width : var(--largCadrePp);    
    height : var(--hautCadrePp);    
    float: left;
    /* rounded corner */
    -webkit-border-radius: 8px;
    border-radius: 8px;
    /* box shadow */
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.cadreP {
    background: rgba(150, 150, 150, 0.2);
    margin: 30px 30px 30px 30px;
    overflow : auto;
    position: relative;
    width : var(--largCadreP);    
    height : var(--hautCadreP);    
    float: left;
    /* rounded corner */
    -webkit-border-radius: 8px;
    border-radius: 8px;
    /* box shadow */
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
     box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.cadreG {
    background: rgba(150, 150, 150, 0.2);
    /*margin: 30px 30px 30px 30px;*/
    position: relative;
    /*padding: 10px 10px 10px 10px;*/
    width : var(--largCadreG);    
    height : var(--hautCadreG);    
    float: left;
    /* rounded corner */
    -webkit-border-radius: 8px;
    border-radius: 8px;
    /* box shadow */
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.coin
{
    -webkit-border-radius: 8px;
    border-radius: 8px; 
}
.titreP
{
    white-space: pre;
    font:  var(--TitrePfont) Arial, Helvetica, sans-serif;
    text-align: center;
}
.titreP a 
{
    text-decoration: none;
    color: var(--ColorText);
}
.textePp
{
    white-space: pre;
    text-align: center;
    font:  var(--TitrePpfont) Arial, Helvetica, sans-serif;
    color: var(--ColorText);
}
.textePp a 
{
    text-decoration: none;
    color: var(--ColorText);
}
.texteP
{
    white-space: pre;
    font:  var(--TextePfont) Arial, Helvetica, sans-serif;
    text-align: center;
}
.texteP a 
{
    text-decoration: none;
    color: var(--ColorText);
}
.texteG
{
    white-space: pre;
    font:  var(--TexteGfont) Arial, Helvetica, sans-serif;
    text-align: center;
    color: var(--ColorText);
}
.texteG a 
{
    text-decoration: none;
    color: var(--ColorText);
}
.titrePp a 
{
    text-decoration: none;
    color: var(--ColorText);
}
.titreG
{
    white-space: pre;
    text-align: center;
    font:  var(--TitreGfont) Arial, Helvetica, sans-serif;
    color: var(--ColorText);
}
.titreG a 
{
    text-decoration: none;
    color: var(--ColorText);
}
.imageG 
{  
    width : var(--largImageG);    
    height : auto;  
    margin: auto;
    -webkit-border-radius: 8px;
    border-radius: 8px;
 }
.imageP 
{ 
    width : var(--largImageP);    
    height : auto;  
    margin: auto;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}
.imagePp 
{
    display :inline-block;
    max-width : 10vw;    
    height : auto; 
    margin : 2px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}
.imagePp h2 
{
    display : inline-block;
}
.rondRouge  
{
   white-space: pre;
   display :inline-block;
   text-align: center;
   white-space: pre;
   font:  3vw Arial, Helvetica, sans-serif;
   color: #f00;
}
.rondVert 
{
   white-space: pre;
   display :inline-block;
   text-align: center;
   white-space: pre;
   font:  3vw Arial, Helvetica, sans-serif;
   color: #0f0;
}
.rondJaune 
{
   white-space: pre;
   display :inline-block;
   text-align: center;
   white-space: pre;
   font:  3vw Arial, Helvetica, sans-serif;
   color: #ff0;
}
#explications
{
   position: relative;
   /*padding: 10px 10px 10px 10px;*/
   width : var(--largExplik);    
   height : var(--hautExplik);    
  
}
.efface
{
   position : absolute;
   width : 10em;
   right: 1vw;
   top: 1vw;
   white-space: pre;
   text-align: center;
   font:  1.5vw Arial, Helvetica, sans-serif;
   color: var(--ColorText);
}

.nombre
{
   position : absolute;
   right : 6.5vw;
   top : 3vw;
   width : 5vw;
   text-align: center;
   font:  1.5vw Arial, Helvetica, sans-serif;
   color: #f000f0;
}
.submitP10
{
   position : absolute;
   right : 1vw;
   top : 3vw;
   width : 3em;
   text-align: center;
   font:  1.5vw Arial, Helvetica, sans-serif;
   color: #00f0f0;
}
.submitP1
{
   position : absolute;
   right : 3.5vw;
   top : 3vw;
   width : 3em;
   text-align: center;
   font:  1.5vw Arial, Helvetica, sans-serif;
   color: #00f0f0;
}
.submitM1
{
   position : absolute;
   right : 10vw;
   top : 3vw;
   width : 3em;
   text-align: center;
   font:  1.5vw Arial, Helvetica, sans-serif;
   color: #00f0f0;
}
.submitM10
{
   position : absolute;
   right : 12.5vw;
   top : 3vw;
   width : 3em;
   text-align: center;
   font:  1.5vw Arial, Helvetica, sans-serif;
   color: #00f0f0;
}
.titrePp
{
   display :inline-block;
   vertical-align : 4vw;
   white-space: pre;
   font:  var(--TitrePpfont) Arial, Helvetica, sans-serif;
   color: var(--ColorText);
}

footer{
 color: blue;
 opacity: 0.5;
 position:fixed; bottom:1px; left:1px;
 font-family:  Verdana, "Comic sans MS", "Arial Black", Arial,sans-serif;
 font-size: 0.85em;
 background-color: lightgrey;
}
.presentation
{
    text-align : center;
}