@font-face {
    font-family: 'Police_Cinzel';
    src: url('../Polices/Cinzel/Cinzel-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

.site-footer{
    background-color: #291D12;
}

.fond-etheronef {
    display: block;
    justify-content: center;
    background-image: url('../Images/ETHER_AERONEF_1.png');
    background-repeat: no-repeat;
    background-size: 220px, auto;
    background-position: 78% 40%;
}

.banner-ether {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 70px;
}

.banner-ether img {
    height: auto;
    width: 400px;
    /* padding-right: 50px; */
}

/* boutons */
.buttons-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 10px;
}

.btn {
    padding: 12px 24px;
    border-radius: 15px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    cursor: pointer;
    font-family: 'Police_banniere', serif;
    font-size: 25px;
    text-transform: uppercase;
    align-items: center;
    justify-content: center;
    display: flex;
    width: 345px;
}

.btn-primary {
    background-color: #291D12;
    color: #f7ebd7;
}

.btn-secondary {
    background-color: #f7ebd7;
    color: #291D12;
    border: 6px solid #291D12;
}

.btn-primary:hover {
    background-color: #f7ebd7;
    color: #291D12;
    border: 4px solid #291D12;
}

.btn-secondary:hover {
    background-color: #291D12;
    color: #f7ebd7;
}

/* Titre */
.title {
    color: #291D12;
    text-align: center;
    font-family: 'Police_Cinzel', serif;
    font-size: 64px;
    font-weight: 700;
    padding-bottom: 60px;

}

/* infos */

/* Conteneur principal */
.infos-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #291D12;
    color: #f7ebd7;
    padding-bottom: 0;
    margin: 0 auto;
    width: 1004px;
    height: 273px;
    font-family: 'Police_banniere', serif;
    font-size: 25px;
    border-radius: 23px;
}

/* Élément individuel (icône + texte) */
.info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 20px;
    flex: 1;
}

/* Icônes */
.info-icon {
    align-items: top;
    margin-bottom: 10px;
    height: 83px;
    color: #f7ebd7;
    align-items: flex-start;
    justify-content: center;
}

.info-icon img {
    height: 100%;
    width: auto;
}

/* Texte */
.info-text {
    font-size: 17px;
    line-height: 1.4;
    margin: 0;
}

/* Séparateurs */
.info-separator {
    height: 239px;
    width: 3px;
    background-color: #f7ebd7;
    margin: 0 10px;
}

/* Affiche */

.synopsis {
    height: 30px;
}

.fond-etheronef-2 {
    background-image: url('../Images/ETHER_AERONEF_2.png');
    background-repeat: no-repeat;
    background-size: auto 400px;
    background-position: left 20%;
}

.affiche-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    width: 1004px;
    gap: 40px;
    margin: 0 auto; /* Centre le conteneur lui-même */
    margin-top: 50px;
    margin-bottom: 30px;
    padding-bottom: 150px;
}

.affiche-text {
    text-align: center;
    color: #291D12;
    font-size: 20px;
    font-weight: 400;
    width: 700px;
    max-width: 100%;
    height: auto;
    font-family: 'Police_sous_banniere', serif;
}

.affiche-text p strong{
    font-family: 'Police_banniere';
}


.affiche-image img {
    width: 419px;
    height: 589px;
    aspect-ratio: 69/97;
}

/* Billetterie */
.billetterie-container {
    display: flex;
    justify-content: center;
    background-color: #291D12;
    color: #f7ebd7;
    padding-top: 85px;
    margin: 0 auto;
    width: 100%;
    height: 530px;
    background-image: url('../Images/ETHER_AERONEF_3.png');
    background-repeat: no-repeat;
    background-size: auto 346px;
    background-position: right center;

}

/* Contenu texte et bouton */
.billetterie-content {
    flex: 1;
    text-align: center;
}

/* Badge "BILLETTERIE OUVERTE" */
.billetterie-badge {

    align-items: center;
    justify-content: center;
    display: flex;
    color: #f7ebd7;

    margin: 0 auto; /* Centre le conteneur lui-même */

    border-radius: 15px;

    text-transform: uppercase;

    font-family: 'Police_banniere', serif;
    font-size: 34px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    }

/* Titre */
.billetterie-content h2 {
    font-size: 64px;
    font-family: 'Police_Cinzel', serif;
    margin: 0 auto;
    padding-top: 40px;
    color: #f7ebd7;
    line-height: 1.2;
}

/* Texte */
.billetterie-text {
    font-size: 27px;
    line-height: 31px;
    width: 861px;
    height: auto;
    font-family: 'Police_sous_banniere', serif;
    font-weight: 400;
    text-align: center;
    padding-top: 20px;
    margin: 0 auto; /* Centre le conteneur lui-même */
}

