LA MÉMOIRE DE L'AFRIQUE

Découvrez l'Afrique autrement.

Explorez des livres, archives, personnages, événements et patrimoines africains dans une expérience numérique immersive.

Explorer la bibliothèque Explorer en 3D

54+ Pays

1000+ Documents

100+ Personnages

7 Collections UNESCO

COLLECTIONS AFRIYA

Bibliothèque

Explorez les ressources historiques et culturelles disponibles.

📚

Livres historiques

Découvrez des documents consacrés à l'histoire africaine.

🌍

GÉOGRAPHIE

Les pays d'Afrique

Explorez les pays, cultures et événements historiques.

👑

PERSONNAGES

Figures historiques

Découvrez les grandes figures de l'histoire africaine.

🗿

PATRIMOINE

Patrimoine africain

Découvrez monuments, œuvres et traditions.

360°

VISIONNEUSE IMMERSIVE

AFRIYA IMMERSIVE

Explorez le patrimoine en 3D.

Une interface conçue pour accueillir des modèles 3D, des visites 360°, des expériences interactives et des contenus haute résolution.

AFRIYA COMMUNITY

Événements & concours

🏆

Concours Afriya

Participez aux concours organisés par Afriya.

🎉

Événements

Retrouvez les événements culturels et éducatifs.

🏅

Récompenses

Gagnez des badges et distinctions.

