
body {
background-color : grey;
font-family : Arial, Verdana, Helvetica, sans-serif;
color : black;
font-size : 1.4em;
line-height : 1.1em;
text-align : center;
}
#bloc_page {
width : 80%;
margin : 0 auto;
margin-top : 6px;
margin-bottom : 6px;
}
header {
width : 80%;
height : 330px;
margin : 0 auto;
background-image : linear-gradient(to top, #ff9999 0%, #ffcc99 100%);
border-radius : 5px;
box-shadow : 3px 0 6px #111;
}
header .welcome {
display : inline-block;
vertical-align : top;
margin : 17px 100px 5px 5px;
width : 50%;
}
header .welcome h1 {
font-size : 2.1em;
font-weight : bold;
padding : 35px 5px 5px 3px;
color : black;
text-shadow : 4px 4px 5px #ffcc99;
text-align : center;
}
header .welcome h1 a {
color : black;
text-decoration : none;
text-shadow : 4px 4px 5px #ffcc99;
}
header .welcome h1 a:hover {
color : white;
text-decoration : none;
text-shadow : 4px 4px 5px #ff6666;
}
header .welcome p {
padding-top : 12px;
text-align : center;
}
header .scene {
display : inline-block;
width : 40%;
margin : 71px auto;
padding : 37px 60px 30px 5px;
font-size : 1.4em;
font-weight : bold;
text-align : center;
width : 300px;
height : 170px;
border-radius : 15px;
margin : 30px auto;
}
.flip, .flip > div {
width : inherit;
height : inherit;
transition : transform 2s;
}
.flip > div {
line-height : 190px;
position : absolute;
backface-visibility : hidden;
}
.avant {
background : #ff9999;
transform : perspective(330px) rotateY(0deg);
}
.arriere {
background : #ffcc99;
transform : perspective(330px) rotateY(180deg);
}
.scene:hover .avant {
transform : perspective(330px) rotateY(180deg);
}
.scene:hover .arriere {
transform : perspective(330px) rotateY(360deg);
}
nav {
display : inline-block;
width : 80%;
height : 39px;
text-align : center;
background-image : linear-gradient(to top, #ff9999 0%, #ffcc99 100%);
border-radius : 5px;
box-shadow : 3px 0 6px #111;
}
nav a, nav a:visited {
font-size : 1.1em;
font-variant : small-caps;
color : black;
}
nav a:hover {
color : #ff9999;
text-decoration : none;
}
section {
margin : 0 auto;
width : 80%;
text-align : justify;
background-image : linear-gradient(to top, #ff9999 0%, #ffcc99 100%);
border-radius : 5px;
box-shadow : 3px 0 6px #111;
overflow : hidden;
}
#box1 {
margin : 20px;
width : 80%;
}
.breadcrumb {
display : inline-block;
box-shadow : 0 0 15px 1px rgb(0 0 0 / 0.35);
overflow : hidden;
border-radius : 5px;
counter-reset : flag;
}
.breadcrumb a {
text-decoration : none;
outline : none;
display : block;
float : left;
font-size : 1.1em;
line-height : 36px;
color : black;
font-weight : bold;
padding : 0 10px 0 60px;
background : #666;
background : linear-gradient(#666, #333);
position : relative;
}
.breadcrumb a:first-child {
padding-left : 46px;
border-radius : 5px 0 0 5px;
}
.breadcrumb a:first-child:before {
left : 14px;
}
.breadcrumb a:last-child {
border-radius : 0 5px 5px 0;
padding-right : 20px;
}
.breadcrumb a.active, .breadcrumb a:hover {
background : #ffcc99;
background : linear-gradient(#333, #000);
}
.breadcrumb a.active:after, .breadcrumb a:hover:after {
background : #333;
background : linear-gradient(135deg, #333, #000);
}
.breadcrumb a:after {
content : '';
position : absolute;
top : 0;
right : -18px;
width : 36px;
height : 36px;
transform : scale(0.707) rotate(45deg);
z-index : 1;
background : #666;
background : linear-gradient(135deg, #666, #333);
box-shadow : 2px -2px 0 2px rgb(0 0 0 / 0.4), 3px -3px 0 2px rgb(255 255 255 / 0.1);
border-radius : 0 5px 0 50px;
}
.breadcrumb a:last-child:after {
content : none;
}
.breadcrumb a:before {
content : counter(flag);
counter-increment : flag;
border-radius : 100%;
width : 20px;
height : 20px;
line-height : 20px;
margin : 8px 0;
position : absolute;
top : 0;
left : 30px;
background : #444;
background : linear-gradient(#444, #222);
font-weight : bold;
}
.flat a, .flat a:after {
background : #ff9999;
color : black;
transition : all 0.5s;
}
.flat a:before {
background : white;
box-shadow : 0 0 0 1px #ccc;
}
.flat a:hover, .flat a.active, .flat a:hover:after, .flat a.active:after {
background : #ffcc99;
color : black;
}
#col1 ul li, #col2 ul li, #col3 ul li {
list-style-type : circle;
text-align : left;
margin-left : 10px;
line-height : normal;
}
#col1, #col2, #col3 {
display : inline-block;
vertical-align : top;
width : 27%;
margin : 20px 25px 20px 45px;
text-align : left;
}
#col1 p, #col2 p, #col3 p {
font-size : 1.5em;
color : black;
text-align : center;
}
#col1 a, #col2 a, #col3 a {
font-size : 1.5em;
text-decoration : none;
color : black;
text-align : left;
}
#col1 a:hover, #col2 a:hover, #col3 a:hover {
text-decoration : none;
color : brown;
}
#col1 a:visited, #col2 a:visited, #col3 a:visited {
text-decoration : none;
color : white;
}
#content {
margin : 20px;
}
#content p {
padding-left : 20px;
padding-right : 20px;
font-size : 1.3em;
margin-bottom : 18px;
}
#content a:visited {
color : grey;
font-weight : bold;
text-decoration : none;
}
.floating-box {
display : inline-block;
vertical-align : top;
width : 20%;
height : 330px;
margin : 20px 35px 20px 90px;
border : beige solid 1px;
border-radius : 15px;
box-shadow : 6px 6px 10px beige;
background-color : rgb(233 90 176 / 0.1);
color : rgb(233 90 176 / 0.1);
animation : anim2 8s ease-in infinite;
}
@keyframes anim2 {
0% {
background-color : rgb(233 90 176 / 0.1);
}
50% {
background : rgb(233 90 176 / 0.4);
}
100% {
background : rgb(233 90 176 / 0.1);
}
}
.floating-box a {
font-size : 1.1em;
text-decoration : none;
color : black;
text-align : left;
}

