.app-icon {
    width: 192px;
    height: 192px;
    max-width: 100%;
    margin-bottom: 20px;
    border-radius: 32px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 600px) {
    .app-icon {
        width: 160px;
        height: 160px;
    }
}

.title {
    text-align: center;
    font-size: var(--font-size-35);
    font-weight: var(--font-weight-bold);
    color: var(--primary);
    margin-bottom: 30px;
}

.descriptionblock {
    margin-bottom: 20px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.description {
    text-align: justify;
    font-size: var(--font-size-26);
    font-weight: var(--font-weight-bold);
    color: var(--accent);
    margin-bottom: -5px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.app-store-button {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.app-store-button img {
    width: 200px;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* reset and additional styles */
@import "reset.css";
/*@import "fonts.css";*/

/* Variables définies dans :root pour permettre la réutilisation */
:root {
    --white: #fff;
    --gray: #c0c0c0;
    --aurora: #007AFF;
    --blue-dark: #0a0c15;
    --blue-night: #09111b;
    
    --font-size-base: 16px;
    --font-size-18: 1.125rem; /* 18px */
    --font-size-26: 1.375rem; /* 26px */
    --font-size-35: 2.1875rem; /* 35px */
    
    --font-weight-thin: 100;
    --font-weight-extra-light: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800;
    --font-weight-heavy: 900;

    --background: #F4F1E6;
    --accent: #C46363;
    --primary: #000000;
}

/* Layout */
.wrapper {
    max-width: 600px;
    margin: 0 auto;
}

/* Global */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: var(--background);
    font-family: "Helvetica", sans-serif;
}

/* La classe .page commence en haut */
.page {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre le titre horizontalement */
    justify-content: flex-start; /* Contenu en haut */
    min-height: 100vh;
    padding: 20px; /* Ajoute un peu d'espace autour du contenu */
    box-sizing: border-box;
}

/* Content */
.content-container {
    max-width: 800px; /* Largeur maximale du contenu */
    width: 100%; /* S'adapte à la taille de l'écran */
    text-align: left; /* Texte aligné à gauche */
}

.content__title {
    text-align: center; /* Titre centré */
    font-size: var(--font-size-35); /* 35px */
    font-weight: var(--font-weight-bold);
    color: var(--accent);
    margin-bottom: 20px; /* Espace sous le titre */
}

.content__text {
    text-align: left; /* Texte aligné à gauche */
    font-size: var(--font-size-18); /* 18px */
    font-weight: var(--font-weight-light);
    line-height: 1.4;
    color: var(--primary);
    white-space: pre-wrap; /* Respecte les retours à la ligne dans le contenu */
}