:root { --afriya-gold: #d4af37; --afriya-gold-light: #ffe08a; --afriya-green: #0f5132; --afriya-red: #9d3b32; --afriya-black: #050403; --afriya-background: #090705; --afriya-surface: #15100c; --afriya-surface-light: #21170f; --afriya-text: #f7ead7; --afriya-muted: #b9aa95; --afriya-radius-small: 10px; --afriya-radius: 20px; --afriya-radius-large: 32px; --afriya-shadow: 0 25px 70px rgba(0,0,0,.45); --afriya-transition: 300ms cubic-bezier(.2,.8,.2,1); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { min-height: 100vh; font-family: Inter, "Segoe UI", Arial, sans-serif; background: radial-gradient( circle at 80% 10%, rgba(212,175,55,.08), transparent 30% ), var(--afriya-background); color: var(--afriya-text); overflow-x: hidden; } button, input { font: inherit; } button { cursor: pointer; } a { color: inherit; } ::selection { background: var(--afriya-gold); color: #090705; }body.theme-light { --afriya-background: #f4eee4; --afriya-surface: #fffaf2; --afriya-surface-light: #eee4d3; --afriya-text: #21170f; --afriya-muted: #65594d; } body.theme-green { --afriya-gold: #e4c45c; --afriya-green: #0d6b42; --afriya-background: #06130d; --afriya-surface: #0b2116; } body.theme-royal { --afriya-gold: #ffd700; --afriya-background: #07030d; --afriya-surface: #130b1c; --afriya-green: #49326b; } /* Personnalisation utilisateur. Les valeurs peuvent être remplacées par le système "Mon Afriya". */ [data-afriya-theme] { --afriya-transition: 300ms cubic-bezier(.2,.8,.2,1); }.afriya-header { position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 17px 5vw; background: rgba(7,5,4,.72); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(212,175,55,.15); } .afriya-logo { display: flex; align-items: center; gap: 9px; color: var(--afriya-gold-light); text-decoration: none; font-weight: 900; letter-spacing: 4px; } .logo-symbol { color: var(--afriya-gold); text-shadow: 0 0 20px rgba(212,175,55,.6); } .afriya-nav { display: flex; align-items: center; gap: 25px; } .afriya-nav a { position: relative; color: var(--afriya-muted); text-decoration: none; font-size: 14px; transition: color var(--afriya-transition); } .afriya-nav a:hover { color: var(--afriya-gold-light); } .header-actions { display: flex; gap: 10px; } .icon-button, .user-button { border: 1px solid rgba(212,175,55,.25); border-radius: var(--afriya-radius-small); background: rgba(255,255,255,.04); color: var(--afriya-gold-light); padding: 10px 14px; } .user-button { background: linear-gradient( 135deg, rgba(212,175,55,.25), rgba(212,175,55,.06) ); }.library-section { padding: 100px 7vw; } .section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 35px; } .eyebrow { color: var(--afriya-gold); font-size: 11px; font-weight: 800; letter-spacing: 3px; } .section-heading h2 { margin-top: 8px; font-size: clamp(38px,5vw,64px); } .section-heading p { margin-top: 10px; color: var(--afriya-muted); } .library-search { display: flex; border: 1px solid rgba(212,175,55,.2); border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.035); } .library-search input { width: 280px; border: 0; outline: 0; background: transparent; color: var(--afriya-text); padding: 14px; } .library-search button { border: 0; background: var(--afriya-gold); color: #120c05; padding: 0 17px; } .library-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 25px; } .filter { padding: 9px 15px; border: 1px solid rgba(212,175,55,.2); border-radius: 999px; background: rgba(255,255,255,.03); color: var(--afriya-muted); } .filter.active, .filter:hover { background: var(--afriya-gold); color: #120c05; } .library-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; } .library-card { overflow: hidden; border: 1px solid rgba(212,175,55,.14); border-radius: var(--afriya-radius); background: linear-gradient( 145deg, rgba(255,255,255,.065), rgba(255,255,255,.018) ); box-shadow: var(--afriya-shadow); transition: transform var(--afriya-transition), border-color var(--afriya-transition); } .library-card:hover { transform: translateY(-9px); border-color: rgba(212,175,55,.45); } .library-image { height: 210px; display: grid; place-items: center; font-size: 65px; background: radial-gradient( circle, rgba(212,175,55,.25), transparent 40% ), linear-gradient( 135deg, #2b190e, #080605 ); } .library-content { padding: 20px; } .library-content span { color: var(--afriya-gold); font-size: 10px; letter-spacing: 2px; } .library-content h3 { margin: 8px 0; font-size: 21px; } .library-content p { min-height: 55px; color: var(--afriya-muted); line-height: 1.6; font-size: 14px; } .library-content button { margin-top: 15px; border: 1px solid rgba(212,175,55,.3); border-radius: 9px; padding: 9px 14px; background: rgba(212,175,55,.08); color: var(--afriya-gold-light); }.events-section { padding: 100px 7vw; background: linear-gradient( 180deg, transparent, rgba(212,175,55,.025) ); } .events-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; } .event-card { padding: 28px; border: 1px solid rgba(212,175,55,.15); border-radius: var(--afriya-radius); background: linear-gradient( 145deg, rgba(255,255,255,.06), rgba(255,255,255,.015) ); transition: transform var(--afriya-transition); } .event-card:hover { transform: translateY(-8px); } .event-card > div { font-size: 40px; margin-bottom: 18px; } .event-card h3 { font-size: 25px; margin-bottom: 10px; color: var(--afriya-gold-light); } .event-card p { color: var(--afriya-muted); line-height: 1.7; margin-bottom: 20px; } .event-card button { border: 1px solid rgba(212,175,55,.3); border-radius: 9px; padding: 9px 15px; background: rgba(212,175,55,.07); color: var(--afriya-gold); }@media (max-width: 1100px) { .library-grid { grid-template-columns: repeat(2,1fr); } .afriya-nav { gap: 14px; } } @media (max-width: 800px) { .afriya-nav { display: none; } .section-heading { display: block; } .library-search { margin-top: 20px; } .events-grid { grid-template-columns: 1fr; } } @media (max-width: 550px) { .afriya-header { padding: 14px 20px; } .profile { display: none; } .library-grid { grid-template-columns: 1fr; } .library-section, .events-section { padding: 70px 20px; } .section-heading h2 { font-size: 38px; } .library-search input { width: 100%; } }"use strict"; document.addEventListener("DOMContentLoaded", () => { const themeButton = document.getElementById("themeButton"); const customizeButton = document.getElementById("customizeButton"); const search = document.getElementById("librarySearch"); const cards = document.querySelectorAll(".library-card"); const filters = document.querySelectorAll(".filter"); /* * THÈME */ themeButton?.addEventListener("click", () => { document.body.classList.toggle( "theme-light" ); localStorage.setItem( "afriya-theme", document.body.classList.contains("theme-light") ? "light" : "dark" ); }); /* * RESTAURATION DU THÈME */ const savedTheme = localStorage.getItem("afriya-theme"); if (savedTheme === "light") { document.body.classList.add("theme-light"); } /* * RECHERCHE BIBLIOTHÈQUE */ search?.addEventListener("input", event => { const query = event.target.value .trim() .toLowerCase(); cards.forEach(card => { const content = card.textContent.toLowerCase(); card.style.display = !query || content.includes(query) ? "" : "none"; }); }); /* * FILTRES */ filters.forEach(filter => { filter.addEventListener("click", () => { filters.forEach(item => item.classList.remove("active") ); filter.classList.add("active"); const category = filter.dataset.filter; cards.forEach(card => { card.style.display = category === "all" || card.dataset.category === category ? "" : "none"; }); }); }); /* * MON AFRIYA */ customizeButton?.addEventListener( "click", () => { alert( "Le panneau « Mon Afriya » sera ajouté dans le module de personnalisation." ); } ); });/* ========================================================= AFRIYA — MON AFRIYA Personnalisation visuelle utilisateur ========================================================= */ .afriya-customizer-overlay { position: fixed; inset: 0; z-index: 5000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, .68); backdrop-filter: blur(12px); } .afriya-customizer-overlay.open { display: flex; } .afriya-customizer { width: min(760px, 100%); max-height: 90vh; overflow-y: auto; padding: 28px; border: 1px solid rgba(212, 175, 55, .25); border-radius: 28px; background: linear-gradient( 145deg, rgba(35, 24, 15, .98), rgba(9, 6, 4, .98) ); box-shadow: 0 35px 120px rgba(0, 0, 0, .65), 0 0 70px rgba(212, 175, 55, .08); animation: afriyaPanelIn .35s ease; } @keyframes afriyaPanelIn { from { opacity: 0; transform: translateY(25px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .customizer-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 25px; } .customizer-header h2 { color: var(--afriya-gold-light); } .customizer-close { width: 42px; height: 42px; border: 1px solid rgba(212, 175, 55, .25); border-radius: 50%; background: rgba(255, 255, 255, .04); color: white; font-size: 20px; cursor: pointer; } .customizer-section { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .07); } .customizer-section h3 { margin-bottom: 15px; color: var(--afriya-gold); } .customizer-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .customizer-option { padding: 14px; border: 1px solid rgba(212, 175, 55, .14); border-radius: 14px; background: rgba(255, 255, 255, .035); color: var(--afriya-text); cursor: pointer; transition: transform .25s ease, border-color .25s ease, background .25s ease; } .customizer-option:hover { transform: translateY(-3px); border-color: rgba(212, 175, 55, .5); } .customizer-option.selected { border-color: var(--afriya-gold); background: rgba(212, 175, 55, .12); box-shadow: 0 0 25px rgba(212, 175, 55, .08); } .color-options { display: flex; flex-wrap: wrap; gap: 12px; } .color-option { width: 44px; height: 44px; border: 3px solid transparent; border-radius: 50%; cursor: pointer; } .color-option.selected { border-color: white; box-shadow: 0 0 0 2px var(--afriya-gold); } .color-gold { background: #d4af37; } .color-green { background: #0f7b4f; } .color-red { background: #a33d35; } .color-blue { background: #285b9b; } .color-purple { background: #7651b8; } .color-orange { background: #c96d2d; } .range-control { width: 100%; accent-color: var(--afriya-gold); } .customizer-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; } .customizer-button { padding: 12px 18px; border-radius: 11px; border: 1px solid rgba(212, 175, 55, .25); background: rgba(255, 255, 255, .04); color: var(--afriya-text); cursor: pointer; } .customizer-button.primary { background: linear-gradient( 135deg, #e6c45b, #a87519 ); color: #110b05; }

"use strict"; document.addEventListener("DOMContentLoaded", () => { const root = document.documentElement; const customizeButton = document.getElementById("customizeButton"); const overlay = document.getElementById( "afriyaCustomizerOverlay" ); const closeButton = document.getElementById( "customizerClose" ); const saveButton = document.getElementById( "saveCustomizer" ); const resetButton = document.getElementById( "resetCustomizer" ); const animationRange = document.getElementById( "animationRange" ); const radiusRange = document.getElementById( "radiusRange" ); /* * OUVRIR */ function openCustomizer() { overlay.classList.add("open"); overlay.setAttribute( "aria-hidden", "false" ); } /* * FERMER */ function closeCustomizer() { overlay.classList.remove("open"); overlay.setAttribute( "aria-hidden", "true" ); } customizeButton?.addEventListener( "click", openCustomizer ); closeButton?.addEventListener( "click", closeCustomizer ); overlay?.addEventListener( "click", event => { if (event.target === overlay) { closeCustomizer(); } } ); /* * COULEURS */ document .querySelectorAll(".color-option") .forEach(option => { option.addEventListener( "click", () => { const color = option.dataset.color; root.style.setProperty( "--afriya-gold", color ); root.style.setProperty( "--afriya-gold-light", color ); document .querySelectorAll( ".color-option" ) .forEach(item => item.classList.remove( "selected" ) ); option.classList.add( "selected" ); } ); }); /* * THÈMES */ document .querySelectorAll( "[data-theme]" ) .forEach(option => { option.addEventListener( "click", () => { document.body.classList.remove( "theme-light", "theme-green", "theme-royal" ); const theme = option.dataset.theme; if (theme !== "dark") { document.body.classList.add( `theme-${theme}` ); } document .querySelectorAll( "[data-theme]" ) .forEach(item => item.classList.remove( "selected" ) ); option.classList.add( "selected" ); } ); }); /* * ANIMATIONS */ animationRange?.addEventListener( "input", event => { const value = Number(event.target.value); const duration = 600 - (value * 5); root.style.setProperty( "--afriya-motion-duration", `${Math.max(100, duration)}ms` ); } ); /* * ARRONDIS */ radiusRange?.addEventListener( "input", event => { const value = Number(event.target.value); root.style.setProperty( "--afriya-radius", `${value}px` ); root.style.setProperty( "--afriya-radius-large", `${value + 12}px` ); } ); /* * SAUVEGARDE */ saveButton?.addEventListener( "click", () => { const preferences = { color: getComputedStyle(root) .getPropertyValue( "--afriya-gold" ) .trim(), theme: document.body.className, animation: animationRange?.value ?? 70, radius: radiusRange?.value ?? 20 }; localStorage.setItem( "afriya-user-theme", JSON.stringify(preferences) ); closeCustomizer(); } ); /* * RÉINITIALISATION */ resetButton?.addEventListener( "click", () => { root.style.setProperty( "--afriya-gold", "#d4af37" ); root.style.setProperty( "--afriya-gold-light", "#ffe08a" ); root.style.setProperty( "--afriya-radius", "20px" ); root.style.setProperty( "--afriya-radius-large", "32px" ); document.body.className = ""; if (animationRange) { animationRange.value = 70; } if (radiusRange) { radiusRange.value = 20; } localStorage.removeItem( "afriya-user-theme" ); } ); /* * CHARGEMENT DES PRÉFÉRENCES */ const saved = localStorage.getItem( "afriya-user-theme" ); if (saved) { try { const preferences = JSON.parse(saved); if (preferences.color) { root.style.setProperty( "--afriya-gold", preferences.color ); root.style.setProperty( "--afriya-gold-light", preferences.color ); } if (preferences.animation) { animationRange.value = preferences.animation; } if (preferences.radius) { radiusRange.value = preferences.radius; root.style.setProperty( "--afriya-radius", `${preferences.radius}px` ); } } catch (error) { console.warn( "Préférences Afriya invalides." ); } } });/* ========================================================= AFRIYA — BIBLIOTHÈQUE AVANCÉE ========================================================= */ .library-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; } .library-tools { display: flex; flex-wrap: wrap; gap: 10px; } .library-select, .library-search-large { border: 1px solid rgba(212,175,55,.2); border-radius: 12px; background: rgba(255,255,255,.035); color: var(--afriya-text); padding: 12px 15px; outline: none; } .library-search-large { min-width: min(420px, 100%); } .library-select option { background: #110b07; color: white; } /* Cartes avancées */ .advanced-library-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .advanced-book { position: relative; overflow: hidden; border: 1px solid rgba(212,175,55,.14); border-radius: var(--afriya-radius); background: linear-gradient( 145deg, rgba(255,255,255,.065), rgba(255,255,255,.015) ); box-shadow: 0 20px 60px rgba(0,0,0,.28); transition: transform .3s ease, border-color .3s ease; } .advanced-book:hover { transform: translateY(-8px); border-color: rgba(212,175,55,.45); } .book-cover { height: 250px; display: grid; place-items: center; position: relative; background: radial-gradient( circle at 50% 30%, rgba(212,175,55,.3), transparent 35% ), linear-gradient( 135deg, #34200f, #080604 ); } .book-cover-icon { font-size: 70px; filter: drop-shadow( 0 15px 25px rgba(0,0,0,.5) ); } .book-type { position: absolute; top: 14px; left: 14px; padding: 6px 9px; border-radius: 999px; background: rgba(0,0,0,.45); color: var(--afriya-gold-light); font-size: 9px; letter-spacing: 1.5px; } .favorite-button { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; background: rgba(0,0,0,.4); color: white; cursor: pointer; transition: .25s ease; } .favorite-button.active, .favorite-button:hover { color: #ffcf55; border-color: rgba(212,175,55,.5); } .book-information { padding: 20px; } .book-information h3 { margin-bottom: 8px; font-size: 19px; } .book-information p { min-height: 45px; color: var(--afriya-muted); font-size: 13px; line-height: 1.6; } .book-meta { display: flex; justify-content: space-between; margin-top: 14px; color: #938675; font-size: 11px; } .book-actions { display: flex; gap: 8px; margin-top: 16px; } .book-action { flex: 1; padding: 10px; border: 1px solid rgba(212,175,55,.22); border-radius: 9px; background: rgba(212,175,55,.06); color: var(--afriya-gold-light); cursor: pointer; } .book-action.primary { background: linear-gradient( 135deg, #dfbc50, #9d6d17 ); color: #120c05; } /* État vide */ .library-empty { display: none; padding: 70px 20px; text-align: center; border: 1px dashed rgba(212,175,55,.2); border-radius: 22px; color: var(--afriya-muted); } .library-empty.visible { display: block; } /* Fenêtre de lecture */ .reader-overlay { position: fixed; inset: 0; z-index: 6000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.78); backdrop-filter: blur(16px); } .reader-overlay.open { display: flex; } .reader-window { width: min(1000px, 100%); max-height: 90vh; overflow: auto; padding: 35px; border: 1px solid rgba(212,175,55,.22); border-radius: 28px; background: linear-gradient( 145deg, #18100a, #080604 ); box-shadow: 0 40px 130px rgba(0,0,0,.7); } .reader-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 30px; } .reader-close { width: 42px; height: 42px; border: 1px solid rgba(212,175,55,.2); border-radius: 50%; background: rgba(255,255,255,.04); color: white; cursor: pointer; } .reader-content { max-width: 760px; margin: auto; color: #dfd3c3; line-height: 1.9; } .reader-content h2 { margin-bottom: 20px; color: var(--afriya-gold-light); font-size: 34px; } .reader-page { padding: 25px; border-radius: 18px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); } /* Responsive */ @media (max-width: 1150px) { .advanced-library-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 850px) { .advanced-library-grid { grid-template-columns: repeat(2, 1fr); } .library-toolbar { align-items: stretch; } } @media (max-width: 550px) { .advanced-library-grid { grid-template-columns: 1fr; } .library-search-large { width: 100%; min-width: 0; } .reader-window { padding: 22px; } }

ARCHIVES AFRIYA

Explorer les collections

Recherchez et découvrez les ressources disponibles dans la bibliothèque.

HISTOIRE 📖

Histoire des royaumes africains

Une introduction aux grands royaumes et civilisations du continent.

Document 2026

CULTURE 🪘

Cultures et traditions

Découvrez la diversité des cultures et traditions africaines.

Collection 2026

PERSONNAGES 👑

Grandes figures africaines

Une collection consacrée aux grandes personnalités de l'histoire.

Biographie 2026

PATRIMOINE 🗿

Patrimoine africain

Monuments, œuvres et éléments du patrimoine culturel.

Patrimoine 2026

Aucun résultat

Essaie une autre recherche ou une autre catégorie.

LECTEUR AFRIYA

Document

Document Afriya

Bienvenue dans le lecteur numérique Afriya. Cette interface pourra accueillir le contenu documentaire réel provenant de la bibliothèque.

Le système pourra ensuite gérer les pages, recherches dans le document, signets, favoris et autres fonctions de lecture.

/* ========================================================= BIBLIOTHÈQUE AVANCÉE ========================================================= */ const advancedSearch = document.getElementById( "advancedLibrarySearch" ); const categorySelect = document.getElementById( "libraryCategory" ); const sortSelect = document.getElementById( "librarySort" ); const advancedGrid = document.getElementById( "advancedLibraryGrid" ); const emptyLibrary = document.getElementById( "libraryEmpty" ); function updateAdvancedLibrary() { if (!advancedGrid) return; const books = [ ...advancedGrid.querySelectorAll( ".advanced-book" ) ]; const query = advancedSearch?.value .trim() .toLowerCase() || ""; const category = categorySelect?.value || "all"; let visibleBooks = books.filter(book => { const title = book.dataset.title .toLowerCase(); const bookCategory = book.dataset.category; const matchesSearch = !query || title.includes(query); const matchesCategory = category === "all" || bookCategory === category; return ( matchesSearch && matchesCategory ); }); books.forEach(book => { book.style.display = visibleBooks.includes(book) ? "" : "none"; }); if (emptyLibrary) { emptyLibrary.classList.toggle( "visible", visibleBooks.length === 0 ); } /* * TRI */ const sort = sortSelect?.value || "default"; if (sort === "title") { visibleBooks.sort( (a, b) => a.dataset.title.localeCompare( b.dataset.title ) ); } else if (sort === "new") { visibleBooks.reverse(); } visibleBooks.forEach(book => { advancedGrid.appendChild(book); }); } advancedSearch?.addEventListener( "input", updateAdvancedLibrary ); categorySelect?.addEventListener( "change", updateAdvancedLibrary ); sortSelect?.addEventListener( "change", updateAdvancedLibrary ); /* ========================================================= FAVORIS ========================================================= */ document .querySelectorAll(".favorite-button") .forEach(button => { button.addEventListener( "click", () => { button.classList.toggle( "active" ); button.textContent = button.classList.contains("active") ? "♥" : "♡"; } ); }); /* ========================================================= LECTEUR ========================================================= */ const readerOverlay = document.getElementById( "readerOverlay" ); const readerClose = document.getElementById( "readerClose" ); const readerTitle = document.getElementById( "readerTitle" ); const readerDocumentTitle = document.getElementById( "readerDocumentTitle" ); function openReader(title) { if (!readerOverlay) return; readerTitle.textContent = title; readerDocumentTitle.textContent = title; readerOverlay.classList.add( "open" ); readerOverlay.setAttribute( "aria-hidden", "false" ); } function closeReader() { readerOverlay?.classList.remove( "open" ); readerOverlay?.setAttribute( "aria-hidden", "true" ); } document .querySelectorAll(".read-book") .forEach(button => { button.addEventListener( "click", () => { openReader( button.dataset.title ); } ); }); readerClose?.addEventListener( "click", closeReader ); readerOverlay?.addEventListener( "click", event => { if (event.target === readerOverlay) { closeReader(); } } ); /* Échap pour fermer */ document.addEventListener( "keydown", event => { if (event.key === "Escape") { closeReader(); } } );/* ========================================================= AFRIYA — CARTE HISTORIQUE ========================================================= */ .historical-map-section { position: relative; min-height: 760px; padding: 100px 7vw; background: radial-gradient( circle at 50% 40%, rgba(15,81,50,.18), transparent 42% ), #060806; } .map-layout { display: grid; grid-template-columns: 280px 1fr 330px; gap: 18px; min-height: 600px; } /* Panneaux */ .map-panel { padding: 22px; border: 1px solid rgba(212,175,55,.15); border-radius: 22px; background: linear-gradient( 145deg, rgba(255,255,255,.065), rgba(255,255,255,.018) ); backdrop-filter: blur(18px); box-shadow: 0 25px 70px rgba(0,0,0,.35); } .map-panel h3 { margin-bottom: 18px; color: var(--afriya-gold-light); } /* Périodes */ .period-list { display: grid; gap: 9px; } .period-button { width: 100%; padding: 12px 14px; text-align: left; border: 1px solid rgba(212,175,55,.12); border-radius: 10px; background: rgba(255,255,255,.025); color: var(--afriya-muted); cursor: pointer; transition: .25s ease; } .period-button:hover, .period-button.active { border-color: var(--afriya-gold); background: rgba(212,175,55,.11); color: var(--afriya-gold-light); } /* Zone carte */ .map-stage { position: relative; overflow: hidden; min-height: 600px; border: 1px solid rgba(212,175,55,.2); border-radius: 28px; background: radial-gradient( circle at 50% 50%, rgba(15,81,50,.25), transparent 45% ), linear-gradient( 135deg, #0b1610, #050806 ); box-shadow: inset 0 0 100px rgba(0,0,0,.45), 0 30px 90px rgba(0,0,0,.4); } /* Illustration temporaire. Le vrai fond cartographique sera branché au moteur de carte dans une partie suivante. */ .map-continent { position: absolute; width: 48%; height: 70%; left: 26%; top: 15%; border-radius: 45% 35% 48% 42%; background: linear-gradient( 145deg, #b58a43, #5c431e ); opacity: .85; transform: rotate(-8deg); clip-path: polygon( 45% 0, 65% 7%, 74% 18%, 83% 32%, 78% 48%, 84% 65%, 68% 80%, 63% 100%, 48% 86%, 34% 77%, 25% 63%, 16% 48%, 22% 34%, 32% 21%, 30% 8% ); box-shadow: 0 0 80px rgba(212,175,55,.12); } /* Grille */ .map-grid { position: absolute; inset: 0; background: linear-gradient( rgba(212,175,55,.05) 1px, transparent 1px ), linear-gradient( 90deg, rgba(212,175,55,.05) 1px, transparent 1px ); background-size: 45px 45px; pointer-events: none; } /* Points historiques */ .map-marker { position: absolute; width: 17px; height: 17px; border-radius: 50%; border: 2px solid #fff1b0; background: var(--afriya-gold); box-shadow: 0 0 0 7px rgba(212,175,55,.1), 0 0 30px rgba(212,175,55,.55); cursor: pointer; z-index: 5; transition: transform .25s ease; } .map-marker:hover { transform: scale(1.35); } .marker-one { left: 43%; top: 29%; } .marker-two { left: 58%; top: 42%; } .marker-three { left: 39%; top: 55%; } .marker-four { left: 61%; top: 65%; } /* Contrôles */ .map-controls { position: absolute; right: 18px; bottom: 18px; display: grid; gap: 7px; } .map-control { width: 42px; height: 42px; border: 1px solid rgba(212,175,55,.22); border-radius: 11px; background: rgba(4,6,5,.8); color: var(--afriya-gold-light); cursor: pointer; } /* Recherche */ .map-search { display: flex; gap: 7px; margin-bottom: 20px; } .map-search input { min-width: 0; flex: 1; padding: 11px; border: 1px solid rgba(212,175,55,.18); border-radius: 10px; outline: none; background: rgba(255,255,255,.035); color: white; } .map-search button { border: 0; border-radius: 10px; padding: 0 13px; background: var(--afriya-gold); color: #120c05; } /* Informations */ .map-info { min-height: 220px; } .map-info-placeholder { color: var(--afriya-muted); line-height: 1.7; } .map-info-content { display: none; } .map-info-content.visible { display: block; } .map-info-content h4 { margin-bottom: 10px; color: var(--afriya-gold-light); font-size: 22px; } .map-info-content p { color: var(--afriya-muted); line-height: 1.7; } .map-period { display: inline-block; margin-bottom: 12px; padding: 5px 9px; border-radius: 999px; background: rgba(212,175,55,.1); color: var(--afriya-gold); font-size: 10px; letter-spacing: 1.5px; } /* Responsive */ @media (max-width: 1150px) { .map-layout { grid-template-columns: 230px 1fr; } .map-information-panel { grid-column: 1 / -1; } } @media (max-width: 750px) { .historical-map-section { padding: 70px 20px; } .map-layout { grid-template-columns: 1fr; } .map-stage { min-height: 500px; } }

AFRIYA HISTORICAL MAP

Carte historique interactive

Explorez les différentes périodes de l'histoire africaine.

/* ========================================================= CARTE HISTORIQUE ========================================================= */ const mapStage = document.querySelector(".map-stage"); const mapContinent = document.querySelector(".map-continent"); const mapMarkers = document.querySelectorAll(".map-marker"); const mapInfoPlaceholder = document.getElementById( "mapInfoPlaceholder" ); const mapInfoContent = document.getElementById( "mapInfoContent" ); const mapInfoTitle = document.getElementById( "mapInfoTitle" ); const mapInfoPeriod = document.getElementById( "mapInfoPeriod" ); const mapInfoDescription = document.getElementById( "mapInfoDescription" ); let mapScale = 1; /* * MARQUEURS */ mapMarkers.forEach(marker => { marker.addEventListener( "click", () => { const title = marker.dataset.title; const period = marker.dataset.period; const description = marker.dataset.description; mapInfoTitle.textContent = title; mapInfoPeriod.textContent = period; mapInfoDescription.textContent = description; mapInfoPlaceholder.style.display = "none"; mapInfoContent.classList.add( "visible" ); mapMarkers.forEach(item => { item.style.transform = ""; }); marker.style.transform = "scale(1.5)"; } ); }); /* * PÉRIODES */ document .querySelectorAll(".period-button") .forEach(button => { button.addEventListener( "click", () => { document .querySelectorAll( ".period-button" ) .forEach(item => { item.classList.remove( "active" ); }); button.classList.add( "active" ); /* * Ici, le véritable moteur * cartographique pourra ensuite * charger la période sélectionnée. */ const period = button.dataset.period; console.log( "Période sélectionnée:", period ); } ); }); /* * ZOOM */ function updateMapZoom() { if (!mapContinent) return; mapContinent.style.transform = `rotate(-8deg) scale(${mapScale})`; } document .getElementById("mapZoomIn") ?.addEventListener( "click", () => { mapScale = Math.min( mapScale + .15, 2.5 ); updateMapZoom(); } ); document .getElementById("mapZoomOut") ?.addEventListener( "click", () => { mapScale = Math.max( mapScale - .15, .7 ); updateMapZoom(); } ); document .getElementById("mapReset") ?.addEventListener( "click", () => { mapScale = 1; updateMapZoom(); mapMarkers.forEach(marker => { marker.style.transform = ""; }); mapInfoContent.classList.remove( "visible" ); mapInfoPlaceholder.style.display = "block"; } );/* ========================================================= AFRIYA — BIBLIOTHÈQUE 3D / 360° ========================================================= */ .library-3d-section { position: relative; min-height: 900px; padding: 110px 7vw; overflow: hidden; background: radial-gradient( circle at 50% 20%, rgba(212,175,55,.12), transparent 35% ), radial-gradient( circle at 10% 80%, rgba(15,81,50,.15), transparent 35% ), #050605; } /* ========================================================= HEADER ========================================================= */ .library-3d-header { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 35px; } .library-3d-header h2 { margin-top: 8px; font-size: clamp( 32px, 5vw, 64px ); background: linear-gradient( 120deg, #fff1ad, var(--afriya-gold), #8f641c ); -webkit-background-clip: text; background-clip: text; color: transparent; } .library-3d-header p { max-width: 650px; margin-top: 12px; color: var(--afriya-muted); line-height: 1.8; } /* ========================================================= MUSÉE ========================================================= */ .museum-interface { display: grid; grid-template-columns: 250px minmax(0, 1fr) 310px; gap: 18px; min-height: 650px; } /* ========================================================= PANNEAU DES SALLES ========================================================= */ .museum-sidebar { padding: 22px; border: 1px solid rgba(212,175,55,.14); border-radius: 24px; background: rgba(255,255,255,.035); backdrop-filter: blur(16px); } .museum-sidebar h3 { margin-bottom: 18px; color: var(--afriya-gold-light); } .room-list { display: grid; gap: 9px; } .room-button { width: 100%; padding: 13px; text-align: left; border: 1px solid rgba(212,175,55,.1); border-radius: 11px; background: rgba(255,255,255,.025); color: var(--afriya-muted); cursor: pointer; transition: transform .25s ease, border-color .25s ease, background .25s ease; } .room-button:hover { transform: translateX(4px); border-color: rgba(212,175,55,.35); } .room-button.active { background: rgba(212,175,55,.1); border-color: var(--afriya-gold); color: var(--afriya-gold-light); } /* ========================================================= VISIONNEUSE ========================================================= */ .viewer-3d { position: relative; min-height: 650px; overflow: hidden; border: 1px solid rgba(212,175,55,.2); border-radius: 30px; background: radial-gradient( circle at 50% 48%, rgba(212,175,55,.13), transparent 27% ), linear-gradient( 145deg, #111711, #040504 ); box-shadow: inset 0 0 120px rgba(0,0,0,.6), 0 35px 100px rgba(0,0,0,.4); } /* plafond */ .viewer-3d::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 120deg, transparent 45%, rgba(212,175,55,.05), transparent 55% ); pointer-events: none; } /* sol */ .viewer-floor { position: absolute; left: 10%; right: 10%; bottom: 8%; height: 18%; transform: perspective(500px) rotateX(62deg); border: 1px solid rgba(212,175,55,.1); background: repeating-linear-gradient( 90deg, rgba(212,175,55,.04) 0, rgba(212,175,55,.04) 1px, transparent 1px, transparent 50px ); opacity: .7; } /* objet */ .artifact-3d { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); width: 190px; height: 260px; display: grid; place-items: center; transition: transform .5s ease; } .artifact-shape { position: relative; width: 110px; height: 210px; border-radius: 48% 48% 20% 20%; background: linear-gradient( 90deg, #503813, #d0a84b, #6c4b18 ); box-shadow: 20px 20px 50px rgba(0,0,0,.5), inset -12px 0 20px rgba(0,0,0,.2), 0 0 50px rgba(212,175,55,.12); animation: artifactFloat 4s ease-in-out infinite; } @keyframes artifactFloat { 0%, 100% { transform: translateY(0) rotateY(-8deg); } 50% { transform: translateY(-12px) rotateY(8deg); } } /* ========================================================= CONTRÔLES 3D ========================================================= */ .viewer-controls { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; gap: 8px; padding: 8px; border: 1px solid rgba(212,175,55,.15); border-radius: 15px; background: rgba(0,0,0,.55); backdrop-filter: blur(12px); } .viewer-control { width: 42px; height: 42px; border: 1px solid rgba(212,175,55,.12); border-radius: 10px; background: rgba(255,255,255,.04); color: var(--afriya-gold-light); cursor: pointer; transition: .2s ease; } .viewer-control:hover { background: rgba(212,175,55,.12); } /* ========================================================= BADGE 360° ========================================================= */ .viewer-360-badge { position: absolute; top: 18px; left: 18px; padding: 8px 12px; border: 1px solid rgba(212,175,55,.2); border-radius: 999px; background: rgba(0,0,0,.4); color: var(--afriya-gold-light); font-size: 10px; letter-spacing: 1.5px; } /* ========================================================= INFORMATIONS ========================================================= */ .artifact-information { padding: 24px; border: 1px solid rgba(212,175,55,.14); border-radius: 24px; background: rgba(255,255,255,.035); backdrop-filter: blur(16px); } .artifact-information h3 { color: var(--afriya-gold-light); font-size: 25px; } .artifact-information p { margin-top: 13px; color: var(--afriya-muted); line-height: 1.8; } .artifact-tag { display: inline-block; margin-bottom: 14px; padding: 6px 9px; border-radius: 999px; background: rgba(212,175,55,.1); color: var(--afriya-gold); font-size: 9px; letter-spacing: 1.4px; } .artifact-data { display: grid; gap: 10px; margin-top: 25px; } .artifact-data-row { display: flex; justify-content: space-between; padding-bottom: 9px; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 12px; } .artifact-data-row span:first-child { color: #887c6e; } .artifact-data-row span:last-child { color: #e8d7bb; } /* ========================================================= MODE VR ========================================================= */ .vr-mode { position: fixed; inset: 0; z-index: 7000; display: none; align-items: center; justify-content: center; background: #020302; } .vr-mode.active { display: flex; } .vr-message { text-align: center; padding: 30px; } .vr-message h2 { color: var(--afriya-gold-light); font-size: 35px; } .vr-message p { margin-top: 10px; color: var(--afriya-muted); } .vr-exit { margin-top: 25px; padding: 12px 20px; border: 0; border-radius: 10px; background: var(--afriya-gold); color: #120c05; cursor: pointer; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1150px) { .museum-interface { grid-template-columns: 210px minmax(0, 1fr); } .artifact-information { grid-column: 1 / -1; } } @media (max-width: 760px) { .library-3d-section { padding: 75px 20px; } .library-3d-header { align-items: flex-start; flex-direction: column; } .museum-interface { grid-template-columns: 1fr; } .museum-sidebar, .artifact-information { grid-column: auto; } .viewer-3d { min-height: 560px; } .artifact-shape { width: 85px; height: 175px; } }

AFRIYA 3D EXPERIENCE

Musée numérique africain

Explorez des collections historiques dans un espace numérique interactif.

◉ MODE 360°

COLLECTION ROYALE

Objet historique

Explorez cet objet numérique et découvrez son contexte historique.

Époque Historique

Collection Afriya

Vue 360°

Expérience Afriya VR

Le mode VR est prêt à accueillir le moteur immersif de la bibliothèque.

/* ========================================================= BIBLIOTHÈQUE 3D ========================================================= */ const artifact = document.getElementById( "artifact3D" ); let artifactRotation = 0; let artifactScale = 1; /* * Rotation gauche */ document .getElementById("rotateLeft") ?.addEventListener( "click", () => { artifactRotation -= 20; updateArtifact(); } ); /* * Rotation droite */ document .getElementById("rotateRight") ?.addEventListener( "click", () => { artifactRotation += 20; updateArtifact(); } ); /* * Zoom avant */ document .getElementById("zoomArtifactIn") ?.addEventListener( "click", () => { artifactScale = Math.min( artifactScale + .15, 1.8 ); updateArtifact(); } ); /* * Zoom arrière */ document .getElementById("zoomArtifactOut") ?.addEventListener( "click", () => { artifactScale = Math.max( artifactScale - .15, .6 ); updateArtifact(); } ); function updateArtifact() { if (!artifact) return; artifact.style.transform = ` translate(-50%, -50%) scale(${artifactScale}) rotateY(${artifactRotation}deg) `; } /* ========================================================= SALLES ========================================================= */ const roomButtons = document.querySelectorAll( ".room-button" ); const roomData = { royaumes: { category: "COLLECTION ROYALE", title: "Héritage des royaumes", description: "Explorez une collection consacrée aux royaumes et civilisations africaines.", period: "Antiquité / Moyen Âge" }, arts: { category: "ARTS AFRICAINS", title: "Arts et créations", description: "Découvrez différentes formes artistiques et artisanales du continent.", period: "Époques diverses" }, sciences: { category: "SCIENCES", title: "Savoirs et sciences", description: "Explorez l'histoire des connaissances et innovations africaines.", period: "Époques diverses" }, patrimoine: { category: "PATRIMOINE", title: "Patrimoine culturel", description: "Découvrez des éléments du patrimoine matériel et culturel.", period: "Historique" }, archives: { category: "ARCHIVES", title: "Archives historiques", description: "Une interface destinée aux documents et archives numériques.", period: "Archives" } }; roomButtons.forEach(button => { button.addEventListener( "click", () => { roomButtons.forEach( item => item.classList.remove( "active" ) ); button.classList.add( "active" ); const room = roomData[ button.dataset.room ]; if (!room) return; document.getElementById( "artifactCategory" ).textContent = room.category; document.getElementById( "artifactTitle" ).textContent = room.title; document.getElementById( "artifactDescription" ).textContent = room.description; document.getElementById( "artifactPeriod" ).textContent = room.period; } ); }); /* ========================================================= MODE VR ========================================================= */ const vrMode = document.getElementById( "vrMode" ); document .getElementById("openVR") ?.addEventListener( "click", () => { vrMode?.classList.add( "active" ); } ); document .getElementById("exitVR") ?.addEventListener( "click", () => { vrMode?.classList.remove( "active" ); } ); /* * Échap */ document.addEventListener( "keydown", event => { if ( event.key === "Escape" && vrMode?.classList.contains("active") ) { vrMode.classList.remove( "active" ); } } );/* ========================================================= AFRIYA — ÉVÉNEMENTS & CONCOURS ========================================================= */ .events-section { position: relative; padding: 110px 7vw; overflow: hidden; background: radial-gradient( circle at 20% 20%, rgba(212,175,55,.12), transparent 35% ), radial-gradient( circle at 80% 70%, rgba(15,81,50,.15), transparent 35% ), #060706; } /* ========================================================= EN-TÊTE ========================================================= */ .events-header { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 35px; } .events-header h2 { margin-top: 8px; font-size: clamp( 34px, 5vw, 62px ); background: linear-gradient( 120deg, #fff0a6, var(--afriya-gold), #8e6319 ); -webkit-background-clip: text; background-clip: text; color: transparent; } .events-header p { max-width: 650px; margin-top: 12px; color: var(--afriya-muted); line-height: 1.8; } /* ========================================================= COMPTE À REBOURS ========================================================= */ .event-countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 520px; padding: 15px; border: 1px solid rgba(212,175,55,.18); border-radius: 18px; background: rgba(255,255,255,.035); backdrop-filter: blur(15px); } .countdown-item { text-align: center; padding: 12px 5px; } .countdown-number { display: block; color: var(--afriya-gold-light); font-size: 28px; font-weight: 800; } .countdown-label { display: block; margin-top: 4px; color: var(--afriya-muted); font-size: 9px; letter-spacing: 1.5px; } /* ========================================================= FILTRES ========================================================= */ .events-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 25px; } .event-filter { padding: 10px 15px; border: 1px solid rgba(212,175,55,.14); border-radius: 999px; background: rgba(255,255,255,.035); color: var(--afriya-muted); cursor: pointer; transition: .25s ease; } .event-filter:hover, .event-filter.active { border-color: var(--afriya-gold); background: rgba(212,175,55,.1); color: var(--afriya-gold-light); } /* ========================================================= GRILLE ========================================================= */ .events-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } /* ========================================================= CARTE ÉVÉNEMENT ========================================================= */ .event-card { position: relative; overflow: hidden; border: 1px solid rgba(212,175,55,.13); border-radius: 24px; background: linear-gradient( 145deg, rgba(255,255,255,.065), rgba(255,255,255,.015) ); box-shadow: 0 25px 70px rgba(0,0,0,.3); transition: transform .3s ease, border-color .3s ease; } .event-card:hover { transform: translateY(-8px); border-color: rgba(212,175,55,.42); } /* image */ .event-visual { position: relative; height: 210px; display: grid; place-items: center; overflow: hidden; background: radial-gradient( circle, rgba(212,175,55,.24), transparent 40% ), linear-gradient( 135deg, #1b281d, #0a0e0b ); } .event-icon { font-size: 75px; filter: drop-shadow( 0 15px 25px rgba(0,0,0,.5) ); } .event-status { position: absolute; top: 14px; left: 14px; padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,.5); color: var(--afriya-gold-light); font-size: 9px; letter-spacing: 1.3px; } /* contenu */ .event-content { padding: 22px; } .event-date { color: var(--afriya-gold); font-size: 11px; letter-spacing: 1px; } .event-content h3 { margin-top: 8px; font-size: 22px; } .event-content p { min-height: 55px; margin-top: 9px; color: var(--afriya-muted); font-size: 13px; line-height: 1.7; } .event-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; } .event-tag { padding: 6px 8px; border-radius: 7px; background: rgba(255,255,255,.04); color: #a89b8a; font-size: 10px; } .event-actions { display: flex; gap: 8px; margin-top: 18px; } .event-button { flex: 1; padding: 11px; border: 1px solid rgba(212,175,55,.2); border-radius: 10px; background: rgba(255,255,255,.035); color: var(--afriya-gold-light); cursor: pointer; } .event-button.primary { border-color: transparent; background: linear-gradient( 135deg, #e5c054, #9d6d19 ); color: #130d05; } /* ========================================================= CLASSEMENT ========================================================= */ .event-ranking { margin-top: 35px; padding: 25px; border: 1px solid rgba(212,175,55,.15); border-radius: 24px; background: rgba(255,255,255,.03); } .event-ranking h3 { color: var(--afriya-gold-light); margin-bottom: 18px; } .ranking-list { display: grid; gap: 9px; } .ranking-row { display: grid; grid-template-columns: 50px 1fr 100px; align-items: center; gap: 12px; padding: 12px; border-radius: 11px; background: rgba(255,255,255,.025); } .ranking-position { color: var(--afriya-gold); font-weight: 800; } .ranking-name { color: #e5dac9; } .ranking-score { text-align: right; color: var(--afriya-gold-light); } /* ========================================================= MODALE INSCRIPTION ========================================================= */ .event-modal { position: fixed; inset: 0; z-index: 8000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.78); backdrop-filter: blur(14px); } .event-modal.open { display: flex; } .event-modal-box { width: min(600px, 100%); padding: 30px; border: 1px solid rgba(212,175,55,.2); border-radius: 25px; background: #0c0a07; box-shadow: 0 40px 120px rgba(0,0,0,.65); } .event-modal-header { display: flex; justify-content: space-between; align-items: center; } .event-modal-header h3 { color: var(--afriya-gold-light); } .event-modal-close { width: 40px; height: 40px; border: 1px solid rgba(212,175,55,.15); border-radius: 50%; background: rgba(255,255,255,.04); color: white; cursor: pointer; } .event-form { display: grid; gap: 13px; margin-top: 25px; } .event-form input, .event-form textarea { width: 100%; padding: 13px; border: 1px solid rgba(212,175,55,.15); border-radius: 10px; outline: none; background: rgba(255,255,255,.035); color: white; font: inherit; } .event-form textarea { min-height: 100px; resize: vertical; } .event-form button { padding: 13px; border: 0; border-radius: 10px; background: linear-gradient( 135deg, #e5c054, #9d6d19 ); color: #130d05; font-weight: 700; cursor: pointer; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1100px) { .events-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 750px) { .events-section { padding: 75px 20px; } .events-header { align-items: flex-start; flex-direction: column; } .events-grid { grid-template-columns: 1fr; } .event-countdown { width: 100%; max-width: none; } } @media (max-width: 480px) { .countdown-number { font-size: 21px; } .ranking-row { grid-template-columns: 35px 1fr 70px; } }

AFRIYA EVENTS

Événements & concours

Participez aux événements, défis et concours de la communauté Afriya.

00 JOURS

00 HEURES

00 MINUTES

00 SECONDES

À VENIR 🏆

GRAND CONCOURS

Défi Afriya

Testez vos connaissances et participez à un défi culturel et historique.

📚 Culture 🌍 Afrique

PROGRAMMÉ 📖

ÉDUCATION

Semaine du savoir

Une série d'activités consacrées à l'apprentissage de l'histoire.

🎓 Apprentissage 📚 Quiz

PROGRAMMÉ 🎭

CULTURE

Festival Afriya

Un espace dédié aux cultures, traditions et patrimoines africains.

🎨 Arts 🪘 Culture

🏆 Classement du concours

#1 Participant 980 pts

#2 Participant 940 pts

#3 Participant 910 pts

/* ========================================================= ÉVÉNEMENTS & CONCOURS ========================================================= */ /* * FILTRES */ const eventFilters = document.querySelectorAll( ".event-filter" ); const eventCards = document.querySelectorAll( ".event-card" ); eventFilters.forEach(filter => { filter.addEventListener( "click", () => { eventFilters.forEach( item => item.classList.remove( "active" ) ); filter.classList.add( "active" ); const selected = filter.dataset.eventFilter; eventCards.forEach(card => { const type = card.dataset.eventType; const visible = selected === "all" || selected === type; card.style.display = visible ? "" : "none"; }); } ); }); /* * COMPTE À REBOURS * * Date d'exemple : * à remplacer par la date réelle * de l'événement depuis le backend. */ const eventDate = new Date( "2026-12-12T12:00:00" ); function updateEventCountdown() { const now = new Date(); const difference = eventDate.getTime() - now.getTime(); if (difference <= 0) { document.getElementById( "countdownDays" ).textContent = "00"; document.getElementById( "countdownHours" ).textContent = "00"; document.getElementById( "countdownMinutes" ).textContent = "00"; document.getElementById( "countdownSeconds" ).textContent = "00"; return; } const days = Math.floor( difference / (1000 * 60 * 60 * 24) ); const hours = Math.floor( ( difference / (1000 * 60 * 60) ) % 24 ); const minutes = Math.floor( ( difference / (1000 * 60) ) % 60 ); const seconds = Math.floor( ( difference / 1000 ) % 60 ); document.getElementById( "countdownDays" ).textContent = String(days).padStart(2, "0"); document.getElementById( "countdownHours" ).textContent = String(hours).padStart(2, "0"); document.getElementById( "countdownMinutes" ).textContent = String(minutes).padStart(2, "0"); document.getElementById( "countdownSeconds" ).textContent = String(seconds).padStart(2, "0"); } updateEventCountdown(); setInterval( updateEventCountdown, 1000 ); /* * MODALE INSCRIPTION */ const eventModal = document.getElementById( "eventModal" ); const eventModalClose = document.getElementById( "eventModalClose" ); const selectedEvent = document.getElementById( "selectedEvent" ); document .querySelectorAll(".register-event") .forEach(button => { button.addEventListener( "click", () => { const eventName = button.dataset.event; selectedEvent.value = eventName; eventModal.classList.add( "open" ); eventModal.setAttribute( "aria-hidden", "false" ); } ); }); function closeEventModal() { eventModal?.classList.remove( "open" ); eventModal?.setAttribute( "aria-hidden", "true" ); } eventModalClose?.addEventListener( "click", closeEventModal ); eventModal?.addEventListener( "click", event => { if ( event.target === eventModal ) { closeEventModal(); } } ); /* * FORMULAIRE */ document .getElementById("eventForm") ?.addEventListener( "submit", event => { event.preventDefault(); alert( "Inscription enregistrée dans cette version de démonstration." ); closeEventModal(); } );/* ========================================================= AFRIYA — IA ASSISTANT ========================================================= */ .ai-section { position: relative; min-height: 850px; padding: 110px 7vw; overflow: hidden; background: radial-gradient( circle at 50% 10%, rgba(212,175,55,.12), transparent 35% ), radial-gradient( circle at 10% 80%, rgba(15,81,50,.18), transparent 35% ), #050605; } /* ========================================================= HEADER ========================================================= */ .ai-header { margin-bottom: 35px; } .ai-header h2 { margin-top: 8px; font-size: clamp( 35px, 5vw, 64px ); background: linear-gradient( 120deg, #fff2ad, var(--afriya-gold), #8c6119 ); -webkit-background-clip: text; background-clip: text; color: transparent; } .ai-header p { max-width: 720px; margin-top: 12px; color: var(--afriya-muted); line-height: 1.8; } /* ========================================================= INTERFACE ========================================================= */ .ai-interface { display: grid; grid-template-columns: 240px minmax(0, 1fr) 280px; min-height: 650px; gap: 16px; } /* ========================================================= SIDEBAR ========================================================= */ .ai-sidebar { padding: 20px; border: 1px solid rgba(212,175,55,.14); border-radius: 23px; background: rgba(255,255,255,.035); backdrop-filter: blur(18px); } .ai-sidebar h3 { color: var(--afriya-gold-light); margin-bottom: 18px; } .ai-tool-list { display: grid; gap: 8px; } .ai-tool { width: 100%; padding: 12px; text-align: left; border: 1px solid rgba(212,175,55,.1); border-radius: 10px; background: rgba(255,255,255,.025); color: var(--afriya-muted); cursor: pointer; transition: .25s ease; } .ai-tool:hover, .ai-tool.active { border-color: var(--afriya-gold); background: rgba(212,175,55,.1); color: var(--afriya-gold-light); transform: translateX(3px); } /* ========================================================= CHAT ========================================================= */ .ai-chat { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(212,175,55,.18); border-radius: 27px; background: linear-gradient( 145deg, rgba(255,255,255,.06), rgba(255,255,255,.018) ); box-shadow: 0 30px 90px rgba(0,0,0,.4); } /* header chat */ .ai-chat-header { display: flex; align-items: center; gap: 12px; padding: 17px 20px; border-bottom: 1px solid rgba(255,255,255,.07); } .ai-avatar { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient( 135deg, #e6c55d, #765015 ); color: #110d06; font-weight: 900; box-shadow: 0 0 25px rgba(212,175,55,.2); } .ai-chat-title { flex: 1; } .ai-chat-title strong { display: block; color: #f5ead5; } .ai-status { margin-top: 3px; color: #8e9b8e; font-size: 10px; } .ai-status::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #65b978; } /* messages */ .ai-messages { flex: 1; overflow-y: auto; padding: 25px; display: flex; flex-direction: column; gap: 13px; } .ai-message { max-width: 78%; padding: 13px 15px; border-radius: 15px; color: #e9dfcf; font-size: 13px; line-height: 1.7; animation: aiMessageIn .25s ease; } @keyframes aiMessageIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } } .ai-message.bot { align-self: flex-start; border: 1px solid rgba(212,175,55,.1); border-top-left-radius: 4px; background: rgba(255,255,255,.045); } .ai-message.user { align-self: flex-end; border-top-right-radius: 4px; background: rgba(212,175,55,.13); color: #f3e8d2; } /* ========================================================= SUGGESTIONS ========================================================= */ .ai-suggestions { display: flex; gap: 7px; overflow-x: auto; padding: 0 20px 13px; } .ai-suggestion { flex-shrink: 0; padding: 8px 11px; border: 1px solid rgba(212,175,55,.13); border-radius: 999px; background: rgba(255,255,255,.025); color: #b7aa98; cursor: pointer; font-size: 10px; } .ai-suggestion:hover { border-color: var(--afriya-gold); color: var(--afriya-gold-light); } /* ========================================================= INPUT ========================================================= */ .ai-input-area { display: flex; gap: 8px; padding: 14px; border-top: 1px solid rgba(255,255,255,.07); } .ai-input { flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid rgba(212,175,55,.13); border-radius: 12px; outline: none; background: rgba(255,255,255,.035); color: white; font: inherit; } .ai-input:focus { border-color: rgba(212,175,55,.5); } .ai-send, .ai-voice { width: 45px; height: 45px; flex-shrink: 0; border: 1px solid rgba(212,175,55,.18); border-radius: 12px; background: rgba(255,255,255,.04); color: var(--afriya-gold-light); cursor: pointer; } .ai-send { background: linear-gradient( 135deg, #e4c054, #956719 ); color: #120c05; } /* ========================================================= PANNEAU DROIT ========================================================= */ .ai-context { padding: 20px; border: 1px solid rgba(212,175,55,.14); border-radius: 23px; background: rgba(255,255,255,.035); backdrop-filter: blur(18px); } .ai-context h3 { color: var(--afriya-gold-light); margin-bottom: 18px; } .ai-context-card { padding: 14px; margin-bottom: 10px; border: 1px solid rgba(255,255,255,.06); border-radius: 12px; background: rgba(255,255,255,.025); } .ai-context-card strong { display: block; color: #eadfcf; margin-bottom: 5px; } .ai-context-card span { color: #968a79; font-size: 11px; line-height: 1.6; } /* ========================================================= TYPING ========================================================= */ .ai-typing { display: none; align-self: flex-start; padding: 12px 15px; border-radius: 15px; background: rgba(255,255,255,.045); color: #a69a88; } .ai-typing.visible { display: block; } .ai-typing span { display: inline-block; width: 5px; height: 5px; margin: 0 2px; border-radius: 50%; background: var(--afriya-gold); animation: typing .9s infinite; } .ai-typing span:nth-child(2) { animation-delay: .15s; } .ai-typing span:nth-child(3) { animation-delay: .3s; } @keyframes typing { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1150px) { .ai-interface { grid-template-columns: 210px minmax(0, 1fr); } .ai-context { grid-column: 1 / -1; } } @media (max-width: 760px) { .ai-section { padding: 75px 20px; } .ai-interface { grid-template-columns: 1fr; } .ai-sidebar, .ai-context { grid-column: auto; } .ai-chat { min-height: 600px; } }

AFRIYA INTELLIGENCE

IA Afriya

Un assistant conçu pour vous aider à explorer l'histoire, la culture et les ressources de la Bibliothèque Afriya.

Assistant Afriya Prêt à vous aider

Bonjour 👋 Je suis l'assistant Afriya. Je peux t'aider à explorer la bibliothèque, comprendre un événement historique ou trouver des ressources.

✨ Suggestions

📚 Bibliothèque Découvre les collections historiques disponibles.

🌍 Carte Explore les différentes périodes historiques.

🏛️ Musée 3D Explore les collections numériques en 3D.

🏆 Concours Participe aux prochains événements Afriya.

/* ========================================================= IA AFRIYA — INTERFACE ========================================================= */ const aiInput = document.getElementById( "aiInput" ); const aiSend = document.getElementById( "aiSend" ); const aiMessages = document.getElementById( "aiMessages" ); const aiTyping = document.getElementById( "aiTyping" ); /* * Ajouter un message */ function addAIMessage( text, type = "bot" ) { const message = document.createElement( "div" ); message.className = `ai-message ${type}`; message.textContent = text; aiMessages.insertBefore( message, aiTyping ); aiMessages.scrollTop = aiMessages.scrollHeight; } /* * Réponse frontend de démonstration. * * Le véritable moteur IA sera connecté * au backend dans une partie ultérieure. */ function generateDemoResponse( question ) { const q = question.toLowerCase(); if ( q.includes("bibliothèque") ) { return ` La Bibliothèque Afriya est un espace numérique consacré à l'histoire, aux cultures et aux patrimoines africains. `.trim(); } if ( q.includes("quiz") ) { return ` Je peux préparer une expérience de quiz historique. Le générateur de questions sera connecté au service IA dans la version backend. `.trim(); } if ( q.includes("3d") || q.includes("360") ) { return ` Le musée numérique Afriya permet d'explorer des collections dans une interface 3D avec des commandes de rotation et de zoom. `.trim(); } if ( q.includes("histoire") || q.includes("historique") ) { return ` La carte historique Afriya permet de parcourir différentes périodes et de sélectionner des lieux pour obtenir des informations. `.trim(); } return ` Je comprends ta question. Dans la version actuelle, je suis encore en mode démonstration. Le moteur IA complet sera connecté au backend d'Afriya dans une prochaine partie. `.trim(); } /* * Envoyer */ function sendAIMessage() { const text = aiInput.value.trim(); if (!text) return; addAIMessage( text, "user" ); aiInput.value = ""; aiTyping.classList.add( "visible" ); setTimeout( () => { aiTyping.classList.remove( "visible" ); const response = generateDemoResponse( text ); addAIMessage( response, "bot" ); }, 650 ); } aiSend?.addEventListener( "click", sendAIMessage ); aiInput?.addEventListener( "keydown", event => { if ( event.key === "Enter" ) { sendAIMessage(); } } ); /* * SUGGESTIONS */ document .querySelectorAll( ".ai-suggestion" ) .forEach(button => { button.addEventListener( "click", () => { aiInput.value = button.dataset.question; sendAIMessage(); } ); }); /* * OUTILS IA */ document .querySelectorAll( ".ai-tool" ) .forEach(tool => { tool.addEventListener( "click", () => { document .querySelectorAll( ".ai-tool" ) .forEach( item => item.classList.remove( "active" ) ); tool.classList.add( "active" ); const selectedTool = tool.dataset.aiTool; const messages = { assistant: "Assistant Afriya activé.", library: "Mode exploration de la bibliothèque activé.", quiz: "Mode générateur de quiz activé.", summary: "Mode résumé de documents activé.", recommend: "Mode recommandations activé." }; addAIMessage( messages[selectedTool] || "Outil IA activé.", "bot" ); } ); }); /* * MODE VOCAL */ document .getElementById("aiVoice") ?.addEventListener( "click", () => { addAIMessage( "Le mode vocal est préparé. Il sera connecté au service vocal lors de l'intégration backend.", "bot" ); } );/* ========================================================= AFRIYA — COMPTES & PROFILS ========================================================= */ .account-section { position: relative; min-height: 850px; padding: 110px 7vw; overflow: hidden; background: radial-gradient( circle at 15% 20%, rgba(212,175,55,.12), transparent 35% ), radial-gradient( circle at 85% 75%, rgba(15,81,50,.16), transparent 35% ), #050605; } /* ========================================================= HEADER ========================================================= */ .account-header { margin-bottom: 35px; } .account-header h2 { margin-top: 8px; font-size: clamp(35px, 5vw, 64px); background: linear-gradient( 120deg, #fff1aa, var(--afriya-gold), #8b6018 ); -webkit-background-clip: text; background-clip: text; color: transparent; } .account-header p { max-width: 700px; margin-top: 12px; color: var(--afriya-muted); line-height: 1.8; } /* ========================================================= INTERFACE ========================================================= */ .account-interface { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; } /* ========================================================= NAVIGATION ========================================================= */ .account-nav { padding: 20px; border: 1px solid rgba(212,175,55,.14); border-radius: 24px; background: rgba(255,255,255,.035); backdrop-filter: blur(18px); } .account-nav h3 { margin-bottom: 18px; color: var(--afriya-gold-light); } .account-nav-list { display: grid; gap: 8px; } .account-nav-button { width: 100%; padding: 13px; text-align: left; border: 1px solid rgba(212,175,55,.1); border-radius: 11px; background: rgba(255,255,255,.025); color: var(--afriya-muted); cursor: pointer; transition: .25s ease; } .account-nav-button:hover, .account-nav-button.active { border-color: var(--afriya-gold); background: rgba(212,175,55,.1); color: var(--afriya-gold-light); } /* ========================================================= CONTENU ========================================================= */ .account-content { min-width: 0; } .account-panel { display: none; padding: 28px; border: 1px solid rgba(212,175,55,.14); border-radius: 25px; background: rgba(255,255,255,.035); backdrop-filter: blur(18px); } .account-panel.active { display: block; animation: accountPanelIn .3s ease; } @keyframes accountPanelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= PROFIL ========================================================= */ .profile-header { display: flex; align-items: center; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.07); } .profile-avatar { width: 85px; height: 85px; display: grid; place-items: center; flex-shrink: 0; border-radius: 50%; background: linear-gradient( 135deg, #e5c357, #795316 ); color: #120c05; font-size: 30px; font-weight: 900; box-shadow: 0 0 40px rgba(212,175,55,.18); } .profile-name { color: #f3e7d1; font-size: 25px; } .profile-status { display: inline-block; margin-top: 5px; padding: 5px 9px; border-radius: 999px; background: rgba(212,175,55,.1); color: var(--afriya-gold); font-size: 9px; letter-spacing: 1px; } /* ========================================================= STATISTIQUES ========================================================= */ .profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 25px; } .profile-stat { padding: 17px; border: 1px solid rgba(255,255,255,.06); border-radius: 14px; background: rgba(255,255,255,.025); } .profile-stat strong { display: block; color: var(--afriya-gold-light); font-size: 24px; } .profile-stat span { color: #968a79; font-size: 11px; } /* ========================================================= FORMULAIRE ========================================================= */ .account-form { display: grid; gap: 15px; max-width: 650px; } .account-form label { color: #b7aa98; font-size: 12px; } .account-field { display: grid; gap: 7px; } .account-field input, .account-field select { width: 100%; padding: 13px; border: 1px solid rgba(212,175,55,.14); border-radius: 10px; outline: none; background: rgba(255,255,255,.035); color: white; font: inherit; } .account-field input:focus, .account-field select:focus { border-color: rgba(212,175,55,.5); } .account-save { width: fit-content; padding: 12px 20px; border: 0; border-radius: 10px; background: linear-gradient( 135deg, #e5c054, #9c6d1a ); color: #120c05; font-weight: 700; cursor: pointer; } /* ========================================================= SÉCURITÉ ========================================================= */ .security-card { padding: 18px; margin-bottom: 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; background: rgba(255,255,255,.025); } .security-card strong { display: block; color: #e7dccb; } .security-card p { margin-top: 5px; color: #958a7a; font-size: 12px; line-height: 1.6; } /* ========================================================= AUTHENTIFICATION ========================================================= */ .auth-overlay { position: fixed; inset: 0; z-index: 9000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.8); backdrop-filter: blur(16px); } .auth-overlay.open { display: flex; } .auth-box { width: min(470px, 100%); padding: 30px; border: 1px solid rgba(212,175,55,.22); border-radius: 25px; background: #0c0b08; box-shadow: 0 40px 120px rgba(0,0,0,.65); } .auth-box h3 { color: var(--afriya-gold-light); font-size: 27px; } .auth-box p { margin-top: 8px; color: #948979; line-height: 1.6; } .auth-form { display: grid; gap: 12px; margin-top: 22px; } .auth-form input { padding: 13px; border: 1px solid rgba(212,175,55,.15); border-radius: 10px; outline: none; background: rgba(255,255,255,.035); color: white; } .auth-form button { padding: 13px; border: 0; border-radius: 10px; background: linear-gradient( 135deg, #e5c054, #9c6d1a ); color: #120c05; font-weight: 700; cursor: pointer; } .auth-close { float: right; width: 35px; height: 35px; border-radius: 50%; border: 1px solid rgba(212,175,55,.15); background: rgba(255,255,255,.04); color: white; cursor: pointer; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 850px) { .account-interface { grid-template-columns: 1fr; } .profile-stats { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .account-section { padding: 75px 20px; } .profile-header { align-items: flex-start; flex-direction: column; } .profile-stats { grid-template-columns: 1fr; } }

AFRIYA ACCOUNT

Mon espace Afriya

Gérez votre profil, vos préférences, vos activités et les paramètres de votre compte.

Visiteur Afriya

COMPTE STANDARD

0 Documents consultés

0 Quiz terminés

0 Événements

🎨 Préférences

Langue

Taille du texte

📊 Mon activité

📚 Bibliothèque

Votre historique de consultation apparaîtra ici.

🏆 Concours

Vos participations et résultats seront affichés ici.

🔐 Sécurité du compte

Mot de passe

Le changement de mot de passe sera connecté au système d'authentification sécurisé.

Sessions

Les sessions actives pourront être contrôlées depuis cette interface.

Protection du compte

Les fonctions avancées de sécurité seront ajoutées dans le module de sécurité Afriya.

/* ========================================================= COMPTES AFRIYA ========================================================= */ const accountButtons = document.querySelectorAll( ".account-nav-button[data-account-panel]" ); const accountPanels = document.querySelectorAll( ".account-panel" ); /* * Navigation compte */ accountButtons.forEach(button => { button.addEventListener( "click", () => { const target = button.dataset.accountPanel; accountButtons.forEach(item => { item.classList.remove( "active" ); }); accountPanels.forEach(panel => { panel.classList.remove( "active" ); }); button.classList.add( "active" ); document .querySelector( `[data-account-content="${target}"]` ) ?.classList.add( "active" ); } ); }); /* * Préférences */ const preferencesForm = document.getElementById( "preferencesForm" ); preferencesForm?.addEventListener( "submit", event => { event.preventDefault(); const language = document.getElementById( "languagePreference" ).value; const textSize = document.getElementById( "textSizePreference" ).value; localStorage.setItem( "afriyaLanguage", language ); localStorage.setItem( "afriyaTextSize", textSize ); alert( "Préférences enregistrées." ); } ); /* * Charger préférences */ const savedLanguage = localStorage.getItem( "afriyaLanguage" ); const savedTextSize = localStorage.getItem( "afriyaTextSize" ); if (savedLanguage) { const language = document.getElementById( "languagePreference" ); if (language) { language.value = savedLanguage; } } if (savedTextSize) { const textSize = document.getElementById( "textSizePreference" ); if (textSize) { textSize.value = savedTextSize; } } /* * Déconnexion */ document .getElementById("logoutButton") ?.addEventListener( "click", () => { localStorage.removeItem( "afriyaSession" ); alert( "Vous avez été déconnecté." ); } ); /* * Authentification de démonstration */ const authOverlay = document.getElementById( "authOverlay" ); const authClose = document.getElementById( "authClose" ); const authForm = document.getElementById( "authForm" ); authClose?.addEventListener( "click", () => { authOverlay.classList.remove( "open" ); } ); authForm?.addEventListener( "submit", event => { event.preventDefault(); const email = document.getElementById( "authEmail" ).value; localStorage.setItem( "afriyaSession", "demo-session" ); const name = email .split("@")[0] .replace( /[^a-zA-Z0-9]/g, " " ); document.getElementById( "profileName" ).textContent = name || "Utilisateur Afriya"; document.getElementById( "profileAvatar" ).textContent = ( name || "A" ) .charAt(0) .toUpperCase(); authOverlay.classList.remove( "open" ); alert( "Connexion de démonstration réussie." ); } );/* ========================================================= AFRIYA — PREMIUM ========================================================= */ .premium-section { position: relative; padding: 120px 7vw; overflow: hidden; background: radial-gradient( circle at 50% 0%, rgba(212,175,55,.16), transparent 38% ), radial-gradient( circle at 0% 80%, rgba(95,42,140,.13), transparent 35% ), #050505; } .premium-glow { position: absolute; width: 500px; height: 500px; top: -250px; right: -150px; border-radius: 50%; background: rgba(212,175,55,.08); filter: blur(80px); pointer-events: none; } /* ========================================================= HEADER ========================================================= */ .premium-header { position: relative; z-index: 1; text-align: center; max-width: 850px; margin: 0 auto 50px; } .premium-badge { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid rgba(212,175,55,.25); border-radius: 999px; background: rgba(212,175,55,.08); color: var(--afriya-gold-light); font-size: 10px; letter-spacing: 2px; } .premium-header h2 { margin-top: 15px; font-size: clamp(40px, 6vw, 75px); background: linear-gradient( 120deg, #fff6bd, #e5c054, #8f641c ); -webkit-background-clip: text; background-clip: text; color: transparent; } .premium-header p { margin-top: 15px; color: var(--afriya-muted); line-height: 1.8; } /* ========================================================= CARTES ========================================================= */ .premium-plans { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1200px; margin: auto; } .premium-card { position: relative; padding: 30px; border: 1px solid rgba(255,255,255,.08); border-radius: 27px; background: linear-gradient( 145deg, rgba(255,255,255,.055), rgba(255,255,255,.015) ); box-shadow: 0 30px 90px rgba(0,0,0,.35); transition: transform .3s ease, border-color .3s ease; } .premium-card:hover { transform: translateY(-9px); border-color: rgba(212,175,55,.3); } .premium-card.featured { border: 1px solid rgba(212,175,55,.45); background: linear-gradient( 145deg, rgba(212,175,55,.1), rgba(255,255,255,.025) ); box-shadow: 0 35px 100px rgba(212,175,55,.09); } .premium-popular { position: absolute; top: 16px; right: 16px; padding: 6px 9px; border-radius: 999px; background: var(--afriya-gold); color: #110b04; font-size: 8px; font-weight: 800; letter-spacing: 1px; } .premium-card h3 { color: #eee2cf; font-size: 24px; } .premium-card-description { min-height: 48px; margin-top: 8px; color: #938878; font-size: 12px; line-height: 1.6; } /* ========================================================= PRIX ========================================================= */ .premium-price { margin: 25px 0; color: var(--afriya-gold-light); font-size: 40px; font-weight: 900; } .premium-price small { color: #8f8475; font-size: 11px; font-weight: 400; } /* ========================================================= AVANTAGES ========================================================= */ .premium-features { display: grid; gap: 10px; margin-bottom: 25px; } .premium-feature { display: flex; gap: 9px; align-items: flex-start; color: #b8ad9d; font-size: 12px; line-height: 1.5; } .premium-feature span:first-child { color: var(--afriya-gold); } /* ========================================================= BOUTON ========================================================= */ .premium-button { width: 100%; padding: 13px; border: 1px solid rgba(212,175,55,.22); border-radius: 11px; background: rgba(255,255,255,.035); color: var(--afriya-gold-light); cursor: pointer; transition: .25s ease; } .premium-button:hover, .premium-button.primary { border-color: transparent; background: linear-gradient( 135deg, #e6c45a, #97691a ); color: #120c05; } /* ========================================================= AVANTAGES PREMIUM ========================================================= */ .premium-benefits { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 1200px; margin: 55px auto 0; } .premium-benefit { padding: 20px; border: 1px solid rgba(255,255,255,.06); border-radius: 17px; background: rgba(255,255,255,.025); } .premium-benefit-icon { font-size: 28px; } .premium-benefit strong { display: block; margin-top: 10px; color: #e7dccb; } .premium-benefit p { margin-top: 5px; color: #8f8475; font-size: 11px; line-height: 1.6; } /* ========================================================= MODALE ========================================================= */ .premium-modal { position: fixed; inset: 0; z-index: 9500; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.8); backdrop-filter: blur(15px); } .premium-modal.open { display: flex; } .premium-modal-box { width: min(500px,100%); padding: 30px; border: 1px solid rgba(212,175,55,.25); border-radius: 25px; background: #0b0a08; text-align: center; } .premium-modal-box h3 { color: var(--afriya-gold-light); font-size: 27px; } .premium-modal-box p { margin-top: 10px; color: #978b7b; line-height: 1.7; } .premium-modal-close { margin-top: 20px; padding: 11px 20px; border: 0; border-radius: 10px; background: linear-gradient( 135deg, #e5c054, #996a1a ); color: #120c05; font-weight: 700; cursor: pointer; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 950px) { .premium-plans { grid-template-columns: 1fr; max-width: 550px; } .premium-benefits { grid-template-columns: repeat(2,1fr); } } @media (max-width: 550px) { .premium-section { padding: 80px 20px; } .premium-benefits { grid-template-columns: 1fr; } }

✦ AFRIYA PREMIUM

Passez à l'expérience Premium

Découvrez davantage de contenus, d'expériences interactives et d'outils d'apprentissage tout en conservant une expérience complète pour les utilisateurs gratuits.

Afriya

Pour découvrir gratuitement l'univers Afriya.

0 CFA / toujours

✓ Accès à la bibliothèque publique

✓ Assistant IA de base

✓ Quiz et événements publics

✓ Interface PC et mobile

POPULAIRE

Premium

Une expérience enrichie pour explorer davantage Afriya.

100 CFA / mois

✦ Contenus Premium

✦ Expériences 3D avancées

✦ Outils IA supplémentaires

✦ Contenus exclusifs

✦ Expérience personnalisable

Premium Plus

Pour une utilisation avancée des outils Afriya.

200 CFA / 2 mois

✦ Tous les avantages Premium

✦ Expériences avancées

✦ Fonctionnalités supplémentaires

✦ Priorité sur certaines nouveautés

🏛️

Musée numérique

Découvrez les espaces interactifs de la bibliothèque.

🤖

IA avancée

Des outils supplémentaires pour apprendre et explorer.

🎬

Contenus exclusifs

Accédez à certaines collections réservées aux membres Premium.

🎨

Personnalisation

Adaptez davantage votre expérience Afriya.

/* ========================================================= AFRIYA PREMIUM ========================================================= */ const premiumModal = document.getElementById( "premiumModal" ); const premiumModalText = document.getElementById( "premiumModalText" ); const premiumModalClose = document.getElementById( "premiumModalClose" ); /* * Ouvrir Premium */ document .querySelectorAll( ".premium-subscribe" ) .forEach(button => { button.addEventListener( "click", () => { const plan = button.dataset.plan || "Premium"; premiumModalText.textContent = `Vous avez sélectionné la formule ${plan}. Le système de paiement sera connecté au backend sécurisé d'Afriya.`; premiumModal.classList.add( "open" ); } ); }); /* * Fermer */ premiumModalClose?.addEventListener( "click", () => { premiumModal.classList.remove( "open" ); } ); /* * Fermer en cliquant * en dehors de la fenêtre */ premiumModal?.addEventListener( "click", event => { if ( event.target === premiumModal ) { premiumModal.classList.remove( "open" ); } } ); /* * État Premium local de démonstration. * * Le véritable statut sera vérifié * par le serveur dans la partie backend. */ function setDemoPremiumState( active ) { localStorage.setItem( "afriyaPremium", active ? "active" : "inactive" ); } function isPremiumDemo() { return ( localStorage.getItem( "afriyaPremium" ) === "active" ); }/* ========================================================= AFRIYA — MAP HISTORIQUE ========================================================= */ .map-section { position: relative; min-height: 900px; padding: 110px 5vw; overflow: hidden; background: radial-gradient( circle at 50% 20%, rgba(212,175,55,.12), transparent 38% ), #050705; } /* ========================================================= HEADER ========================================================= */ .map-header { position: relative; z-index: 5; max-width: 800px; margin-bottom: 30px; } .map-header h2 { margin-top: 8px; font-size: clamp(38px, 5vw, 68px); background: linear-gradient( 120deg, #fff0a5, var(--afriya-gold), #835b18 ); -webkit-background-clip: text; background-clip: text; color: transparent; } .map-header p { margin-top: 12px; color: var(--afriya-muted); line-height: 1.8; } /* ========================================================= CONTENEUR ========================================================= */ .map-interface { position: relative; min-height: 650px; display: grid; grid-template-columns: 250px minmax(0, 1fr) 300px; gap: 15px; } /* ========================================================= PANNEAUX ========================================================= */ .map-panel { position: relative; z-index: 10; padding: 20px; border: 1px solid rgba(212,175,55,.15); border-radius: 22px; background: rgba(5,8,6,.88); backdrop-filter: blur(18px); box-shadow: 0 25px 70px rgba(0,0,0,.3); } .map-panel h3 { margin-bottom: 18px; color: var(--afriya-gold-light); } /* ========================================================= RECHERCHE ========================================================= */ .map-search { width: 100%; padding: 12px; border: 1px solid rgba(212,175,55,.14); border-radius: 10px; outline: none; background: rgba(255,255,255,.035); color: white; font: inherit; } .map-search:focus { border-color: rgba(212,175,55,.5); } /* ========================================================= PÉRIODES ========================================================= */ .period-list { display: grid; gap: 8px; margin-top: 15px; } .period-button { width: 100%; padding: 11px; text-align: left; border: 1px solid rgba(255,255,255,.06); border-radius: 10px; background: rgba(255,255,255,.025); color: #a89b89; cursor: pointer; transition: .25s ease; } .period-button:hover, .period-button.active { border-color: var(--afriya-gold); background: rgba(212,175,55,.1); color: var(--afriya-gold-light); } /* ========================================================= CARTE ========================================================= */ .map-stage { position: relative; min-height: 650px; overflow: hidden; border: 1px solid rgba(212,175,55,.2); border-radius: 28px; background: radial-gradient( ellipse at center, rgba(30,68,43,.8), rgba(5,11,7,.98) ); box-shadow: inset 0 0 100px rgba(0,0,0,.4), 0 35px 100px rgba(0,0,0,.4); } /* * Grille visuelle */ .map-stage::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient( rgba(212,175,55,.035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(212,175,55,.035) 1px, transparent 1px ); background-size: 45px 45px; pointer-events: none; } /* * Afrique stylisée */ .africa-shape { position: absolute; left: 50%; top: 50%; width: 340px; height: 470px; transform: translate(-50%, -50%) rotate(7deg); clip-path: polygon( 44% 0%, 61% 6%, 70% 16%, 82% 24%, 78% 38%, 86% 52%, 78% 64%, 69% 72%, 64% 87%, 55% 100%, 46% 87%, 35% 78%, 30% 64%, 19% 56%, 24% 44%, 16% 34%, 27% 25%, 34% 12% ); background: linear-gradient( 145deg, #1d5b38, #0d2d1b ); opacity: .9; filter: drop-shadow( 0 25px 30px rgba(0,0,0,.5) ); } /* ========================================================= MARQUEURS ========================================================= */ .map-marker { position: absolute; width: 18px; height: 18px; border: 2px solid #f6d66d; border-radius: 50%; background: #986a1b; box-shadow: 0 0 0 7px rgba(212,175,55,.1), 0 0 25px rgba(212,175,55,.4); cursor: pointer; transition: transform .25s ease; } .map-marker:hover { transform: scale(1.35); } .map-marker::after { content: attr(data-name); position: absolute; left: 50%; bottom: 27px; transform: translateX(-50%); white-space: nowrap; padding: 6px 9px; border-radius: 7px; background: rgba(0,0,0,.85); color: #e8dcc9; font-size: 9px; opacity: 0; pointer-events: none; transition: .2s; } .map-marker:hover::after { opacity: 1; } /* positions */ .marker-1 { left: 43%; top: 33%; } .marker-2 { left: 50%; top: 42%; } .marker-3 { left: 56%; top: 53%; } .marker-4 { left: 47%; top: 60%; } .marker-5 { left: 60%; top: 68%; } /* ========================================================= CONTRÔLES ========================================================= */ .map-controls { position: absolute; right: 15px; bottom: 15px; z-index: 20; display: flex; flex-direction: column; gap: 6px; } .map-control { width: 42px; height: 42px; border: 1px solid rgba(212,175,55,.2); border-radius: 10px; background: rgba(5,8,6,.85); color: var(--afriya-gold-light); cursor: pointer; backdrop-filter: blur(10px); } .map-control:hover { border-color: var(--afriya-gold); } /* ========================================================= INFORMATIONS ========================================================= */ .map-info { display: none; animation: mapInfoIn .25s ease; } .map-info.active { display: block; } @keyframes mapInfoIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } } .map-info-icon { font-size: 45px; margin-bottom: 12px; } .map-info h3 { margin-bottom: 7px; } .map-info-date { color: var(--afriya-gold); font-size: 11px; } .map-info p { margin-top: 12px; color: #9e9281; font-size: 12px; line-height: 1.7; } .map-info-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; } .map-info-tag { padding: 6px 8px; border-radius: 7px; background: rgba(255,255,255,.04); color: #a99d8d; font-size: 9px; } /* ========================================================= LÉGENDE ========================================================= */ .map-legend { display: grid; gap: 9px; margin-top: 25px; } .legend-item { display: flex; align-items: center; gap: 8px; color: #958a7a; font-size: 10px; } .legend-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--afriya-gold); } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1150px) { .map-interface { grid-template-columns: 210px minmax(0, 1fr); } .map-panel.right-panel { grid-column: 1 / -1; } } @media (max-width: 750px) { .map-section { padding: 75px 20px; } .map-interface { grid-template-columns: 1fr; } .map-stage { min-height: 580px; } .africa-shape { width: 250px; height: 360px; } }

AFRIYA HISTORICAL MAP

Explore l'histoire

Parcours les périodes historiques et découvre différents lieux, peuples et événements africains.

/* ========================================================= CARTE HISTORIQUE AFRIYA ========================================================= */ const mapMarkers = document.querySelectorAll( ".map-marker" ); const mapInfo = document.getElementById( "mapInfo" ); const mapInfoDefault = document.getElementById( "mapInfoDefault" ); const mapInfoTitle = document.getElementById( "mapInfoTitle" ); const mapInfoDate = document.getElementById( "mapInfoDate" ); const mapInfoDescription = document.getElementById( "mapInfoDescription" ); const mapInfoIcon = document.getElementById( "mapInfoIcon" ); const mapInfoTags = document.getElementById( "mapInfoTags" ); /* ========================================================= DONNÉES DE DÉMONSTRATION ========================================================= */ const historicalPlaces = { 1: { title: "Centre historique", date: "Antiquité", icon: "🏺", description: "Exemple de fiche historique. Cette zone pourra être reliée à une base de données contenant des informations vérifiées.", tags: [ "Antiquité", "Culture", "Patrimoine" ] }, 2: { title: "Ancienne cité", date: "Moyen Âge", icon: "🏰", description: "Une future fiche pourra présenter les personnages, événements, documents et sources associés à ce lieu.", tags: [ "Architecture", "Histoire", "Afrique" ] }, 3: { title: "Route historique", date: "Époque moderne", icon: "🧭", description: "Cette zone est prévue pour accueillir une expérience historique interactive.", tags: [ "Commerce", "Voyage", "Histoire" ] }, 4: { title: "Site culturel", date: "Époque contemporaine", icon: "🎭", description: "Un espace destiné à présenter le patrimoine culturel et les ressources documentaires.", tags: [ "Culture", "Arts", "Patrimoine" ] }, 5: { title: "Lieu de mémoire", date: "Époque contemporaine", icon: "📜", description: "Une future base documentaire permettra de consulter les sources associées.", tags: [ "Mémoire", "Archives", "Documents" ] } }; /* ========================================================= AFFICHER UN LIEU ========================================================= */ function showHistoricalPlace( id ) { const place = historicalPlaces[id]; if (!place) return; mapInfoDefault.classList.remove( "active" ); mapInfo.classList.add( "active" ); mapInfoIcon.textContent = place.icon; mapInfoTitle.textContent = place.title; mapInfoDate.textContent = place.date; mapInfoDescription.textContent = place.description; mapInfoTags.innerHTML = ""; place.tags.forEach(tag => { const element = document.createElement( "span" ); element.className = "map-info-tag"; element.textContent = tag; mapInfoTags.appendChild( element ); }); } /* ========================================================= CLIC SUR MARQUEURS ========================================================= */ mapMarkers.forEach(marker => { marker.addEventListener( "click", () => { showHistoricalPlace( marker.dataset.id ); } ); }); /* ========================================================= FILTRES DE PÉRIODE ========================================================= */ const periodButtons = document.querySelectorAll( ".period-button" ); periodButtons.forEach(button => { button.addEventListener( "click", () => { periodButtons.forEach( item => item.classList.remove( "active" ) ); button.classList.add( "active" ); const period = button.dataset.period; mapMarkers.forEach( marker => { /* * Dans la version finale, * chaque marqueur aura sa * propre période provenant * du backend. */ if ( period === "all" ) { marker.style.display = ""; } else { marker.style.display = ""; } } ); } ); }); /* ========================================================= RECHERCHE ========================================================= */ const mapSearch = document.getElementById( "mapSearch" ); mapSearch?.addEventListener( "input", () => { const search = mapSearch.value .trim() .toLowerCase(); mapMarkers.forEach( marker => { const name = marker.dataset.name .toLowerCase(); marker.style.display = !search || name.includes(search) ? "" : "none"; } ); } ); /* ========================================================= ZOOM ========================================================= */ const africaShape = document.querySelector( ".africa-shape" ); let mapScale = 1; function updateMapZoom() { africaShape.style.transform = `translate(-50%, -50%) rotate(7deg) scale(${mapScale})`; } document .getElementById("mapZoomIn") ?.addEventListener( "click", () => { mapScale = Math.min( mapScale + .15, 2 ); updateMapZoom(); } ); document .getElementById("mapZoomOut") ?.addEventListener( "click", () => { mapScale = Math.max( mapScale - .15, .7 ); updateMapZoom(); } ); document .getElementById("mapReset") ?.addEventListener( "click", () => { mapScale = 1; updateMapZoom(); mapSearch.value = ""; mapMarkers.forEach( marker => { marker.style.display = ""; } ); } );

Découvrez l'Afrique autrement.

Bibliothèque

Livres historiques

Les pays d'Afrique

Figures historiques

Patrimoine africain

Explorez le patrimoine en 3D.

Événements & concours

Concours Afriya

Événements

Récompenses

Explorer les collections

Histoire des royaumes africains

Cultures et traditions

Grandes figures africaines

Patrimoine africain

Aucun résultat

Carte historique interactive

Musée numérique africain

Expérience Afriya VR

Événements & concours

Défi Afriya

Semaine du savoir

Festival Afriya

🏆 Classement du concours

IA Afriya

Mon espace Afriya

🎨 Préférences

📊 Mon activité

🔐 Sécurité du compte

Afriya

Premium

Premium Plus

✦ Afriya Premium

Explore l'histoire