@charset "UTF-8";
/*
Theme Name: lesgaillardesv2
Theme URI: https://www.lesgaillardes.fr
Author: Léo NIVET
Author URI: https://www.leonivet.com
Description: Thème pour la compagnie de théâtre Les Gaillardes. Pour toute question, contactez-moi à l'adresse web@leonivet.com.
Requires at least: WordPress 6.0
Version: 1.0
*/

:root{
 
}

@media only screen and (min-width: 1000px) {
  :root {
    --site-header-height: 50px;
    --section-title-height: 36px;
  }
}

*, *:before, *:after {
  box-sizing: border-box;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

html{
  scroll-behavior: smooth;
}

body {
  padding: 0px;
  margin: 0px;
}

h1, h2, h3, h4, h5, h6 {
 
}

img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

a, a:hover, a:focus, a:visited {
  color: inherit;
}

a {
  text-decoration: none;
}

a:hover{
  text-decoration: underline;
}

strong{
  font-weight: bold;
}

.menu-ul, .menu-ul .sub-menu{
  list-style: none;
  margin: 0;
  padding: 0;
}

p {
  max-width: 1000px;
  max-width: 900px;
}

p:first-child {
  margin-top: 0;
}

p:last-child {
  margin-bottom: 0;
}

p:empty {
  display: none;
}

figure {
  margin: 0;
}

iframe {
  width: 100%;
  display: block;
}

iframe {
  width: 100% !important;
  height: 700px;
}

@media only screen and (max-width: 1100px) {
  iframe {
    height: 550px;
  }
}
@media only screen and (max-width: 1000px) {
  iframe {
    height: 500px;
  }
}
@media only screen and (max-width: 900px) {
  iframe {
    height: 450px;
  }
}
@media only screen and (max-width: 800px) {
  iframe {
    height: 400px;
  }
}
@media only screen and (max-width: 700px) {
  iframe {
    height: 350px;
  }
}
@media only screen and (max-width: 600px) {
  iframe {
    height: 300px;
  }
}
@media only screen and (max-width: 500px) {
  iframe {
    height: 250px;
  }
}
@media only screen and (max-width: 375px) {
  iframe {
    height: 200px;
  }
}
iframe {
  width: 100%;
  display: block;
}

button{
  padding: 0;
}

blockquote {
  margin: 0;
  width: fit-content;
}

blockquote + figcaption {
  text-align: right;
  margin-top: 0.5em;
}

.bold{
  font-weight: bold;
}

/*************************/
/****** FORMS ***********/
/*************************/



/**********************
*** COLORS ************
**********************/

:root{
  --blanc:#ffffff;
  --noir:#000000;
  --bleu:#0068ff;
  --jaune:#ffec00;
  --vert:#00ff79;
  --violet:#4a01c1;
  --orange:#FFA200;
  --rouge:#FC1010;
}

.has-noir-color{ color: var(--noir); }
.has-blanc-color{ color: var(--blanc); }
.has-bleu-color{ color: var(--bleu); }
.has-jaune-color{ color: var(--jaune); }
.has-vert-color{ color: var(--vert); }
.has-violet-color{ color: var(--violet); }
.has-orange-color{ color: var(--orange); }

.has-noir-background-color{ background-color: var(--noir); }
.has-blanc-background-color{ background-color: var(--blanc); }
.has-bleu-background-color{ background-color: var(--bleu); }
.has-jaune-background-color{ background-color: var(--jaune); }
.has-vert-background-color{ background-color: var(--vert); }
.has-violet-background-color{ background-color: var(--violet); }
.has-orange-background-color{ background-color: var(--orange); }


/**********************/
/****** HEADER ********/
/*********************/

.site-header{
  background-color: rgba(255,255,255,0.9);
  
  position: relative; /* header dans le flux */
  width: 100%;
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 999;

}

.site-header.header-fixed {
  position: fixed;
  top: 0;
  left: 0;
}

.site-header.header-up{
  transform: translateY(-100%);
}

.header-inner{
  padding-left:var(--padding-body-inline);
  padding-right: var(--padding-body-inline);
  padding-top: var(--padding-body-block);
  padding-bottom: var(--padding-body-block);

  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 10px;
  align-items: center;
  background-color: var(--blanc);
}

.header-inner *{
  display: flex;
  align-items: center;
  line-height: 0;
}

.menu-toggle-open{
  display: none;
}

.site-logo{
  display: flex;
  align-items: center;
  margin: 0;
  transform: translateY(-2px);
}

.site-logo a{
  display: flex;
  align-items: center;
}

.site-logo img{
  max-width: 150px;
  line-height: 0;
}

@media only screen and (min-width: 1000px) {

  .site-header .menu-toggle img
  {
    height: 30px;
  }

  .site-logo img{
    max-width: 200px;
  }

  .site-header .search-toggle img{
    height: 18px;
  }
}

.search-form-wrapper{
  display: none;
  position: absolute;
  width: 100%;
  font-size: var(--fs-body-big);
  padding-left:var(--padding-body-inline);
  padding-right: var(--padding-body-inline);
  padding-top: var(--padding-body-block);
  padding-bottom: var(--padding-body-block);

  background-color: rgba(255,255,255,0.9);
  backdrop-filter: blur(5px); /* flou derrière l’élément */
  -webkit-backdrop-filter: blur(5px); /* compatibilité Safari */
}

.search-form-wrapper .search-form{
  display: grid;
  grid-template-columns: 1fr auto;
}

.main-menu-wrapper{
  display: none;
  padding-left:var(--padding-body-inline);
  padding-right: var(--padding-body-inline);
  padding-top: var(--padding-body-block);
  padding-bottom: var(--padding-body-block);
  padding-top: calc(var(--padding-body-block) * 2);
  min-height: 100vh;
  min-height: 100dvh;

  position: absolute;
  width: 100%;
  background-color: rgba(255,255,255,0.9);
  backdrop-filter: blur(5px); /* flou derrière l’élément */
  -webkit-backdrop-filter: blur(5px); /* compatibilité Safari */
}

.main-menu-wrapper::before{
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-image: url('assets/les-gaillardes-2024.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.3; /* opacité du background */
  z-index: -1;  /* derrière le contenu */
}

.menu-principal > li{
  font-family: var(--ff-2);
  font-size: var(--fs-title);
  margin-bottom: calc(var(--padding-body-block) * 2);
}

.menu-principal > li > a::before{
  content:'';
  display: inline-block;
  width: 19px;
  height: 8px;
  margin-right: 10px;
  background-image: url("data:image/svg+xml,%3Csvg width='19' height='8' viewBox='0 0 19 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.3536 4.03544C18.5488 3.84018 18.5488 3.52359 18.3536 3.32833L15.1716 0.146351C14.9763 -0.0489116 14.6597 -0.0489116 14.4645 0.146351C14.2692 0.341613 14.2692 0.658195 14.4645 0.853457L17.2929 3.68188L14.4645 6.51031C14.2692 6.70557 14.2692 7.02216 14.4645 7.21742C14.6597 7.41268 14.9763 7.41268 15.1716 7.21742L18.3536 4.03544ZM18 3.68188L18 3.18188L4.37114e-08 3.18188L0 3.68188L-4.37114e-08 4.18188L18 4.18188L18 3.68188Z' fill='%231E1E1E'/%3E%3C/svg%3E%0A");
}


.menu-principal > li > ul{
  font-family: var(--ff-1);
  font-size: var(--fs-body-small);
  margin-left:calc(30px + var(--padding-body-inline)) !important;
}

.menu-principal > li > ul li{
  margin-top: var(--padding-body-block);
}

.network-nav{
  display: flex;
  align-items: center;
  justify-content: right;
  margin-top: calc(var(--padding-body-block) * 4);
  gap:var(--padding-body-inline)
}

.secondary-nav-header{
  margin-top: calc(var(--padding-body-block) * 2);
  margin-bottom: calc(var(--padding-body-block));
  display: flex;
  justify-content: center;
}

.menu-secondaire{
  display: flex;
  align-items: center;
  gap:var(--padding-body-inline)
}

.menu-secondaire a{
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wp-block-columns:last-child {
  margin-bottom: 0;
}

#menu-menu-principal .menu-item > a{
  display: block;
}

#menu-menu-principal .menu-item > a:not(:last-child){
  margin-bottom: calc(var(--padding-body-block) * 2);
}

@media only screen and (min-width: 1000px) {

  .main-menu-wrapper{
    grid-template-rows: 1fr auto auto;
    min-height: calc(100vh - var(--site-header-height));
    min-height: calc(100dvh - var(--site-header-height));
  }

  .main-menu-wrapper::before{
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-image: url('assets/Les-Gaillardes-Menu-cut.png');
    background-size: contain;
    background-position: left bottom;
    opacity: 0.3; /* opacité du background */
    z-index: -1;  /* derrière le contenu */
  }

  #menu-menu-principal{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: var(--padding-body-inline);
    row-gap: calc(var(--padding-body-block) * 4);
    padding-top: calc(var(--padding-body-block) * 2);
  }

  .menu-secondaire{
    width:  100%;
    justify-content: flex-end;
  }

  .secondary-nav-header{
    margin-top: calc(var(--padding-body-block));
  }

 
}

