* {padding: 0; margin: 0;}



/** font **/

@font-face {
  font-family: 'milordregular';
  src: url('font/milord-webfont.woff2') format('woff2'),
       url('font/milord-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}




@font-face {
  font-family: 'milord_bookitalic';
  src: url('font/milordbook-italic-webfont.woff2') format('woff2'),
       url('font/milordbook-italic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}




@font-face {
  font-family: 'milord_bookregular';
  src: url('font/milordbook-webfont.woff2') format('woff2'),
       url('font/milordbook-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}




@font-face {
  font-family: 'milorditalic';
  src: url('font/milord-italic-webfont.woff2') format('woff2'),
       url('font/milord-italic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
    font-family: 'cafe24_decoschoolregular';
    src: url('font/decoschool-webfont.woff2') format('woff2'),
         url('font/decoschool-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}



div.logo img {
  width: 200px;
  height: auto;
  
  }

.flex-container  {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #a093c2;
}

.logo {
  margin: 10px;
}


    .logo, .navigation {
        list-style: none;
        text-transform: uppercase;
    }

    .logo a, .navigation a {
        text-decoration: none;
        letter-spacing: .45rem;
    }

.navigation  {
  display: flex;
}

.navigation a {
  display: block;
  padding: 1em;
  color: white;
}

.navigation a:hover {
    background: #d4c8f3;
}
.menu-deroulant {

  display: none;
  background-color: #7964af;

  }
  
  #titre{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 45px;


  }

  .deroulant {
  list-style: none;
  
  }
  .article-presentation {
font-size: 15px;

  }
  h5.article {
    font-size: 24px;

  }
  .auteur {
margin-top: 30px;
margin-bottom: 20px;
padding-top: 30px;
padding-bottom: 30px;

  }
.red {
    color: red;
    text-align: center;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    font-size: 35px;
    
    margin-bottom: 10px;
    margin-top: 10px;

  }
 
  .deroulant:hover ul {
    
    display: block;
    list-style-type: none;
    position: absolute;
    z-index: 1000;
    
  }
  
#contact {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    margin-top: 30px;
    height: 250px;
    width: 400px;
    list-style-type: none;
    overflow: hidden;
    background-color: #a093c2;
    border-radius: 20px;
    box-shadow: 5px 5px 0 0 ;
    text-align: center;
    padding: 20px;
}
.txt {

  text-align: center;
}

h1, h2 {

  text-align: center;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 35px;
  margin-bottom: 10px;
  margin-top: 20px;


}



.tt h2{
  text-align: center;
  font-family:'milorditalic', sans-serif;
  font-size: 45px;
  text-transform: uppercase;
  margin-bottom: 10px;
  margin-top: 20px;


}
h3{
  margin-top: 60px;
  text-align: center;
  margin:  20px 0 20px 0;
  font-size: 35px;
  font-family: 'milorditalic', sans-serif;
  text-transform: uppercase;
  margin-top: 40px;
}
h4 {
  text-align: center;
  margin:  20px 0 20px 0;
  font-size: 20px;
  font-family: 'cafe24_decoschoolregular', sans-serif;

}
h5 {
  text-align: center;
  
  font-size: 20px;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

}
h5.val {
font-size: 17px;



}
p {
 
    
    text-align: justify;
    
    
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
footer {
  display:flex;
  align-items: center;
  margin-top: 20px;
  justify-content: center;
  
  
    }
  footer p {
    text-align: center;
    font-size: 15px;
    }

.ln {
  width: 100px;
  height: auto;
  align-items: center;
  justify-content: center;

}
.rs img {
margin-right: 30px;
margin-left: 30px;
margin-top: 20px;
align-items: center;
width: 60px;
height: auto;

}


/** slider **/

.slider {
    border-radius: 0.5rem;
    width: 1000px;
    height: 300px;
    overflow: hidden;
    margin: 50px auto;
}
.slides {
    width: calc(1000px * 12);
    animation: glisse 30s infinite;
}
.slide {
    float: left;
}
@keyframes glisse {
    0% {
        transform: translateX(0);
    }
    12% {
        transform: translateX(-500px);
    }
    20% {
        transform: translateX(-1000px);
    }
    28% {
        transform: translateX(-1500px);
    }
    36% {
        transform: translateX(-2000px);
    }
    44% {
        transform: translateX(-2500px);
    }
    52% {
        transform: translateX(-3000px);
    }
   60% {
        transform: translateX(-3500px);
    }
    68% {
        transform: translateX(-4000px);
    }
    76% {
        transform: translateX(-4500px);
    }
    84% {
        transform: translateX(-5000px);
    }
    92% {
        transform: translateX(-5500px);
    }
    
    100% {
        transform: translateX(0);
    }
}

/** acceuil **/


.wrapper-acc {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.card-acc {
  overflow: hidden;
  box-shadow: 0px 2px 20px var(--clr-gray-light);
  background: white;
  border-radius: 0.5rem;
  position: relative;
  width: 450px;
  margin: 1rem;
  transition: 250ms all ease-in-out;
  cursor: pointer;
  height: 440px;
}
.txtt  {
max-width: 80%;
text-align: left;
margin-left: auto;
margin-right: auto;
}

.card-acc:hover {
  transform: scale(1.05);
  box-shadow: 0px 2px 40px var(--clr-gray-light);
}

.banner-img-acc {
  position: absolute;
  object-fit: cover;
  height: 14rem;
  width: 100%;
}

.category-tag-acc {
  font-size: 0.8rem;
  font-weight: bold;
  color: white;
  background: red;
  padding: 0.5rem 1.3rem 0.5rem 1rem;
  text-transform: uppercase;
  position: absolute;
  z-index: 1;
  top: 1rem;
  border-radius: 0 2rem 2rem 0;
}


.card-body-acc {
  margin: 15rem 1rem 1rem 1rem;
 
}



.blog-title-acc {
  line-height: 1.5rem;
  margin: 1rem 0 0.5rem;
  color: black;
text-decoration: none;
 
}




.enonce-acc  {
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-size: 18px;
  font-style: italic;
  text-decoration: underline;
  margin-bottom: 10px;
  
  }
.profile-img-acc {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 50%;
}

.card-profile-info-acc {
  margin-left: 1rem;
}

.profile-name-acc {
  font-size: 1rem;
}

a:link 
{ 
 text-decoration:none; 
} 


.btn-acc {
  margin-left: auto;
    margin-right: auto;
  align-items: center;
  width: 120px;
  height: 50px;
  border-radius: 10px ;
background-color: #a093c2;
padding-top: 15px;
padding-bottom: 0px;
}
p.acc {
font-size: 15px;
text-align: center;
color: white;

}




/** index-defis **/



.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
/*
.card {
  overflow: hidden;
  box-shadow: 0px 2px 20px var(--clr-gray-light);
  background: white;
  border-radius: 0.5rem;
  position: relative;
  width: 350px;
  margin: 1rem;
  transition: 250ms all ease-in-out;
  cursor: pointer;
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 0px 2px 40px var(--clr-gray-light);
}
*/
.banner-img {
  position: absolute;
  object-fit: cover;
  height: 14rem;
  width: 100%;
}

.category-tag {
  font-size: 0.8rem;
  font-weight: bold;
  color: white;
  background: red;
  padding: 0.5rem 1.3rem 0.5rem 1rem;
  text-transform: uppercase;
  position: absolute;
  z-index: 1;
  top: 1rem;
  border-radius: 0 2rem 2rem 0;
}

.popular {
  background: var(--clr-popular);
}

.technology {
  background: var(--clr-technology);
}

.psychology {
  background: var(--clr-psychology);
}

.card-body {
  margin: 1rem 1rem 1rem 1rem;
}

.blog-hashtag {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--clr-link);
}

.blog-title {
  line-height: 1.5rem;
  margin: 1rem 0 0.5rem;
}

.blog-description {
  color: var(--clr-gray-med);
  font-size: 0.9rem;
}

.card-profile {
  display: flex;
  margin-top: 2rem;
  align-items: center;
  justify-content: center

  
 
  
}

.enonce  {
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-size: 18px;
  font-style: italic;
  text-decoration: underline;
  margin-bottom: 10px;
  
  }
.profile-img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 50%;
}

.card-profile-info {
  margin-left: 1rem;
}

.profile-name {
  font-size: 1rem;
}


.btn-pos {
display: flex;

justify-content: center

}
.btn-defis {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: #D1D1E8;
font-size: 15px;
border-radius: 10px;
background-color: #651fff;
margin: 10px;
margin-top: 20px;
width: 150px;
height: 30px;

}


.instacont {
  margin-top: 10px;
  display: flex;
  justify-content: center;


}
.insta {
  display: flex;
  margin: 20px;
  justify-content: center;
  flex-wrap: wrap;
  
 

}

/** google map **/
.maps{
    height: 300px;
    width: auto;
  }
  .map{
    position: absolute;
  
    left: 50%;
    transform: translate(-50%);
  
  width: 800px ;
  height: 300px;
  

  }
  /** defis litteraires **/
  
  .post-container{
    width: 70%;
    height: 100%;
    margin: 10px auto 0px auto;
    background-color: #fffafa;
  }

  .post-container .post-content{
    width:95%;
    font-family: Open Sans, sans-serif;
    font-weight: normal;
    text-align: justify;
    text-justify: inter-word;
  }
  .post-container .post {
    margin-left: 0px;
    padding-top: 20px;
    padding-left: 50px;
    
  }
 .tt-defis h1{
  font-size: 30px;


 }
h5 {
  font-style: italic;
}

.auteur {
display: flex;
align-items: center;
justify-content: end;
margin-top: 10px;
}

h6 {
font-size: 20px;


}
.photodefis {
max-width: 50px;
max-height: auto;
margin-right: 10px;

}


  /** galerie **/
  


  /** vie scolaire **/
  .tbl {
    display: flex;
    justify-content: center;
  align-items: center;
  }
  
  .tbl img {
max-width: 80%;
max-height: 100%;

  }

/* *********** media queries *********** */
@media all and (max-width: 1016px) {
  .flex-container {
    flex-direction: column;
  }
  
  .logo {
  margin: 0;
}
  
  .navigation  {
    width: 100%;
    justify-content: space-around;
  }
        /** slider 1016px **/
  .slider {
    width: 500px;
    height: 300px;
    overflow: hidden;
    margin: 50px auto;
}
.slides {
    width: calc(500px * 12);
    animation: glisse 30s infinite;
}
.logo-blanc{
align-self: center;
margin-bottom: 0;
}



}

@media all and (max-width: 810px) {
  h1, h2 {
    font-size: 30px;
    margin-top: 10px;
    margin-bottom: 15px;
    margin-left: 5px;
    margin-right: 5px;
  }
  .tt h2{
    text-align: center;
    font-family:'milorditalic', sans-serif;
    font-size: 30px;
    margin-bottom: 10px;
    margin-top: 20px;
  
  
  }
  h3{
    margin-top: 20px;
  }
 /** google map 810px **/
  .map{
  width: 600px ;
  }
  .post-container{
    width: 70%;
    height: 100%;
    margin: 0px auto 0px auto;
    background-color: #fffafa;
  }
  .post-container .date{
    font-family: Roboto, sans-serif;
    color: #008080;
  }
  .post-container .post-content{
    width: 90%;
    font-family: Open Sans, sans-serif;
    font-weight: normal;
  }
  .post-container .post{
    margin-left: 20px;
    padding-top: 20px;
    padding-left: 20px;
  }
/** defis litteraires 810px **/
  
.post-container{
  width: 90%;
  height: 100%;
  margin: 10px auto 0px auto;
  background-color: #fffafa;
}

.post-container .post-content{
  width: 90%;
  font-family: Open Sans, sans-serif;
  font-weight: normal;
}
.post-container .post{
  margin-left: 20px;
  padding-top: 20px;
  padding-left: 20px;
}

/** intégration INSTAGRAM 810px **/

.instacont {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;
 

}
.insta {
  display: flex;
  margin: 20px;
  align-items: center;
  flex-direction: column;
  
 
}




}

/* ****** ****** */
@media all and (max-width: 710px) {
  @media (hover: none) {
    .deroulant  ul  {
      display: block;
      list-style-type: none;
      position: static; /* Remplacez "absolute" par "static" pour les écrans tactiles */
      z-index: 1000;
    }
  }
 


 


  .logo {
    margin: .25em 0;
    align-self: left; /* align the logo to the left side of 'flex-container' */
}
  
  .navigation {
    flex-direction: column;
  }
  
  .navigation a { 
    text-align: center; 
    padding: 10px;
    border-top: 1px solid rgba(255,255,255,0.3); 
    border-bottom: 1px solid rgba(0,0,0,0.1); 
  }
  
  .navigation li:last-of-type a {
    border-bottom: none;
  }


/** google map 700px **/

  .map{
  width: 500px ;
  }

  /** slider 700px **/
  .slider {
    margin: 20px auto;
}


}
@media all and (max-width: 700px) {

}
@media all and (max-width: 500px) {

  .tt h2{
    text-align: center;
    font-family:'milorditalic', sans-serif;
    font-size: 20px;
    margin-bottom: 5px;
    margin-top: 10px;
  
  
  }
  .card-acc {
  
    width: 360px;
  
  }
  
  /** defis litteraires 500px **/
  
.post-container{
  width: 100%;
  height: 100%;
  margin: 10px auto 0px auto;
  background-color: #fffafa;
}

.post-container .post-content{
  width: 100%;
  font-family: Open Sans, sans-serif;
  font-weight: normal;
}
.post-container .post{
  margin-left: 10px;
  margin-right: 10px;
  padding-top: 20px;
  padding-left: 10px;
  
}

  /**                        **/

  h3{
    margin-top: 25px;
  }

.slider {
  width: 400px;
  height: 240px;
  overflow: hidden;
  margin: 20px auto;
}
.slides {
  width: calc(400px * 12);
  animation: glisse 30s infinite;

}
#contact {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  height: 310px;
  width: 350px;
  list-style-type: none;
  overflow: hidden;
  background-color: #a093c2;
  border-radius: 20px;
  box-shadow: 5px 5px 0 0 ;
  text-align: center;
  padding: 20px;
}


.map{
  width: 350px ;
  }

}
@media all and (max-width: 400px) {

.card-acc {
  
  width: 300px;

}

#contact {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    height: 310px;
    width: 300px;
    list-style-type: none;
    overflow: hidden;
    background-color: #a093c2;
    border-radius: 20px;
    box-shadow: 5px 5px 0 0 ;
    text-align: center;
    padding: 20px;
  }
  @keyframes glisse {
    0% {
        transform: translateX(0);
    }
    12% {
        transform: translateX(-300px);
    }
    20% {
        transform: translateX(-600px);
    }
    28% {
        transform: translateX(-900px);
    }
    36% {
        transform: translateX(-1200px);
    }
    44% {
        transform: translateX(-1500px);
    }
    52% {
        transform: translateX(-1800px);
    }
   60% {
        transform: translateX(-2100px);
    }
    68% {
        transform: translateX(-2400px);
    }
    76% {
        transform: translateX(-2700px);
    }
    84% {
        transform: translateX(-3000px);
    }
    92% {
        transform: translateX(-3300px);
    }
    
    100% {
        transform: translateX(0);
    }
}
  .slider {
    width: 300px;
    height: 180px;
    overflow: hidden;
    margin: 10px auto;
  }
  .slider img {

  max-width:300px;
	max-height:180px;

  }
  .slides {
    width: calc(300px * 12);
    animation: glisse 30s infinite;
  
  }



#contact {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  height: 310px;
  width: 300px;
  list-style-type: none;
  overflow: hidden;
  background-color: #a093c2;
  border-radius: 20px;
  box-shadow: 5px 5px 0 0 ;
  text-align: center;
  padding: 20px;
}

.tt h2{
  text-align: center;
  font-family:'milorditalic', sans-serif;
  font-size: 20px;

  margin-bottom: 5px;
  margin-top: 10px;


}

}