/* 
 Theme Name:     Fête du peuple jurassien
 Author:         Kaufmann Interactive Design
 Author URI:     https://www.k-id.ch
 Template:       Divi
 Version:        1.0
 Description:   A Child Theme built using the elegantmarketplace.com Child theme maker
Developed by Andrew Palmer for Elegant Marketplace www.elegantmarketplace.com Free to use and duplicate as many times as you like
 Wordpress Version: 5.9.10
*/ 


/* ----------- PUT YOUR CUSTOM CSS BELOW THIS LINE -- DO NOT EDIT ABOVE THIS LINE --------------------------- */ 

/* Fonts */
@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-Bold.woff2') format('woff2'),
        url('assets/fonts/Montserrat-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-Regular.woff2') format('woff2'),
        url('assets/fonts/Montserrat-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Galada';
    src: url('assets/fonts/Galada-Regular.woff2') format('woff2'),
        url('assets/fonts/Galada-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Corps de texte en Montserrat */
body {
  font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 1.25rem !important;
}

/* Titres en Galada */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Galada', cursive;
	margin-bottom: .75rem
}

/* ====================================
   Styles typographiques pour les titres
   ==================================== */

/* ========== H1 ========== */
/* Mobile (jusqu’à 599px) : 32px */
h1 {
  font-size: 2.8rem !important; /* 2 rem × 16 = 32px */
  line-height: 1.2;
  margin-bottom: 0.5em;
}

/* Tablette (600px – 1023px) : 48px */
@media (min-width: 600px) {
  h1 {
    font-size: 3.5rem !important; /* 3 rem × 16 = 48px */
  }
}

/* Desktop (≥1024px) : 72px */
@media (min-width: 1024px) {
  h1 {
    font-size: 4.5rem !important; /* 4.5 rem × 16 = 72px */
  }
	.home h1, 
	.page-id-170 h1{
		font-size:1.5rem  !important
	}
}



/* ========== H2 ========== */
/* Mobile : 24px */
h2 {
  font-size: 2.5rem; /* 1.5 rem × 16 = 24px */
  line-height: 1.3;
  margin-bottom: 0.75em;
}

/* Tablette : 32px */
@media (min-width: 600px) {
  h2 {
    font-size: 2rem; /* 2 rem × 16 = 32px */
  }
}

/* Desktop : 48px */
@media (min-width: 1024px) {
  h2 {
    font-size: 3rem; /* 3 rem × 16 = 48px */
  }
}


/* ========== H3 ========== */
/* Mobile : 20px */
h3 {
  font-size: 2rem; /* 1.25 rem × 16 = 20px */
  line-height: 1.4;
}

/* Tablette : 24px */
@media (min-width: 600px) {
  h3 {
    font-size: 1.5rem; /* 1.5 rem × 16 = 24px */
  }
}

/* Desktop : 32px */
@media (min-width: 1024px) {
  h3 {
    font-size: 2rem; /* 2 rem × 16 = 32px */
  }
}


/* ========== H4 ========== */
/* Mobile : 18px */
h4 {
  font-size: 1.125rem; /* 1.125 rem × 16 = 18px */
  line-height: 1.4;
  margin-bottom: 0.75em;
}

/* Tablette : 20px */
@media (min-width: 600px) {
  h4 {
    font-size: 1.25rem; /* 1.25 rem × 16 = 20px */
  }
}

/* Desktop : 24px */
@media (min-width: 1024px) {
  h4 {
    font-size: 1.5rem; /* 1.5 rem × 16 = 24px */
  }
}


/* ========== H5 ========== */
/* Mobile : 16px */
h5 {
  font-size: 1rem; /* 1 rem × 16 = 16px */
  line-height: 1.5;
  margin-bottom: 0.75em;
}

/* Tablette : 18px */
@media (min-width: 600px) {
  h5 {
    font-size: 1.125rem; /* 1.125 rem × 16 = 18px */
  }
}

/* Desktop : 20px */
@media (min-width: 1024px) {
  h5 {
    font-size: 1.25rem; /* 1.25 rem × 16 = 20px */
  }
}


/* ========== H6 ========== */
/* Mobile : 14px */
h6 {
  font-size: 0.875rem; /* 0.875 rem × 16 = 14px */
  line-height: 1.5;
  margin-bottom: 0.5em;
}

/* Tablette : 16px */
@media (min-width: 600px) {
  h6 {
    font-size: 1rem; /* 1 rem × 16 = 16px */
  }
}

/* Desktop : 18px */
@media (min-width: 1024px) {
  h6 {
    font-size: 1.125rem; /* 1.125 rem × 16 = 18px */
  }
}


/* Header Images */
#header_img::after {
	content:'';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width:100%;
	height: 100%;
	background: 
    -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 100%);
}

