@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

:root{
    /* Déclarations des couleurs */
    --clr-rouge: #FF6B6B;
    --clr-bleu: #118AB2;
    --clr-vert: #CDEAC0;
    --clr-jaune: #FFE66D;
    --clr-blanc: #f4f1de;
    --clr-noir: #454545;
    --clr-noir-sec:#505050;

    /* Déclarations des polices */
    --ft-primaire: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
    --ft-secondaire: 'DM Serif Display', sans-serif;
    --ft-primaire-sec: 'Mulish', sans-serif;
}

/* Configuration initiale */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--ft-primaire-sec);
    font-weight: 400;
    color: var(--clr-noir);
}






html,
body{
    width: 100%;
    height: 100%;
    position: relative;
    font-size: 15px;
    background-color: var(--clr-blanc);
}

a{
    color: var(--clr-bleu);
}
.main-container 
{
    width: 100%;
    max-width: 110em;
    margin: auto;
    font-size: 1em;
}
li{
    list-style: none;
}

.split {
    display:flex;
    flex-direction: row;
}

.split>*{
    flex:1;
}



.container{
    width: 100%;
    font-size: 1.1em;
    margin: 8rem 0;
    padding: 0rem 7.21rem;
}

object,svg{
    pointer-events: none;
}

a{
    cursor: pointer;
}

.column{
    display: flex;
    flex-direction: column;
}


/*
####################################################
# Formatage du texte                               #
####################################################
*/

.titre{
    font-size:3em;
    font-family: var(--ft-secondaire);
}

.text-bold{
    font-weight: 400;
}

.text-center{
    text-align: center;
}
.text-left{
    text-align: left;
}
.sous-titre{
    font-weight: 500;
    font-style: italic;
    color:var(--clr-noir-sec);
}

/*
####################################################
# Couleurs et Surligneme                           #
####################################################
*/

.surligne-jaune{
    background: linear-gradient(90deg,transparent 10%, rgba(253, 255, 182,1) 10.01%, rgba(253, 255, 182,1) 40%,transparent 40.01%);

    background: -moz-linear-gradient(90deg,transparent 10%, rgba(253, 255, 182,1) 10.01%, rgba(253, 255, 182,1) 40%,transparent 40.01%);

    background: -webkit-linear-gradient(90deg,transparent 10%, rgba(253, 255, 182,1) 10.01%, rgba(253, 255, 182,1) 40%,transparent 40.01%);
}

.surligne-rouge{
    background: linear-gradient(90deg,transparent 10%, rgba(255, 173, 173,1) 10.01%, rgba(255, 173, 173,1) 40%,transparent 40.01%);

    background: -moz-linear-gradient(90deg,transparent 10%, rgba(255, 173, 173,1) 10.01%, rgba(255, 173, 173,1) 40%,transparent 40.01%);

    background: -webkit-linear-gradient(90deg,transparent 10%, rgba(255, 173, 173,1) 10.01%, rgba(255, 173, 173,1) 40%,transparent 40.01%);
}
.surligne-bleu{
    background: linear-gradient(90deg,transparent 10%, rgba(190, 225, 230,1) 10.01%, rgba(190, 225, 230,1) 40%,transparent 40.01%);

    background: -moz-linear-gradient(90deg,transparent 10%, rgba(190, 225, 230,1) 10.01%, rgba(190, 225, 230,1) 40%,transparent 40.01%);

    background: -webkit-linear-gradient(90deg,transparent 10%, rgba(190, 225, 230,1) 10.01%, rgba(190, 225, 230,1) 40%,transparent 40.01%);
}

