/* File: static/css/style.css */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* Global styles */

/* Pour éviter de voir les menus au chargement de la page */
[x-cloak] { display: none !important; }


/* Pour masquer la scrollbar tout en gardant le scroll actif */

/* Sur Firefox */
* {
  scrollbar-width: none; /* supprime la scrollbar */
}

img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none; /* iOS: supprime menu "Enregistrer l'image" */
  -webkit-user-select: none;
  user-select: none;
}


/* Sur Chrome, Edge, Safari */
*::-webkit-scrollbar {
  display: none; /* cache la scrollbar */
}

  @media (max-width: 768px) {
    /* Met la sidebar gauche en bas */
    .sidebar {
        display: none;
    }

    /* Cache la navbar droite */
    .right-navbar {
        display: none !important;
    }

    .language-selector {
      display: none !important;
    }

}


    @media (max-width: 964px) {
      .right-navbar {
        display: none !important;
      }
    }

.right-navbar {
  overflow-y: auto;
}

.card-post {
  background-color: rgba(147, 197, 253, 0.07); /* bleu pastel */
}

.card-debat {
  background-color: rgba(110, 231, 183, 0.07); /* vert émeraude pastel */
}

.card-sondage {
  background-color: rgba(253, 230, 138, 0.07); /* jaune vanille pastel */
}

.badge-post {
  background-color: #93c5fd;
  color: #1e3a8a;
}

.badge-debat {
  background-color: #6ee7b7;
  color: #065f46;
}

.badge-sondage {
  background-color: #fbcfe8;
  color: #831843; /* framboise sombre pour contraste */
}

.reply-preview {
  /* La position relative est essentielle pour que les pseudo-éléments 
     en position absolue se positionnent par rapport à ce conteneur. */
  position: relative; 
}

/* Crée la longue ligne verticale du fil */
.reply-preview::before {
  content: '';
  position: absolute;

  /* Positionnement */
  left: 14px;  /* Se positionne à l'intérieur du padding gauche (pl-8 = 2rem = 32px) */
  top: 8px;      /* Commence tout en haut du conteneur de la réponse */
  bottom: 0; /* S'arrête un peu avant la fin pour laisser la place au "coude" */

  /* Apparence */
  width: 2px;
  background-color: #4D5562; /* Une couleur grise neutre, à ajuster selon votre thème */
  border-radius: 2px;
}

/* Crée le "coude" horizontal du fil */
.reply-preview::after {
  content: '';
  position: absolute;

  /* Positionnement */
  left: 14px;      /* S'aligne parfaitement avec la ligne verticale */
  bottom: 8px;     /* Se place exactement là où la ligne verticale s'arrête */

  /* Apparence */
  width: 12px;     /* La longueur du petit trait horizontal */
  height: 2px;
  background-color: #4D5562; /* Même couleur que la ligne verticale */
  border-radius: 2px;
}

.survey-option .bar-bg {
  position: relative;
  background-color: #e5e7eb; /* gray-200 */
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}

.survey-option .bar-fill {
  position: absolute;
  height: 100%;
  width: 0%; /* commence à 0 */
  background-color: #374151; /* gray-700 par défaut */
  transition: width 0.5s ease; /* ← animation fluide */
  border-radius: 4px;
}
.survey-option.voted .bar-fill {
  background-color: #3b82f6; /* blue-400 */
}

.like-heart {
  position: absolute;
  font-size: 48px;
  color: rgba(255, 100, 100, 0.85);
  animation: pop-fade 1.2s ease-out forwards;
  transform: translate(-50%, -50%);
  user-select: none;
}

@keyframes pop-fade {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
  }
  10% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

.active-tab::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 4px;
    background-color: #2563eb; /* équivalent à blue-600 */
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

* {
  user-select: none;
}