/**********************/
/****** MAIN ********/
/*********************/

main{
  
}

main p > img{
  max-height: 90vh;
}

@media only screen and (min-width: 1000px) {
  main p > img{
    min-width: 0px !important;
    margin:0 !important;
  }
}

/**********************/
/****** SECTIONS ********/
/*********************/

.section-title{
  margin: 0;
}

.section-sous-titre{
  font-weight: 300;
}

.section-toggle{
  transform: translate(4px, 2px);
}

.section-toggle svg{
 transform: scale(1.2);
}

.section-toggle.opened .fermer-onglet{
  display: none;
}

.section-toggle.closed .ouvrir-onglet{
  display: none;
}

.section-toggle.always_opened .ouvrir-onglet, .section-toggle.always_opened .fermer-onglet{
  display: none;
}

.section-content.opened{
  display:block;
}

.section-content.closed{
  display:none;
}

/**********************/
/****** IMAGES ********/
/*********************/

.single-content-journee{
  position: relative;
}

.wp-block-image{
  margin-left:calc(var(--padding-body-inline) * -1);
  margin-right:calc(var(--padding-body-inline) * -1);
}

@media only screen and (min-width: 1000px) {
  .wp-block-image:first-child{
    margin-left:calc(var(--padding-body-inline) * -1);
    margin-right:0;
  }
}

