body {
    /* background-image: url("Images/azerty.png"); */
    background-image: url("Images/azerty.png");
    background-repeat: repeat; /* repeat-x -> horizontal | repeat-y -> vertical | no-repeat -> en haut à gauche */
    background-attachment: ; /* fixed pour fixer l'arrière plan */
    background-position: right top; /* Ne marche que sans le background-repeat */ 
}
@font-face { /* Mmmmeupooorg */ /* Choisir les polices de texte télécharger */
font-family: 'Onomber';
src: url('Onomber.otf') format('truetype');
}
@font-face {
font-family: 'SpaceAge';
src: url('SpaceAge.ttf') format('truetype');
}
* { /* POUR TOUT LES ELEMENTS !!! */
 font-size: 100%;
 font-family: Calibri;
}
h1 {
	font-size: 50px;
	color: green;
	font-family:Onomber, sans-serif;
	font-style: oblique; /* italic - oblique - normal */
	text-decoration: underline; /* underline - line-trough - overline - blink - none */
	text-align: right; /* left - center - right - justify */
}
h2 {
	color: #1ebfff;
	font-family:SpaceAge, sans-serif;
	font-size: 3.5em; /* affiche la taille en fonction de la taille de la fenêtre */
}
.premier_titre { /* avec l'argument class="****" dans le .HTML */  

/* Quelle est la particularité de l'attribut class par rapport à l'attribut id ?


Il ne peut y avoir qu'un seul et même nom d'id par page, et plusieurs fois une même classe */

color: #3fff56;
}
.galibier
{
	color: #ff0000;
}
.lol
{
	color: #ea0990;
}
.mdr
{
	color: #ff0000;
}
p{
	font-size: 1.5em;
	font-family: calibri;
}
.pulpedesoda
{
	line-height: 0.5;
	font-size: 1.75em;
	font-family:SpaceAge, sans-serif;
}
.imageflottante
{
	float: left;
}
.imageflottante2
{
	float: right;
}
.imageflottante3
{
	clear: both;
}
.sommaire
{
	font-size: 1.5em;
	font-family: calibri;
}
.blanctarget
{
	font-size: 1.5em;
	font-family: SpaceAge;
}
ul {
	font-size: 1.25em;
	font-family: calibri;
}
ol {
	font-size: 1.25em;
	font-family: calibri;
}
.textedemo
{
	font-size: 1.25em;
	font-family: calibri;
}
#boite1
{
    height: 200px;/* Compatible aussi em */
    width: 200px;/* Compatible aussi em */
    border: 5px black inset; /* Toutes les bordures */
	/*
    border-left: 2px solid black;
    border-right: 2px solid black;
	*/
	border-radius: 2em 10em 10em 5em;/* Compatible aussi em - Coins arrondi en % */
	box-shadow: 6px 6px 45px #00d8ff; /* Ombres (6px le décalage (verticale et horizontal) - 6px l'adoucissement - 45px les couleurs */
	text-shadow: 5px 5px 5px white; /* Ombres du texte */
	font-size: 1.5em;
	font-family: calibri;
    padding: 10px; /* marge interne */
    margin: 10px; /* marge externe */
	float: left;
}
#boite2
{
    height: 200px;/* Compatible aussi em */
    width: 200px;/* Compatible aussi em */
    border: 5px black inset; /* Toutes les bordures */
	/*
    border-left: 2px solid black;
    border-right: 2px solid black;
	*/
	border-radius: 2em 10em 10em 5em;/* Compatible aussi em - Coins arrondi en % */
	box-shadow: 6px 6px 45px red; /* Ombres (6px le décalage (verticale et horizontal) - 6px l'adoucissement - 45px les couleurs */
	text-shadow: 5px 5px 5px red; /* Ombres du texte */
	font-size: 1.5em;
	font-family: calibri;
    padding: 10px; /* marge interne */
    margin: 10px; /* marge externe */
    float: left;
}
#boite3
{
    height: 200px;/* Compatible aussi em */
    width: 200px;/* Compatible aussi em */
    border: 5px black inset; /* Toutes les bordures */
	/*
    border-left: 2px solid black;
    border-right: 2px solid black;
	*/
	border-radius: 2em 10em 10em 5em;/* Compatible aussi em - Coins arrondi en % */
	box-shadow: 6px 6px 45px black; /* Ombres (6px le décalage (verticale et horizontal) - 6px l'adoucissement - 45px les couleurs */
	text-shadow: 5px 5px 5px black; /* Ombres du texte */
	font-size: 1.5em;
	font-family: calibri;
    padding: 10px; /* marge interne */
    margin: 10px; /* marge externe */
    clear: both; /* !!!Pour arrétez les effect de float!!! */
}
#boite4
{
    height: 200px;/* Compatible aussi em */
    width: 200px;/* Compatible aussi em */
    position: relative; /* relative ou absolute */
    top: 50px; /* décalage haut */
    left: 50px; /* décalage gauche */
    border: 5px black inset; /* Toutes les bordures */
	/*
    border-left: 2px solid black;
    border-right: 2px solid black;
	*/
	border-radius: 5em 10em 10em 2em;/* Compatible aussi em - Coins arrondi en % */
	box-shadow: 6px 6px 45px white; /* Ombres (6px le décalage (verticale et horizontal) - 6px l'adoucissement - 45px les couleurs */
	text-shadow: 5px 5px 5px white; /* Ombres du texte */
	font-size: 1.5em;
	font-family: calibri;
    padding: 10px; /* marge interne */
    margin: 10px; /* marge externe */
}
#boite5
{
    height: 200px;/* Compatible aussi em */
    width: 200px;/* Compatible aussi em */
    position: 0px 0px; /* relative ou absolute */
    top: 50px; /* décalage haut */
    left: 50px; /* décalage gauche */
    z-index: 50;
    border: 5px black inset; /* Toutes les bordures */
	/*
    border-left: 2px solid black;
    border-right: 2px solid black;
	*/
	border-radius: 5em 10em 10em 2em;/* Compatible aussi em - Coins arrondi en % */
	box-shadow: 6px 6px 45px white; /* Ombres (6px le décalage (verticale et horizontal) - 6px l'adoucissement - 45px les couleurs */
	text-shadow: 5px 5px 5px white; /* Ombres du texte */
	font-size: 1.5em;
	font-family: calibri;
    padding: 10px; /* marge interne */
    margin: 10px; /* marge externe */
    background-color: red;
    z-index: 100;
}
#boite6
{
    height: 200px;/* Compatible aussi em */
    width: 200px;/* Compatible aussi em */
    position: 0px 0px; /* relative ou absolute */
    top: 50px; /* décalage haut */
    left: 50px; /* décalage gauche */
    border: 5px black inset; /* Toutes les bordures */
	/*
    border-left: 2px solid black;
    border-right: 2px solid black;
	*/
	border-radius: 5em 10em 10em 2em;/* Compatible aussi em - Coins arrondi en % */
	box-shadow: 6px 6px 45px white; /* Ombres (6px le décalage (verticale et horizontal) - 6px l'adoucissement - 45px les couleurs */
	text-shadow: 5px 5px 5px white; /* Ombres du texte */
	font-size: 1.5em;
	font-family: calibri;
    padding: 10px; /* marge interne */
    margin: 10px; /* marge externe */
    background-color: red;
    visibility: visible; /* hidden - visible */
    z-index: 50;
}
a /* Propriété sans survoler des objets */
{
    text-decoration: none; /* Supprime les soulignement de l'objet */
    color: red;
}
a:hover /* Propriété au survol des objets */
{
    text-decoration: none;
    color: white; 
}
a:active /* Propriété au clic des objets (NE MARCHE PAS AVEC FOCUS !!!) */
{
    text-decoration: none;
    color: yellow;
}
a:visited /* Propriété de la coleur après le clic des objets */
{
    text-decoration: none;
    color: green;
}
a:focus /* Propriété au clic long des objets (NE MARCHE PAS AVEC ACTIVE !!!) */
{
    text-decoration: none;
    color: blue;
}
#boite6:hover
{
    z-index: 150;     
}
#boite5:hover
{
    visibility: hidden;
}
/*
La largeur (border) : indiquez la largeur de votre bordure. Mettez une valeur en pixels (comme2px).
La couleur : c'est la couleur de votre bordure. Utilisez, comme on l'a appris, soit un nom de couleur (black,red,…), soit une valeur hexadécimale (#FF0000), soit une valeur RGB (rgb(198, 212, 37)).
Le type de bordure : là, vous avez le choix. Votre bordure peut être un simple trait, ou des pointillés, ou encore des tirets, etc. Voici les différentes valeurs disponibles :
none: pas de bordure (par défaut) ;
solid: un trait simple ;
dotted: pointillés ;
dashed: tirets ;
double: bordure double ;
groove: en relief ;
ridge: autre effet relief ;
inset: effet 3D global enfoncé ;
outset: effet 3D global surélevé.
----------------------------------
border-bottom: bordure du bas ;
border-left: bordure de gauche ;
border-right: bordure de droite.
Il existe aussi les équivalents pour paramétrer chaque détail de la bordure si vous le désirez :border-top-widthpour modifier l'épaisseur de la bordure du haut,border-top-colorpour la couleur du haut, etc.
Ce sont aussi des super-propriétés, elles fonctionnent commebordermais ne s'appliquent donc qu'à un seul côté.
Pour ajouter une bordure uniquement à gauche et à droite des paragraphes, on écrira donc :
Le type de bordure : voici les différentes valeurs :
    none: pas de bordure
    solid: un trait simple
    dotted: pointillés
*/            
#testdiv
{
     width: 50%;
     min-width: 700px;
     background-color: red;
     /*
     min-width: 700px;
     min-height: 700px;
     max-width: 700px;
     max-height: 700px;
     */
}
#testdiv2
{
     width: 50%;
     margin: auto;
     background-color: blue;
     /*
     min-width: 700px;
     min-height: 700px;
     max-width: 700px;
     max-height: 700px;
     */
}
#testdepasse
{
    width: 250px;
    height: 110px;
    background-color: #ff3366;
    text-align: justify;
    border: 1px solid black;
    word-wrap: break-word; /* Permet de coupez les mots */
    overflow: auto;
}
/*
overflow :

visible(par défaut) : si le texte dépasse les limites de taille, il reste visible et sort volontairement du bloc.

hidden: si le texte dépasse les limites, il sera tout simplement coupé. On ne pourra pas voir tout le texte.

scroll: là encore, le texte sera coupé s'il dépasse les limites. Sauf que cette fois, le navigateur mettra en place des barres de défilement pour qu'on puisse lire l'ensemble du texte. C'est un peu comme un cadre à l'intérieur de la page.

auto: c'est le mode « pilote automatique ». En gros, c'est le navigateur qui décide de mettre ou non des barres de défilement (il n'en mettra que si c'est nécessaire). C'est la valeur que je conseille d'utiliser le plus souvent.
*/

