html, body {
margin : 0;
padding : 0;
}
#header {
background-color : #008080;
color : white;
height : 215px;
width : 100%;
}
a, #footer a, .linklist {
color : white;
}
a {
color : red;
}
#main {
padding : 7px;
}
#footer {
padding : 0px;
text-align : center;
font-size : 15px;
background-color : #008080;
height : 230px;
clear : both;
}
.content {
column-count : 2;
column-gap : 7px;
}
img {
max-width : 100%;
height : auto;
}
.image-responsive {
max-width : 100%;
height : auto;
}
span {
color : red;
font-style : normal;
}

.div-categoryContainer {
padding-top : 5px;
font-size : 16px;
margin-left : 5px;
font-family : Arial, Helvetica, Verdana, Avenir, Sans-serif;
clear : both;
}
.picture-left {
float : left;
}
.a {
font-family : Arial, Helvetica, Verdana, Avenir, Sans-serif;
font-size : 17px;
color : black;
text-align : center;
}
h1 {
font-family : Arial, Helvetica, Verdana, Avenir, Sans-serif;
font-size : 14px;
color : #ffffff;
text-align : center;
}
h2 {
font-family : Arial, Helvetica, Verdana, Avenir, sans-serif;
font-size : 14px;
color : black;
text-align : center;
}
.right {
float : right;
}
p {
    margin: 5px 0;
    padding: 3px;
}

.conteneur1 {
overflow : hidden;
max-width : 960px;
margin : 0 auto;
padding : 0;
box-shadow : 0 0 10px -5px #777;
}
.d1 {
width : 3840px;
height : 120px;
background-color : #EDEDED;
background-image : url("https://www.handiprojet.com/image-diapo25.jpg");
background-size : contain;
animation : defilement1 20s linear infinite;
}
@keyframes defilement1 {
0% {
transform : translate(0,0);
}
100% {
transform : translate(-2880px,0);
}
}
.d1:hover {
animation-play-state : paused;
}
a.bouton {
color : white;
background-color : #FF4500;
font-size : 19px;
text-decoration : none;
font-weight : bold;
text-align : center;
padding : 1px;
border : #c0c0c0 outset 3px;
}
a.bouton:hover {
color : black;
background-color : #FF45ED;
font-size : 19px;
background-image : url(aqua.jpg);
border : #c0c0c0 inset 3px;
}
a.vertical {
color: white;
background-color: #000080;
font-size: 18px;
text-decoration: none;
font-weight: bold;
text-align: center;
padding: 5px;
border: 3px outset #c0c0c0;
display: block;
}
a.vertical:hover {
color: black;
background-color: #6495ED;
font-size: 18px;
background-image: url(aqua.jpg);
border: 3px inset #c0c0c0;
}
.style {
width : 338px;
height : 275px;
background-color : #AFEEEE;
color : black;
text-align : center;
}

* {
margin : 0;
padding : 0;
font-family : Arial, Helvetica, Verdana, Avenir, sans-serif;
}
nav {
width : 100%;
margin : 0 auto;
background-color : white;
position : sticky;
top : 0;
}
.conteneur-nav {
position : absolute;
width : 100%;
}
nav input[type="checkbox"] {
display : none;
}
nav label {
display : inline-block;
width : 100%;
padding : 10px 0;
text-align : center;
background-color : gold;
}
nav ul {
display : none;
list-style-type : none;
background-color : #555;
}
nav input[type="checkbox"]:checked + ul {
display : flex;
flex-flow : column wrap;
}
nav ul li {
flex : 1 1 auto;
text-align : center;
}
nav > div > ul > li > a {
color : white;
}
nav a {
display : block;
text-decoration : none;
color : black;
font-size : 17px;
padding : 0 0;
}
.sous {
display : flex;
flex-flow : column wrap;
z-index : 1000;
}
.sous li {
flex : 1 1 auto;
text-align : left;
}
.sous a {
padding : 5px;
background-color : rgb(200, 200, 200, 0.8);
}
@media screen and (min-width: 980px) {
.conteneur-nav {
position : static;
}
nav label, nav input {
display : none;
}
nav input[type="checkbox"]:checked + ul, nav ul {
display : flex;
flex-flow : row wrap;
background-color : white;
}
nav ul li {
position : relative;
}
nav > div > ul > li > a {
color : black;
}
nav a {
border-bottom : 2px solid transparent;
background-color : #98FB80;
}
nav a:hover {
color : blue;
border-bottom : 2px solid blue;
}
.sous {
display : none;
box-shadow : 0 1px 2px #CCC;
background-color : yellow;
position : absolute;
width : 100%;
}
nav > div > ul li:hover .sous {
display : flex;
flex-flow : column wrap;
}
.sous a {
border-bottom : none;
background-color : white;
}
.sous a:hover {
border-bottom : none;
background-color : rgb(200, 200, 200, 0.1);
}
.deroulant > a::after {
content : " ▼";
font-size : 17px;
}
}
.conteneur-contenu {
margin : 50px 20px;
height : 1500px;
}