html{
    overflow-y: hidden;
}

#realisations{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100vh;
    height: 100svh;
    overflow-y:hidden;
    scroll-behavior: smooth;
    -ms-scroll-snap-type: both mandatory;
        scroll-snap-type: both mandatory; /* Permer de placer les vignettes au centre au scroll */
    padding-inline: 0;
}

#realisations header{
    position: fixed;
}

#realisations footer{
    height: 100%;
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
    -webkit-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
            transform: rotate(-180deg); /* Pour écrire de bas en haut */
    padding: 5rem 0.5rem 1rem;
    text-align: left;
}

/* Contenu principal : ambiances */

.ambiances{
    padding-block: 2rem;
    display: -ms-grid;
    display: grid;
    grid-auto-flow: row;
    gap: 1rem;
}

.ambiances h1{
    position: sticky;
    z-index: -2;
    width: var(--vignette-width);
    max-width: var(--vertical-max-width);
    text-align: center;
    margin-top: 12rem;
    font-size: var(--fs-h1);
}

/* Cercles de navigation */

.pagination{
    position: sticky;
    width: var(--vignette-width);
    max-width: var(--vertical-max-width);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 0.5em;
}

.pagination a {
    border:2px solid;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    height: 1.25em;
    aspect-ratio: 1;
    font-family: var(--ff-display);
    font-size: var(--fs-page);
    font-weight: 500;
    font-variation-settings: 'CONT' 1000, 'MIDL' 0;
    color:var(--clr-dark);
}

.pagination a:hover, .pagination a:focus-visible{
    background-color: transparent;
}

a.didactique{
    background-color: var(--clr-cyan);
    border-color: var(--clr-cyan);
}

a.festive{
    background-color: var(--clr-jaune);
    border-color: var(--clr-jaune);
}

a.epique{
    background-color: var(--clr-rouge);
    border-color: var(--clr-rouge);
}

a.mysterieuse{
    background-color: var(--clr-violet);
    border-color: var(--clr-violet);
}

a.angoissante{
    background-color: var(--clr-light);
    border-color: var(--clr-light);
}

a.loufoque{
    background-color: var(--clr-orange);
    border-color: var(--clr-orange);
}

a.informative{
    background-color: var(--clr-vert);
    border-color: var(--clr-vert);
}

a.romantique{
    background-color: var(--clr-rose);
    border-color: var(--clr-rose);
}

.didactique:hover, .didactique:focus-visible{
    color: var(--clr-cyan);
}

.festive:hover, .festive:focus-visible{
    color: var(--clr-jaune);
}

.epique:hover, .epique:focus-visible{
    color: var(--clr-rouge);
}

.mysterieuse:hover, .mysterieuse:focus-visible{
    color: var(--clr-violet);
}

.angoissante:hover, .angoissante:focus-visible{
    color: var(--clr-light);
}

.loufoque:hover, .loufoque:focus-visible{
    color: var(--clr-orange);
}

.informative:hover, .informative:focus-visible{
    color: var(--clr-vert);
}

.romantique:hover, .romantique:focus-visible{
    color: var(--clr-rose);
}

/* Vignettes cercles */

.vignettes{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; /* Place les vignettes en ligne */
    padding-left: var(--ambiance-padding-left);
    padding-right: var(--ambiance-padding-right);
}

.vignette{
    width: var(--vignette-width);
    height: var(--vignette-width);
    max-width: var(--vertical-max-width);
    max-height: var(--vertical-max-width);
    position: relative;
    z-index: 2;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    scroll-snap-align: center; /* Place les vignettes au centre au scroll */
    scroll-snap-stop: always;
}

.vignette span{
    font-family: var(--ff-display);
    font-style: normal;
    font-weight: 700;
    font-size: var(--fs-vignette);
    line-height: 1.1em;
    text-transform: uppercase;
    font-variation-settings: 'CONT' 800, 'MIDL' 0;
    z-index: 1;
}