.single-content > .wp-block-image:first-child,
.section-content > .wp-block-image:first-child,
.single-content > .wp-post-image:first-child{
  margin-top: calc(var(--padding-body-block) * -2);
}

.single-content > .wp-block-image:last-child,
.section-content > .wp-block-image:last-child,
.single-content > .wp-post-image:last-child{
  margin-bottom: calc(var(--padding-body-block) * -2);
}

.single-content > .wp-block-image:not(:first-child),
.section-content > .wp-block-image:not(:first-child){
  margin-top: calc(var(--padding-body-block));
}

.single-content > .wp-block-image:not(:last-child),
.section-content > .wp-block-image:not(:last-child){
  margin-bottom: calc(var(--padding-body-block));
}

/********************** cas des médias importés ********************/

.single-content p > img{
  margin-left:calc(var(--padding-body-inline) * -1);
  margin-right:calc(var(--padding-body-inline) * -1);
  min-width: 100vw;
}
.single-content p:first-child > img{
  margin-top: calc(var(--padding-body-block) * -2);
}

.single-content p:last-child > img{
  margin-bottom: calc(var(--padding-body-block) * -2);
}

/**********************
*** SINGLE ********/
/**********************/

.single-content{
  padding-left: var(--padding-body-inline);
  padding-right: var(--padding-body-inline);
  padding-top: calc(var(--padding-body-block) * 2);
  padding-bottom: calc(var(--padding-body-block) * 2);
}

.section-title.informations-de-derniere-minute{
  font-size: var(--fs-body-big);
  text-transform: initial;
}

/**********************
*** SPECTACLE ********/
/**********************/

@media only screen and (min-width: 1000px) {
  .single-content-spectacle,
  .single-content-itinerance{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    column-gap: var(--padding-body-inline);
    row-gap: var(--padding-body-block);
    align-items: start;
  }

  .section-content.single-content-spectacle.opened{
    display:grid;
  }

  .section-content.single-content-spectacle .single-spectacle-affiche{
    grid-row: 1 / 3;
    margin-bottom: calc(var(--padding-body-block) * -2) !important;
  }

  .section-content.single-content-spectacle .voir-plus{
    grid-column: 2 / 3;
    justify-self: left;
  }

}

/**********************/
/****** JOURNEE ********/
/**********************/

.single-content-journee{
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--padding-body-inline);
}


.single-journee-date{
  text-transform: uppercase;
  font-weight: bold;
  font-size: var(--fs-body-big);
  font-family: var(--ff-2);
  margin-top: calc(var(--padding-body-block) * 2);
}

