.fonds {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .7;
}
.fond {
    position: absolute;
    min-height: 120%;
    min-width: 100%;
}
.conteneur-img-principale {
    display: flex;
    align-items: center;
    position: relative;
    height: calc(100vh - 80px);
    width: calc(100% - 40px);
    margin: auto;
    margin-bottom: 10rem;
}
.madame-bovary .conteneur-img-principale {
    background-color: #000;
}
.fond picture, .parapet picture, .conteneur-img-principale picture:not(.fleche-img) {
    position: absolute;
    height: 100%;
    width: 100%;
}
.conteneur-img-principale picture.img-principale {
    left: 0;
   /* width: auto;*/
}
/*.img-principale img {
    height: 100%;
    max-width: unset;
}*/
.fond img, .parapet img, .conteneur-img-principale img {
    min-height: 100%;
    min-width: 100%;
    object-fit: cover;
    object-position: bottom left;
}
.conteneur-img-principale picture.liseret {
    height: auto;
    width: 150vh;
    top: 100%;
}
.liseret-bg {
    position: absolute;
    top: 100%;
    height: 7%;
    width: 100%;
    background-size: contain;
}
.webp .liseret-bg {
    background-image: url('../../../pages/03.spectacles/01.crime-et-chatiment/crime_bas.webp');
}
.no-webp .liseret-bg {
    background-image: url('../../../pages/03.spectacles/01.crime-et-chatiment/crime_bas.png');
}
.titres {
    position: fixed;
    right: 10vw;
    color: #fff;
    text-shadow: #000 1px 1px 2px;
}
.titres.monte {
    position: absolute;
    bottom: 40px;
    right: calc(10vw - 20px);
}

