/* ==========================================================================
   LES MAÇONS DU CŒUR — base.css
   ONG ivoirienne de construction de maisons pour familles démunies
   Reset, variables CSS (identité ivoirienne), typographie
   Approche MOBILE-FIRST — breakpoints : 576px (tablette) / 992px (desktop)
   ========================================================================== */

/* ---------- Variables : couleurs inspirées du drapeau ivoirien ----------
   Orange (#FF7A00) / Blanc / Vert (#009E60), complétés par des tons
   terre cuite / brique qui évoquent la construction et l'habitat local. */
:root {
    /* Couleurs principales */
    --orange-ivoire: #FF7A00;      /* orange du drapeau */
    --orange-fonce: #D9640A;
    --brique: #B34A22;             /* terre cuite / brique de terre */
    --terre-cuite: #9C3D1B;
    --terre-brune: #6E2E14;
    --vert-ivoire: #009E60;        /* vert du drapeau */
    --vert-fonce: #00744A;
    --or-soleil: #E8A94E;          /* ocre / soleil de nos chantiers */
    --sable: #FDF3E7;              /* fonds clairs sable chaud */
    --sable-fonce: #F3E2CB;

    /* Neutres chauds */
    --blanc: #FFFFFF;
    --blanc-casse: #FDFAF5;
    --texte: #33261B;              /* brun très foncé, plus doux qu'un noir pur */
    --gris-chaleureux: #6B5D4F;
    --brun-nuit: #241811;          /* footer / fonds sombres */

    /* Couleurs d'état / accents historiques (compatibilité) */
    --accent: var(--orange-ivoire);
    --accent-fonce: var(--terre-cuite);
    --accent-pale: #FFE8D1;
    --or: var(--or-soleil);

    /* Typographie — chaleureuse et lisible */
    --font-corps: 'Poppins', 'Segoe UI', sans-serif;
    --font-titres: 'Playfair Display', Georgia, serif;

    /* Espacements */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;
    --space-7: 4.5rem;
    --space-8: 6rem;

    /* Rayons */
    --radius-sm: 10px;
    --radius: 18px;
    --radius-lg: 24px;
    --radius-pill: 999px;

    /* Ombres chaudes */
    --ombre-sm: 0 4px 14px rgba(51, 38, 27, 0.08);
    --ombre: 0 10px 34px rgba(51, 38, 27, 0.10);
    --ombre-lg: 0 24px 60px rgba(51, 38, 27, 0.16);
    --ombre-accent: 0 10px 30px rgba(255, 122, 0, 0.35);

    /* Transitions */
    --transition: all 0.3s ease;

    /* Zone de clic minimale (mobile) */
    --tap-min: 48px;
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-corps);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--texte);
    background: var(--blanc);
    overflow-x: hidden;
}

/* ---------- Typographie ---------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-titres);
    line-height: 1.2;
    color: var(--texte);
    font-weight: 800;
}

h1 { font-size: clamp(2.1rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.7rem, 4.5vw, 3rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
h4 { font-size: clamp(1.05rem, 2.4vw, 1.3rem); }

p {
    margin-bottom: var(--space-3);
    color: var(--gris-chaleureux);
}

strong { color: var(--texte); }

a {
    color: var(--terre-cuite);
    text-decoration: none;
    transition: var(--transition);
}

a:hover { color: var(--orange-ivoire); }

ul { list-style: none; }

img, video, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

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

/* Accessibilité : focus visible et zones de tap confortables */
a, button, input, select, textarea, summary {
    outline: none;
}

:focus-visible {
    outline: 3px solid var(--orange-ivoire);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection {
    background: var(--orange-ivoire);
    color: var(--blanc);
}

/* Scrollbar chaude */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--sable); }
::-webkit-scrollbar-thumb {
    background: var(--brique);
    border-radius: 5px;
}

/* Images : toujours bien cadrées, quel que soit l'écran */
img {
    object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}