/* ===================================== Import Less ================================== */
@font-face {
  font-family: 'mouse-300';
  src: url("../fonts/museoslab300-webfont.ttf") format("truetype"); }
@font-face {
  font-family: 'mouse-500';
  src: url("../fonts/Museo_Slab_500italic.otf") format("truetype"); }
.btn-xs {
  padding: .25rem .4rem;
  font-size: .875rem;
  line-height: .5;
  border-radius: .2rem; }
  .btn-xs i {
    font-size: 12px; }
	
	

/* ===================================== Basic CSS ================================== */

.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}

/*

* {
  margin: 0px;
  padding: 0px;
  list-style: none; }

img {
  max-width: 100%; }

a {
  text-decoration: none;
  outline: none;
  color: #444; }

a:hover {
  color: #444; }

.doted ul {
  margin-bottom: 0;
  padding-left: 0; }

a:hover,
a:focus,
input,
textarea {
  text-decoration: none;
  outline: none; }

.center {
  text-align: center; }

.left {
  text-align: left; }

.right {
  text-align: right; }

.cp {
  cursor: pointer; }

html, body {
  height: 100%; }

p {
  margin-bottom: 0px;
  width: 100%; }

.no-padding {
  padding: 0px; }

.no-margin {
  margin: 0px; }

.hid {
  display: none; }

.top-mar {
  margin-top: 15px; }

.h-100 {
  height: 100%; }

::placeholder {
  color: #747f8a !important;
  font-size: 13px;
  opacity: .5 !important; }

.container-fluid {
  padding: 0px; }

h1, h2, h3, h4, h5, h6 {
  font-family: "mouse-500", Arial, Helvetica, sans-serif; }

strong {
  font-family: "mouse-500", Arial, Helvetica, sans-serif; }
  

body {
  background-color: #f7f7ff !important;
  font-family: "mouse-300", Arial, Helvetica, sans-serif;
  color: #373737;
  
  width: 100%;
  overflow-x: hidden; 

  }
  
 */ 
 
h1 {
  /* Extra small devices (phones, less than 768px) */
  font-size: 16px;

  /* Small devices (tablets, 768px and up) */
  @media (min-width: 768px) {
    font-size: 25px;
  }

  /* Medium devices (desktops, 992px and up) */
  @media (min-width: 992px) {
    font-size: 30px;
  }

  /* Large devices (large desktops, 1200px and up) */
  @media (min-width: 1200px) {
    font-size: 30px;
  }
}

body {
  background-color: #f7f7ff !important;

  }
  
.page-title {
  padding: 30px;
  margin: 0px;
  padding-top: 10px; }
  .page-title h2 {
    width: 100%;
    text-align: center; }
  .page-title p {
    width: 100%;
    text-align: center; }
    .page-title p i {
      width: 60px;
      text-align: center; }

.session-title {
  padding: 30px;
  margin: 0px; }
  .session-title h2 {
    width: 100%;
    text-align: center; }
  .session-title p {
    max-width: 850px;
    text-align: center;
    float: none;
    margin: auto; }
  .session-title span {
    float: right;
    font-style: italic; }

.inner-title {
  padding: 20px;
  padding-left: 0px; }
  .inner-title h2 {
    text-align: left;
    font-size: 1.5rem; }

