/* Ce qu'il y a partout sur le site */
:root{
    --wdec:30ch;
    --wbin:30ch;
    --whex:30ch;
    /* Image de fond sur le slider */
    --imageslider:url('nuit.png');
    /* Visibilité des 3 messages d'erreur */
    --viserreur1:hidden;
    --viserreur2:hidden;
    --viserreur3:hidden;
    --poserreur1:absolute;
    --poserreur2:absolute; 
    --poserreur3:absolute; 
    /* Différentes couleurs pour le slider, le fond, les input et les boutons */
    --couleurslider:#e1bbd9;
    --clair:#7c1779;
    --moyen:#6d1371;
    --couleurfond:#450640;
    --couleurtexte:white;
    --posslider:4px;
    color:var(--couleurtexte);
    font-family:sans-serif;
    font-size:22px;
    background-color:var(--couleurfond);
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /*Firefox*/
}
/* Pour gérer l'élargissement des champs de saisie */
#dec{
  width:var(--wdec);
}
#bin{
  width:var(--wbin);
}
#hex{
  width:var(--whex);
}





                                                              /*BANDEAU*/
#logo{
  width:100px;
  height:100px;
}
/*gère l'affichage du texte dans le bandeau (les liens ne sont pas bleus et soulignés)*/
.LienBandeau {					
  color: var(--couleurtexte);
  text-decoration:none;
  font-size: 25px;
}
/*gère l'affichage du bandeau*/
table{						
  width: 100%;
  height: 75px;
  background-color: var(--clair);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border: solid;
  border-color: var(--moyen);
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
}
.premiertxt {					/*évite la superposition du haut de la page et du bandeau*/
  margin-top: 100px;
}



                                                              /*FORMULAIRE*/
/*Pour aligner les éléments*/
span {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/*Le texte dans les input*/
.texteinp{
    font-family:monospace;
    height:38px;
    font-size:15px;
    color: var(--couleurtexte);
    border: 4px outset var(--moyen);
    border-radius: 9px;
    background-color: var(--clair);
}
/*Quand on écrit dedans*/
.texteinp:focus {
    outline: none;
    background-color:var(--moyen);
}
/*Quand on passe par dessus*/
.texteinp:hover{
    background-color:var(--moyen);
}

/*Ce qu'il y a dans un bouton*/
.button{
    /*Hauteur et largeur du bouton*/
    height:67px;
    width:150px;
    font-size:22px;
    color:var(--couleurtexte);
    /*Couleur bouton*/
    background-color:var(--clair);
    border: none;
    /*"courbure" du bouton (coin arrondis)*/
    border-radius: 22px;
    cursor: pointer;
}
/*Quand on survole (hover) un bouton*/
.button:hover {
    background-color: var(--moyen);
    /*Ombre à gauche, en bas et à droite*/
    box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
}

/* Styles des 3 messages d'erreur possible. On utilise des variables
pour pouvoir changer leur visibilité et leur position */
.erreur1{ 
  position:var(--poserreur1);
  visibility:var(--viserreur1);
}
.erreur2{
  position:var(--poserreur2);
  visibility:var(--viserreur2);
}
.erreur3{
  position:var(--poserreur3);
  visibility:var(--viserreur3);
}


                                                                          /*PIED DE PAGE*/
footer{					/*gère l'affichage du pied de page*/
  text-align: center;
  padding: 10px;
  background-color: var(--moyen);
  display: flex;
  align-items: center;
  position:fixed;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%; 
}
/* Texte centré dans le pied de page */
footer p{
  margin: 0 auto;
}
/* Position du slider dans le pied de page */
footer label{
  position: absolute;
  right: 30px;
}
/* Style du slider (arrière plan ovale) */
.caseslider{
  position: absolute;
  cursor: pointer;
  background-color: var(--couleurfond);
  border-radius: 30px;
  position: absolute;
  width: 60px;
  height: 30px;
}
/* Style du slider (rond qui bouge)*/
.slider {
  content: "";
  position: absolute;
  height: 22px;
  width: 22px;
  bottom: 4px;
  background-color: var(--couleurslider);
  border-radius: 30px;
  background-image:var(--imageslider);
  background-position-x: center;
  background-position-y: center;
  background-size: 23px;
  left:var(--posslider);
  transition: 0.3s;
}
input[type="checkbox"] {
    visibility:hidden;
}


                                                                    /*STYLE DES TEXTES et autres*/
h1{
  font-size: 50px;
}
/* Style du sous-titre */
h2{
  font-size:28px;
}
/* Style des titres h3 (utilisés pour les labels) */
h3{
  font-size:22px;
  margin: 25px;
}
/* Style des messages d'erreurs */
h4{
  color: red;
  font-family:sans-serif;
  font-size:18px;
  margin: 25px;
}
#gerald{  /*Le lien vers le site est visible (car le bleu lien est illisible sur le fond sombre)*/
  color:rgb(106, 106, 222); 
}

          /*IFRAME CAHIER DES CHARGES*/
iframe {
  width: 75%;
  height: 500px;
  border: none;
  margin-left: 12%;
}
#separateurPageAccueil {
  margin-top: 50px;
  margin-bottom: 25px;
  width: 60%;
  border: 1px solid var(--couleurtexte);

}