/* Layouts custom */
.no-sidebar .container {
  width: 100%;
  max-width: 100%;
  padding: 0 1rem;
}
.no-sidebar .sidebar {
  display: none;
}


/* Slider */

#home-slider {
  position: relative;
  height: 100vh;
  overflow: hidden;
}


#home-slider .et_pb_module.et_pb_image {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}


#home-slider .et_pb_module.et_pb_image.active {
  opacity: 1;
  z-index: 1;
}

#home-slider .et_pb_module.et_pb_image .et_pb_image_wrap {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#home-slider .et_pb_module.et_pb_image .et_pb_image_wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Visual */
.bold { font-weight:700}
.red { color:#de353a}


/* Lien MAJ */
.nav-maj-link {
  z-index: 20;
  width: 170px;
  padding-right: 0;
  font-size: 16px;
  text-decoration: none;
  position: absolute;
  inset: 60px 0% auto auto;
}

.nav-maj-link:hover {
  text-decoration: none;
}

.nav-maj-link-text {
  margin-bottom: 0;
  padding-right: 20px;
  line-height: 24px;
}

.nav-maj-link-text.border {
  border-bottom: 3px solid #493e69;
  margin-bottom: 4px;
  padding-bottom: 4px;
  padding-right: 20px;
}
.nav-maj-link-image {
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto;
}
.nav-maj-link p {
	padding:0
}
@media screen and (min-width: 1280px) {
	.nav-maj-link {
    width: 190px;
  }

  .nav-maj-link-text {
    padding-right: 50px;
  }
}
@media screen and (max-width: 980px) {
	.nav-maj-link {
		position: absolute;
		top: 48px;
		left:0;
    width:100%;
	right:21px;
    margin-top: 0;
    font-size: 12px;
  }

  .nav-maj-link-text {
    color: #fff;
	  line-height: 130%;
  }

  .nav-maj-link-text.bold.red {
    color: #fff;
  }

  .nav-maj-link-text.border {
    color: #fff;
  }
}
@media screen and (max-width: 768px) {
	.nav-maj-link {
	
    font-size: 11px;
  }


  .nav-maj-link-text.bold.red {
    margin-bottom: 0;
  }
}


/* Actualités */
@media (min-width:980px){
#actu_header .et_pb_row {
	padding:0;
	display: flex;
	align-items: center
}
}
/* Conteneur en colonne (desktop et mobile) */
.actualites-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Chaque item en flex */
.actualite-item {
  display: flex;
  align-items: center;
  gap: 2rem;
	margin-bottom: 84px
}

/* Desktop : image à gauche / texte à droite pour #1, #3, #5… */
.actualite-item:nth-child(odd) {
  flex-direction: row;
}

/* Desktop : image à droite / texte à gauche pour #2, #4, #6… */
.actualite-item:nth-child(even) {
  flex-direction: row-reverse;
}

/* Tant que desktop, chaque moitié fait 50% */
.actualite-thumb,
.actualite-content {
  width: 50%;
}

/* Container flex par défaut en colonne (mobile) */
.dernier-actualite {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.5rem;
}

/* Les deux enfants prennent 100% en mobile */
.dernier-actualite-thumb,
.dernier-actualite-content {
  width: 100%;
}

/* À partir de 768px, on passe en ligne */
@media (min-width: 768px) {
  .dernier-actualite {
    flex-direction: row;
    align-items: center;
  }
  .dernier-actualite-thumb,
  .dernier-actualite-content {
    width: 50%;
  }
}

/* Optional : inverser image / texte si besoin */
/*
@media (min-width: 768px) {
  .dernier-actualite.inverse {
    flex-direction: row-reverse;
  }
}
*/


