@inwink-mcp/backoffice-extension-helpers 1.0.2 → 1.0.4

package/dist/cli.js

@@ -101,7 +101,7 @@ function escapeForJson(value) {
 }
 function substitute(content, ph, json) {
   const v = (value) => json ? escapeForJson(value) : value;
-  return content.replaceAll("__NAME__", v(ph.name)).replaceAll("__DISPLAY_NAME__", v(ph.displayName)).replaceAll("__DESCRIPTION__", v(ph.description)).replaceAll("__AUTHOR__", v(ph.author)).replaceAll("__EVENT_API_URL__", v(ph.eventApiUrl)).replaceAll("__COMMUNITY_API_URL__", v(ph.communityApiUrl)).replaceAll("__CUSTOMER_API_URL__", v(ph.customerApiUrl));
+  return content.replaceAll("__NAME__", v(ph.name)).replaceAll("__DISPLAY_NAME__", v(ph.displayName)).replaceAll("__VERSION__", v(ph.version)).replaceAll("__DESCRIPTION__", v(ph.description)).replaceAll("__AUTHOR__", v(ph.author)).replaceAll("__EVENT_API_URL__", v(ph.eventApiUrl)).replaceAll("__COMMUNITY_API_URL__", v(ph.communityApiUrl)).replaceAll("__CUSTOMER_API_URL__", v(ph.customerApiUrl));
 }
 function renderTemplate(templateId, destDir, ph) {
   const srcRoot = path2.join(templatesRoot, templateId);
@@ -160,7 +160,8 @@ function apply(template, opts) {
     // un overlay ne les ré-injecte pas.
     eventApiUrl: "",
     communityApiUrl: "",
-    customerApiUrl: ""
+    customerApiUrl: "",
+    version: str(manifest.version)
   };
   let written;
   try {
@@ -252,8 +253,7 @@ function bootstrap(opts) {
       error(`La cible existe et n'est pas un dossier : ${destDir}`);
       return 1;
     }
-    const IGNORED_DIRS = /* @__PURE__ */ new Set([".claude", ".github", ".git", ".vscode", ".idea", ".cursor"]);
-    const entries = fs3.readdirSync(destDir).filter((e) => !IGNORED_DIRS.has(e));
+    const entries = fs3.readdirSync(destDir);
     if (entries.length > 0 && !opts.force) {
       error(`Le dossier cible n'est pas vide : ${destDir}`);
       info("Utilisez --force pour \xE9crire malgr\xE9 tout, ou --dir vers un dossier vide.");
@@ -262,6 +262,8 @@ function bootstrap(opts) {
   } else {
     fs3.mkdirSync(destDir, { recursive: true });
   }
+  const now = /* @__PURE__ */ new Date();
+  const defaultVersion = `${now.getFullYear()}.${String(now.getMonth() + 1)}.${String(now.getDate())}.1`;
   const placeholders = {
     name: opts.name,
     displayName: opts.displayName,
@@ -269,7 +271,9 @@ function bootstrap(opts) {
     author: opts.author,
     eventApiUrl: opts.eventApiUrl,
     communityApiUrl: opts.communityApiUrl,
-    customerApiUrl: opts.customerApiUrl
+    customerApiUrl: opts.customerApiUrl,
+    version: defaultVersion
+    // version par défaut au format YYYY.MM.DD
   };
   let written;
   try {
@@ -425,6 +429,23 @@ function sourceUsesBrowserRouter(dir) {
 import fs5 from "fs";
 import path6 from "path";
 import AdmZip2 from "adm-zip";
+function createSourceZip(projectDir) {
+  const sourceZip = new AdmZip2();
+  const rootFiles = fs5.readdirSync(projectDir);
+  for (const file of rootFiles) {
+    if (file === "node_modules" || file === "dist" || file.endsWith(".zip")) {
+      continue;
+    }
+    const filePath = path6.join(projectDir, file);
+    const stat = fs5.statSync(filePath);
+    if (stat.isDirectory()) {
+      sourceZip.addLocalFolder(filePath, file);
+    } else {
+      sourceZip.addFile(file, fs5.readFileSync(filePath));
+    }
+  }
+  return sourceZip.toBuffer();
+}
 function zipDist(projectDir, name, version) {
   const distDir = path6.join(projectDir, "dist");
   if (!fs5.existsSync(distDir)) {
@@ -434,6 +455,8 @@ function zipDist(projectDir, name, version) {
   const zipFilePath = path6.join(projectDir, zipFileName);
   const zip = new AdmZip2();
   zip.addLocalFolder(distDir);
+  const sourceZipBuffer = createSourceZip(projectDir);
+  zip.addFile(sourceZipBuffer, "source.zip");
   zip.writeZip(zipFilePath);
   return zipFilePath;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inwink-mcp/backoffice-extension-helpers",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "author": "inwink",
   "license": "ISC",
   "description": "CLI pour bootstrapper, packager et vérifier les extensions backoffice inwink.",

package/templates/test-app/src/pages/HomePage.tsx.tpl

@@ -1,16 +1,13 @@
 import { useState } from 'react';
-import { FiRefreshCw } from 'react-icons/fi';
+import { FiLogIn, FiLogOut, FiRefreshCw } from 'react-icons/fi';
 import { useAuth } from '../hooks/useAuth';
-import { useInwinkContext } from '../hooks/useInwinkContext';
 import { useInwinkEventApi } from '../hooks/useInwinkEventApi';
 
 // Version de HomePage générée par le template overlay "test-app".
-// Sert à vérifier que le squelette bootstrappé compile et que les hooks
-// (useInwinkEventApi, useInwinkContext) sont utilisables. Le login/logout vit
-// désormais dans le Header (lui-même surchargé par cet overlay).
+// Sert à vérifier que le squelette bootstrappé compile et que les hooks API
+// (ici useInwinkEventApi) sont utilisables.
 export default function HomePage() {
-  const { isAuthenticated, user } = useAuth();
-  const { scope, eventId, communityId, tenantId } = useInwinkContext();
+  const { isAuthenticated, isLoading, login, logout, user } = useAuth();
   const eventApi = useInwinkEventApi();
   const [result, setResult] = useState<string>('');
   const [error, setError] = useState<string>('');
@@ -31,27 +28,28 @@ export default function HomePage() {
   }
 
   return (
-    <section>
+    <main>
       <h1>__DISPLAY_NAME__ — test API Event</h1>
       {!isAuthenticated ? (
-        <p>Connectez-vous via le bouton « Se connecter » en haut à droite.</p>
+        <button disabled={isLoading} onClick={() => void login()}>
+          <FiLogIn aria-hidden />
+          {isLoading ? 'Initialisation...' : 'Se connecter'}
+        </button>
       ) : (
         <>
           <p>Connecté en tant que : {user?.profile.email ?? 'Inconnu'}</p>
-          <p>
-            Contexte courant : {scope ?? 'aucun'}
-            {eventId ? ` — événement ${eventId}` : ''}
-            {communityId ? ` — communauté ${communityId}` : ''}
-            {tenantId ? ` — audience ${tenantId}` : ''}
-          </p>
           <button onClick={() => void callEventApi()}>
             <FiRefreshCw aria-hidden />
             Appeler l'API Event
           </button>
+          <button onClick={() => void logout()}>
+            <FiLogOut aria-hidden />
+            Se déconnecter
+          </button>
           {result && <pre>{result}</pre>}
           {error && <p role="alert">Erreur : {error}</p>}
         </>
       )}
-    </section>
+    </main>
   );
 }

package/templates/vite-extension/AGENTS.md.tpl

@@ -25,20 +25,9 @@ __NAME__/
 ├── vite.config.ts            # Config Vite (base: './' + copie du manifest)
 ├── scripts/zip-build.mjs     # Packaging zip {name}-{version}.zip
 └── src/
-    ├── main.tsx              # Bootstrap React (HashRouter + AuthProvider + InwinkContextProvider)
-    ├── App.tsx               # Routes (via Layout + Outlet)
-    ├── styles.css            # Styles globaux : polices, tokens (couleurs/accent), base
-    ├── components/
-    │   ├── Layout.tsx + .css         # Gabarit : Header + zone de contenu (Outlet)
-    │   ├── Header.tsx + .css         # En-tête (marque + login/logout) — surchargeable
-    │   ├── ContextCombobox.tsx + .css # Combobox ergonomique réutilisable (recherche + clavier)
-    │   ├── EventPicker.tsx           # Sélecteur d'événement (autonome, non monté par défaut)
-    │   ├── CommunityPicker.tsx       # Sélecteur de communauté (idem)
-    │   └── AudiencePicker.tsx        # Sélecteur de tenant/audience (idem)
-    ├── context/
-    │   └── InwinkContextProvider.tsx  # Contexte event/community/tenant + loaders de listes
-    ├── lib/
-    │   └── inwinkContextParams.ts     # Lecture/persistance des params URL (eventid/communityid/tenantid)
+    ├── main.tsx              # Bootstrap React (HashRouter + AuthProvider)
+    ├── App.tsx               # Routes
+    ├── styles.css            # Styles
     ├── pages/
     │   └── HomePage.tsx      # Page d'accueil (logique métier / UI)
     ├── api/
@@ -49,8 +38,6 @@ __NAME__/
     │   └── ProtectedRoute.tsx
     └── hooks/
         ├── useAuth.ts                # Hook d'accès au contexte auth
-        ├── useInwinkContext.ts       # Hook d'accès au contexte inwink (event/community/tenant)
-        ├── useContextOptions.ts      # Chargement (1×) des listes pour les pickers
         ├── useInwinkApi.ts           # Hook générique d'appel API (Bearer + renouvellement 401)
         ├── useInwinkEventApi.ts      # Hook API Event
         ├── useInwinkCommunityApi.ts  # Hook API Community
@@ -98,50 +85,6 @@ Bonnes pratiques :
 - Ne déclarer dans `permissions.platform` que les scopes réellement utilisés.
 - Déclarer les hôtes externes dans `permissions.externalHosts` (HTTPS uniquement).
 
-## Structure de pages & Header
-
-L'app est rendue dans un `Layout` (`components/Layout.tsx`) = `Header` + zone de contenu (`<Outlet />`). Le `Header` (`components/Header.tsx`) est **minimal par défaut** (marque + bouton login/logout) et **conçu pour être surchargé** : c'est l'endroit naturel où monter un picker de contexte si l'extension en a besoin.
-
-Pour **ajouter une page** : créer le composant dans `src/pages/`, puis ajouter une `<Route>` enfant du `<Route element={<Layout .../>}>` dans `App.tsx` (elle s'affichera dans l'`Outlet`).
-
-## Contexte inwink (event / community / tenant)
-
-Quand l'extension est ouverte depuis le back-office sur un objet précis, le BO passe `eventid`, `communityid` ou `tenantid` dans l'URL. Le template gère ça nativement :
-
-- `lib/inwinkContextParams.ts` lit ces paramètres (query classique **et** query du hash), insensible à la casse, et les **persiste en sessionStorage** — indispensable car le callback OIDC nettoie l'URL et le `redirect_uri` ne réémet pas la query.
-- `context/InwinkContextProvider.tsx` expose le contexte courant et les setters via le hook **`useInwinkContext`** :
-
-```typescript
-const { scope, eventId, communityId, tenantId, setEvent, setCommunity, setTenant } = useInwinkContext();
-// scope = 'event' | 'community' | 'tenant' | null  (tenant = audience)
-```
-
-Le contexte issu de l'URL est **pré-rempli mais modifiable** (l'utilisateur peut changer d'objet via un picker).
-
-## Pickers de contexte (event / community / audience)
-
-Trois composants autonomes existent dans `components/` : **`EventPicker`**, **`CommunityPicker`**, **`AudiencePicker`**. Ils consomment `useInwinkContext`, listent les objets de l'utilisateur via l'API Customer (`me/events/query`, `me/communities/query`, `me/tenants/query`) et appliquent la sélection. L'UI est mutualisée dans **`ContextCombobox`** (bouton + popover avec recherche et navigation clavier) — réutilise-le pour tout sélecteur similaire.
-
-Ces listes sont **paginées côté serveur** (1ʳᵉ page seulement). La recherche du combobox est donc déléguée au serveur via `useContextOptions` (loaders `loadEvents/loadCommunities/loadTenants`, paramètre `IInwinkContextQuery = { search?, id? }`) : la saisie est debouncée et filtre par nom **ou** id (`{ filters: { $or: [{ id }, { <label>: { $contains } }] } }`). Les événements sont triés par date décroissante (`orders`). Comme l'objet pré-sélectionné via l'URL peut ne pas figurer dans la page courante, `useContextOptions` **fetch son détail par id** et le fusionne dans les options pour afficher son libellé.
-
-**Ils ne sont PAS montés par défaut.** À toi de décider, selon l'usage de l'extension, d'en monter un — typiquement dans le `Header` (cf. ci-dessus) ou dans une page :
-
-```tsx
-import EventPicker from '../components/EventPicker';
-// ...
-{isAuthenticated && <EventPicker />}
-```
-
-## Branding inwink
-
-- Polices : **Lato** (texte) + **Poppins** (titres), chargées via Google Fonts dans `styles.css`. Les hôtes `fonts.googleapis.com` / `fonts.gstatic.com` sont déjà déclarés dans `permissions.externalHosts`.
-- Couleur d'accentuation : **`#e94c1e`** (variable CSS `--color-accent`).
-- Variables/tokens globaux dans `styles.css` ; classe `.btn-primary` pour l'action principale.
-
-## Convention CSS (obligatoire)
-
-**Tout nouveau composant doit avoir un fichier `.css` co-localisé**, importé en tête de son `.tsx` (`import './MonComposant.css';`). Les styles globaux et les tokens (`--font-*`, `--color-*`) restent dans `styles.css` ; les styles spécifiques d'un composant vivent dans son `.css`. Vite bundle automatiquement ces CSS dans `dist/assets/` (packagé dans le zip) — ne pas les oublier.
-
 ## Règles et contraintes
 
 | Règle | Détail |
@@ -153,7 +96,6 @@ import EventPicker from '../components/EventPicker';
 | Pas d'imports Node.js | `fs`, `path`, `http`, `child_process`, etc. interdits dans le code source |
 | Pas de `fetch` direct | Toujours passer par `useInwinkEventApi` / `useInwinkCommunityApi` / `useInwinkCustomerApi` (ou `useInwinkApi` pour un hôte externe déclaré) |
 | Icônes via `react-icons` | Ne pas embarquer de SVG inline ni d'images d'icônes |
-| CSS co-localisé par composant | Chaque composant a un `.css` importé en tête de son `.tsx` ; tokens/global dans `styles.css` |
 | `HashRouter` obligatoire | Pour compatibilité avec l'hébergement versionné |
 | `base: './'` obligatoire | Dans `vite.config.ts`, pour les chemins d'assets relatifs |
 | `response_type: 'code'` | PKCE obligatoire, pas de flux implicit |

package/templates/vite-extension/extension.manifest.json.tpl

@@ -1,18 +1,18 @@
 {
   "name": "__NAME__",
-  "version": "0.1.0",
+  "version": "__VERSION__",
   "displayName": "__DISPLAY_NAME__",
   "description": "__DESCRIPTION__",
   "author": "__AUTHOR__",
   "permissions": {
     "platform": [],
-    "externalHosts": ["https://fonts.googleapis.com", "https://fonts.gstatic.com"]
+    "externalHosts": []
   },
   "auth": {
     "scopes": ["openid", "profile", "email"]
   },
   "entrypoint": "./dist/index.html",
   "platform": {
-    "minVersion": "1.0.0"
+    "minVersion": "__VERSION__"
   }
 }

package/templates/vite-extension/index.html.tpl

@@ -3,8 +3,6 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <title>__DISPLAY_NAME__</title>
   </head>
   <body>

package/templates/vite-extension/scripts/zip-build.mjs

@@ -30,7 +30,30 @@ const zipFileName = `${manifest.name}-${manifest.version}.zip`;
 const zipFilePath = path.join(projectRoot, zipFileName);
 const zip = new AdmZip();
 
+function createSourceZipBuffer(rootDir) {
+  const sourceZip = new AdmZip();
+  const rootEntries = fs.readdirSync(rootDir);
+
+  for (const entry of rootEntries) {
+    if (entry === 'node_modules' || entry === 'dist' || entry.endsWith('.zip')) {
+      continue;
+    }
+
+    const entryPath = path.join(rootDir, entry);
+    const stat = fs.statSync(entryPath);
+
+    if (stat.isDirectory()) {
+      sourceZip.addLocalFolder(entryPath, entry);
+    } else {
+      sourceZip.addFile(entry, fs.readFileSync(entryPath));
+    }
+  }
+
+  return sourceZip.toBuffer();
+}
+
 zip.addLocalFolder(distDir);
+zip.addFile('source.zip', createSourceZipBuffer(projectRoot));
 zip.writeZip(zipFilePath);
 
 process.stdout.write(`${zipFileName}\n`);

package/templates/vite-extension/src/App.tsx.tpl

@@ -1,14 +1,11 @@
 import { Navigate, Route, Routes } from 'react-router-dom';
-import Layout from './components/Layout';
 import ProtectedRoute from './auth/ProtectedRoute';
+import Layout from './components/Layout';
 import HomePage from './pages/HomePage';
 // Pour appeler une API inwink, utilisez un hook dédié (jamais fetch directement) :
 //   import { useInwinkEventApi } from './hooks/useInwinkEventApi';
 //   const eventApi = useInwinkEventApi();
 //   const data = await eventApi.get('/v1/...');
-//
-// Pour ajouter une page : créez-la dans src/pages/ puis ajoutez une <Route> enfant
-// du <Route element={<Layout .../>}> ci-dessous (elle s'affichera dans l'<Outlet> du Layout).
 
 export default function App() {
   return (

package/templates/vite-extension/src/auth/AuthProvider.tsx

@@ -16,6 +16,9 @@ type AuthContextValue = {
 
 export const AuthContext = createContext<AuthContextValue | null>(null);
 
+const LOGIN_REDIRECT_COOLDOWN_MS = 15000;
+const LAST_LOGIN_REDIRECT_AT_KEY = 'inwink.auth.lastLoginRedirectAt';
+
 function isOidcCallback(): boolean {
   const params = new URLSearchParams(window.location.search);
   return params.has('code') && params.has('state');
@@ -25,6 +28,7 @@ export function AuthProvider({ children }: PropsWithChildren) {
   const [user, setUser] = useState<User | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const userRef = useRef(user);
+  const loginInFlightRef = useRef(false);
   useEffect(() => { userRef.current = user; }, [user]);
 
   useEffect(() => {
@@ -59,8 +63,26 @@ export function AuthProvider({ children }: PropsWithChildren) {
   }, []);
 
   const login = useCallback(async () => {
+    if (loginInFlightRef.current) {
+      return;
+    }
+
+    const now = Date.now();
+    const lastRedirectAt = Number(sessionStorage.getItem(LAST_LOGIN_REDIRECT_AT_KEY) ?? '0');
+    if (Number.isFinite(lastRedirectAt) && now - lastRedirectAt < LOGIN_REDIRECT_COOLDOWN_MS) {
+      return;
+    }
+
+    loginInFlightRef.current = true;
     setIsLoading(true);
-    await userManager.signinRedirect();
+    sessionStorage.setItem(LAST_LOGIN_REDIRECT_AT_KEY, String(now));
+
+    try {
+      await userManager.signinRedirect();
+    } finally {
+      loginInFlightRef.current = false;
+      setIsLoading(false);
+    }
   }, []);
 
   const logout = useCallback(async () => {

package/templates/vite-extension/src/auth/ProtectedRoute.tsx

@@ -5,7 +5,11 @@ export default function ProtectedRoute({ children }: PropsWithChildren) {
   const { isLoading } = useAuth();
 
   if (isLoading) {
-    return <p>Chargement...</p>;
+    return (
+      <div style={{ display: 'grid', placeItems: 'center', minHeight: '30vh' }} aria-busy="true">
+        <progress />
+      </div>
+    );
   }
 
   return <>{children}</>;

package/templates/vite-extension/src/hooks/useInwinkApi.ts

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { useAuth } from './useAuth';
 
 /** Erreur levée lorsqu'une réponse API n'est pas OK (hors 401 géré par renouvellement). */
@@ -37,9 +37,16 @@ async function safeBody(response: Response): Promise<unknown> {
  * sert aux hôtes externes déclarés ou à des bases d'URL spécifiques.
  */
 export function useInwinkApi(baseUrl: string): InwinkApi {
-  const { getAccessToken, renewToken, login } = useAuth();
+  // Les fonctions d'auth sont lues via une ref (motif « latest ref », cf. `userRef`
+  // dans AuthProvider) : l'objet API renvoyé reste ainsi stable (mémoïsé sur `baseUrl`,
+  // une constante) tout en utilisant toujours les callbacks frais au moment de l'appel.
+  const auth = useAuth();
+  const authRef = useRef(auth);
+  useEffect(() => {
+    authRef.current = auth;
+  }, [auth]);
 
-  return useMemo(() => {
+  return useMemo<InwinkApi>(() => {
     async function doFetch(path: string, token: string, init?: RequestInit): Promise<Response> {
       return fetch(`${baseUrl}${path}`, {
         ...init,
@@ -52,6 +59,7 @@ export function useInwinkApi(baseUrl: string): InwinkApi {
     }
 
     async function request<T = unknown>(path: string, init?: RequestInit): Promise<T> {
+      const { getAccessToken, renewToken, login } = authRef.current;
       let token = getAccessToken();
       if (!token) {
         await login();
@@ -100,5 +108,5 @@ export function useInwinkApi(baseUrl: string): InwinkApi {
       del: <T = unknown>(path: string, init?: RequestInit) =>
         request<T>(path, { ...init, method: 'DELETE' }),
     };
-  }, [baseUrl, getAccessToken, renewToken, login]);
+  }, [baseUrl]);
 }

package/templates/vite-extension/src/pages/HomePage.tsx.tpl

@@ -1,30 +1,26 @@
+import { FiLogIn, FiLogOut } from 'react-icons/fi';
 import { useAuth } from '../hooks/useAuth';
-import { useInwinkContext } from '../hooks/useInwinkContext';
 
 export default function HomePage() {
-  const { isAuthenticated, user } = useAuth();
-  const { scope, eventId, communityId, tenantId } = useInwinkContext();
-
-  if (!isAuthenticated) {
-    return (
-      <section>
-        <h1>__DISPLAY_NAME__</h1>
-        <p>Connectez-vous via le bouton « Se connecter » en haut à droite.</p>
-      </section>
-    );
-  }
+  const { isAuthenticated, isLoading, login, logout, user } = useAuth();
 
   return (
-    <section>
+    <main>
       <h1>__DISPLAY_NAME__</h1>
-      <p>Connecté en tant que : {user?.profile.email ?? 'Inconnu'}</p>
-      <p>
-        Contexte courant : {scope ?? 'aucun'}
-        {eventId ? ` — événement ${eventId}` : ''}
-        {communityId ? ` — communauté ${communityId}` : ''}
-        {tenantId ? ` — audience ${tenantId}` : ''}
-      </p>
-      {/* Ajoutez ici la logique métier de l'extension. */}
-    </section>
+      {!isAuthenticated ? (
+        <button disabled={isLoading} onClick={() => void login()}>
+          <FiLogIn aria-hidden />
+          {isLoading ? 'Initialisation...' : 'Se connecter'}
+        </button>
+      ) : (
+        <>
+          <p>Connecté en tant que : {user?.profile.email ?? 'Inconnu'}</p>
+          <button onClick={() => void logout()}>
+            <FiLogOut aria-hidden />
+            Se déconnecter
+          </button>
+        </>
+      )}
+    </main>
   );
 }

package/templates/vite-extension/src/styles.css

@@ -1,91 +1,32 @@
-/* Polices inwink : Lato (texte) + Poppins (titres) via Google Fonts.
-   Nécessite que fonts.googleapis.com / fonts.gstatic.com soient déclarés
-   dans extension.manifest.json > permissions.externalHosts. */
-@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Poppins:wght@500;600;700&display=swap');
-
-/* Design tokens — inspirés de l'identité inwink. */
 :root {
-  /* Polices */
-  --font-base: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
-  --font-title: 'Poppins', var(--font-base);
-
-  /* Couleur d'accentuation */
-  --color-accent: #e94c1e;
-  --color-accent-hover: #cf3f15;
-  --color-accent-contrast: #ffffff;
-
-  /* Neutres */
-  --color-bg: #ffffff;
-  --color-surface: #f7f7f8;
-  --color-border: #e2e2e6;
-  --color-text: #1d1d1f;
-  --color-text-muted: #6b6b73;
-
-  /* Rayons & ombres */
-  --radius: 8px;
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
-
-  font-family: var(--font-base);
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   line-height: 1.5;
-  color: var(--color-text);
-  background: var(--color-bg);
-}
-
-* {
-  box-sizing: border-box;
+  color-scheme: light dark;
 }
 
 body {
   margin: 0;
-  font-family: var(--font-base);
-  background: var(--color-bg);
-  color: var(--color-text);
+  padding: 2rem;
 }
 
-h1,
-h2,
-h3 {
-  font-family: var(--font-title);
-  font-weight: 600;
-  line-height: 1.2;
+main {
+  max-width: 720px;
+  margin: 0 auto;
 }
 
-a {
-  color: var(--color-accent);
-}
-
-/* Boutons — base générique réutilisable.
-   .btn-primary = action principale (accent), sinon variante neutre. */
 button {
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.5rem 1rem;
-  border-radius: var(--radius);
-  border: 1px solid var(--color-border);
-  background: var(--color-bg);
-  color: var(--color-text);
+  border-radius: 6px;
+  border: 1px solid currentColor;
+  background: transparent;
   font: inherit;
-  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
-}
-
-button:hover:not(:disabled) {
-  border-color: var(--color-accent);
 }
 
 button:disabled {
   cursor: default;
   opacity: 0.6;
 }
-
-button.btn-primary {
-  background: var(--color-accent);
-  border-color: var(--color-accent);
-  color: var(--color-accent-contrast);
-}
-
-button.btn-primary:hover:not(:disabled) {
-  background: var(--color-accent-hover);
-  border-color: var(--color-accent-hover);
-}