body,html {
height:100%;
margin:0px;
font-size:1em;
}

body {
font-family:"liberation serif", times new roman, helvetica;
margin:0px;
padding:0px;
color:#000;
background-color:#fff;
}

/* Style de la banniere */
.header {
width:100%;
margin:0px;
padding:0px;
overflow:hidden;
}

.header img {
width:100%;
height:auto;
display:block;
}

/*Style du container

/* Style du titre */
.titre {
display:block;
text-align:center;
}

.titre img {
width:70%;
height:auto;
}

/* Styles du titre sur PC */
@media (min-width: 1024px) {
    .titre img {
    width:25%;
    height:auto;
    } 
}

/*Style du content*/
.content {
min-height:82% !important;
}

/* Styles du content sur PC */
@media (min-width: 1024px) {
    .content {
    min-height:67% !important; 
    } 
}

/* Styles du calendrier */
.container-calendrier {
width:80%;
background:linear-gradient(70deg, #1799e6, #9669d3);
margin:auto;
text-align:center;
}

.container-calendrier img {
width:30%;
padding:4px; 
height:auto;
display:inline-block;  /* permet l’alignement horizontal */
}

/* Styles du calendrier sur PC */
@media (min-width: 1024px) {
    .container-calendrier {
    width:800px;
    }
    .container-calendrier img {
    width:150px; 
    }  
}

/* Styles des pages du calendrier */
.container-page {
width:90%;
margin:auto;
text-align:center; 
}

.container-page img {
width:30%; 
height:auto;
margin-top:5px;
display:inline-block; 
border:2px solid #1799e6;
}

.container-page .illustrations {
width:80%; 
height:auto; 
border-radius:10px;
border:none;
}

.container-page .separateur {
width:50%; 
height:auto;
display:inline-block; 
border:none;
}

/* Styles des pages du calendrier sur PC */
@media (min-width: 1024px) { 
    .container-page {
    width:95%;
    margin:auto;
    text-align:center; 
    }
    
    .container-page img {
    width:200px; 
    }
    
    .container-page .separateur {
    width:300px;  
    } 
    
    .container-page .illustrations {
    width:600px; 
    }
}

/* Styles des articles */
.container-article {
width:100%;
margin:auto; 
}

.container-article p {
text-align:justify; 
}

.container-article ul {
text-align:justify;
font-size:1rem;
padding-left:20px;  
}

.container-article li {
margin-bottom:15px;  
}

.container-article h2 {
font-style:italic;  
}

/* Styles des articles sur PC */
@media (min-width: 1024px) {
    .container-article ul {
    font-size:1.1rem;
    } 
}

/* Styles des titres, paragraphes et liens sur téléphone */
h1 {
text-align:center;
padding-bottom:10px;
margin:0px;
font-size:1.3rem;
}

h2 {
text-align:center;
font-weight:bold;
font-size:1.1rem;
padding:0px;
margin:5px 0px 0px 0px;
}

p {
text-align:center;
font-size:1rem;
margin:0px 0px 10px 0px;
padding:5px 0px 0px 0px;
}

a {   
color:#1799e6;
font-size:1rem;
text-decoration:none;
} 

a:hover {
color:#9669d3;
text-decoration:underline;
}

/* Styles des titres, paragraphes et liens sur PC */
@media (min-width: 1024px) {
    h1 {
    font-size:1.5rem;
    }
    
    h2 {
    font-size:1.2rem;
    }
    
    p {
    font-size:1.1rem;
    }
    
    a {   
    font-size:1.1rem;
    } 
}

/* Style du diaporama */
.container-diaporama {
padding:5px;
overflow:auto;
display:flow-root;
}

.container-diaporama img {
width: 45%; 
height:auto;
margin:0px;
border:none;
}

.slider-translation-container {
width:100%;
max-width:700px;
overflow:hidden;
margin:auto;
border-radius:10px;
z-index:1;
}

.slider-translation {
display:flex;
transition:transform 0.8s ease-in-out;
}

.slider-translation img {
width:100%;
max-width:700px;
height:auto;
flex-shrink:0;
object-fit:cover;
}

.slide-img {
width:100%;
flex-shrink:0;
}

/* Styles du bas de page */
.container-bas {
width:100%;
position:absolute;
margin-top:10px;
padding:5px 0px;
background:linear-gradient(70deg, #1799e6, #9669d3);
}

.container-bas p {
text-align:right;
color:#fff;
margin:0px 10px 0px 0px;
}

.container-bas a {
color:#fff;
}