/*----------------VARIABLE----------------*/

html {
	--longueur: 57.5%; /*variable*/
}

@media all and (max-width: 1000px) {
    html {
        --longueur: 80%; /*variable*/
    }
}


/*----------------FOND----------------*/

/*cours de danses*/
.fond:nth-of-type(1) {
    padding: 150px 0px 200px 0px; /*marge intérieur*/
}

/*professeur*/
.fond:nth-of-type(3) {
    padding: 20px 0px 225px 0px; /*marge intérieur*/
}

/*tarifs*/
.fond:nth-of-type(5) {
    padding: 20px 0px; /*marge intérieur*/
}

/*----------------FOND RESPONSIVE----------------*/

@media all and (max-width: 1200px) {
    /*cours de danses*/
    .fond:nth-of-type(1) {
        padding: 150px 0px; /*marge intérieur*/
    }
    /*professeur*/
    .fond:nth-of-type(3) {
        padding: 75px 0px 150px 0px; /*marge intérieur*/
    }
    /*tarifs*/
    .fond:nth-of-type(5) {
        padding: 75px 0px; /*marge intérieur*/
    }
}


/*----------------COURS----------------*/

.danse {
    width: 100%; /*largeur*/
    max-width: 1500px; /*largeur*/
    margin: auto; /*marge extérieur*/
    margin-top: 75px; /*marge extérieur haut*/
    padding: 0; /*marge intérieur*/
    display: grid; /*apparition des balises*/
    grid-template-columns: repeat(auto-fill, 400px); /*colonnes égales*/
    grid-gap: 45px; /*espace entre les éléments de la grille*/
    justify-content: center; /*centre horizontalement le contenu*/
    align-items: flex-start; /*centre verticalement le contenu*/
}

.cours-danses {
    width: 400px; /*largeur*/
    margin: 0 auto; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    border-radius: 30px 30px 20px 20px; /*bordure arrondi*/
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /*bordure ombre*/
    background-color: var(--couleur-blanc); /*couleur du fond*/
    color: var(--couleur-noir); /*couleur texte*/
}

.cours-danses:nth-of-type(n+6) {
    padding-bottom: 150px; /*marge intérieur basse*/
}

.cours-danses img {
    width: 100%; /*largeur*/
    height: 250px; /*hauteur*/
    margin: auto; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    border-radius: 20px 20px 0px 0px; /*bordure arrondi*/
    object-fit: cover; /*ajuster à la taille de son contenant*/
    object-position: center; /*position du contenu*/
}

.cours-danses .titre {
    margin: 40px auto; /*marge extérieur*/
}

.cours-danses:nth-of-type(6) .titre {
    font-size: 24pt; /*police taille*/
    margin: 46px auto; /*marge extérieur*/
}

.cours-danses .texte {
    width: 85%; /*largeur*/
    height: 300px; /*hauteur*/
    margin: auto; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    position: relative; /*type de positionnement*/
    transition: height 1s ease-in-out; /*transiton*/
    overflow: hidden; /*dépassement du contenant*/
}

.cours-danses:nth-of-type(1) .texte, .cours-danses:nth-of-type(3) .texte, .cours-danses:nth-of-type(5) .texte {
    height: 255px; /*hauteur*/
}

.cours-danses:hover:nth-of-type(1) .texte {
    height: 550px; /*hauteur*/
}

.cours-danses:hover:nth-of-type(2) .texte {
    height: 440px; /*hauteur*/
}

.cours-danses:hover:nth-of-type(3) .texte {
    height: 620px; /*hauteur*/
}

.cours-danses:hover:nth-of-type(4) .texte {
    height: 550px; /*hauteur*/
}

.cours-danses:hover:nth-of-type(5) .texte {
    height: 520px; /*hauteur*/
}


.cours-danses .texte::after {
    content: ""; /*ne gere que son contenu*/
    width: 100%; /*largeur*/
    height: 50%; /*hauteur*/
    position: absolute; /*type de positionnement*/
    bottom: 0; /*position en partant du bas*/
    left: 0; /*position en partant de la gauche*/
    pointer-events: none; /*événements de pointer*/
    transition: opacity 0.5s ease-in-out; /*transiton*/
    background: var(--couleur-after-blanc); /*image de fond tout en un*/
}

.cours-danses:hover .texte::after {
    opacity: 0; /*opacité*/
}

.cours-danses button {
    margin: 50px auto; /*marge intérieur*/
}

/*----------------COURS RESPONSIVE----------------*/

@media all and (max-width: 1200px) {
    .cours-danses {
        width: 90%; /*largeur*/
    }
    .cours-danses:nth-of-type(n+3) {
        padding-bottom: 75px; /*marge intérieur basse*/
    }
    .cours-danses:nth-of-type(4) .titre {
        font-size: 20pt; /*police taille*/
    }
    .cours-danses .texte {
        height: auto; /*hauteur*/
    }
    .cours-danses:nth-of-type(1) .texte {
        height: auto; /*hauteur*/
    }
    .cours-danses:hover .texte {
        height: auto; /*hauteur*/
    }
    .cours-danses .texte::after {
        display: none; /*apparition des balises*/
    }
}

/*----------------PROFESSEUR----------------*/

.professeur {
    width: var(--longueur); /*largeur*/
    margin: auto; /*marge extérieur*/
    margin-top: 50px; /*marge extérieur haut*/
    padding: 0; /*marge intérieur*/
    display: flex; /*apparition des balises*/
    flex-direction: row; /*direction des contenants*/
    justify-content: space-between; /*centre horizontalement le contenu*/
}

