/* HEADER */

#header {
  font-size: 0.9rem !important;
  font-weight: 800 !important;

}

#header > .container.grid-lg {
  max-width: 1010px !important;
}

#header ul > li > ul {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
}

.header-date-edition {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 30%;
    left: 5%;
    width: 10vw; /* Utilisation d'une unité relative */
    height: 10vw; /* Utilisation d'une unité relative */
    border-radius: 50%;
    background-color: rgb(71, 112, 133);
    color: white;
    text-align: center;
    z-index: 999;
}

.header-date-edition p {
    font-size: 1rem;
    margin: 0;
}

@media screen and (max-width: 1024px) {
    .header-date-edition {
      top: 12%;
    }
    .header-date-edition p {
      font-size: 0.7rem;
    }
}

@media screen and (max-width: 768px) {
    .header-date-edition {
        width: 15vw;
        height: 15vw;
        top: 10%;
    }
    .header-date-edition p {
      font-size: 0.6rem;
    }

}



/* MENU NAVIGATION MODULAR */

.manual-link > a:before {
  content: none !important;
}

.manual-link {
  display: flex !important; /* Utilise Flexbox */
  justify-content: center !important; /* Centre le contenu horizontalement */
  align-items: center !important; /* Centre le contenu verticalement (si nécessaire) */
}

.manual-link > span, .manual-link > a {
  display: inline !important;
}

/* ECARTEMENT ENTRE MODULES */

.modular-text {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Titre H1 de toutes les pages */
h1 {
  margin-bottom: 0.4em !important;
}

/* MODULE EDITO*/ 

.edito-body h2 {
  font-size: 1.5rem !important;  
}

/* MODULE HERO */

.modular-hero h3 {
  margin-bottom: 3rem;
}

.modular-hero a {
  color: #fff;
  border-color: #227ded;
  background: #3085ee;
  font-size: 1rem;
  height: 2rem;
  padding: .35rem .6rem;
}

.modular-hero a:hover {
  text-decoration: none;
  border-color: #227ded;
}

/* MODULE PROGRAMMATION */

/* Titre H2 */
.programmation h2 {
  font-weight: 200 !important;
  border-bottom: 1px solid #AAA;
  color: #333;
  text-align: center;
  padding: 5px 0px;
  margin: 1em 0px !important;
}

.programmation p.titre {
  font-size: 1em;
  margin-bottom: 0.5em;
}

.programmation p.date {
  font-size: 0.9em;
  color:#AAA;
  margin-bottom: 0.5em;
}

.programmation .modular-events.columns {
  display: flex;
  justify-content: space-between;
}

.programmation .modular-events.column {
  flex: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0.3em;
  text-align: center;
}

.programmation .img-container {
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
  margin: 0 auto;
  border: 4px solid lightgray; /* Bordure transparente par défaut */
  transition: border-color 0.3s ease; /* Transition de couleur de la bordure */
  box-sizing: border-box; /* Inclure la bordure dans la taille totale de l'élément */
}

.programmation .img-container:hover {
  border: 4px solid #3085ee;
}

.programmation .img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.programmation .img-container img:hover {
  /* transform: scale(1.1); */
  cursor: pointer;
}

.vignette-event.default {
  transform: scale(3);
  /* transform: translate(10px, 10px);*/
}

/* MODULE SPONSOR */

/* old avec positionnement flex
.modular-sponsors.columns {
  align-items: center;
  text-align: center;
  width: 70%;
}*/ 

.modular-sponsors.grid-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* Crée une grille avec 5 colonnes de largeur égale */
  grid-gap: 0.5rem; /* Espace entre les éléments */
  align-items: center; /* Centre verticalement les éléments */
  justify-content: center; /* Centre horizontalement les éléments */
}

.modular-sponsors.item a {
    display: flex;
    align-items: center;
    justify-content: center; /* Pour centrer également horizontalement */
}

.logo-sponsor-img.logo-mairie-gahard {
  max-width: 90%;
}

.logo-sponsor-img.logo-ccvia{
  max-width: 100%;
}

.logo-sponsor-img.logo-region-bretagne{
  max-width: 60%;
}

.logo-sponsor-img.logo-tri-martolod{
  max-width: 70%;
}

.logo-sponsor-img.logo-radio-rennes{
  max-width: 60%;
}

.logo-sponsor-img.logo-reine-des-pres {
  max-width: 80%;
}

.logo-sponsor-img.logo-comite-fetes {
  max-width: 60%;
}

