removing the pointer events on the lightbox__picture

front-page.php

@@ -1,14 +1,19 @@
 <?php get_header(); ?>
 
-<?php if (have_posts()) : ?>
 <?php
-	while (have_posts()) :
-		the_post();
-		the_content();
+get_template_part('template-components/notifications/notifications-popup');
 ?>
 
 
-<?php endwhile; ?>
+<?php if (have_posts()) : ?>
+	<?php
+	while (have_posts()) :
+		the_post();
+		the_content();
+	?>
+
+
+	<?php endwhile; ?>
 
 <?php endif; ?>
 

includes/admin.php

@@ -14,7 +14,8 @@ function register_theme_settings_option_page()
 		// Register options page.
 		$homegrade_option_page = acf_add_options_page(array(
 			'page_title'    => __('Paramètres & Outils', 'homegrade-theme__texte-backoffice'),
-			'menu_title'    => __('Paramètres & Outils', 'homegrade-theme__texte-backoffice'),
+			'menu_title'    => __('Paramètres', 'homegrade-theme__texte-backoffice'),
+			
 			'menu_slug'     => 'theme-general-settings',
 			'capability'    => 'activate_plugins',
 			'redirect'      => false,

includes/wysiwyg.php

@@ -13,7 +13,7 @@ function enqueue_light_toolbar($toolbars)
 	}
 
 	// remove the 'Basic' toolbar completely
-	unset($toolbars['Basic']);
+	// unset($toolbars['Basic']);
 
 	// return $toolbars - IMPORTANT!
 	return $toolbars;

resources/css/app.css

@@ -11,6 +11,7 @@
 /* ########### BASE ############ */
 @import './base/typography.css';
 @import './base/generalites.css';
+@import './base/links.css';
 @import './base/thematiques-colors.css';
 
 /* ########### COMPONENTS ############ */
@@ -38,6 +39,7 @@
 @import './components/forms/forms.css';
 @import './components/complianz-consent.css';
 
+@import '../../template-components/notifications/notifications-popup.css';
 @import '../../template-components/cards/card-news.css';
 @import '../../template-components/cards/card-frequent_question.css';
 @import '../../template-components/cards/card-conseils-thematique.css';
@@ -116,6 +118,7 @@
 @import './blocks/parcours-chapter.css';
 @import './blocks/parcours-renovateur.css';
 @import './blocks/page-card.css';
+@import './blocks/lightbox-gallery.css';
 
 /* Home */
 @import './blocks/home-header.css';

resources/css/base/generalites.css

@@ -69,7 +69,3 @@ details[open] summary .open-close-icon {
   right: unset;
   left: 20px;
 }
-
-:root :where(a:where(:not(.wp-element-button))) {
-  text-decoration: unset;
-}

resources/css/base/links.css

@@ -0,0 +1,93 @@
+:root :where(a:where(:not(.wp-element-button))) {
+  text-decoration: unset;
+}
+
+/* a:not(
+    .cta--secondary,
+    .wp-block-button__link,
+    .cta,
+    .homegrade-blocks-lien-chapitre__cta,
+    .breadcrumbs_navigation a,
+    .share-link,
+    .previous-next-posts__link
+  ) {
+  /* &[rel='noreferrer noopener'] {
+    &:after {
+      @apply ml-2 inline-block;
+      content: url('../resources/img/graphic-assets/icone-external-link-purple.svg');
+      transform: translateY(1px);
+    }
+  } */
+/* } */
+
+/* EXTERNAL LINKS IN NEW TAB */
+
+main
+  a[target='_blank']:not([href*='homegrade\.local']):not([href*='homegrade\.brussels']):not(
+    :has(img)
+  ) {
+  &:not(.cta--primary, .cta--secondary, .cta--button, .wp-block-button__link) {
+    @apply inline items-center;
+    @apply px-2 py-1 first-letter:text-primary underline font-bold relative rounded-md;
+
+    &:after {
+      @apply ml-2 inline-block;
+      transform: translateY(-13px);
+
+      html[lang='fr-FR'] & {
+        content: " S'ouvre dans un nouvel onglet ";
+      }
+      html[lang='nl-NL'] & {
+        content: ' Opent in een nieuw tabblad';
+      }
+      @apply w-4 h-4 inline-block ml-2 bg-center bg-no-repeat;
+      font-size: 0 !important;
+      text-indent: -9999px;
+      background-image: url('../resources/img/graphic-assets/icone-external-link-purple.svg');
+    }
+    &:hover {
+      background: rgba(239, 239, 239, 1);
+    }
+  }
+}
+
+/* INTERNAL LINKS TO A PDF */
+a[href$='.pdf']:is(a[href*='homegrade\.local'], a[href*='homegrade\.brussels']):not(
+    .cta,
+    .brochure-link-format,
+
+  ) {
+  @apply inline-flex items-center;
+  &:after {
+    html[lang='fr-FR'] & {
+      content: 'Télécharger';
+    }
+    html[lang='nl-NL'] & {
+      content: 'Downloaden';
+    }
+    @apply w-4 h-4 inline-block ml-2 bg-center bg-no-repeat;
+    font-size: 0 !important;
+    text-indent: -9999px;
+    background-image: url('../resources/img/graphic-assets/icon_brochure_download.svg');
+  }
+}
+
+.external-link {
+  &:after {
+    @apply ml-2 inline-block;
+    content: url('../resources/img/graphic-assets/icone-external-link-black.svg');
+    transform: translateY(1px);
+  }
+}
+
+.homegrade-blocks-highlight {
+  a[target='_blank']:not([href*='homegrade\.local']):not([href*='homegrade\.brussels']):not(
+      :has(img)
+    ) {
+    &:not(.cta--primary, .cta--secondary, .cta--button, .wp-block-button__link) {
+      &:hover {
+        background: none;
+      }
+    }
+  }
+}

resources/css/blocks/lightbox-gallery.css

@@ -0,0 +1,77 @@
+.lightbox-gallery {
+  @apply grid sm:grid-cols-2 lg:grid-cols-3 gap-6;
+  img {
+    @apply h-full w-full object-cover max-h-80;
+  }
+  &__picture {
+    @apply pointer-events-none;
+  }
+}
+
+.lightbox {
+  @apply fixed inset-0 w-full h-full z-40 bg-opacity-75 flex items-start justify-center;
+  /* backdrop-filter: blur(10px) lightness(20%); */
+  backdrop-filter: brightness(50%) blur(1px);
+  overflow-y: auto;
+  animation: lightboxIn 0.5s;
+
+  &--inactive {
+    @apply hidden;
+  }
+
+  &__prev,
+  &__next {
+    @apply absolute top-1/2 transform -translate-y-1/2 z-50;
+    transition: all 0.3s;
+    &:hover {
+      @apply scale-110;
+    }
+  }
+
+  &__prev {
+    @apply left-8;
+    img {
+      @apply rotate-180;
+    }
+  }
+
+  &__next {
+    @apply right-8;
+  }
+
+  &__close {
+    @apply absolute flex items-center top-0 right-0 m-4 text-neutral-900 text-base font-bold;
+    &:after {
+      @apply w-4 h-4 ml-4;
+      content: '';
+      display: inline-block;
+      background-image: url('../resources/img/graphic-assets/cross-close.svg');
+      background-size: contain;
+      background-repeat: no-repeat;
+    }
+  }
+  &__container {
+    @apply relative flex justify-center items-center bg-white;
+    width: 90%;
+    height: fit-content;
+    min-height: 90vh;
+    @apply my-4 mx-auto;
+  }
+
+  &__current-picture {
+    img {
+      @apply h-full w-full  max-w-xl;
+
+      max-height: 60vh;
+    }
+  }
+}
+
+@keyframes lightboxIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

resources/css/blocks/plus-loin.css

@@ -31,4 +31,17 @@
   .brochure-download-icon {
     filter: invert(97%) sepia(97%) saturate(0%) hue-rotate(55deg) brightness(104%) contrast(105%);
   }
+  /* NEW TAB LINKS */
+  a[target='_blank']:not([href*='homegrade\.local']):not([href*='homegrade\.brussels']):not(
+      :has(img)
+    ) {
+    &:not(.cta--primary, .cta--secondary, .cta--button, .wp-block-button__link) {
+      &:after {
+        background-image: url('../resources/img/graphic-assets/icone-external-link-purple.svg');
+
+        filter: invert(97%) sepia(97%) saturate(0%) hue-rotate(55deg) brightness(104%)
+          contrast(105%);
+      }
+    }
+  }
 }

