/* ==========================================================================
   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 : Charte Bleu Logo "Les Maçons du Cœur" ----------
   Couleurs extraites du logo officiel :
   - Bleu foncé du cœur : #003366
   - Bleu vif du texte "Maçons / Cœur" : #0066CC
   Fonds clairs modernisés : blanc & bleu très pâle (#F2F7FC) */
:root {
    /* Variables de marque normalisées */
    --color-primary: #0066CC;           /* Bleu vif du logo */
    --color-primary-dark: #003366;      /* Bleu foncé emblématique du cœur */
    --color-primary-darker: #071E3D;    /* Bleu très sombre d'accentuation */
    --color-primary-light: #2E86DE;     /* Bleu lumineux pour hover/surbrillance */
    --color-accent: #0077E6;            /* Bleu électrique d'accentuation */
    --color-accent-light: #38BDF8;      /* Bleu ciel éclatant pour texte sur fond sombre */
    --color-accent-pale: #EBF3FC;       /* Fond teinté bleu très doux */
    --color-bg-pale: #F2F7FC;           /* Bleu très pâle (#F2F7FC) remplaçant beige/sable */
    --color-bg-card: #FFFFFF;
    --color-bg-subtle: #F6FAFE;
    --color-footer-bg: #071626;         /* Bleu nuit très foncé pour le footer */
    --color-text: #0E1E2E;              /* Bleu ardoise très sombre, contrasté et doux */
    --color-text-muted: #4B637D;        /* Texte secondaire gris-bleu */
    --color-border: #D0E1F3;            /* Bordure bleue délicate */

    /* Alias et compatibilité immédiate avec le reste du site */
    --orange-ivoire: var(--color-primary);
    --orange-fonce: var(--color-primary-dark);
    --brique: var(--color-primary);
    --terre-cuite: var(--color-primary-dark);
    --terre-brune: var(--color-primary-darker);
    --vert-ivoire: #009E60;
    --vert-fonce: #00744A;
    --or-soleil: var(--color-accent-light);  /* Texte contrasté lumineux sur fond sombre */
    --sable: var(--color-bg-pale);
    --sable-fonce: #E2ECF7;

    /* Neutres & textes */
    --blanc: #FFFFFF;
    --blanc-casse: #F8FAFD;
    --texte: var(--color-text);
    --gris-chaleureux: var(--color-text-muted);
    --brun-nuit: var(--color-footer-bg);

    /* Couleurs d'état / accents */
    --accent: var(--color-primary);
    --accent-fonce: var(--color-primary-dark);
    --accent-pale: var(--color-accent-pale);
    --or: var(--color-accent-light);

    /* Typographie */
    --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 bleutées élégantes */
    --ombre-sm: 0 4px 14px rgba(0, 51, 102, 0.07);
    --ombre: 0 10px 30px rgba(0, 51, 102, 0.09);
    --ombre-lg: 0 20px 50px rgba(0, 51, 102, 0.14);
    --ombre-accent: 0 10px 28px rgba(0, 102, 204, 0.32);

    /* 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(--color-primary-dark);
    text-decoration: none;
    transition: var(--transition);
}

a:hover { color: var(--color-primary); }

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(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

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

/* Scrollbar moderne bleue */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--color-bg-pale); }
::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-dark);
}

/* 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;
    }
}