.vignette:hover, .vignette:focus-visible{
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.vignette svg{
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
}

/* Met en page les articles présentant chaque vidéo */

.vignettes article{
    display: -ms-grid;
    display: grid; /* Permet de changer l'ordre des éléments selon l'affichage */
    grid-gap: 2rem;
        grid-template-areas: 
    "titre"
    "description"
    "fonctions"
    "video"
    "citation";
    height: 100%;
    background-color: var(--clr-dark);
}

.modal article > * {
    background-color: var(--clr-dark);
  }

.titre{
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: titre;
    -ms-grid-row-align: end;
        align-self: end;
}
.description{
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    grid-area: description;
}

.fonctions{
    -ms-grid-row: 5;
    -ms-grid-column: 1;
    grid-area: fonctions;
    -ms-grid-row-align: end;
        align-self: end;
}

.video{
    -ms-grid-row: 7;
    -ms-grid-column: 1;
    grid-area: video;
    width: 100%;
    border-radius:1rem;
    border: 3px solid
}

.citation{
    -ms-grid-row: 9;
    -ms-grid-column: 1;
    grid-area: citation;
}

/* Bouton et article didactique */

#didactique{
    background-image: url(../images/logleers.jpg);
}

#didactique:hover, #didactique:focus-visible{
    color: var(--clr-cyan);
}

#didactique::before{
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--clr-cyan-transp);
}

#didactique svg{
    fill: var(--clr-cyan);
}

#didactiqueArt .video{
    border-color:var(--clr-cyan);
}

/* Bouton et article festive */

#festive{
    background-image: url(../images/fete-du-cos.jpg);
}

#festive:hover, #festive:focus-visible{
    color: var(--clr-jaune);
}

#festive::before{
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--clr-jaune-transp);
}

#festive svg{
    fill: var(--clr-jaune);
}

#festiveArt .video{
    border-color:var(--clr-jaune);
}

/* Bouton et article épique */

#epique{
    background-image: url(../images/contes-du-vortex.jpg);
}

#epique:hover, #epique:focus-visible{
    color: var(--clr-rouge);
}

#epique::before{
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--clr-rouge-transp);
}

#epique svg{
    fill: var(--clr-rouge);
}

#epiqueArt .video{
    border-color:var(--clr-rouge);
}

/* Bouton et article Mystérieuse */

#mysterieuse{
    background-image: url(../images/faces-cachees.jpg);
}

#mysterieuse:hover, #mysterieuse:focus-visible{
    color: var(--clr-violet);
}

#mysterieuse::before{
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--clr-violet-transp);
}

#mysterieuse svg{
    fill: var(--clr-violet);
}

#mysterieuseArt .video{
    border-color:var(--clr-violet);
}

/* Bouton et article Angoissante */

#angoissante{
    background-image: url(../images/max-roussel.jpg);
    color: var(--clr-dark); 
}

#angoissante:hover, #angoissante:focus-visible{
    color: var(--clr-light);
}

#angoissante::before{
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--clr-light-transp);
}

#angoissante svg{
    fill: var(--clr-light);
}

#angoissanteArt .video{
    border-color:var(--clr-light);
}

/* Bouton et article Loufoque */

#loufoque{
    background-image: url(../images/barbie-girl.jpg);
}

#loufoque:hover, #loufoque:focus-visible{
    color: var(--clr-orange);
}

#loufoque::before{
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--clr-orange-transp);
}

#loufoque svg{
    fill: var(--clr-orange);
}

#loufoqueArt .video{
    border-color:var(--clr-orange);
}

/* Bouton et article informative */

#informative{
    background-image: url(../images/anachronopete.jpg);
}

#informative:hover, #informative:focus-visible{
    color: var(--clr-vert);
}

#informative::before{
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--clr-vert-transp);
}

#informative svg{
    fill: var(--clr-vert);
}

#informativeArt .video{
    border-color:var(--clr-vert);
}

/* Bouton et article romantique */

#romantique{
    background-image: url(../images/mariage.jpg);
}

#romantique:hover, #romantique:focus-visible{
    color: var(--clr-rose);
}

#romantique::before{
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--clr-rose-transp);
}

#romantique svg{
    fill: var(--clr-rose);
}

#romantiqueArt .video{
    border-color:var(--clr-rose);
}

/* Vignettes en blanc au survol */

.vignette:hover::before, .vignette:focus-visible::before{
    background-color: var(--clr-light-transp) !important;
}

.vignette:hover svg, .vignette:focus-visible svg{
    fill:var(--clr-light) !important;
}

#angoissante.vignette:hover::before, #angoissante.vignette:focus-visible::before{
    background-color: var(--clr-dark-transp) !important;
}

#angoissante.vignette:hover svg, #angoissante.vignette:focus-visible svg{
    fill:var(--clr-dark) !important;
}