.surligne-vert{
    background: linear-gradient(90deg,transparent 10%, #ABDB94 10.01%, #ABDB94 40%,transparent 40.01%);

    background: -moz-linear-gradient(90deg,transparent 10%, #ABDB94 10.01%, #ABDB94 40%,transparent 40.01%);

    background: -webkit-linear-gradient(90deg,transparent 10%, #ABDB94 10.01%, #ABDB94 40%,transparent 40.01%);
}

.couleur-rouge{
    color:var(--clr-rouge);
}

.couleur-vert{
    color:var(--clr-vert);
}

.couleur-bleu{
    color:var(--clr-bleu);
}

.couleur-jaune{
    color:var(--clr-jaune);
}


/*
####################################################
# Notification                                     #
####################################################
*/
.notification
{
    color: var(--clr-blanc);
    background-color: var(--clr-bleu);
    position: fixed;
    padding: 0em 2em;
    border-radius: 0.3em;
    font-weight: 600;
    font-size: 1.2em;
    min-height: 1.8em;
    padding-top: 1em;
    padding-bottom: 1em ;
    
}

.notification > button {
    position: absolute;
    right: 0.5em;
    top:0.5em;
    
    background: none;
    border: none;
    cursor: pointer;

    

}

.notification >button>i{
    color: var(--clr-blanc);
    width: 100%;
    height: 100%;
    font-size: 1.3em;
}

.notification
{
    position: fixed!important;
    bottom: 1em!important;
    right: 1em!important;
    background-color: var(--clr-bleu)!important;
}



/*
####################################################
# Barre de nav                                     #
####################################################
*/
#barre-de-nav{
    position: relative;
    font-size:1.3em;
    width: 100%;
    max-width:80em;
    margin:auto;
    z-index: 3;
    padding:1.4rem 1.4rem 0px 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#bouton-home{
    display: block;
}

#logo{
    width: 7rem;
}

#bouton-login{
    border:none;
    background: none;
    cursor: pointer;
    pointer-events: all;
}

#ic-login{
    width: 2rem;
    cursor: pointer;
    pointer-events: none;
}



#menu{
    align-self: flex-end;
}

#menu> * + *{
    margin-left: 2rem;
}

#menu>a{
    position: relative;
    color: var(--clr-noir);
    text-decoration: none;
}
#menu>a>object{
    position: absolute;
    left:50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index:-1;
    width: 5rem;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: all 500ms;
}
#menu>a:hover object{
    visibility: visible;
    transition: all 500ms;
    opacity: 100%;
}

/*
####################################################
# Section bienvenue                                #
####################################################
*/

#bienvenue{
    margin:10rem 0;
    background-color: var(--clr-blanc);
    align-items: center;
}

#bienvenue object {
    display: block;
    width: 65%;
    margin:auto;
}




#bienvenue * + * {
    margin-top: 1em;
}



/*
####################################################
# Section news                               #
####################################################
*/
#news {
    flex-direction: column;
    text-align: center;
    background-color: var(--clr-blanc);
}

#news > div {
    margin: 5rem 0;
}

.actualite-sujet{
    position: relative;
    width: 17rem;

    border:none;
    cursor: pointer;
    z-index: 1;
    
}

.actualite-sujet::after{
    position: absolute;
    content: '';
    top:0;
    left:0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background:#118AB2;
}

.actualite-sujet:hover::after{
    top:-10px;
    left:-10px;  
}

.actualite-sujet:hover .actualite-sujet-design{
    border: solid #118AB2 1.5px; 

}
.actualite-sujet:hover p,
.actualite-sujet:hover h3{
    color:#118AB2;
}

.actualite-sujet-design{

    top:0px;
    left: 0px;
    border: solid #454545 0.1rem;
    width: 100%;
    height: 100%;
    padding: 5px;
    background-color: #f4f1de;
    
}
.actualite-sujet-textes{
    text-align:left ;
    
}
.actualite-sujet-date,
.actualite-sujet-description{
    font-weight: 300;
}

.actualite-sujet-date,
.actualite-sujet-description{
    margin: 10px 0 10px 0;
    font-size:0.8em;
    color:var(--clr-noir-sec);
    font-weight: 400;
}
.actualite-sujet-titre{
    font-size:2em;
    color:#454545;
    font-weight: 600;
}