/* Bouton */
.billetterie-btn {
    display: inline-flex; /* Utilise flexbox */
    align-items: center; /* Centre verticalement */
    justify-content: center; /* Centre horizontalement */
    background-color: #f7ebd7;
    border-radius: 19px;
    color: #291D12;
    width: 579px;
    height: 89px;
    margin-top: 60px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.billetterie-btn p {
    font-size: 25px;
    font-weight: 700;
    font-family: 'Police_banniere';
    text-transform: uppercase;
    margin: 0; /* Supprime les marges */
}

.billetterie-btn:hover {
    background-color: #291D12;
    color: #f7ebd7;
    border: 4px solid #f7ebd7;
}

/* Image SVG à droite */
.billetterie-image {
    flex: 0 0 30%; /* L'image prend 30% de la largeur */
    text-align: right;
}

.billetterie-image img {
    max-width: 100%;
    height: auto;
}
.title-gout {
    color: #291D12;
    text-align: center;
    font-family: 'Police_Cinzel', serif;
    font-size: 64px;
    font-weight: 700;
    padding-bottom: 60px;
    padding-top: 60px;
}

.photo-gallery {
  display: grid;
  grid-template-columns: 1.2fr 1.25fr 1.25fr;
  grid-template-rows: 1fr 1fr;
  gap: 18px;
  max-width: 1000px;
  margin: 0 auto;
}
 
.photo-gallery__item {
  border-radius: 20px;
  overflow: hidden;
}
 
.photo-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
 
/* La grande image de gauche occupe les deux lignes */
.photo-gallery__item--big {
  grid-row: 1 / 3;
}

.espace-fin {
    height: 100px;
}

/* lecteur audio */

.audio-player-wrap {
  text-align: center;
  margin-bottom: 30px;
}

.audio-player {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
}

.audio-player__toggle {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: var(--stroke) solid var(--ink);
  background: transparent;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease, background 0.15s ease;
}

.audio-player__toggle:active { transform: scale(0.94); }

.audio-player__toggle svg {
  width: 22px;
  height: 22px;
}

.audio-player__label {
    font-family: 'Police_banniere', serif;
    border: 5px solid #291D12;
    border-radius: 30px;
    padding: 0.7rem;
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
}

/* ===========================
   RESPONSIVE MOBILE (< 768px)
   =========================== */

@media (max-width: 768px) {

    /* Fond aéronef désactivé sur mobile */
    .fond-etheronef {
        background-image: none;
    }

    /* Logo ETHER */
    .banner-ether {
        padding-top: 20px;
        padding-bottom: 30px;
    }

    .banner-ether img {
        width: 80%;
        max-width: 280px;
    }

    /* Titre */
    .title {
        font-size: 36px;
        padding-bottom: 30px;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Boutons */
    .buttons-container {
        flex-direction: column;
        align-items: center;
        gap: 14px;
        padding-bottom: 40px;
    }

    .btn {
        width: 85vw;
        max-width: 340px;
        font-size: 18px;
        padding: 12px 16px;
    }

    /* Infos (date, heure, lieu, public) */
    .infos-container {
        flex-direction: column;
        width: 90vw;
        height: auto;
        padding: 24px 16px;
        gap: 20px;
        border-radius: 16px;
    }

    .info-separator {
        width: 80%;
        height: 2px;
        margin: 0 auto;
    }

    .info-icon {
        height: 56px;
    }

    .info-text {
        font-size: 15px;
    }

    /* Affiche */
    .fond-etheronef-2 {
        background-image: none;
    }

    .affiche-container {
        flex-direction: column;
        align-items: center;
        width: 90vw;
        gap: 30px;
        margin-top: 30px;
        padding-bottom: 40px;
    }

    .affiche-text {
        width: 100%;
        font-size: 16px;
    }

    .affiche-image img {
        width: 100%;
        height: auto;
        max-width: 340px;
    }

    /* Billetterie */
    .billetterie-container {
        background-image: none;
        height: auto;
        padding: 40px 16px;
        width: 100%;
    }

    .billetterie-badge {
        font-size: 22px;
    }

    .billetterie-content h2 {
        font-size: 36px;
        padding-top: 20px;
    }

    .billetterie-text {
        font-size: 17px;
        width: 90vw;
        line-height: 1.5;
        padding-top: 16px;
    }

    .billetterie-btn {
        width: 85vw;
        max-width: 340px;
        height: auto;
        padding: 16px;
        margin-top: 30px;
    }

    .billetterie-btn p {
        font-size: 18px;
    }

    /* Titre "Avant goût" */
    .title-gout {
        font-size: 36px;
        padding-top: 40px;
        padding-bottom: 30px;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Galerie photos */
    .flexible-gallery {
        flex-direction: column;
        align-items: center;
        gap: 14px;
        padding: 10px 16px;
        width: 100%;
    }

    .flexible-gallery img,
    .img-1, .img-2, .img-3,
    .img-4, .img-5, .img-6 {
        width: 90vw;
        height: auto;
        aspect-ratio: auto;
        border-radius: 16px;
    }

    .espace-fin {
        height: 50px;
    }
}