.professeur img {
    --image: 400px; /*variable*/
    width: var(--image); /*largeur*/
    height: var(--image); /*hauteur*/
    margin: auto 0px; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    border-radius: var(--image); /*bordure arrondi*/
    object-fit: cover; /*ajuster à la taille de son contenant*/  
	object-position: center; /*position du contenu*/
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4); /*bordure ombre*/
}

.professeur .paragraphe {
    width: 45%; /*largeur*/
    margin: auto 0; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
}

.professeur .titre {
    width: 100%; /*largeur*/
    margin-bottom: 25px; /*marge extérieur bas*/
    text-align: left; /*texte alignement*/
    text-transform: none; /*texte transformer*/
}

.professeur .texte {
    width: 100%; /*largeur*/
    height: 225px; /*hauteur*/
    margin: auto; /*marge extérieur*/
    margin-bottom: 25px; /*marge extérieur bas*/
    padding: 0; /*marge intérieur*/
    overflow: hidden; /*dépassement du contenant*/
    position: relative; /*couleur du fond*/
    background: linear-gradient(to bottom, #000000 50%, transparent); /*couleur du fond dégradé linéaire*/
    background-clip: text; /*définit l'arrière plan sur le texte*/
    color: transparent; /*couleur*/
}

.gris .professeur .titre {
    text-align: right; /*texte alignement*/
}

.professeur h3 {
    display: none; /*apparition des balises*/ 
}

/*----------------PROFESSEUR RESPONSIVE----------------*/

@media all and (max-width: 1200px) {
    .professeur {
        width: 100%; /*largeur*/
        flex-direction: column; /*direction des contenants*/
    }
    .professeur img {
        margin: auto;
        order: -1; /*définit l'ordre*/
    }
    .professeur .paragraphe {
        width: var(--longueur); /*largeur*/
        margin: auto; /*marge extérieur*/
        margin-top: 75px; /*marge extérieur haut*/
    }
    .gris .professeur .titre {
        text-align: initial; /*texte alignement*/
    }
    .professeur .texte {
        height: 185px; /*hauteur*/
    }
}

@media all and (max-width: 800px) {
    .professeur img {
        --image: 300px; /*variable*/
    }
    .professeur .titre {
        font-size: 18pt; /*police taille*/
    }
}


/*----------------TARIFS----------------*/

.tarif {
    width: 85%; /*largeur*/
    max-width: 1100px; /*largeur maximum*/
    margin: auto; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    color: var(--couleur-blanc); /*police couleur*/
}

.tarif .prix {
    width: 100%; /*largeur*/
    margin: auto; /*marge extérieur*/
    padding: 0px 0px; /*marge intérieur*/
    padding-top: 75px; /*marge intérieur haut*/
    display: flex; /*apparition des balises*/
    flex-direction: row; /*direction des contenants*/
    justify-content: space-between; /*centre horizontalement le contenu*/
}

.tarif .texte {
    width: 100%; /*largeur*/
    margin: 0; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    margin-top: 75px; /*marge extérieur haut*/
}

.tarif button {
    margin: 75px 50px 50px 0px; /*marge extérieur*/
}

.cadre {
    width: 325px; /*largeur*/
    margin: 0; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    border-radius: 30px; /*bordure arrondi*/
    display: flex; /*apparition des balises*/
    flex-direction: column; /*direction des contenants*/
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /*bordure ombre*/
    background-color: var(--couleur-coquille-d-oeuf);
}

.cadre .titre {
    width: 100%; /*largeur*/
    height: 100px; /*hauteur*/
    margin: 0; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    border-radius: 20px 20px 0px 0px; /*bordure arrondi*/
    display: flex; /*apparition des balises*/
    justify-content: center; /*centre horizontalement le contenu*/ 
    align-items: center; /*centre verticalement le contenu*/
    font-size: 18pt; /*police taille*/
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3); /*bordure ombre*/
    background-color: var(--couleur-vermeil);
}

.cadre .cadre-interieur {
    margin: 20px; /*marge extérieur*/
    padding: 30px; /*marge intérieur*/
    border-radius: 15px; /*bordure arrondi*/
    flex-grow: 1; /*utilise l'espace disponible*/
    color: var(--couleur-noir); /*police couleur*/
    box-shadow: 0px 0px 15px rgba(200, 200, 200, 0.3); /*bordure ombre*/
    background-color: var(--couleur-blanc);
}

.cadre .cadre-interieur p {
    padding: 10px 0px; /*marge intérieur*/
}


/*----------------TARIFS RESPONSIVE----------------*/

@media all and (max-width: 1200px) {
    .tarif .prix {
        flex-direction: column; /*direction des contenants*/
        justify-content: center; /*centre horizontalement le contenu*/
    }
    .cadre {
        width: 100%; /*largeur*/
        margin-bottom: 75px; /*marge extérieur bas*/
    }
}

@media all and (max-width: 800px) {
    .cadre {
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0); /*bordure ombre*/
        background-color: var(--couleur-blanc);
    }
    .cadre .cadre-interieur {
        margin: 20px; /*marge extérieur*/
        padding: 5px; /*marge intérieur*/
        border-radius: 0px; /*bordure arrondi*/
        box-shadow: 0px 0px 15px rgba(200, 200, 200, 0); /*bordure ombre*/
    }

    .tarif button {
    margin: 50px 0px 0px 0px; /*marge extérieur*/
}