@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

* {
  margin: 0;
  padding: 0;
 
}

/* html {
  width: 100%;
} */

:root {
  --innovation-bg-image: url(../img/home/cube/innovation.jpg);
  --innovation-bg-color: hsl(52, 92%, 58%);
  --special_orange: #ff6e01;
  --special_turquoise: #02e7d0;
  --special_orange_faded: #ff6e0188;
  --special_turquoise_faded: #02e7d088;
}

/**************************** Variable CSS Thèmes Clair/Sombre ****************************/
body {
  --body_bkg-color: #f0f0f0;
  --block_bkg-color: #ffffff;
  --block_border-color: #333;
  --auteur_color-text: black;
  --social-text-color: #494949;
  --separateur_color: #bebebe;
  --transparente_input: rgb(255, 110, 1, 0.5);
  --input_color: #ff6e01;
  --btn_edit-text: #464646;
  --shadow-color: #888;
  --side-menu-color: #f0f0f0cc;
  --border_color: #dee1e9;

}
body.dark-theme {
  --body_bkg-color: #1f2327;
  --block_bkg-color: #40648c;
  --block_border-color: #ccc;
  --auteur_color-text: white;
  --social-text-color: #cccccc;
  --separateur_color: #bebebe;
  --transparente_input: rgb(2, 231, 208, 0.5);
  --input_color: #02e7d0;
  --btn_edit-text: #c4cbd4;
  --shadow-color: #000;
  --side-menu-color: #1f2327cc;
  --border_color: #131313;
}

/**************************** social network ****************************/

/* .body {
  background-color: var(--body_bkg-color);
  width: 100%;
} */

a {
  color: var(--social-text-color);
}

.card, .cardoffre {
  background-color: var(--block_bkg-color);
  border-color: var(--border_color);
}

.card_social_articles_body {
  background-color: var(--block_bkg-color);
  border-color: var(--border_color);
}

.postform-textarea {
  background-color: var(--side-menu-color);
  border-color: var(--border_color);
  color: var(--social-text-color);
}

.card-body_contentshare{
  background-color: var(--block_bkg-color);
  color: var(--social-text-color);
}

/* navbar social */

#navFooter {
  transition: opacity 0.5s ease;
}

.social_nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.fixed-bottom .social_nav:hover {
  color: var(--social-text-color);
  background: none;
}

/* .social_nav i {
  font-size: 30px;
} */

.nav-bar-profil-link {
  display: flex;
  flex-direction: column;
  text-align: center;
}

#profile_pic_navbar {
  width: 30px;
  height: 30px;
  margin-left: 10px;
  border-radius: 50%;
  object-fit: cover;
}

/* Version mobile menu Gil */
/* .header{
  display: none;
} */

.mobilheader{
  bottom: -2em;
  width: 100%;
  height: 1em;
  color: var(--social-text-color);
  background-color: var(--block_bkg-color);
  display: flex;
  z-index: 1;
}

.flex-options{
  
  position: absolute;

  right: 0px;
  bottom: .2em;
  width: 84%;
  max-height:2.5em;
  display: flex;
  justify-content: start;

  padding: 0;
  background-color:#0000;
}

.flex-options>a>i:first-child{
  margin-left: -.2em;
}

.social_mobil_nav, .dropdown-menu{
  background-color: var(--block_bkg-color);
  border: solid .1em var(--block_border-color);
  padding: 0%;
}

.social_mobil_nav_collapse>ul>li:first-child{
  margin-top: .5em;

} 

.nav-item>a, .dropdown-menu>li>a, .mode-icon{
  color: var(--auteur_color-text);
}

.mode-icon{
  font-weight: 500;
  font-family: sans-serif;
}

/* .nav-item>a:hover, .mode-icon:hover{
  color: #26f;
} */

/* .navbar-toggler{
 width: 16%;
 padding: 0;
}

.navbar-toggler>img{
  width: 100%;
  margin: 0;
} */

/* section ajout de publication */
.card-post-entete {
  background-color: var(--block_bkg-color);
  position: relative;
  margin: 65px 0 10px 0;
  width: 100%;
  border-radius: 5px;
  border-bottom: solid;
  border-color: var(--border_color);
  border-width: 1px;
  padding-bottom: 20px;
}
.accueil_entete {
  display: flex;
  flex-direction: row-reverse;
  /* margin-left: 5px;
  margin-right: 5px; */
  justify-content: center;
}
.ajout_post {
  display: flex;
  /* margin: auto; */
  flex-direction: row;
  align-items: center;
}