.floating-box ul li {
margin-left : 2px;
list-style-type : disc;
color : black;
text-align : left;
line-height : 1.4em;
}
.floating-box a:hover {
text-decoration : none;
color : white;
}
.floating-box a:visited {
text-decoration : none;
color : gray;
}
hr {
width : 75%;
margin : auto;
}

figure {
display : inline-block;
vertical-align : top;
margin : 20px 10px 20px 10px;
text-decoration : none;
overflow : hidden;
box-shadow : 2px 2px 5px #111;
}
figcaption {
display : block;
padding-top : 5px;
padding-bottom : 5px;
color : black;
text-align : center;
}

h2 {
width : 50%;
height : 30px;
margin : 35px 15px 35px 35px;
padding-top : 8px;
padding-bottom : 16px;
padding-left : 25px;
font-size : 1.2em;
text-align : center;
background : url(img/flecheo.png) 5px 10px no-repeat #ffcc99;
background : url(img/flecheo.png) 5px 10px no-repeat rgb(255 169 125 / 0.4);
border : #ffcc99 solid 1px;
border-radius : 5px;
}
h2:hover {
transition-property : background-color;
transition-duration : 2s;
}
h2 {
background-color : #ffcc99;
color : black;
animation-name : h2;
animation-duration : 4s;
animation-iteration-count : infinite;
animation-timing-function : linear;
}
@keyframes h2 {
0% {
background-color : #ffcc99;
color : black;
animation-name : h2;
animation-duration : 4s;
animation-iteration-count : infinite;
animation-timing-function : linear;
}
50% {
background : url(img/flecheo.png) 50px 10px no-repeat rgb(255 169 125 / 1);
}
100% {
background : url(img/flecheo.png) 50px 10px no-repeat rgb(255 169 125 / 1);
}
}
h3 {
font-weight : bold;
color : black;
font-size : 1.4em;
padding-top : 15px;
text-shadow : 1px 1px 1px white;
font-variant : small-caps;
margin : 20px 0 15px 18px;
text-decoration : none;
}
img.displayed {
display : block;
margin-left : auto;
margin-right : auto;
}
#hdp {
margin-right : 10px;
padding-top : 3px;
padding-bottom : 5px;
padding-right : 5px;
text-align : right;
color : black;
text-decoration : none;
}
em {
font-style : italic;
color : blue;
font-weight : bold;
}
.line {
width : 75%;
margin-bottom : 15px;
margin-top : 15px;
}
.clear {
clear : both;
}
.center {
text-align : center;
}
img {
border : none;
}
.pagination { display: inline-block; }
.pagination a { color: black; float: left; padding: 8px 16px; text-decoration: none; }
.pagination a.active { background-color: black; color: white; }
.pagination a:hover:not(.active) {background-color: #ddd; }

.slider-container {
  max-width: 650px;
  position: relative;
  margin: auto;
  height: 650px;
  overflow: hidden;
}
.menu {
  position: absolute;
  left: 0;
  z-index: 11;
  width: 100%;
  bottom: 0;
  text-align: center;
}
.menu label {
  cursor: pointer;
  display: inline-block;
  width: 10px;
  height: 10px;
  background: black;
  border-radius: 50px;
  margin: 0 0.2em 1em;
}
.menu label:hover,.menu label:focus {
  background: #1c87c9;
}
.slide-input{
  opacity: 0;
}
.slide-img {
  width: 100%;
  height: 600px;
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 10;
  transition: left 0s 0.75s;
}
[id^="slide"]:checked + .slide-img {
  left: 0;
  z-index: 100;
  transition: left 0.65s ease-out;
}

.accordian {
width : 700px;
height : 350px;
overflow : hidden;
margin : 40px auto;
box-shadow : 0 0 10px 1px rgb(0 0 0 / 0.35);
}
.accordian ul {
width : 2000px;
}
.accordian li {
position : relative;
display : block;
width : 160px;
float : left;
border-left : 1px solid #888;
box-shadow : 0 0 25px 10px rgb(0 0 0 / 0.5);
transition : all 0.5s;
}
.accordian ul:hover li {
width : 40px;
}
.accordian ul li:hover {
width : 540px;
}
.accordian li img {
display : block;
}
.image_title {
background : rgb(0 0 0 / 0.5);
position : absolute;
left : 0;
bottom : 0;
width : 540px;
}
.image_title a {
display : block;
color : white;
text-decoration : none;
padding : 20px;
font-size : 16px;
}
.fig {
display : inline-block;
vertical-align : top;
text-align : center;
margin-left : 21px;
margin-right : 18px;
margin-bottom : 20px;
padding : 0.2em;
}
.figcaption {
display : block;
padding-top : 12px;
padding-bottom : 15px;
color : black;
text-align : center;
}
.figcaption:hover {
color : white;
}
.fig .thumbnail {
border : none;
}
.fig .caption {
display : block;
font-size : 1.1em;
text-align : center;
padding-top : 10px;
padding-bottom : 18px;
color : white;
font-variant : small-caps;
text-decoration : none;
}
.fig .caption:hover {
color : blue;
}
.fig p, .fig a {
text-align : center;
line-height : 0.2em;
text-decoration : none;
}
form {
margin : 0 5px 0 0;
padding : 10px;
border : none;
}
fieldset {
margin : 0;
padding : 0;
border : black;
}
label {
display : block;
font-weight : bold;
font : normal normal 1.2em Arial, Verdana, sans-serif;
color : white;
margin : 0.4em 0;
}
input {
padding : 0.3em;
border : black solid 2px;
font : normal normal 1.2em Arial, Verdana, sans-serif;
background-color : transparent;
color : white;
}

input.button {
font : bold 1.2em Arial, Sans-serif;
color : white;
margin : 0;
padding : 0.25em 0.3em;
background : transparent;
border : black solid 2px;
}
.error {
color : #FF0000;
}
footer {
clear : both;
width : 80%;
margin : 0 auto;
background-image : linear-gradient(to top, #ff9999 0%, #ffcc99 100%);
border-radius : 5px;
box-shadow : 3px 0 6px #111;
padding : 15px 0;
overflow : hidden;
}
footer p {
font-size : 1.1em;
}
footer ul li {
list-style-type : disc;
text-align : left;
margin-left : 20px;
line-height : 1.4em;
}
footer a {
font-size : 1.1em;
text-decoration : none;
color : black;
text-align : left;
}
footer a:hover {
text-decoration : none;
color : white;
}
footer h3 {
font-size : 1.5em;
margin : auto;
padding-bottom : 17px;
padding-top : 5px;
text-decoration : none;
font-weight : bold;
color : black;
font-variant : small-caps;
}
#site, #utile, #nouvel {
display : inline-block;
vertical-align : top;
width : 30%;
margin-left : 15px;
margin-right : 8px;
text-align : left;
}
#nouvel p {
text-align : left;
}
#nouvel p a {
color : black;
text-shadow : 3px 3px 5px white;
}
#footer-bottom { width : 80%; margin : auto; padding-top: 9px; }
#footer-bottom p { font-size : 1.2em; color : navy; text-align : center; }
#footer-bottom a { color : black; text-decoration : none; }
#footer-bottom a:hover { color : #5EA4A7; }

