/* =========================================
   RESET
   ========================================= */
   * {
    box-sizing: border-box; /* Pour que les largeurs soient respectées */
    margin: 0;              /* Enlève les marges par défaut du navigateur */
    padding: 0;             /* Enlève les espaces internes par défaut */
}

/* =========================================
   LE BODY (La base de la page)
   ========================================= */
body {
    font-family: sans-serif;
    
    /* C'est ICI que la magie du Footer opère : */
    min-height: 100vh;      /* La page fait au MINIMUM 100% de la hauteur de l'écran */
    display: flex;          /* On active Flexbox sur toute la page */
    flex-direction: column; /* On empile tout verticalement */
}


/* ========================
   HEADER (Gris clair)
   ======================== */
.header {
    background-color: #D9D9D9; /* Le gris de fond */
    padding: 15px;             /* Un peu d'espace autour */
}


/* 1. Le conteneur (alignement) */
.header__nav {
    display: flex;
    align-items: center;
    /* C'est ce qui écarte tes 3 éléments : Burger <-> Logo <-> Boutons */
    justify-content: space-between; 
    padding: 0 10px; /* Petite marge de sécurité sur les bords */
}

/* 2. Le bloc des boutons (droite) */
.header__actions {
    display: flex;
    gap: 8px; /* Espace entre "Se connecter" et "S'inscrire" */
}

/* 3. Les boutons eux-mêmes (Style spécifique Header) */
.header__btn {
    text-decoration: none;
    color: #000;
    background-color: #f0f0f0; /* Gris clair */
    padding: 8px 12px;
    border-radius: 4px;
    
    /* Important pour le mobile : on réduit la taille */
    font-size: 11px; 
    font-weight: bold;
    white-space: nowrap; /* Empêche le texte de se couper */
}

/* 4. La variante sombre pour "S'inscrire" */
.header__btn--dark {
    background-color: #bfbfbf; /* Gris plus foncé */
}

/* ========================
   BURGER (Carré gris plus foncé)
   ======================== */
.header__burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;            /* Espace entre les lignes */
    
    width: 40px;         /* Carré comme sur l'image */
    height: 40px;
    background-color: #bfbfbf; /* Gris un peu plus foncé */
    border: none;
    cursor: pointer;
}

/* Les traits noirs du burger */
.header__burger-line {
    width: 20px;
    height: 2px;
    background-color: #000;
}

/* ========================
   LOGO (Cadre blanc)
   ======================== */
.header__logo {
    display: flex;
    flex-direction: column;
    align-items: center;   /* Centre le texte */
    
    border: 2px solid #fff; /* Le cadre blanc */
    padding: 2px 5px;
    
    text-decoration: none;
    color: #fff;           /* Texte en blanc */
    line-height: 0.9;      /* Resserre les deux mots */
}

.header__logo-text {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
}

/* ========================
   MAIN & HERO SECTION
   ======================== */
.main {
    padding: 20px; /* Marge interne pour ne pas coller aux bords de l'écran */
}

.hero {
    display: flex;
    flex-direction: column; /* Empile les éléments verticalement */
    align-items: center;    /* Centre tout horizontalement */
    text-align: center;     /* Centre le texte à l'intérieur des balises */
    gap: 30px;              /* Espace régulier entre chaque bloc (Magique !) */
    
    /* Optionnel : limite la largeur pour que ça ne soit pas trop large sur PC */
    max-width: 600px; 
    margin: 0 auto; /* Centre la section elle-même si l'écran est grand */
}

/* 1. La Carte Promotionnelle */
.hero__promo-card {
    width: 100%;
    border: 1px solid #000; /* Le cadre noir fin */
    padding: 20px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 2. Typographie */
.hero__title {
    font-size: 24px;
    font-weight: 500; /* Pas trop gras, comme sur l'image */
    line-height: 1.3;
}

.hero__description {
    font-size: 14px;
    line-height: 1.5;
    max-width: 90%; /* Pour que le texte ne soit pas trop large */
}

/* 3. Le bloc CTA gris clair */
.hero__app-link {
    width: 80%;       /* Plus petit que la largeur totale */
    background-color: #D9D9D9; /* Gris clair */
    padding: 30px 20px;
    font-size: 14px;
}


/* ========================
   FOOTER
   ======================== */
.footer {
    background-color: #D9D9D9; /* Même gris que le header */
    padding: 15px;             /* Espace interne */
    text-align: center;        /* Centre le texte horizontalement */
    
    /* Bonne pratique UX : */
    margin-top: auto;          /* Crée une séparation nette avec le contenu du dessus */
}

.footer__text {
    font-size: 14px;
    text-transform: uppercase; /* Met en majuscules automatiquement */
    font-weight: 500;
}