@startuml c4-context
' C4 modèle — Niveau 1 : Contexte système (syntaxe native PlantUML, compatible anciennes versions)
' Application web Flashcards (SPA/PWA)

hide stereotype
skinparam backgroundColor #FFFFFF

' ===== Styles par type =====
skinparam rectangle<<person>> {
    BackgroundColor #08427B
    BorderColor #073B6F
    FontColor #FFFFFF
}

skinparam rectangle<<external_person>> {
    BackgroundColor #686868
    BorderColor #8A8A8A
    FontColor #FFFFFF
}

skinparam rectangle<<system>> {
    BackgroundColor #1168BD
    BorderColor #3C7FC0
    FontColor #FFFFFF
}

skinparam rectangle<<external_system>> {
    BackgroundColor #999999
    BorderColor #8A8A8A
    FontColor #FFFFFF
}

skinparam arrow {
    Color #707070
}

title Contexte système — Flashcards (Niveau 1)

' ===== Personnes =====
rectangle "Utilisateur\nJoueur et contributeur de cartes\n(CRUD) : code, dev, culture tech" <<person>> as User

' ===== Système à modéliser =====
rectangle "App Flashcards\nSPA/PWA Next.js — tirage de cartes au\nhasard, tirage par thème, CRUD des cartes.\nDouble persistance simultanée\nMySQL + MongoDB via couche générique." <<system>> as Flashcards

' ===== Systèmes externes =====
rectangle "MySQL\nBase relationnelle\n(conteneur Docker)" <<external_system>> as MySql
rectangle "MongoDB\nBase documentaire\n(conteneur Docker)" <<external_system>> as Mongo
'rectangle "Docker / docker-compose\nOrchestration des conteneurs\n(web, bases) + volumes persistants" <<external_system>> as Docker

User -[#707070]-> Flashcards : Joue, crée, modifie, supprime,\nconsulte et révèle des cartes
Flashcards -[#707070]-> MySql : Lit / écrit (CardRepository)
Flashcards -[#707070]-> Mongo : Lit / écrit (CardRepository)
'Docker -[#707070]-> MySql : Démarre et gère
'Docker -[#707070]-> Mongo : Démarre et gère
@enduml