/* 1. Styles de base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 16px; /* Base pour le calcul des rem */
    font-family: sans-serif;
}
/* 2. Style de la bannière */
.hero-banner {
    height: 50vh; /* 50% de la hauteur de la fenêtre */
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding-top: 20vh; /* Centre verticalement (astuce simple) */
}
.hero-banner h1 {
    font-size: 3rem; /* 3 * 16px = 48px */
}
/* 3. Style du conteneur principal */
.content-wrapper {
    padding: 1.5rem; /* Ajoute de l'espace autour des blocs */
}
/* 4. Style des blocs */
.column {
    padding: 1.5rem; /* 1.5 * 16px = 24px */
    margin-bottom: 1.5rem; /* Espace entre les blocs */
}
.col1 {
    width: 70%; /* 70% de la largeur du conteneur */
    background-color: #f0f8ff;
}
.col2 {
    width: 30%;
    border: 2px solid #ccc; /* Une bordure fixe de 2px */
    background-color: #f9f9f9;
}
.column p {
    font-size: 1rem; /* 1 * 16px = 16px */
}