@media only screen and (min-width: 1000px) {

  .single-content-journee{
    display: grid;
    grid-template-columns: 1fr 3fr;
    column-gap: var(--padding-body-inline);
    grid-template-rows: auto 1fr;
    row-gap: var(--padding-body-block);
  }

  .single-content-journee > .wp-block-image:first-child{
    grid-row:  1 / 3;
  }

  .single-content-journee > .single-journee-date{
    margin-top: 0;
  }

  .template-journee .section-content{
    display: grid;
    grid-template-columns: 1fr 3fr;
    column-gap: var(--padding-body-inline);
    align-items: start;
    justify-items: left;
    margin-bottom: calc(var(--padding-body-block) * 2);
    padding-bottom: 0;
    grid-template-rows: auto 1fr;
  }

  .template-journee .section-content > .wp-block-image:first-child{
    margin-bottom: calc(var(--padding-body-block) * -2) !important;
  }

  /*.template-journee .section-content:nth-child(2){
    grid-template-columns: 1fr;
  }*/

  .template-journee .section-content:nth-child(2) .liste-evenements{
    grid-template-columns: 1fr 1fr 1fr;
  }

  .liste-evenements .evenement{
    padding-top: 0 !important;
  }

  .template-journee .wp-block-image{
    grid-row: 1 / 3;
    margin-bottom: 0 !important;
  }

  .template-journee .voir-plus{
    grid-column: 2 / 3;
  }

  .template-journee .section-content:nth-child(2) .voir-plus{
    grid-column: 2 / 2;
  }
}

/***********************
*** MOSAIQUE ********/
/***********************/

.mosaique-wrapper{
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--padding-body-inline);
}

.mosaique-item{
  padding-top: var(--padding-body-block);
  padding-bottom: var(--padding-body-block);
  padding-left: var(--padding-body-inline);
  padding-right: var(--padding-body-inline);

  border: solid 1px var(--noir);
   
}

.mosaique-item:hover{
  background-color: var(--hover-color);
  color: var(--hover-text-color);
  background-position: right bottom;
  background-image: linear-gradient(135deg, rgba(0,0,0,0.1) 60%, transparent 60%);
  transition: background 0.5s ease, color 0.2s ease;
}

.mosaique-item__header{
  display: grid;
  grid-template-columns: auto auto;
  column-gap: var(--padding-body-inline);
  margin-bottom: calc(var(--padding-body-block) * 2);
}

.mosaique-content .evenement{
  border-top: none !important;
}

.mosaique-content .content-event, 
.template-journee .content-event{
  display: grid;
  grid-template-columns: 1fr;
}

.mosaique-content :not(.info-derniere-minute) > .emoji,
.template-journee :not(.info-derniere-minute) > .emoji{
  display: none !important;
}

.mosaique-content .event-meta,
.template-journee .event-meta{
  grid-row: 1 / 2;
}

.mosaique-content .event-lieu,
.template-journee .event-lieu{
  margin:0 !important;
}

.mosaique-content .event-lieu-nom,
.template-journee .event-lieu-nom{
  font-weight: normal !important;
}

.pagination {
  display:flex;
  gap:calc(var(--padding-body-inline) * .5);
  justify-content:center;
  flex-wrap:wrap;
  margin-top: calc(var(--padding-body-block) * 2);
  grid-column: 1 / -1;
}

.pagination button,
.pagination a{
  opacity: .5;
}

.pagination button:hover,
.pagination a:hover{
  opacity: 1;
  text-decoration: none;
}

.pagination button.active,
.pagination a.current {
  opacity: 1;
}

.pagination .show-all{
  opacity: 1;
}

