/* =========================================================
   BASE : reset, variables CSS, typographie globale
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    -webkit-tap-highlight-color: transparent;
}

:root {
    /* Palette */
    --bg:          #FAF5EF;
    --bg-card:     #FFFFFF;
    --bg-muted:    #F2EAD9;
    --primary:     #2D5F3F;
    --primary-dark:#1F4A2D;
    --accent:      #D97757;
    --accent-dark: #B85F40;
    --text:        #2C2A26;
    --text-muted:  #6B6557;
    --border:      #E5DDC8;
    --danger:      #C0392B;
    --success:     #27AE60;

    /* Ombres */
    --shadow:    0 4px 14px rgba(45, 95, 63, 0.08);
    --shadow-lg: 0 8px 24px rgba(45, 95, 63, 0.14);

    /* Rayons */
    --radius:    16px;
    --radius-sm: 10px;

    /* Espace sûr pour iPhone (encoche en bas) */
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 18px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    /* Pas d'overflow:hidden ici : il bloquerait position:fixed sur iPhone Safari */
}

button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

/* Petites classes utilitaires */
.hidden  { display: none !important; }
.center  { text-align: center; }
.mt-12   { margin-top: 12px; }
.mt-20   { margin-top: 20px; }

/* ── Icônes SVG inline ── */
.icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}
.icon-sm  { width: 18px; height: 18px; }
.icon-md  { width: 24px; height: 24px; }
.icon-lg  { width: 32px; height: 32px; }
.icon-xl  { width: 48px; height: 48px; }
.icon-2xl { width: 64px; height: 64px; }