.actualite-sujet-description
{
    
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.actualite-sujet-image{
    width: 100%;
    height: 11rem;
    overflow:none;

}

.actualite-sujet-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.actualite-sujet-date-no-loaded{
    border: 0.1rem solid var(--clr-noir);
    border-radius: 0.4rem;
    width: 50%;
    height: 1rem;
}

.actualite-sujet-titre-no-loaded{
    border: 0.1rem solid var(--clr-noir);
    border-radius: 0.4rem;
    width: 90%;
    height: 1.3rem;
}
.actualite-sujet-description-no-loaded{
    border: 0.1rem solid var(--clr-noir);
    border-radius: 0.4rem;
    width: 100%;
    height: 8rem;
}
.actualite-sujet-image-no-loaded{
    border: 0.1em solid var(--clr-noir);
   
}

.actualite-sujet {
    text-decoration: none!important;
}

.actualite-sujet-no-loaded{
    pointer-events: none;
}

#actualite-wrapper{
   display: flex;
   justify-content: center;
   column-gap: 2rem;
   flex-wrap: wrap;
   row-gap: 2rem;
}


/*
####################################################
# Section activites                            #
####################################################
*/

#top-activites{
    background-color: var(--clr-blanc);
}
#top-activites > div > p {
    text-align: center;
    margin-top: 3rem;
}
#top-activites > div > object {
    display: block;
    margin: auto;
    margin-top: 2rem;
    width:90%;
}
/*
####################################################
# Activité card                              #
####################################################
*/
.activites-card{
    position: relative;
    width: 25em;
    min-height: 8em;
    border: solid #454545 0.1rem;
    border-radius: 1.2em;
    padding: 0.4em;
    display: flex;
    align-items: center;

}

.activites-card-gauche{
    flex:1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em;
    
}



#activites-liste{
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#activites-liste>li+li{
    margin-top: 2rem;
}

.activites-card-droit{
    text-align: left;
    flex:2;
    margin-left: 1.25em;
}

.activites-card-droit>p{
    font-size:0.8em;
}
.activites-card-img{
    width: 6.9em;
    height: 6.9em;
    border-radius: 50%;
    
    border:solid 1px var(--clr-blanc);
    object-fit: cover;
}
.activites-card-titre{
    font-weight: 600;
    font-size: 1.2em;
}

.activites-card-description{
    font-weight: 500;
    width: 90%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
        
}

.activites-card-public {
    padding-top: 1em;
}



.activites-card p {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    text-align: left;
}

.activites-card-boutton{
    position: absolute;
    right: 0;
    bottom: 0;
    background: none;
    border:none;
    cursor: pointer;
    transform: translate(50%,50%);
}
.activites-card-boutton:hover #activites-card-triangle-beige{
    left: 6.5px;
    top: -10px;
}

#activites-card-triangle{
    position: relative;
    width: 2.5em;
    cursor: pointer;
    pointer-events: none;
    z-index: 1;
}
#activites-card-triangle-beige{
    position: absolute;
    width: 2.5em;
    left: 0;
    top:0;
    z-index: 2;
    pointer-events: none;

    transition: all 500ms;
}
.activites-card-img-no-loaded{
    background: var(--clr-blanc);
    border:0.1rem solid var(--clr-noir);
}
.activites-card-titre-no-loaded{
    width: 50%;
    border:0.1rem solid var(--clr-noir);
    height: 1.1em;
    border-radius: 0.2em;
}

.activites-card-description-no-loaded{
    width: 100%;
    border:0.1rem solid var(--clr-noir);
    height: 4em;
    border-radius: 0.2em;
}

.activites-card-public-no-loaded{
    width: 30%;
    border:0.1rem solid var(--clr-noir);
    height: 1em;
    border-radius: 0.2em;
}

.activites-card-boutton-no-loaded{
    pointer-events: none;
}


/*
####################################################
# Coordonnees                           #
####################################################
*/