@media only screen and (min-width: 1000px) {
  .mosaique-wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: var(--padding-body-inline);
    row-gap: var(--padding-body-block);
    align-items: stretch;
    justify-items: left;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .mosaique-content .liste-evenements{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .mosaique-item{
    margin-top:0 !important;
  }
}


/***********************
*** LISTE EVENEMENTS ***
***********************/

.liste-evenements{
  list-style: none;
  padding-left: 0;
  margin:0;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: calc(var(--padding-body-block) * 2);
}

@media only screen and (min-width: 1000px) {
  .liste-evenements{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(auto-fill, minmax(150px, 1fr));
    column-gap: calc(var(--padding-body-inline) * 4);
  }
}

.mosaique-item:not(:first-child){
  margin-top: calc(var(--padding-body-block) * 2);
}

.pagination-mosaique{
  margin-top: calc(var(--padding-body-block) * 2);
}

.liste-evenements .evenement{
  /*border-top: solid .5px var(--noir);*/
  padding-top: calc(var(--padding-body-block) );
}

.event-nom{
  font-family: var(--ff-2);
  text-transform: uppercase;
  font-weight: bold;
}

@media only screen and (min-width: 1000px) {
  .event-nom{
    font-size: var(--fs-body-big);
  }
}

.event-sous-titre{
  font-family: var(--ff-2);
  text-transform: uppercase;
  font-weight: 200;
}

.event-lieu:not(:first-child){
  margin-top: calc(var(--padding-body-block));
}

.event-lieu:not(:last-child){
  margin-bottom: calc(var(--padding-body-block));
}

.event-lieu-nom{
  font-weight: bold;
}

.event-description:not(:first-child){
  margin-top: calc(var(--padding-body-block));
}

.event-description:not(:last-child){
  margin-bottom: calc(var(--padding-body-block));
}

.event-inscription-obligatoire:not(:first-child){
  margin-top: calc(var(--padding-body-block));
}

.event-info-derniere-minute:not(:first-child){
  margin-top: calc(var(--padding-body-block));
}

.info-derniere-minute{
  background-color: var(--rouge);
  color:var(--blanc);
  padding: calc(var(--padding-body-block) * 0.5) calc(var(--padding-body-block) * .5);
  margin-block : calc(var(--padding-body-block));
  font-weight: bold;
  display: block;
  width: fit-content;
}

@media only screen and (min-width: 1000px) {
  .info-derniere-minute{
   width: 100%;
  }
}

.info-derniere-minute:last-child{
  margin-bottom: 0;
}

.event-button{
  margin-block : calc(var(--padding-body-block));
}

.event-inscription-wrapper{
  margin-block : calc(var(--padding-body-block));
}

.event-lieu{
  margin-block : calc(var(--padding-body-block));
}

.voir-le-lieu{
  text-decoration: underline;
  cursor: pointer;
}

.event-replis-lieu .event-lieu{
  display: none;
}

/**********************
*** ARTICLE DE PRESSE ***
***********************/

.article-de-presse__item:not(:last-child){
  margin-bottom: calc(var(--padding-body-block) * 2);
}

.article-de-presse__title{
  margin: 0;
}

.article-de-presse__sous-titre{
  margin: 0;
  font-weight: 200;
  font-style: italic;
  font-family: var(--ff-2);
  font-size: var(--fs-body-big);
}
.article-de-presse__editeur{
  font-weight: 200;
  font-family: var(--ff-2);
  font-size: var(--fs-body-big);
}

.article-de-presse__sous-titre *, .article-de-presse__editeur *{
  display: inline;
}

.article-de-presse__content{
  margin-bottom: var(--padding-body-block);
  margin-top: var(--padding-body-block);
}

.article-de-presse__content audio{
  width: 100%;
}

.article-de-presse__boutons{
  display: flex;
  gap: 10px;
  flex-wrap:wrap;
}

@media screen and (min-width: 1000px) {
  .section-content-archive-article_de_presse{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: calc(var(--padding-body-inline));

  }

  .section-content-archive-article_de_presse .article-de-presse__item{
    border: 1px solid #ddd;
    padding: 10px;
  
    border-radius: 8px;
    transition: transform 0.2s, box-shadow 0.2s;

    margin:0;

    display: grid;
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas: "title" "soustitre" "editeur" "content" "boutons";
  }

  .section-content-archive-article_de_presse .article-de-presse__title {
    white-space: nowrap;      /* Empêche le texte de passer à la ligne */
    overflow: hidden;         /* Coupe le texte qui dépasse */
    text-overflow: ellipsis;  /* Ajoute "..." si le texte est trop long */
    grid-area:  title;
  }

  .section-content-archive-article_de_presse .article-de-presse__sous-titre {
    grid-area:  soustitre;
  }

  .section-content-archive-article_de_presse .article-de-presse__editeur {
    grid-area:  editeur;
  }

  .section-content-archive-article_de_presse .article-de-presse__content{
    aspect-ratio: 3 / 2;
    align-self: center;
    grid-area:  content;
    
  }

  .article-de-presse__pdf{
    aspect-ratio: 210 / 297; /* ratio exact A4 */
    height: auto;    
  }


  .section-content-archive-article_de_presse .article-de-presse__boutons {
    grid-area:  boutons;
  }

  .section-content-archive-article_de_presse .article-de-presse__content > *,
  .section-content-archive-article_de_presse .article-de-presse__content  img,
  .section-content-archive-article_de_presse .article-de-presse__embed iframe{
    aspect-ratio: 3 / 2;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}

/**********************/
/****** NEWSLETTER ********/
/*********************/

div.tnp-subscription, form.tnp-subscription, form.tnp-profile{
  max-width: 100% !important;
}

.tnp-subscription{
  margin: 0 !important;
  padding: 0 !important;
}

.tnp-subscription label{
  display: none !important;
  font-size: var(--fs-body-big) !important;
}

.tnp-subscription form{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.tnp-email{
  font-size: var(--fs-body-big) !important;
  background-color: transparent !important;
  padding: 0 !important;
}

.tnp-submit{
  width: fit-content !important;
  background-color: transparent !important;
  color: inherit !important;
  border: solid 1px var(--noir) !important;
  padding: 5px 10px !important;
  font-size: var(--fs-body-big) !important;
}

.tnp-submit:hover{
  background-color: var(--hover-color) !important;
  color: var(--hover-text-color) !important;
  text-decoration: none !important;
}


/*******************/
/****** SWIPER ********/
/*******************/

.gallery-swiper{
  margin-left: calc(var(--padding-body-inline) * -1);
  margin-right: calc(var(--padding-body-inline) * -1);
}

@media only screen and (min-width: 1000px) {
  .gallery-swiper{
    margin-left: 0;
    margin-right: 0;
  }
}

.swiper-wrapper{
  align-items: center;
}

.swiper-slide{
  text-align: center;
}

.swiper-slide img,
.swiper-slide video,
.swiper-slide audio,
.swiper-slide iframe {
  max-width: 100%;
  max-height: 100%;
  /*max-height: calc(100vh - var(--section-title-height));
  max-height: calc(100dvh - var(--section-title-height));*/
  max-height: 90vh;
  max-height: 90dvh;
}

.swiper-button-prev, .swiper-button-next{
  color:var(--hover-color);
  /*color:var(--hover-color);*/
  border: solid 2px var(--hover-color);
  /* background-color: rgba(255,255,255,0.2); */
  backdrop-filter: blur(5px); /* flou derrière l’élément */
  -webkit-backdrop-filter: blur(5px); /* compatibilité Safari */
  /*mix-blend-mode: difference ;*/
}

.swiper-button-prev, .swiper-button-next{
  opacity: 0;
  transition: ease-in-out 0.2s;
}

.swiper:hover .swiper-button-prev, .swiper:hover .swiper-button-next{
  opacity: 1;
}

.swiper-button-disabled{
  opacity: 0 !important;
}

#gaillardotheque-swiper .swiper-button-prev, #gaillardotheque-swiper .swiper-button-next{
  opacity: 1 !important;
}

.swiper-button-prev{
  transform: rotate(180deg);
}

.swiper-caption{
  position: absolute;
  bottom: 0;
  left: 0;
  border:solid 1px var(--blanc);
  background-color: rgba(255,255,255,0.2);
  backdrop-filter: blur(5px); /* flou derrière l’élément */
  -webkit-backdrop-filter: blur(5px); /* compatibilité Safari */
  padding-left: var(--padding-body-inline);
  padding-right: var(--padding-body-inline);
  padding-top: var(--padding-body-block);
  padding-bottom: var(--padding-body-block);
  color: var(--noir);
  text-align: center;
}

.swiper-caption:empty{
  display: none;
}

.gallery-thumbs{
  margin-top: var(--padding-body-block);
}

.gallery-thumbs .swiper-slide {
  opacity: .7;
  aspect-ratio: 3 / 2;
  overflow: hidden; /* découpe si nécessaire */
}


.gallery-thumbs .swiper-slide img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.swiper-slide-thumb-active{
  opacity: 1 !important;
}


/**********************
*** GAILLARDOTHEQUE ***
**********************/

.main-gaillardotheque{
  padding-left: var(--padding-body-inline);
  padding-right: var(--padding-body-inline);
  padding-top: var(--padding-body-block);
  padding-bottom: var(--padding-body-block);
}

#gaillardotheque-results {
  margin-top: calc(var(--padding-body-block) * 2);
}

.gaillardotheque-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--padding-body-block);
  list-style: none;
  padding: 0;
}