/* Fenêtres modales */

 /* fond du modal */
 .modal {
    position: fixed;
    display: none; /* Caché par défaut, sinon flex */
    z-index: 4; /* Les titres de vignettes ont un z-index de 1, et le header a un z-index de 3 il faut être au-dessus */
    left: 0;
    right: 0;
    top: 0;
    width: var(--vertical-max-width);
    max-width: var(--vignette-width);
    height: 100%;
    margin-inline: auto;
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
    overflow: auto; /* Permet le scroll au besoin */
    scrollbar-width: none; /* Retire scrollbar du modal sur Firefox */
    -ms-overflow-style: none; /* Retire scrollbar du modal sur Edge et IE */
    background-color: transparent;
  }

  .modal::-webkit-scrollbar{
    display: none; /* Retire scrollbar du modal sur Chrome, Safari, Opera... */
  }
  
  /* Boîte de contenu du modal */
  .modal-content {
    background-color: var(--clr-dark);
    padding-top: 1rem;
    -webkit-animation-name: animate;
            animation-name: animate;
    -webkit-animation-duration: 2s;
            animation-duration: 2s
  }

  #epiqueModal .modal-content{
    height: -webkit-min-content;
    height: -moz-min-content;
    height: min-content; /* Pour la vidéo verticale, la hauteur doit être assez grande pour couvrir la vignette */
  }
  
  /* Bouton fermeture modal */
  .close {
    display: block;
    text-align: right;
    color: var(--clr-light);
    font-size: 2rem;
    font-weight: bold;
  }
  
  .close:hover, .close:focus-visible {
    color: var(--clr-cyan);
    text-decoration: none;
    cursor: pointer;
  } 

/* Animation modal */
@-webkit-keyframes animate {
    from { opacity: 0}
    to { opacity: 1}
  }
@keyframes animate {
    from { opacity: 0}
    to { opacity: 1}
  }

@media screen and (max-aspect-ratio:1/1){

    .ambiances h1{
        left: var(--ambiance-padding-left);
        -ms-flex-item-align: end;
            -ms-grid-row-align: end;
            align-self: end;
    }

    .vignette{
        -ms-flex-item-align: center;
            -ms-grid-row-align: center;
            align-self: centre;
    }

    .pagination{
        left: var(--ambiance-padding-left);
        -ms-flex-item-align: center;
            -ms-grid-row-align: center;
            align-self: center;
    }
    .modal{
        padding-inline: var(--ambiance-padding-left);
        background-color: var(--clr-dark);
    }

    @media screen and (min-width: 37rem){
        :root{
            --ambiance-padding-left:calc((100vw - var(--vignette-width)) / 2);
        }
    }
}

@media screen and (min-aspect-ratio:1/1){

    html, #realisations{
        overflow-y: auto;
    }

    #realisations{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