resources/css/components/cta.css

@@ -10,6 +10,9 @@
     @apply rounded-full px-8 py-4 focus:rounded-full font-bold h-fit cursor-pointer;
     text-decoration: none !important;
   }
+  &--button--mini {
+    @apply px-5 py-3;
+  }
   &--circular {
     @apply rounded-full focus:rounded-full aspect-square	w-12 flex items-center justify-center;
     outline-offset: 5px !important;

resources/css/editor-content/color-taxonomy-scheme.css

@@ -41,6 +41,7 @@ body.akoestiek,
     @apply text-acoustique-coproprietes;
   }
   .homegrade-blocks-highlight--classic {
+    a[target='_blank']:not(.wp-block-button__link),
     a[rel='noopener']:not(.wp-block-button__link) {
       @apply !text-acoustique-coproprietes;
     }
@@ -183,6 +184,7 @@ body.energie,
     @apply text-energies-urbanisme;
   }
   .homegrade-blocks-highlight--classic {
+    a[target='_blank']:not(.wp-block-button__link),
     a[rel='noopener']:not(.wp-block-button__link) {
       @apply !text-energies-urbanisme;
     }
@@ -331,6 +333,7 @@ body.isolation,
     @apply text-isolation-quotidien;
   }
   .homegrade-blocks-highlight--classic {
+    a[target='_blank']:not(.wp-block-button__link),
     a[rel='noopener']:not(.wp-block-button__link) {
       @apply !text-isolation-quotidien;
     }
@@ -476,6 +479,7 @@ body.gezondheid-en-veiligheid,
     @apply text-patrimoine-sante-securite;
   }
   .homegrade-blocks-highlight--classic {
+    a[target='_blank']:not(.wp-block-button__link),
     a[rel='noopener']:not(.wp-block-button__link) {
       @apply !text-patrimoine-sante-securite;
     }
@@ -633,6 +637,7 @@ body.duurzaamheid,
     @apply text-location-durabilite;
   }
   .homegrade-blocks-highlight--classic {
+    a[target='_blank']:not(.wp-block-button__link),
     a[rel='noopener']:not(.wp-block-button__link) {
       @apply !text-location-durabilite;
     }
@@ -826,6 +831,14 @@ body.duurzaamheid,
 .filter-secondary {
   filter: invert(17%) sepia(69%) saturate(4735%) hue-rotate(351deg) brightness(94%) contrast(94%);
 }
+.filter-primary {
+  filter: invert(17%) sepia(7%) saturate(6574%) hue-rotate(235deg) brightness(106%) contrast(137%);
+}
+
+.filter-white {
+  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
+}
+
 .thematique-tag {
   &--isolation,
   &--isolatie,

resources/css/editor-content/gutenberg.css

@@ -147,7 +147,7 @@ article > *:not(.entry-content, .chapter-header-block),
     margin-top: 9px;
   }
 
-  a:not(
+  /* a:not(
       .cta--secondary,
       .wp-block-button__link,
       .cta,
@@ -171,7 +171,7 @@ article > *:not(.entry-content, .chapter-header-block),
         transform: translateY(1px);
       }
     }
-  }
+  } */
 
   p + ol,
   p + ul {
@@ -217,6 +217,9 @@ article > *:not(.entry-content, .chapter-header-block),
   }
 }
 .post-conseil-page-container {
+  h2 {
+    @apply font-bold !text-black text-3xl sm:text-3xl lg:!text-4xl leading-tight;
+  }
   .wp-block-button__link {
     transition: all 0.6s ease-out;
     &:hover {

resources/img/graphic-assets/close_submenu_icon_transparent.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Calque_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27"><g id="Calque_1-2"><g id="Groupe_1505"><g id="Groupe_1477"><g id="Ellipse_225"><circle cx="13.5" cy="13.5" r="12.5" style="fill:none; stroke:#000; stroke-width:2px;"/></g><path id="Tracé_3611" d="M9.3,18.3l8.9-8.9" style="fill:none; stroke:#000; stroke-linecap:round; stroke-width:2px;"/></g><path id="Tracé_3612" d="M18.3,18.3l-8.9-8.9" style="fill:none; stroke:#000; stroke-linecap:round; stroke-width:2px;"/></g></g></svg>

resources/img/graphic-assets/cross-close.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15.887" height="15.849" viewBox="0 0 15.887 15.849">
+  <g id="Groupe_10119" data-name="Groupe 10119" transform="translate(5687.171 -13884.919)">
+    <path id="Tracé_3611" data-name="Tracé 3611" d="M-3940.772,6211.413l13.056-13.019" transform="translate(-1744.985 7687.939)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="2"/>
+    <path id="Tracé_23809" data-name="Tracé 23809" d="M-3927.717,6211.416l-13.055-13.021" transform="translate(-1744.982 7687.938)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="2"/>
+    <path id="Tracé_41721" data-name="Tracé 41721" d="M-3927.717,6211.416l-13.055-13.021" transform="translate(-1744.982 7687.938)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="2"/>
+  </g>
+</svg>

resources/img/graphic-assets/icon-info-purple.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20.097" height="20.097" viewBox="0 0 20.097 20.097">
+  <g id="Groupe_8599" data-name="Groupe 8599" transform="translate(-79.034 -170.72)">
+    <ellipse id="Ellipse_2087" data-name="Ellipse 2087" cx="9.548" cy="9.549" rx="9.548" ry="9.549" transform="translate(79.534 171.22)" fill="#2f0154" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
+    <g id="Groupe_8598" data-name="Groupe 8598" transform="translate(89.082 176.751)">
+      <path id="Tracé_3197" data-name="Tracé 3197" d="M18,22.53V18" transform="translate(-18 -14.496)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path id="Tracé_3198" data-name="Tracé 3198" d="M18,12h0" transform="translate(-18 -12)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    </g>
+  </g>
+</svg>

resources/img/graphic-assets/icon-info-red.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20.097" height="20.097" viewBox="0 0 20.097 20.097">
+  <g id="Groupe_8599" data-name="Groupe 8599" transform="translate(-79.034 -170.72)">
+    <ellipse id="Ellipse_2087" data-name="Ellipse 2087" cx="9.548" cy="9.549" rx="9.548" ry="9.549" transform="translate(79.534 171.22)" fill="#df1e1e" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
+    <g id="Groupe_8598" data-name="Groupe 8598" transform="translate(89.082 176.751)">
+      <path id="Tracé_3197" data-name="Tracé 3197" d="M18,22.53V18" transform="translate(-18 -14.496)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path id="Tracé_3198" data-name="Tracé 3198" d="M18,12h0" transform="translate(-18 -12)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    </g>
+  </g>
+</svg>

resources/img/graphic-assets/icon_brochure_download.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15.005" height="15.005" viewBox="0 0 15.005 15.005">
+  <g id="Icon_feather-download" data-name="Icon feather-download" transform="translate(-3.5 -3.5)">
+    <path id="Tracé_18404" data-name="Tracé 18404" d="M17.5,22.5v2.89a1.445,1.445,0,0,1-1.445,1.445H5.945A1.445,1.445,0,0,1,4.5,25.39V22.5" transform="translate(0 -9.33)" fill="none" stroke="#2f0154" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path id="Tracé_18405" data-name="Tracé 18405" d="M10.5,15l3.612,3.612L17.725,15" transform="translate(-3.11 -5.443)" fill="none" stroke="#2f0154" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path id="Tracé_18406" data-name="Tracé 18406" d="M18,13.17V4.5" transform="translate(-6.998)" fill="none" stroke="#2f0154" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  </g>
+</svg>

resources/img/graphic-assets/icone-external-link-black.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.4 14.6"><path id="Icon_awesome-external-link-alt" d="M16.4.7v3.6c0,.4-.3.7-.7.7-.2,0-.4,0-.5-.2l-1-1-6.9,6.9c-.3.3-.7.3-1,0l-.6-.6c-.3-.3-.3-.7,0-1l6.9-6.9-1-1c-.3-.3-.3-.7,0-1C11.7,0,11.9,0,12,0h3.6C16.1,0,16.4.3,16.4.7s0,0,0,0ZM11.6,7.7l-.5.5c-.1.1-.2.3-.2.5v4.1H1.8V3.6h7.5c.2,0,.4,0,.5-.2l.5-.5c.3-.3.3-.7,0-1-.1-.1-.3-.2-.5-.2H1.4C.6,1.8,0,2.4,0,3.2s0,0,0,0v10c0,.8.6,1.4,1.4,1.4h10c.8,0,1.4-.6,1.4-1.4h0v-5c0-.4-.3-.7-.7-.7-.2,0-.3,0-.5.2Z" style="fill:#000100; stroke-width:0px;"/></svg>

resources/img/graphic-assets/icone-external-link-purple.svg

@@ -1,3 +1,4 @@
-<svg  aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16.368" height="14.55" viewBox="0 0 16.368 14.55">
+<svg  xmlns="http://www.w3.org/2000/svg" width="16.368" height="14.55" viewBox="0 0 16.368 14.55">
+  <title>S'ouvre dans une nouvelle fenêtre</title>
   <path id="Icon_awesome-external-link-alt" data-name="Icon awesome-external-link-alt" d="M16.368.682V4.319A.682.682,0,0,1,15.2,4.8L14.189,3.786l-6.92,6.92a.682.682,0,0,1-.964,0l-.643-.643a.682.682,0,0,1,0-.964l6.92-6.92L11.567,1.164A.683.683,0,0,1,12.049,0h3.637A.682.682,0,0,1,16.368.682ZM11.567,7.7l-.455.455a.682.682,0,0,0-.2.482v4.1H1.819V3.637h7.5a.682.682,0,0,0,.482-.2l.455-.455a.682.682,0,0,0-.482-1.164H1.364A1.364,1.364,0,0,0,0,3.183v10a1.364,1.364,0,0,0,1.364,1.364h10a1.364,1.364,0,0,0,1.364-1.364V8.177A.682.682,0,0,0,11.567,7.7Z" fill="#2F0154"/>
 </svg>

resources/img/graphic-assets/info-bubble.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20.097" height="20.097" viewBox="0 0 20.097 20.097">
+  <g id="Groupe_8599" data-name="Groupe 8599" transform="translate(-79.034 -170.72)">
+    <ellipse id="Ellipse_2087" data-name="Ellipse 2087" cx="9.548" cy="9.549" rx="9.548" ry="9.549" transform="translate(79.534 171.22)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
+    <g id="Groupe_8598" data-name="Groupe 8598" transform="translate(89.082 176.751)">
+      <path id="Tracé_3197" data-name="Tracé 3197" d="M18,22.53V18" transform="translate(-18 -14.496)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      <path id="Tracé_3198" data-name="Tracé 3198" d="M18,12h0" transform="translate(-18 -12)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    </g>
+  </g>
+</svg>

resources/js/app.js

@@ -7,6 +7,7 @@ import filterPublicationsInit from './archive-template-publications';
 import accordeonInit from './accordeon';
 import pageScrollerInit from './pageScroller';
 import observeChapterProgression from './chapter-progression';
+import notificationsInit from './notifications.js';
 // window.addEventListener('load', function () {});
 
 window.addEventListener('DOMContentLoaded', (event) => {
@@ -23,4 +24,7 @@ window.addEventListener('DOMContentLoaded', (event) => {
 
   // CONSEILS + PARCOURS
   observeChapterProgression();
+
+  // NOTIFICATIONS
+  notificationsInit();
 });

resources/js/notifications.js

@@ -0,0 +1,18 @@
+export default function NotificationsInit() {
+  const notificationsContainer = document.querySelector('.homegrade-notifications');
+
+  if (!notificationsContainer) return;
+  const notifications = notificationsContainer.querySelectorAll('.notification');
+
+  notifications.forEach((notification) => {
+    const notificationClose = notification.querySelector('.notification__close');
+    const notificationId = notification.getAttribute('data-notification-id');
+    console.log(notificationId);
+
+    notificationClose.addEventListener('click', () => {
+      notification.classList.add('notification--dismissed');
+      const thirtyDays = 30 * 86400;
+      document.cookie = `${notificationId}=dismissed; path=/; max-age=${thirtyDays}`;
+    });
+  });
+}

template-archive-conseils.php

@@ -100,9 +100,7 @@ $page_icon = get_field('page_icon', get_queried_object());
 				<!-- SERVICE -->
 				<div class="card-large-content__link">
 					<?php
-					$services_page_ID_FR = get_field('services_page_ID', 'options');
-					// $services_page_ID = apply_filters('wpml_object_id', 52, 'page', TRUE);
-					$services_page_ID = apply_filters('wpml_object_id', $services_page_ID_FR, 'page', false);
+					$services_page_ID = apply_filters('wpml_object_id', 52, 'page', false);
 
 					?>
 					<img class="card-large-content__link__page_icon" src="<?php echo get_template_directory_uri() . '/resources/img/pictogrammes/pictogramme-services.svg' ?>" alt="">

template-components/notifications/notifications-popup.css

@@ -0,0 +1,85 @@
+.notification {
+  @apply px-8 py-4 relative;
+  z-index: ;
+
+  &--alert {
+    @apply bg-secondary-light text-secondary;
+
+    .notification__inner:before {
+      background-image: url('../resources/img/graphic-assets/icon-info-red.svg');
+    }
+    .notification__close {
+      @apply filter-secondary;
+    }
+    a[target='_blank'] {
+      @apply !text-secondary;
+      &:after {
+        @apply filter-secondary;
+      }
+      &:hover,
+      &:focus-visible {
+        @apply outline-secondary;
+        /* background: rgba(253, 245, 246, 1) !important; */
+        background: rgba(223, 30, 30, 0.1) !important;
+      }
+    }
+  }
+  &--info {
+    @apply bg-primary-light text-primary;
+    .notification__inner:before {
+      background-image: url('../resources/img/graphic-assets/icon-info-purple.svg');
+    }
+    .notification__close {
+      @apply filter-primary;
+    }
+    a[target='_blank'] {
+      @apply !text-primary;
+      &:after {
+        @apply filter-primary;
+      }
+      &:hover,
+      &:focus-visible {
+        @apply outline-primary;
+        background: rgba(47, 1, 84, 0.1) !important;
+      }
+    }
+  }
+
+  &--dismissed {
+    @apply hidden;
+  }
+  &__inner {
+    @apply max-w-screen-xl px-8 mx-auto relative;
+    &:before {
+      @apply absolute top-1 left-0 w-5 h-5 bg-contain bg-no-repeat bg-center;
+      content: '';
+    }
+  }
+  &__title,
+  &__content {
+    @apply inline;
+  }
+  &__title {
+    @apply font-bold text-lg mr-2;
+  }
+  &__content {
+    @apply !text-base;
+
+    > * {
+      /* @apply inline; */
+      @apply leading-tight;
+    }
+    > p {
+      @apply inline;
+    }
+    a {
+      @apply font-bold underline;
+    }
+  }
+  &__close {
+    @apply absolute flex justify-center items-center top-0  right-0 z-10;
+    z-index: 10 !important;
+
+    @apply inline-block w-6 h-6;
+  }
+}

template-components/notifications/notifications-popup.php

@@ -0,0 +1,43 @@
+<?php
+
+/**
+ * Notifications Popup
+ *
+ * @package Deligraph_Homegrade
+ */
+
+$notifications = get_field('notifications', 'option');
+
+
+?>
+
+<div class="homegrade-notifications">
+	<?php if ($notifications) : ?>
+		<?php foreach ($notifications as $notification) : ?>
+			<?php
+			$notification_id = 'homegrade_notification_' . md5($notification['title'] . $notification['content']);
+			$cookie_already_hidden = isset($_COOKIE[$notification_id]) && $_COOKIE[$notification_id] === 'dismissed';
+			$notificationType = $notification['type'] ?? 'info';
+
+			if (!isset($_COOKIE[$notification_id])) {
+				setcookie($notification_id, "visible", time() + (86400 * 30), "/");
+			}
+
+			?>
+			<div class="notification notification--<?php echo $notificationType ?> <?php echo $cookie_already_hidden ? "notification--dismissed" : "" ?> " data-notification-id="<?php echo $notification_id; ?>">
+				<div class="notification__inner">
+
+					<h3 class="notification__title"><?php echo $notification['title']; ?></h3>
+					<div class="notification__content"><?php echo $notification['content']; ?></div>
+					<button class="notification__close" aria-label="<?php echo __("Fermer cette notification", "homegrade-theme__texte-fonctionnel") ?>">
+
+						<img src="<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/close_submenu_icon_transparent.svg' ?>" alt="">
+
+					</button>
+				</div>
+
+
+			</div>
+		<?php endforeach; ?>
+	<?php endif; ?>
+</div>

theme.json

@@ -39,6 +39,11 @@
           "slug": "primary",
           "color": "#2F0154"
         },
+        {
+          "name": "Primaire Light",
+          "slug": "primary-light",
+          "color": "#F4F2F6"
+        },
         {
           "name": "Primaire Survol",
           "slug": "primary-hover",