/*VARIABLES CSS — toutes les couleurs et valeurs réutilisables */
:root {
    --red: hsl(0, 78%, 62%);
    --cyan: hsl(180, 62%, 55%);
    --orange: hsl(34, 97%, 64%);
    --blue: hsl(212, 86%, 64%);

    --grey-500: hsl(234, 12%, 34%);
    --grey-400: hsl(212, 6%, 44%);
    --white: hsl(0, 0%, 100%);
    --bg: hsl(0, 0%, 98%);

    --shadow: 0 10px 30px hsla(212, 6%, 44%, 0.18);
    --radius: 8px;
    --border-top-height: 4px;

    --font: 'Poppins', sans-serif;
    --font-size-body: 15px;
}

/*RESET */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font);
    font-size: var(--font-size-body);
    background-color: var(--bg);
    color: var(--grey-400);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 32px;
}

.title-wrapper {
    text-align: center;
    max-width: 540px;
    margin-bottom: 64px;
    color: var(--grey-500);
    line-height: 1.4;
}

.header-subtitle {
    font-size: 1.5rem;
    font-weight: 200;

}

.header-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.header-desc {
    font-size: 0.9rem;
}

/* GRILLE DES CARTES

       Sur mobile : 1 seule colonne,
       les cartes s'empilent les unes
       sur les autres */
.cards-grid {
    display: grid;
    gap: 24px;
    width: 100%;
    max-width: 1100px;

    /* Mobile : une seule colonne */
    grid-template-columns: 1fr;
}

/* DESKTOP — La magie de la grille !

       On crée 3 colonnes égales.
       La structure ressemble à ça :

             [ vide ] [ Team Builder ] [ vide  ]
       [ Supervisor ] [ Team Builder ] [ Calculator ]
       [ Supervisor ] [     Karma    ] [ Calculator ]
             [ vide ] [     Karma    ] [ vide  ]
 */
@media (min-width: 900px) {
    .cards-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, auto);
        align-items: center;
    }

    /* Supevisor */
    .card-cyan {
        /* colonne 1 */
        grid-column: 1;
        /* On commence à la ligne horizontale 1 et on s'arrête à la ligne 3. */
        grid-row: 1 / 3;
        align-self: center;
    }

    /* Team Builder */
    .card-red {
        /* colonne 2 */
        grid-column: 2;
        /* On ne met qu'un chiffre : elle occupe juste la 1ère rangée. */
        /* C'est un raccourci pour 1 / 2 */
        grid-row: 1;
    }

    /* Karma */
    .card-orange {
        /* colonne 2 */
        grid-column: 2;
        /* Elle occupe juste la 2ème rangée, juste en dessous de la rouge. */
        /* C'est un raccourci pour 2 / 3 */
        grid-row: 2;
    }

    /* Calculator */
    .card-blue {
        /* colonne 3 */
        grid-column: 3;
        /* Comme la carte Cyan, elle s'étire de la ligne 1 à la ligne 3. */
        /* Elle "survole" les deux rangées du milieu. */
        grid-row: 1 / 3;
        align-self: center;
    }
}

/* CARTE */
.card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 6px;

    /* La bordure colorée en haut de chaque carte */
    border-top: var(--border-top-height) solid transparent;

    /* Petite animation au survol */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px hsla(212, 6%, 44%, 0.22);
}

/* Couleur de bordure unique par carte */
.card-cyan {
    border-top-color: var(--cyan);
}

.card-red {
    border-top-color: var(--red);
}

.card-orange {
    border-top-color: var(--orange);
}

.card-blue {
    border-top-color: var(--blue);
}

/* CONTENU DE LA CARTE */
.card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--grey-500);
}

.card-desc {
    font-size: 0.82rem;
    line-height: 1.8;
    color: var(--grey-400);
    margin-bottom: 26px;
}

/* L'icône poussée tout en bas à droite */
.card-icon {
    margin-top: auto;
    align-self: flex-end;
    width: 64px;
    height: 64px;
}

/* FOOTER */
.attribution {
    margin-top: 48px;
    font-size: 0.75rem;
    text-align: center;
    color: var(--grey-400);
}

.attribution a {
    color: var(--grey-500);
    text-decoration: none;
    font-weight: 600;
}

.attribution a:hover {
    text-decoration: underline;
}