/* Styles pour les écrans de petite taille (mobiles) */
@media screen and (max-width: 600px) {
    body {
        font-size: 16px;
        line-height: 1.4; /* Espacement entre les lignes pour une meilleure lisibilité */
        margin: 0; /* Supprime les marges par défaut du corps */
        padding: 0; /* Supprime les espaces internes par défaut du corps */
        background-color: #f9f9f9; /* Couleur de fond pour une meilleure lisibilité */
        /* Ajoutez d'autres styles spécifiques aux mobiles ici */
    }
    /* Styles pour les liens, les en-têtes, les images, etc. */
    a {
        color: #0074d9; /* Couleur des liens */
        text-decoration: none; /* Supprime le soulignement des liens */
    }
    h1, h2, h3 {
        font-weight: bold; /* Police plus grasse pour les en-têtes */
    }
    img {
        max-width: 100%; /* Empêche les images de déborder de leur conteneur */
        height: auto; /* Ajuste automatiquement la hauteur des images */
    }
}
/* Styles pour les écrans de tablette (largeur minimale de 768 pixels) */
@media screen and (min-width: 768px) {
    body {
        font-size: 18px;
        line-height: 1.6; /* Espacement entre les lignes pour une meilleure lisibilité */
        margin: 0; /* Supprime les marges par défaut du corps */
        padding: 0; /* Supprime les espaces internes par défaut du corps */
        background-color: #f9f9f9; /* Couleur de fond pour une meilleure lisibilité */
        /* Ajoutez d'autres styles spécifiques aux tablettes ici */
    }
    /* Styles pour les liens, les en-têtes, les images, etc. */
    a {
        color: #000000; /* Couleur des liens */
        text-decoration: none; /* Supprime le soulignement des liens */
    }
    h1, h2, h3 {
        font-weight: bold; /* Police plus grasse pour les en-têtes */
    }
    img {
        max-width: 100%; /* Empêche les images de déborder de leur conteneur */
        height: auto; /* Ajuste automatiquement la hauteur des images */
    }
}