#coordonnees{
    display:flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--clr-blanc);
}

#coordonnees-infos{
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-size: 1em;
    flex-wrap: wrap;
    column-gap: 1rem;
    row-gap: 1rem;
}


#coordonnees-contact{
    align-self: flex-start;
    width: 100%;
}

#coordonnees-contact form> button{
    margin-top:1rem;
}
#coordonnees-contact-titre{
    margin-bottom: 1rem;
}

#coordonnees-contact > form {
    width: 100%;
}

#coordonnees-contact p,
#coordonnees-contact textarea,
#coordonnees-contact button {
    font-size: 1.5em;
    font-weight: 400;
}


#coordonnees-contact input{
    font-size:1em;
}

#coordonnees-contact button{
    width: 8rem;
    background-color: var(--clr-blanc);
    border:solid var(--clr-noir) 0.1rem;
    cursor: pointer;
}

#coordonnees-contact button:hover{
    background-color: var(--clr-noir);
    color:var(--clr-blanc);
}

#text-illustration{
    display: flex;
    width: 100%;
    align-items: center;
    margin: 1rem 0;
}

#text-illustration>*{
    flex:1;

}
#text-illustration p,
#message {
    width: 100%;
    min-height: 25rem;
    resize: none;
    background: none;
    border: solid var(--clr-noir) 0.1rem;
    padding: 0.5rem;
}

#pseudo
{
	display: none;
}

#text-illustration object{
    width: 80%;
    display: block;
    margin:auto;
}

input{
    background-color: var(--clr-blanc);
    border:none;
    color: var(--clr-noir);
    border-bottom: solid var(--clr-noir) 0.1rem;
}

#coordonnees-infos{
    margin:5rem 0;
}

/*
####################################################
# Coordonnees card                          #
####################################################
*/

.coordonnees-card{
    width: 13em;
    padding: 0.5rem;
}
.coordonnees-card object {
    width: 6em;
    display:block;
    margin: auto;
    margin-bottom: 1rem;
}
.coordonnes-card-text{
    text-align: center;
    margin-bottom: 2rem;
    font-size: 0.8em;
}


/*
####################################################
# Modal                         #
####################################################
*/


.modal{
    position: fixed;
    background:rgba(0, 0, 0, 0.7);
    z-index:10;
    bottom: 0;
    right: 0;
    top:0;
    left: 0;
    font-size: 1em;
}
#modal-login{
    display:none;
}
.modal-card{
    position: absolute;
    background: #f4f1de ;
    z-index: 11;
    opacity: 100%;
    width: 25em;
    height: 31em;
    transform: translate(-50%,-50%);
    top:50%;
    left:50%;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 0px 0.9em 0 0.9em;
    font-size: 1em;
}

.modal-quit-1{
    position: absolute;
    right: 0.5em;
    top:0.5em;
    width:0.9rem;
    height: 0.9rem;
    background:#FF6B6B;
    border:none;
    border-radius: 100%;
    cursor: pointer;
}

.modal-card form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-height: 65%;
}

.modal-label{
    display: flex;
    flex-direction: column;
    text-align: left;
    width: 50%;
    margin: 0.65em 0 0.65em 0;
}
.modal-label label{
    font-size: 1.3em;
    font-weight: 300;
}

.modal-label input{
    font-size: 1.3em;
    border:none;
    border-bottom: solid #454545 1.2px;
    margin-top: 0.3em;
    background: none;
}

.modal-image{
    width: 100%;
    height: 35%;
    margin-bottom: 0.9em;
    border-bottom: solid #454545 1.3px;
}

.modal-boutons{
    margin-top: 0.9em;
    margin-bottom: 0.9em;
}

