:root {
    --btn-vert: #188754;
    --btn-jaune : #FFC107;
    --color-sable : #F5DEB3 ;
    --color-black : #000;
    --color-white : #FFF;
    --color-violet : #573B8A;
    --color-fond-gris : #EEEEEE;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, :before, :after {
    border: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 62.5%;
    font: inherit;
    vertical-align: baseline;
}

input:required:focus:valid, input[pattern]:focus:valid {
    border-color: #b3f3a2;
    box-shadow: 0 0 1px #b3f3a2;
    color:green;
}

input:required:focus:invalid, input[pattern]:focus:invalid {
    border-color: #f79c9c;
    box-shadow: 0 0 1px #f79c9c;
    color:red;
}

textarea:required:focus:valid, textarea:focus:valid {
    border-color: #b3f3a2;
    box-shadow: 0 0 1px #b3f3a2;
    color:green;
}

textarea:required:focus:invalid, textarea:focus:invalid {
    border-color: #f79c9c;
    box-shadow: 0 0 1px #f79c9c;
    color:red;
}