:root {
    --couleur-mauve: #614051;
    --couleur-white: #F2EBE2;
    --couleur-red: #D9534F;
    --couleur-noir: #2b1b2a;

    --card-bg: rgba(255,255,255,0.4);
    --input-bg: rgba(0,0,0,0.04);
}

/* Box sizing global pour éviter débordement des inputs/boutons */
*, *::before, *::after {
    box-sizing: border-box;
}

 /* Assurer que le fond prend toute la hauteur d'écran sur mobile/desktop */
html, body {
    height: 100%;
    min-height: 100dvh; /* meilleure prise en charge des viewports dynamiques */
    margin: 0;
    background: var(--couleur-white);
    color: var(--couleur-noir);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Permettre au fond d'aller sous les zones sûres (notch / dynamic island) */
body {
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    box-sizing: border-box;
 }