html {
    --arrondi: 1em; /*variable*/
}

/*----------------PILULE----------------*/

h2 {
    padding: 40px 0px 12px 0px; /*marge intérieur*/
    font-size: var(--28); /*police taille*/
}

h2:first-of-type {
    padding-top: 60px; /*marge intérieur haut*/
}

.pilule {
    max-width: 410px; /*largeur*/
    margin: auto; /*marge extérieur*/
    display: flex; /*apparition des balises*/
    justify-content: space-between;
    border: 4px solid transparent; /*bordure épaisseur*/
    border-radius: 2em; /*bordure arrondi*/
}

.pilule:last-of-type {
    margin-bottom: 80px; /*marge extérieur bas*/
}

.pilule p {
    margin-bottom: 0px; /*marge extérieur bas*/
    font-size: var(--16); /*police taille*/
    line-height: 1.4; /*espace entre ligne*/
    text-align: center; /*texte alignement*/
    text-transform: uppercase; /*texte transformer*/
}

.pilule .pass {
    width: 50%; /*largeur*/
    margin: 0px; /*marge extérieur*/
    font-family: var(--titre-petit); /*police type*/    
    border-radius: var(--arrondi) 0px 0px var(--arrondi); /*bordure arrondi*/
    color: var(--blanc); /*police couleur*/
}

.abonnement .pass {
    width: 70%; /*largeur*/
}

.pilule .prix {
    width: 50%; /*largeur*/
    font-family: var(--autre); /*police type*/
    border-radius: 0px var(--arrondi) var(--arrondi) 0px; /*bordure arrondi*/
    background-color: var(--blanc); /*couleur du fond*/
}

.abonnement .prix {
    width: 30%; /*largeur*/
}

.pilule .prix span {
    width: 3px; /*largeur*/
    height: 24px; /*hauteur*/
    margin: 0px 5px 4px 5px; /*marge extérieur*/
    display: inline-block; /*apparition des balises*/
    vertical-align: middle; /*alignement vertical d'un contenant*/
}


/*----------------SEPARATION----------------*/

hr { 
    width: 700px; /*largeur*/
    height: 4px; /*hauteur*/
    margin: auto; /*marge extérieur*/
    margin-top: 60px; /*marge extérieur haut*/
    border: none; /*bordure épaisseur*/
    background-color: var(--noir); /*couleur du fond*/
}


/*----------------COULEUR----------------*/

.vermeil {
    background: var(--vermeil); /*couleur du fond*/
    color: var(--vermeil); /*police couleur*/
}

.orange {
    background: var(--orange); /*couleur du fond*/
    color: var(--orange); /*police couleur*/
}

.turquoise {
    background: var(--turquoise); /*couleur du fond*/
    color: var(--turquoise); /*police couleur*/
}


/*----------------INFORMATION----------------*/

.information {
    width: 50%; /*largeur*/
    margin-top: 60px; /*marge extérieur haut*/
}

.information span {
    margin-left: 60px; /*marge extérieur haut*/
}

.bouton {
    margin: 0px 15px 60px 15px; /*marge extérieur*/
}