/*
.btn-success {
  background-color: #b5316a;
  border-color: #b5316a; }
  .btn-success:hover {
    background-color: #b5316a !important;
    border-color: #b5316a !important; }
  .btn-success:active {
    background-color: #b5316a !important;
    border-color: #b5316a !important; }
  .btn-success:focus {
    background-color: #b5316a !important;
    border-color: #b5316a !important;
    box-shadow: none !important; }

.btn-info {
  background-color: #00a8df;
  border-color: #00a8df; }
  .btn-info:hover {
    background-color: #00a8df !important;
    border-color: #00a8df !important; }
  .btn-info:active {
    background-color: #00a8df !important;
    border-color: #00a8df !important; }
  .btn-info:focus {
    background-color: #00a8df !important;
    border-color: #00a8df !important;
    box-shadow: none !important; }

.btn {
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  border-radius: 2px; }
*/
.form-control:focus {
  box-shadow: none !important;
  border: 2px solid  #00a8df; }

.btn-light {
  background-color: #FFF;
  color: #3F3F3F; }

@media screen and (max-width: 1199px) {
  .container {
    max-width: 100%; } }
.collapse.show {
  display: block !important; }

.form-row {
  margin-bottom: 20px; }
  .form-row .rit-coln {
    float: right;
    font-weight: 900;
    padding-top: 2px; }
  .form-row label {
    padding-top: 5px; }
  .form-row .form-control {
    background-color: #f7f7ff;
    border-radius: 0px; }

/* ===================================== Header CSS ================================== */
header {
  padding: 10px;
  background-color: #FFF;
  box-shadow: 0 2px 3px 0 rgba(218, 218, 253, 0.35), 0 0px 3px 0 rgba(206, 206, 238, 0.35); }
  @media screen and (max-width: 991px) {
    header .sarch-box {
      padding-right: 0px; }
    header i {
      left: -9% !important; }
    header img {
      margin-top: 5px; } }
  @media screen and (max-width: 767px) {
    header #search {
      display: none;
      padding-right: 15px;
      margin-bottom: -15px; }
    header .sarch-box i {
      top: -28px !important;
      left: 96% !important; }
    header img {
      margin-top: 8px; } }
  @media screen and (max-width: 767px) {
    header .sarch-box i {
      left: 94% !important; } }
  @media screen and (max-width: 429px) {
    header img {
      width: 200px;
      margin-top: 10px; }
    header .sarch-box i {
      left: 92% !important; } }
  @media screen and (max-width: 371px) {
    header img {
      margin-top: 3px; }
    header .d-lokj {
      padding: 0px; } }
  header .sarch-box input {
    min-width: 300px;
    width: 80%;
    height: 35px;
    margin-top: 6px;
    border: 1px solid #dadaf1;
    font-size: 15px;
    border-radius: 30px;
    padding: .375rem 2.0rem .375rem .75rem;
    background: #f7f7ff; }
    @media screen and (max-width: 991px) {
      header .sarch-box input {
        width: 250px;
        min-width: 250px; } }
    @media screen and (max-width: 767px) {
      header .sarch-box input {
        width: 100%;
        min-width: 100%; } }
  header .sarch-box i {
    position: relative;
    top: 15px;
    left: -5%;
    color: #000;
    font-size: 14px; }
    @media screen and (max-width: 1127px) {
      header .sarch-box i {
        left: -6%; } }
    @media screen and (max-width: 944px) {
      header .sarch-box i {
        left: -7%; } }
  header .login-btns {
    margin-top: 7px; }
    header .login-btns .btn {
      margin-right: 10px; }
  header .search-box {
    position: absolute;
    display: none;
    width: 72%;
    background-color: #FFF;
    box-shadow: 0 2px 6px 0 rgba(218, 218, 253, 0.65), 0 2px 6px 0 rgba(206, 206, 238, 0.54);
    margin-top: 41px;
    margin-left: -3%; }
    header .search-box ul li {
      padding: 10px;
      border-bottom: 1px solid #CCC; }
      header .search-box ul li h6 {
        font-size: 13px;
        margin-bottom: 0px; }
      header .search-box ul li p {
        font-size: 13px;
        height: 18px;
        overflow: hidden; }

.d-lokj i {
  float: right;
  padding: 16px;
  font-size: 25px; }
  @media screen and (max-width: 371px) {
    .d-lokj i {
      padding: 10px;
      font-size: 22px; } }

.body-content {
  padding: 22px 0px; }

.cat-box {
  box-shadow: 0 2px 3px 0 rgba(218, 218, 253, 0.35), 0 0px 3px 0 rgba(206, 206, 238, 0.35);
  background-color: #FFF;
  border-radius: 3px;
  margin-bottom: 22px; }
  .cat-box h6 {
    padding: 20px;
    margin-bottom: 0px;
    width: 100%; }
    .cat-box h6 i {
      float: right; }
  .cat-box ul li {
    padding: 10px 15px;
    border-top: 1px solid #E6E6E6;
    color: #6A6A6A; }
    .cat-box ul li span {
      float: right;
      background-color: #9E9E9E;
      border-radius: 2px;
      font-size: 12px;
      padding: 6px 8px; }

.forum-status .fs-ro {
  text-align: center;
  border-top: 1px solid #E6E6E6; }
  .forum-status .fs-ro .scc {
    padding: 20px; }
  .forum-status .fs-ro i {
    font-size: 30px;
    color: #A7A7A7; }
  .forum-status .fs-ro p {
    margin-top: 10px;
    font-size: .8rem;
    margin-bottom: 6px; }
  .forum-status .fs-ro b {
    font-size: .9rem;
    color: #444; }
  .forum-status .fs-ro .r-bord {
    border-right: 1px solid #E6E6E6; }

.top-posts .logoo {
  padding: 10px;
  padding-left: 15px;
  padding-right: 7px;
  padding-top: 5px;
  vertical-align: middle; }
  .top-posts .logoo span {
    color: #FFF;
    background-color: #9D9D9D;
    border-radius: 0px; }
    .top-posts .logoo span i {
      position: absolute;
      font-size: 27px;
      color: #9D9D9D;
      margin-top: 12px;
      margin-left: -17px;
      display: none; }

.form-likk li {
  font-size: 0.9rem !important; }

/* ===================================== Post Detail CSS ================================== */
.view-box {
  width: 100%;
  text-align: center;
  padding: 12px;
  font-size: 1.1rem; }

.singl-post-row {
  box-shadow: 0 2px 3px 0 rgba(218, 218, 253, 0.35), 0 0px 3px 0 rgba(206, 206, 238, 0.35);
  background-color: #FFF;
  margin-bottom: 20px; }
  .singl-post-row .post-detail {
    padding: 20px; }
    .singl-post-row .post-detail h2 {
      font-size: 18px; }
    .singl-post-row .post-detail p {
      font-size: 0.9rem;
      text-indent: 10px;
      height: 45px;
      overflow: hidden;
      text-align: justify; }
  .singl-post-row .image-cover {
    padding-left: 25px; }
    .singl-post-row .image-cover img {
      border-radius: 50px;
      width: 110px; }
  .singl-post-row .post-count ul {
    border-left: 1px solid #F1F1F1; }
    .singl-post-row .post-count ul .carfg {
      padding: 10px;
      padding-bottom: 15px; }
    .singl-post-row .post-count ul .scgv {
      font-size: 12px;
      padding: 5px 20px !important; }
      .singl-post-row .post-count ul .scgv i {
        margin-right: 8px;
        padding-top: 3px; }
    .singl-post-row .post-count ul .no-bb {
      border-bottom: 0px; }
    .singl-post-row .post-count ul li {
      padding: 5px;
      border-bottom: 1px solid #F1F1F1; }
      .singl-post-row .post-count ul li span {
        color: #FFF;
        background-color: #9D9D9D;
        float: right;
        border-radius: 2px;
        font-size: 13px;
        font-family: "mouse-500", Arial, Helvetica, sans-serif;
        padding: 6px 8px;
        float: none;
        margin: auto; }
        .singl-post-row .post-count ul li span i {
          position: absolute;
          font-size: 27px;
          color: #9D9D9D;
          margin-top: -5px;
          margin-left: 2px;
          display: none; }
  @media screen and (max-width: 429px) {
    .singl-post-row .post-detail h2 {
      font-size: 15px !important; }
    .singl-post-row .post-detail p {
      height: auto !important;
      font-size: 13px; } }

/* ===================================== Post Detail CSS ================================== */
footer {
  background-color: #FFF;
  margin-top: auto;
  box-shadow: 0 2px 6px 0 rgba(218, 218, 253, 0.65), 0 2px 6px 0 rgba(206, 206, 238, 0.54);
  padding: 5px; }
  footer img {
    width: 81px; }
  footer p {
    padding-top: 16px; }
  footer .foot-sl {
    float: right; }
    footer .foot-sl li {
      float: left;
      padding: 15px; }
  @media screen and (max-width: 429px) {
    footer p {
      padding-top: 5px;
      font-size: 13px; }
    footer .foot-sl {
      float: none;
      margin: auto; } }

/* ===================================== Post Detail CSS ================================== */
.login-model {
  padding-top: 5%; }
  .login-model .modal-content {
    border-radius: 0px; }
    .login-model .modal-content .modal-header {
      padding: 10px;
      padding-left: 20px; }
    .login-model .modal-content .fp {
      float: right;
      font-size: 0.9rem;
      padding-top: 2px;
      color: #00a8df; }

/* ===================================== Post Detail CSS ================================== */
.single-post {
  background-color: #FFF;
  box-shadow: 0 2px 3px 0 rgba(218, 218, 253, 0.35), 0 0px 3px 0 rgba(206, 206, 238, 0.35); }
  .single-post .user-deail {
    width: 100%;
    padding: 10px; }
    .single-post .user-deail .user-image img {
      border-radius: 50px;
      width: 80px; }
    .single-post .user-deail .user-name {
      padding-left: 15px; }
    .single-post .user-deail .timing {
      float: right;
      width: 200px;
      text-align: center; }
  .single-post .post-detail {
    border-top: 1px solid #E5E5E5;
    padding: 20px; }
    .single-post .post-detail h2 {
      font-size: 22px;
      margin-bottom: 13px; }
    .single-post .post-detail p {
      font-size: 15px;
      text-align: justify;
      text-indent: 20px; }
  .single-post .img-det {
    padding: 0px 20px;
    padding-bottom: 20px;
    text-align: center; }
  .single-post .lik-detail {
    width: 100%;
    border-top: 1px solid #E5E5E5; }
    .single-post .lik-detail ul {
      float: right;
      margin-right: 15px; }
      .single-post .lik-detail ul li {
        float: left;
        padding: 10px 20px; }
        .single-post .lik-detail ul li i {
          margin-right: 3px; }

/* =====================================  Reply Secton CSS ================================== */
.replay-btn {
  padding: 15px;
  text-align: right; }
  .replay-btn .btn {
    margin-right: -15px; }

.all-replayies {
  background-color: #FFF;
  box-shadow: 0 2px 3px 0 rgba(218, 218, 253, 0.35), 0 0px 3px 0 rgba(206, 206, 238, 0.35); }
  .all-replayies .replay-head {
    font-size: 16px;
    color: #6E6E6E;
    padding: 10px;
    border-bottom: 1px solid #E5E5E5;
    margin-bottom: 0px;
    width: 100%;
    padding-left: 20px; }
  .all-replayies .single-replay {
    border-bottom: 1px solid #E5E5E5; }
    .all-replayies .single-replay .lik-box {
      padding: 25px;
      text-align: center; }
      .all-replayies .single-replay .lik-box i {
        font-size: 32px;
        color: #919191;
        margin-bottom: 10px; }
    .all-replayies .single-replay .message {
      padding: 15px;
      padding-left: 0px; }
      .all-replayies .single-replay .message p {
        font-size: 15px; }
    .all-replayies .single-replay .reply-user-det {
      padding-top: 12px;
      margin-top: 10px;
      border-top: 1px solid #F5F5F5;
      width: 100%;
      font-size: 14px; }
      .all-replayies .single-replay .reply-user-det span {
        float: right; }

/* ===================================== Post Reply CSS ================================== */
.post-replay {
  box-shadow: 0 2px 3px 0 rgba(218, 218, 253, 0.35), 0 0px 3px 0 rgba(206, 206, 238, 0.35);
  background-color: #FFF;
  margin-bottom: 20px; }
  .post-replay .replay-head {
    font-size: 16px;
    color: #6E6E6E;
    padding: 10px;
    border-bottom: 1px solid #E5E5E5;
    margin-bottom: 0px;
    width: 100%;
    padding-left: 20px; }
  .post-replay .replay-text {
    padding: 10px; }
    .post-replay .replay-text .textarea {
      height: 400px; }
    .post-replay .replay-text .note-btn {
      padding: 5px 8px; }
    .post-replay .replay-text .note-fontname {
      display: none; }
  .post-replay .post-replay-btn {
    margin-top: 10px;
    text-align: right; }

/* ===================================== Side menu Profile CSS ================================== */
.profile-cover {
  padding-left: 40px; }
  @media screen and (max-width: 991px) {
    .profile-cover {
      padding-left: 20px; } }
  @media screen and (max-width: 767px) {
    .profile-cover {
      padding-right: 20px !important; } }

.side-menu-profile {
  box-shadow: 0 2px 3px 0 rgba(218, 218, 253, 0.35), 0 0px 3px 0 rgba(206, 206, 238, 0.35);
  background-color: #FFF; }
  .side-menu-profile .profile-cover {
    text-align: center;
    padding: 30px; }
    @media screen and (max-width: 862px) {
      .side-menu-profile .profile-cover {
        padding: 10px; }
        .side-menu-profile .profile-cover h2 {
          font-size: 18px !important; }
        .side-menu-profile .profile-cover img {
          width: 150px !important; } }
    .side-menu-profile .profile-cover img {
      width: 200px;
      border-radius: 50%; }
    .side-menu-profile .profile-cover h2 {
      margin-top: 20px;
      font-size: 22px; }
    .side-menu-profile .profile-cover p {
      font-size: 15px; }
  .side-menu-profile ul li {
    padding: 10px;
    padding-left: 20px;
    border-top: 1px solid #EDEDED; }
    .side-menu-profile ul li i {
      margin-right: 10px; }

/* ===================================== Dashboard Info Card CSS ================================== */
.info-card-row .info-card-single {
  padding: 10px;
  background-color: #FFF;
  box-shadow: 0 2px 3px 0 rgba(218, 218, 253, 0.35), 0 0px 3px 0 rgba(206, 206, 238, 0.35); }
  .info-card-row .info-card-single .count {
    padding: 10px; }
    @media screen and (max-width: 995px) {
      .info-card-row .info-card-single .count {
        padding: 5px; } }
    .info-card-row .info-card-single .count b {
      font-size: 27px; }
      @media screen and (max-width: 995px) {
        .info-card-row .info-card-single .count b {
          font-size: 18px; } }
  .info-card-row .info-card-single .ico-cover {
    padding: 10px; }
    @media screen and (max-width: 995px) {
      .info-card-row .info-card-single .ico-cover {
        padding: 5px; }
        .info-card-row .info-card-single .ico-cover p {
          font-size: 14px; } }
    .info-card-row .info-card-single .ico-cover i {
      font-size: 32px;
      margin-bottom: 10px;
      padding-left: 5%;
      color: #7A7A7A; }
  @media screen and (max-width: 575px) {
    .info-card-row .info-card-single {
      margin-bottom: 20px; } }
@media screen and (max-width: 767px) {
  .info-card-row {
    margin-top: 20px; } }

.cd-titl {
  padding: 20px;
  width: 100%;
  margin-bottom: 0px; }

/* ===================================== My Post CSS ================================== */
.mypost-cover .my-post {
  background-color: #FFF;
  box-shadow: 0 2px 3px 0 rgba(218, 218, 253, 0.35), 0 0px 3px 0 rgba(206, 206, 238, 0.35);
  margin-bottom: 20px; }
  .mypost-cover .my-post .post-h4 {
    padding: 10px;
    border-bottom: 1px solid #F2F2F2; }
    .mypost-cover .my-post .post-h4 h4 {
      height: 46px;
      overflow: hidden;
      font-size: 18px;
      margin-bottom: 0px; }
  .mypost-cover .my-post .post-des {
    padding: 10px;
    font-size: 14px;
    text-align: justify;
    height: 180px;
    overflow: hidden; }
    @media screen and (max-width: 767px) {
      .mypost-cover .my-post .post-des {
        height: 77px; } }
    @media screen and (max-width: 470px) {
      .mypost-cover .my-post .post-des {
        height: 180px; } }
  .mypost-cover .my-post .reply {
    height: 80px; }
  .mypost-cover .my-post .my-icons {
    border-top: 1px solid #F3F3F3;
    margin-top: 5px; }
    .mypost-cover .my-post .my-icons ul {
      width: 100%; }
      .mypost-cover .my-post .my-icons ul li {
        padding: 10px 20px;
        float: right; }
        .mypost-cover .my-post .my-icons ul li .heart {
          color: #e83e8c;
          font-size: 13px;
          margin-right: 5px; }
        .mypost-cover .my-post .my-icons ul li .reply-color {
          color: #9D9D9D;
          font-size: 13px;
          margin-right: 4px; }

/* ===================================== Settings Profile CSS ================================== */
.settincard {
  background-color: #FFF;
  padding: 0px;
  float: none;
  margin: auto;
  margin-top: 100px;
  box-shadow: 0 2px 3px 0 rgba(218, 218, 253, 0.35), 0 0px 3px 0 rgba(206, 206, 238, 0.35); }
  @media screen and (max-width: 767px) {
    .settincard {
      margin-top: 20px; } }
  .settincard .tab-content {
    padding: 15px;
    padding-top: 25px; }

@media screen and (max-width: 767px) {
  .gff {
    padding: 0px;
    margin-top: 20px; } }
.pagination {
  box-shadow: 0 2px 3px 0 rgba(218, 218, 253, 0.35), 0 0px 3px 0 rgba(206, 206, 238, 0.35); }
  .pagination li {
    font-size: 14px; }

/* ===================================== Add Post CSS ================================== */
.app-post-cont {
  float: none;
  margin: auto;
  background-color: #FFF;
  box-shadow: 0 2px 3px 0 rgba(218, 218, 253, 0.35), 0 0px 3px 0 rgba(206, 206, 238, 0.35);
  padding: 20px;
  padding-top: 40px; }

/*# sourceMappingURL=style.css.map */

.classname {
	background-color:#44c767;
	border-radius:28px;
	border:1px solid #18ab29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:9px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
.classname:hover {
	background-color:#5cbf2a;
}
.classname:active {
	position:relative;
	top:1px;
}

a.classname {
	color:#ffffff
}
a:hover .classname {
	color:#ffffff
}

.signalement_btn {
	box-shadow:inset 0px 1px 0px 0px #7a8eb9;
	background:linear-gradient(to bottom, #637aad 5%, #5972a7 100%);
	background-color:#637aad;
	border:1px solid #314179;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:13px;
	font-weight:bold;
	padding:3px 6px;
	text-decoration:none;
}
.signalement_btn:hover {
	background:linear-gradient(to bottom, #5972a7 5%, #637aad 100%);
	background-color:#5972a7;
}
.signalement_btn:active {
	position:relative;
	top:1px;
}
input:disabled.signalement_btn:hover,
input:disabled.signalement_btn:active,
input:disabled.signalement_btn:focus {
	cursor: not-allowed;
        pointer-events: none;

        /*Button disabled - CSS color class*/
        color: #c0c0c0;
        background-color: #999999;
}
a.signalement_btn {
	color:#ffffff
}
a:hover .signalement_btn {
	color:#ffffff
}
/* DIV USER ONLINE */
div.user-avatar {
 position: relative;
 width: 125px;
 height: 125px;
 background-image: url('https://1texte.com/uploads/meadm.jpg');
 background-size: cover;
 display: block;
 border-radius: 100px;
 -webkit-border-radius: 100px;
 -moz-border-radius: 100px;
-webkit-box-shadow: 0px 12px 8px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 12px 8px 0px rgba(0,0,0,0.75);
box-shadow: 0px 12px 8px 0px rgba(0,0,0,0.75);
}
div.circle {
    width: 15px;
    height: 15px;
    background-color: #FF0000;
    border-radius: 50%;
    position: absolute;
    top: 13px;
    right: 10px;
}
@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}
div.ringring {
    border: 3px solid #FF0000;
    -webkit-border-radius: 30px;
    height: 25px;
    width: 25px;
    position: absolute;
    right: 5%;
    top: 5%;
	left: 73.5%;
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite; 
    opacity: 0.0;
	!important
}
/* END DIV USER ONLINE */

.output-container {
	width: 100%;
	margin: 0 auto;
}
.report_div {
	float:left;
	margin-left:5%;
	margin-top:10px;
	
}
.report_div2 {
	float:left;
	margin-left:5%;
	margin-top:10px;
}
.report_div_mobile {
	left:5px;
}
.report_div_mobile2 {
	left:10px;
}

.comment-form-container {
	padding: 10px;
	border-radius: 3px;
}

.input-row {
	margin-bottom: 20px;
}

.input-field {
	width: 100%;
	border-radius: 3px;
	padding: 10px;
	border: #e0dfdf 1px solid;
    box-sizing: border-box;
}
.input-field2 {
	width: 30%;
	border-radius: 3px;
	padding: 10px;
	border: #e0dfdf 1px solid;
    box-sizing: border-box;
}
.btn-submit {
	padding: 10px 20px;
    background: #2083f3;
    border: #137aea 1px solid;
    color: #f0f0f0;
    border-radius: 3px;
}

ul {
list-style-type:none;
} 
.comment-row 
{
border-top: #e0dfdf 1px solid;
}
.comment-row ~ .comment-row { }
.comment-row {
	margin-bottom: 5px;
	padding: 5px;
}
.comment-row-response {
	margin-bottom: 5px;
	padding: 5px;
}
.comment-row-mobile {
	border-top: #e0dfdf 1px solid;
	margin-bottom: 5px;
	padding: 5px;
}
.comment-row-response-mobile {
	margin-bottom: 10px;
	padding: 5px;
}
.outer-comment {
	padding: 3px;
    border-radius: 3px;
}

span.commet-row-label {
	font-style: italic;
}

span.posted-by {
color: #000000;
font-weight:bold;
padding:0px 10px;
font-size:12px;
text-align:center;
}
.comment-info-mobile {
width:5%;
margin-left:5px;
font-size: 0.9em;
color: #a7a7a7;
}
.comment-info-mobile2 {
width:5%;
margin-left:10px;
font-size: 0.9em;
color: #a7a7a7;
}
.comment-info {
float:left;
width:8%;
font-size: 0.9em;
color: #a7a7a7;
}
.comment-info2 {
float:left;
width:8%;
font-size: 0.9em;
color: #a7a7a7;
}
.comment-text {
margin-left:150px;
margin-top:20px;
padding: 10px;
border: 1px solid #E5E5E5;
border-radius: 2px;-webkit-border-radius: 2px;-moz-border-radius: 2px;
background-color:#F1F1F1;
color:#333333;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
.comment-text2 {
margin-left:180px;
margin-top:20px;
padding: 10px;
border: 1px solid #E5E5E5;
border-radius: 2px;-webkit-border-radius: 2px;-moz-border-radius: 2px;
background-color:#F1F1F1;
color:#333333;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
.box {
  margin-left:100px;
  margin-top:20px;
  padding: 10px;
  border: 1px solid #E4E4E4;
  border-radius: 2px;-webkit-border-radius: 2px;-moz-border-radius: 2px;
  background: #F7F7FF;
  color:#333333;
  position: relative;
  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;
}
.box_news {
  margin-top:20px;
  padding: 10px;
  border: 1px solid #E4E4E4;
  border-radius: 2px;-webkit-border-radius: 2px;-moz-border-radius: 2px;
  background: #F7F7FF;
  color:#333333;
  position: relative;
  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;
}
.box-mobile {
  margin-left:5px;
  margin-top:20px;
  padding: 10px;
  border: 1px solid #E4E4E4;
  border-radius: 2px;-webkit-border-radius: 2px;-moz-border-radius: 2px;
  background: #F7F7FF;
  color:#333333;
  position: relative;
  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;
}
.box2 {
  margin-left:100px;
  margin-top:20px;
  padding: 10px;
  border: 1px solid #E5E5E5;
  border-radius: 2px;-webkit-border-radius: 2px;-moz-border-radius: 2px;
  background: #F1F1F1;
  color:#333333;
  position: relative;
  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;
}
.box2-mobile {
  margin-left:15px;
  margin-top:20px;
  padding: 10px;
  border: 1px solid #E5E5E5;
  border-radius: 2px;-webkit-border-radius: 2px;-moz-border-radius: 2px;
  background: #F1F1F1;
  color:#333333;
  position: relative;
  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;
}
.sb1:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 10px solid transparent;
  border-right: 10px solid #F7F7FF;
  border-top: 10px solid #F7F7FF;
  border-bottom: 10px solid transparent;
  left: -19px;
  top: 6px;
}
.sb2:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 10px solid transparent;
  border-right: 10px solid #F1F1F1;
  border-top: 10px solid #F1F1F1;
  border-bottom: 10px solid transparent;
  left: -19px;

  top: 6px;
}
.comment-time {
color: #999999;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.div-comment {
margin-top:5px;
}

.btn-reply {
	text-decoration: underline;
    color: #a7a7a7;
    font-size: 0.9em;
    cursor: pointer;
}
.btn-reply-v2 {
    box-shadow: inset 0px 1px 0px 0px #ffffff;
    background: linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
    background-color: #ffffff;
    border-radius: 6px;
    border: 1px solid #dcdcdc;
    display: inline-block;
    cursor: pointer;
    color: #666666;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 5px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #ffffff;
}
#comment-message {
	margin-left: 20px;
	color: #189a18;
	display: none;
}
.icon-smile:before {
    content: " ";
    width: 16px;
    height: 16px;
    display: flex;
    background: url('/images/icon-smile.png');
	background-repeat:no-repeat;
}
.avatar {
  border-radius: 50%;
  width:75px;
  height:75px;
}
.avatar_mobile {
  border-radius: 50%;
  width:30px;
  height:30px;
}

/*-------- comment ----------*/
.comment-wrap{
	background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
            padding: 15px;
}
.comment-wrap h3{
	font-weight:300;
	padding-bottom:15px;
	margin-bottom:15px;}
}
.comment-wrap ul li{margin-bottom:20px;}
.comment-wrap li:nth-child(3) {
}
.comment-img{float:left;}
.comment-info {
  /* margin-left: 10px; */
}
.comment-info h4{margin-bottom:0px;}
.comment-info h4 a{
	font-size:20px;
	font-weight:300;
	color:#491000;
}
.comment-info h4 a:hover{color:#FF5233}
.comment-info h4 a span {
	background: #491000 none repeat scroll 0 0;
	border-radius: 5px;
	color: #fff;
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	margin-left: 10px;
	padding: 5px 15px;
	text-transform: uppercase;
}
.comment-info a.reply{
	color:#f15c58;
}
.comment-info p{
	margin-bottom:0px;
	margin-top:5px;
}
.comment-info input[type="text"]{
	width:100%;
	height:65px;
	border:1px solid #e1e1e1;
	border-radius:5px;
	padding-left:20px;
	margin-bottom:10px;
}
.comment-info button {
	float: right;
	margin-top: 0;
}
.comment-wrap .pagination-wrap {
	border-bottom: 1px solid #e1e1e1;
	border-top: 1px solid #e1e1e1;
	margin-bottom: 50px;
	padding: 30px 0;
	text-align: right;
	width: 100%;
}
.comment-wrap .pagination-wrap li{margin-bottom:0px;}
.comment-wrap .pagination-wrap li a{background:#f2f2f2;}
.comment-form h3{border-bottom:none;}
.comment-form .input_blue,.comment-form textarea{
	width:100%;
	height:50px;
	border-radius:5px;
	border:1px solid #e1e1e1;
	padding-left:20px;
	margin-bottom:20px;
}
.bouton_com_bleu{
	width:100%;
	height:50px;
	border-radius:5px;
	border:1px solid #e1e1e1;
	padding-left:20px;
	margin-bottom:20px;
}
/* Les Boites */
.twf_info, .twf_success, .twf_warning, .twf_error {
border: 1px solid;
margin: 10px 0px;
padding:15px 30px ;
background-repeat: no-repeat;
background-position: 10px center;
-moz-border-radius:.5em;
-webkit-border-radius:.5em;
border-radius:.5em;
}
/* Sans Icones */
.twf_info {
color: #00529B;
background-color: #BDE5F8;
}
.twf_success {
color: #155724;
background-color: #D4EDDA;
}
.twf_warning {
color: #9F6000;
background-color: #FFF3CD;
}
.twf_error {
color: #D8000C;
background-color: #FFBABA;
}
/* Avec Icones */
.twf_info.icon{
background-image: url('https://downbug.com/images/info.png');
padding-left:50px;
}
.twf_error.icon {
background-image: url('https://downbug.com/images/error.png');
padding-left:50px;
}
.twf_success.icon {
background-image:url('https://downbug.com/images/success.png');
padding-left:50px;
}
.twf_warning.icon {
background-image: url('https://downbug.com/images/warning.png');
padding-left:50px;
}
/* Fin des Boites */

.error-page {
    text-align: center;
	background: #fff;
	border-top: 1px solid #eee;
}
.error-page .error-inner {
	display: inline-block;
}
.error-page .error-inner h1 {
	font-size: 140px;
	text-shadow: 3px 5px 2px #3333;
	color: #006DFE;
	font-weight: 700;
}
.error-page .error-inner h1 span {
	display: block;
	font-size: 25px;
	color: #333;
	font-weight: 600;
	text-shadow: none;
}
.error-page .error-inner p {
	padding: 20px 15px;
}
.error-page .search-form {
	width: 100%;
	position: relative;
}
.error-page .search-form input {
	width: 400px;
	height: 50px;
	padding: 0px 78px 0 30px;
	border: none;
	background: #f6f6f6;
	border-radius: 5px;
	display: inline-block;
	margin-right: 10px;
	font-weight:400;
	font-size:14px;
}
.error-page .search-form input:hover{
	padding-left:35px;
}
.error-page .search-form .btn {
	width: 80px;
	height: 50px;
	border-radius: 5px;
	cursor: pointer;
	background: #006DFE;
	display: inline-block;
	position: relative;
	top: -2px;
}
.error-page .search-form .btn i{
	font-size:16px;
}
.error-page .search-form .btn:hover{
	background:#333;
}
/* --------------------------- */
div.sticky_adm {
  position: fixed;
  top: 10px;
  left: 2%;
  float: left;
  width: 100%;
  height:0;
  z-index:1000;
}
/* ---------Refonte page news  02/10/2024--------------- */
.dropdown-list-image {
    position: relative;
    height: 100px;
    width: 100px;
}
.dropdown-list-image img {
    height: 100px;
    width: 100px;
}
.btn-light {
    color: #2cdd9b;
    background-color: #e5f7f0;
    border-color: #d8f7eb;
}
/* ---------Searchbox  08/10/2024--------------- */

.form-control-borderless {
    border: none;
}

.form-control-borderless:hover, .form-control-borderless:active, .form-control-borderless:focus {
    border: none;
    outline: none;
    box-shadow: none;
}
a.search_link:hover {
   cursor: pointer;
   background-color: yellow;
}

/* LOGO*/
	
@keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

	
.navbar-brand {
            text-decoration: none !important;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .logo-container img {
            height: auto;
        }

        .logo {
            position: relative;
            font-size: 2rem;
            font-weight: 700;
            font-family: 'Roboto', sans-serif;
            letter-spacing: 1px;
            padding: 0.5rem;
            transition: transform 0.3s ease;
            animation: pulse 3s infinite ease-in-out;
        }

        .down {
            color: #ffffff;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }

        .bug {
            color: #FFD300;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }

        .logo-underline {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, #ffffff, #FFD300);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.3s ease;
        }

        .navbar-brand:hover .logo {
            transform: translateY(-2px);
        }

        .navbar-brand:hover .logo-underline {
            transform: scaleX(1);
        }

        @media (max-width: 768px) {
            .logo {
                font-size: 1.75rem;
            }
            .logo-container img {
				/*
                max-width: 50px;
				*/
				height: auto;
            }
        }

        @media (max-width: 576px) {
            .logo {
                font-size: 1.5rem;
            }
			
            .logo-container img {
			/*
                max-width: 40px;
			*/
			height: auto;
            }
			
        }
		
/* DIV pulsating-circle */
.pulsating-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 30px;
  height: 30px;
  
  &:before {
    content: '';
    position: relative;
    display: block;
    width: 300%;
    height: 300%;
    box-sizing: border-box;
    margin-left: -100%;
    margin-top: -100%;
    border-radius: 45px;
    background-color: #01a4e9;
    animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  }
  
  &:after {
    content: '';
    position: absolute;
    left: 0; 
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0,0,0,.3);
    animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -.4s infinite;
  }
}

@keyframes pulse-ring {
  0% {
    transform: scale(.33);
  }
  80%, 100% {
    opacity: 0;
  }
}

@keyframes pulse-dot {
  0% {
    transform: scale(.8);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(.8);
  }
}
/* END DIV pulsating-circle */

.dropdown-list-image {
    position: relative;
    height: 2.5rem;
    width: 2.5rem;
}
.dropdown-list-image img {
    height: 2.5rem;
    width: 2.5rem;
}
.btn-light {
    color: #2cdd9b;
    background-color: #e5f7f0;
    border-color: #d8f7eb;
}
	

	
/* comments.css */
.loading {
    text-align: center;
    padding: 20px;
    color: #666;
}

.error {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    padding: 10px;
    border-radius: 4px;
    margin: 10px 0;
}

.no-comments {
    text-align: center;
    padding: 20px;
    color: #666;
    font-style: italic;
}

.outer-comment {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comment-row, .comment-row-response {
    margin-bottom: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 15px;
    background-color: #fff;
}

.comment-row-response {
    margin-left: 40px;
    background-color: #f8f9fa;
}

.replies {
    list-style: none;
    padding-left: 40px;
    margin-top: 20px;
    border-left: 2px solid #eee;
}

.comment-info, .comment-info2 {
    text-align: center;
    margin-bottom: 10px;
}

.avatar {
    border-radius: 50%;
    margin: 5px 0;
}

.posted-by {
    margin-bottom: 5px;
    color: #333;
}

.comment-time {
    font-size: 0.85em;
    color: #666;
}

.div-comment {
    margin-top: 10px;
    line-height: 1.5;
}

.pagination-container {
    margin-top: 20px;
    text-align: center;
}

.pagination-btn {
    padding: 8px 12px;
    margin: 0 4px;
    border: 1px solid #ddd;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.pagination-btn:hover {
    background-color: #f5f5f5;
}

.pagination-btn.active {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}
		
        /* Styles existants inchangés */
        .service-card {
            transition: transform 0.2s;
        }
        .service-card:hover {
            transform: translateY(-5px);
        }
        .status-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
}

		.status-operational {
			background-color: #28a745;
			animation: pulse-green 2s infinite;
		}
        .status-issues {
            background-color: #ffc107;
            animation: pulse-yellow 2s infinite;
        }
        .status-critical {
            background-color: #dc3545;
            animation: pulse-red 2s infinite;
        }
        @keyframes pulse-green {
            0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); }
            100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
        }
        @keyframes pulse-yellow {
            0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(255, 193, 7, 0); }
            100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
        }
        @keyframes pulse-red {
            0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
            100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
        }

        .search-box {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
        }
        .search-box::placeholder {
            color:black;
        }
        .category-icon {
            font-size: 2rem;
            margin-bottom: 1rem;
            color: #0056b3;
        }
       .report-btn {
            border: 2px solid #dc3545;
            color: #dc3545;
            background: transparent;
            transition: all 0.3s ease;
        }
        .report-btn:hover {
            background: #dc3545;
            color: white;
        }

        .service-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
        .table-hover tbody tr {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.table-hover tbody tr:hover {
    background-color: rgba(0, 123, 255, 0.05);
}

/* Styles mis à jour pour le menu défilant */
        .nav-item {
            position: relative;
        }
        .dropdown-menu {
            display: none;
            position: absolute;
            left: 0;
            background-color: #fff;
            border: 1px solid rgba(0,0,0,.15);
            border-radius: .25rem;
            padding: .5rem 0;
            margin-top: 0;
            min-width: 200px;
            z-index: 1000;
        }
        .nav-item:hover .dropdown-menu {
            display: block;
        }
        .dropdown-menu .category-header {
            padding: .5rem 1.5rem;
            font-weight: bold;
            color: #6c757d;
            border-bottom: 1px solid #e9ecef;
        }
        .dropdown-menu .dropdown-item {
            padding: .5rem 1.5rem;
            color: #212529;
        }
        .dropdown-menu .dropdown-item:hover {
            background-color: #f8f9fa;
            color: #16181b;
        }
		
 .toggle-btn {
            background-color: #1F8AFD;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin-bottom: 10px;
        }
        .toggle-btn:hover {
            background-color: #1670d3;
        }
/* Les Boites */
.twf_info, .twf_success, .twf_warning, .twf_error {
border: 1px solid;
margin: 10px 0px;
padding:15px 30px ;
background-repeat: no-repeat;
background-position: 10px center;
-moz-border-radius:.5em;
-webkit-border-radius:.5em;
border-radius:.5em;
}
/* Sans Icones */
.twf_info {
color: #00529B;
background-color: #BDE5F8;
}
.twf_success {
color: #4F8A10;
background-color: #DFF2BF;
}
.twf_warning {
color: #9F6000;
background-color: #FEEFB3;
}
.twf_error {
color: #D8000C;
background-color: #FFBABA;
}
/* Avec Icones */
.twf_info.icon{
background-image: url('https://downbug.com/images/info.png');
padding-left:50px;
}
.twf_error.icon {
background-image: url('https://downbug.com/images/error.png');
padding-left:50px;
}
.twf_success.icon {
background-image:url('https://downbug.com/images/success.png');
padding-left:50px;
}
.twf_warning.icon {
background-image: url('https://downbug.com/images/warning.png');
padding-left:50px;
}
/* Fin des Boites */

 .btn-group .btn { border-radius: 0; }
        .btn-group .btn:first-child {
            border-top-left-radius: 0.25rem;
            border-bottom-left-radius: 0.25rem;
        }
        .btn-group .btn:last-child {
            border-top-right-radius: 0.25rem;
            border-bottom-right-radius: 0.25rem;
        }
        .incident-card {
            transition: all 0.3s ease;
        }
        .incident-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
        }
        .service-icon {
            width: 40px;
            height: 40px;
            object-fit: cover;
            border-radius: 4px;
        }
		
		
/* Styles personnalisés */
.how-it-works {
	    background: linear-gradient(135deg, #2F84F3 0%, #2a5298 50%, #2193b0 100%);
        }
        .how-it-works .card {
            transition: transform 0.3s ease;
            background: rgba(255, 255, 255, 0.98);
        }
        .how-it-works .card:hover {
            transform: translateY(-5px);
        }
	
.service-card {
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.footer {
    background: linear-gradient(45deg, #1a1a1a, #2c2c2c);
}

.social-links a {
    font-size: 1.2rem;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: #007bff !important;
}

.card i {
    transition: transform 0.3s ease;
}

.card:hover i {
    transform: scale(1.1);
}

/* Couleurs personnalisées */
.text-primary {
    color: #007bff !important;
}

.text-success {
    color: #28a745 !important;
}

.text-info {
    color: #17a2b8 !important;
}

.text-warning {
    color: #ffc107 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .service-card {
        margin-bottom: 20px;
    }
    
    .footer h5 {
        margin-top: 20px;
    }
}
/* Styles pour la recherche */
.hero-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #2F84F3 0%, #2a5298 50%, #2193b0 100%);
    color: white;
    position: relative;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    pointer-events: none;
}

.hero-section h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    font-weight: 700;
	
@media only screen and (max-width: 600px) {
font-size: 32px;
}
	
/* Small devices (tablets, 768px and up) */
  @media (min-width: 601px) {
    font-size: 34px;
  }

  /* Medium devices (desktops, 992px and up) */
  @media (min-width: 992px) {
    font-size: 40px;
  }

  /* Large devices (large desktops, 1200px and up) */
  @media (min-width: 1200px) {
    font-size: 45px;
  }
	
}

.hero-section .lead {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.search-container {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

/* Reset des styles Bootstrap pour l'input-group */
.input-group {
    display: flex;
    align-items: stretch;
}

/* Styles du champ de recherche */
.search-box.form-control {
    height: 50px;
    padding: 10px 20px;
    font-size: 1.1rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-right: none;
    border-radius: 25px 0 0 25px !important;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.search-box.form-control:focus {
    border-color: #2193b0;
    box-shadow: 0 4px 12px rgba(33, 147, 176, 0.3);
    background: white;
}

/* Styles du bouton */
.input-group-append {
    display: flex;
}

.input-group-append .btn {
    height: 50px;
    padding: 0 25px;
    font-size: 1.1rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-left: none;
    border-radius: 0 25px 25px 0 !important;
    background: white;
    color: #2193b0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-group-append .btn:hover {
    background: #2193b0;
    color: white;
}

/* Résultats de recherche */
.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-top: 5px;
    z-index: 1000;
    display: none;
}

.search-results ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.search-results li {
    padding: 12px 20px;
    border-bottom: 1px solid #e9ecef;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.search-results li:last-child {
    border-bottom: none;
}

.search-results li:hover {
    background-color: #f8f9fa;
}

.search-results a {
    color: #212529;
    text-decoration: none;
    display: block;
}

.search-results a:hover {
    color: #2193b0;
}

/* Blog */
		
.blog-section {
    background-color: #f8f9fa;
    overflow: hidden;
}

.blog-carousel {
    position: relative;
    padding: 0 40px;
}

.blog-scroll {
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    scroll-behavior: smooth;
    padding: 20px 0;
}

.blog-scroll::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.blog-card {
            height: 100%;
            transition: transform 0.3s ease;
            text-decoration: none !important;
            color: inherit !important;
            display: block;
            -webkit-tap-highlight-color: transparent;
            outline: none;
        }
        .blog-card:hover {
            transform: translateY(-5px);
        }
        .blog-card:hover .card {
            box-shadow: 0 8px 16px rgba(0,0,0,0.1) !important;
        }
        .blog-card:focus {
            outline: none;
        }
        .card-img-top {
            height: 200px;
            object-fit: cover;
        }
        .card-date {
            color: #6c757d;
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
        }
        .blog-button {
            display: inline-block;
            padding: 0.8rem 2rem;
            background-color: #0d6efd;
            color: white;
            text-decoration: none;
            border-radius: 0.5rem;
            transition: background-color 0.3s ease;
        }
        .blog-button:hover {
            background-color: #0b5ed7;
            color: white;
            text-decoration: none;
        }
        .card {
            transition: box-shadow 0.3s ease;
        }
        /* Désactiver le surlignement sur mobile */
        @media (hover: none) {
            .blog-card:hover {
                transform: none;
            }
            .blog-card:hover .card {
                box-shadow: none !important;
            }
        }
.card-body {
    padding: 1.5rem;
}

.card-date {
    color: #0056b3;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.card-title {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 1rem;
}

.card-text {
    color: #6c757d;
    font-size: 0.95rem;
    line-height: 1.5;
}

.card-author {
    color: #8e9bae;
    font-size: 0.9rem;
    margin-top: 1rem;
}
 .pagination {
            margin-top: 2rem;
            margin-bottom: 2rem;
        }
        .page-link {
            color: #0d6efd;
            padding: 0.75rem 1rem;
            transition: all 0.3s ease;
        }
        .page-link:hover {
            background-color: #0d6efd;
            color: white;
            border-color: #0d6efd;
        }
        .page-item.active .page-link {
            background-color: #0d6efd;
            border-color: #0d6efd;
        }
.blog-button {
            display: inline-block;
            padding: 0.8rem 2rem;
            background-color: #0d6efd;
            color: white;
            text-decoration: none;
            border-radius: 0.5rem;
            transition: background-color 0.3s ease;
        }
.blog-button {
            display: inline-block;
            padding: 0.8rem 2rem;
            background-color: #0d6efd;
            color: white;
            text-decoration: none;
            border-radius: 0.5rem;
            transition: background-color 0.3s ease;
        }
        .blog-button:hover {
            background-color: #0b5ed7;
            color: white;
        }
.scroll-controls {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.scroll-controls .btn {
    pointer-events: auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    border: 2px solid #007bff;
    color: #007bff;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.1);
}

.scroll-controls .btn:hover {
    background: #007bff;
    color: white;
}

.scroll-left {
    margin-left: -20px;
}

.scroll-right {
    margin-right: -20px;
}
		
.incident-card {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.incident-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.service-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}		

/* CSS PAGE ARTICLE.PHP */
		
  .article-header {
            position: relative;
            background-color: #f8f9fa;
            padding: 3rem 0;
            margin-bottom: 2rem;
        }
        .article-meta {
            color: #6c757d;
            font-size: 0.9rem;
            margin-bottom: 1rem;
        }
        .article-content {
            font-size: 1.1rem;
            line-height: 1.8;
            color: #343a40;
        }
        .article-content p {
            margin-bottom: 1.5rem;
        }
        .article-image {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            margin-bottom: 2rem;
        }
        .similar-articles {
            background-color: #f8f9fa;
            padding: 3rem 0;
            margin-top: 4rem;
        }
        .similar-card {
            transition: transform 0.2s;
        }
        .similar-card:hover {
            transform: translateY(-5px);
        }
        .reading-time {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            background-color: #e9ecef;
            border-radius: 20px;
            font-size: 0.85rem;
            margin-right: 1rem;
        }
		
/* Modifier le style du bouton de thème pour le rendre responsive */
/* Styles du bouton de thème */
		/*
#theme-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    padding: 0.5rem;
    border-radius: 50%;
    border: none;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 1000;
}

#theme-toggle:hover {
    transform: scale(1.1);
    background-color: var(--link-color);
    color: white;
}

@media (max-width: 991px) {
    #theme-toggle {
        display: none;
    }
}

.theme-toggle-mobile {
    display: none;
    width: 100%;
    padding: 0.5rem 1rem;
    margin-top: 0.5rem;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: none;
    cursor: pointer;
    text-align: left;
}

.theme-toggle-mobile i {
    margin-right: 0.5rem;
}

@media (max-width: 991px) {
    .theme-toggle-mobile {
        display: flex;
        align-items: center;
    }
}
*/
		
/* Styles de la navbar */
		/*
.navbar {
    background-color: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color);
}

.navbar-dark .navbar-nav .nav-link {
    color: var(--text-primary);
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: var(--link-color);
}

.dropdown-menu {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

.dropdown-item {
    color: var(--text-primary);
}

.dropdown-item:hover {
    background-color: var(--bg-primary);
    color: var(--link-color);
}

.category-header {
    color: var(--text-secondary);
    padding: 0.5rem 1rem;
    font-weight: bold;
}
*/
 .stats-card {
            padding: 2rem;
            border-radius: 15px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            background: white;
            cursor: pointer;
        }

        .stats-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        .stats-icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            display: inline-block;
            animation: bounce 2s infinite;
        }

        .stats-number {
            font-size: 2.5rem;
            font-weight: bold;
            color: #0d6efd;
            margin: 0.5rem 0;
            opacity: 0;
            animation: fadeInUp 0.8s ease forwards;
        }

        .stats-text {
            color: #6c757d;
            font-size: 1.1rem;
            margin-top: 0.5rem;
        }

        @keyframes bounce {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .stats-section {
            background: linear-gradient(135deg, #2F84F3 0%, #2a5298 50%, #2193b0 100%);
            color: white;
            padding: 4rem 0;
        }

        /* Animation delay pour chaque carte */
        .stats-card:nth-child(1) .stats-number {
            animation-delay: 0.2s;
        }
        
        .stats-card:nth-child(2) .stats-number {
            animation-delay: 0.4s;
        }
        
        .stats-card:nth-child(3) .stats-number {
            animation-delay: 0.6s;
        }	
/* _______________________________________________________ */
		
 .typing-container {
            display: inline-block;
            position: relative;
        }

        .typing-container h3 {
            display: inline-block;
            margin-bottom: 0;
            color: #333;
        }

        .typing-cursor {
            display: inline-block;
            width: 3px;
            height: 20px;
            background-color: #333;
            margin-left: 5px;
            animation: blink 1s infinite;
            vertical-align: middle;
        }

        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }

        .chat-bubble {
            position: relative;
            opacity: 0;
            transform: translateY(20px);
            animation: bubbleUp 0.5s ease forwards;
        }

        .chat-bubble:nth-child(1) { animation-delay: 0.2s; }
        .chat-bubble:nth-child(2) { animation-delay: 0.4s; }
        .chat-bubble:nth-child(3) { animation-delay: 0.6s; }

        @keyframes bubbleUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .typing-dots {
            display: inline-block;
        }

        .typing-dots span {
            display: inline-block;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background-color: #6c757d;
            margin: 0 2px;
            animation: dotPulse 1.4s infinite;
        }

        .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
        .typing-dots span:nth-child(3) { animation-delay: 0.4s; }

        @keyframes dotPulse {
            0%, 100% { transform: scale(1); opacity: 0.4; }
            50% { transform: scale(1.2); opacity: 1; }
        }
		
/* _______________________________________________________ */
		
 .com_system-count {
            display: inline-block;
            position: relative;
            overflow: hidden;
            text-align: center;
            width: 100%;
        }

        .com_system-count-number {
            display: inline-block;
            animation: com_system-countUp 1.5s ease-out forwards;
            opacity: 0;
            transform: translateY(20px);
        }

        .com_system-count-number.count {
            color: #007bff;
            font-weight: bold;
        }

        .com_system-count-icon {
            display: inline-block;
            animation: com_system-bounce 2s infinite;
            margin: 0 0.5rem;
        }

        @keyframes com_system-countUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes com_system-bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        .com_system-count::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 50%;
            width: 200px;
            height: 2px;
            background: #007bff;
            transform: translateX(-50%) scaleX(0);
            animation: com_system-underline 1s ease-in-out forwards;
            animation-delay: 0.5s;
        }

        @keyframes com_system-underline {
            to { transform: translateX(-50%) scaleX(1); }
        }
		.container_com_system {
            display: flex;
            justify-content: center;
            align-items: center;
        }
	
/*___________________HISTORIQUE______________________*/
	
 .service-card-historique {
            transition: transform 0.3s ease;
            cursor: pointer;
        }
        .service-card-historique:hover {
            transform: translateY(-5px);
        }
        .stats-card-historique {
            animation: fadeIn 1s;
        }
        .chart-container-historique {
            position: relative;
            height: 400px;
            margin-bottom: 2rem;
        }
        .service-link-historique {
            color: inherit;
            text-decoration: none;
        }
        .service-link-historique:hover {
            text-decoration: none;
            color: inherit;
        }
	
/*___________________POLITIQUE______________________*/
	
  .section-primary {
            background-color: #f8f9fa;
            padding: 2rem;
            border-radius: 10px;
            margin-bottom: 2rem;
        }
        .section-secondary {
            background-color: #e9ecef;
            padding: 2rem;
            border-radius: 10px;
            margin-bottom: 2rem;
        }
        .section-info {
            background-color: #e3f2fd;
            padding: 2rem;
            border-radius: 10px;
            margin-bottom: 2rem;
        }
        .top-banner {
            background: linear-gradient(45deg, #4a90e2, #63b3ed);
            color: white;
            padding: 4rem 0;
            margin-bottom: 3rem;
        }
        h3 {
            margin-top: 2rem;
            margin-bottom: 1.5rem;
            color: #2d3748;
        }
	
/*___________________DESCRIPTION EXPANDER______________________*/
	
 .description-container {
            position: relative;
            overflow: hidden;
        }
        
        .description {
            position: relative;
            overflow: hidden;
            max-height: 80px; /* Hauteur fixe pour la version tronquée */
            margin-bottom: 0;
            transition: max-height 0.3s ease-out;
        }

        .description.expanded {
            max-height: 2000px; /* Valeur suffisamment grande pour le texte complet */
        }

        .read-more {
            color: #007bff;
            cursor: pointer;
            display: none;
            margin-top: 10px;
            text-decoration: underline;
        }

        .description-container[data-truncated="true"] .description:not(.expanded)::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40px;
            background: linear-gradient(180deg, transparent, white);
        }

        .description-container[data-truncated="true"] .read-more {
            display: block;
        }

/*___________________language-switcher______________________*/

 .language-switcher {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: white;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            z-index: 1000;
            display: flex;
            gap: 8px;
        }
        .lang-link {
            text-decoration: none;
            font-size: 1.5em;
            opacity: 0.7;
            transition: opacity 0.2s;
            padding: 4px 8px;
            border-radius: 4px;
            cursor: pointer;
        }
        .lang-link:hover { opacity: 1; background: rgba(0,0,0,0.05); }
        .lang-link.active { opacity: 1; background: rgba(0,0,0,0.1); }
	
/*___________________vote comment______________________*/
	
.vote-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.vote-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.vote-btn.active.like-btn {
    color: #22c55e;
}

.vote-btn.active.dislike-btn {
    color: #ef4444;
}

.sort-selector select {
    width: 200px;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background-color: white;
    cursor: pointer;
}

.sort-selector select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
	
/*___________________report comment page______________________*/
	
 .report-container {
            max-width: 600px;
            margin: 2rem auto;
            padding: 2rem;
            background: white;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
        }
        .alert {
            border-radius: 8px;
            margin-bottom: 1.5rem;
        }
        .form-control {
            border-radius: 8px;
        }
        .btn-primary {
            background-color: #006DFE;
            border: none;
            border-radius: 8px;
            padding: 0.75rem 2rem;
            font-weight: 500;
        }
        .btn-primary:hover {
            background-color: #0056cc;
        }
        .cf-turnstile {
            margin: 1.5rem 0;
        }
/*___________________Card news mobile______________________*/
	
/* Styles pour la vue mobile */
        @media (max-width: 768px) {
            .table-responsive {
                display: none;
            }
            .mobile-cards {
                display: block;
            }
            .service-card {
                background: white;
                border-radius: 8px;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                margin-bottom: 1rem;
                padding: 1rem;
            }
            .service-card img {
                width: 48px;
                height: 48px;
                margin-bottom: 0.5rem;
            }
            .service-card-header {
                display: flex;
                align-items: center;
                margin-bottom: 1rem;
            }
            .service-info {
                margin-left: 1rem;
            }
        }

        /* Styles pour la vue desktop */
        @media (min-width: 769px) {
            .mobile-cards {
                display: none;
            }
            .table-responsive {
                display: block;
            }
            .service-logo {
                width: 32px;
                height: 32px;
                margin-right: 0.5rem;
            }
        }
/*___________________Box sidebar contact services______________________*/
	
 .sidebar-section {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
            padding: 20px;
            margin: 15px;
        }

        .sidebar-section-title {
            border-bottom: 2px solid #f0f0f0;
            margin-bottom: 15px;
            padding-bottom: 10px;
        }

        .sidebar-section-title p {
            color: #2c3e50;
            font-size: 1.2rem;
            font-weight: 600;
            margin: 0;
        }

        .service-links-list {
            padding: 0;
        }

        .service-links-list li {
            margin-bottom: 15px;
            transition: transform 0.2s;
        }

        .service-links-list li:hover {
            transform: translateX(5px);
        }

        .service-links-list a {
            color: #2c3e50;
            text-decoration: none;
            display: flex;
            align-items: center;
            padding: 10px;
            border-radius: 6px;
            transition: background-color 0.2s;
        }

        .service-links-list a:hover {
            background-color: #f8f9fa;
            color: #007bff;
        }

        .service-links-list svg {
            width: 24px;
            height: 24px;
            margin-right: 12px;
            fill: #6c757d;
            transition: fill 0.2s;
        }

        .service-links-list li:hover svg {
            fill: #007bff;
        }

        /* Styles spécifiques pour chaque réseau social */
        .service-links-list li:nth-child(1):hover svg {
            fill: #1DA1F2; /* Twitter blue */
        }

        .service-links-list li:nth-child(2):hover svg {
            fill: #4267B2; /* Facebook blue */
        }

        .service-links-list li:nth-child(3):hover svg {
            fill: #E4405F; /* Instagram pink */
        }

        .service-links-list li:nth-child(4):hover svg {
            fill: #FF4500; /* Support orange */
        }
	
/*___________________breadcrumb single______________________*/
	
 .breadcrumb {
            background: linear-gradient(135deg, #0062cc 0%, #0056b3 100%);
            border-radius: 8px;
            padding: 1rem;
            box-shadow: 0 4px 15px rgba(0, 98, 204, 0.2);
            animation: slideIn 0.5s ease-out;
        }

        @keyframes slideIn {
            from {
                transform: translateY(-10px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .breadcrumb-item {
            display: flex;
            align-items: center;
        }

        .breadcrumb-item a {
            color: #ffffff;
            font-weight: 500;
            text-decoration: none;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .breadcrumb-item a:hover {
            color: #e6e6e6;
            transform: translateY(-2px);
        }

        .breadcrumb-item.active {
            color: #ffffff;
            opacity: 0.9;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .breadcrumb-item + .breadcrumb-item::before {
            content: "→";
            color: #ffffff;
            opacity: 0.7;
            padding: 0 0.8rem;
            animation: pulse 2s infinite;
        }

        .emoji {
            display: inline-block;
            animation: bounce 2s infinite;
            margin-right: 4px;
        }

        @keyframes pulse {
            0%, 100% { opacity: 0.7; }
            50% { opacity: 1; }
        }

        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-3px); }
        }
/* COMMENT CSS */
	
/* Variables */
:root {
  --primary-color: #006DFE;
  --secondary-color: #F7F7FF;
  --text-color: #333;
  --light-gray: #E4E4E4;
  --success-color: #28a745;
  --error-color: #dc3545;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --transition: all 0.3s ease;
}

/* Structure principale des commentaires */
.comment-row, .comment-row-response {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 10px;
  margin-bottom: 20px;
  padding: 20px;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

/* Zone de l'avatar */
.comment-info, .comment-info2 {
  width: 80px;
  flex-shrink: 0;
  margin-right: 20px;
}

/* Avatar */
.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Zone du contenu du commentaire */
.box, .box2 {
  flex: 1;
  min-width: 0; /* Empêche le débordement */
  background: var(--secondary-color);
  border-radius: 8px;
  padding: 15px;
  margin: 0;
  position: relative;
}

/* Nom de l'auteur */
.posted-by {
  display: block;
  font-weight: 600;
  color: var(--text-color);
  font-size: 1rem;
  margin-bottom: 5px;
  text-align: center;
}

/* Zone des actions (répondre, signaler) */
.comment-actions {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding-left: 100px; /* Aligne avec le contenu */
}

/* Réponses */
.replies {
  margin-left: 50px;
  padding-left: 20px;
  border-left: 2px solid var(--light-gray);
  width: 100%;
}

/* Version mobile */
@media (max-width: 768px) {
  .comment-row, .comment-row-response {
    flex-direction: column;
  }

  .comment-info, .comment-info2 {
    width: 100%;
    margin-right: 0;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .avatar {
    width: 40px;
    height: 40px;
  }

  .posted-by {
    text-align: left;
    margin-bottom: 0;
  }

  .box, .box2 {
    width: 100%;
  }

  .comment-actions {
    padding-left: 0;

  }

  .replies {
    margin-left: 20px;
    padding-left: 15px;
  }
}

/* Version mobile */
@media (max-width: 768px) {
  .comment-row, .comment-row-response {
    padding: 15px;
  }

  .replies {
    margin-left: 20px;
    padding-left: 15px;
  }

  .avatar {
    width: 40px;
    height: 40px;
  }

  .comment-info, .comment-info2 {
    flex-direction: column;
    align-items: flex-start;
  }

  .box, .box2 {
    margin-left: 0;
  }

  .vote-buttons {
    flex-wrap: wrap;
  }
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.comment-row, .comment-row-response {
  animation: fadeIn 0.3s ease-out;
}

/* Messages de statut */
#mail-status {
  padding: 15px;
  border-radius: 8px;
  margin-top: 15px;
}

.alert-success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.alert-danger {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* Tri des commentaires */
.sort-selector {
  margin-bottom: 20px;
}

.sort-selector select {
  width: 200px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--light-gray);
  background-color: white;
  cursor: pointer;
}

/* Pagination */
.pagination-container {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}

.pagination-btn {
  padding: 8px 16px;
  border: 1px solid var(--light-gray);
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: var(--transition);
}

.pagination-btn:hover {
  background: var(--secondary-color);
}

.pagination-btn.active {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}
	
	
	
:root {
  --primary-color: #006DFE;
  --secondary-color: #F7F7FF;
  --text-color: #333;
  --light-gray: #E4E4E4;
  --success-color: #28a745;
  --error-color: #dc3545;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --transition: all 0.3s ease;
}

/* Structure principale des commentaires */
.comment-row, .comment-row-response {
  display: flex;
  background: #fff;
  border-radius: 10px;
  margin-bottom: 20px;
  padding: 20px;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

/* Zone de l'avatar */
.comment-info {
  width: 80px;
  flex-shrink: 0;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Avatar */
.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Zone du contenu du commentaire */
.comment-content {
  flex: 1;
  min-width: 0;
}

.box {
  background: var(--secondary-color);
  border-radius: 8px;
  padding: 15px;
  margin: 0;
  position: relative;
}

/* Nom de l'auteur */
.posted-by {
  display: block;
  font-weight: 600;
  color: var(--text-color);
  font-size: 1rem;
  margin-bottom: 5px;
  text-align: center;
}

/* Bouton signaler */
.report_div {
  margin-top: 5px;
}
/* Bouton répondre */
.reply-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.btn-reply-v2 {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
  transition: var(--transition);
}

.btn-reply-v2:hover {
  opacity: 0.8;
}

/* Réponses */
.replies {
  margin-left: 50px;
  padding-left: 20px;
  border-left: 2px solid var(--light-gray);
  width: 100%;
}

/* Version mobile */
@media (max-width: 768px) {
  .comment-row, .comment-row-response {
    flex-direction: column;
    padding: 15px;
  }

  .comment-info {
    width: 100%;
    margin-right: 0;
    margin-bottom: 15px;
    flex-direction: row;
    align-items: center;
  }

  .avatar {
    width: 40px;
    height: 40px;
  }

  .posted-by {
    text-align: left;
    margin-bottom: 0;
  }

  .report_div {
    margin-top: 0;
    margin-left: auto;
  }

  .replies {
    margin-left: 20px;
    padding-left: 15px;
  }
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.comment-row, .comment-row-response {
  animation: fadeIn 0.3s ease-out;
}
	
	
	
	
	
	
	
	
	
	
	
	
:root {
  --primary-color: #006DFE;
  --secondary-color: #F7F7FF;
  --text-color: #333;
  --light-gray: #E4E4E4;
  --success-color: #28a745;
  --error-color: #dc3545;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --transition: all 0.3s ease;
}

/* Structure principale des commentaires */
.comment-row, .comment-row-response {
  display: flex;
  background: #fff;
  border-radius: 10px;
  margin-bottom: 20px;
  padding: 20px;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

/* Zone de l'avatar */
.comment-info {
  width: 80px;
  flex-shrink: 0;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Avatar */
.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Zone du contenu du commentaire */
.comment-content {
  flex: 1;
  min-width: 0;
}

.box {
  background: var(--secondary-color);
  border-radius: 8px;
  padding: 15px;
  margin: 0;
  position: relative;
}

/* Nom de l'auteur */
.posted-by {
  display: block;
  font-weight: 600;
  color: var(--text-color);
  font-size: 1rem;
  margin-bottom: 5px;
  text-align: center;
}

/* Container pour les actions */
.actions-container {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 10px;
}

/* Bouton signaler */
.report-form {
  margin: 0;
}

.report-btn-com {
  padding: 5px 10px;
  border: none;
  background: transparent;
  color: var(--error-color);
  cursor: pointer;
  transition: var(--transition);
}

.report-btn-com:hover {
  opacity: 0.8;
}

/* Bouton répondre */
.btn-reply-v2 {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
  transition: var(--transition);
}

.btn-reply-v2:hover {
  opacity: 0.8;
}

/* Réponses */
.replies {
  margin-left: 50px;
  padding-left: 20px;
  border-left: 2px solid var(--light-gray);
  width: 100%;
}

/* Version mobile */
@media (max-width: 768px) {
  .comment-row, .comment-row-response {
    flex-direction: column;
    padding: 15px;
  }

  .comment-info {
    width: 100%;
    margin-right: 0;
    margin-bottom: 15px;
    flex-direction: row;
    align-items: center;
  }

  .avatar {
    width: 40px;
    height: 40px;
  }

  .posted-by {
    text-align: left;
    margin-bottom: 0;
  }

  .actions-container {
    flex-wrap: wrap;
    gap: 10px;
  }

  .replies {
    margin-left: 20px;
    padding-left: 15px;
  }
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.comment-row, .comment-row-response {
  animation: fadeIn 0.3s ease-out;
}
	
	
	
	
	
	
	
/* Conteneur des actions */
.actions-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

/* Styles mobile */
@media (max-width: 768px) {
  .comment-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }

  .avatar {
    width: 32px;
    height: 32px;
  }

  .posted-by {
    margin: 0;
  }

  .actions-container {
    flex-wrap: wrap;
  }

  .comment-content {
    width: 100%;
  }

  .box {
    padding: 12px;
  }
}
	
	
	
	
	
/* Styles pour mobile */
@media (max-width: 768px) {
  .comment-row,
  .comment-row-response {
    flex-direction: row;
    gap: 0.75rem;
    align-items: flex-start;
  }

  .comment-info-mobile,
  .comment-info-mobile2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
  }

  .avatar_mobile {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-bottom: 0.25rem;
  }

  .posted-by {
    font-size: 0.75rem;
    text-align: center;
    word-break: break-word;
    max-width: 50px;
  }

  .box-mobile,
  .box2-mobile {
    flex: 1;
    margin-top: 0;
    position: relative;
  }

  .box-mobile::before,
  .box2-mobile::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 12px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
  }

  .box-mobile::before {
    border-right: 8px solid #f8f9fa;
  }

  .box2-mobile::before {
    border-right: 8px solid #e9ecef;
  }

  .comment-time {
    display: block;
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
  }

  .div-comment {
    margin-bottom: 0.5rem;
    word-break: break-word;
  }

  .actions-container {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }

  .report-btn-com {
    color: #dc3545;
    background: none;
    border: none;
    padding: 0;
    font-size: 0.875rem;
  }

  .btn-reply-v2 {
    color: #2196F3;
    text-decoration: none;
    font-size: 0.875rem;
  }

  .reply-to {
    display: block;
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
  }

  .reply-name {
    font-weight: bold;
    color: #2196F3;
  }

  .replies {
    margin-left: 1rem;
    list-style: none;
    padding: 0;
  }
}
.comment-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.comment-header strong {
  color: #333;
  font-size: 0.9rem;
}

.comment-time {
  color: #6c757d;
  font-size: 0.75rem;
}
	
	
	
/* FAQ ARTICLES */ 
	
	.accordion .card {
            border: none;
            margin-bottom: 5px;
            border-radius: 8px !important;
            overflow: hidden;
        }
        
        .accordion .card-header {
            background: #f8f9fa;
            border-bottom: none;
            padding: 0;
            border-radius: 8px !important;
        }
        
        .accordion .btn-link {
            color: #2196F3;
            font-weight: 600;
            width: 100%;
            text-align: left;
            text-decoration: none;
            padding: 15px 20px;
        }
        
        .accordion .btn-link:hover {
            text-decoration: none;
            color: #0056b3;
        }
        
        .accordion .btn-link .fa {
            float: right;
            transition: transform 0.3s ease;
        }
        
        .accordion .btn-link.collapsed .fa {
            transform: rotate(-90deg);
        }
        
        .accordion .card-body {
            padding: 20px;
            background: #ffffff;
            border-top: 1px solid #eee;
            line-height: 1.6;
        }
        
        .faq-title {
            color: #2196F3;
            margin-bottom: 30px;
        }
	
	
/* Styles ARTICLES pour les titres h2 */
h2 {
    color: #1a5f7a;
    padding-bottom: 10px;
    margin-top: 30px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e6f3f7;
}

/* Styles pour les titres h3 */
h3 {
    color: #2c88b0;
    margin-top: 20px;
    margin-bottom: 15px;
}

/* Styles pour les listes */
ul.doted {
    list-style: none;
    padding-left: 0;
    margin: 15px 0;
}

/* Styles pour les éléments de liste */
li.doted {
    color: #3498db;
    padding: 8px 0;
    padding-left: 25px;
    position: relative;
}

/* Ajouter un point bleu avant chaque élément de liste */
li.doted::before {
    content: "•";
    color: #3498db;
    position: absolute;
    left: 8px;
    font-size: 1.2em;
}
	
/* animated-title */
.animated-title {
    background: linear-gradient(45deg, #2196F3, #64B5F6);
    color: white;
    padding: 15px 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
    transform: translateY(0);
    transition: transform 0.3s ease;
    animation: float 3s ease-in-out infinite;
}

.animated-title:hover {
    transform: translateY(-5px);
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}
	
	
/* Style du bouton de signalement */
.report-btn {
    position: relative;
    padding: 12px 24px;
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(45deg, #ff4b4b, #ff6b6b);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 75, 75, 0.3);
}

.report-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 75, 75, 0.4);
}

.report-btn:active {
    transform: translateY(1px);
}

.report-btn i {
    margin-right: 8px;
    font-size: 1.2em;
    vertical-align: middle;
}

.report-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2));
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.report-btn:hover::before {
    transform: translateX(100%);
}

/* Animation de pulsation */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 75, 75, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 75, 75, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 75, 75, 0);
    }
}

.report-btn.pulse {
    animation: pulse 2s infinite;
}
	
/* Popup report comment */	
.modal-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.modal-footer {
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

.report-btn-com {
    color: #dc3545;
    background: transparent;
    border: none;
    padding: 0.25rem 0.5rem;
}

.report-btn-com:hover {
    color: #c82333;
}

#reportAlert {
    margin-bottom: 1rem;
}
	
/* Styles pour la section de présentation */
.presentation-section {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.presentation-section:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    pointer-events: none;
}

.presentation-section:hover {
    transform: translateY(-2px);
}

.presentation-section .display-4 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    position: relative;
}

.presentation-section .display-4:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 3px;
}

.presentation-section .lead {
    opacity: 0.95;
}

.presentation-section ul li {
    position: relative;
    padding-left: 10px;
    transition: all 0.2s ease;
}

.presentation-section ul li:hover {
    transform: translateX(5px);
}

/* Animation des émojis */
.presentation-section .emoji {
    display: inline-block;
    transition: transform 0.3s ease;
}

.presentation-section .emoji:hover {
    transform: scale(1.2);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .presentation-section {
        padding: 2rem 0;
    }
    
    .presentation-section .display-4 {
        font-size: 2rem;
    }
    
    .presentation-section .lead {
        font-size: 1rem;
    }
}

/*-------------------Styles pour les graphiques d'incidents - PAGE NEWS---------------*/

.incident-chart {
  height: 40px !important;
  filter: drop-shadow(0 0 2px rgba(0, 123, 255, 0.2));
  transition: transform 0.4s ease;
  will-change: transform; /* Optimisation des performances */
}

.incident-chart:hover {
  transform: scale(1.05);
}

/* Animation du battement cardiaque plus lente */
@keyframes pulse2 {
  0% {
    filter: drop-shadow(0 0 2px rgba(0, 123, 255, 0.2));
  }
  50% {
    filter: drop-shadow(0 0 4px rgba(0, 123, 255, 0.4));
  }
  100% {
    filter: drop-shadow(0 0 2px rgba(0, 123, 255, 0.2));
  }
}

.incident-chart.pulsing {
  animation: pulse2 3s infinite;
}

/* Style pour la ligne du graphique */
canvas.incident-chart {
  /*background: linear-gradient(to right, rgba(0, 123, 255, 0.05), rgba(0, 123, 255, 0.1));*/
  border-radius: 4px;
  padding: 4px;
}

/* Styles pour le conteneur du graphique */
.chart-container {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 4px;
}
	
	
/* Styles spécifiques pour mobile */
@media (max-width: 768px) {
.incident-chart {
  height: 80px !important;
  filter: drop-shadow(0 0 2px rgba(0, 123, 255, 0.2));
  transition: transform 0.4s ease;
  will-change: transform; /* Optimisation des performances */
}
}