.modal-boutons button,
.modal form button{
    width: 6.25em;
    height: 1.9em;
    font-size: 0.875em;
    border-radius: 0;
    background: none ;
    border:solid #454545 1.3px;
    cursor: pointer;

}
.modal form > div {
    display:flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
.modal form > div > button{
    margin:auto;
    margin-top : 2em;
}

.modal-titre{
    font-size: 3em;
    margin-bottom: 0.3em;
    font-family: var(--ft-secondaire);
}


/*
####################################################
# Footer                        #
####################################################
*/

#partenaires > img{
    width: 15em;
}


footer{
    background-color: var(--clr-blanc);
    border-top:solid var(--clr-noir) 1.3px;
}

#footer-links{
    margin-top: 4rem;
}

footer >div>div> a + a{
    margin-top: 0.7rem;
    
}

footer >div>div> a{
    color:var(--clr-noir);
}

footer>div>p{
    margin-top: 2rem;
}


/*
####################################################
# Burger menu                       #
####################################################
*/
#burger-menu{
    position: fixed;
    display: none;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    font-size:1rem;
}

#burger-menu>button{
    background:var(--clr-noir);
    
    padding: 0.3em 1em;
    
    border:none;
    box-shadow: none;
    border-radius: 2rem;
    
    cursor: pointer;
    

    font-size: 3em;
    font-weight: 300;
    color: rgba(244, 241, 222,100%);
    transition: all 0.7s;
}


#burger-menu>button>object{
    width: 7rem;
}

#burger-modal{
    position: fixed;
    display:none;
    justify-content: center;
    align-items: center;
    top: 0;
    bottom:0;
    left:0;
    right: 0;
    background:rgba(0, 0, 0, 0.7);
    z-index:39;
}

#burger-modal > div > a{
    font-family: var(--ft-secondaire);
    color: var(--clr-blanc);
    font-size: 2rem;
    text-align: center;
}

#burger-modal > div > a+a{
    margin-top:1rem;
}


/*
####################################################
# Actualite Model                     #
####################################################
*/

#article-image {
    width: 100%;
    max-width: 50em;
    height: 30em;
    background-image: url('/data/img/paysage.jpg');
    background-size: cover;
    background-position: center;
    margin: auto;
}

#article-titre{
    width: 100%;
    max-width: 50rem;
    margin: auto;
    margin-top: 1rem;
    font-size: 3em;
    font-family: var(--ft-secondaire);
}
#article-texte{
    width: 100%;
    max-width: 50rem;
    margin: auto;
    margin-top: 0.5rem;
    text-align: justify;
}

#article-date{
    margin-top: 2rem;
}

#article>p+div{
    margin-top:0.6rem;
}


/*
####################################################
# Activite Model                     #
####################################################
*/


#activite #chemin{
    text-align: left;
    margin-bottom: 4rem;
}
#activite>header{
    margin-bottom: 7rem;
}
#activite>header>h1{
    margin-top: 2rem;
}
#activite>header+div{
    margin:auto;
    margin-bottom: 8rem;
    flex-wrap: wrap;
    justify-content: center;
}
#activite>header+div>div{
    margin-bottom: 2rem;
}
#activite>header+div>div>object{
    width: 7rem;
}

#acitivite-description > h4
{
    font-weight: 500;
    font-size: 2em;
    margin-bottom: 0.5em;
    
}

#acitivite-description > p{
    margin: auto;
    text-align: justify;
    width: 40em;

}

li
{
    list-style: none;
}

.professeurs
{
    margin-left: 0;
    margin-right: auto;
    margin-top: 8em;
}

.professeurs > h2
{
    text-align: center;
    margin-bottom: 0.5em;
    font-size: 1.9em;
    font-weight: 500;
}

.professeurs > ul > li + li 
{
    margin-top : 1em;
}