.logo-sponsor-img.logo-vivier-des-saveurs {
  max-width: 90%;
}

.logo-sponsor-img.logo-biocoop-aubigne {
  max-width: 80%;
}

/* MODULE ICONE */

.modular-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5rem;
  height: 4.8rem;
  border-radius: 50%;
  background: #555555;
  text-align: center;
}

.modular-icon svg {
  scale: 1.5;
}

/* MODULE INFOS PRATIQUES */

#infos-pratiques .modular-text {
  padding-top: 0.2rem;
}

#infos-pratiques h2 {
  margin: 0;
  border-bottom: solid #AAA;
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

#infos-pratiques p {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* PAGE EVENT */


.event.gallery h2 {
  font-size: 1.2rem !important;
  padding: 0.5rem;
  padding-left: 20rem;
}

.section.event{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.event.container{
  display: flex;
  justify-content: flex-start;
  align-items: left;
  flex-direction: column;
  padding-top: 0 !important;
}

.event.info {
  color: #EEEEEE;
  padding: 0.5rem;
  padding-left: 20rem;
}

.event.type{
  background-color: #AA076B;

}

.event.date{
  background-color: rgb(216, 176, 0);
  color: #ffffff;
}

.event.lieu{
  background-color: #00CED1;
  color: #ffffff;
  margin-bottom: 2rem;
}

.event.content {
  padding: 0.5rem;
  padding-left: 20rem;
}

.prevEvent, .nextEvent {
  border-radius: 5%;
  width: 3rem;
  height: 3rem;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
  background-color: rgba(0,0,0, .5);
  font-size: 1.8rem;
  display: flex;
  justify-content: center; 
  align-items: center;
}

.prevEvent > a {
  text-decoration: none;
  transform: translateY(-5%);
  color: #FFF !important;
}

.nextEvent > a {
  text-decoration: none;
  transform: translateY(-5%);
  color: #FFF !important;
}

.prevEvent:hover, .nextEvent:hover {
  text-decoration: none;  
}

.prevEvent {
  left: 1rem;
}

.nextEvent {
  right: 1rem;
}

#gallery-photos p {
  display:flex;
  justify-content: center;
  align-items: center;
}

/* PAGE ARCHIVES */

.container.archives {
  padding-top: 10rem;
}

.grille-archives {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 colonnes égales */
  gap: 0; /* Espacement entre les éléments */
  width: 70%; /* Largeur de la grille */
  margin: 0 auto; /* Pour centrer la grille horizontalement */
}

.archive-card {
  width: 100%; /* Pour que chaque carte occupe toute la largeur de la grille */
  position: relative; /* Pour positionner l'image à l'intérieur */
  overflow: hidden; /* Pour masquer le contenu en dehors de la carte */
}

.archive-card-body {
  display: flex;
  align-items: end;
  justify-content: center;
  width: 100%; /* Pour que chaque carte occupe toute la largeur de la grille */
  padding-top: 100%; /* Ratio de l'image (hauteur / largeur) */
  position: relative; /* Pour positionner l'image à l'intérieur */
  background-size: cover; /* Pour couvrir toute la surface de la carte */
  background-position: center; /* Centrer l'image dans la carte */
}

.archive-card-body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* Couleur de fond transparente avec opacité de 0.5 */
}

.archive-card-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.archive-card-link:hover {
  text-decoration: none;
}

.archive-card-text {
  color: white;
  font-size: 5rem;
  opacity: 0.6; /* Opacité par défaut */
  transition: opacity 0.3s ease; /* Animation de transition */
  justify-content: center;
}

.archive-card:hover {
  cursor: pointer;
}

.archive-card:hover .archive-card-text {
  opacity: 0.95; /* Opacité réduite au survol */
}

/* FOOTER */

footer {
  background-color: #333;
  color: white;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  max-width: 60%;
  margin: 0 auto;
}

@media screen and (max-width: 1000px) {
    .footer-container {
        max-width: 90%;
    }
}

@media screen and (max-width: 400px) {
    .footer-container {
        max-width: 100%;
    }
}


.footer-container > section {
  width: 33%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.footer-container > section a{
  color: white;
}

.footer-container > section a:visited{
  color: white;
}

.footer-container > section a:hover{
  text-decoration: none;
}

.footer-container > section ul {
  list-style: none;
  padding: 0;
}

.footer-container > section ul li {
  margin-bottom: 10px;
}

.follow-us {
  margin-bottom: 10px;
}

.social-icons {
  display: flex;
  justify-content: center;
}

.social-icons a {
  margin: 5px;
}