/* les jardiniers du trégor copie */
a {
color: #000;
text-decoration: none;
}
a:visited {
color: #000;
}
a:hover, a:focus, a:active {
color: #F00;
text-decoration: underline;
}
h1, h2, h3, h4, h5, h6, p, hr {
margin: 0;
padding: 0;
}
hr {
border-top: 1px solid red;
margin: 3px 0px;
}
html {
width: 100%;
height: 100%;
box-sizing: border-box;
background:  #f2f4f4;
}
body {
font-family: 'Crimson Text', serif;
font-size: 100%;
margin: 0;
padding: 0;
font-style: italic;
font-weight: bold;
}
/* LE CONTAINER */
.container {
display: flex;
flex-wrap: wrap;
}
/* LE HEADER */
header {
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
box-shadow: inset 0px 0px 2px 2px rgba(0, 0, 255, .8);
background: linear-gradient(30deg, #aed6f1,  #2980b9,  #d4e6f1,  #d4e6f1);
}
/* LOGO DE BIENVENUE DU SITE */
h1 {
margin: 15px;
padding: 10px;
text-align: center;
border: 2px solid #000;
border-radius: 15px;
box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.3) inset;
}
.droite {
margin: 15px 15px 15px auto;
width: 170px;
height: 120px;
background-image: url(https://sd-5.archive-host.com/membres/images/19781621016846866/service-personne.png);
}
.gauche {
display: flex;
justify-content: center;
align-items: center;
width: 25%;
box-shadow: inset 0px 0px 2px 2px rgba(0, 0, 255, .8);
background: linear-gradient(30deg, #aed6f1,  #2980b9,  #d4e6f1,  #d4e6f1);
background-repeat: repeat;
}
h3.titre {
color: #000;
}
h3.titre:hover {
color: #F00;
}
nav.hori > input, .nav-button {
display: none;
}
nav.hori {
width: 75%;
box-shadow: inset 0px 0px 2px 2px rgba(0, 0, 255, .8);
background: linear-gradient(30deg, #aed6f1,  #2980b9,  #d4e6f1,  #d4e6f1);
}
nav.hori ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
nav.hori li {
width: 16%;
padding: 5px;
margin: 5px auto;
font-size: 1.0625em;
text-align: center;
border: 1px solid #000;
border-radius: 7px;
box-shadow: inset 0px 0px 2px 2px rgba(0, 0, 0, .6);
}
nav.hori li a {
color: #000;
text-decoration: none;
}
nav.hori li a:hover {
color: #F00;
text-decoration: underline;
}
main {
display: flex;
flex-flow: row wrap;
align-items: flex-start;
width: 100%;
box-shadow: inset 0px 0px 2px 2px rgba(0, 0, 255, .8);
}
/* Possibilité de changer l'ordre d'affichage*/
nav.verti {
width: calc(20% - 42px);
border: 1px solid #000;
text-align: center;
margin: 10px;
padding: 10px;
border-radius: 10px;
box-shadow: inset 0px 0px 2px 2px rgba(0, 0, 0, .8);
}
nav.verti ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav.verti li {
border-bottom: 1px solid #000;
padding-bottom: 10px;
text-align: center;
}
#reseaux-sociaux {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
#fb, #tw {
width: 50px;
height: 50px;
border: 1px solid #000;
border-radius: 10px;
}
#fb {
background-image: url(https://sd-5.archive-host.com/membres/images/19781621016846866/fb.png);
background-position: 0px 0px;
}
#tw {
background-image: url(https://sd-5.archive-host.com/membres/images/19781621016846866/tw.png);
background-position: -50px 0px;
margin-left: 10px;
}
/* CONTENU ICI */
footer {
display: flex;
justify-content: center;
width: calc(100% - 10px);
/*margin-bottom: 10px;*/
padding: 5px;
box-shadow: inset 0px 0px 2px 2px rgba(0, 0, 255, .8);
background: linear-gradient(30deg, #aed6f1,  #2980b9,  #d4e6f1,  #d4e6f1);
}
nav.bas-grand {
width: 70%;
}
nav.bas-grand ul {
display: flex;
flex-flow: row wrap;
justify-content: center;
margin: 0;
padding: 0;
list-style-type: none;
}
h4.copy {
text-align: center;
font-size: 140%;
}
nav.bas-grand li {
flex: 1;
margin: 5px 10px;
text-align: center;
}
nav.bas-petit {
display: none;
}
p.bas {
font-size: 100%;
}
.cookie-alert {
position: fixed;
right: 0;
bottom: 0;
width: 18%;
box-shadow: inset 0px 0px 2px 2px rgba(0, 0, 255, .8);
background: linear-gradient(30deg, #aed6f1,  #2980b9,  #d4e6f1,  #d4e6f1);
text-align: center;
padding: 5px;
margin-bottom: 10px;
margin-right: 1px;
color: #000;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.cookie-alert a.cookie {
display: inline-block;
color: #FFF;
width: 190px;
margin: 5px;
padding: 3px 10px;
border: 1px solid #000;
border-radius: 5px;
background: linear-gradient(30deg, #aed6f1,  #2980b9,  #d4e6f1,  #d4e6f1);
box-shadow: inset 0px 0px 2px 2px rgba(0, 0, 255, .8);
}
.cookie-alert a.cookie:hover {
background: linear-gradient(30deg, #d4e6f1,  #d4e6f1, #aed6f1,  #2980b9);
color: #000;
}