modifs version web, demande alexandre

public/assets/css/projet.css

@@ -1,6 +1,6 @@
 /* ═══════════════════════════════════════════════════════════
  projet.css
- Grille des récits — template projet.php
+ Grille des récits — template project.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="projet"] {
+body[data-template="project"] {
-  background-color: var(--nw-paper);
+  background-color: var(--background-color);
   color: var(--nw-ink);
   min-height: 100vh;
 }
@@ -143,6 +143,7 @@ body[data-template="projet"] {
   /*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;
@@ -389,12 +390,11 @@ body[data-template="projet"] {
 @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; gap: 1px; }
+  .pj-grid { grid-template-columns: 1fr; padding: 0 1rem;}
 }
 
 @media (max-width: 600px) {
   .pj-card__cover { height: 180px; }
-  .pj-card__footer { flex-direction: column; align-items: stretch; }
   .pj-btn { justify-content: center; }
 }
 

public/assets/css/web.css

@@ -87,7 +87,6 @@
 }
 
 .nw-sidenav__label {
-  font-family: var(--nw-font-ui);
   font-size: 0.89rem;
   font-weight: 500;
   letter-spacing: 0.04em;
@@ -158,7 +157,6 @@
 }
 
 .nw-sidenav__sub-label {
-  font-family: var(--nw-font-ui);
   font-size: 0.72rem;
   font-weight: 400;
   letter-spacing: 0.03em;
@@ -216,6 +214,7 @@
   top: 20px;
   left: 20px;
   transition: transform 0.2s linear;
+  z-index: 10;
 }
 
 .nw-prev-btn a{
@@ -282,7 +281,6 @@
 }
 
 .nw-hero__author {
-  font-family: var(--nw-font-ui);
   font-size: 0.875rem;
   color: rgba(255,255,255,0.75);
   letter-spacing: 0.06em;
@@ -304,29 +302,19 @@
 /* ───────────────────────────────────────────
    INTRODUCTION
 ─────────────────────────────────────────── */
-.nw-introduction {
-  padding: 4rem 1rem;
-  background: var(--nw-paper);
-}
-
 .nw-introduction__body {
+  font-family: var(--nw-font-display);
+  color: #fff;
   font-size: 1.4rem;
-  line-height: 1.8;
+  line-height: 1.4;
-  color: var(--nw-ink-soft);
+  margin: 2rem 0 0;
+  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
   font-weight: 300;
   font-style: italic;
-  border-left: 3px solid var(--nw-accent);
-  padding-left: 2rem;
 }
 