.btn_ajout_embellir {
  /* background-color: var(--block_bkg-color); */
  color: var(--social-text-color);
}

.img_banner > img {
  width: 100%;
  height: 170px;
  margin-bottom: -50px;
  border-radius: 5px 5px 0 0;
  object-fit: cover;
  border-color: var(--body_bkg-color);
}
.social_articles {
  display: block;
  position: sticky;
}
.profile_entete {
  border: #bebebe solid 1px;
  border-radius: 5px;
  padding: 5px;
}

.header_job {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: -30px;
  margin-bottom: 15px;
}

#profile_pic {
  width: 100px;
  height: 100px;
  margin-left: 10px;
  border-width: 3px;
  border-radius: 50%;
  border: solid;
  border-color: var(--body_bkg-color);
  object-fit: cover;
}

#profile_pic_publi {
  width: 50px;
  height: 50px;
  margin-left: 10px;
  border-width: 3px;
  border-radius: 50%;
  border: solid;
  border-color: var(--body_bkg-color);
  object-fit: cover;
}

.post {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
}

.btn-publication {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.embellir {
  text-align: center;
}

.winning_bar {
  display: flex;
  flex-direction: column;
  background-color: var(--block_bkg-color);
  /* margin: auto; */
  text-align: center;
  padding: 10px;
}

.dropdown-postAccueil {
  width: auto;
}

/* section affichage publication */
.list_item_pole1 {
  /*  LES COULEURS DU CUBE */
  background: linear-gradient(-45deg, var(--block_bkg-color) 90%, #2172b3);
}
.list_icon_pole1 {
  /*  LES COULEURS DU CUBE */
  color: #2172b3;
}
.list_border_pole1 {
  /*  LES COULEURS DU CUBE */
  border-color: #2172b3;
}
.list_item_pole2 {
  background: linear-gradient(-45deg, var(--block_bkg-color) 90%, #f18a2e);
}
.list_icon_pole2 {
  color: #f18a2e;
}
.list_border_pole2 {
  /*  LES COULEURS DU CUBE */
  border-color: #f18a2e;
}
.list_item_pole3 {
  background: linear-gradient(-45deg, var(--block_bkg-color) 90%, #e9545a);
}
.list_icon_pole3 {
  color: #e9545a;
}
.list_border_pole3 {
  /*  LES COULEURS DU CUBE */
  border-color: #e9545a;
}
.list_item_pole4 {
  background: linear-gradient(-45deg, var(--block_bkg-color) 90%, #6eb75b);
}
.list_icon_pole4 {
  color: #6eb75b;
}
.list_border_pole4 {
  /*  LES COULEURS DU CUBE */
  border-color: #6eb75b;
}
.list_item_pole5 {
  background: linear-gradient(-45deg, var(--block_bkg-color) 90%, #7e5da4);
}
.list_icon_pole5 {
  color: #7e5da4;
}
.list_border_pole5 {
  /*  LES COULEURS DU CUBE */
  border-color: #7e5da4;
}
.list_item_pole6 {
  background: linear-gradient(-45deg, var(--block_bkg-color) 90%, #fecb3a);
}
.list_icon_pole6 {
  color: #fecb3a;
}
.list_border_pole6 {
  /*  LES COULEURS DU CUBE */
  border-color: #fecb3a;
}

.btn_modif_publi {
  margin-right: 1.5em;
  display: flex;
  /* margin: auto; */
}

.card-header>a {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

/* message flash publication (success) */
/* .social_flash_message h1 {
  background-image: linear-gradient(
    -135deg,
    var(--special_turquoise_faded) 50%,
    var(--special_orange_faded) 50%
  );
  border: 0.1em solid #0000;
  color: var(--social-text-color);
  border-radius: 5px;
  text-align: center;
  font-size: 20px;
  margin: 5px;
} */

/* modal d'edition des publications */
.modal_form_hidden {
  display: none;
}

.modal_footer_publi {
  display: flex;
  justify-content: space-around;
}

/* header*/
.carousel-img {
  height: 400px;
  object-fit: cover;
}

/*footer*/
.post_footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.post_footer_option {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.article__reaction-button {
  margin-right: 1em;
}

/* section article et evenement */

.event_article {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: 16px;
  padding: 8px;
}

/* section actu et footer (right_aside_accueil) */

.left_aside_accueil {
  display: flex;
  flex-direction: column;
  position: relative;
}

.sticky_div {
  position: sticky;
  top: 80px;
}

.card_footer_header {
  background-color: #3f628d;
  text-align: center;
}

.card_footer_body {
  background-color: #3f628d;
}

.card_footer_footer {
  text-align: center;
  background-color: #3f628d;
}

.postCommentNumber {
  font-size: 14.5px;
  display: flex;
}

/* page commentaire */
.accueil_Comment {
  display: flex;
}

.commentForm-offcanvas {
  bottom: -85px;
}

.reponse_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.comment-tree {
  position: relative;
}

.comment-reply:before {
  content: "";
  position: absolute;
  border: 1px solid #ccc;
  border-top: none;
  border-right: none;
  width: 20px;
  height: 20px;
  /* transform: rotate(45deg); */
  top: 15px;
  left: -25px;
}

.comment-tree > li:first-child .comment-reply:before {
  top: -15%;
  height: calc(100% + 0px);
}
.comment_content {
  width: 85%;
}

.comment-content-btn-rep {
  /* position: absolute; */
  width: 95%;
  display: flex;
  justify-content: space-around;
}

.btn-reponse {
  position: absolute;
  display: block;
  margin-right: -95%;
  /* align-items: center; */
}

.btn_post_comment_edit {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.btn_post_comment_edit>span {
  margin-left: 20px;
}

/* ---------------------page de validation RGPD----------------*/
.checkRGPD {
  display: flex;
  flex-direction: row;
}

/* boutons "mes discussions" */

/* .btn_messagerie_chat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  width: 19.5em;
  background-color: var(--block_bkg-color);
  color: var(--social-text-color);
  border-radius: 5px;
  padding: 10px;
  top: 50%;
  left: -17em;
  border-top: 0.1em solid var(--special_turquoise);
  border-right: 0.1em solid var(--special_orange);
  border-bottom: 0.1em solid var(--special_orange);
  border-left: 0.1em solid var(--special_turquoise);
  transition: 1s ease-in-out;
} */

.btn_messagerie_chat:hover {
  transform: translate(17.5em);
  justify-content: space-around;
}

.offcanvas_mesdiscussions {
  display: flex;
  text-align: center;
  background-color: var(--block_bkg-color);
}

/* formulaire signalement commentaire et publication (a venir)*/
/* .modal_footer_signalement {
  display: flex;
} */

.btn_modal_footer_signalement {
  display: flex;
  justify-content: space-around;
}

/* media queries */

/* Version mobile menu Gil */
/* @media screen and (min-width:768px){
  .header{
     display: block;
  }
  
  .mobilheader{
     display: none;
  }
} */

@media screen and (max-width: 767px) {
  /*breackpoint small 767 pixels */

/* -------------page d'accueil (index.html.twig)------------------- */
  .left_aside_accueil {
    display: none;
  }
  .container-social-accueil {
    width: 100%;
  }

  .carousel-accueil-publication {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .accueil_entete {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .card-post-entete {
    width: 100%;
  }

  .header_job {
    display: block;
    text-align: center;
    margin-top: 10px;
  }

  .btn-dropdown-postaccueil {
    display: flex;
    align-items: center;
  }

  /* .btn_messagerie_chat {
    bottom: 73em;
    left: -17em;
  } */

  .card-header>a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
  }

  .post_footer{
    flex-direction: column;
  }

  .post_footer_option {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    margin-left: 30px;
  }

  .btn_modif_publi {
    margin-right: 40px;
  }

  .article__reaction-button {
    flex-direction: column;
    margin: 0px 40px;
    align-items: center;
  }

  .label_option {
    display: none;
  }
  
  /* -------------page commentaire (comment.html.twig)------------------- */

  .btn_post_comment_edit {
    margin-top: 10px;
  }
}

@media screen and (max-width: 992px) {
  /*breackpoint max medium 992 pixels */
  .left_aside_accueil {
    display: none;
  }
}