/* =====================================================================
   Ambassade de la RIM a Dakar - core.css
   Variables, reset, typographie, fondations
   ===================================================================== */

:root {
    /* ============ Couleurs officielles (depuis le drapeau RIM) ============ */
    --rim-green:        #00a95c;
    --rim-green-deep:   #00833c;   /* Pour le texte et les UI - meilleur contraste */
    --rim-green-darker: #006029;
    --rim-gold:         #ffd700;
    --rim-gold-warm:    #d4a017;   /* Variante chaude, plus lisible */
    --rim-red:          #d01c1f;
    --rim-red-deep:     #a01418;

    /* ============ Palette neutre - tonalite chaude ============ */
    --paper:            #faf7f0;   /* Fond principal - parchemin clair */
    --paper-soft:       #f3eee2;   /* Variante plus sombre */
    --cream:            #fbf9f3;
    --bone:             #ede7d5;

    --ink:              #1a1a1a;   /* Texte principal */
    --ink-soft:         #3a3a3a;
    --ink-muted:        #6b6557;
    --ink-light:        #948e7e;

    --rule:             #d8d1bc;   /* Lignes fines */
    --rule-soft:        #eae5d4;

    /* ============ Couleurs systeme ============ */
    --bg:               var(--paper);
    --surface:          #ffffff;
    --surface-elevated: #ffffff;
    --text:             var(--ink);
    --text-muted:       var(--ink-muted);
    --accent:           var(--rim-green-deep);
    --accent-bright:    var(--rim-green);
    --accent-gold:      var(--rim-gold-warm);
    --link:             var(--rim-green-deep);
    --link-hover:       var(--rim-green-darker);
    --danger:           var(--rim-red);

    /* ============ Typographies ============ */
    --font-display:     'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-body:        'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-display-ar:  'Amiri', 'Traditional Arabic', serif;
    --font-body-ar:     'Tajawal', 'Segoe UI', system-ui, sans-serif;

    /* ============ Echelle typographique ============ */
    --text-xs:    0.75rem;     /* 12px */
    --text-sm:    0.875rem;    /* 14px */
    --text-base:  1rem;        /* 16px */
    --text-lg:    1.125rem;    /* 18px */
    --text-xl:    1.25rem;     /* 20px */
    --text-2xl:   1.5rem;      /* 24px */
    --text-3xl:   1.875rem;    /* 30px */
    --text-4xl:   2.5rem;      /* 40px */
    --text-5xl:   3.5rem;      /* 56px */
    --text-6xl:   4.5rem;      /* 72px */

    /* ============ Espacement ============ */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.5rem;
    --space-6:  2rem;
    --space-7:  2.25rem;    /* avant 3rem - resserre inter-sections */
    --space-8:  2.75rem;    /* avant 4rem */
    --space-9:  3.75rem;    /* avant 6rem - separateurs majeurs */
    --space-10: 5rem;       /* avant 8rem */

    /* ============ Layout ============ */
    --container-max: 1240px;
    --container-pad: clamp(1.25rem, 4vw, 2.5rem);

    /* ============ Effets ============ */
    --shadow-sm:  0 1px 2px rgba(15, 25, 10, 0.04), 0 1px 3px rgba(15, 25, 10, 0.05);
    --shadow-md:  0 4px 6px -1px rgba(15, 25, 10, 0.05), 0 2px 4px -1px rgba(15, 25, 10, 0.04);
    --shadow-lg:  0 10px 25px -3px rgba(15, 25, 10, 0.08), 0 4px 12px -2px rgba(15, 25, 10, 0.04);
    --shadow-xl:  0 25px 50px -12px rgba(15, 25, 10, 0.15);

    --radius-sm:  4px;
    --radius:     6px;
    --radius-md:  10px;
    --radius-lg:  16px;
    --radius-xl:  24px;

    --transition:      180ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ============ Hauteur de bandes ============ */
    --official-bar-height: 4px;
    --header-height:       84px;
}

/* ============ Reset moderne ============ */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    line-height: 1.5;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--text);
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Texture papier tres subtile en arriere-plan */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(212, 160, 23, 0.025) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0, 131, 60, 0.025) 0%, transparent 50%);
}

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

button, input, textarea, select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: transparent;
}

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

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

/* ============ Typographie ============ */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ink);
}

h1 { font-size: clamp(2.25rem, 5vw, var(--text-6xl)); }
h2 { font-size: clamp(1.875rem, 3.5vw, var(--text-4xl)); }
h3 { font-size: var(--text-2xl); }

p { margin: 0; }
p + p { margin-top: 1em; }

::selection {
    background-color: var(--rim-green-deep);
    color: var(--paper);
}

/* ============ Application des polices arabes ============ */
.lang-ar {
    font-family: var(--font-body-ar);
    font-size: 1.05rem; /* L'arabe respire mieux un poil plus grand */
}

.lang-ar h1,
.lang-ar h2,
.lang-ar h3,
.lang-ar h4,
.lang-ar h5,
.lang-ar h6 {
    font-family: var(--font-display-ar);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.3;
}

/* ============ Conteneurs ============ */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

/* ============ Utilitaires d'accessibilite ============ */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 2px solid var(--rim-green-deep);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ============ Mouvement reduit ============ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}