-.nw-introduction__body p:first-child::first-letter {
+.nw-introduction__body p{
-  font-family: var(--nw-font-display);
+  margin-bottom: 0;
-  font-size: 5.7rem;
-  font-weight: 800;
-  line-height: 0.8;
-  float: left;
-  margin: 0.05em 0.12em 0 0;
-  color: var(--nw-accent);
 }
 
 /* ───────────────────────────────────────────
@@ -410,7 +398,6 @@
 }
 
 .nw-tag {
-  font-family: var(--nw-font-ui);
   font-size: 0.7rem;
   font-weight: 600;
   letter-spacing: 0.08em;
@@ -451,16 +438,24 @@
   background: var(--nw-paper-warm);
 }
 
-.nw-section--map .nw-container {
+.nw-section--map__wrapper{
-  margin-bottom: 2rem;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.nw-section__header__wrapper{
+  width: 33.3333%;
+}
+
+.nw-map-part{
+  width: 66.6666%;
+  margin: 1.5rem 4rem 4rem 0;
 }
 
 .nw-map-wrap {
   position: relative;
-  width: 100%;
   height: clamp(400px, 55vh, 700px);
-  margin: 5rem 0 2rem;
+  border: 1px solid var(--nw-rule);
-  border-top: 3px solid var(--nw-accent);
   overflow: hidden;
 }
 
@@ -530,7 +525,6 @@
   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;
@@ -676,6 +670,7 @@
   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,
@@ -714,7 +709,6 @@
 }
 
 .nw-map-marker__content figcaption {
-  font-family: var(--nw-font-ui);
   font-size: 0.78rem;
   color: var(--nw-ink-muted);
   font-style: italic;
@@ -740,14 +734,13 @@
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
-  padding-top: 1.5rem;
+  padding-top: 1rem;
 }
 
 .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);
@@ -846,7 +839,6 @@
   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);
@@ -893,7 +885,6 @@
 }
 
 .nw-chapitre__num {
-  font-family: var(--nw-font-ui);
   font-size: 0.72rem;
   font-weight: 600;
   letter-spacing: 0.1em;
@@ -965,7 +956,6 @@
 }
 
 .nw-chapitre__body figcaption {
-  font-family: var(--nw-font-ui);
   font-size: 0.8rem;
   color: var(--nw-ink-muted);
   padding: 0.5rem 1rem 0;
@@ -992,6 +982,8 @@
 @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%; margin: 1.5rem 1rem;}
   .nw-map-wrap      { height: 320px; }
   .nw-chapitre__body figure { margin: 1.5rem 0; }
   .nw-geoformat-hero { min-height: 35vh; }
@@ -1000,7 +992,7 @@
 }
 
 @media (max-width: 480px) {
-  .nw-introduction__body { padding-left: 1rem; font-size: 1rem; }
+  .nw-introduction__body { font-size: 1rem; }
   .nw-section { padding: 3rem 0; }
 }
 

public/content/cohesion-des-mondes/project.txt

@@ -10,4 +10,8 @@ Cover: - file://glu48yweigbs4wds
 
 ----
 
+Background: #fff3e5
+
+----
+
 Uuid: eybhqikol6kaorby

public/site/blueprints/pages/project.yml

@@ -27,3 +27,9 @@ columns:
       files:
         label: Fichiers
         type: files
+      meta: 
+        type: fields
+        fields:
+          background:
+            label: Couleur de fond
+            type: color

public/site/templates/narrative-web.php

@@ -123,19 +123,15 @@ 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
@@ -150,45 +146,47 @@ foreach ($subpages as $subpage) {
   ───────────────────────────────────────── -->
   <?php if ($tpl === 'map'): ?>
   <section class="nw-section nw-section--map" id="section-<?= $subpage->uid() ?>">
-    <div class="nw-container">
+    <div class="nw-section--map__wrapper">
-      <header class="nw-section__header">
+      <div class="nw-container nw-section__header__wrapper">
-        <h2 class="nw-section__title"><?= html($subpage->title()) ?></h2>
+        <header class="nw-section__header">
-        <?php if ($subpage->tags()->isNotEmpty()): ?>
+          <h2 class="nw-section__title"><?= html($subpage->title()) ?></h2>
-        <div class="nw-tags">
+          <?php if ($subpage->tags()->isNotEmpty()): ?>
-          <?php foreach ($subpage->tags()->split(',') as $tag): ?>
+          <div class="nw-tags">
-          <span class="nw-tag"><?= html(trim($tag)) ?></span>
+            <?php foreach ($subpage->tags()->split(',') as $tag): ?>
-          <?php endforeach ?>
+            <span class="nw-tag"><?= html(trim($tag)) ?></span>
-        </div>
+            <?php endforeach ?>
+          </div>
+          <?php endif ?>
+        </header>
+
+        <?php if ($subpage->intro()->isNotEmpty()): ?>
+        <div class="nw-prose"><?= $subpage->intro() ?></div>
         <?php endif ?>
-      </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 ?>
+      <!-- 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>
+      </div>
+
 
     <!-- ── Liste des marqueurs sous la carte ── -->
     <?php if ($markers->isNotEmpty()): ?>

public/site/templates/project.php

@@ -22,7 +22,11 @@
   <meta name="csrf" content="<?= csrf() ?>">
   <?php endif ?>
 </head>
-<body data-template="<?= $page->template() ?>">
+
+<?php 
+if($page->background()->isNotEmpty()){ $background = $page->background();}
+else{$background = "#FFF";}?>
+<body data-template="<?= $page->template() ?>" style="--background-color: <?= $background?>">
 
 <!-- ═══════════════════════════════════════════
      EN-TÊTE PROJET