/* =============================================================
   VILLAGE-COMMON.CSS — Variables, Reset, Typographie
   Base partagée par TOUTES les pages de The Village
   ✅ Ne modifie AUCUN visuel — ne fait que centraliser
   Alif Genesis Ltd — 2026
   ============================================================= */

/* --- 1. VARIABLES GLOBALES (Palette du Village) --- */
:root {
    /* Couleurs principales */
    --sable-fond: #F7EBD5;          /* Fond sable chaud (Thème B) */
    --marron-texte: #5D4037;         /* Texte principal marron terre */
    --blanc-pur: #FFFFFF;
    --blanc-lumineux: #F5F5F5;
    --bleu-nuit: #0B1C3F;           /* Bleu nuit profond */
    --bleu-profond: #050e24;         /* Dégradé footer */
    --or-solaire: #D4A649;           /* Or signature Alif Genesis */
    --sable-ancien: #E4CDA2;         /* Or clair / sable ancien */
    --indigo: #1A2F5D;

    /* Couleurs des Quartiers */
    --c-educatif: #417BF5;           /* Bleu éducatif */
    --c-medico: #27AE60;             /* Vert médico-social */
    --c-culture: #E67E22;            /* Ocre culture */
    --c-bienetre: #00897B;           /* Turquoise bien-être */
    --c-media: #6A1B9A;              /* Violet médiatique */
    --c-souk: #D4A649;               /* Or du Souk */
    --c-preceptorat: #00C853;        /* Vert préceptorat */
    --c-hijra: #0B3B24;              /* Vert hijra */

    /* Couleurs des Maisons (sous-quartier éducatif) */
    --c-savoir: #2962FF;             /* Bleu Maison Scolarité */
    --c-inter: #C62828;              /* Rouge Maison Internationale */
    --c-vacances: #EF6C00;           /* Orange Maison Vacances */
    --c-formation: #7B1FA2;          /* Violet Institut Formation */
    --c-excellence: #000000;         /* Noir Maison Excellence */

    /* Thème par défaut (Quartier Éducatif) — surchargé par chaque page */
    --theme-main: #134EC1;
    --theme-dark: #0D3380;
    --theme-light-bg: #E6EEFA;
    --theme-glow: 0 0 20px rgba(19, 78, 193, 0.4);

    /* Gradients des Maisons éducatives */
    --grad-ief: linear-gradient(110deg, #002366 20%, #D4A649 85%);
    --grad-mini: linear-gradient(110deg, #00c6ff 20%, #0072ff 85%);
    --grad-precep: linear-gradient(110deg, #009473 20%, #b2d732 85%);
    --grad-cambridge: linear-gradient(110deg, #012169 30%, #C8102E 80%);
    --grad-excell: linear-gradient(110deg, #000000 30%, #b3ecff 90%);
    --grad-formation: linear-gradient(110deg, #8E2DE2 10%, #4A00E0 90%);
}


/* --- 2. RESET & BASE --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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


/* --- 3. TYPOGRAPHIE --- */

/* Corps de texte : Merriweather (serif) */
/* ⚠️ background-color et color ne sont PAS définis ici
   car ils varient selon les pages. Chaque page les définit
   dans son propre <style> */
body {
    margin: 0;
    padding: 0;
    font-family: 'Merriweather', serif;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Wrappers d'injection layout.js
   (garantit que le footer reste collé en bas) */
#inject-footer {
    margin-top: auto;
}

/* Titres & éléments UI : Fredoka (sans-serif) */
h1, h2, h3, h4, h5 {
    font-family: 'Fredoka', sans-serif;
}

/* Paragraphes et texte courant : Merriweather */
p {
    font-family: 'Merriweather', serif;
}


/* --- 4. UTILITAIRES COMMUNS --- */

/* Animation du texte défilant (bandeau d'annonce) */
@keyframes defilement {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

/* Classe de verrouillage des tailles d'images (anti-explosion) */
.verrou-icon { width: 24px !important; height: 24px !important; object-fit: contain !important; }
.verrou-logo { height: 110px !important; width: auto !important; }
.verrou-footer-logo { height: 80px !important; width: auto !important; }


/* --- 5. ANIMATIONS AU SCROLL (IntersectionObserver) --- */
/* Utilisé avec village-perf.js — Ajouter .reveal sur les éléments */

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal-left.revealed {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal-scale.revealed {
    opacity: 1;
    transform: scale(1);
}

/* Délais d'animation en cascade (pour les grilles de cartes) */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }