diff --git a/public/assets/css/projet.css b/public/assets/css/projet.css
index 64eae39..5380b18 100644
--- a/public/assets/css/projet.css
+++ b/public/assets/css/projet.css
@@ -1,6 +1,6 @@
 /* ═══════════════════════════════════════════════════════════
  projet.css
- Grille des récits — template project.php
+ Grille des récits — template projet.php
 
  ⚠ Ce fichier utilise UNIQUEMENT les variables définies dans
    style.css  → --color-*, --sans-serif, --mono, --border-radius, --space-*
@@ -14,8 +14,8 @@
 /* ───────────────────────────────────────────
    BASE BODY
 ─────────────────────────────────────────── */
-body[data-template="project"] {
-  background-color: var(--background-color);
+body[data-template="projet"] {
+  background-color: var(--nw-paper);
   color: var(--nw-ink);
   min-height: 100vh;
 }
@@ -143,7 +143,6 @@ body[data-template="project"] {
   /*overflow: hidden;*/
   transition: transform var(--nw-transition), box-shadow var(--nw-transition);
   border: 1px solid var(--nw-rule);
-  background: var(--nw-paper);
 
   /* Animation d'entrée en cascade */
   opacity: 0;
@@ -390,11 +389,12 @@ body[data-template="project"] {
 @media (max-width: 900px) {
   .pj-header__content { padding: 2rem 1.5rem 2.5rem; }
   .pj-main { padding: 0 0 4rem; }
-  .pj-grid { grid-template-columns: 1fr; padding: 0 1rem;}
+  .pj-grid { grid-template-columns: 1fr; gap: 1px; }
 }
 
 @media (max-width: 600px) {
   .pj-card__cover { height: 180px; }
+  .pj-card__footer { flex-direction: column; align-items: stretch; }
   .pj-btn { justify-content: center; }
 }
 
diff --git a/public/assets/css/web.css b/public/assets/css/web.css
index 8083c40..744513d 100644
--- a/public/assets/css/web.css
+++ b/public/assets/css/web.css
@@ -87,6 +87,7 @@
 }
 
 .nw-sidenav__label {
+  font-family: var(--nw-font-ui);
   font-size: 0.89rem;
   font-weight: 500;
   letter-spacing: 0.04em;
@@ -100,7 +101,6 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  text-align: right;
 }
 
 .nw-sidenav__link:hover .nw-sidenav__label,
@@ -158,6 +158,7 @@
 }
 
 .nw-sidenav__sub-label {
+  font-family: var(--nw-font-ui);
   font-size: 0.72rem;
   font-weight: 400;
   letter-spacing: 0.03em;
@@ -215,7 +216,6 @@
   top: 20px;
   left: 20px;
   transition: transform 0.2s linear;
-  z-index: 10;
 }
 
 .nw-prev-btn a{
@@ -282,6 +282,7 @@
 }
 
 .nw-hero__author {
+  font-family: var(--nw-font-ui);
   font-size: 0.875rem;
   color: rgba(255,255,255,0.75);
   letter-spacing: 0.06em;
@@ -303,19 +304,29 @@
 /* ───────────────────────────────────────────
    INTRODUCTION
 ─────────────────────────────────────────── */
-.nw-introduction__body {
-  font-family: var(--nw-font-display);
-  color: #fff;
-  font-size: 1.4rem;
-  line-height: 1.4;
-  margin: 2rem 0 0;
-  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
-  font-weight: 300;
-  font-style: italic;
+.nw-introduction {
+  padding: 4rem 1rem;
+  background: var(--nw-paper);
 }
 
-.nw-introduction__body p{
-  margin-bottom: 0;
+.nw-introduction__body {
+  font-size: 1.4rem;
+  line-height: 1.8;
+  color: var(--nw-ink-soft);
+  font-weight: 300;
+  font-style: italic;
+  border-left: 3px solid var(--nw-accent);
+  padding-left: 2rem;
+}
+
+.nw-introduction__body p:first-child::first-letter {
+  font-family: var(--nw-font-display);
+  font-size: 5.7rem;
+  font-weight: 800;
+  line-height: 0.8;
+  float: left;
+  margin: 0.05em 0.12em 0 0;
+  color: var(--nw-accent);
 }
 
 /* ───────────────────────────────────────────
@@ -399,6 +410,7 @@
 }
 
 .nw-tag {
+  font-family: var(--nw-font-ui);
   font-size: 0.7rem;
   font-weight: 600;
   letter-spacing: 0.08em;
@@ -413,7 +425,7 @@
    PROSE (writer fields)
 ─────────────────────────────────────────── */
 .nw-prose {
-  font-size: 1.4rem;
+  font-size: 1.3rem;
   line-height: 1.8;
   color: var(--nw-ink-soft);
   margin-bottom: 2rem;
@@ -439,29 +451,16 @@
   background: var(--nw-paper-warm);
 }
 
-.nw-section--map__wrapper{
-  margin: 0 auto;
-  max-width: var(--nw-max-w);
-
-}
-
-/*.nw-section--map__wrapper{
-  display: flex;
-}*/
-
-.nw-section__header__wrapper{
-  /*width: 33.3333%;*/
-}
-
-.nw-map-part{
-  /*width: 66.6666%;*/
-  margin: 1.5rem 0rem 4rem 0;
+.nw-section--map .nw-container {
+  margin-bottom: 2rem;
 }
 
 .nw-map-wrap {
   position: relative;
+  width: 100%;
   height: clamp(400px, 55vh, 700px);
-  border: 1px solid var(--nw-rule);
+  margin: 5rem 0 2rem;
+  border-top: 3px solid var(--nw-accent);
   overflow: hidden;
 }
 
@@ -531,6 +530,7 @@
   display: inline-flex;
   align-items: center;
   gap: 0.3rem;
+  font-family: var(--nw-font-ui);
   font-size: 0.72rem;
   font-weight: 600;
   letter-spacing: 0.06em;
@@ -647,7 +647,7 @@
 
 /* Corps texte du marqueur */
 .nw-map-marker__body {
-  padding: 1rem 0 2rem 3rem;
+  padding: 2rem 0 2rem 3rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -676,7 +676,6 @@
   color: var(--nw-ink-soft);
 }
 
-.nw-map-marker__content a { color: var(--nw-accent); }
 .nw-map-marker__content p { margin: 0 0 1.1em; }
 
 .nw-map-marker__content h2,
@@ -715,6 +714,7 @@
 }
 
 .nw-map-marker__content figcaption {
+  font-family: var(--nw-font-ui);
   font-size: 0.78rem;
   color: var(--nw-ink-muted);
   font-style: italic;
@@ -740,13 +740,14 @@
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
-  padding-top: 1rem;
+  padding-top: 1.5rem;
 }
 
 .nw-file {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
+  font-family: var(--nw-font-ui);
   font-size: 0.8rem;
   font-weight: 500;
   color: var(--nw-ink-soft);
@@ -845,6 +846,7 @@
   gap: 0.5rem;
   text-decoration: none;
   color: var(--nw-ink-soft);
+  font-family: var(--nw-font-ui);
   font-size: 0.82rem;
   font-weight: 500;
   transition: color var(--nw-transition);
@@ -891,6 +893,7 @@
 }
 
 .nw-chapitre__num {
+  font-family: var(--nw-font-ui);
   font-size: 0.72rem;
   font-weight: 600;
   letter-spacing: 0.1em;
@@ -962,6 +965,7 @@
 }
 
 .nw-chapitre__body figcaption {
+  font-family: var(--nw-font-ui);
   font-size: 0.8rem;
   color: var(--nw-ink-muted);
   padding: 0.5rem 1rem 0;
@@ -988,18 +992,15 @@
 @media (max-width: 768px) {
   .nw-hero__content { padding: 4rem 1.25rem 2.5rem; }
   .nw-container     { padding: 0 1.25rem; }
-  .nw-section__header__wrapper {width: 100%;}
-  .nw-map-part      {width: 100%;}
   .nw-map-wrap      { height: 320px; }
   .nw-chapitre__body figure { margin: 1.5rem 0; }
   .nw-geoformat-hero { min-height: 35vh; }
   .nw-geoformat-hero__content { padding: 2rem 1.25rem; }
   .nw-chap-nav { flex-direction: column; }
-  .nw-section--map__wrapper { flex-wrap: wrap;}
 }
 
 @media (max-width: 480px) {
-  .nw-introduction__body { font-size: 1rem; }
+  .nw-introduction__body { padding-left: 1rem; font-size: 1rem; }
   .nw-section { padding: 3rem 0; }
 }
 
diff --git a/public/content/cohesion-des-mondes/project.txt b/public/content/cohesion-des-mondes/project.txt
index 7b5abc0..e6801f5 100644
--- a/public/content/cohesion-des-mondes/project.txt
+++ b/public/content/cohesion-des-mondes/project.txt
@@ -10,8 +10,4 @@ Cover: - file://glu48yweigbs4wds
 
 ----
 
-Background: #fff3e5
-
-----
-
 Uuid: eybhqikol6kaorby
\ No newline at end of file
diff --git a/public/site/blueprints/pages/project.yml b/public/site/blueprints/pages/project.yml
index cd4787b..32de087 100644
--- a/public/site/blueprints/pages/project.yml
+++ b/public/site/blueprints/pages/project.yml
@@ -27,9 +27,3 @@ columns:
       files:
         label: Fichiers
         type: files
-      meta: 
-        type: fields
-        fields:
-          background:
-            label: Couleur de fond
-            type: color
diff --git a/public/site/templates/narrative-web.php b/public/site/templates/narrative-web.php
index 0101d9b..751b129 100644
--- a/public/site/templates/narrative-web.php
+++ b/public/site/templates/narrative-web.php
@@ -123,15 +123,19 @@ foreach ($subpages as $subpage) {
     <?php if ($original->author()->isNotEmpty()): ?>
     <p class="nw-hero__author">Par <span><?= html($original->author()) ?></span></p>
     <?php endif ?>
-    <!-- Introduction -->
-    <?php if ($original->intro()->isNotEmpty()): ?>
-      <div class="nw-introduction__body nw-container--narrow">
-        <?= $original->intro() ?>
-      </div>
-    <?php endif ?>
   </div>
 </header>
 
+<!-- Introduction -->
+<?php if ($original->intro()->isNotEmpty()): ?>
+<section class="nw-introduction">
+  <div class="nw-container nw-container--narrow">
+    <div class="nw-introduction__body">
+      <?= $original->intro() ?>
+    </div>
+  </div>
+</section>
+<?php endif ?>
 
 <!-- ═══════════════════════════════════════════
      SOUS-PAGES
@@ -146,47 +150,46 @@ foreach ($subpages as $subpage) {
   ───────────────────────────────────────── -->
   <?php if ($tpl === 'map'): ?>
   <section class="nw-section nw-section--map" id="section-<?= $subpage->uid() ?>">
-    <div class="nw-section--map__wrapper nw-container">
-      <!-- <div class="nw-container nw-section__header__wrapper"> -->
-        <header class="nw-section__header">
-          <h2 class="nw-section__title"><?= html($subpage->title()) ?></h2>
-          <?php if ($subpage->tags()->isNotEmpty()): ?>
-          <div class="nw-tags">
-            <?php foreach ($subpage->tags()->split(',') as $tag): ?>
-            <span class="nw-tag"><?= html(trim($tag)) ?></span>
-            <?php endforeach ?>
-          </div>
-          <?php endif ?>
-        </header>
-        <!-- Carte MapLibre inline -->
-        <?php
-          $markers = $subpage->children()->listed()->filterBy('intendedTemplate', 'marker');
-          $mapId   = 'map-' . $subpage->uid();
-        ?>
-        <div class="nw-map-part">
-          <div class="nw-map-wrap">
-            <div id="<?= $mapId ?>" class="nw-map"></div>
-          </div>
-          <!-- Fichiers de la carte -->
-          <?php if ($subpage->files()->isNotEmpty()): ?>
-            <div class="nw-files">
-              <?php foreach ($subpage->files() as $file): ?>
-              <a href="<?= $file->url() ?>" class="nw-file" target="_blank">
-                <span class="nw-file__icon">↓</span>
-                <span class="nw-file__name"><?= html($file->filename()) ?></span>
-              </a>
-              <?php endforeach ?>
-            </div>
-          <?php endif ?>
+    <div class="nw-container">
+      <header class="nw-section__header">
+        <h2 class="nw-section__title"><?= html($subpage->title()) ?></h2>
+        <?php if ($subpage->tags()->isNotEmpty()): ?>
+        <div class="nw-tags">
+          <?php foreach ($subpage->tags()->split(',') as $tag): ?>
+          <span class="nw-tag"><?= html(trim($tag)) ?></span>
+          <?php endforeach ?>
         </div>
-
-        <?php if ($subpage->intro()->isNotEmpty()): ?>
-        <div class="nw-prose"><?= $subpage->intro() ?></div>
         <?php endif ?>
-      <!-- </div> -->
+      </header>
 
+      <?php if ($subpage->intro()->isNotEmpty()): ?>
+      <div class="nw-prose"><?= $subpage->intro() ?></div>
+      <?php endif ?>
     </div>
 
+    <!-- Carte MapLibre inline -->
+    <?php
+      $markers = $subpage->children()->listed()->filterBy('intendedTemplate', 'marker');
+      $mapId   = 'map-' . $subpage->uid();
+    ?>
+    <div class="nw-map-wrap">
+      <div id="<?= $mapId ?>" class="nw-map"></div>
+    </div>
+
+    <!-- Fichiers de la carte -->
+    <?php if ($subpage->files()->isNotEmpty()): ?>
+    <div class="nw-container">
+      <div class="nw-files">
+        <?php foreach ($subpage->files() as $file): ?>
+        <a href="<?= $file->url() ?>" class="nw-file" target="_blank">
+          <span class="nw-file__icon">↓</span>
+          <span class="nw-file__name"><?= html($file->filename()) ?></span>
+        </a>
+        <?php endforeach ?>
+      </div>
+    </div>
+    <?php endif ?>
+
     <!-- ── Liste des marqueurs sous la carte ── -->
     <?php if ($markers->isNotEmpty()): ?>
     <div class="nw-map-marker-list nw-container">
diff --git a/public/site/templates/project.php b/public/site/templates/project.php
index 7a9b86c..d935dce 100644
--- a/public/site/templates/project.php
+++ b/public/site/templates/project.php
@@ -22,11 +22,7 @@
   <meta name="csrf" content="<?= csrf() ?>">
   <?php endif ?>
 </head>
-
-<?php 
-if($page->background()->isNotEmpty()){ $background = $page->background();}
-else{$background = "#FFF";}?>
-<body data-template="<?= $page->template() ?>" style="--background-color: <?= $background?>">
+<body data-template="<?= $page->template() ?>">
 
 <!-- ═══════════════════════════════════════════
      EN-TÊTE PROJET
diff --git a/src/composables/useElementSettings.js b/src/composables/useElementSettings.js
index a32e61c..162256a 100644
--- a/src/composables/useElementSettings.js
+++ b/src/composables/useElementSettings.js
@@ -236,30 +236,33 @@ export function useElementSettings({ margin, padding, basePopup }) {
     }
   };
 
-  // --- Reset refs to inherited/default values when toggle is turned off ---
-  const resetRefsToDefaults = (group) => {
-    if (group === 'font') {
-      fontFamily.value = textDefaults.fontFamily;
-      italic.value = ELEMENT_DEFAULTS.italic;
-      bold.value = ELEMENT_DEFAULTS.bold;
-      // Re-apply inline defaults if applicable
-      const inlineDefaults = INLINE_DEFAULTS[currentTag.value];
-      if (inlineDefaults) {
-        if (inlineDefaults.fontStyle === 'italic') italic.value = true;
-        if (inlineDefaults.fontWeight === 'bold') bold.value = true;
-      }
-    } else if (group === 'fontSize') {
-      fontSize.value = textDefaults.fontSize.value;
-      fontSize.unit = textDefaults.fontSize.unit;
-    } else if (group === 'lineHeight') {
-      lineHeight.value = textDefaults.lineHeight.value;
-      lineHeight.unit = textDefaults.lineHeight.unit;
-    } else if (group === 'color') {
-      color.value = textDefaults.color;
-      // Re-apply inline default color if applicable
-      const inlineDefaults = INLINE_DEFAULTS[currentTag.value];
-      if (inlineDefaults?.color) color.value = inlineDefaults.color;
+  // --- Pre-toggle CSS snapshot ---
+  // Saves the CSS values for a group before toggle ON, restores them on toggle OFF
+  const preToggleSnapshots = new Map(); // key: `${selector}::${group}` → { cssProp: extractedValue }
+
+  const savePreToggleSnapshot = (group) => {
+    const key = `${selector.value}::${group}`;
+    const cssProps = settingGroups[group];
+    const snapshot = {};
+    for (const cssProp of cssProps) {
+      const val = stylesheetStore.extractValue(selector.value, cssProp);
+      if (val) snapshot[cssProp] = val;
     }
+    preToggleSnapshots.set(key, snapshot);
+  };
+
+  const restorePreToggleSnapshot = (group) => {
+    const key = `${selector.value}::${group}`;
+    const snapshot = preToggleSnapshots.get(key);
+    if (!snapshot) return;
+    for (const [cssProp, val] of Object.entries(snapshot)) {
+      if (typeof val === 'object' && 'value' in val) {
+        updateProp(cssProp, val.value, val.unit);
+      } else {
+        updateProp(cssProp, val);
+      }
+    }
+    preToggleSnapshots.delete(key);
   };
 
   // --- Toggle actions ---
@@ -272,6 +275,7 @@ export function useElementSettings({ margin, padding, basePopup }) {
     settingEnabled[group] = enabled;
     isUpdatingFromStore = true;
     if (enabled) {
+      savePreToggleSnapshot(group);
       restoreFromCache(group);
       applyAllEnabledGroups();
     } else {
@@ -282,8 +286,7 @@ export function useElementSettings({ margin, padding, basePopup }) {
       } else {
         removeProps(settingGroups[group]);
       }
-      // Reset refs to defaults so displayedCss shows inherited values
-      resetRefsToDefaults(group);
+      restorePreToggleSnapshot(group);
     }
     saveElementState();
     nextTick(() => { isUpdatingFromStore = false; });
@@ -350,10 +353,10 @@ export function useElementSettings({ margin, padding, basePopup }) {
   const INDEPENDENT_TAGS = new Set(['li', 'ul', 'ol', 'dt', 'dd', 'dl', 'table', 'tr', 'td', 'th', 'caption', 'figure', 'figcaption', 'pre', 'blockquote']);
   const isIndependentElement = computed(() => INDEPENDENT_TAGS.has(currentTag.value));
 
-  // Check if the current selector has a CSS property in the store (active CSS only, not commented)
+  // Check if the current selector has a CSS property in the store
   const hasInCss = (cssProp) => {
     if (!selector.value) return false;
-    return !!stylesheetStore.extractValue(selector.value, cssProp, false);
+    return !!stylesheetStore.extractValue(selector.value, cssProp);
   };
 
   const displayedCss = computed(() => {
@@ -361,10 +364,9 @@ export function useElementSettings({ margin, padding, basePopup }) {
     const lines = [];
     for (const entry of displayedCssOrder) {
       if (entry.skip && entry.skip()) continue;
-      const groupEnabled = settingEnabled[entry.group];
       // For inline elements, skip special groups (TextSettings defaults) when toggle is OFF
       // Exception: keep if the current tag has an inline default for this CSS property
-      if (entry.special && isInlineElement.value && !groupEnabled) {
+      if (entry.special && isInlineElement.value && !settingEnabled[entry.group]) {
         const tagDefaults = INLINE_DEFAULTS[currentTag.value];
         const cssToDefaultKey = { 'color': 'color', 'font-family': 'fontFamily' };
         const defaultKey = cssToDefaultKey[entry.css];
@@ -372,26 +374,18 @@ export function useElementSettings({ margin, padding, basePopup }) {
       }
       const val = entry.getValue();
       if (val === null || val === undefined) continue;
-
-      // Determine inheritance comment for disabled groups
-      let comment = '';
-      if (!groupEnabled) {
-        if (entry.special) {
-          // Special groups: show "hérité de la page" when value matches page-level default
-          const textDefaultValues = {
-            'font-family': textDefaults.fontFamily === 'sans-serif' ? 'sans-serif' : `"${textDefaults.fontFamily}"`,
-            'font-size': `${textDefaults.fontSize.value}${textDefaults.fontSize.unit}`,
-            'line-height': `${textDefaults.lineHeight.value}${textDefaults.lineHeight.unit}`,
-            'color': textDefaults.color,
-          };
-          if (val === textDefaultValues[entry.css]) {
-            comment = ' /* hérité de la page */';
-          }
-        } else if (hasInCss(entry.css)) {
-          // Non-special groups: show comment when CSS exists but toggle is off
-          comment = ' /* hérité de la page */';
-        }
+      // Show "valeur par défaut" only if the value actually matches the TextSettings default
+      let isTextDefault = false;
+      if (entry.special && !settingEnabled[entry.group]) {
+        const textDefaultValues = {
+          'font-family': textDefaults.fontFamily === 'sans-serif' ? 'sans-serif' : `"${textDefaults.fontFamily}"`,
+          'font-size': `${textDefaults.fontSize.value}${textDefaults.fontSize.unit}`,
+          'line-height': `${textDefaults.lineHeight.value}${textDefaults.lineHeight.unit}`,
+          'color': textDefaults.color,
+        };
+        isTextDefault = val === textDefaultValues[entry.css];
       }
+      const comment = isTextDefault ? ' /* valeur par défaut */' : '';
       lines.push(`  ${entry.css}: ${val};${comment}`);
     }
     for (const side of ['top', 'right', 'bottom', 'left']) {
@@ -408,7 +402,7 @@ export function useElementSettings({ margin, padding, basePopup }) {
   });
 
   const editableFullCss = computed(() => {
-    return displayedCss.value.replace(/ \/\* (?:valeur par défaut|hérité de la page) \*\//g, '');
+    return displayedCss.value.replace(/ \/\* valeur par défaut \*\//g, '');
   });
 
   // --- CSS parsing & sync ---