/* =========================================================
 *  CAROUSEL - Feuille de style principale
 * ---------------------------------------------------------
 *  Rôle :
 *   → Structure et habillage du module #carousel
 *   → Mise en page responsive (mobile / desktop)
 *   → Styles des slides, boutons, points et transitions
 *
 *  Fichiers associés :
 *   → carousel.js  (logique fonctionnelle)
 *   → functions.php (enqueue automatique)
 *
 *  Auteur : Erwan Roujean — 7minutesdesciences.fr
 *  Version : 1.0
 * ======================================================= */

#carousel p,
#carousel-dif p {	 
margin-top: 0pt;	 
margin-bottom: 10pt;
line-height: 150%;	 
font-size: 12pt;	 
font-family: Arial, sans-serif;	 
}

#carousel-p {font-size: 12pt;}	 

#carousel-dif p,
#carousel-dif .table01{font-size: 16pt !important;}

#carousel-dif p.fw,
#carousel-dif p .fw {font-weight: bold;}

#carousel-dif p.ul,
#carousel-dif p .ul {text-decoration: underline;}


#carousel p.doc-title {	 	 
font-size: 12pt;
font-weight: bold;
}

#carousel-dif h2,
#carousel h2 {
  color: #0f4c5c;
  font-size: 2.06em;
  font-family: Oswald;
  font-weight: 700;
  margin: 0 0 0 0;
	}
	
#carousel-dif h3,
#carousel h3 {
  color: #0f4c5c;
  font-size: 1.79em;
  font-family: Oswald;
  font-weight: 700;
  margin: 0 0 0 0;
	}	
	
#carousel-dif h1::after,
#carousel-dif h2::after,
#carousel h1::after,
#carousel h2::after {
  content: "";
  display: block;
  width: 70px;
  height: 4px;
  margin-top: 6px;
  border-radius: 2px;
  background: linear-gradient(90deg, #F6EDB5, #F4E8A2);
}

.carousel-title {
display: flex;
  flex-direction: column;
  gap: 0px;
  margin: 5px 0 15px;
  padding-bottom: 12px;
  background-color: #f9f9f9;
  border-bottom: 4px solid #1e7e99;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  font-family: 'Oswald', sans-serif;
  color: #11718c;
  font-size: 10pt;
  line-height: 200%;
  border-radius: 4px;
}


/* ==== Contenaire global ==== */
.carousel-container {
  display: grid;
  grid-template-columns: 35px auto 35px;
  grid-template-rows: auto ;
  gap: 0px;
  background-color: transparent;
  padding: 0px;
} 
/* ==== Contenaire permettant au js de traquer les slides ==== */
.slides-flex-track {
  display: flex;
  transition: transform 0.3s ease-in-out;
  border: 3pt solid #e6f0f3;
  padding: 10px;
}
/* ==== Contenaire de la Slide ==== */
.slides-flex  { 
    gap: 20px;
	display: flex;
	flex: 0 0 100%; /*chaque slide prend 100% du conteneur */  
	align-items: center;
    box-sizing: border-box;
}
.slides-flex > div {
  	border-right: 1px solid #ccc; /* barre entre les deux */
	padding-right: 20px; /* pour compenser le gap 20px */
}
.slides-flex > div:last-child { /* enlever la bordure sur le dernier élément */
    border-right: none;
    padding-right: 0px;
}
@media screen and (max-width: 768px) {
  .slides-flex {
    flex-direction: column;
    align-items: stretch;
  }

  .slides-flex > div {
    border-right: none;
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
  }

  .slides-flex > div:last-child {
    border-bottom: none;
    padding-bottom: 0px;
  }

  .carousel-container {
    grid-template-columns: 1fr;
  }

  .carousel-container button {
    display: none;
  }
}
/* ==== Indicateurs de slide ==== */
.dots-container { /* COntainer des DOTS*/
    position: relative; 
    display: flex;
    justify-content: center;
    gap: 10px; 
    z-index: 10; /* S'assurer que les puces sont visibles par-dessus d'autres éléments */
    margin-top: 10px; 
    margin-bottom: 10px;
    text-align: center; 
}
.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #bbb;
    cursor: pointer;
    transition: background-color 0.3s;
}
.dot.active {
    background-color: #0f4c5c;
}
/* ==== Boutons de navigation ==== */
.btn-slide {
    padding: 3px 5px;
    background-color: rgba(34, 170, 161, 0.2);
    color: white;
    border: 2px solid rgba(34, 170, 161, 0.3);
    cursor: pointer;
    font-size: 12px;
    border-radius: 5px;
    transition: all 0.3s ease;
}
.btn-slide:hover {
    background-color: rgba(34, 170, 161, 0.5);
    border-color: rgba(34, 170, 161, 0.6);
    transform:  scale(1.3);
}

/* Masquage en CSS optionnel pour smooth fallback */
.hide-on-mobile { display: block; }
.hide-on-desktop { display: block; }
@media screen and (max-width: 768px) {
  .hide-on-mobile { display: none; }
}
@media screen and (min-width: 769px) {
  .hide-on-desktop { display: none; }
}