body {
    /** For demo only **/
    text-align: center;
    font-family: Arial;
}

:root {

    /* Colors */
    --color-orange: #E24A29;
    --color-pink: #E27E7E;
    --color-yellow: #EE9C37;
    --color-purple: #9F1B7F;
    --color-darkpurple: #200363;

    /* Spacings */
    --padding-xs: 1em;
    --padding-sm: 2em;

    /* Active state */
    --btn-active-background: var(--color-pink);   
    --btn-active-color: #FFF;

    /** Hover state */
    --btn-hover-background: var(--color-yellow);
    --btn-hover-color: #FFF;
    

    /** Border radius */
    --border-radius-sm: 5px;
    --border-radius-lg: 16px;
}
.btn-container {
    width: 350px;
    display: flex;
    margin: var(--padding-sm) auto;

    gap: var(--padding-sm);
    flex-direction: column;
}
.btn {
    background: var(--btn-active-background);
    color: var(--btn-active-color);
    text-decoration: none;
    font-weight: bold;
    padding: var(--padding-xs) var(--padding-sm);
    display: inline-block;
    border-radius: var(--border-radius-sm);
    

    /** Ajout d'une ombre portée sous le bouton **/
    box-shadow: 0px 3px 3px rgba(0,0,0,0.2);

    /** Ajout d'une ombre sous les lettres **/
    text-shadow: 0 1px 0 rgba(0,0,0,0.2);

     /** Exemple de transitions **/
    /** https://developer.mozilla.org/fr/docs/Web/CSS/transition **/
    transition: 
        background 0.2s linear,
        transform 0.2s linear;
}

.btn:hover {
    background: var(--btn-hover-background);

    /** Transform : zoom sur un item de 1.1 **/
    transform: scale(1.1);
}

/** Bouton orange surchargé **/
.btn-orange {
    --btn-active-background: var(--color-orange);  
    --btn-hover-background: var(--color-yellow); 
}

/** Bouton orange surchargé **/
.btn-purple {
    --btn-active-background: var(--color-purple);  
    --btn-hover-background: var(--color-darkpurple); 
}