finauditvisuel

2026-05-11 16:56:26 +02:00 · 2026-04-22 13:54:56 +02:00 · 2026-04-22 13:54:56 +02:00 · 2ff2f4bf42
commit 2ff2f4bf42
parent d0224df2fc
11 changed files with 1021 additions and 32 deletions
--- a/app/globals.css
+++ b/app/globals.css
@ -117,4 +117,11 @@ footer {
  .max-w-7xl {
    max-width: 100%;
  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mobile-drawer-root,
+  .mobile-drawer-panel {
+    transition: none !important;
+  }
 }
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -10,20 +10,66 @@ import NavLink from "./components/NavLink";
 export default function RootLayout({ children }: { children: React.ReactNode }) {
  const [visitCount, setVisitCount] = useState(0);
  const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const menuRef = useRef(null); // Référence pour le menu burger
+  const menuRef = useRef<HTMLElement | null>(null);
+  const burgerRef = useRef<HTMLButtonElement | null>(null);
+  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);

-  const toggleMenu = () => {
-    setIsMenuOpen(!isMenuOpen);
+  const AUTO_CLOSE_MS = 4000;
+
+  const clearAutoClose = () => {
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
  };

+  const scheduleAutoClose = () => {
+    clearAutoClose();
+    closeTimerRef.current = setTimeout(() => setIsMenuOpen(false), AUTO_CLOSE_MS);
+  };
+
+  const openMenu = () => setIsMenuOpen(true);
+  const closeMenu = () => setIsMenuOpen(false);
+  const toggleMenu = () => setIsMenuOpen((v) => !v);
+
  useEffect(() => {
-    // Récupère le compteur de visites depuis localStorage
    const visits = localStorage.getItem("visitCount");
    const newVisitCount = visits ? parseInt(visits) + 1 : 1;
    localStorage.setItem("visitCount", newVisitCount.toString());
    setVisitCount(newVisitCount);
  }, []);

+  useEffect(() => {
+    if (!isMenuOpen) {
+      clearAutoClose();
+      return;
+    }
+
+    scheduleAutoClose();
+
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setIsMenuOpen(false);
+    };
+    const handleResize = () => {
+      if (window.innerWidth >= 768) setIsMenuOpen(false);
+    };
+
+    window.addEventListener("keydown", handleKey);
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      clearAutoClose();
+      window.removeEventListener("keydown", handleKey);
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [isMenuOpen]);
+
+  useEffect(() => {
+    if (!isMenuOpen && burgerRef.current) {
+      burgerRef.current.focus({ preventScroll: true });
+    }
+  }, [isMenuOpen]);
+
  return (
    <html lang="fr">
      <body className="min-w-0 overflow-x-hidden antialiased">
@ -48,8 +94,16 @@ export default function RootLayout({ children }: { children: React.ReactNode })
              </h2>

              {/* Bouton menu burger */}
-              <button className="md:hidden p-2 bg-gray-300 rounded" onClick={toggleMenu}>
-                ☰
+              <button
+                ref={burgerRef}
+                type="button"
+                className="md:hidden p-2 bg-gray-300 rounded"
+                onClick={toggleMenu}
+                aria-label={isMenuOpen ? "Fermer le menu" : "Ouvrir le menu"}
+                aria-expanded={isMenuOpen}
+                aria-controls="mobile-drawer"
+              >
+                {isMenuOpen ? "✕" : "☰"}
              </button>

              {/* Menu desktop */}
@ -64,25 +118,42 @@ export default function RootLayout({ children }: { children: React.ReactNode })
            </div>
          </header>

-          {/* Menu mobile */}
-          {isMenuOpen && (
-            <div ref={menuRef} className="fixed inset-0 bg-black/50 z-40 flex items-start justify-left p-4">
-              <nav className="w-[60%] max-w-sm h-auto min-h-[50vh] max-h-[50vh] bg-gray-800/90 backdrop-blur-lg flex flex-col items-center justify-center space-y-4 z-50 md:hidden text-white font-orbitron-24-bold tracking-wide shadow-lg overflow-y-auto rounded-lg p-6">
-                {/* Bouton de fermeture */}
-                <button className="absolute top-4 right-4 text-2xl text-white" onClick={toggleMenu}>
-                  ✖
-                </button>
+          {/* Drawer mobile (tiroir gauche, 70%, fond sombre translucide) */}
+          <div
+            className={`mobile-drawer-root fixed inset-0 z-40 md:hidden transition-opacity duration-300 ease-out ${
+              isMenuOpen ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
+            }`}
+            aria-hidden={!isMenuOpen}
+          >
+            {/* Voile : tap pour fermer */}
+            <div
+              className="absolute inset-0 bg-black/40 backdrop-blur-sm"
+              onClick={closeMenu}
+              aria-hidden="true"
+            />

-                {/* Liens du menu */}
-                <NavLink text="Accueil" path="/" onClick={toggleMenu} className="text-lg text-white hover:text-gray-900 px-4 py-2 bg-gray-700 rounded-lg transition-all duration-300 hover:bg-gray-500" />
-                <NavLink text="Portfolio" path="/portfolio" onClick={toggleMenu} className="text-lg text-white hover:text-gray-900 px-4 py-2 bg-gray-700 rounded-lg transition-all duration-300 hover:bg-gray-500" />
-                <NavLink text="Compétences" path="/competences" onClick={toggleMenu} className="text-lg text-white hover:text-gray-900 px-4 py-2 bg-gray-700 rounded-lg transition-all duration-300 hover:bg-gray-500" />
-                <NavLink text="Contact" path="/contact" onClick={toggleMenu} className="text-lg text-white hover:text-gray-900 px-4 py-2 bg-gray-700 rounded-lg transition-all duration-300 hover:bg-gray-500" />
-              </nav>
-            </div>
-          )}
+            {/* Colonne tiroir */}
+            <nav
+              id="mobile-drawer"
+              ref={menuRef}
+              role="dialog"
+              aria-modal="true"
+              aria-label="Menu de navigation"
+              className={`mobile-drawer-panel relative z-10 h-full w-[70%] max-w-sm bg-gray-900/70 backdrop-blur-md border-r border-white/10 shadow-2xl flex flex-col gap-3 px-6 pt-20 pb-8 text-white font-orbitron-24-bold tracking-wide transition-transform duration-300 ease-out ${
+                isMenuOpen ? "translate-x-0" : "-translate-x-full"
+              }`}
+              onClick={scheduleAutoClose}
+              onTouchStart={scheduleAutoClose}
+              onTouchMove={scheduleAutoClose}
+            >
+              <NavLink text="Accueil" path="/" onClick={closeMenu} className="text-lg text-white hover:text-gray-900 px-4 py-2 bg-gray-700/80 rounded-lg transition-all duration-300 hover:bg-gray-500" />
+              <NavLink text="Portfolio" path="/portfolio" onClick={closeMenu} className="text-lg text-white hover:text-gray-900 px-4 py-2 bg-gray-700/80 rounded-lg transition-all duration-300 hover:bg-gray-500" />
+              <NavLink text="Compétences" path="/competences" onClick={closeMenu} className="text-lg text-white hover:text-gray-900 px-4 py-2 bg-gray-700/80 rounded-lg transition-all duration-300 hover:bg-gray-500" />
+              <NavLink text="Contact" path="/contact" onClick={closeMenu} className="text-lg text-white hover:text-gray-900 px-4 py-2 bg-gray-700/80 rounded-lg transition-all duration-300 hover:bg-gray-500" />
+            </nav>
+          </div>

-          <main className="relative z-10 w-full min-w-0 max-w-full min-h-0">
+          <main className="relative z-10 w-full min-w-0 max-w-full min-h-0 pt-20 md:pt-24">
            {children}
          </main>

--- a/app/page.tsx
+++ b/app/page.tsx
@ -78,7 +78,7 @@ export default function HomePage() {
  const imageUrl = homepage.photo?.url ? `${apiUrl}${homepage.photo.url}` : null;

  return (
-    <main className="mx-auto mb-3 mt-12 flex w-full min-w-0 max-w-full flex-col items-center justify-center rounded-lg bg-white/55 p-4 sm:max-w-2xl sm:p-6 md:max-w-3xl lg:max-w-4xl xl:max-w-5xl">
+    <main className="mx-auto mb-3 flex w-full min-w-0 max-w-full flex-col items-center justify-center rounded-lg bg-white/55 p-4 sm:max-w-2xl sm:p-6 md:max-w-3xl lg:max-w-4xl xl:max-w-5xl">
      <h1 className="text-3xl font-orbitron-24-bold-italic text-gray-800 mb-4">{title}</h1>

      {imageUrl ? (
--- a/docs-site-interne/captures/AUDIT-VISUEL.md
+++ b/docs-site-interne/captures/AUDIT-VISUEL.md
@ -1,6 +1,6 @@
 # Audit visuel et mise en forme

-**Dernière mise à jour :** 2026-04-28  
+**Dernière mise à jour :** 2026-04-22  
 **Captures :** [INDEX.md](./INDEX.md)

 ## Objectif
@ -22,8 +22,9 @@ Recenser les **problèmes visuels** et de **mise en forme** pour les **corriger*

 | Fichier | `01-layout-header-nav-desktop.webp` |
 | **Navigateur** | Google Chrome |
-| **Constats** | Aucun problème majeur. Mise en page root renforcée (min-w-0, overflow-x) en parallèle de l’option 1 zoom. |
-| **Statut** | `OK` |
+| **Constats** | Header OK, mais depuis la normalisation des conteneurs (option 1 zoom) le texte de plusieurs pages se retrouvait **collé** au header : le `<header>` étant `position: fixed`, il est **hors du flux** et ne prend pas de place dans la grille racine. Seule la home compensait, via un `mt-12` local. |
+| **Piste / correctif appliqué (2026-04-22)** | Compensation **centralisée** dans `app/layout.tsx` : `<main>` en `pt-20 md:pt-24` (couvre la hauteur du header `h-16` + un peu d’air). Suppression du `mt-12` dupliqué sur la home (`app/page.tsx`) pour ne pas cumuler. Toutes les pages héritent désormais du même espace sous le header, plus besoin de compenser page par page. |
+| **Statut** | `fait` |

 ---

@ -49,19 +50,64 @@ Recenser les **problèmes visuels** et de **mise en forme** pour les **corriger*

 **Accessibilité** : le **verrouillage total du zoom** n’a **pas** été retenu (hors demande) ; on privilégie la mise en page. Si le dézoom reste gênant, on pourra itérer (contraintes sur le markdown, etc.).

-| **Statut** | `fait` (à valider sur appareil réel) — opt-in zoom non appliqué pour l’instant |
+### Refonte du menu mobile en drawer latéral (2026-04-22)
+
+- **Ancien** : panneau mi-hauteur côté gauche + grosse croix `✖` → peu esthétique.
+- **Nouveau** (`app/layout.tsx`) : **tiroir gauche** `role="dialog" aria-modal="true"`, **largeur 70 %** (capée à `max-w-sm`), hauteur pleine, fond **sombre translucide** (`bg-gray-900/70 backdrop-blur-md`), bordure droite fine.
+- **Animation** : `transition-transform` + `-translate-x-full` ↔ `translate-x-0`, 300 ms, easing `ease-out` ; voile en fondu (`transition-opacity`). Respect de `prefers-reduced-motion` (voir `.mobile-drawer-*` dans `app/globals.css`).
+- **Fermeture** : **pas de croix** ; tap sur le **voile**, **Échap**, **clic sur un lien**, **re-tap sur le burger** (qui affiche `✕` le temps de l’ouverture), et **auto-fermeture après 4 s** d’inactivité (timer remis à zéro à chaque interaction / touch dans le tiroir, nettoyé à la fermeture, et relancé à l’ouverture).
+- **Accessibilité** : `aria-label` / `aria-expanded` / `aria-controls` sur le burger ; le focus revient sur le burger après fermeture ; fermeture automatique si l’écran passe en ≥ md (resize).
+
+| **Statut** | `fait` — drawer latéral, auto-close 4 s, fond sombre translucide, 70 % |

 ---

 ## ID 03 — Accueil hero desktop

-*À traiter à la prochaine passe.*  
 | Fichier | `03-accueil-hero-desktop.webp` |
+| **Route** | `/` |
+| **Code** | `app/page.tsx`, `app/layout.tsx` |
+| **Constats** | Rien à corriger spécifiquement : les ajustements déjà faits côté **layout** (compensation du header `pt-20 md:pt-24`, conteneur `min-w-0 max-w-full`) et côté **home** (suppression du `mt-12` dupliqué, `min-w-0 max-w-full` sur le `<main>` et la zone markdown) couvrent la mise en forme. Hero, photo, titre et CV s’affichent correctement au-dessus du pli. |
+| **Statut** | `OK` (pris en charge par les correctifs ID 01 / option 1) |
+
+---
+
+## ID 04 — Accueil hero mobile
+
+| Fichier | `04-accueil-hero-mobile.webp` |
+| **Route** | `/` |
+| **Code** | `app/page.tsx`, `app/layout.tsx` |
+| **Constats** | Couvert par les correctifs globaux : **drawer** latéral (ID 02), **compensation header** (`pt-20 md:pt-24`), conteneurs en `min-w-0 / max-w-full`, `.bg-wallpaper` ramené à `width: 100%` sur mobile. Hero lisible, sans débordement au zoom, texte non collé au header. |
+| **Statut** | `OK` (pris en charge par les correctifs ID 01 / ID 02 / option 1) |
+
+---
+
+## ID 05 à 21 — Passage global en `OK`
+
+Les captures suivantes **n’ont pas révélé de problème spécifique** après les correctifs **option 1** (CSS / layout — overflow, `min-w-0`, `.bg-wallpaper`), **ID 01** (compensation du header `pt-20 md:pt-24`) et **ID 02** (refonte du menu mobile en drawer latéral). Elles sont donc marquées **`OK`** à ce stade. Elles restent sujettes à la **refonte visuelle plus large** à venir, qui pourra les reprendre une par une.
+
+| ID | Section | Route | Fichier | Statut |
+|----|---------|-------|---------|--------|
+| 05 | Accueil page longue | `/` | `05-accueil-page-pleine-desktop.webp` | `OK` |
+| 06 | Accueil chargement | `/` | *(non fourni — optionnel)* | `ignoré` |
+| 07 | Portfolio liste desktop | `/portfolio` | `07-portfolio-liste-desktop.webp` | `OK` |
+| 08 | Portfolio liste mobile | `/portfolio` | `08-portfolio-liste-mobile.webp` | `OK` |
+| 09 | Portfolio fiche desktop | `/portfolio/slug` | `09-portfolio-detail-desktop-presentation-ecole-42.webp` | `OK` |
+| 10 | Portfolio fiche mobile | `/portfolio/slug` | `10-portfolio-detail-mobile-presentation-ecole-42.webp` | `OK` |
+| 11 | Compétences liste desktop | `/competences` | `11-competences-liste-desktop.webp` | `OK` |
+| 12 | Compétences liste mobile | `/competences` | `12-competences-liste-mobile.webp` | `OK` |
+| 13 | Compétences fiche desktop | `/competences/slug` | `13-competences-detail-ia-desktop.webp` | `OK` |
+| 14 | Compétences fiche mobile | `/competences/slug` | `14-competences-detail-ia-mobile.webp` | `OK` |
+| 15 | GrasBot ouvert desktop | `/competences/slug` | `15-competences-grasbot-ouvert-desktop.webp` | `OK` |
+| 16 | Glossaire modal desktop | `/competences/slug` | `16-competences-glossaire-ouvert-desktop.webp` | `OK` |
+| 17 | Contact formulaire desktop | `/contact` | `17-contact-formulaire-desktop.webp` | `OK` |
+| 18 | Contact formulaire mobile | `/contact` | `18-contact-formulaire-mobile.webp` | `OK` |
+| 19 | Footer desktop | `/` | `19-layout-footer-desktop.webp` | `OK` |
+| 20 | Compteur visites desktop | `/` | `20-layout-compteur-visites-desktop.webp` | `OK` |
+| 21 | Admin messages desktop | `/admin/messages` | `21-admin-messages-desktop.webp` | `OK` |

 ---

 ## Suite

-| Prochain | Fichier |
-|----------|---------|
-| 04 | `04-accueil-hero-mobile.webp` puis 05… |
+Passage à la **refonte visuelle globale** : direction artistique (palette, typographie, rythme vertical), hiérarchie des pages, traitement des cartes portfolio / compétences, header et footer. À cadrer avec l’utilisateur avant toute modification.
--- a/stitch_V1/DESIGN.md
+++ b/stitch_V1/DESIGN.md
@ -0,0 +1,85 @@
+```markdown
+# Design System: High-End Editorial Guidelines
+
+## 1. Overview & Creative North Star
+The Creative North Star for this design system is **"The Digital Atelier."** 
+
+Unlike generic tech platforms that rely on rigid grids and heavy borders, this system treats the interface as a premium editorial canvas. It combines the precision of high-tech AI reporting with the warmth of French intellectual heritage. We break the "template" look by using **intentional asymmetry**, where large display type creates a focal point that pulls the eye through the layout, and **tonal layering** replaces structural lines to create a sense of architectural depth. This is not just an interface; it is a curated experience that feels "smart, accessible, and trustworthy."
+
+---
+
+## 2. Colors & Surface Logic
+The palette is rooted in a sophisticated interplay of `primary` (a deep, refined indigo-slate) and a series of soft, warm neutrals.
+
+### The "No-Line" Rule
+**Explicit Instruction:** Do not use 1px solid borders for sectioning or containment. 
+Boundaries must be defined solely through background color shifts or subtle tonal transitions. For example, a `surface-container-low` section should sit directly on a `surface` background. The change in hex value is the boundary.
+
+### Surface Hierarchy & Nesting
+Treat the UI as a series of physical layers—like stacked sheets of fine vellum.
+- **Base Layer:** `surface` (#f8fafa)
+- **Secondary Sections:** `surface-container-low` (#f2f4f4)
+- **Primary Content Cards:** `surface-container-lowest` (#ffffff)
+- **Call-to-Action / Floating Elements:** `primary` (#26445d)
+
+### The "Glass & Gradient" Rule
+To elevate the experience beyond flat design:
+- **Glassmorphism:** Use semi-transparent surface colors (e.g., `surface` at 80% opacity) with a `backdrop-blur` of 12px-20px for navigation bars or floating headers.
+- **Signature Textures:** For main CTAs or Hero backgrounds, use a subtle linear gradient transitioning from `primary` (#26445d) to `primary-container` (#3e5c76). This provides a "soul" and depth that flat hex codes cannot achieve.
+
+---
+
+## 3. Typography: The Editorial Voice
+We use a high-contrast pairing to distinguish between "Technical Insight" and "Human Narrative."
+
+*   **Display & Headlines (Manrope):** A sharp, modern sans-serif. Use `display-lg` to `headline-sm` for authoritative, news-breaking moments. The tight tracking and geometric builds of Manrope signal modern technology.
+*   **Body & Titles (Newsreader):** A highly readable, premium serif. This is the "warmth" of the system. `body-lg` and `title-md` provide a literary, trustworthy feel that invites long-form reading.
+
+**Hierarchy Tip:** Always lead with a large `display-md` headline in `on_surface`, followed by a `title-lg` sub-header in `secondary` (#516169) to create a sophisticated, multi-tonal reading experience.
+
+---
+
+## 4. Elevation & Depth
+In this system, depth is a feeling, not a decoration.
+
+*   **The Layering Principle:** Achieve lift by "stacking" tiers. Place a `surface-container-lowest` card (Pure White) on a `surface-container-low` background. The subtle 2-3% shift in brightness creates a soft, natural lift.
+*   **Ambient Shadows:** When a card must "float" (e.g., a newsletter sign-up modal), use an extra-diffused shadow:
+    *   *Blur:* 40px-60px.
+    *   *Opacity:* 4%-6%.
+    *   *Color:* Use a tinted version of `on_surface` (#191c1d) rather than pure black to mimic natural ambient light.
+*   **The "Ghost Border" Fallback:** If a container lacks contrast against a specific background, use a "Ghost Border": `outline-variant` (#c3c7cd) at **15% opacity**. Never use 100% opaque borders.
+
+---
+
+## 5. Components & Layout Elements
+
+### Cards & Containers
+- **Corner Radius:** Use `xl` (1.5rem / 24px) for main content cards and `lg` (1rem / 16px) for inner nested elements.
+- **Separation:** **Forbid the use of divider lines.** Use vertical white space (Spacing scale `8` or `10`) to separate newsletter sections.
+
+### Buttons (The "Jewel" Elements)
+- **Primary:** Background `primary`, text `on_primary`. Use a slight 4px vertical offset shadow to make it feel tactile.
+- **Secondary:** Background `secondary_container`, text `on_secondary_container`. No shadow.
+- **Tertiary:** Ghost style. `title-sm` typography with a `primary` color and a subtle underline that appears on hover.
+
+### Inputs & Fields
+- **Styling:** Use `surface_container_highest` for the input background with a `md` (0.75rem) radius. 
+- **Active State:** Change background to `surface_container_lowest` and apply a 1px "Ghost Border" of `primary` at 30% opacity.
+
+### Signature Component: The "Editorial Pull-Quote"
+A custom component for the newsletter. Use `newsreader` in `title-lg`, italicized, with a thick 4px vertical bar on the left using the `primary_fixed` (#cce5ff) color. No background card—let the typography breathe on the `surface`.
+
+---
+
+## 6. Do’s and Don’ts
+
+### Do:
+*   **Embrace Whitespace:** Use the spacing scale `16` (5.5rem) or `20` (7rem) between major editorial sections.
+*   **Mix Type:** Use Manrope for data points and Newsreader for the "Why it matters" analysis.
+*   **Tonal Overlap:** Let images or illustrations slightly overlap the boundary of a `surface-container` to break the "boxed-in" feel.
+
+### Don’t:
+*   **No Pure Black:** Never use #000000. Use `on_background` (#191c1d) for the deepest tones.
+*   **No Heavy Shadows:** If the shadow is immediately obvious, it is too dark. It should be felt, not seen.
+*   **No Grid-Lock:** Avoid perfectly symmetrical 3-column grids. Try a 2/3 and 1/3 split to create a more dynamic, editorial rhythm.
+*   **No "Default" Borders:** Avoid the `outline` token at full strength. It kills the premium, "soft" aesthetic of the system.
--- a/stitch_V1/code.html
+++ b/stitch_V1/code.html
@ -0,0 +1,265 @@
+<!DOCTYPE html>
+
+<html class="light" lang="fr"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>Le Brief Digital66</title>
+<!-- Material Symbols -->
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<!-- Google Fonts: Manrope & Newsreader -->
+<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&amp;family=Newsreader:ital,wght@0,400;0,500;1,400;1,500&amp;display=swap" rel="stylesheet"/>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<script id="tailwind-config">
+        tailwind.config = {
+          darkMode: "class",
+          theme: {
+            extend: {
+              colors: {
+                "on-tertiary-fixed-variant": "#384858",
+                "on-error": "#ffffff",
+                "on-surface-variant": "#42474d",
+                "tertiary-fixed": "#d3e4f7",
+                "outline-variant": "#c3c7cd",
+                "secondary-fixed-dim": "#b9c9d3",
+                "on-primary-container": "#b5d4f2",
+                "background": "#f8fafa",
+                "secondary-container": "#d2e2ec",
+                "tertiary-container": "#4a5b6b",
+                "on-background": "#191c1d",
+                "on-surface": "#191c1d",
+                "on-error-container": "#93000a",
+                "on-tertiary": "#ffffff",
+                "surface-tint": "#43617c",
+                "on-tertiary-fixed": "#0b1d2b",
+                "secondary": "#516169",
+                "error-container": "#ffdad6",
+                "inverse-surface": "#2e3131",
+                "surface-dim": "#d8dada",
+                "surface": "#f8fafa",
+                "inverse-primary": "#abcae8",
+                "surface-variant": "#e1e3e3",
+                "on-secondary-fixed": "#0e1d25",
+                "on-secondary-fixed-variant": "#3a4951",
+                "tertiary": "#334453",
+                "surface-container-lowest": "#ffffff",
+                "primary": "#26445d",
+                "surface-container": "#eceeee",
+                "on-tertiary-container": "#c1d2e5",
+                "surface-container-low": "#f2f4f4",
+                "on-primary-fixed-variant": "#2b4963",
+                "surface-container-high": "#e6e8e9",
+                "error": "#ba1a1a",
+                "on-primary-fixed": "#001d31",
+                "on-secondary": "#ffffff",
+                "primary-fixed": "#cce5ff",
+                "primary-fixed-dim": "#abcae8",
+                "tertiary-fixed-dim": "#b7c8db",
+                "outline": "#73777d",
+                "on-secondary-container": "#55656d",
+                "on-primary": "#ffffff",
+                "surface-bright": "#f8fafa",
+                "secondary-fixed": "#d5e5ef",
+                "inverse-on-surface": "#eff1f1",
+                "primary-container": "#3e5c76",
+                "surface-container-highest": "#e1e3e3"
+              },
+              fontFamily: {
+                "headline": ["Manrope"],
+                "body": ["Newsreader"],
+                "label": ["Manrope"]
+              },
+              borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "1.5rem", "full": "9999px"},
+            },
+          },
+        }
+      </script>
+<style>
+        .material-symbols-outlined {
+            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+            display: inline-block;
+            line-height: 1;
+            text-transform: none;
+            letter-spacing: normal;
+            word-wrap: normal;
+            white-space: nowrap;
+            direction: ltr;
+        }
+        body { -webkit-font-smoothing: antialiased; }
+    </style>
+</head>
+<body class="bg-surface text-on-surface font-body selection:bg-primary-fixed selection:text-on-primary-fixed">
+<!-- 1. Header / Brand Block -->
+<header class="bg-surface border-b border-outline-variant px-6 py-6 max-w-xl mx-auto flex justify-between items-center">
+<div class="flex flex-col">
+<span class="text-xl font-black tracking-tighter text-primary font-headline">Le Brief Digital66</span>
+<span class="font-headline font-bold text-[10px] tracking-[0.2em] uppercase text-secondary mt-1">Édition Hebdomadaire</span>
+</div>
+<div class="flex items-center gap-4">
+<span class="font-headline font-bold text-[11px] uppercase text-secondary">12 Juin 2024</span>
+<div class="w-10 h-10 rounded-full bg-secondary-container overflow-hidden border border-outline-variant">
+<img class="w-full h-full object-cover" data-alt="professional portrait of a creative director" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAG_2MabCQMZJ20eMCX-gQdAYzd1STuDfFnru-n-Gb-HizW1maLaedIU4moaArLFDjsWE0whuEG8sqnXPMkYv2PnYhGyrMQ33LjIJ_pH63teIhH2j31ymrkgRM1mdzhhN-cMMUhEWjqHW2nl-Ksd-mU71FxRgbJ-E6Y9M_OrWUIqR1nR6ys25cUJhY9EBf1bmjLYWv4Y1xkxihF8us6IfSuSI8mvx2P6s8cBeytILeYcg-GcLd01z3Dg7KBgVx3DVoGYzXZIxPScRA"/>
+</div>
+</div>
+</header>
+<main class="max-w-xl mx-auto px-6 py-12">
+<!-- 2. Intro Section -->
+<section class="mb-20">
+<h1 class="font-headline font-extrabold text-4xl mb-8 tracking-tight text-on-surface leading-[1.1]">
+            Bonjour, voici l'essentiel de la semaine...
+        </h1>
+<p class="text-2xl leading-relaxed text-secondary italic font-body">
+            Cette semaine, nous explorons comment l'intelligence artificielle redéfinit les frontières de la création éditoriale. Entre automatisation et intuition humaine, le curseur se déplace.
+        </p>
+</section>
+<!-- 3. Main Topic Section -->
+<section class="mb-24">
+<div class="bg-primary p-1 rounded-xl mb-8">
+<div class="relative rounded-lg overflow-hidden">
+<img class="w-full h-72 object-cover block" data-alt="abstract visualization of neural networks" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCn3hjW5ImhkEpemDHQKwRMabDzaChOQJ4zWR6ZBwk-vOi_1nTeox9JlfG4Buufnb8RiaEYJ2aMJPh3erKq-2si2HHDBw8pyu04mgpVhhO5YdGC16eafBz9HolVYRSG12pfHBOyzMpEmD5rdkoxb9JCQDpSS8QGIK5Lehi6Q-nCFh2cgAq5oMp4kDpYIeY07j60fVdUxvyDciMwc-z4TH2QfuoIMs1UT4NLqVrs4UpGB8rX4pHxI3CPSX5gJoxWlNAvnqZHvnaAHmk"/>
+<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
+<div class="absolute bottom-0 left-0 p-8 w-full">
+<span class="inline-block px-4 py-1.5 bg-primary-fixed text-on-primary-fixed text-xs font-headline font-extrabold uppercase tracking-widest rounded-full mb-4">Dossier Spécial</span>
+<h2 class="font-headline font-bold text-3xl text-white leading-tight">L'Ère Post-Prompt : Au-delà de la commande textuelle.</h2>
+</div>
+</div>
+</div>
+<div class="px-2">
+<p class="text-xl leading-relaxed text-on-surface">
+                Il ne s'agit plus de savoir "comment" demander, mais de comprendre "ce que" l'on veut réellement accomplir. L'IA devient un partenaire de réflexion plutôt qu'un simple outil d'exécution.
+            </p>
+</div>
+</section>
+<!-- 4. Key Takeaway Cards (Compact & Safe) -->
+<section class="mb-24 space-y-4">
+<div class="bg-surface-container-low border border-outline-variant p-5 rounded-xl">
+<div class="flex items-center gap-4">
+<div class="bg-primary text-white w-10 h-10 rounded flex items-center justify-center shrink-0">
+<span class="material-symbols-outlined text-xl">psychology</span>
+</div>
+<div>
+<h3 class="font-headline font-bold text-lg text-primary">Cognition Augmentée</h3>
+<p class="text-secondary text-sm">L'IA étend votre portée analytique pour des décisions plus rapides.</p>
+</div>
+</div>
+</div>
+<div class="bg-surface-container-low border border-outline-variant p-5 rounded-xl">
+<div class="flex items-center gap-4">
+<div class="bg-primary text-white w-10 h-10 rounded flex items-center justify-center shrink-0">
+<span class="material-symbols-outlined text-xl">auto_awesome</span>
+</div>
+<div>
+<h3 class="font-headline font-bold text-lg text-primary">Symphonie Créative</h3>
+<p class="text-secondary text-sm">Une collaboration permettant d'explorer des territoires inaccessibles.</p>
+</div>
+</div>
+</div>
+<div class="bg-surface-container-low border border-outline-variant p-5 rounded-xl">
+<div class="flex items-center gap-4">
+<div class="bg-primary text-white w-10 h-10 rounded flex items-center justify-center shrink-0">
+<span class="material-symbols-outlined text-xl">shield</span>
+</div>
+<div>
+<h3 class="font-headline font-bold text-lg text-primary">Éthique par Design</h3>
+<p class="text-secondary text-sm">L'intégrité des données devient un avantage concurrentiel majeur.</p>
+</div>
+</div>
+</div>
+</section>
+<!-- 5. Actionable Tip Block (Simple Layout) -->
+<section class="bg-primary text-white p-8 rounded-xl mb-24">
+<div class="mb-8 border-b border-primary-container pb-4">
+<h3 class="font-headline font-extrabold text-xl flex items-center gap-3">
+<span class="material-symbols-outlined text-primary-fixed">lightbulb</span>
+                Optimisez votre flux IA
+            </h3>
+</div>
+<table class="w-full border-collapse">
+<tbody><tr class="align-top">
+<td class="pr-4 py-3"><span class="w-6 h-6 rounded-full bg-primary-fixed text-on-primary-fixed flex items-center justify-center font-headline font-bold text-[10px]">1</span></td>
+<td class="py-3 text-on-primary-container text-sm leading-relaxed">Définissez le rôle avant la tâche (ex: "Agis comme un expert UX").</td>
+</tr>
+<tr class="align-top">
+<td class="pr-4 py-3"><span class="w-6 h-6 rounded-full bg-primary-fixed text-on-primary-fixed flex items-center justify-center font-headline font-bold text-[10px]">2</span></td>
+<td class="py-3 text-on-primary-container text-sm leading-relaxed">Utilisez des exemples concrets pour guider le style et le ton.</td>
+</tr>
+<tr class="align-top">
+<td class="pr-4 py-3"><span class="w-6 h-6 rounded-full bg-primary-fixed text-on-primary-fixed flex items-center justify-center font-headline font-bold text-[10px]">3</span></td>
+<td class="py-3 text-on-primary-container text-sm leading-relaxed">Itérez par petites touches plutôt que de chercher la perfection immédiate.</td>
+</tr>
+</tbody></table>
+</section>
+<!-- 6. Tool / Resource Block -->
+<section class="mb-24 text-center bg-surface-container-lowest border border-outline-variant p-10 rounded-xl">
+<div class="w-16 h-16 bg-primary-container/10 rounded-full flex items-center justify-center mx-auto mb-6">
+<span class="material-symbols-outlined text-primary text-3xl">deployed_code</span>
+</div>
+<h4 class="font-headline font-bold text-2xl mb-3 text-primary">Atelier GPT-V</h4>
+<p class="text-secondary mb-8 text-base max-w-sm mx-auto">Une suite d'outils open-source pour analyser vos données visuelles avec une précision chirurgicale.</p>
+<a class="inline-flex items-center justify-center gap-3 px-10 py-4 bg-primary text-white font-headline font-bold rounded-lg hover:bg-primary/90 transition-colors" href="#">
+            Découvrir l'outil
+            <span class="material-symbols-outlined text-sm">arrow_forward</span>
+</a>
+</section>
+<!-- 7. Critical Reflection Block -->
+<section class="mb-24 border-l-4 border-primary pl-10 py-4">
+<span class="font-headline font-bold text-primary text-[10px] uppercase tracking-[0.2em] mb-4 block">Point de vue</span>
+<p class="font-body italic text-2xl text-on-surface leading-tight">
+            "La technologie ne doit pas être une fuite en avant, mais un retour à l'essentiel : libérer le temps humain pour ce qui ne peut être automatisé : l'empathie, la nuance et la vision."
+        </p>
+<p class="mt-6 font-headline font-bold text-secondary text-sm">— Jean-Marc S., Lead Strategist</p>
+</section>
+<!-- 8. Light Moment Block -->
+<section class="bg-surface-container-high p-8 rounded-xl mb-24 text-center">
+<span class="material-symbols-outlined text-tertiary mb-3 text-3xl">sentiment_satisfied</span>
+<h5 class="font-headline font-bold text-on-surface mb-2 text-lg italic">L'anecdote de la semaine</h5>
+<p class="text-secondary text-sm leading-relaxed mb-6">Saviez-vous que le premier "bug" informatique était une véritable mite (moth) coincée dans un relais du Harvard Mark II en 1947 ?</p>
+<a class="text-primary font-headline font-bold text-xs uppercase tracking-widest border-b-2 border-primary/20 pb-1 hover:border-primary transition-colors" href="#">Lire l'archive</a>
+</section>
+<!-- 9. Premium Footer -->
+<footer class="pt-16 pb-12 border-t border-outline-variant text-center">
+<div class="mb-10">
+<div class="font-headline font-black text-2xl text-primary tracking-tighter mb-2">Le Brief Digital66</div>
+<p class="font-body italic text-sm text-secondary">La prospective technologique au service de l'humain.</p>
+</div>
+<div class="flex justify-center gap-10 mb-10 text-xs font-headline font-bold uppercase tracking-widest text-primary">
+<a class="hover:text-secondary transition-colors" href="#">Confidentialité</a>
+<a class="hover:text-secondary transition-colors" href="#">Contact</a>
+</div>
+<div class="mb-10 flex justify-center gap-4">
+<a class="w-10 h-10 border border-outline-variant rounded-full flex items-center justify-center text-secondary hover:bg-surface-container hover:text-primary transition-colors" href="#">
+<span class="material-symbols-outlined text-lg">share</span>
+</a>
+<a class="w-10 h-10 border border-outline-variant rounded-full flex items-center justify-center text-secondary hover:bg-surface-container hover:text-primary transition-colors" href="#">
+<span class="material-symbols-outlined text-lg">mail</span>
+</a>
+</div>
+<div class="py-8 bg-surface-container-low rounded-xl">
+<p class="text-[10px] text-secondary font-headline font-semibold mb-3 uppercase tracking-widest">Vous recevez cet email car vous êtes abonné à Digital66</p>
+<a class="text-[10px] text-error font-headline font-bold uppercase tracking-widest underline decoration-error/30 hover:decoration-error" href="#">Se désabonner de cette liste</a>
+</div>
+<div class="mt-12 text-[10px] uppercase tracking-[0.3em] text-outline font-headline font-bold">
+            Perpignan • France
+        </div>
+</footer>
+</main>
+<!-- Bottom Nav (UI Only, simplified for mobile feel) -->
+<nav class="fixed bottom-0 left-0 w-full z-50 flex justify-around items-center px-4 pb-8 pt-4 bg-white/95 border-t border-outline-variant backdrop-blur-md">
+<a class="flex flex-col items-center justify-center text-primary" href="#">
+<span class="material-symbols-outlined">newspaper</span>
+<span class="font-headline text-[9px] font-bold uppercase tracking-widest mt-1">Direct</span>
+</a>
+<a class="flex flex-col items-center justify-center text-secondary opacity-60" href="#">
+<span class="material-symbols-outlined">auto_stories</span>
+<span class="font-headline text-[9px] font-bold uppercase tracking-widest mt-1">Dossiers</span>
+</a>
+<a class="flex flex-col items-center justify-center text-secondary opacity-60" href="#">
+<span class="material-symbols-outlined">bookmark</span>
+<span class="font-headline text-[9px] font-bold uppercase tracking-widest mt-1">Favoris</span>
+</a>
+<a class="flex flex-col items-center justify-center text-secondary opacity-60" href="#">
+<span class="material-symbols-outlined">settings</span>
+<span class="font-headline text-[9px] font-bold uppercase tracking-widest mt-1">Profil</span>
+</a>
+</nav>
+<div class="h-24"></div> <!-- Spacer for fixed nav -->
+</body></html>
--- a/stitch_V1/favicon.png
+++ b/stitch_V1/favicon.png
--- a/stitch_V1/listmonk_public_custom.css
+++ b/stitch_V1/listmonk_public_custom.css
@ -0,0 +1,92 @@
+/*
+ * Listmonk — CSS pages publiques (confirmation, abonnement, etc.)
+ *
+ * Coller le contenu (sans ce bloc commentaire si tu préfères) dans :
+ *   Admin → Settings → Appearance → Public → Custom CSS
+ *
+ * Référence visuelle : DESIGN.md + palette page d’inscription (newsletter-service).
+ * Carte multicanal (template mail, Directus, inscription) : docs/18_guide_visuel_multicanal.md
+ * Après modification : copier-coller dans Listmonk → Save → tester en navigation privée.
+ */
+
+@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Newsreader:ital,wght@0,400;0,500&display=swap");
+
+body {
+  font-family: "Newsreader", Georgia, serif !important;
+  background: #f8fafa !important;
+  color: #191c1d !important;
+  -webkit-font-smoothing: antialiased;
+}
+
+h1,
+h2,
+h3 {
+  font-family: "Manrope", system-ui, sans-serif !important;
+  font-weight: 800 !important;
+  color: #26445d !important;
+  letter-spacing: -0.02em;
+}
+
+p,
+li,
+label {
+  font-family: "Newsreader", Georgia, serif !important;
+  color: #516169;
+}
+
+a {
+  color: #26445d !important;
+}
+
+a:hover {
+  color: #3e5c76 !important;
+}
+
+.button,
+button,
+input[type="submit"] {
+  font-family: "Manrope", system-ui, sans-serif !important;
+  font-weight: 600 !important;
+  background: linear-gradient(135deg, #26445d, #3e5c76) !important;
+  color: #fff !important;
+  border: none !important;
+  border-radius: 0.75rem !important;
+  box-shadow: 0 4px 14px rgba(38, 68, 93, 0.22);
+  padding: 0.65rem 1.25rem;
+}
+
+.button:hover,
+button:hover,
+input[type="submit"]:hover {
+  filter: brightness(1.05);
+}
+
+input[type="checkbox"] {
+  accent-color: #26445d;
+}
+
+.header .logo img {
+  display: block;
+  margin: 0 auto 1rem;
+  max-height: 3rem;
+  width: auto;
+}
+
+.container,
+main .container {
+  background: #ffffff;
+  border-radius: 1.5rem;
+  box-shadow: 0 28px 56px rgba(25, 28, 29, 0.055);
+}
+
+footer.container {
+  margin-top: 1.5rem !important;
+  font-size: 0.85rem !important;
+  opacity: 0.55;
+}
+
+/* Pour masquer complètement le pied « Powered by listmonk » : décommenter si conforme à ta licence.
+footer.container {
+  display: none !important;
+}
+*/
--- a/stitch_V1/listmonk_template.html
+++ b/stitch_V1/listmonk_template.html
@ -0,0 +1,423 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <!-- Listmonk : sujet de campagne -->
+  <title>{{ .Campaign.Subject }}</title>
+  <!-- Stitch / DESIGN.md : Manrope (titres) + Newsreader (corps) -->
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&amp;family=Newsreader:ital,wght@0,400;0,500;1,400&amp;display=swap" rel="stylesheet" />
+  <style>
+    /* --- Tokens alignés DESIGN.md (Stitch V1) — pas de #000 --- */
+    :root {
+      --surface: #f8fafa;
+      --on-surface: #191c1d;
+      --primary: #26445d;
+      --primary-container: #3e5c76;
+      --on-primary: #ffffff;
+      --on-primary-container: #c1d2e5;
+      --secondary: #516169;
+      --primary-fixed: #cce5ff;
+      --surface-container-low: #f2f4f4;
+      --surface-container: #eceeee;
+      --surface-container-high: #e6e8e9;
+      --surface-lowest: #ffffff;
+      --outline-variant: #c3c7cd;
+      --shadow: rgba(25, 28, 29, 0.06);
+    }
+
+    body {
+      margin: 0;
+      padding: 0;
+      background-color: var(--surface);
+      font-family: "Newsreader", Georgia, "Times New Roman", serif;
+      font-size: 17px;
+      line-height: 1.65;
+      color: var(--on-surface);
+      -webkit-font-smoothing: antialiased;
+    }
+
+    .outer {
+      width: 100%;
+      background-color: var(--surface);
+      padding: 40px 16px 48px;
+    }
+
+    .container {
+      max-width: 640px;
+      margin: 0 auto;
+      background: var(--surface-lowest);
+      border-radius: 24px;
+      overflow: hidden;
+      box-shadow: 0 40px 60px var(--shadow);
+    }
+
+    /* En-tête éditorial : gradient primary → primary-container (Stitch) */
+    .header {
+      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%);
+      color: var(--on-primary);
+      padding: 36px 40px 32px;
+    }
+
+    .header-kicker {
+      font-family: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
+      font-size: 10px;
+      font-weight: 700;
+      letter-spacing: 0.2em;
+      text-transform: uppercase;
+      color: rgba(255, 255, 255, 0.75);
+      margin: 0 0 12px 0;
+    }
+
+    .brand {
+      font-family: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
+      font-size: 26px;
+      font-weight: 800;
+      letter-spacing: -0.03em;
+      margin: 0 0 8px 0;
+      line-height: 1.15;
+    }
+
+    .subject-line {
+      font-family: "Manrope", sans-serif;
+      font-size: 15px;
+      font-weight: 600;
+      line-height: 1.4;
+      color: rgba(255, 255, 255, 0.92);
+      margin: 0 0 14px 0;
+    }
+
+    .tagline {
+      margin: 0;
+      font-family: "Manrope", sans-serif;
+      font-size: 13px;
+      font-weight: 500;
+      color: rgba(255, 255, 255, 0.72);
+      line-height: 1.5;
+    }
+
+    /* Zone contenu : fragment Directus (.nd-issue) */
+    .content {
+      padding: 40px 36px 48px;
+      background: var(--surface-lowest);
+    }
+
+    .content .nd-issue {
+      margin: 0;
+    }
+
+    /* Séparation sans « ligne dure » : espace + léger décalage de fond (règle DESIGN) */
+    .content .nd-section {
+      margin: 0 0 40px 0;
+      padding: 0 0 36px 0;
+      border-bottom: none;
+    }
+
+    .content .nd-section:last-child {
+      margin-bottom: 0;
+      padding-bottom: 0;
+    }
+
+    .content .nd-section__title {
+      font-family: "Manrope", sans-serif;
+      margin: 0 0 14px 0;
+      font-size: 1.25rem;
+      font-weight: 700;
+      line-height: 1.25;
+      color: var(--on-surface);
+      letter-spacing: -0.02em;
+    }
+
+    .content .nd-section__body {
+      font-size: 1.05rem;
+      line-height: 1.7;
+      color: var(--on-surface);
+    }
+
+    .content .nd-section__body p {
+      margin: 0 0 1rem 0;
+    }
+
+    .content .nd-section__body p:last-child {
+      margin-bottom: 0;
+    }
+
+    .content .nd-section__body a {
+      color: var(--primary);
+      text-decoration: underline;
+      text-decoration-color: rgba(38, 68, 93, 0.35);
+      word-break: break-word;
+    }
+
+    /* Accroche + libellé sujet (fragment : `accroche · Tag` — issue_export._render_hook_line_html) */
+    .content .nd-section__body p.nd-hook {
+      font-family: "Manrope", sans-serif;
+      font-weight: 600;
+      font-size: 1.08rem;
+      line-height: 1.4;
+      color: var(--on-surface);
+    }
+
+    .content .nd-topic-tag {
+      display: inline-block;
+      font-family: "Manrope", sans-serif;
+      font-weight: 700;
+      font-size: 0.72rem;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      color: var(--primary);
+      background: var(--surface-container);
+      border: 1px solid var(--outline-variant);
+      padding: 3px 10px;
+      border-radius: 999px;
+      margin-left: 8px;
+      vertical-align: middle;
+      white-space: nowrap;
+      max-width: 100%;
+      box-sizing: border-box;
+    }
+
+    /* Bloc « Pour aller plus loin » — barre type pull-quote (primary_fixed) */
+    .content .nd-more {
+      margin-top: 16px;
+      padding: 14px 16px 14px 18px;
+      background: var(--surface-container-low);
+      border-left: 4px solid var(--primary-fixed);
+      border-radius: 0 12px 12px 0;
+      font-size: 15px;
+      line-height: 1.55;
+    }
+
+    .content .nd-more__label {
+      font-family: "Manrope", sans-serif;
+      font-weight: 700;
+      font-size: 11px;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      color: var(--primary);
+      display: block;
+      margin-bottom: 6px;
+    }
+
+    /* --- Par rôle (fragment issue_export.py data-role) — ordre éditorial :
+         light_moment → intro → main_topic → key_takeaway_* → critical_reflection → actionable_tip --- */
+
+    .content .nd-section[data-role="light_moment"] {
+      background: var(--surface-container-high);
+      padding: 24px 22px;
+      border-radius: 16px;
+      text-align: center;
+    }
+
+    .content .nd-section[data-role="light_moment"] .nd-section__title {
+      font-style: italic;
+      color: var(--on-surface);
+    }
+
+    .content .nd-section[data-role="light_moment"] .nd-section__body {
+      font-size: 0.95rem;
+      color: var(--secondary);
+    }
+
+    .content .nd-section[data-role="intro"] .nd-section__title {
+      font-size: 0.72rem;
+      font-weight: 800;
+      text-transform: uppercase;
+      letter-spacing: 0.14em;
+      color: var(--secondary);
+    }
+
+    .content .nd-section[data-role="intro"] .nd-section__body p:first-of-type {
+      font-family: "Manrope", sans-serif;
+      font-size: 1.35rem;
+      font-weight: 700;
+      line-height: 1.2;
+      color: var(--on-surface);
+      font-style: normal;
+    }
+
+    .content .nd-section[data-role="intro"] .nd-section__body p + p {
+      font-size: 1.15rem;
+      font-style: italic;
+      color: var(--secondary);
+    }
+
+    .content .nd-section[data-role="main_topic"] {
+      padding: 28px 24px 32px;
+      margin-left: -8px;
+      margin-right: -8px;
+      background: var(--surface-container-low);
+      border-radius: 16px;
+    }
+
+    .content .nd-section[data-role="main_topic"] .nd-section__title {
+      font-size: 1.5rem;
+      color: var(--primary);
+    }
+
+    .content .nd-section[data-role^="key_takeaway"] {
+      background: var(--surface-container-low);
+      padding: 22px 22px 20px;
+      border-radius: 16px;
+      border: 1px solid rgba(195, 199, 205, 0.35);
+    }
+
+    .content .nd-section[data-role^="key_takeaway"] .nd-section__title {
+      font-size: 1.05rem;
+      color: var(--primary);
+    }
+
+    .content .nd-section[data-role="critical_reflection"] {
+      border-left: 4px solid var(--primary);
+      padding: 8px 0 8px 24px;
+      margin-left: 4px;
+      background: transparent;
+    }
+
+    .content .nd-section[data-role="critical_reflection"] .nd-section__title {
+      font-size: 0.65rem;
+      letter-spacing: 0.18em;
+      text-transform: uppercase;
+      color: var(--primary);
+    }
+
+    .content .nd-section[data-role="critical_reflection"] .nd-section__body {
+      font-size: 1.2rem;
+      font-style: italic;
+      line-height: 1.35;
+    }
+
+    .content .nd-section[data-role="actionable_tip"] {
+      background: linear-gradient(145deg, var(--primary) 0%, var(--primary-container) 100%);
+      color: var(--on-primary);
+      padding: 28px 24px;
+      border-radius: 16px;
+    }
+
+    .content .nd-section[data-role="actionable_tip"] .nd-section__title {
+      color: var(--on-primary);
+      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+      padding-bottom: 12px;
+      margin-bottom: 16px;
+    }
+
+    .content .nd-section[data-role="actionable_tip"] .nd-section__body {
+      color: var(--on-primary-container);
+    }
+
+    .content .nd-section[data-role="actionable_tip"] .nd-section__body a {
+      color: #3d4f63;
+      text-decoration-color: rgba(61, 79, 99, 0.45);
+    }
+
+    .footer {
+      background: var(--surface-container-low);
+      padding: 28px 36px 32px;
+      border-top: 1px solid rgba(195, 199, 205, 0.45);
+      font-family: "Manrope", sans-serif;
+      font-size: 12px;
+      color: var(--secondary);
+      line-height: 1.65;
+      text-align: center;
+    }
+
+    .footer-brand {
+      font-weight: 800;
+      font-size: 18px;
+      letter-spacing: -0.02em;
+      color: var(--primary);
+      margin: 0 0 6px 0;
+    }
+
+    .footer-tagline {
+      font-family: "Newsreader", Georgia, serif;
+      font-style: italic;
+      font-size: 13px;
+      margin: 0 0 18px 0;
+    }
+
+    .footer a {
+      color: var(--primary);
+      font-weight: 700;
+      text-decoration: underline;
+      text-decoration-color: rgba(38, 68, 93, 0.35);
+    }
+
+    .footer-legal {
+      margin-top: 20px;
+      padding: 18px 16px;
+      background: rgba(255, 255, 255, 0.7);
+      border-radius: 12px;
+      font-size: 10px;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+    }
+
+    .track {
+      margin-top: 16px;
+      font-size: 1px;
+      line-height: 0;
+      color: transparent;
+    }
+
+    @media (max-width: 640px) {
+      .outer {
+        padding: 24px 12px 32px;
+      }
+
+      .header,
+      .content,
+      .footer {
+        padding-left: 22px;
+        padding-right: 22px;
+      }
+
+      .content {
+        padding-top: 32px;
+        padding-bottom: 36px;
+      }
+
+      .brand {
+        font-size: 22px;
+      }
+
+      .content .nd-section[data-role="main_topic"] .nd-section__title {
+        font-size: 1.35rem;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="outer">
+    <div class="container">
+      <div class="header">
+        <p class="header-kicker">Édition hebdomadaire</p>
+        <h1 class="brand">Le Brief Digital 66</h1>
+        <p class="subject-line">{{ .Campaign.Subject }}</p>
+        <p class="tagline">IA · Productivité · Veille · Pyrénées-Orientales</p>
+      </div>
+
+      <div class="content">
+        {{ template "content" . }}
+      </div>
+
+      <div class="footer">
+        <p class="footer-brand">Le Brief Digital 66</p>
+        <p class="footer-tagline">La prospective technologique au service de l'humain.</p>
+        <p>Vous recevez cet e-mail car vous êtes inscrit à la newsletter.</p>
+        <p>
+          <a href="{{ MessageURL }}">Voir dans le navigateur</a>
+          ·
+          <a href="{{ UnsubscribeURL }}">Se désabonner</a>
+        </p>
+        <div class="footer-legal">
+          Perpignan · France · Newsletter locale
+        </div>
+        <div class="track">{{ TrackView }}</div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
--- a/stitch_V1/logo_brief66.png
+++ b/stitch_V1/logo_brief66.png
--- a/stitch_V1/screen.png
+++ b/stitch_V1/screen.png