.media-item {
  border: 1px solid #ddd;
  padding: 10px;
  
  border-radius: 8px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.media-item img,
.media-item video {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.media-item audio {
  width: 100%;
  margin-top: 8px;
}

.media-item a {
  display: inline-block;
  margin-top: 5px;
  text-decoration: none;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  row-gap: var(--padding-body-block);
  grid-template-rows: auto auto;
  font-family: var(--ff-2);
}

.media-item a:hover {
  text-decoration: none;
}

#gaillardotheque-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: calc(var(--padding-body-block) * 2);
}

#gaillardotheque-filter label {
  flex-basis: 100%;
  font-weight: bold;
  margin-bottom: 3px;
}

#gaillardotheque-filter select,
#gaillardotheque-filter input {
  padding: 5px 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  min-width: 150px;
}

#gaillardotheque-filter button[type="submit"]{
  width: 100%;
  font-family: var(--ff-2);
  color:rgba(0,0,0,0.6);
  border-color: #ccc;
}

#gaillardotheque-filter button[type="submit"]:hover{
  color:initial;
  border-color: var(--noir);
}

#gaillardotheque-swiper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 9999;
}

.swiper-close{
  position:absolute;
  top:10px;
  right:15px;
  cursor:pointer;
  font-size:24px;
  color:black;
  z-index:10;
}

