application de la nouvelle identité sur toutes les pages

web/themes/erabletheme/scss/_fullpage.scss

@@ -1,8 +1,172 @@
+// En-tête de page placé HORS de la colonne blanche (.fullpage) :
+// "Retour …", <h2>, trait, .sous_titre apparaissent directement sur le fond gris.
+// Couleur grisée (text_grey atténué) en cohérence avec les "meta" de la home.
+.layout-content .page-header-outside {
+  padding: 3vh $x_margin 2vh;
+  background: transparent;
+  color: $text_grey;
+  .retour_projets,
+  .retour_actus,
+  .retour_ressources,
+  .retour-meetup {
+    margin-bottom: 1.5rem;
+    a {
+      // Marianne, pas Vogun.
+      font-family: $marianne;
+      font-weight: $fw_bold;
+      font-size: $fs_xs;
+      color: $text_grey;
+      opacity: 0.7;
+      text-decoration: none;
+      &:hover { opacity: 1; }
+    }
+  }
+  // Typo titre harmonisée entre toutes les pages (projets / actus / autres) :
+  // Vogun 36px constant, on retire le bump à 57px du main_title() par défaut.
+  > h2 {
+    font-family: $vogun;
+    font-weight: $fw_medium;
+    font-size: $fs_xl;
+    color: black;
+    line-height: $lh_tight;
+    margin: 0;
+    padding: 0;
+    a { color: inherit; text-decoration: none; }
+  }
+  // Trait de séparation entre titre et sous-titre.
+  > h2 + .sous_titre,
+  > h2 ~ .sous_titre {
+    padding-top: 1.2rem;
+    margin-top: 1.2rem;
+    border-top: 1px solid $text_grey;
+  }
+  .sous_titre {
+    font-family: $vogun;
+    font-weight: $fw_medium;
+    font-size: $fs_lg; // 22px constant sur tous les breakpoints
+    line-height: $lh_tight;
+    color: $text_grey;
+    opacity: 0.7;
+    padding: 0;
+    margin-bottom: 0;
+  }
+  @media (min-width: $breakpoint_tablet) {
+    width: 75vw;
+    margin-left: 12.5vw;
+    margin-top: 5vh;
+  }
+  @media (min-width: $breakpoint_desktop) {
+    width: 50vw;
+    margin-left: 25%;
+    margin-top: 5vh; // identique à tablette, en ligne avec les pages projets
+  }
+}
+
+// Sur les pages d'index (.fullpage.large-container : /projets, /actualites,
+// /meetup), la colonne blanche est plus large. On aligne le .page-header-outside
+// dessus pour que le titre démarre à la même abscisse que le contenu.
+.layout-content .page-header-outside:has(+ .fullpage.large-container) {
+  @media (min-width: $breakpoint_tablet) {
+    width: auto;
+    margin-left: calc(#{$x_margin} * 2.5);
+    margin-right: calc(#{$x_margin} * 2.5);
+  }
+}
+
+// Quand le .page-header-outside est suivi d'une .fullpage (pages SANS
+// sidebar : actus, programme…), on supprime la marge top de .fullpage pour
+// rapprocher la colonne blanche du bloc en-tête.
+// Exceptions :
+//   - /ressources : layout hacky (cf. _ressources.scss), on n'y touche pas
+//   - articles non-premiers d'une vue (.views-row:not(:first-of-type)) :
+//     leur en-tête est masqué donc pas de besoin d'override.
+.layout-content .page-header-outside + .fullpage,
+.layout-content .page-header-outside + article.fullpage {
+  margin-top: 1rem !important;
+  @media (min-width: $breakpoint_tablet) {
+    margin-top: 1rem !important;
+  }
+}
+// Restaurer le margin-top par défaut pour les cas exclus en desktop.
+@media (min-width: $breakpoint_desktop) {
+  .views-row:not(:first-of-type) .page-header-outside + .fullpage,
+  .views-row:not(:first-of-type) .page-header-outside + article.fullpage,
+  .ressources.page-header-outside + .fullpage,
+  .page-header-outside + .ressources,
+  .page-header-outside + article.ressources {
+    margin-top: revert !important;
+  }
+}
+
+// Sur les pages SANS sidebar (mentions-legales, programme, etc.), le <h2>
+// ayant été sorti dans .page-header-outside, le contenu peut se retrouver
+// collé au bord supérieur de la colonne (la règle p:first-of-type
+// { margin-top: 7vh } ne matche que si le premier élément est un <p>).
+// On compense uniquement dans ce contexte.
+main:not(:has(#block-erabletheme-leprogramme-2)):not(:has(#block-erabletheme-views-block-projets-block-1))
+  .layout-content .page-header-outside + .fullpage > .fullpage_content {
+  padding-top: 1.5rem;
+  // Si le premier élément est un <p>, on neutralise sa marge top par défaut
+  // (sinon elle s'ajoute au padding qu'on vient de poser).
+  p:first-of-type {
+    margin-top: 0;
+  }
+}
+
+// Contexte page projet (sidebar sommaire à gauche, layout en flex row-reverse
+// au niveau du <main>) : on force le .page-header-outside à occuper toute la
+// largeur AU-DESSUS de la sidebar et de la colonne blanche.
+// Le .page-header-outside est dans .layout-content donc il flotte en
+// position: absolute pour passer par-dessus et on pousse main de padding-top.
+//
+// IMPORTANT : on ne cible QUE les .page-header-outside enfants DIRECTS de
+// .layout-content (pages node-like : projet, programme, taxonomy). Sur
+// /ressources la sidebar est aussi présente mais le .page-header-outside
+// est imbriqué dans une .views-row — on le laisse en flux normal.
+main:has(#block-erabletheme-leprogramme-2),
+main:has(#block-erabletheme-views-block-projets-block-1) {
+  @media (min-width: $breakpoint_tablet) {
+    position: relative;
+    // Le .page-header-outside passe en position absolute, sauf s'il est
+    // imbriqué dans une .views-row (cas /ressources, layout hacky : on laisse
+    // en flux normal et on compense via _ressources.scss).
+    .layout-content .page-header-outside:not(.views-row .page-header-outside) {
+      position: absolute;
+      top: 3vh;
+      left: 0;
+      right: 0;
+      width: auto !important;
+      margin: 0 !important;
+      padding-left: 14vw;
+      padding-right: 40vw;
+      @media (min-width: $breakpoint_desktop) {
+        padding-left: 15vw;
+        padding-right: 40vw;
+      }
+    }
+  }
+  // Réserver la place du header-outside uniquement quand il est en absolute
+  // (= pas dans une .views-row). Sinon padding-top normal.
+  @media (min-width: $breakpoint_tablet) {
+    &:has(.layout-content .page-header-outside:not(.views-row .page-header-outside)) {
+      padding-top: calc(var(--page-header-outside-h, 18vh) + 4vh);
+      // Le padding-top de <main> réserve déjà la place du header-outside.
+      // On annule les marges top de la sidebar et de la colonne blanche
+      // pour qu'elles démarrent juste en dessous (pas de double espacement).
+      .fullpage,
+      aside.layout-sidebar-first {
+        margin-top: 0 !important;
+      }
+    }
+  }
+}
+
 .layout-content .fullpage {
     margin-bottom: 10vh;
     padding-top: 3vh;
     padding-bottom: 3vh;
     background-color: white;
+    border-bottom: 7px solid $fluo_green;
     position: relative;
     h2 {
       margin-top: 5vh !important;
@@ -50,6 +214,10 @@
           @include fluo_button();
           a {
             display: inline-block;
+            // En mobile, ces liens sont en flux normal dans la colonne blanche,
+            // donc on contraste leur fond en gris pâle (en desktop ils sont
+            // position: fixed sur fond gris, on garde le fond blanc d'origine).
+            background-color: $page_bg;
           }
           @media (min-width: $breakpoint_desktop) {
             //margin-bottom: 0 !important;
@@ -62,6 +230,7 @@
             }
             a {
               max-width: calc(25vw - $x_margin * 2);
+              background-color: white;
             }
           }
         }
@@ -158,21 +327,27 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) {
       }
       padding: 1.5rem;
       background-color: white;
+      border-bottom: 7px solid $fluo_green;
       margin-left: 2vw;
       > h2 {
         padding-bottom: 1rem;
-        border-bottom: solid 1px $teal;
+        border-bottom: solid 1px $fluo_green;
         display: flex;
         justify-content: space-between;
         cursor: pointer;
-        @include sous_titre();
+        // Titre sidebar : Vogun brand color, plus grand.
+        font-family: $vogun;
+        font-weight: $fw_medium;
+        font-size: $fs_lg;
+        color: $fluo_green;
+        line-height: $lh_tight;
         > div {
           mask-image: url('/themes/erabletheme/assets/icons/arrow-down-s-line.svg');
           background-size: contain;
-          background-color: $teal;
+          background-color: $fluo_green;
           width: 1.3rem;
           height: 1.3rem;
-          color: $teal;
+          color: $fluo_green;
           transform: rotate(0deg);
           transition: transform 0.3s ease;
           &.closed {
@@ -189,14 +364,17 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) {
         > li,
         .views-row {
           margin: 1rem 0;
-          @include main_text_content();
-
+          // Items sidebar : Vogun, item actif en brand color (pas gras).
           a {
-            color: black;
+            font-family: $vogun;
+            font-weight: $fw_regular;
             font-size: $fs_sm;
+            color: black;
+            line-height: $lh_normal;
             &:hover,
             &.is-active {
-              font-weight: 800;
+              font-weight: $fw_regular;
+              color: $fluo_green;
             }
           }
         }