/* Mobile : toujours empiler image puis texte */
@media (max-width: 768px) {
  .actualite-item {
    flex-direction: column !important;
	  margin-bottom: 64px;
  }
  .actualite-thumb,
  .actualite-content {
    width: 100%;
  }
}
.actualite-title,
.dernier-actualite-title{
	margin-bottom:.5rem
}
.actualite-info,
.actualite-datetime,
.dernier-actualite-datetime {
  font-weight: bold;
	margin-bottom: 1rem
}
.actualite-datetime .actualite-date,
.dernier-actualite-datetime .date {display: block;
	text-transform:uppercase;
	color:#de353a
}

@media ( max-width:980px) {
	.et_pb_menu--style-centered .et_pb_menu__wrap {justify-content:flex-end}
}
/* Assurez-vous que le lien est en position relative */
.actualite-title a {
  position: relative;
  display: inline-block;  /* pour que la ligne suive la largeur du texte */
  text-decoration: none;  /* on enlève l’underline par défaut */
  color: inherit;
}

/* Création du pseudo-élément underline */
.actualite-title a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;            /* ajustez la distance sous le texte */
  width: 0;
  height: 2px;             /* épaisseur du trait */
  background-color: currentColor;  /* même couleur que le texte */
  transition: width 0.3s ease-in-out;
}

/* Au survol, on fait passer la largeur de 0 à 100% */
.actualite-title a:hover::after {
  width: 100%;
}
/* Appliquer une transition et définir le point de rotation */
.actualite-thumb img,
.dernier-actualite-thumb img {
  display: block;
  transition: transform 0.3s ease,
              box-shadow 0.3s ease,
	  			scale 0.3s ease;
  transform-origin: center center;
}

/* Au hover : rotation et box-shadow */
.actualite-thumb:hover img,
.dernier-actualite-thumb:hover img {
  transform: rotate(-5deg) scale(1.05, 1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* ========== Dernière actualité ========== */
.dernier-actualite-thumb img {
  display: block;
  transition: transform 0.3s ease,
              box-shadow 0.3s ease,
	  			scale 0.3s ease;
  transform-origin: center center;
}

.dernier-actualite-thumb:hover img {
  transform: rotate(-5deg) scale(1.05, 1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Prépare le lien du titre pour le pseudo-élément */
.dernier-actualite-title a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

/* Le pseudo-élément qui sera l’underline */
.dernier-actualite-title a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;            /* ajustez la distance sous le texte */
  width: 0;
  height: 2px;             /* épaisseur du trait */
  background-color: currentColor;
  transition: width 0.3s ease-in-out;
}

/* Au hover, on étend l’underline sur toute la largeur */
.dernier-actualite-title a:hover::after {
  width: 100%;
}


.artistes-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Chaque artiste en flex */
.artiste-item {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
	margin-bottom: 84px
}

/* Alternance : odd normal, even inverse */
.artiste-item:nth-child(odd)  { flex-direction: row; }
.artiste-item:nth-child(even) { flex-direction: row-reverse; }

/* Chacun prend 50% en desktop */
.artiste-thumb,
.artiste-content {
  width: 50%;
}

/* Mobile : toujours empilé */
@media (max-width: 768px) {
  .artiste-item {
    flex-direction: column !important;
  }
  .artiste-thumb,
  .artiste-content {
    width: 100%;
  }
}

/* Styles de base */
.artiste-thumb img {
  width: 100%;
  height: auto;
  display: block;
}
.artiste-title {
  margin: 0 0 .25em;
}
.artiste-subtitle {
  margin: 0 ;
	color:#de353a
}
.artiste-desc {
  margin-bottom: 1em;
	display: none
}
.artiste-links a {
  margin-right: 1em;
  color: #de353a;
  text-decoration: none;
}
.artiste-links a:hover {
  text-decoration: underline;
}
/* Point de rotation au centre et transition douce */
.artiste-thumb img {
  display: block;
  transition: transform 0.3s ease-in-out;
  transform-origin: center center;
}

/* Articles impairs → rotation +5° */
.artiste-item:nth-child(odd) .artiste-thumb img {
  transform: rotate(-5deg);
}

/* Articles pairs → rotation –5° */
.artiste-item:nth-child(even) .artiste-thumb img {
  transform: rotate(5deg);
}