#conteneur
{
    display: flex; /* flex : met côte à côte */
    flex-direction: row;
        /*
row : organisés sur une ligne (par défaut)
column : organisés sur une colonne
row-reverse : organisés sur une ligne, mais en ordre inversé
column-reverse : organisés sur une colonne, mais en ordre inversé
*/
    flex-wrap: wrap; /* permet de passez les blocs à la ligne quand ça dépasse */
    justify-content: center;
    /*
    flex-start : alignés au début (par défaut)
    flex-end : alignés à la fin
    center : alignés au centre
    space-between : les éléments sont étirés sur tout l'axe (il y a de l'espace entre eux)
    space-around : idem, les éléments sont étirés sur tout l'axe, mais ils laissent aussi de l'espace sur les extrémités
    */ 
    border: 0.5em solid blue;
        align-items: center;
    /*
    stretch : les éléments sont étirés sur tout l'axe (valeur par défaut)
    flex-start : alignés au début
    flex-end : alignés à la fin
    center : alignés au centre
    baseline : alignés sur la ligne de base (semblable à flex-start)
    */ 
}
.element:nth-child(2) /* On prend le deuxième bloc élément */
{
    background-color: blue;
    align-self: flex-end; /* Seul ce bloc sera aligné à la fin */
}
.element
{
    background-color: #00ff00;
    padding: 20px;
    margin: 20px;
    border: 1px solid black;
    height: 350px;
    width: 350px;
    text-align: center;
   	font-size: 15em;
	font-family:SpaceAge, sans-serif;
    
}
#milieu
{
    display: flex;
    border: 1px solid black;
    background-color: #dd5599;
    height: 350px;
    width: 500px;
}