.professeur::after
{
    content:'';
    position: absolute;

    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba( 244, 241, 222, 0.25 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    filter: grayscale(50%);
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
    z-index : 0;
}
.professeur
{
    display: flex;
    position: relative;
    flex-direction: row;
    column-gap: 2em;
    
    width: 25em;

    padding: 1em;
    margin: auto;

    text-align: left;
}



.professeur > img
{
    width: 7em;
    height: 7em;

    object-fit: cover;

    padding: 3px;
    border-radius: 100%;

    z-index:1;


}

.professeur > div > h1
{
    color : var(--clr-noir);
    font-weight: 600;
}

.professeur > div 
{
    align-self: center;
    flex:2;
    z-index: 1;
}


.reseaux
{
    margin-top: 0.5em;
}
.reseaux > a > i
{
    font-size: 1.2em;
    color: var(--clr-noir);
}

.reseaux > a + a
{
    margin-left: 1em;
}

#activite-img{
    height: 17em;
    width: 17em;
    background: var(--clr-blanc);
    border:solid var(--clr-blanc) 1rem;
    border-radius: 50%;
    object-fit: cover;
}



#activite #photos{
    margin-top: 8rem;
    width: 100%;
}

#activite #photos > h4{
    font-weight: 500;
    font-size: 2em;
    margin-bottom: 0.5em;
}



#activite #photos>div{
    width: 80%;
    display: flex;
    column-gap: 1rem;
    margin: auto;
   
}
#activite #photos>div>div{
    flex:1;
    row-gap: 1rem;
}

#activite #photos>div>div>img{
    width: 100%;
}


#activites-liste > li > a > object,
.activite-card-dessin > object
{
	width: 30em;
	pointer-events: none;
}

.activite-card-dessin,
#activites-liste > li > a 
{

	display: block;
	text-decoration: none;
}

.a-activite-card-none
{
	align-self: end;
}

.activite-card-none
{

	position: relative;
	width: 27em;
	height: 8em;
	background-color: #DEF6CA;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 1em;
}

.logo-card
{
	width:30em;
}
.activite-card-none::before
{

	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	content:'';
	z-index:1;
	background-color:#DEF6CA;
	border-radius: 1em;
}

.activite-card-none::after
{

	position:absolute;
	content: '';
	z-index:0;
	width:100%;
	height: 100%;
	left: -0.3em;
	bottom: -0.3em;
	background-color: #BBD6A6;
	border-radius: 1em;

}

.activite-card-none > h2
{
	font-family: var(--ft-secondaire);
	z-index:1;
	font-size: 1.8em;
	font-weight: 500;
	text-align:center;
}

/*
####################################################
# Page Infos                   #
####################################################
*/

#infos > h2{
    margin-bottom: 1rem;
    font-family: var(--ft-secondaire);
}

#infos> p+h2{
    margin-top: 2rem;
}

#infos> p+p{
    margin-top: 0.6rem;
}

#infos p{
    width: 70%;
    text-align: justify;
    color: #505050;
}

#infos>h3+h2{
    margin-top: 2rem;
}



/*
####################################################
# Media queries                      #
####################################################
*/
@media (max-height: 480px){
    .modal{
        font-size: 10px;
    }
    .modal-card{
        height: 100%;
        width: 90%;
    }

    #acitivite-description > p
    {
        width: 95%;
    }
}







@media (max-width:790px){
    html,
    body{
        font-size: 11px;
    }
    
}

@media (max-width:600px){

    #bienvenue,
    #top-activites{
        flex-direction: column;
        text-align: center;
    }

    #text-illustration > div +div{
        display: none;
    }

    #coordonnees{
        text-align: center;
    }

    #coordonnees form{
        text-align: left;
    }

    .container{
        padding: 0rem 1rem;
    }

    #acitivite-description > p
    {
        width: 95%;
    }
}

@media (max-width:480px){
    html,
    body{
        font-size: 10px;
    }

    #burger-menu{
        display: block;
    }
    #menu{
        display: none;
    }
    .professeur{
        width: 90%;
    }

    #acitivite-description > p
    {
        width: 95%!important;
    }

    
}

@media (max-width:315px){
    html,
    body{
        font-size: 7px;
    }

    #acitivite-description > p
    {
        width: 95%!important;
    }
}