/*
road to :
- Mobile first
- Light first
*/

/* global element */

*{box-sizing:border-box}

body{font:1rem sans-serif;background:#fff;color:#444}

a{text-decoration:none;color:#dc0}
a:hover{color:#04f}

img{border:0;max-width:100%}

div{position:relative}

body, ul, pre{margin:0}

pre{white-space:pre-wrap}

ul{padding:0;list-style:none}

body.darkmode{background-color:#000;color:#ccc}

h1,h2,h3,h4,h5,h6{margin:0}

table{cursor:crosshair;color:#ddd}
table tr:nth-child(3n){color:#dc8}
table tr:hover{background:#333;color:#eee}
table tr td{padding-bottom:.4rem}
table tr td:nth-child(1){padding-right:2rem}

/* class */

.pa{position:absolute;left:0;top:0;}
.table{display:table}
.fixed{position:fixed}
.z8{z-index:8}
.b0{bottom:0}
.align_y_center{align-self:center}

.flex, .hyper_center{display:flex}
.flex_wrap{flex-wrap:wrap}
.flex_center{justify-content:center}
.flex_spaced{justify-content:space-evenly}
.flex_between{justify-content:space-between}
.flex_column{flex-direction:column}

.w100p{width:100%}
.w90p{width:90%}
.w10p{width:10%}
.mxw1200px{max-width:1200px}
.mh100vh{min-height:100vh}
.mh20vh{min-height:20vh}
.w80px{width:80px}
.w200px{width:200px}

.h40{height:40px}

.mxa{margin-left:auto;margin-right:auto;}
.my08{margin-top:.8rem;margin-bottom:.8rem;}

.mr2{margin-right:.2em;}
.mt48{margin-top:4.8rem}
.mt40{margin-top:4rem}
.mt32{margin-top:3.2rem}
.mt20{margin-top:2rem}
.mt12{margin-top:1.2rem}
.mt08{margin-top:.8rem}
.mb04{margin-bottom:.4rem;}

.mb10{margin-bottom:1rem}
.mb20{margin-bottom:2rem}

.pd02{padding:.2em}
.px08{padding-left:.8rem;padding-right:.8rem;}
.px12{padding-left:1.2rem;padding-right:1.2rem;}
.px20{padding-left:2rem;padding-right:2rem;}

.py08{padding-top:.8rem;padding-bottom:.8rem;}
.py20{padding-top:2rem;padding-bottom:2rem;}

.pb08{padding-bottom:.8rem}

.tac{text-align:center}
.lh40{line-height:40px}

.c999{color:#999}
.caaa{color:#aaa}
.cc36{color:#c36}
.cdc0{color:#dc0}

.fs11{font-size:11pt;}

.bor0{border:0}
.br9{border-radius:9px}
.br12{border-radius:12px}
.bort1_666{border-top:1px solid #666}
.borb1_666{border-bottom:1px solid #666}
.back222{background:#222}
.back2a2a2a{background:#2a2a2a}
.bs1fff{box-shadow:0 0 0 1px #666 inset}

.bold{font-weight:bold;}

/* specific */

.tag{ font-size:11pt;font-weight:bold;color:#000;background:#999;margin-bottom:.3rem;padding:.3rem .6rem;border-radius:6px; }
.tag.box3d{box-shadow:6px 6px 6px 0 #0004,4px 4px 4px 0 #fff2 inset;}
.tag.tiny{padding-top:0;padding-bottom:0;}
.tag.big{padding:.8rem 1.4rem;}
.btn{ background:hsl(212,92%,40%);cursor:pointer;color:#fff; }
.btn:hover{ color:#888;background:hsl(212,80%,20%); }

.tag.jaune, .btn.jaune{ color:#000;background:hsl(48,100%,40%); }
.btn.jaune:hover{ color:#000;background:hsl(48,100%,24%); }

.tag.rouge, .btn.rouge{ color:#fff;background:hsl(0,100%,40%); }
.btn.rouge:hover{ color:#bbb;background:hsl(0,100%,24%); }

.tag.bc36, .btn.bc36{ color:#fff;background:#c36a; }
.btn.bc36:hover{ color:#bbb;background:#f483; }

.btn:active, .btn.jaune:active, .btn.rouge:active, .btn.bc36:active{ color:#888; background:#000; }


.hyper_center{
	height: 100%;
	justify-content: center;
	align-items: center;
}

.hide{display:none}

.case_darkmode{
    background:#111;
    color:#aaa;
    border:1px solid #444;
    padding:.2rem .2rem .3rem .4rem;
	border-radius:4px;
}