#gaillardotheque-swiper .swiper-slide-content{
  min-height: 100vh;
  min-height: 100dvh;
}

#gaillardotheque-swiper .swiper-slide-content > *{
  max-height: 100vh !important;
  max-height: 100dvh !important;
}

#gaillardotheque-swiper .swiper-caption{
    bottom : var(--padding-body-block);
    left:50%;
    transform: translateX(-50%);
    max-width: 100%; /* évite que la légende dépasse le slide */
    text-align: center;
}

#gaillardotheque-swiper.loading::after{
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 999;
}

#gaillardotheque-swiper.loading::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border: 4px solid white;
  border-top-color: transparent;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: spin 1s linear infinite;
  z-index: 1000;
}

@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media only screen and (min-width: 1000px) {
  .gaillardotheque-list{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--padding-body-inline);
  }

  .gaillardotheque-list .media-item{
    aspect-ratio: 3 / 2;
  }

  .gaillardotheque-list .media-item > *{
    min-height: 100%;
    min-width: 100%;
    object-fit: cover;
  }

  .gaillardotheque-list .media-item > .pdf-item{
    align-items: center;
    grid-template-rows: 1fr 1fr;
    justify-items: left;
    padding-left: var(--padding-body-inline);
    padding-right: var(--padding-body-inline);
    padding-top: var(--padding-body-inline);
    padding-bottom: var(--padding-body-inline);
  }
  .gaillardotheque-list .media-item > .pdf-item > .pdf-icon{
    align-self: end;
  }
  .gaillardotheque-list .media-item > .pdf-item > .pdf-title{
    align-self: start;
  }

  .gaillardotheque-list .media-item > .media-oembed iframe{
    aspect-ratio: 3 / 2;
    height: auto;
  }

  .gaillardotheque-list .media-item[data-type="audio"]{
    display: grid;
    align-items: center;
  }

  .gaillardotheque-list .media-item[data-type="audio"] audio{
    min-height: auto;
  }

  #gaillardotheque-swiper .swiper-slide-content{
    min-height : 100%;
    min-width: 100%;
  }
  #gaillardotheque-swiper .swiper-slide-content > img{
    height: calc(100vh - var(--padding-body-block) * 4);
    height: calc(100dvh - var(--padding-body-block) * 4);
    min-height: calc(100vh - var(--padding-body-block) * 4);
    min-height: calc(100dvh - var(--padding-body-block) * 4);
    max-height: calc(100vh - var(--padding-body-block) * 4);
    max-height: calc(100dvh - var(--padding-body-block) * 4);
  }

  .swiper-caption{
    position: absolute;
    bottom: var(--padding-body-block) !important;
    left:var(--padding-body-inline) !important;
    transform: none !important;
    font-family: var(--ff-2);
    text-align: left !important;
    border-bottom: 2px solid var(--blanc);

    /* padding-left:5px; */
  }

  #gaillardotheque-swiper audio{
    max-width: 900px;
    padding-left: 80px;
    padding-right: 80px;
  }

}

/**********************
*** CHOICES.JS ********/
/**********************/

.choices{
  width: 100%;
  margin-bottom: 0;
}

.choices__inner{
  background-color: transparent !important;
}

.choices__inner > *{
  width: 100% !important;
}

.choices__input{
  background-color: transparent !important;
  display: block !important;
  margin-top: var(--choices-input-margin-bottom, 5px) !important;
}


