[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","68e0115246fc8191b36b7b2ca7db7aba","versionInt","title","Jeu Droit UE 🇪🇺","type","code/react","content","import React, { useEffect, useMemo, useRef, useState } from \"react\";\n\nconst INSTITUTIONS = [\n { id: \"ceca\", title: \"CECA (Communauté européenne du charbon et de l'acier)\", desc: \"Traité de Paris (1951) — première communauté européenne organisant la mise en commun de la production de charbon et d'acier.\" },\n { id: \"cee\", title: \"CEE (Communauté économique européenne)\", desc: \"Traité de Rome (1957) — instaure un marché commun et des politiques communes entre États membres.\" },\n { id: \"euratom\", title: \"Euratom\", desc: \"Communauté européenne de l'énergie atomique — coopération en matière d'énergie nucléaire pacifique.\" },\n { id: \"ce\", title: \"Conseil (du Conseil)\", desc: \"Organe représentant les gouvernements des États membres, adopte la législation avec le Parlement selon la procédure législative ordinaire.\" },\n { id: \"ue\", title: \"Union européenne (UE)\", desc: \"Organisation politico-juridique fondée sur les traités, dotée de compétences partagées et d'institutions communes.\" },\n { id: \"cedh\", title: \"Cour européenne des droits de l'homme (CEDH)\", desc: \"Instance du Conseil de l'Europe chargée de veiller au respect de la Convention européenne des droits de l'homme.\" },\n { id: \"parlement\", title: \"Parlement européen\", desc: \"Représente les citoyens de l'Union, exerce le pouvoir législatif conjointement avec le Conseil.\" },\n { id: \"conseil_europeen\", title: \"Conseil européen\", desc: \"Réunit les chefs d'État ou de gouvernement et définit les grandes orientations politiques de l'Union.\" },\n { id: \"conseil_de_leurope\", title: \"Conseil de l'Europe\", desc: \"Organisation paneuropéenne distincte de l'UE, promotrice de la démocratie, des droits de l'homme et de l'état de droit.\" },\n { id: \"commission\", title: \"Commission européenne\", desc: \"Organe exécutif et initiateur des actes législatifs, garant de l'application des traités.\" },\n { id: \"cjue\", title: \"Cour de justice de l'Union européenne (CJUE)\", desc: \"Interprète le droit de l'Union et veille à son application uniforme par les États membres.\" },\n { id: \"bce\", title: \"Banque centrale européenne (BCE)\", desc: \"Définit et met en œuvre la politique monétaire de la zone euro pour préserver la stabilité des prix.\" },\n { id: \"cour_des_comptes\", title: \"Cour des comptes européenne\", desc: \"Contrôle la régularité et l'efficacité de la gestion financière de l'Union.\" }\n];\n\n// ARTICLES — formulations claires, complètes et accessibles\nconst ARTICLES = [\n { id: \"art2_tue\", title: \"Art.2 TUE\", text: \"Énonce les valeurs de l'Union : dignité humaine, liberté, démocratie, égalité, État de droit et respect des droits de l'homme ; ces valeurs fondent l'action de l'Union et déterminent la qualité d'État membre (si un État les viole, l'UE peut engager une procédure politique).\", code: \"TUE\" },\n { id: \"art3_tue\", title: \"Art.3 TUE\", text: \"Définit les objectifs de l'Union : promotion de la paix, respect des valeurs de l'Union, bien-être des peuples, construction et fonctionnement du marché intérieur, action extérieure cohérente et développement durable.\", code: \"TUE\" },\n { id: \"art5_tue\", title: \"Art.5 TUE\", text: \"Énonce les principes de subsidiarité (l'UE n'intervient que si l'action nationale est insuffisante) et de proportionnalité (les mesures doivent être appropriées et ne pas aller au-delà de ce qui est nécessaire).\", code: \"TUE\" },\n { id: \"art6_tue\", title: \"Art.6 TUE\", text: \"Reconnaît la Charte des droits fondamentaux et la CEDH comme références : la Charte a valeur juridique et l'Union s'engage à respecter ces droits ; l'article prévoit aussi l'adhésion future de l'UE à la CEDH (mise en œuvre requérant garanties juridiques).\", code: \"TUE\" },\n { id: \"art13_19_tue\", title: \"Art.13–19 TUE\", text: \"Désignent les institutions principales de l'Union (Conseil européen, Conseil, Commission, Parlement, Cour de justice, Banque centrale) et répartissent leurs fonctions essentielles.\", code: \"TUE\" },\n { id: \"art19_tue\", title: \"Art.19 TUE\", text: \"Garantit l'accès à un tribunal effectif : les États doivent fournir des procédures judiciaires permettant l'application et la protection du droit de l'Union, et la CJUE assure l'interprétation uniforme.\", code: \"TUE\" },\n { id: \"art48_tue\", title: \"Art.48 TUE\", text: \"Organise les procédures de révision des traités : procédure générale (convocation d'une convention puis conférence intergouvernementale et ratification) et procédures simplifiées encadrées (passerelles limitées).\", code: \"TUE\" },\n { id: \"art49_tue\", title: \"Art.49 TUE\", text: \"Fixe la procédure d'adhésion : un État européen peut demander à devenir membre, sa candidature est évaluée et la décision prise selon les règles du traité.\", code: \"TUE\" },\n { id: \"art50_tue\", title: \"Art.50 TUE\", text: \"Pose la procédure de retrait volontaire d'un État membre : notification, négociation d'un accord de retrait puis entrée en vigueur après ratification, illustré par le Brexit.\", code: \"TUE\" },\n { id: \"art7_tue\", title: \"Art.7 TUE\", text: \"Permet une procédure politique pour sanctionner un État qui viole gravement et durablement les valeurs de l'Union ; issue possible : suspension de certains droits (ex. vote au Conseil).\", code: \"TUE\" },\n { id: \"art51_charte\", title: \"Art.51 Charte\", text: \"Délimite le champ d'application de la Charte : elle s'impose aux institutions de l'UE et aux États membres seulement lorsqu'ils mettent en œuvre le droit de l'Union (donc pas pour des mesures purement internes).\", code: \"Charte\" },\n { id: \"art53_charte\", title: \"Art.53 Charte\", text: \"Garantit que le niveau de protection le plus élevé des droits s'applique : si une règle nationale est plus protectrice, elle peut rester applicable dans le respect de l'ordre juridique de l'UE.\", code: \"Charte\" },\n { id: \"art41_tue\", title: \"Art.41 TUE\", text: \"Consacre le droit à une bonne administration : droit d'accès aux documents, droit d'être entendu et droit à réparation pour préjudice causé par l'administration de l'Union.\", code: \"TUE\" },\n { id: \"art55_const\", title: \"Art.55 Constitution FR\", text: \"Les traités régulièrement ratifiés ont, dès leur publication, une autorité supérieure aux lois nationales, sous réserve des dispositions constitutionnelles (principe de supériorité des traités sur les lois).\", code: \"Const. FR\" },\n { id: \"art88_1_const\", title: \"Art.88-1 Constitution FR\", text: \"Affirme la participation de la République française à l'Union européenne et organise les transferts de compétences conformément à la Constitution et aux traités.\", code: \"Const. FR\" },\n { id: \"art4_tfue\", title: \"Art.4 TFUE\", text: \"Énonce la répartition des compétences entre l'Union et les États (compétences exclusives, partagées, d'appui) et impose le respect des identités nationales et des compétences réservées aux États.\", code: \"TFUE\" },\n { id: \"art263_tfue\", title: \"Art.263 TFUE\", text: \"Permet le recours en annulation devant la CJUE contre un acte de l'Union jugé illégal (excès de pouvoir, violation de procédure) : c'est le principal contrôle de légalité des actes européens.\", code: \"TFUE\" },\n { id: \"art248_tfue\", title: \"Art.248 TFUE\", text: \"Précise les mesures pratiques de contrôle et les sanctions financières liées à certaines obligations d'exécution des politiques de l'Union (aspects techniques d'application).\", code: \"TFUE\" },\n { id: \"art258_260_tfue\", title: \"Art.258–260 TFUE\", text: \"Procédure de manquement : la Commission peut constater qu'un État ne respecte pas ses obligations, saisir la CJUE qui peut ensuite prononcer une condamnation et des sanctions.\", code: \"TFUE\" },\n { id: \"art267_tfue\", title: \"Art.267 TFUE\", text: \"Renvoi préjudiciel : permet aux juridictions nationales de poser des questions à la CJUE pour interpréter le droit de l'Union ou vérifier la validité d'un acte, assurant l'uniformité d'application.\", code: \"TFUE\" },\n { id: \"art216_tfue\", title: \"Art.216 TFUE\", text: \"Règle la conclusion d'accords internationaux par l'Union : ces accords engagent l'Union et, en cas de conflit, le droit primaire de l'Union prévaut.\", code: \"TFUE\" },\n { id: \"art218_11_tfue\", title: \"Art.218(11) TFUE\", text: \"Prévoit l'information/consultation des parlements nationaux et la possibilité pour la CJUE d'être saisie d'un avis lors de la conclusion d'accords internationaux importants.\", code: \"TFUE\" },\n { id: \"art281_tfue\", title: \"Art.281 TFUE\", text: \"Référence procédurale : encadre les pouvoirs de révision concernant le protocole relatif à la Cour de justice (limitation des modifications possibles de l'organisation judiciaire de l'UE).\", code: \"TFUE\" }\n];\n\nconst PROCEDURE_ART48_TFUE = [\n { subtitle: \"Procédure ART 48 TFUE — Générale (articles 48 §§2 à 5)\", style: { color: \"gray\", fontSize: 15 } },\n { id: \"general_declenchement\", title: \"Déclenchement\", desc: \"Article 48 §2 TUE — Tout État membre, le Parlement européen ou la Commission peut proposer une révision des traités. Le Conseil européen peut décider d’ouvrir la procédure, menant à la convocation d’une convention composée de représentants nationaux et européens (§3).\" },\n { id: \"general_conf_inter\", title: \"Conférence intergouvernementale\", desc: \"Article 48 §4 TUE — Si la convention parvient à un accord, le Conseil européen convoque une conférence intergouvernementale chargée d’adopter d’un commun accord les modifications proposées, avant ratification par tous les États membres.\" },\n { id: \"general_ratification\", title: \"Ratification\", desc: \"Article 48 §5 TUE — La révision entre en vigueur après ratification par tous les États membres, selon leurs règles constitutionnelles respectives (parlement ou référendum).\" },\n { subtitle: \"Procédure ART 48 TFUE — Simplifiée (articles 48 §§6 à 8)\", style: { color: \"gray\", fontSize: 15 } },\n { id: \"simpl_clause_passerelle\", title: \"Clause passerelle\", desc: \"Article 48 §6 TUE — Permet d’ajuster certaines dispositions du TFUE sans procédure complète. Le Conseil européen peut, à l’unanimité et avec l’approbation des parlements nationaux, autoriser un passage de l’unanimité à la majorité qualifiée ou du domaine intergouvernemental au communautaire.\" },\n { id: \"simpl_politique_etrangere\", title: \"Politique étrangère\", desc: \"Article 48 §7 TUE — Autorise, dans certains domaines de la politique étrangère et de sécurité commune, le passage à la majorité qualifiée sous réserve de non-opposition des parlements nationaux dans un délai donné.\" },\n { id: \"simpl_limitations\", title: \"Limites et garanties\", desc: \"Article 48 §8 TUE — Ces procédures simplifiées ne peuvent étendre les compétences attribuées à l’Union. Elles assurent la préservation de la souveraineté des États membres et de l’équilibre institutionnel.\" }\n];\n\nconst CHARTER = [\n { range: \"1–5\", theme: \"Dignité\" },\n { range: \"6–19\", theme: \"Libertés\" },\n { range: \"20–26\", theme: \"Égalité\" },\n { range: \"27–38\", theme: \"Solidarité\" },\n { range: \"39–46\", theme: \"Citoyenneté\" },\n { range: \"47–50\", theme: \"Justice\" },\n { range: \"50–54\", theme: \"Mécanismes de protection des droits fondamentaux\" }\n];\n\n// PRINCIPES — formulations simples et explicatives\nconst PRINCIPES = [\n { id: \"droit_primaire\", title: \"Droit primaire\", desc: \"Les traités fondateurs (TUE, TFUE) constituent la norme suprême de l'Union ; toutes les autres normes doivent y être conformes.\" },\n { id: \"primauté\", title: \"Primauté\", desc: \"Le droit de l'Union prime sur le droit national : en cas de conflit, les juridictions nationales doivent appliquer le droit européen.\" },\n { id: \"effet_direct\", title: \"Effet direct\", desc: \"Certaines dispositions de l'UE confèrent des droits aux particuliers qui peuvent être invoqués directement devant les juridictions nationales (ex. Van Gend en Loos).\" },\n { id: \"subsidiarite\", title: \"Subsidiarité\", desc: \"Principe selon lequel l'UE n'intervient que si l'action au niveau national est insuffisante pour atteindre les objectifs visés (évite le surcroît d'intervention).\" },\n { id: \"proportionnalite\", title: \"Proportionnalité\", desc: \"Les mesures prises par l'UE doivent être adaptées, nécessaires et ne pas excéder ce qui est nécessaire pour atteindre l'objectif poursuivi.\" },\n { id: \"confiance_mutuelle\", title: \"Confiance mutuelle\", desc: \"Principe de coopération et reconnaissance réciproque entre systèmes juridiques nationaux, fondamental en droit pénal et civil européen (ex. mandat d'arrêt européen).\" },\n { id: \"autonomie_droit_ue\", title: \"Autonomie du droit de l'UE\", desc: \"L'ordre juridique de l'Union est autonome : la CJUE protège son intégrité et son application uniforme face aux ordres juridiques nationaux.\" },\n { id: \"competences\", title: \"Principe d'attribution des compétences\", desc: \"L'UE n'agit que dans les domaines où les traités lui attribuent des compétences ; tout ce qui n'est pas attribué reste de la compétence des États.\" },\n { id: \"rev_traites\", title: \"Révision des traités (procédure)\", desc: \"Quatre étapes classiques : proposition/déclenchement, convention (si convoquée), conférence intergouvernementale, ratification par les États selon leurs règles constitutionnelles.\" },\n { id: \"protection_fondamentaux\", title: \"Protection des droits fondamentaux\", desc: \"Les droits fondamentaux de l'UE proviennent des traditions constitutionnelles communes, de la CEDH et d'autres conventions internationales, et sont appliqués par la CJUE et la Charte.\" },\n { id: \"controle_juridictionnel\", title: \"Contrôle juridictionnel\", desc: \"La CJUE assure le contrôle de légalité des actes de l'Union (art. 263 TFUE), le respect des traités (procédure de manquement) et l'interprétation uniforme (art. 267 TFUE).\" },\n { id: \"recours_reparations\", title: \"Responsabilité et recours\", desc: \"Les particuliers peuvent obtenir réparation contre l'Union pour les dommages causés par ses institutions (recours en responsabilité) et demander l'annulation d'actes illégaux.\" }\n];\n\n// JURISPRUDENCES (classées par année quand connue)\nconst JURISPRUDENCES = [\n { id: \"van_gend\", title: \"Van Gend en Loos\", year: 1963, summary: \"Effet direct : certaines règles de l'UE créent des droits individuels invocables devant les juridictions nationales.\" },\n { id: \"costa\", title: \"Costa c/ ENEL\", year: 1964, summary: \"Primauté du droit de l'Union : en cas de conflit, le droit européen prime sur le droit national.\" },\n { id: \"handelsgesellschaft\", title: \"Internationale Handelsgesellschaft\", year: 1970, summary: \"Les droits fondamentaux font partie des principes généraux du droit communautaire et doivent être protégés même face aux actes communautaires.\" },\n { id: \"nold\", title: \"Nold\", year: 1974, summary: \"Les droits fondamentaux de l'Union s'inspirent des traditions constitutionnelles communes et des instruments internationaux (ex. CEDH).\" },\n { id: \"rutili\", title: \"Rutili\", year: 1975, summary: \"Référence à la CEDH et renforcement de la protection des libertés en période de restrictions (contexte d'état d'urgence national).\" },\n { id: \"defrenne\", title: \"Defrenne II\", year: 1976, summary: \"Égalité salariale hommes/femmes : la norme communautaire a effet direct et peut être invoquée entre particuliers.\" },\n { id: \"les_verts\", title: \"Les Verts\", year: 1986, summary: \"Renforcement du contrôle juridictionnel : possibilité d'attaquer les actes des institutions européennes pour excès de pouvoir.\" },\n { id: \"ert\", title: \"ERT\", year: 1991, summary: \"La Charte (et plus largement le droit de l'UE) ne s'applique aux États que lorsqu'ils mettent en œuvre le droit de l'Union (art.51 Charte).\" },\n { id: \"avis_2_94\", title: \"Avis CJUE 2/94\", year: 1996, summary: \"Avis négatif : à l'époque la CJUE estime que l'UE n'a pas (encore) la compétence d'adhérer à la CEDH sans garanties spécifiques.\" },\n { id: \"goodwin_cedh\", title: \"Goodwin (CEDH)\", year: 2002, summary: \"La CEDH reconnaît le droit au mariage pour les personnes transgenres (protection de la vie privée et vie familiale).\" },\n { id: \"lc_en_law\", title: \"LCEN (loi), 10 juin 2004\", year: 2004, summary: \"Loi pour la confiance dans l'économie numérique : cadre national protégeant la liberté de communication et les données en ligne (référence utile aux litiges internet).\" },\n { id: \"parliament_vs_council\", title: \"Parlement c. Conseil\", year: 2006, summary: \"27 juin 2006 : le Parlement peut contester des actes du Conseil pour protéger l'équilibre institutionnel (recours en annulation possible).\" },\n { id: \"kadi\", title: \"Kadi / Al Barakaat\", year: 2008, summary: \"La CJUE contrôle la conformité des mesures européennes (même fondées sur résolutions internationales) avec les droits fondamentaux.\" },\n { id: \"michaniki\", title: \"Michaniki\", year: 2008, summary: \"Marchés publics — importance de la transparence et compatibilité entre particularités nationales et droit européen.\" },\n { id: \"schecke_eifert\", title: \"Schecke & Eifert\", year: 2010, summary: \"Première application directe de la Charte par la CJUE pour contrôler la proportionnalité et la protection des données/vie privée.\" },\n { id: \"sayn_wittgenstein\", title: \"Sayn-Wittgenstein\", year: 2010, summary: \"L'État peut invoquer son identité constitutionnelle sous conditions et dans les limites du droit de l'UE.\" },\n { id: \"pringle\", title: \"Pringle\", year: 2012, summary: \"Valide le Mécanisme européen de stabilité et admet que la CJUE peut contrôler le respect des procédures de révision (art.48 §6 TUE).\" },\n { id: \"melloni\", title: \"Melloni\", year: 2013, summary: \"Rappelle la primauté du droit de l'UE ; une Constitution nationale ne peut empêcher l'application des normes européennes protectrices.\" },\n { id: \"melki_abdeli\", title: \"Melki & Abdeli\", year: 2013, summary: \"Admet la compatibilité entre la QPC française et le renvoi préjudiciel si l'accès effectif au juge est préservé.\" },\n { id: \"western_sahara\", title: \"Western Sahara Campaign\", year: 2018, summary: \"Accords UE-Maroc invalidés pour la partie concernant le Sahara occidental — respect du droit international et autodétermination.\" },\n { id: \"cjue_independence_2018\", title: \"CJUE – indépendance des juges\", year: 2018, summary: \"La CJUE insiste sur l'indépendance de la justice nationale comme condition de l'effectivité du droit de l'Union.\" },\n { id: \"quadrature_privacyint\", title: \"La Quadrature du Net / Privacy International\", year: 2020, summary: \"La conservation massive de données doit être nécessaire, proportionnée et encadrée par des garanties effectives (art.7–8 Charte).\" },\n { id: \"bk\", title: \"BK\", year: 2021, summary: \"Renforcement du droit à un recours effectif et de la protection des données face aux mesures de surveillance.\" },\n { id: \"qpc_2021\", title: \"Déc. n°2021-940 QPC (FR)\", year: 2021, summary: \"Le Conseil constitutionnel aligne sa position sur la CJUE et sanctionne certaines pratiques de conservation de données jugées disproportionnées.\" }\n];\n\nconst TEXTES = [\n { id: \"traite_paris_1951\", title: \"Traité de Paris (1951)\", desc: \"Création de la CECA.\" },\n { id: \"traite_rome_1957\", title: \"Traité de Rome (1957)\", desc: \"Création de la CEE et Euratom.\" },\n { id: \"maastricht\", title: \"Traité de Maastricht (1992)\", desc: \"Création de l'Union européenne et introduction de la citoyenneté européenne.\" },\n { id: \"amsterdam\", title: \"Traité d'Amsterdam (1997)\", desc: \"Renforce les politiques de droits fondamentaux et la coopération en matière de justice et d'affaires intérieures.\" },\n { id: \"nice\", title: \"Traité de Nice (2001)\", desc: \"Réforme institutionnelle pour préparer l'élargissement de l'Union.\" },\n { id: \"lisbonne\", title: \"Traité de Lisbonne (2007)\", desc: \"Modernisation des traités et renforcement du rôle du Parlement européen et de la Charte des droits fondamentaux.\" }\n];\n\nconst XP_KEYS = { TOTAL: \"eu_edu_xp_total\", LOG: \"eu_edu_xp_log\" };\nfunction loadXP() { const raw = localStorage.getItem(XP_KEYS.TOTAL); return raw ? parseInt(raw, 10) : 0; }\nfunction saveXP(xp) { localStorage.setItem(XP_KEYS.TOTAL, String(xp)); }\nfunction addXP(amount) { const now = Date.now(); const logRaw = localStorage.getItem(XP_KEYS.LOG) || \"[]\"; const log = JSON.parse(logRaw); log.push({ amount, at: now }); localStorage.setItem(XP_KEYS.LOG, JSON.stringify(log)); const current = loadXP(); const next = current + amount; saveXP(next); return next; }\nfunction levelFromXP(xp) { if (xp < 100) return 1; if (xp < 250) return 2; if (xp < 500) return 3; if (xp < 900) return 4; return Math.floor(xp / 500) + 1; }\nfunction xpForNextLevel(xp) { const lvl = levelFromXP(xp); const threshold = lvl === 1 ? 100 : lvl === 2 ? 250 : lvl === 3 ? 500 : lvl === 4 ? 900 : lvl * 500; return threshold - xp; }\n\nconst BADGE_NAMES = [\n \"Pionnier Schuman\", \"Citoyen Européen\", \"Défenseur des Libertés\", \"Gardien des Traités\", \"Expert Subsidiarité\",\n \"Sentinelle des Droits\", \"Ambassadeur UE\", \"Historien Européen\", \"Analyste Juridique\", \"Architecte des Politiques\",\n \"Champion de l'Intégration\", \"Protecteur des Ressources\", \"Éclaireur du Droit\", \"Stratège Parlementaire\", \"Maître de la Compétence\",\n \"Explorateur Erasmus\", \"Gardien du Marché Unique\", \"Pilier de la Solidarité\", \"Veilleur de la Sécurité\", \"Soutien à la Citoyenneté\",\n \"Observateur des Protocoles\", \"Spécialiste des Accords\", \"Bâtisseur d'Harmonisation\", \"Chroniqueur Jurisprudence\", \"Voix du Peuple\",\n \"Coordinateur des Politiques\", \"Ambassadeur de la Paix\", \"Érudit du TFUE\", \"Conservateur des Traités\", \"Héraut de l'État de droit\",\n \"Navigateur Erasmus\", \"Architecte Budgétaire\", \"Penseur Social\", \"Sentinelle des Libertés Économiques\", \"Porte-parole du Parlement\",\n \"Catalyseur d'Élargissement\", \"Voix des États\", \"Réformateur Institutionnel\", \"Gardien des Finances\", \"Médiateur Européen\",\n \"Historien des Traités\", \"Défenseur de la Charte\", \"Observateur du Conseil\", \"Spécialiste CEDH\", \"Connaisseur des Protocoles\",\n \"Stratège du Droit\", \"Pilier de la Justice\", \"Écho des Citoyens\", \"Ambassadeur du Commerce\", \"Gestionnaire de Crise\",\n \"Analyste du Marché Intérieur\", \"Expert en Politique Agricole\", \"Conservateur des Archives\", \"Agent de Conformité\", \"Pionnier de la Coopération\",\n \"Gardien de la Paix Sociale\", \"Orateur du Parlement\", \"Sentinelle des Normes\", \"Éclaireur Constitutionnel\", \"Maître de la Procédure\",\n \"Gardien de l'Environnement\", \"Catalyseur de Croissance\", \"Stratège Monétaire\", \"Voix des Minorités\", \"Spécialiste des Droits Sociaux\",\n \"Censeur des Sanctions\", \"Pilote de la Révision\", \"Meneur de Réformes\", \"Conservateur des Valeurs\", \"Ambassadeur Culturel\",\n \"Architecte des Institutions\", \"Observateur Européen\", \"Gardien de l'Égalité\", \"Spécialiste du Droit Fondamental\", \"Coordinateur des Accords\",\n \"Explorateur des Protocoles\", \"Sentinelle de la Transparence\", \"Voix des Étudiants\", \"Gardien de l'Harmonie\", \"Catalyseur des Politiques Publiques\",\n \"Ambassadeur de l'Union\", \"Stratège Législatif\", \"Spécialiste des Compétences\", \"Historien de la Construction Européenne\", \"Défenseur du Droit Commun\"\n];\nconst BADGES = Array.from({ length: 100 }, (_, i) => { const name = BADGE_NAMES[i % BADGE_NAMES.length] + (i >= BADGE_NAMES.length ? ` #${i+1}` : \"\"); const requirementValue = (i + 1) * 50; return { id: `badge_${i+1}`, label: name, requirementValue, requirement: (xp) => xp >= requirementValue }; });\n\nfunction BadgeDropdown({ xp }) {\n const [open, setOpen] = useState(false);\n const ref = useRef(null);\n useEffect(() => { function onDoc(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); } document.addEventListener(\"click\", onDoc); return () => document.removeEventListener(\"click\", onDoc); }, []);\n const unlockedCount = BADGES.filter((b) => b.requirement(xp)).length;\n return (\n

\n \n {open && (\n

\n {BADGES.map((b) => { const unlocked = b.requirement(xp); return (

{b.label}

ID: {b.id}

{unlocked ? '✅' : `${b.requirementValue} XP`}

); })}\n

\n )}\n

\n );\n}\n\nfunction randInt(max) { return Math.floor(Math.random() * max); }\nfunction pickRandom(arr) { return arr[Math.floor(Math.random() * arr.length)]; }\nfunction shuffle(array) { const a = array.slice(); for (let i = a.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [a[i], a[j]] = [a[j], a[i]]; } return a; }\n\nfunction generateQuestion() {\n const types = [\"article_match\", \"institution_role\", \"charte_theme\", \"juris_portee\", \"true_false_article\", \"procedure_article\"];\n const t = pickRandom(types);\n if (t === \"article_match\") {\n const article = pickRandom(ARTICLES);\n const correct = `${article.title} (${article.code || ''})`;\n const distractorsPool = ARTICLES.filter(a => a.id !== article.id).map(a => `${a.title} (${a.code || ''})`);\n const choices = shuffle([correct, ...shuffle(distractorsPool).slice(0, 3)]).slice(0, 4);\n const answerIndex = choices.indexOf(correct);\n return { id: `gen_art_${Date.now()}_${randInt(1e6)}`, prompt: `Quel article correspond à l'énoncé : \"${article.text}\" ?`, choices, answerIndex, xpIfCorrect: 15 };\n }\n if (t === \"institution_role\") {\n const inst = pickRandom(INSTITUTIONS);\n const correct = inst.title;\n const distractors = shuffle(INSTITUTIONS.filter(i => i.id !== inst.id).map(i => i.title)).slice(0, 3);\n const choices = shuffle([correct, ...distractors]);\n const answerIndex = choices.indexOf(correct);\n return { id: `gen_inst_${Date.now()}_${randInt(1e6)}`, prompt: `Quelle institution correspond à la description suivante : \"${inst.desc}\" ?`, choices, answerIndex, xpIfCorrect: 12 };\n }\n if (t === \"charte_theme\") {\n const entry = pickRandom(CHARTER);\n const correct = entry.theme;\n const distractors = shuffle(CHARTER.filter(c => c.range !== entry.range).map(c => c.theme)).slice(0, 3);\n const choices = shuffle([correct, ...distractors]);\n const answerIndex = choices.indexOf(correct);\n return { id: `gen_charte_${Date.now()}_${randInt(1e6)}`, prompt: `À quelle thématique correspond la plage d'articles ${entry.range} de la Charte ?`, choices, answerIndex, xpIfCorrect: 10 };\n }\n if (t === \"juris_portee\") {\n const js = pickRandom(JURISPRUDENCES);\n const correct = js.summary || \"Portée à connaître\";\n const distractors = shuffle(JURISPRUDENCES.filter(j => j.id !== js.id).map(j => j.summary || 'Autre portée')).slice(0, 3);\n const choices = shuffle([correct, ...distractors]);\n const answerIndex = choices.indexOf(correct);\n const prompt = `Que retient principalement l'arrêt \"${js.title}\" (${js.year || 's.d.'}) ?`;\n return { id: `gen_jp_${Date.now()}_${randInt(1e6)}`, prompt, choices, answerIndex, xpIfCorrect: 20 };\n }\n if (t === \"procedure_article\") {\n const proc = pickRandom(PROCEDURE_ART48_TFUE.filter(p => p.desc));\n const correct = proc.title;\n const distractors = shuffle(PROCEDURE_ART48_TFUE.filter(p => p.id !== proc.id && p.desc).map(p => p.title)).slice(0, 3);\n const choices = shuffle([correct, ...distractors]);\n const answerIndex = choices.indexOf(correct);\n const prompt = `Quelle description correspond à : \"${proc.title}\" ?`;\n return { id: `gen_proc_${Date.now()}_${randInt(1e6)}`, prompt, choices, answerIndex, xpIfCorrect: 10 };\n }\n const art = pickRandom(ARTICLES);\n const claimTrue = Math.random() > 0.5;\n const statement = claimTrue ? art.text : pickRandom(ARTICLES.filter(a => a.id !== art.id)).text;\n const prompt = `Vrai ou faux : l'énoncé suivant correspond au contenu de ${art.title} ? \"${statement}\"`;\n const choices = [\"Vrai\", \"Faux\"];\n const answerIndex = claimTrue ? 0 : 1;\n return { id: `gen_tf_${Date.now()}_${randInt(1e6)}`, prompt, choices, answerIndex, xpIfCorrect: 8 };\n}\n\nfunction generateBatch(n) { const arr = []; for (let i = 0; i < n; i++) arr.push(generateQuestion()); return arr; }\n\nfunction EnhancedQuiz({ onEarnXP }) {\n const queueRef = useRef(null);\n const [queue, setQueue] = useState(() => generateBatch(5));\n const [currentIndex, setCurrentIndex] = useState(0);\n const [feedback, setFeedback] = useState(null);\n const [endless, setEndless] = useState(true);\n const [choicesPerQuestion, setChoicesPerQuestion] = useState(4);\n const [sessionCount, setSessionCount] = useState(0);\n\n useEffect(() => { queueRef.current = queue.length; }, [queue]);\n\n function ensureMore() { if ((queueRef.current || 0) - currentIndex < 3) { setQueue((q) => q.concat(generateBatch(10))); } }\n\n useEffect(() => { ensureMore(); }, [currentIndex]);\n\n function current() { return queue[currentIndex % queue.length]; }\n function answer(i) { const q = current(); if (!q) return; const correct = i === q.answerIndex; if (correct) { onEarnXP(q.xpIfCorrect || 10); setFeedback({ ok: true, text: `Bonne réponse — +${q.xpIfCorrect || 10} XP` }); } else { setFeedback({ ok: false, text: `Mauvaise réponse — la bonne était : ${q.choices[q.answerIndex]}` }); } setTimeout(() => { setFeedback(null); setCurrentIndex((idx) => idx + 1); if (endless) setQueue((q) => q.concat([generateQuestion()])); }, 900); }\n function skip() { setCurrentIndex((i) => i + 1); if (endless) setQueue((q) => q.concat([generateQuestion()])); }\n function restartSession() { setQueue(generateBatch(10)); setCurrentIndex(0); setSessionCount((c) => c + 1); }\n const q = current(); if (!q) return

Génération en cours...

;\n return (\n

QCM — Mode {endless ? 'Infini' : 'Session'}

Session #{sessionCount}

{q.prompt}

{q.choices.slice(0, Math.max(2, choicesPerQuestion)).map((c, i) => ())}

\n {feedback && (

{feedback.text}

)}\n

Mode infini setEndless(e.target.checked)} className=\"ml-2\" />Choix/Q

XP possible pour cette question : {q.xpIfCorrect}

\n );\n}\n\nfunction XPBar({ xp }) { const lvl = levelFromXP(xp); const next = xpForNextLevel(xp); const percent = Math.min(100, Math.round(((xp % 500) / (lvl * 100 || 100)) * 100)); return (

{xp} XP — Niveau {lvl}

Prochain niveau : {next} XP restants

); }\n\nfunction GlossaryList({ data, onRead }) {\n return (\n

\n {data.map((item) => {\n if (item && item.subtitle && !item.title) {\n return (\n

\n {item.subtitle}\n

\n );\n }\n\n return (\n

\n {item.subtitle ?

{item.subtitle}

: null}\n

{item.title}

{item.desc || item.text || item.portee || item.year}

\n \n

\n );\n })}\n

\n );\n}\n\nfunction JurisTimeline2({ items, onRead }) { const sorted = useMemo(() => [...items].sort((a, b) => (a.year || 0) - (b.year || 0)), [items]); return (

{sorted.map((it) => (

{it.title} {it.year ? `(${it.year})` : \"\"}

{it.summary || it.facts || it.portee || \"(description non fournie)\"}

))}

); }\n\nfunction NotesCategories() { const [categories, setCategories] = useState(() => { const saved = localStorage.getItem(\"notes_categories\"); return saved ? JSON.parse(saved) : { \"Général\": \"\" }; }); const [active, setActive] = useState(Object.keys(categories)[0] || \"Général\"); const [newCat, setNewCat] = useState(\"\"); useEffect(() => { localStorage.setItem(\"notes_categories\", JSON.stringify(categories)); }, [categories]); function addCategory() { if (!newCat.trim() || categories[newCat]) return; setCategories({ ...categories, [newCat]: \"\" }); setActive(newCat); setNewCat(\"\"); } function deleteCategory(cat) { if (!confirm(`Supprimer la catégorie \"${cat}\" ?`)) return; const copy = { ...categories }; delete copy[cat]; setCategories(copy); setActive(Object.keys(copy)[0] || \"Général\"); } return (

📝 Notes

setNewCat(e.target.value)} />

setCategories({ ...categories, [active]: e.target.value })} /></div>); }\n\nexport default function FinalEUApp() {\n  const [xp, setXp] = useState(loadXP());\n  const [tab, setTab] = useState(\"glossaire\");\n  const [query, setQuery] = useState(\"\");\n\n  useEffect(() => { function onStorage() { setXp(loadXP()); } window.addEventListener(\"storage\", onStorage); return () => window.removeEventListener(\"storage\", onStorage); }, []);\n\n  function handleEarn(amount) { const next = addXP(amount); setXp(next); }\n  function markRead(item) { const gain = item.year ? 10 : 5; handleEarn(gain); alert(`${item.title} marqué lu — +${gain} XP`); }\n\n  const qLower = query.toLowerCase();\n  const filteredInstitutions = INSTITUTIONS.filter((i) => i.title.toLowerCase().includes(qLower) || (i.desc || \"\").toLowerCase().includes(qLower));\n  const filteredArticles = ARTICLES.filter((i) => i.title.toLowerCase().includes(qLower) || (i.text || \"\").toLowerCase().includes(qLower));\n  const filteredPrincipes = PRINCIPES.filter((i) => i.title.toLowerCase().includes(qLower) || (i.desc || \"\").toLowerCase().includes(qLower));\n  const filteredTextes = TEXTES.filter((i) => i.title.toLowerCase().includes(qLower) || (i.desc || \"\").toLowerCase().includes(qLower));\n  const filteredProcedure = PROCEDURE_ART48_TFUE.filter((i) => ((i.title || \"\") + (i.desc || \"\") + (i.subtitle || \"\")).toLowerCase().includes(qLower));\n\n  return (\n    <div className=\"min-h-screen bg-gray-100 p-6\">\n      <div className=\"max-w-6xl mx-auto grid grid-cols-12 gap-6\">\n        <div className=\"col-span-3\">\n          <div className=\"sticky top-6 space-y-4\">\n            <div className=\"p-4 bg-white rounded-lg shadow-sm\">\n              <div className=\"text-xl font-bold\">EUROgame 🌍</div>\n              <div className=\"text-sm text-gray-600\">Plateforme pédagogique — XP • QCM infinis • Glossaire complet</div>\n            </div>\n\n            <XPBar xp={xp} />\n\n            <div className=\"p-4 bg-white rounded-lg shadow-sm\"><BadgeDropdown xp={xp} /></div>\n\n            <div className=\"p-4 bg-white rounded-lg shadow-sm\">\n              <div className=\"mb-2 text-sm font-medium\">Navigation</div>\n              <div className=\"flex flex-col gap-2\">\n                <button onClick={() => setTab(\"glossaire\")} className={`px-3 py-2 rounded ${tab === \"glossaire\" ? \"bg-indigo-600 text-white\" : \"bg-gray-50\"}`}>Glossaire</button>\n                <button onClick={() => setTab(\"quiz\")} className={`px-3 py-2 rounded ${tab === \"quiz\" ? \"bg-indigo-600 text-white\" : \"bg-gray-50\"}`}>QCM</button>\n                <button onClick={() => setTab(\"juris\")} className={`px-3 py-2 rounded ${tab === \"juris\" ? \"bg-indigo-600 text-white\" : \"bg-gray-50\"}`}>Jurisprudences</button>\n                <button onClick={() => setTab(\"notes\")} className={`px-3 py-2 rounded ${tab === \"notes\" ? \"bg-indigo-600 text-white\" : \"bg-gray-50\"}`}>Notes</button>\n              </div>\n            </div>\n\n            <div className=\"p-4 bg-white rounded-lg shadow-sm\">\n              <div className=\"text-sm font-medium mb-2\">Rechercher</div>\n              <input value={query} onChange={(e) => setQuery(e.target.value)} className=\"w-full p-2 border rounded\" placeholder=\"Article, arrêt, institution...\" />\n            </div>\n\n            <div className=\"p-4 bg-white rounded-lg shadow-sm text-xs text-gray-500\">\n              <div className=\"font-medium\">Règles XP</div>\n              <ul className=\"list-disc pl-4 mt-2\">\n                <li>Lire une fiche : +5 XP</li>\n                <li>Lire une jurisprudence : +10 XP</li>\n                <li>Réussir un QCM : XP variable (voir question)</li>\n                <li>Badge débloqué : selon seuils</li>\n              </ul>\n            </div>\n\n          </div>\n        </div>\n\n        <div className=\"col-span-9\">\n          <div className=\"space-y-4\">\n            {tab === \"glossaire\" && (\n              <div className=\"grid grid-cols-2 gap-4\">\n                <div>\n                  <div className=\"text-lg font-semibold mb-2\">Institutions 🏢</div>\n                  <GlossaryList data={filteredInstitutions} onRead={markRead} />\n\n                  <div className=\"text-lg font-semibold mt-6 mb-2\">Principes 💡</div>\n                  <GlossaryList data={filteredPrincipes} onRead={markRead} />\n\n                  <div className=\"text-lg font-semibold mt-6 mb-2\">Procédure ART48 TFUE</div>\n                  <GlossaryList data={filteredProcedure} onRead={markRead} />\n                </div>\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","11060400755135407670","traceTime",1781955868509]
</article></body></html>