.top
{
    margin: auto;
}
.element1
{
    background-color: #00ff00;
    padding: 3px;
    margin: 3px;
    border: 1px solid black;
    width: 5px; 
}
#tableau
{
    display: flex;
    flex-wrap: wrap;
    align-content: CENTER;
    /*
    flex-start : les éléments sont placés au début
    flex-end : les éléments sont placés à la fin
    center : les éléments sont placés au centre
    space-between : les éléments sont séparés avec de l'espace entre eux
    space-around : idem, mais il y a aussi de l'espace au début et à la fin
    stretch (par défaut) : les éléments s'étirent pour occuper tout l'espace
    */ 
}
a
{
    display: block; /* Permet d'affichez des éléments inline en block */
    /*
    inline:Eléments d'une ligne. Se placent les uns à côté des autres.
    block:Eléments en forme de blocs. Se placent les uns en-dessous des autres et peuvent être redimensionnés.
    inline-block:Eléments positionnés les uns à côté des autres (comme les inlines) mais qui peuvent être redimensionnés (comme les blocs).
    */
}
#image_de_fond
{
    width: 626px;
    height: 417px;
    background-image: url("Images/wxwx.png"), url("Images/Le_col_du_Galibier.jpg");
    background-repeat: no-repeat;
    background-size: auto, 626px 417px; /* auto pour l'image wxwx et 626 par 417 pour le col du galibier */
    text-align: justify;
    border: 1px solid black;
    overflow: auto;
    color: #0050ff;
	text-shadow: 1px 1px 1px black; /* Ombres du texte */
	font-size: 1.5em;
}
#transparence
{
    width: 626px;
    height: 417px;
    background-image: url("Images/Le_col_du_Galibier.jpg");
    background-repeat: no-repeat;
    background-size: 626px 417px; /* auto pour l'image wxwx et 626 par 417 pour le col du galibier */
    text-align: justify;
    border: 1px solid black;
    overflow: auto;
    color: #0050ff;
	text-shadow: 1px 1px 1px black; /* Ombres du texte */
	font-size: 1.5em;
    opacity:0.5; /* Transparence de toute la boite (min : 0 =invisible - max : 1 =normal */
}
#secret
{
    display: none;
    width: 150px;
    height: 150px;
    background-color: red;
}
#bouton
{
    border: outset;
    background-color: white;
}
#bouton:hover
{
    border: inset;
    background-color: #cecece;
}
#bouton:active
{
    border: ridge;
    background-color: #cecece;
}
element
{
    position: fixed;
    right: 0px;
    bottom: 0px;
    background-color: white;
    border: dashed;
    text-align: center;
}
#fleche
{
    font-size: 50px;
}
element:hover
{
    position: fixed;
    right: 0px;
    bottom: 0px;
    background-color: gray;
    border: dashed;
    text-align: center;
}