/*
    CERTAINES SECTIONS du fichier sont à faire seul en suivant les consignes et en comparant avec les captures fournies selon les largeurs d'écran, et d'autres seront faites en groupe.
*/


/* ------------------
    BOILERPLATE et VARIABLES
--------------------*/
html {
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.5;
    font-family: "Rubik", sans-serif;
    
    --rouge: #a5172f;
    --jaune: #e5e835;
    --largeur-max: 1024px;
}

*,
*::before,
*::after {
    box-sizing: inherit;
    padding: 0;
    margin: 0;
}

/* ------------------
    GÉNÉRAL (à faire seul - 15 mins)
   ------------------ */

/********CONSIGNE
    L'interface 

        - Occupé 100% de la largeur disponible
        - Être centré dans la page
        - Couleur d'arrière-plan blanche

*/

.interface {
    width: 100%;
    margin: 0 auto;
    background-color: #fff;
}



/********CONSIGNE
    Le titre principal, les titres secondaires et les titres tertiaires
        - Police utilisé: Source Serif Pro et le plan B
        - En majuscules
        - Hauteur de ligne: 1 (line-height)
*/

h1,
h2,
h3 {
    font-family: "Source Serif Pro", serif;
    text-transform: uppercase;
    line-height: 1;
}

/********CONSIGNE
    Les liens ayant la classe .btn
        - Largeur de 200px
        - Pas de soulignement
        - Bordure de 2px, pleine et rouge
        - Couleur de texte rouge
        - Texte aligné au centre
        - Marge extérieur du haut de 18px
        - En majuscules
        - Hauteur de ligne: 1.3 (line-height)
        - Marge intérieure en haut/bas de 12px, gauche/droite 0
*/

a.btn {
    display: block;
    width: 200px;
    text-decoration: none;
    border: 2px solid var(--rouge);
    color: var(--rouge);
    text-align: center;
    margin-top: 18px;
    text-transform: uppercase;
    line-height: 1.3;
    padding: 12px 0;
}

/********CONSIGNE
    Les liens ayant la classe .btn en survol
        - Couleur d'arrière-plan rouge
        - Couleur de texte jaune
*/

a.btn:hover {
    background-color: var(--rouge);
    color: var(--jaune);
}

/********CONSIGNE
    Le titre principal
        - Image d'arrière-plan: 
            - Fichier: "no_music_no_life.jpg"
            - Couvre entièrement la section
            - Est positionné par rapport au bas
        - Marges intérieures en haut de 400px, gauche/droite de 0, en bas de 60px (à écrire en une seule ligne)
        - Taille de la police 48px
        - Texte aligné au centre
        - Hauteur de ligne de 1 (line-height)
        - Couleur blanche pour le texte

*/

h1 {
    background: url("../img/no_music_no_life.jpg");
    background-size: cover;
    background-position:bottom;
    background-repeat: no-repeat;
    padding: 400px 0 60px;
    font-size: 48px;
    text-align: center;
    line-height: 1;
    color: #fff;
}


/********CONSIGNE
    Les titres secondaires
        - Couleur rouge pour le texte
        - Taille de police de 24px
*/

h2 {
    color: var(--rouge);
    font-size: 24px;
}



/********CONSIGNE
    Les titres tertiaires
        - Couleur rouge pour le texte
        - Texte aligné au centre
        - Marge extérieure du haut de 12px
*/

h3 {
    color: var(--rouge);
    text-align: center;
    margin-top: 12px;
}


/********CONSIGNE
    Les paragraphes
        - Marge extérieure du haut de 18px
*/

p {
    margin-top: 18px;
}




/********CONSIGNE
    Les images
        - Largeur de 100% du parent
        - L'image doit couvrir sa zone sans briser ses proportions
*/

img {
    width: 100%;
    object-fit: cover;
}




/* ⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌
        ENTÊTE (en groupe)
   ⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌ */

/* ----- Navigation principale ----- */

nav {
    display: none;
} 

nav ul {
    display: flex;
    list-style-type: none;
    background-color: var(--rouge);
    align-items: center;
}



nav a {
    text-decoration: none;
    padding: 32px;
    color: var(--jaune);
    text-transform: uppercase;
    display: block;
}

.burger-menu {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
    font-size: 32px;
}



nav a:hover {
    background-color: var(--jaune);
    color: var(--rouge);
}

nav li:last-of-type  {
    margin-left: auto;
    background-color: black;
}

nav li:last-of-type:hover {  
    color: var(--rouge);
}




/* ⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌
        SECTION INTRO (en groupe)
   ⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌ */

   section.intro {
    background: url(../img/diago_top.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
    padding: 50px 0 100px;
   }

   section.diffusion,
   section.production {
    display: flex;
    margin: 0 auto;
    max-width: var(--largeur-max);
    flex-direction: column;
   }

/* -------- DIFFUSION ------- */
   section.diffusion div.colonne {
    padding: 24px;
   }

   section.diffusion img.realite {
    display: none;
   }

   section.production img {
    display: none;
   }

   section.production div.colonne {
    padding: 24px;
   }

/* ⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌
        MUSIQUE CONTINUE (à faire seul, 10 mins)
   ⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌ */

/********CONSIGNE
    Pour la section qui a la classe .musique-contenu
        - Couleur d'arrière-plan: rouge
        - Couleur de texte: jaune
        - Marges intérieures haut/bas de 100px, gauche/droite de 24px
        - Conteneur flex qui affiche les items en colonne
    
*/    




/********CONSIGNE   
    Le div qui a la classe .colonne dans la section avec la classe .musique-continu
        - Marge extérieure à droite de 24px
        - Conteneur flex qui affiche les items en colonne, alignés au centre à la verticale

*/


/********CONSIGNE
    Les images dans la section avec la classe .musique-continu
        - Marge extérieure en haut de 16px
*/



/********CONSIGNE
    Les titres secondaires dans la section avec la classe .musique-continu
        - Couleur de texte: jaune
*/



/********CONSIGNE
    Les liens dans la section avec la classe .musique-continu
        - Couleur d'arrière-plan: rouge
        - Couleur de texte: jaune
*/




/********CONSIGNE
    Les liens en survol dans la section avec la classe .musique-continu
        - Couleur d'arrière-plan: jaune
        - Couleur de texte: rouge
*/






/*  ⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌
        SPECTACLES (en groupe)
    ⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌ */

   section.spectacles {
    background: url("../img/diago_bottom.png");
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
    padding: 100px 24px 24px;
   }

   section.spectacles ul {
    display: grid;
    max-width: var(--largeur-max);
    margin: 16px auto 0;
    grid-template-columns: 1fr;
    grid-auto-rows: 400px;
    gap: 12px;
   }

   section.spectacles a.reserver {
    text-decoration: none;
    background-color: var(--rouge);
    color: var(--jaune);
    display: block;
    text-align: center;
    padding: 12px;
    margin: 16px auto;
    width: 200px;
    border-radius: 20px;
   }

   section.spectacles li {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style-type: none;
    background-color: var(--jaune);
    border-radius: 20px;
    padding: 12px;
    text-align: center;
   }

   section.spectacles img {
    width: 200px;
    height: 300px;
    object-fit: cover;
   }
   

/* ⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌
    BREAKPOINT à 592px (en groupe)
   ⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌ */

   @media screen and (min-width: 592px) {
    section.spectacle img {
        width: 100%
    }
   }






/* ⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌
    BREAKPOINT: 824px (en groupe)
   ⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌ */

@media screen and (min-width: 824px) {
    
    .burger-menu {
        display: none;
    }

    nav {
        display: block;
    }

    section.spectacles ul {
        grid-template-columns: 1fr 1fr;
    }

   }




/* ⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌
    BREAKPOINT: 1024px (à faire seul, 5 mins)
   ⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌ */
   @media screen and (min-width: 1024px) {
    
    section.spectacles ul {
        grid-template-columns: 1fr 1fr 1fr;
    }

    section.spectacles li.en-vedette {
        grid-column: 1 / -1
    }

   }

   @media screen and (min-width: 1200px) {
    
    section.spectacles ul {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    section.spectacles li.en-vedette {
        grid-column: 1 / -1
    }

   }


   /********CONSIGNE
    Ajouter une requête média pour appliquer des règles aux écrans d'une largeur minimale de 1024px
*/




    /********CONSIGNE
        La liste non-ordonnée dans la section avec la classe .spectacles
            - Doit s'afficher sur 3 colonnes de largeur égale
    */





/* ⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌
    BREAKPOINT: 1200px (à faire seul, 10 mins)
   ⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌⚌ */
/********CONSIGNE
    Ajouter une requête média pour appliquer des règles aux écrans d'une largeur minimale de 1200px
*/




    /********CONSIGNE
        La section ayant la classe .production
        ET 
        La section ayant la classe .diffusion
            - Largeur maximale de 1024px
            - Positionnement relatif
    */




    /********CONSIGNE
        Le div ayant la classe .colonne dans la section avec la classe .production    
            - Largeur de 400px
    */




    /********CONSIGNE
        L'image dans la section avec la classe .production    
            - Largeur de 624px
    */
    


    /********CONSIGNE
        L'image dans la section avec la classe .diffusion    
            - Largeur de 400px
    */
        


    /********CONSIGNE
        Le div ayant la classe .colonne dans la section avec la classe .diffusion    
            - Largeur de 300px
    */

    


    /********CONSIGNE
        L'image ayant la classe .realite dans la section avec la classe .diffusion    
            - Doit être visible en utilisant un affichage en bloc
            - Positionnement absolu, à 0px du bas de son parent et 0px de la droite de son parent
    */




    /********CONSIGNE
        Le div ayant la classe .colonne dans la section avec la classe .musique-continu
            - Largeur de 376px
    */




    /********CONSIGNE
        L'image dans la section avec la classe .musique-continu
            - Largeur de 624px
    */
        



    /********CONSIGNE
        Le titre principal
            - Repositionnement de l'image d'arrière-plan, centré à l'horizontal et 65% à la verticale
    */




    /********CONSIGNE
        Les titres secondaires
            - Largeur maximale à 1024px
            - Centré dans son conteneur (margin: 0 auto)
    */
        



    /********CONSIGNE
        La section ayant la classe .spectacles
            - La marge intérieure du haut doit être ajustée à 200px
    */




    /********CONSIGNE
        La liste non-ordonnée dans la section avec la classe spectacles
            - Ajuster la grille pour obtenir 4 colonnes de largeur égale
    */




    /********CONSIGNE
        L'item de liste ayant la classe .en-vedette dans la section avec la classe .spectacles
            - Occupe les colonnes des lignes 1 à 4
    */