/* TESTS IMG COVER */
.crime-et-chatiment .titres {
    align-self: center;
}
.les-miserables .liseret {
    display: none !important;
}
.le-destin .conteneur-img-principale {
    background-color: #0e140e;
}
.carmen .conteneur-img-principale, .les-miserables .conteneur-img-principale, .frankenstein .conteneur-img-principale, .madame-bovary .conteneur-img-principale {
    background-color: #000;
}
.crime-et-chatiment .conteneur-img-principale {
    background-color: #0f090b;
}
.geants .conteneur-img-principale {
    background-color: #0f090e;
}
.crime-et-chatiment .conteneur-img-principale {
    align-items: flex-end;
}
.le-destin .conteneur-img-principale .img-principale, .carmen .conteneur-img-principale .img-principale, .les-miserables .conteneur-img-principale .img-principale, .frankenstein .conteneur-img-principale .img-principale, .madame-bovary .conteneur-img-principale .img-principale, .crime-et-chatiment .conteneur-img-principale .img-principale, .geants .conteneur-img-principale .img-principale {
    width: auto !important;
    mask-image: linear-gradient(to right, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 80%, rgba(0,0,0,0));
}
.carmen .conteneur-img-principale .img-principale, .frankenstein .conteneur-img-principale .img-principale {
    mask-image: linear-gradient(to right, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 95%, rgba(0,0,0,0));
}
.crime-et-chatiment .conteneur-img-principale .img-principale {
    height: 120%;
}
/*.geants .conteneur-img-principale .img-principale {
    mask-image: none;
}*/
.le-destin .conteneur-img-principale .img-principale img, .carmen .conteneur-img-principale .img-principale img, .les-miserables .conteneur-img-principale .img-principale img, .frankenstein .conteneur-img-principale .img-principale img, .madame-bovary .conteneur-img-principale .img-principale img, .crime-et-chatiment .conteneur-img-principale .img-principale img, .geants .conteneur-img-principale .img-principale img {
    min-width: unset;
}
.le-destin .liseret, .carmen .liseret, .frankenstein .liseret {
    width: calc(calc(100vh - 80px) * 1.498) !important;
}
.geants .liseret {
    width: calc(calc(100vh - 80px) * 1.4988) !important;
}
.le-destin .liseret-deux, .frankenstein .liseret-deux {
    left: calc(calc(100vh - 80px) * 1.498);
    transform: rotateY(180deg);
}
.le-destin .liseret-deux {
    mask-image: linear-gradient(to left, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 78%, rgba(0,0,0,0) 82%);
}
.madame-bovary .liseret-deux {
    left: 150vh;
}
.frankenstein .liseret-trois {
    left: calc(2 * calc(100vh - 80px) * 1.498);
}
.madame-bovary .liseret-trois {
    left: 300vh;
}
.carmen .remplissage, .geants .remplissage, .geants .mask {
    background-color: #000;
    position: absolute;
    left: calc(calc(99.8vh - 80px) * 1.498);
    top: 100%;
    height: 4.8vh;
    width: calc(100% - calc(calc(99.8vh - 80px) * 1.498));
    /*mask-image: linear-gradient(to left, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 95%, rgba(0,0,0,0));*/
}
.geants .remplissage, .geants .mask {
    background-color: #0f090e;
    left: calc(calc(99.8vh - 80px) * 1.4988);
    width: calc(100% - calc(calc(99.8vh - 80px) * 1.4988));
    height: 6.2vh;
}
.geants .mask {
    left: calc(calc(82.8vh - 80px) * 1.4988);
    width: calc(17vh * 1.4988);
    mask-image: linear-gradient(to left, rgb(15,9,14) 0%, rgba(15,9,14,0));
}
@media screen and (max-aspect-ratio: 1.152/1) {
    .le-destin .conteneur-img-principale .img-principale {
        bottom: 0;
        width: 150% !important;
        height: auto !important;
        mask-image: linear-gradient(to top, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 80%, rgba(0,0,0,0));
    }
    .le-destin .conteneur-img-principale .img-principale img {
        min-width: 100%;
        min-height: unset;
    }
    .le-destin .liseret {
        width: 150% !important;
    }
    .le-destin .liseret-deux {
        left: 150%;
    }
}
@media screen and (max-aspect-ratio: 0.61/1) {
    .les-miserables .conteneur-img-principale .img-principale {
        bottom: 0;
        left: -7%;
        width: 250% !important;
        height: auto !important;
        mask-image: linear-gradient(to top, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 90%, rgba(0,0,0,0));
    }
    .les-miserables .conteneur-img-principale .img-principale img {
        min-width: 100%;
        min-height: unset;
    }
}
@media screen and (max-aspect-ratio: 1.05/1) {
    .frankenstein .conteneur-img-principale .img-principale {
        bottom: 0;
        left: -15%;
        width: 170% !important;
        height: auto !important;
        mask-image: linear-gradient(to top, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 90%, rgba(0,0,0,0));
    }
    .frankenstein .conteneur-img-principale .img-principale img {
        min-width: 100%;
        min-height: unset;
    }
    .frankenstein .liseret {
        height: 6.22vh !important;
        width: 100% !important;
    }
    .frankenstein .liseret-deux, .frankenstein .liseret-trois {
        display: none;
    }
    /*.le-destin .liseret {
        left: -15%;
        width: 170% !important;
    }
    .le-destin .liseret-deux {
        left: 155%;
    }*/
}
@media screen and (max-aspect-ratio: 1.42/1) {
    .geants .mask {
        left: unset;
        right: 0;
        width: 18vw;
    }
}
@media screen and (max-aspect-ratio: 0.926/1) {
    .geants .conteneur-img-principale .img-principale, .geants .liseret {
        bottom: 0;
        left: -7%;
        width: 188% !important;
        height: auto !important;
        mask-image: linear-gradient(to top, #10060e 0%, #10060e 98%, rgba(0,0,0,0));
    }
    .geants .liseret {
        top: 99.9% !important;
        height: 8vw !important;
        width: auto !important;
    }
    .geants .conteneur-img-principale .img-principale img {
        min-width: 100%;
        min-height: unset;
    }
    .geants .mask, .geants .remplissage {
        display: none;
    }
}

@media screen and (max-aspect-ratio: 1.5/1) {
    .madame-bovary .liseret-deux, .madame-bovary .liseret-trois, .le-destin .liseret-deux {
        display: none !important;
    }
    .madame-bovary .liseret {
        height: 6.75vh !important;
        width: 100% !important;
    }
}

/******************/

h1 {
    padding: 0;
    margin: 0;
    font-size: 3rem;
    line-height: .8;
    word-spacing: -0.5rem;
}
.sous-titre {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
}
.module.accroche {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.mod-accroche {
    position: absolute;
    max-width: 100%;
}
.mod-accroche:nth-child(1) {
    top: 90%;
    right: -20%;
}
.mod-accroche:nth-child(2) {
    top: calc(100% + 3rem);
    left: -15%;
}
.mod-accroche:nth-child(3) {
    bottom: 90%;
    right: -10%;
}
.mod-accroche .module {
    width: auto;
}
@keyframes fleche {
    to {
        opacity: 1;
    }
}
.fleche-scroll {
    position: absolute;
    top: calc(100vh - 220px);
    right: 150px;
    opacity: 0;
    transition: opacity .2s;
    animation: fleche .2s 5s linear forwards;
}
.fleche-scroll.cacher {
    opacity: 0;
    animation: none !important;
}
.fleche-img {
    height: 120px;
}


/***********/
/* MODULES */
/***********/
.conteneur-modules {
    width: 800px;
    margin: auto;
    padding: 0 40px;
}
.conteneur-modules.preambule {
    margin: 4rem auto 8rem;
}
.bloc {
    margin: 6rem 0;
}
.dossier-complet .bloc {
    margin: 1rem 0;
}
/* INFOS-SYNOPSIS */
.infos-synopsis {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    left: calc(360px - 50vw + 20px);
    width: calc(100vw - 40px);
}
.bloc-infos-dates {
    position: absolute;
    right: 0;
    top: -5rem;
    width: 250px;
    font-size: 85%;
    font-weight: 500;
    text-align: right;
}
.bloc-infos-dates .dossier-complet {
    font-size: 1rem;
    text-align: left;
}
.synopsis {
    width: 600px;
    max-width: 100%;
    margin: auto;
    font-size: 1.165rem;
}
.synopsis p {
    margin: 0;
}
.module.infos, .module.telechargeables, .module.infos-complementaires, .pro-bouton {
    padding-bottom: 1rem;
    padding-right: 1.5rem;
    /*border-bottom: solid #000 1px;*/
    line-height: 1.3;
}
.module.telechargeables {
    padding-bottom: 0;
}
/*.module.infos .spec-duree, .module.infos .spec-nb {
    margin-bottom: .3rem;
}*/
.module.infos-complementaires {
    padding-top: 1rem;
    border-bottom: none;
}
.infos-intitule {
    font-weight: 600;
}
.mod-bouton {
    margin: 0;
}
.mod-bouton a {
    background: none;
    border: none;
    border-radius: 0;
    width: auto;
    text-align: left;
    padding: 0;
    text-decoration: underline;
}
.bloc-infos-dates .mod-bouton a {
    text-align: right;
}
.pro-bouton {
    display: inline-block;
    border: none;
    padding-bottom: 0;
    padding-top: 1rem;
    cursor: pointer;
    text-decoration: underline;
}
.pro-bouton:hover span {
    background-color: #fff;
}
.dates-archives ul {
    text-transform: uppercase;
    list-style: none;
    padding: 0;
}
.ev-date span {
    display: inline-block;
}
.jour {
    width: 22px;
}
.mois {
    width: 45px;
}
.annee {
    width: 30px;
}
.ev-lieu sup {
    position: absolute;
    font-size: 70%;
    color: #000;
}
.lien-agenda {
    font-size: 90%;
    color: #fff;
    padding: 3px .5rem;
    background-color: #000;
    border: solid 1px;
    transition: all .3s;
}
.lien-agenda:hover {
    color: #000;
    background-color: #fff;
}
.module.infos div, .dates-archives ul {
    position: relative;
}
.module.infos .spec-duree::before, .module.infos .spec-public::before, .module.infos .spec-langues::before, .dates-archives ul::before {
    position: absolute;
    width: 20px;
    left: -30px;
}
.bloc.infos-phone {
    display: none;
}
    .module.infos/*, .infos-phone .module.telechargeables*/ {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding-bottom: 0;
        padding-right: 0;
        margin-bottom: .5rem;
    }
    .spec-duree::after {
        content: '•';
        margin: 0 .5rem;
    }

/*.module.infos .spec-duree::before {
    content: url('../images/time-line.svg');
}
.module.infos .spec-public::before {
    content: url('../images/information-line.svg');
}
.module.infos .spec-langues::before {
    content: url('../images/flag-line.svg');
}
.dates-archives ul::before {
    content: url('../images/map-pin-line.svg');
}*/
/* VIDÉO */
.bande-annonce {
    display: flex;
    justify-content: center;
}
.iframe {
    width: 100%;
    height: 405px;
}
.teaser-nl {
    margin: 1rem 0;
    text-align: center;
    cursor: pointer;
}
.fr .bouton-fr {
    display: none;
}
.nl .bouton-nl {
    display: none;
}
/* DATES */
.dates-archives {
    position: relative;
}
.date, .info-conteneur {
    display: flex;
}
.date {
  position: relative;
  flex-wrap: wrap;
  line-height: 1.2;
}
.date:hover {
  background-color: #ffffff9d;
}
.date::after {
  content: '';
  border-bottom: dotted 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.info-conteneur {
    flex-grow: 1;
    max-width: 75%;
}
.info {
    padding: 15px 10px 15px 0;
}
.info-conteneur .info {
  display: inline-block;
}
.info-lieu {
  flex-grow: 1;
}
.info-lieu a {
    display: inline-block;
    transform: rotateX(0);
    transform-origin: center;
    transition: transform .5s;
    font-size: inherit;
    /*color: #b4b4b4;*/
}

.info-date {
  width: 25%;
  max-width: 230px;
}
  .info-lieu a:hover {
    transform: rotateX(180deg);
  }
  .info:first-child {
    text-align: left;
  }
  .ligne-titre .info:nth-child(2), .ligne-titre .info:nth-child(3) {
    padding: 0;
  }
  .date:hover .horaires {
    color: #757575;
  }
  .info-ville sup {
    font-size: 75%;
  }
  .horaires {
    font-size: 12px;
    display: inline-block;
    width: 100%;
  }
  .info-sup {
    display: inline-block;
    width: 100%;
    font-size: 70%;
  }
.info-ville {
  width: fit-content;
  text-transform: uppercase;
  text-align: right;
  padding: 15px 0;
  word-break: keep-all;
}
.lien-agenda {
    position: absolute;
    top: 100%;
    right: 0;
}
.dates-archives.vide {
    text-align: center;
}
.vide .lien-agenda {
    position: relative;
    top: unset;
    right: unset;
}

/* DISTRIBUTION */
/*.bloc-distri {
    margin-bottom: 0;
}*/
.module.distribution {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.info-colonne {
    width: 45%;
}
.bloc-titre, .spec-info {
    text-align: center;
}
h2.bloc-titre {
    width: 100%;
    font-size: 120%;
}
.spec-info {
    margin: 0 0 10px;
}
.module.distribution .intitule, .bloc-titre {
    font-weight: 600;
    line-height: 1.2;
}
.intitule {
    display: inline-block;
    width: 100%;
}
.module.distribution .valeur {
    font-weight: 350;
}
/* PRODUCTION */
/*.bloc-prod, .bloc-soutien {
    margin: 0;
}*/
.production, .soutien {
    font-size: .875rem;
    text-align: center;
}
/* DOSSIER-PRESSE */
.extraits {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    width: calc(100vw - 40px);
    left: calc(360px - 50vw + 20px);
}
.extraits-presse {
    position: relative;
    width: calc(var(--nb-col) * 150px);
    padding: .8rem 0;
    margin: 0 70px 40px;
    column-count: var(--nb-col);
    column-gap: 15px;
}
.entier p {
    margin-top: 0;
}
.entier::before, .presse-auteur::after {
    content: url('../images/double-quotes-l.svg');
    display: inline-block;
    position: absolute;
    width: 40px;
    opacity: .15;
}
.entier::before {
    top: -5px;
    left: -40px;
}
.presse-auteur::after {
    transform: rotateY(180deg);
    bottom: calc(100% + .5rem);
    right: -35px;
}
.que-tronque .suite {
    display: none;
}
.suite {
    font-weight: 500;
    font-style: italic;
}
.resume p, .suite {
    display: inline;
}
.presse-auteur {
    display: inline-block;
    position: relative;
    width: 100%;
    margin-top: 1rem;
    text-align: right;
}
.presse-auteur span {
    font-weight: 700;
    font-variant-caps: small-caps;
}
.dossier-presse .bouton {
    position: relative;
    display: inline-block;
    left: 30%;
    text-align: center;
    font-size: 90%;
    border: solid 2px;
    margin: .5rem 0;
    padding: 3px .5em;
    cursor: pointer;
    transition: all .3s;
}
.dossier-presse .bouton:hover {
    background-color: #fff;
    color: #000;
}
/* Dossier complet */
.dossier-complet {
    z-index: 8;
    display: none;
    position: fixed;
    top: 10%;
    left: 5%;
    width: 800px;
    height: auto;
    max-width: 90%;
    max-height: 80%;
    background-color: #000000f0;
    color: #fff;
    box-shadow: #000 10px 10px 6px;
    overflow: auto;
}
.dossier-complet a {
    color: #fff;
}
.dossier-complet.dossier-ouvert {
    display: block;
}
.dossier-conteneur {
    position: relative;
    top: -45px;
    height: 100%;
    overflow: hidden auto;
}
.dossier-complet .croix {
    position: sticky;
    z-index: 1;
}
.dossier-complet .croix .bars {
    width: 30px;
}
.dossier-complet .mod-conteneur {
    font-weight: 300;
    margin-bottom: 5rem;
}
.dossier-complet h2 {
    width: auto;
    left: 0;
    margin-top: 3rem;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
}
.dossier-complet h2 {
    margin-bottom: 1rem;
    line-height: 1.2;
}
.dossier-complet h2, .dossier-complet .mod-conteneur, .titre-dossier {
    width: 100%;
    padding: 0 5rem;
}
.dossier-complet .module.telechargeables {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 0;
    padding-right: 0;
}
.dossier-complet .mod-bouton::after {
    content: '•';
    margin-right: .5rem;
}
.dossier-complet .mod-bouton:last-child::after {
    content: '';
}
.dossier-complet .mod-bouton a {
    padding: 0 5px;
    background-color: #fff;
    color: #000;
    text-decoration: none;
}

.titre-dossier {
    margin-top: 1rem;
}
.dossier-complet .mod-sous-titre {
    font-weight: 600;
    font-style: italic;
}
.dossier-complet .presse-auteur {
    margin-top: 0;
}
.dossier-complet .presse-auteur span {
    font-weight: 600;
}
.dossier-complet .mod-date {
    font-weight: 500;
}
.retour {
    padding-left: 1rem;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
}
.retour-haut {
    padding-top: .5rem;
}
.retour-bas {
    padding-bottom: .5rem;
}
.retour-fleche {
    position: relative;
    top: -1px;
    display: inline-block;
    margin-right: 5px;
    font-size: 1.5rem;
    line-height: 1;
}
/*.retour-fleche span {
    display: inline-block;
    border: solid 2px;
}
.retour-fleche .bar-1 {
    width: 98%;
}
.retour-fleche .bar-2, .retour-fleche .bar-3 {
    position: absolute;
    left: 0;
    transform-origin: left;
}
.retour-fleche .bar-2 {
    top: calc(50% + 1px);
    width: 1.2rem;
    transform: rotate(40deg);
}
.retour-fleche .bar-3 {
    top: calc(50% + 3px);
    width: 1.5rem;
    transform: rotate(-40deg);
}*/
/* PRIX */
.module.prix {
    position: relative;
    width: calc(100vw - 40px);
    left: calc(360px - 50vw + 20px);
    font-weight: 500;
    text-align: center;
    margin: auto;
}
.module.prix picture {
    width: 85px;
    margin: 0 auto 1rem;
}
.module.prix p {
    margin: 0;
}
/* GALERIE */
.galerie {
    position: relative;
    width: 100vw;
    left: calc(360px - 50vw);
}
.galerie-conteneur {
    background-color: #000;
}


/***********/
/* PARAPET */
/***********/
.parapet {
    position: relative;
    min-height: 25vh;
    width: 100%;
    margin-top: 40vh;
}
.dossier-ouvert.parapet {
    z-index: 0;
}
.parapet-image {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
}
.parapet picture {
    position: relative;
}
/*.parapet picture.img-parapet {
    height: 110%;
}*/
.conteneur-devant-parapet {
    position: absolute;
    bottom: 40px;
    width: 100%;
    height: 300%;
    overflow-x: scroll;
}
.phone .conteneur-devant-parapet {
    bottom: 0;
}
.devant-parapet {
  position: absolute;
  bottom: 0;
  height: 33.33%;
  width: 168.6vh;
}
.devant-parapet picture {
    min-width: unset;
}
.parap-people {
    position: absolute;
    transform: translate(0);
    transition: transform .5s;
}
.parap-people:hover {
    transform: translate(5px, 5px);
}
.parap-people a {
    display: inline;
}
.people-miserables, .people-frankenstein, .people-geants, .people-crime-chatiment {
    z-index: 1;
}
.people-destin {
    bottom: 18%;
    left: 2%;
    height: 100%;
}
.people-carmen {
    bottom: 18%;
    left: 8%;
    height: 100%;
}
.people-miserables {
    bottom: 0;
    left: 13%;
    height: 155%;
}
.people-frankenstein {
    bottom: 0;
    left: 29%;
    height: 140%;
}
.people-geants {
    bottom: 0;
    left: 49%;
    height: 175%;
}
.people-crime-chatiment {
    bottom: 0;
    left: 55%;
    height: 150%;
}
.people-bovary {
    bottom: 15%;
    left: 78%;
    height: 125%;
}
.people-kourteforme {
    bottom: 18%;
    left: 90%;
    height: 100%;
}

.lien {
    display: none;
    position: absolute;
    bottom: 100%;
    width: calc(15vh - 20%);
    align-items: center;
    transform-origin: bottom left;
    transform: rotate(-85deg);
}
.lien.visible {
    display: flex;
}
.lien-trait {
    width: 100%;
    border-top: solid 1px;
}
.lien-nom {
    position: absolute;
    left: 105%;
    width: max-content;
    font-size: 140%;
}
.people-destin .lien {
    left: 40%;
}
.people-carmen .lien {
    left: 70%;
}
.people-miserables .lien {
    left: 50%;
}
.people-frankenstein .lien {
    left: 50%;
}
.people-geants .lien {
    left: 55%;
}
.people-crime-chatiment .lien {
    left: 65%;
}
.people-bovary .lien {
    left: 45%;
}
.people-kourteforme .lien {
    left: 40%;
}

.people-crime-chatiment {
    pointer-events: none;
}
.people-crime-chatiment svg {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: auto;
}
.people-crime-chatiment svg path {
    pointer-events: visible;
}

@keyframes pigeonLeft1 {
    0% {
        right: -10%;
    }
    100% {
        right: 7%;
    }
}
@keyframes pigeonLeft2 {
    0% {
        bottom: 0;
        right: 7%;
        transform: rotate(0) scale(1);
    }
    100% {
        bottom: 30%;
        right: 15%;
        transform: rotate(8deg) scale(.7);
    }
}
@keyframes pigeonLeft3 {
    0% {
        bottom: 30%;
        right: 15%;
        transform: rotate(8deg) scale(.7);
    }
    10% {
        transform: rotate(0deg) scale(.7);
    }
    100% {
        bottom: 30%;
        right: 40%;
        transform: rotate(0) scale(.7);
    }
}
@keyframes pigeonLeft4 {
    0% {
        bottom: 30%;
        right: 40%;
        transform: rotate(0) scale(.7);
    }
    10% {
        transform: rotate(-8deg) scale(.75);
    }
    100% {
        bottom: 5%;
        right: 58%;
        transform: rotate(-8deg) scale(1);
    }
}
@keyframes pigeonLeft5 {
    0% {
        bottom: 5%;
        right: 58%;
        transform: rotate(-8deg) scale(1);
    }
    10% {
        transform: rotate(4deg) scale(.95);
    }
    100% {
        bottom: 20%;
        right: 100%;
        transform: rotate(4deg) scale(.8);
    }
}
.pigeon {
    position: relative;
    height: 100%;
    pointer-events: none;
}
#pigeon {
    position: absolute;
    height: 20%;
    right: -10%;
    bottom: 0;
    transform: rotate(0) scale(1);
}
#pigeon.anim {
    animation: pigeonLeft1 10s linear, pigeonLeft2 10s 10s linear, pigeonLeft3 20s 20s linear, pigeonLeft4 10s 40s linear, pigeonLeft5 30s 50s linear forwards;
}




/* Premier terme du ratio = ratio img * hauteur img-principale. ICI : (4000/2670) * 1 = 1.498 */
@media screen and (min-aspect-ratio: 1.4988/1) {
    /*.conteneur-img-principale {
        height: 68vw;
    }*/
    .conteneur-img-principale picture.liseret {
        width: 100%;
    }
    .madame-bovary .conteneur-img-principale picture.liseret {
        width: 150vh;
    }
}
/* Premier terme du ratio = ratio img * hauteur liseret. ICI : (4000/180) * .06 = 1.333 */
/*@media screen and (min-aspect-ratio: 1.333/1) {
    .conteneur-img-principale .liseret {
        height: auto;
        width: 150vh;
    }
}*/
/* Premier terme du ratio = ratio img * hauteur parapet. ICI : (4000/593) * .25 = 1.686 */
@media screen and (min-aspect-ratio: 1.686/1) {
    .parapet {
        height: 14.33vw;
    }
    .img-parapet img {
        object-position: left top;
    }
    .devant-parapet {
        height: 14.5vw;
        width: 100%;
    }
}

@media screen and (max-width : 1100px) {
    /* Infos */
    .infos-synopsis .module.telechargeables, .infos-synopsis .pro-bouton {
        display: none;
    }
    .bloc.infos-phone {
        display: block;
        position: relative;
        z-index: 1;
        margin-bottom: 2rem;
    }
    .bloc-infos-dates {
        position: relative;
        top: -3rem;
        width: 100%;
    }

    .bloc-infos-phone {
        font-weight: 500;
    }
    .module.telechargeables {
        text-align: center;
        line-height: 1.6;
        padding-right: 0;
    }
    .mod-bouton::after {
        content: '•';
        /*margin-right: .5rem;*/
    }
    .mod-bouton:last-child::after {
        content: '';
    }
    .infos-phone .mod-bouton, .infos-phone .mod-bouton a {
        display: inline;
        text-align: center;
    }

    .pro-bouton {
        width: 100%;
        padding-right: 0;
        text-align: center;
    }
}

@media screen and (max-width : 800px) {
    main {
        padding-top: 0;
    }
    /*.fond {
        min-height: 120%;
    }*/
    .conteneur-img-principale {
        height: calc(100vh - 40px);
        width: 100%;
    }
    .les-miserables .conteneur-img-principale {
        height: 100vh;
    }
    .crime-et-chatiment .conteneur-img-principale .img-principale {
        height: 100%;
        left: -15vh;
        mask-image: none;
        overflow: hidden;
    }
    .crime-et-chatiment .conteneur-img-principale .img-principale img {
        position: relative;
        top: 10vh;
    }
    .carmen .liseret {
        width: calc(calc(100vh - 40px) * 1.498) !important;
    }
    .titres {
        right: unset;
        top: 75px;
        left: 10px;
    }
    .carmen .titres, .madame-bovary .titres {
        top: 40vh;
    }
    .titres.monte {
        right: unset;
        top: unset !important;
    }
    h1 {
        font-size: 3rem;
    }
    .tryptique h1 {
        width: 100vw;
        text-align: center;
    }
    .conteneur-modules {
        padding: 0 10px;
    }
    .infos-synopsis, .extraits, .module.prix {
        left: 0;
        width: 100%;
    }
    .galerie {
        left: -10px;
    }
    .iframe {
        height: 55vw;
    }
    .extraits-presse {
        margin: 0 40px 40px;
        width: calc(var(--max-col) * 150px);
        max-width: calc(100% - 60px);
        column-count: var(--max-col);
        flex-grow: 1;
    }
    .extraits-presse.last {
        margin-bottom: 0;
    }
    .dossier-complet .mod-conteneur {
        padding: 0 2rem;
    }
    /* Agenda */
    .date {
        padding: 10px 0;
    }
    .info {
        padding: 1px 0;
        font-size: .875rem;
    }
    .info-date {
        max-width: unset;
        width: 100%;
    }
    .info-conteneur {
        display: block;
        max-width: unset;
    }
    .info-conteneur .info {
        width: auto;
    }
    
    .conteneur-devant-parapet {
        bottom: 0;
    }
}


@media screen and (min-width: 800px) {
    .phone .titres.monte {
        right: 10vw;
    }
    .phone.le-destin .liseret, .phone.carmen .liseret, .phone.frankenstein .liseret {
        width: calc(calc(100vh - 40px) * 1.498) !important;
    }
    .phone.geants .liseret {
        width: calc(calc(100vh - 40px) * 1.4988) !important;
    }
    .phone.le-destin .liseret-deux, .phone.frankenstein .liseret-deux {
        left: calc(calc(100vh - 40px) * 1.498);
        transform: rotateY(180deg);
    }
    /*.phone.madame-bovary .liseret-deux {
        position: absolute;
        left: 150vh;
        width: 150vh;
    }*/
    .phone.carmen .remplissage, .phone.geants .remplissage, .phone.geants .mask {
        background-color: #000;
        position: absolute;
        left: calc(calc(99.8vh - 40px) * 1.498);
        top: 100%;
        height: 4.8vh;
        width: calc(100% - calc(calc(99.8vh - 40px) * 1.498));
        /*mask-image: linear-gradient(to left, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 95%, rgba(0,0,0,0));*/
    }
    .phone.geants .remplissage, .phone.geants .mask {
        background-color: #0f090e;
        left: calc(calc(99.8vh - 40px) * 1.4988);
        width: calc(100% - calc(calc(99.8vh - 40px) * 1.4988));
        height: 6.2vh;
    }
    .phone.geants .mask {
        left: calc(calc(82.8vh - 40px) * 1.4988);
        width: calc(17vh * 1.4988);
        mask-image: linear-gradient(to left, rgb(15,9,14) 0%, rgba(15,9,14,0));
    }
}

.phone main {
    padding-top: 0;
}
.phone .parapet {
    margin-top: 40vh;
}
    .phone .conteneur-img-principale {
        height: calc(100vh - 40px);
        width: 100%;
    }
    .phone .les-miserables .conteneur-img-principale {
        height: 100vh;
    }
    .phone .crime-et-chatiment .conteneur-img-principale .img-principale {
        height: 100%;
    }
    .phone .carmen .liseret {
        width: calc(calc(100vh - 40px) * 1.498) !important;
    }