/* general */
html{width:100%;min-height:100vh;}
body{min-height:100vh;background:#F9FAFB;margin:0;padding:0;font-family:sans-serif;font-size:14px}
a{text-decoration:none;color:#0000FF}
h1{font-size:48px;padding:0;margin:0 0 20px 0;text-align:center;text-shadow:0 1px 0 #eee,0 2px 0 #e5e5e5,-1px 3px 0 #c8c8c8,-1px 4px 0 #c1c1c1,-2px 5px 0 #b9b9b9,-2px 6px 0 #b2b2b2,-2px 7px 2px rgba(0,0,0,.6),-2px 7px 8px rgba(0,0,0,.2),-2px 7px 45px rgba(0,0,0,.4)}
.clr{clear:both}
.ordinateur{display:none}

/* couleur */
.blanc{color:#fff}
.noir{color:#000}
.rouge{color:#FF0000}
.vert {color:#00AE2C}
.orange {color:#FF6600}
.f_rouge{background:red}
.f_bleu {background:#0000FF}
.f_jaune {background:#FFFF00}
.f_noir {background:#000}
.f_orange {background:#FF6600}
.f_vert {background:#00FF00}

/* couleur */

/* icons */
@font-face{font-family:fontello;src:url(fontello.eot?65845728);src:url(fontello.eot?65845728#iefix) format('embedded-opentype'),url(fontello.woff?65845728) format('woff'),url(fontello.ttf?65845728) format('truetype'),url(fontello.svg?65845728#fontello) format('svg');font-weight:400;font-style:normal}
.icon{font-family: "fontello";font-style:normal;font-weight:normal;font-size:24px;display:inline-block;text-decoration:inherit;width:30px;text-align:left;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-shadow:1px 1px 1px rgba(127, 127, 127, 0.3);margin:0 5px 0 5px}
/* icons */

/* logo */
.logo{width:100%;max-width:700px;margin:10px auto}
.logo img{width:100%}
/* logo */

/* alignement */
.gauche{float:left;margin:0 0 20px 0}
.droite{float:right;margin:0 0 20px 0}
.centrer{text-align:center}
.retrait20{margin:20px 0 0 0}
.width100{width:100%}
.width180{width:180px}
.font16{font-size:16px;font-weight:bold}
/* alignement */

/* formulaire*/
.formulaire{box-sizing:border-box;padding:20px;margin:auto;background:#fff;border:1px solid #000;border-radius:5px;box-shadow: 6px 6px 0px #000}
.formulaire input, .formulaire select, .formulaire textarea{width:calc(100% - 40px);margin:5px 0;box-sizing:border-box;padding:10px;border:1px solid #ccc;border-radius:5px;background:#fff;background:#ddd}
.formulaire input[type="submit"]{margin:5px auto}
.formulaire input[type="submit"]:valid {background:#57BD42;font-weight:bold;font-size:16px}
.formulaire input[type="radio"] {width:25px}
.formulaire option:disabled {color:#FF0000;}
.erreur{width:100%;margin:15px auto;box-sizing:border-box;background:red;color:#fff;font-size:16px;font-weight:bold;padding:10px;text-align:center}
.radio {width:calc(100% - 40px);margin:5px 0;box-sizing:border-box;padding:6px 10px 6px 10px;border:1px solid #ccc;border-radius:5px;background:#fff;background:#ddd}
/* formulaire*/

/* connexion */
.flex{width:100%;box-sizing:border-box;min-height:100vh;margin:-16px auto 0 0;padding:20px;display:flex;flex-direction:column;justify-content:center;background:#ccc}
/* connexion */

/* menu */
.menu{width:100%;box-sizing:border-box;padding:20px;margin:20px auto;display:inline-block;background:#fff;border-radius:20px}
.objet{width:100%;padding:10px 20px;box-sizing:border-box;display:flex;flex-wrap:wrap}
.box{padding:10px;border:1px solid #000;margin:0 10px 10px 0}
.box:last-child{margin:0 0 10px 0}

/* menu */

/* attente */
.fiche, .premium {box-sizing:border-box;padding:20px;margin:0 auto 30px 0;background:#fff;border:1px solid #000;border-radius:5px}
.premium {background:#CAFFCA}
.vignette {float:left;border:1px solid #000;width:120px;height:90px;margin:0 10px 10px 0}
.titre {display:inline-block;font-size:16px;font-weight:bold}
.ligne {margin:0 0 15px 0}
.display {display:inline-block}
/* attente */

/* footer */
.footer{width:100%;box-sizing:border-box;padding:10px;display:flex;justify-content:center}
.bouton {flex:initial;border:1px solid #ccc;border-radius:5px;padding:10px;margin:10px 10px 25px 10px;font-weight:bold;text-align:center}
/* footer */

/* visu */
.visu, .entete {width:100%;box-sizing:border-box;padding:0 10px;font-size:14px;margin:0 auto -1px auto;display:flex;border:1px solid #ccc}
.entete {font-size:20px;font-weight:bold}
.col1, .col2, .col3, .col4, .col5, .col6 {box-sizing:border-box;padding:0 5px 0 10px;float:left;border-right:2px solid #ccc;display:flex;flex-direction:column;justify-content:center;min-height:50px;overflow:hidden}
.col1 {width:50px}
.col2 {width:calc(100% - 50px);border:none}
.col3 {width:200px}
.col4 {width:150px}
.col5 {width:150px}
.col6 {width:150px;border:none}
/* visu */

@media all and (min-width : 750px) {
.tableau{padding:20px}
.gauche{width:49%}
.droite{width:49%}
.col2 {width:calc(100% - 700px);border-right:2px solid #ccc}
.ordinateur{display:inline-block}
}