.choices__list--multiple .choices__item:nth-child(4n+1) {
  background-color: var(--bleu) !important;
  border: none !important;
}

.choices__list--multiple .choices__item:nth-child(4n+2) {
  background-color: var(--orange) !important;
  border: none !important;
}

.choices__list--multiple .choices__item:nth-child(4n+3) {
  background-color: var(--violet) !important;
  border: none !important;
}

.choices__list--multiple .choices__item:nth-child(4n+4) {
  background-color: var(--rouge) !important;
  border: none !important;
}

.choices__button{
  border-color: var(--blanc) !important;
  color:white !important;
}

@media only screen and (min-width: 1000px) {

  .choices__inner{
    padding-block: var(--padding-body-block);
  }

  #gaillardotheque-filter .choices:nth-child(1){
    max-width: 200px;
  }

  #gaillardotheque-filter .choices:nth-child(2){
    max-width: 300px;
  }

  #gaillardotheque-filter .choices:nth-child(3){
    max-width: 250px;
  }

  #gaillardotheque-filter .choices:nth-child(4){
    max-width: 250px;
  }

  #gaillardotheque-filter .choices:nth-child(5){
    max-width: 300px;
  }
  #gaillardotheque-filter button[type="submit"]{
    width: auto;
  }
}

/**********************
*** WPCF FORM ********/

.wpcf7-form input, .wpcf7-form textarea, input[type="submit"]{
  border:1px solid #ccc !important;
  border-radius: 4px;
}

/**********************/
/****** FOOTER ********/
/*********************/

.site-footer{
  padding-left: var(--padding-body-inline);
  padding-right: var(--padding-body-inline);
  padding-top: var(--padding-body-block);
  padding-bottom: var(--padding-body-block);
  margin-top: calc(var(--padding-body-block) * 2);

  display: grid;
  grid-template-columns: auto 30%;
  column-gap: var(--padding-body-inline);
  row-gap: calc(var(--padding-body-block) * 2);
}

.network-nav__wrapper{

}

.network-nav-footer{
  justify-content: left;
}

.network-nav-footer__text{
  margin-top: 0px;
}

.footer__image{
  justify-self: right;
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  position: relative;
  overflow: hidden;
  align-self: start;
  justify-self: center;
  --animation-duration: 8s;
}

.footer__image img{
  position:relative;
  z-index:2;
  animation:veloRide var(--animation-duration) infinite;
}

@keyframes veloRide{

  /* arrêt */
  0%,70%{
      transform:translateX(0);
      opacity:1;
  }

  /* tremblement moteur */
  72%{
      transform:translateX(2px) rotate(-1deg);
  }

  74%{
      transform:translateX(-2px) rotate(1deg);
  }

  /* départ rapide */
  90%{
      transform:translateX(120vw);
      opacity:1;
  }

  /* disparition */
  91%{
      opacity:0;
  }

  /* retour invisible */
  92%{
      transform:translateX(0);
      opacity:0;
  }

  /* fondu de retour */
  100%{
      transform:translateX(0);
      opacity:1;
  }
}

.footer__image::after{

  content:"";
  position:absolute;

  left:0;
  top:50%;

  width:120px;
  height:4px;

  background:repeating-linear-gradient(
      to right,
      transparent,
      transparent 10px,
      rgba(255,255,255,0.8) 10px,
      rgba(255,255,255,0.8) 20px
  );

  opacity:0;
  transform:translateY(-50%);

  animation:speedLines var(--animation-duration) infinite;
}

@keyframes speedLines{

  0%,74%{
      opacity:0;
  }

  80%{
      opacity:1;
  }

  90%{
      transform:translateX(200px) translateY(-50%);
  }

  100%{
      opacity:0;
  }
}

.footer__image::before{

  content:"✨ ✦ ✧";
  position:absolute;

  left:40px;
  bottom:10px;

  font-size:14px;
  opacity:0;

  animation:sparks var(--animation-duration) infinite;
}

@keyframes sparks{

  0%,72%{
      opacity:0;
      transform:scale(.5);
  }

  78%{
      opacity:1;
      transform:scale(1.3) translateX(-10px);
  }

  90%{
      opacity:0;
      transform:translateX(-40px) scale(.5);
  }
}


@media only screen and (max-width: 1000px) {
  .footer-boutons-nav{
    grid-column:  1 / 3;
  }
}


.secondary-nav-footer{
  grid-column: 1 / 3;
}

.copyright{
  grid-column: 1 / 3;
  text-align: center;
}