/*#dd5735*/
html {
    font-size:62.5%; /* 1rem= 10px (la formule est 10/16*100) la taille par défaut étant 16px */
}
body {
    font-family:sans-serif;
    background-color:#EEEEEE;
    color:#555555;
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-size:1.6rem;
}



/**** HEADER ****/
header {
    text-align:center;
    background-color:#444444;
    padding:1em;
}
h1 {
    font-size:2.5em;
    color:#DD5735;
}
header p {
    color:#999999;
}



/**** MAIN ****/
.container {
    max-width:80%;
    margin:3% auto;
}
h2 {
    font-size:2em;
    color:#333333;
}
h3 {
    font-size:1.5em;
}
.parent {
    border:1px dashed #DD5735;
}
article {
    background-color:white;
    padding:1.5%;
}


/**** CARDS ****/
.card {
    border:1px solid #CCCCCC;
    background-color:white;
    padding:3%;
}
.cards * {
    border:1px solid #CCCCCC;
    padding:3%;
    background-color:white;
}
.gutter * {
    margin:1.5%;
}



/**** VARIOUS ****/
.code {
    background-color:#DDDDDD;
    border:1px solid #CCCCCC;
}




/**** TABLEAU ****/
table {
    border-collapse:collapse;
    width:100%;
    margin:0 auto;
}
td, th {
    border:1px solid #ddd;
    padding:1em;
}
tbody {
    border-top:2px solid #999;
    border-bottom:2px solid #999;
}
tbody tr:nth-child(odd) {
    background-color:#D6D6D6;
}



/**** FORMULAIRE ****/
.general {
    display:flex;
    flex-direction:column;
    margin:2em 0;
    padding:1em;
    border:1px solid rgba(0,0,0,0.2);
    border-radius:0.5em;
}

/**** COORDONNEES ****/
.general legend {
    font-size:1.8rem;
    padding:0 1em;
}
.contact label {
    width:30%;
    padding:0.5em;
}
.contact input, .demand input {
    padding:0.5em 1em;
    color:#333;
    background-color:#fff;
    border-radius:0.5em;
    border:1px solid #ccc;
    width:60%;
}
.general fieldset {
    padding:1em 0;
    border:none;
    display:flex;
    justify-content:space-between;
}
.general fieldset:nth-child(2), .general fieldset:nth-child(3) {
    border-bottom:1px solid rgba(0,0,0,0.2);
}

/**** DEMANDE ****/
.demand select {
    cursor:pointer;
    font-size:1.6rem;
}
.demand select, .demand textarea {
    padding:0.5em 1em;
    color:#333;
    background-color:#fff;
    border-radius:0.5em;
    border:1px solid #ccc;
}
.demand textarea {
    margin-top:1em;
    height:8em;
}


/**** BOUTON ****/
.button {
    display:flex;
    align-items:center;
}
.button input {
    padding:1em 2em;
    color:#fff;
    background-color:#DD5735;
    border:1px solid #DD5735;
    border-radius:0.5em;
    width:14em;
    cursor:pointer;
    font-size:1.6rem;
}
.button input:hover {
    color:#DD5735;
    background-color:#fff;
}





/**** FOOTER ****/
footer {
    text-align:center;
    background-color:#444444;
    padding:1em;
}
footer p {
    color:#999999;
}
img {
    width:5%;
    margin-top:5px;
}
a {
    color:#DD5735;
    text-decoration:none;
}