/* =========================================
   RESET GLOBAL
   ========================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
:root {
    color-scheme: light;
}

body {
    font-family: Segoe UI, -apple-system, sans-serif;
    background-color: #f3f4f6;
    display: flex;
    justify-content: center;
    min-height: 100dvh;
    overflow-x: hidden;
}
.red {
    color: red;
}

.bred {
    border: red solid 1px;
}
.bgreen {
    border: green solid 1px;
}
.bblue {
    border: blue solid 1px;
}
.borange {
    border: orange solid 1px;
}
/* =========================================
   LE CONTENEUR PRINCIPAL (La vue Mobile)
   ========================================= */
main {
    width: 100%;
    max-width: 450px;
    min-height: 100dvh;
    background-color: #ffffff;

    /* Disposition verticale et centrage par défaut */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    /* Espacements automatiques */
    padding: 30px 20px; /* Marge interne pour ne pas coller aux bords de l'écran */
    gap: 24px; /* Crée de l'air entre chaque gros bloc (h1, p, sections...) */

    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
    overflow-y: auto;
}

/* =========================================
   TYPOGRAPHIE (Tailles idéales Mobile)
   ========================================= */
h1 {
    font-size: 1.75rem; /* ~28px : Clair et impactant */
    line-height: 1.2;
    color: #111827; /* Presque noir pour un meilleur contraste */
    font-weight: 700;
}

h2 {
    font-size: 1.35rem; /* ~22px */
    line-height: 1.3;
    color: #374151;
    font-weight: 700;
}

p {
    font-size: 1rem; /* 16px : La norme absolue pour être lisible sur mobile */
    line-height: 1.6; /* Interligne aéré pour le confort de lecture */
    color: #4b5563; /* Gris foncé, moins agressif qu'un noir pur */
}

/* =========================================
   CLASSES UTILITAIRES (Boutons et Blocs)
   ========================================= */

/* Bloc générique pour grouper des éléments ensemble si besoin */
.bloc {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px; /* Un espacement plus serré à l'intérieur d'un même groupe */
}

/* Le fameux bouton bleu lisible et propre */
.btn-blue {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    /* Format ergonomique pour le pouce */
    width: 100%;
    max-width: 280px;
    padding: 14px 24px;

    /* Esthétique */
    background-color: #379bff; /* Un beau bleu moderne */
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 600;
    border: none;
    border-radius: 200px; /* Bords bien arrondis */
    cursor: pointer;

    /* Ombre subtile tintée en bleu */
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);

    /* Animations fluides */
    transition: transform 0.2s ease, background-color 0.2s ease;
}

/* Effet tactile au clic */
.btn-blue:active {
    transform: scale(0.96); /* S'enfonce légèrement quand elle appuie */
    background-color: #1d4ed8; /* S'assombrit un peu */
}
.center{
    justify-content: center;
}

.hidden{
    display: none;
}