/*    #realisations header {
        position: sticky;
    }*/

    .ambiances{
        grid-auto-flow: column;
        grid-auto-columns: 1fr 1fr 1fr;
        padding-top: var(--ambiance-padding-top);
        padding-bottom: var(--ambiance-padding-bottom);
    }

    .ambiances h1{
        position: fixed;
        margin-top: 0;
        padding-top: 0;
        padding-right: 1rem;
        top:50vh;
        top: 50dvh;
        left: var(--inline-padding);
        -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
                transform: translateY(-50%);
        height: -webkit-min-content;
        height: -moz-min-content;
        height: min-content;
        width: 30vw;
    }

    .vignettes{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        padding: 0;
        align-items: center;
    }

    .vignette{
        max-width: var(--horizontal-max-width);
        max-height: var(--horizontal-max-width);
    }

    .pagination{
        position: fixed;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: end;
            -ms-flex-align: end;
                align-items: flex-end;
        right: var(--inline-padding);
        height: -webkit-min-content;
        height: -moz-min-content;
        height: min-content;
        width: auto;
        top:50vh;
        top: 50svh;
        -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
                transform: translateY(-50%);
    }

    #realisations footer{
        height: 100%;
        text-align: center;
        -webkit-writing-mode: horizontal-tb;
            -ms-writing-mode: lr-tb;
                writing-mode: horizontal-tb;
        -webkit-transform: none;
            -ms-transform: none;
                transform: none; /* Rétablit le sens d'écriture */
        padding: 1rem 0.5rem;
    }

    .modal{
        width: auto;
        max-width: none;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: start;
        background-color: var(--clr-dark);
    }
    .modal-content{
        height: var(--horizontal-max-width);
    }

    .modal-content{
        padding: var(--inline-padding);
    }

    .video{
        height: var(--horizontal-max-width);
        width: auto;
    }

    .close{
        position: absolute;
        right: 2rem;
    }

    .vignettes article{
        -ms-grid-rows: auto 2rem auto 2rem auto 2rem auto;
            grid-template-areas: 
        "titre video"
        "citation video"
        "citation fonctions"
        "citation description";
        -ms-grid-columns: 1fr 2rem -webkit-min-content;
        -ms-grid-columns: 1fr 2rem min-content;
        grid-template-columns: 1fr -webkit-min-content;
        grid-template-columns: 1fr min-content;
        padding-right: var(--inline-padding);
    }

    #epiqueArt{
            grid-template-areas: 
        "titre video"
        "citation video"
        "fonctions video"
        "description video";
    }
    #epiqueArt .video{
        width: var(--horizontal-max-width);
        height: auto;
        max-height: 90vh;
    }

    .titre{
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }

    #epiqueArt > .titre{
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }

    .description{
        -ms-grid-row: 7;
        -ms-grid-column: 3;
    }

    #epiqueArt > .description{
        -ms-grid-row: 4;
        -ms-grid-column: 1;
    }

    .fonctions{
        -ms-grid-row: 5;
        -ms-grid-column: 3;
    }

    #epiqueArt > .fonctions{
        -ms-grid-row: 3;
        -ms-grid-column: 1;
    }

    .video{
        -ms-grid-row: 1;
        -ms-grid-row-span: 3;
        -ms-grid-column: 3;
    }

    #epiqueArt > .video{
        -ms-grid-row: 1;
        -ms-grid-row-span: 4;
        -ms-grid-column: 2;
    }

    .citation{
        -ms-grid-row: 3;
        -ms-grid-row-span: 5;
        -ms-grid-column: 1;
    }

    #epiqueArt > .citation{
        -ms-grid-row: 2;
        -ms-grid-row-span: 1;
        -ms-grid-column: 1;
    }
}

@media screen and (min-width:800px){
    article.container{
        margin:0 auto;
    }
}

@media screen and (min-width:1200px){
    :root{
        --horizontal-max-width:25vw;
    }

    .main-title::before{
        left: 38%;
        right: auto;
    }

    .hidden{
        display: inherit;
    }
    
    .modal{
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        background-color: transparent;
    }

    .modal-content{
        padding-top: 0;
    }

    .vignettes article, #epiqueArt{
        -ms-grid-rows: auto 2rem auto 2rem auto;
            grid-template-areas: 
        "titre video fonctions"
        "titre video description"
        "citation video description";
        -ms-grid-columns: 1fr 2rem -webkit-min-content 2rem 1fr;
        -ms-grid-columns: 1fr 2rem min-content 2rem 1fr;
        grid-template-columns: 1fr -webkit-min-content 1fr;
        grid-template-columns: 1fr min-content 1fr;
    }

    .titre, .fonctions{
        -ms-flex-item-align: start;
            -ms-grid-row-align: start;
            align-self: start;
    }

    #epiqueModal .modal-content{
        height: var(--horizontal-max-width)
      }
    
    #epiqueArt .video{
        height: var(--horizontal-max-width);
        width: auto;
    }

    .titre{
        -ms-grid-row: 1;
        -ms-grid-row-span: 3;
        -ms-grid-column: 1;
    }

    .description{
        -ms-grid-row: 3;
        -ms-grid-row-span: 3;
        -ms-grid-column: 5;
    }

    .fonctions{
        -ms-grid-row: 1;
        -ms-grid-column: 5;
    }

    .video{
        -ms-grid-row: 1;
        -ms-grid-row-span: 5;
        -ms-grid-column: 3;
    }

    .citation{
        -ms-grid-row: 5;
        -ms-grid-row-span: 1;
        -ms-grid-column: 1;
    }
}

@media screen and (max-aspect-ratio: 1/1) and (max-height: 650px) {
    .pagination{
        display: none;
    }
    
    .ambiances{
        margin-top: 9rem;
    }
    .ambiances h1{
        font-size: 2rem;
        margin-top: 0;
    }

    header{
        padding-block: 0;
    }

}