Stratégies Obliques

Une page HTML unique qui rejoue le jeu Stratégies Obliques de Brian Eno & Peter Schmidt : à l'ouverture, on tire une carte au hasard parmi une liste de dictons/injonctions destinés à débloquer la création.

Objectif

• Une seule page HTML (autonome, aucune dépendance externe, ouvrable en double-clic).
• Style gothique : typographie serif/blackletter, fond sombre, ornements, ambiance mystérieuse.
• Tirage aléatoire : à chaque chargement, une carte est tirée au sort parmi les propositions.
• Retirer une carte : un bouton permet de tirer une nouvelle carte sans recharger la page.

Plan de réalisation

1. Structure des données

• Stocker toutes les citations dans un tableau JavaScript (const cartes = [ ... ]).
• ~120 propositions en français (fournies dans la demande initiale).

2. Structure HTML

• <main> centré contenant :
  • un titre / en-tête (« Stratégies Obliques »),
  • la carte tirée (zone de texte principale),
  • un bouton « Tirer une autre carte ».
• Page entièrement autonome : CSS et JS inline (<style> + <script> dans le même fichier).

3. Style gothique (CSS)

• Palette sombre : noir/charbon, accents (or patiné, rouge sang ou blanc os).
• Police serif à empattements marqués ou blackletter (via polices système, sans CDN).
• Carte présentée comme une carte à tirer : cadre orné, ombre, léger relief.
• Texture/ornements en CSS pur (dégradés, bordures, éventuellement SVG inline).
• Responsive : lisible sur mobile comme sur desktop.

4. Logique JavaScript

• Fonction tirerCarte() : sélectionne un index aléatoire et affiche la citation.
• Appel au chargement de la page (DOMContentLoaded).
• Le bouton relance tirerCarte().
• (Option) éviter de retirer immédiatement la même carte deux fois de suite.

5. Finitions (optionnel)

• Petite animation d'apparition de la carte (fade / flip).
• Effet au survol du bouton.
• Favicon / titre d'onglet cohérents.

Fichiers

• index.html — la page complète (données + style + logique).
• README.md — ce document.