/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra Child avec personnalisations : image mise en avant, logo, bouton À la une et carrousels.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

.fa-chevron-down:before {
    content: "\f078";
}

.twitch-iframe-responsive iframe {
    display: block;        /* Évite le petit espace blanc sous l’iframe */
    max-width: 100%;
    max-height: 100%;
    border: 0;
}


/* ==========================================
   BACKGROUND - ARCHIVE
========================================== */
.back {
  position: relative;
  width: 100%;
  height: 261px; /* plus grande pour article unique */
  overflow: hidden;
}


.back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ==========================================
   AUDIO PLAYER
========================================== */
.audiojs {
  margin: 20px auto;
  max-width: 350px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  border-radius: 10px;
}

/* ==========================================
   BREAKING NEWS SLIDER
========================================== */
.breaking-slider-wrapper {
  width: 100%;
  overflow: hidden;
  padding: 10px 0;
}

.breaking-slider-track {
  display: flex;
  align-items: center;
  gap: 30px;
  animation: scroll-left 60s linear infinite;
  width: max-content;
}

.breaking-slider-wrapper:hover .breaking-slider-track {
  animation-play-state: paused;
}

.breaking-slide {
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0 10px;
}

.breaking-thumb {
  width: 45px;
  height: 45px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 4px;
  margin-right: 10px;
}

.breaking-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.breaking-title a {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.breaking-title a:hover {
  color: #AD0509; 
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ==========================================
   CUSTOM VERTICAL CAROUSEL
========================================== */
.custom-carousel-container {
  height: calc((90px + 8px) * 5); /* 5 posts visibles */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.custom-carousel-item {
  display: flex;
  height: 90px;
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
}

.custom-carousel-image {
  width: 35%;
  height: 100%;
  flex-shrink: 0;
}

.custom-carousel-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.custom-carousel-content {
  background-color: #AD0509;
  width: 65%;
  padding: 10px;
  display: flex;
  align-items: center;
  color: white;
  font-size: 14px;
}

.custom-carousel-content a {
  color: white;
  text-decoration: none;
  font-weight: 600;
}

.custom-carousel-controls {
  position: absolute;
  top: 0px !important;
  right: 0px !important;
  display: flex;
  gap: 8px;
  z-index: 10;
}

.custom-carousel-controls button {
  display: flex !important;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  background-color: rgba(128, 128, 128, 0.6);
  border-radius: 0px !important;
  color: white;
  font-size: 18px;
  text-align: center !important;
  cursor: pointer;
}

.custom-carousel-controls button:hover {
  background-color: #AD0509;
}

/* ==========================================
   SEARCH BOXES
========================================== */
#search-f8eabe6,
#search-abfa001 {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 127%;
  left: 50%;
  transform: translateX(-81%);
  width: 300px;
  max-width: 90vw;
  padding: 12px 16px;
  font-size: 16px;
  border: 1px solid #ccc;
  background-color: #000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  color: #fff !important;
}

.search-visible {
  visibility: visible !important;
  opacity: 1 !important;
}

/* ==========================================
   SEARCH BUTTON
========================================== */
.e-search-submit {
  color: white !important;
  border: none !important;
  padding: 10px 15px !important;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
  position: relative;
  z-index: 10000;
}

/* ==========================================
   YOUTUBE LIVE BOX
========================================== */
.youtube-live-wrapper {
  transition: all 0.5s ease-in-out;
  border-radius: 0px !important;
}

.youtube-live-inner {
  position: relative;
  transition: all 0.5s ease-in-out;
  border-radius: 0px !important;
}

.youtube-live-wrapper.fixed-bottom {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  width: 320px;
  border-radius: 0px !important;
}

.youtube-live-wrapper iframe {
  width: 100%;
  height: 135px;
  border-radius: 0px !important;
}

.youtube-close-btn {
  position: absolute;
  display: flex !important;
  justify-content: center;
  align-items: center;
  top: 0px;
  right: -1px;
  background: #393C4080;
  border-radius: 0px;
  padding: 10px;
  color: #fff;
  border: none;
  font-size: 14px;
  width: 0px;
  height: 0px;
  line-height: 0px;
  cursor: pointer;
  visibility: hidden;
}

.youtube-close-btn:hover {
  color: #fff;
  background: #AD0509 !important;
}

.youtube-live-wrapper.fixed-bottom .youtube-close-btn {
  display: block;
}

.youtube-live-wrapper.hidden {
  display: none;
}

/* ==========================================
   IMAGE MISE EN AVANT
========================================== */
.img-mis-en-avant {
  position: relative;
  width: 100%;
  height: 450px; /* plus grande pour article unique */
  overflow: hidden;
}

.img-mis-en-avant img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ==========================================
   LOGO HEADER
========================================== */
.img-logo-header {
  position: relative;
  height: 71px; /* Ajuste selon ton design */
  overflow: hidden;
}

.img-logo-header img {
  width: 100%;
  height: 71px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Superposition optionnelle */
.img-logo-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.img-mis-en-avant {
  position: relative;
  width: 100%;        /* prend toute la largeur disponible */
  height: 261px;       /* ou fixe une hauteur si nécessaire */
  overflow: hidden;
}

.img-mis-en-avant img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* remplit le conteneur comme un background */
  object-position: center;  /* centre l'image */
  display: block;
}
.img-mis-en-avant::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 5%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none; /* permet de cliquer sur l'image en dessous */
  z-index: 1; /* assure que le dégradé est au-dessus de l'image */
}


/* ==========================================
   MEDIA QUERIES RESPONSIVE
========================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  #search-f8eabe6,
  #search-abfa001 {
    width: 40vw;
    transform: translateX(-84%);
  }

  .img-logo-header {
    height: 55px;
  }

  .img-logo-header img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }
}

@media (max-width: 767px) {
  #search-f8eabe6,
  #search-abfa001 {
    left: 60%;
    transform: translateX(-78%);
    width: 64vw;
  }

  .img-logo-header {
    height: 45px;
  }

  .img-logo-header img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }
}