archive projets for mobile

node-full mobile display
big improvement over projets, evenement, links, calendar, and mobile display
2026-09-29 16:28:14 +02:00 · 2026-09-29 16:18:53 +02:00 · 2026-09-29 15:57:34 +02:00 · 2026-09-29 10:26:09 +02:00 · 2026-09-29 10:17:32 +02:00 · 2026-09-29 09:46:34 +02:00
43 changed files with 2169 additions and 892 deletions
@@ -0,0 +1,14 @@
+uuid: 4263a6ab-307a-4e78-b28d-74d8788b4ded
+langcode: fr
+status: true
+dependencies: {  }
+id: projet_evenement
+label: projet_evenement
+enabled: true
+first_field: field_projet_s_lie_s
+second_field: field_evenement_s_lie_s
+add_direction: append
+bundles:
+  node:
+    - evenement
+    - projet
@@ -31,6 +31,7 @@ third_party_settings:
      children:
        - group_description
        - group_liens
+        - group_media
      label: Tabs
      region: content
      parent_name: ''
@@ -110,8 +111,8 @@ third_party_settings:
        - field_images
      label: Media
      region: content
-      parent_name: ''
-      weight: 4
+      parent_name: group_tabs
+      weight: 13
      format_type: tab
      format_settings:
        classes: ''
@@ -7,6 +7,7 @@ dependencies:
    - field.field.node.projet.body
    - field.field.node.projet.field_artiste_s_invite_s
    - field.field.node.projet.field_dates
+    - field.field.node.projet.field_evenement_s_lie_s
    - field.field.node.projet.field_fichiers
    - field.field.node.projet.field_images
    - field.field.node.projet.field_infos_pratiques
@@ -125,6 +126,7 @@ third_party_settings:
    group_liens:
      children:
        - field_projet_s_lie_s
+        - field_evenement_s_lie_s
      label: liens
      region: content
      parent_name: group_tabs
@@ -177,6 +179,16 @@ content:
    region: content
    settings: {  }
    third_party_settings: {  }
+  field_evenement_s_lie_s:
+    type: entity_reference_autocomplete
+    weight: 7
+    region: content
+    settings:
+      match_operator: CONTAINS
+      match_limit: 10
+      size: 60
+      placeholder: ''
+    third_party_settings: {  }
  field_fichiers:
    type: file_generic
    weight: 8
@@ -38,7 +38,7 @@ content:
    settings:
      link: false
    third_party_settings: {  }
-    weight: 3
+    weight: 1
    region: content
  field_dates:
    type: daterange_default
@@ -78,7 +78,7 @@ content:
    settings:
      link: false
    third_party_settings: {  }
-    weight: 2
+    weight: 3
    region: content
  field_type_d_evenement:
    type: entity_reference_label
@@ -86,7 +86,7 @@ content:
    settings:
      link: true
    third_party_settings: {  }
-    weight: 1
+    weight: 2
    region: content
 hidden:
  body: true
@@ -39,7 +39,7 @@ content:
    settings:
      link: false
    third_party_settings: {  }
-    weight: 3
+    weight: 1
    region: content
  field_dates:
    type: daterange_default
@@ -84,7 +84,7 @@ content:
    settings:
      link: false
    third_party_settings: {  }
-    weight: 1
+    weight: 2
    region: content
  field_partenaire_s:
    type: entity_reference_label
@@ -115,7 +115,7 @@ content:
    settings:
      link: false
    third_party_settings: {  }
-    weight: 2
+    weight: 3
    region: content
  links:
    settings: {  }
@@ -105,7 +105,7 @@ content:
    type: entity_reference_entity_view
    label: above
    settings:
-      view_mode: tableau_liste
+      view_mode: lie
      link: false
    third_party_settings: {  }
    weight: 8
@@ -0,0 +1,99 @@
+uuid: da229af2-3a56-4d57-914e-9c14a90feef3
+langcode: fr
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.node.lie
+    - field.field.node.evenement.body
+    - field.field.node.evenement.field_artiste_s_invite_s
+    - field.field.node.evenement.field_dates
+    - field.field.node.evenement.field_images
+    - field.field.node.evenement.field_infos_pratiques
+    - field.field.node.evenement.field_invite_accompagne_curate_p
+    - field.field.node.evenement.field_lieu
+    - field.field.node.evenement.field_partenaire_s
+    - field.field.node.evenement.field_portage
+    - field.field.node.evenement.field_projet_s_lie_s
+    - field.field.node.evenement.field_type_d_evenement
+    - image.style.large
+    - node.type.evenement
+  module:
+    - datetime_range
+    - image_delta_formatter
+    - layout_builder
+    - text
+    - user
+third_party_settings:
+  layout_builder:
+    enabled: false
+    allow_custom: false
+id: node.evenement.lie
+targetEntityType: node
+bundle: evenement
+mode: lie
+content:
+  field_artiste_s_invite_s:
+    type: entity_reference_label
+    label: hidden
+    settings:
+      link: false
+    third_party_settings: {  }
+    weight: 3
+    region: content
+  field_dates:
+    type: daterange_default
+    label: hidden
+    settings:
+      timezone_override: ''
+      format_type: medium
+      from_to: both
+      separator: '-'
+    third_party_settings: {  }
+    weight: 0
+    region: content
+  field_images:
+    type: image_delta_formatter
+    label: visually_hidden
+    settings:
+      deltas:
+        - 0
+      deltas_reversed: false
+      image_link: content
+      image_style: large
+      image_loading:
+        attribute: lazy
+    third_party_settings: {  }
+    weight: 4
+    region: content
+  field_infos_pratiques:
+    type: text_default
+    label: above
+    settings: {  }
+    third_party_settings: {  }
+    weight: 5
+    region: content
+  field_lieu:
+    type: entity_reference_label
+    label: visually_hidden
+    settings:
+      link: false
+    third_party_settings: {  }
+    weight: 1
+    region: content
+  field_type_d_evenement:
+    type: entity_reference_label
+    label: hidden
+    settings:
+      link: false
+    third_party_settings: {  }
+    weight: 2
+    region: content
+hidden:
+  body: true
+  field_invite_accompagne_curate_p: true
+  field_partenaire_s: true
+  field_portage: true
+  field_projet_s_lie_s: true
+  langcode: true
+  links: true
+  search_api_excerpt: true
@@ -6,6 +6,7 @@ dependencies:
    - field.field.node.projet.body
    - field.field.node.projet.field_artiste_s_invite_s
    - field.field.node.projet.field_dates
+    - field.field.node.projet.field_evenement_s_lie_s
    - field.field.node.projet.field_fichiers
    - field.field.node.projet.field_images
    - field.field.node.projet.field_infos_pratiques
@@ -51,7 +52,15 @@ content:
      from_to: both
      separator: '-'
    third_party_settings: {  }
-    weight: 2
+    weight: 3
+    region: content
+  field_evenement_s_lie_s:
+    type: entity_reference_label
+    label: above
+    settings:
+      link: true
+    third_party_settings: {  }
+    weight: 12
    region: content
  field_fichiers:
    type: file_default
@@ -116,7 +125,7 @@ content:
    settings:
      link: false
    third_party_settings: {  }
-    weight: 3
+    weight: 2
    region: content
  links:
    settings: {  }
@@ -7,6 +7,7 @@ dependencies:
    - field.field.node.projet.body
    - field.field.node.projet.field_artiste_s_invite_s
    - field.field.node.projet.field_dates
+    - field.field.node.projet.field_evenement_s_lie_s
    - field.field.node.projet.field_fichiers
    - field.field.node.projet.field_images
    - field.field.node.projet.field_infos_pratiques
@@ -58,7 +59,16 @@ content:
      from_to: both
      separator: '-'
    third_party_settings: {  }
-    weight: 2
+    weight: 3
+    region: content
+  field_evenement_s_lie_s:
+    type: entity_reference_entity_view
+    label: above
+    settings:
+      view_mode: calendrier
+      link: false
+    third_party_settings: {  }
+    weight: 9
    region: content
  field_fichiers:
    type: file_default
@@ -66,7 +76,7 @@ content:
    settings:
      use_description_as_link_text: true
    third_party_settings: {  }
-    weight: 9
+    weight: 6
    region: content
  field_images:
    type: image_caption
@@ -77,7 +87,7 @@ content:
      image_loading:
        attribute: lazy
    third_party_settings: {  }
-    weight: 10
+    weight: 11
    region: content
  field_infos_pratiques:
    type: text_default
@@ -100,22 +110,23 @@ content:
    settings:
      link: false
    third_party_settings: {  }
-    weight: 6
+    weight: 7
    region: content
  field_portage:
    type: list_default
    label: above
    settings: {  }
    third_party_settings: {  }
-    weight: 7
+    weight: 8
    region: content
  field_projet_s_lie_s:
-    type: entity_reference_label
+    type: entity_reference_entity_view
    label: above
    settings:
-      link: true
+      view_mode: lie
+      link: false
    third_party_settings: {  }
-    weight: 8
+    weight: 10
    region: content
  field_type_de_projet:
    type: entity_reference_label
@@ -123,7 +134,7 @@ content:
    settings:
      link: true
    third_party_settings: {  }
-    weight: 3
+    weight: 2
    region: content
 hidden:
  langcode: true
@@ -0,0 +1,93 @@
+uuid: c2f9023f-0a4d-4ad1-9515-616f1fae1f72
+langcode: fr
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.node.lie
+    - field.field.node.projet.body
+    - field.field.node.projet.field_artiste_s_invite_s
+    - field.field.node.projet.field_dates
+    - field.field.node.projet.field_evenement_s_lie_s
+    - field.field.node.projet.field_fichiers
+    - field.field.node.projet.field_images
+    - field.field.node.projet.field_infos_pratiques
+    - field.field.node.projet.field_invite_accompagne_curate_p
+    - field.field.node.projet.field_partenaire_s
+    - field.field.node.projet.field_portage
+    - field.field.node.projet.field_projet_s_lie_s
+    - field.field.node.projet.field_type_de_projet
+    - image.style.large
+    - node.type.projet
+  module:
+    - advanced_text_formatter
+    - image_delta_formatter
+    - layout_builder
+    - user
+third_party_settings:
+  layout_builder:
+    enabled: false
+    allow_custom: false
+id: node.projet.lie
+targetEntityType: node
+bundle: projet
+mode: lie
+content:
+  body:
+    type: advanced_text
+    label: hidden
+    settings:
+      trim_length: '100'
+      ellipsis: '1'
+      word_boundary: '1'
+      link_to_entity: '1'
+      filter: input
+      format: plain_text
+      allowed_html:
+        - a
+        - b
+        - br
+        - dd
+        - dl
+        - dt
+        - em
+        - i
+        - li
+        - ol
+        - p
+        - strong
+        - u
+        - ul
+      use_summary: 0
+      token_replace: 0
+      autop: 0
+    third_party_settings: {  }
+    weight: 1
+    region: content
+  field_images:
+    type: image_delta_formatter
+    label: hidden
+    settings:
+      deltas:
+        - 0
+      deltas_reversed: false
+      image_link: content
+      image_style: large
+      image_loading:
+        attribute: lazy
+    third_party_settings: {  }
+    weight: 0
+    region: content
+hidden:
+  field_artiste_s_invite_s: true
+  field_dates: true
+  field_evenement_s_lie_s: true
+  field_fichiers: true
+  field_infos_pratiques: true
+  field_invite_accompagne_curate_p: true
+  field_partenaire_s: true
+  field_portage: true
+  field_projet_s_lie_s: true
+  field_type_de_projet: true
+  langcode: true
+  links: true
+  search_api_excerpt: true
@@ -7,6 +7,7 @@ dependencies:
    - field.field.node.projet.body
    - field.field.node.projet.field_artiste_s_invite_s
    - field.field.node.projet.field_dates
+    - field.field.node.projet.field_evenement_s_lie_s
    - field.field.node.projet.field_fichiers
    - field.field.node.projet.field_images
    - field.field.node.projet.field_infos_pratiques
@@ -82,6 +83,7 @@ content:
    weight: 3
    region: content
 hidden:
+  field_evenement_s_lie_s: true
  field_fichiers: true
  field_infos_pratiques: true
  field_invite_accompagne_curate_p: true
@@ -7,6 +7,7 @@ dependencies:
    - field.field.node.projet.body
    - field.field.node.projet.field_artiste_s_invite_s
    - field.field.node.projet.field_dates
+    - field.field.node.projet.field_evenement_s_lie_s
    - field.field.node.projet.field_fichiers
    - field.field.node.projet.field_images
    - field.field.node.projet.field_infos_pratiques
@@ -73,6 +74,7 @@ content:
    region: content
 hidden:
  field_dates: true
+  field_evenement_s_lie_s: true
  field_fichiers: true
  field_invite_accompagne_curate_p: true
  field_partenaire_s: true
@@ -0,0 +1,11 @@
+uuid: b8b1728c-a891-4823-9302-05a50e10454a
+langcode: fr
+status: true
+dependencies:
+  module:
+    - node
+id: node.lie
+label: Lié
+description: ''
+targetEntityType: node
+cache: true
@@ -0,0 +1,29 @@
+uuid: 5a23a8c7-5d7b-4f95-ac25-0e0d54bf81ae
+langcode: fr
+status: true
+dependencies:
+  config:
+    - field.storage.node.field_evenement_s_lie_s
+    - node.type.evenement
+    - node.type.projet
+id: node.projet.field_evenement_s_lie_s
+field_name: field_evenement_s_lie_s
+entity_type: node
+bundle: projet
+label: 'Évenement(s) lié(s)'
+description: ''
+required: false
+translatable: false
+default_value: {  }
+default_value_callback: ''
+settings:
+  handler: 'default:node'
+  handler_settings:
+    target_bundles:
+      evenement: evenement
+    sort:
+      field: _none
+      direction: ASC
+    auto_create: false
+    auto_create_bundle: ''
+field_type: entity_reference
@@ -0,0 +1,19 @@
+uuid: 11b1c707-3204-46a0-ab41-e7a7fe25a7cd
+langcode: fr
+status: true
+dependencies:
+  module:
+    - node
+id: node.field_evenement_s_lie_s
+field_name: field_evenement_s_lie_s
+entity_type: node
+type: entity_reference
+settings:
+  target_type: node
+module: core
+locked: false
+cardinality: -1
+translatable: true
+indexes: {  }
+persist_with_no_fields: false
+custom_storage: false
@@ -192,6 +192,404 @@ display:
        - user.permissions
      tags:
        - 'config:field.storage.node.field_dates'
+  embed_1:
+    id: embed_1
+    display_title: 'Évenement (passés) [Intégré]'
+    display_plugin: embed
+    position: 2
+    display_options:
+      title: 'Les Évenments passés'
+      fields:
+        field_dates_1:
+          id: field_dates_1
+          table: node__field_dates
+          field: field_dates
+          relationship: none
+          group_type: group
+          admin_label: ''
+          plugin_id: field
+          label: month
+          exclude: false
+          alter:
+            alter_text: false
+            text: ''
+            make_link: false
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: true
+            ellipsis: true
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: true
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+          click_sort_column: value
+          type: daterange_custom
+          settings:
+            timezone_override: ''
+            date_format: m
+            from_to: start_date
+            separator: '-'
+          group_column: value
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 0
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: separator
+          separator: ', '
+          field_api_classes: false
+        field_dates_2:
+          id: field_dates_2
+          table: node__field_dates
+          field: field_dates
+          relationship: none
+          group_type: group
+          admin_label: ''
+          plugin_id: field
+          label: year
+          exclude: false
+          alter:
+            alter_text: false
+            text: ''
+            make_link: false
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: true
+            ellipsis: true
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: true
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+          click_sort_column: value
+          type: daterange_custom
+          settings:
+            timezone_override: ''
+            date_format: 'y'
+            from_to: start_date
+            separator: '-'
+          group_column: value
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 0
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: separator
+          separator: ', '
+          field_api_classes: false
+        nothing:
+          id: nothing
+          table: views
+          field: nothing
+          relationship: none
+          group_type: group
+          admin_label: ''
+          plugin_id: custom
+          label: ''
+          exclude: false
+          alter:
+            alter_text: true
+            text: '<span class="month">{{ field_dates_1 }}</span>.<span class="year">{{ field_dates_2 }}</span>'
+            make_link: false
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: true
+            ellipsis: true
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: false
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: false
+      sorts:
+        field_dates_value:
+          id: field_dates_value
+          table: node__field_dates
+          field: field_dates_value
+          relationship: none
+          group_type: group
+          admin_label: ''
+          plugin_id: datetime
+          order: DESC
+          expose:
+            label: ''
+            field_identifier: ''
+          exposed: false
+          granularity: second
+      arguments:
+        tid:
+          id: tid
+          table: taxonomy_index
+          field: tid
+          relationship: none
+          group_type: group
+          admin_label: ''
+          plugin_id: taxonomy_index_tid
+          default_action: ignore
+          exception:
+            value: all
+            title_enable: false
+            title: All
+          title_enable: true
+          title: 'Les événements | {{ arguments.tid }}'
+          default_argument_type: fixed
+          default_argument_options:
+            argument: ''
+          summary_options:
+            base_path: ''
+            count: true
+            override: false
+            items_per_page: 25
+          summary:
+            sort_order: asc
+            number_of_records: 0
+            format: default_summary
+          specify_validation: false
+          validate:
+            type: none
+            fail: 'not found'
+          validate_options: {  }
+          break_phrase: false
+          add_table: false
+          require_value: false
+          reduce_duplicates: false
+      filters:
+        status:
+          id: status
+          table: node_field_data
+          field: status
+          entity_type: node
+          entity_field: status
+          plugin_id: boolean
+          value: '1'
+          group: 1
+          expose:
+            operator: ''
+        type:
+          id: type
+          table: node_field_data
+          field: type
+          relationship: none
+          group_type: group
+          admin_label: ''
+          entity_type: node
+          entity_field: type
+          plugin_id: bundle
+          operator: in
+          value:
+            evenement: evenement
+          group: 1
+          exposed: false
+          expose:
+            operator_id: ''
+            label: ''
+            description: ''
+            use_operator: false
+            operator: ''
+            operator_limit_selection: false
+            operator_list: {  }
+            identifier: ''
+            required: false
+            remember: false
+            multiple: false
+            remember_roles:
+              authenticated: authenticated
+            reduce: false
+          is_grouped: false
+          group_info:
+            label: ''
+            description: ''
+            identifier: ''
+            optional: true
+            widget: select
+            multiple: false
+            remember: false
+            default_group: All
+            default_group_multiple: {  }
+            group_items: {  }
+        field_dates_end_value:
+          id: field_dates_end_value
+          table: node__field_dates
+          field: field_dates_end_value
+          relationship: none
+          group_type: group
+          admin_label: ''
+          plugin_id: datetime
+          operator: '<'
+          value:
+            min: ''
+            max: ''
+            value: today
+            type: offset
+          group: 1
+          exposed: false
+          expose:
+            operator_id: ''
+            label: ''
+            description: ''
+            use_operator: false
+            operator: ''
+            operator_limit_selection: false
+            operator_list: {  }
+            identifier: ''
+            required: false
+            remember: false
+            multiple: false
+            remember_roles:
+              authenticated: authenticated
+            min_placeholder: ''
+            max_placeholder: ''
+            placeholder: ''
+          is_grouped: false
+          group_info:
+            label: ''
+            description: ''
+            identifier: ''
+            optional: true
+            widget: select
+            multiple: false
+            remember: false
+            default_group: All
+            default_group_multiple: {  }
+            group_items: {  }
+      filter_groups:
+        operator: AND
+        groups:
+          1: AND
+      style:
+        type: default
+        options:
+          grouping:
+            -
+              field: nothing
+              rendered: true
+              rendered_strip: false
+          row_class: ''
+          default_row_class: true
+          uses_fields: true
+      row:
+        type: 'entity:node'
+        options:
+          relationship: none
+          view_mode: calendrier
+      defaults:
+        title: false
+        css_class: false
+        style: false
+        row: false
+        fields: false
+        sorts: false
+        arguments: false
+        filters: false
+        filter_groups: false
+        header: false
+      css_class: 'views-archives views-archives-evenements'
+      display_description: ''
+      header:
+        area:
+          id: area
+          table: views
+          field: area
+          relationship: none
+          group_type: group
+          admin_label: ''
+          plugin_id: text
+          empty: false
+          content:
+            value: 'Événements passés'
+            format: wysiwyg
+          tokenize: false
+      display_extenders: {  }
+    cache_metadata:
+      max-age: -1
+      contexts:
+        - 'languages:language_content'
+        - 'languages:language_interface'
+        - url
+        - 'user.node_grants:view'
+        - user.permissions
+      tags:
+        - 'config:field.storage.node.field_dates'
  page_1:
    id: page_1
    display_title: 'Page Projets'
@@ -410,21 +808,21 @@ display:
      tags: {  }
  page_2:
    id: page_2
-    display_title: 'Page Évenements'
+    display_title: 'Page Évenements (futures)'
    display_plugin: page
    position: 2
    display_options:
-      title: 'Les Évenments'
+      title: 'Les Évenements à venir'
      fields:
-        field_dates:
-          id: field_dates
+        field_dates_1:
+          id: field_dates_1
          table: node__field_dates
          field: field_dates
          relationship: none
          group_type: group
          admin_label: ''
          plugin_id: field
-          label: ''
+          label: month
          exclude: false
          alter:
            alter_text: false
@@ -457,6 +855,138 @@ display:
          element_class: ''
          element_label_type: ''
          element_label_class: ''
+          element_label_colon: true
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+          click_sort_column: value
+          type: daterange_custom
+          settings:
+            timezone_override: ''
+            date_format: m
+            from_to: start_date
+            separator: '-'
+          group_column: value
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 0
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: separator
+          separator: ', '
+          field_api_classes: false
+        field_dates_2:
+          id: field_dates_2
+          table: node__field_dates
+          field: field_dates
+          relationship: none
+          group_type: group
+          admin_label: ''
+          plugin_id: field
+          label: year
+          exclude: false
+          alter:
+            alter_text: false
+            text: ''
+            make_link: false
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: true
+            ellipsis: true
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: true
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+          click_sort_column: value
+          type: daterange_custom
+          settings:
+            timezone_override: ''
+            date_format: 'y'
+            from_to: start_date
+            separator: '-'
+          group_column: value
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 0
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: separator
+          separator: ', '
+          field_api_classes: false
+        nothing:
+          id: nothing
+          table: views
+          field: nothing
+          relationship: none
+          group_type: group
+          admin_label: ''
+          plugin_id: custom
+          label: ''
+          exclude: false
+          alter:
+            alter_text: true
+            text: '<span class="month">{{ field_dates_1 }}</span>.<span class="year">{{ field_dates_2 }}</span>'
+            make_link: false
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: true
+            ellipsis: true
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
          element_label_colon: false
          element_wrapper_type: ''
          element_wrapper_class: ''
@@ -464,24 +994,22 @@ display:
          empty: ''
          hide_empty: false
          empty_zero: false
-          hide_alter_empty: true
-          click_sort_column: value
-          type: daterange_default
-          settings:
-            timezone_override: ''
-            format_type: m_y
-            from_to: start_date
-            separator: '-'
-          group_column: value
-          group_columns: {  }
-          group_rows: true
-          delta_limit: 0
-          delta_offset: 0
-          delta_reversed: false
-          delta_first_last: false
-          multi_type: separator
-          separator: ', '
-          field_api_classes: false
+          hide_alter_empty: false
+      sorts:
+        field_dates_value:
+          id: field_dates_value
+          table: node__field_dates
+          field: field_dates_value
+          relationship: none
+          group_type: group
+          admin_label: ''
+          plugin_id: datetime
+          order: ASC
+          expose:
+            label: ''
+            field_identifier: ''
+          exposed: false
+          granularity: second
      arguments:
        tid:
          id: tid
@@ -573,6 +1101,51 @@ display:
            default_group: All
            default_group_multiple: {  }
            group_items: {  }
+        field_dates_end_value:
+          id: field_dates_end_value
+          table: node__field_dates
+          field: field_dates_end_value
+          relationship: none
+          group_type: group
+          admin_label: ''
+          plugin_id: datetime
+          operator: '>='
+          value:
+            min: ''
+            max: ''
+            value: today
+            type: offset
+          group: 1
+          exposed: false
+          expose:
+            operator_id: ''
+            label: ''
+            description: ''
+            use_operator: false
+            operator: ''
+            operator_limit_selection: false
+            operator_list: {  }
+            identifier: ''
+            required: false
+            remember: false
+            multiple: false
+            remember_roles:
+              authenticated: authenticated
+            min_placeholder: ''
+            max_placeholder: ''
+            placeholder: ''
+          is_grouped: false
+          group_info:
+            label: ''
+            description: ''
+            identifier: ''
+            optional: true
+            widget: select
+            multiple: false
+            remember: false
+            default_group: All
+            default_group_multiple: {  }
+            group_items: {  }
      filter_groups:
        operator: AND
        groups:
@@ -582,7 +1155,7 @@ display:
        options:
          grouping:
            -
-              field: field_dates
+              field: nothing
              rendered: true
              rendered_strip: false
          row_class: ''
@@ -599,11 +1172,40 @@ display:
        style: false
        row: false
        fields: false
+        sorts: false
        arguments: false
        filters: false
        filter_groups: false
+        header: false
+        footer: false
      css_class: 'views-archives views-archives-evenements'
      display_description: ''
+      header:
+        area:
+          id: area
+          table: views
+          field: area
+          relationship: none
+          group_type: group
+          admin_label: ''
+          plugin_id: text
+          empty: false
+          content:
+            value: 'Événements à venir'
+            format: wysiwyg
+          tokenize: false
+      footer:
+        view:
+          id: view
+          table: views
+          field: view
+          relationship: none
+          group_type: group
+          admin_label: ''
+          plugin_id: view
+          empty: true
+          view_to_insert: 'archives:embed_1'
+          inherit_arguments: true
      display_extenders: {  }
      path: evenements
      menu:
@@ -329,7 +329,7 @@ gsap.registerPlugin(ScrollTrigger);
    function initFsLightbox(){
      console.log('initFsLightbox');
      // console.log(window.FsLightbox);
-      let imgs_links = document.querySelectorAll('article.node-type-projet.view-mode-full .field_images.multiple .field-item a');
+      let imgs_links = document.querySelectorAll('article.node-type-projet.view-mode-full .col.right .field_images.multiple .field-item a');
      for (const link of imgs_links) {
        link.setAttribute("data-fslightbox", "gallery")
      }
@@ -2,8 +2,10 @@
 import Splitting from "splitting";
 import { hyphenateSync } from "hyphen/fr";

-// À garder identique à $variable-title-selectors (main.scss), qui masque ces
-// titres jusqu'à `is-ready`.
+// La classe `variable-title` (posée dans initTitles) masque l'élément via le CSS
+// (.variable-title:not(.is-ready)) jusqu'à ce qu'il soit splitté et marqué
+// `is-ready`. Le CSS ne masque rien que ce fichier ne traite pas : cette liste
+// peut évoluer librement, aucun contenu ne peut rester invisible par désync.
 const TITLE_SELECTORS = '\
  #block-leshed-identitedusite>a, \
  article.node-type-projet>header>h2,\
@@ -11,11 +13,9 @@ const TITLE_SELECTORS = '\
  article.node-type-projet.view-mode-full h2.node-title,\
  article.node-type-evenement>header>h2,\
  article.node-type-evenement.view-mode-full h2.node-title,\
-  article.node-type-evenement.view-mode-calendrier h2.node-title,\
-  div.views-archives-evenements > h3 > time\
+  article.node-type-evenement.view-mode-calendrier h2.node-title\
  ';
-  // article.node-type-evenement>header>.field_dates>time,\
-  // article.node-type-evenement.view-mode-full .field_dates.digit-dates span.date-part,\
+  // div.views-archives-evenements > h3 > time\

 // Police Epilogue = axe variable `wght` (100–900) uniquement ; l'italique est
 // un fichier séparé (font-style).
@@ -1,756 +1,16 @@
-@use "partials/variables" as *;
-@use "partials/colors" as *;
-@use "partials/fonts" as *;
-@use "partials/mixins" as *;
-
-a, a:visited{
-  text-decoration: none;
-  color: inherit;
-  transition: color 0.15s ease-out;
-}
-
-body{
-  margin: 0;
-  // background-color: green;
-  font-weight: $default_fwght;
-  line-height: 1.5;
-}
-
-// Splitting met .word ET .char en inline-block :
-// - inline-block sur .char crée une opportunité de coupure entre CHAQUE lettre ;
-// - inline-block sur .word (dimensionné en max-content) empêche tout retour à la
-//   ligne interne, donc les soft hyphens ne peuvent jamais couper le mot.
-// On repasse les deux en inline : le mot redevient un flux de texte qui ne coupe
-// qu'aux césures logicielles (U+00AD) insérées par le JS.
-// Spécificité (0,2,1) pour battre `.splitting .word/.char` de Splitting.
-.splitting span.word,
-.splitting span.char{
-  display: inline;
-}
-
-
-//  _                             _
-// | |                           | |
-// | |     __ _ _   _  ___  _   _| |_
-// | |    / _` | | | |/ _ \| | | | __|
-// | |___| (_| | |_| | (_) | |_| | |_
-// \_____/\__,_|\__, |\___/ \__,_|\__|
-//               __/ |
-//              |___/
-
-div.layout-container{
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  overflow: hidden;
-  max-width:$layout_width;
-  margin: 0 auto;
-  header[role="banner"]{
-    display: block;
-    position: relative;
-    padding: 0.5em 0;
-    flex: 1 1 $header_height;
-    z-index: 100;
-    // position: fixed;
-    // top:0;
-    // width: 100%;
-    height: $header_height;
-    min-height: $header_height;
-  }
-  main[role="main"]{
-    flex: 1 1 auto;
-    // padding:5em 0;
-    overflow-y: scroll;
-  }
-  // footer[role="contentinfo"]{
-  //   // flex: 0 1 content;
-  //   z-index: 100;
-  //   position: fixed;
-  //   bottom: 0;
-  //   width: 100%;
-  // }
-}
-
-
-
-//  _   _                _
-// | | | |              | |
-// | |_| | ___  __ _  __| | ___ _ __
-// |  _  |/ _ \/ _` |/ _` |/ _ \ '__|
-// | | | |  __/ (_| | (_| |  __/ |
-// \_| |_/\___|\__,_|\__,_|\___|_|
-
-
-header[role="banner"]{
-  background-color: #fff;
-  // box-shadow: 0 -5px 15px #000;
-
-  .header-middle{
-    display: flex;
-    justify-content:space-between;
-    align-items: center;
-    padding: 0.2em 0;
-  }
-
-  #block-leshed-identitedusite{
-    a{
-      // color: ;
-      text-decoration: none;
-      font-size: 2em;
-      font-weight: 500;
-      margin-right: 0.5em;
-      // &:hover{
-      //   color: $rose;
-      // }
-    }
-  }
-
-  .header-right{
-    // position: relative;
-    height:20px; width:20px;
-    cursor: pointer;
-    // background-color: green;
-
-    >div#burger-btn{
-      position:relative;
-      transition-duration: 0.5s;
-      transition-property: transform;
-      top: 8.5px;
-      &, &::before, &::after{
-        // position: absolute;
-        width:20px; height:3px;
-        background-color: #000;
-
-      }
-      &:hover{
-        &, &::before, &::after{
-          background-color: green;
-        }
-      }
-      &::before, &::after{
-        content: "";
-        position: absolute;
-        left: 0;
-        // background-color: red;
-      }
-      &::before{
-        top:6px;
-      }
-      &::after{
-        bottom: 6px;
-      }
-      &[opened]{
-        transform: rotate(90deg);
-      }
-    }
-
-
-    &>div.wrapper{
-      // fixed (et non absolute) pour échapper à l'overflow:hidden de
-      // .layout-container : sinon le débord pleine largeur (et donc le
-      // backdrop-filter) est rogné aux bords du conteneur centré.
-      position:fixed;
-      top:$header_height;
-      left: 0;
-      width:100vw;
-      padding: 0 calc((100vw - $layout_width) / 2) 0 calc((100vw - $layout_width) / 2);
-
-      background-color: rgba(255,255,255,0.3);
-      backdrop-filter: blur(7px);
-
-      height: 0;
-      overflow: hidden;
-      transition-duration: 0.5s;
-      &[opened]{
-        height: calc(100vh - $header_height);
-      }
-      nav#block-leshed-navigationprincipale{
-        // width: $layout_width;
-        // margin: 0 auto;
-        padding-top: 10px;
-        // background-color: #fff;
-        >ul{
-          margin: 0;
-          padding:0;
-          li{
-            list-style: none;
-            a{
-              font-size: 4em;
-              font-weight: 200;
-              filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #fff) drop-shadow(0 0 15px #fff);
-            }
-          }
-        }
-      }
-      div#block-leshed-selecteurdelangue{
-        ul{
-          margin:0;
-          padding:0;
-          li{
-            list-style: none;
-            padding:0;
-            display: inline-block;
-            font-size: 2em;
-            &:first-child{
-              &:after{
-                content: " /";
-                font-weight: 200;
-              }
-            }
-            &:last-child{
-              padding-left: 0.3em;
-
-            }
-            &.is-active{
-              font-weight: 400;
-            }
-
-          }
-        }
-      }
-    }
-
-  }
-} // end of header[role="banner"]{
-
-
-//    ____ _       _           _
-//   / ___| | ___ | |__   __ _| |___
-//  | |  _| |/ _ \| '_ \ / _` | / __|
-//  | |_| | | (_) | |_) | (_| | \__ \
-//   \____|_|\___/|_.__/ \__,_|_|___/
-
-.variable-title{
-  margin: 0;
-  font-weight: 200;
-  text-transform:lowercase;
-  line-height: 1;
-  // margin-left: -0.04em;
-  filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 15px #fff);
-  span.word{
-    span.char{
-      letter-spacing:-0.1em;
-    }
-  }
-  // span.whitespace{
-  //   letter-spacing: 0.5em;
-  // }
-}
-
-// Titres traités par assets/js/titles.js : garder identique à TITLE_SELECTORS.
-$variable-title-selectors: (
-  '#block-leshed-identitedusite>a',
-  'article.node-type-projet>header>h2',
-  'article.node-type-projet>.cols>.left>h2',
-  'article.node-type-projet.view-mode-full h2.node-title',
-  'article.node-type-evenement>header>h2',
-  'article.node-type-evenement>header>.field_dates>time',
-  'article.node-type-evenement.view-mode-full h2.node-title',
-  'article.node-type-evenement.view-mode-full .field_dates.digit-dates span.date-part',
-);
-
-// Avant le split : même métrique qu'après, pour éviter un saut de mise en page.
-:where(#{$variable-title-selectors}):not(.splitting){
-  margin: 0;
-  font-weight: 200;
-  text-transform: lowercase;
-  line-height: 1;
-  letter-spacing: -0.1em;
-}
-
-// Masqués (place conservée) jusqu'au split ; réaffichés après 3 s si le JS échoue.
-@media (scripting: enabled){
-  :where(#{$variable-title-selectors}):not(.is-ready){
-    visibility: hidden;
-    animation: leshed-title-failsafe 0s 3s forwards;
-  }
-}
-
-@keyframes leshed-title-failsafe{
-  to{ visibility: visible; }
-}
-
-
-div#block-leshed-titredelapage h1{
-  font-size: 1em;
-  font-weight: $default_fwght;
-  margin: 0;
-}
-
-
-
-//   _____ _____        __   ____ ___  _     ____
-//  |_   _/ _ \ \      / /  / ___/ _ \| |   / ___|
-//    | || | | \ \ /\ / /  | |  | | | | |   \___ \
-//    | || |_| |\ V  V /   | |__| |_| | |___ ___) |
-//    |_| \___/  \_/\_/     \____\___/|_____|____/
-
-@mixin nodeListe{
-  >header{
-
-    >h2{
-      font-size: 5em;
-    }
-  }
-  .field_artiste_s_invite_s{
-    font-size: 1.8em;
-    font-weight: 300;
-  }
-
-  .field_type_d_evenement,
-  .field_type_de_projet{
-    font-weight: 400;
-  }
-
-  &.has-image{
-    >header{
-      >h2{
-        position: relative;
-        max-height: 1em;
-        overflow: visible;
-        z-index: 10;
-        // text-shadow: 0 0 10px #fff;
-        // box-shadow: 0 0 15px #f00;
-        // filter: drop-shadow(0 0 5px #fff);
-
-        // Si le titre déborde de N lignes sous l'image, on remet N lignes
-        // supplémentaires dans le flux avant l'image pour absorber le débordement.
-        @for $i from 1 through 10 {
-          &[data-overflow-lines="#{$i}"] {
-            max-height: #{$i}em;
-          }
-        }
-      }
-      div.field_images{
-        position:relative;
-        // width: 100%;
-        z-index: 5;
-        a{
-          display:block;
-          img{
-            width:100%;
-            height: auto;
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin projetListe{
-  @include nodeListe();
-
-  div.field_artiste_s_invite_s.field-items.multiple{
-    // display: flex;
-    // flex-direction: row;
-    .field-item{
-      display: inline-block;
-      &:not(:last-of-type):after{
-        content: ", ";
-      }
-    }
-  }
-}
-
-@mixin evenementListe{
-  @include nodeListe();
-  >header{
-    .field_dates{
-      font-size: 4em;
-      line-height: 1;
-      time{
-        span.date-part:not(:last-child){
-          &:after{
-            content:".";
-          }
-        }
-      }
-    }
-  }
-}
-
-
-div.layout.layout--twocol-section--50-50{
-  flex-wrap: nowrap;
-  // Sans ça, `align-items: stretch` (défaut flex) étire les deux colonnes à la
-  // même hauteur : la synchro de scroll ne verrait aucune différence de hauteur.
-  // flex-start = chaque colonne prend la hauteur de son contenu.
-  align-items: flex-start;
-
-  column-gap: $colsgap;
-  div.layout__region{
-    max-width: calc(50% - $colsgap / 2);
-    flex: 1 0 calc(50% - $colsgap / 2);
-    .views-row{
-      // border: 1px solid red;
-      // box-sizing: border-box;
-      margin-bottom: 2em;
-      max-width: 100%;
-      article.node-type-projet{
-        @include projetListe();
-      }
-      article.node-type-evenement{
-        @include evenementListe();
-      }
-
-    }
-  }
-}
-
-//   _   _           _      _____      _ _
-//  | \ | | ___   __| | ___|  ___|   _| | |
-//  |  \| |/ _ \ / _` |/ _ \ |_ | | | | | |
-//  | |\  | (_) | (_| |  __/  _|| |_| | | |
-//  |_| \_|\___/ \__,_|\___|_|   \__,_|_|_|
-
-
-@mixin nodefull{
-  div.cols{
-    display: flex;
-    flex-direction: row;
-    gap: $colsgap;
-    align-items: flex-start;
-    div.col{
-      flex:0 0 calc(50% - $colsgap / 2);
-      max-width: calc(50% - $colsgap / 2);
-
-      &.left{
-        z-index: 10;
-        // padding-bottom: 5em;
-        // box-sizing: border-box;
-        >header{
-          transform-origin: 0 0;
-          width: 205%;//calc(50% - $colsgap / 2);
-          z-index: 100;
-          pointer-events: none;
-
-          >h2.node-title{
-            position: relative;
-            font-size: 12em;
-            margin: 0;
-            &.leshed-svg-export-target{
-              pointer-events: painted;
-            }
-          }
-        }
-
-        .field_artiste_s_invite_s{
-          font-size: 1.8em;
-          font-weight: 300;
-        }
-        .field_invite_accompagne_curate_p,
-        .field_partenaire_s{
-          margin-top: 1em;
-          font-weight: 400;
-          .field-label{
-            font-weight: $default_fwght;
-          }
-          // >div{
-          //   display: inline-block;
-          // }
-        }
-        .field_dates{
-          margin-top: 1em;
-          time{
-            font-weight: 400;
-          }
-        }
-
-        >div.spacer{
-          display: block;
-          height: 5em;
-        }
-      }
-      &.right{
-        // Étire .field_images sur toute la hauteur de la colonne (= colonne la
-        // plus haute, via le stretch de .cols) : le contexte de collage sticky
-        // couvre alors tout le scroll, donc les cartes restent figées tant que
-        // la colonne gauche défile encore (cf. point 6).
-        display: flex;
-        .field_images{
-          flex: 1;
-          // .field-items{
-            &:after{
-              display: block;
-              position: relative;
-              content: "";
-              // border: 1px solid red;
-              width: 100%;
-              // Étend le contexte sticky au-delà de la dernière image pour
-              // couvrir le scroll restant de la colonne gauche. Hauteur calculée
-              // en JS (voir main.js, adjustStickyContext) via --sticky-extent.
-              height: var(--sticky-extent, 100vh);
-            }
-          // }
-          .field-item{
-            position: relative;
-            // Empilement "cartes" : chaque image se fige au même endroit (haut) et
-            // est recouverte par la suivante (l'ordre du DOM fait que la dernière
-            // passe au-dessus). La 1re image ne bouge pas. Desktop uniquement.
-            @media (min-width: 768px){
-              position: sticky;
-              top: 0;
-              // &:last-child:after{
-              //   content: "";
-              //   // position: relative;
-              //   display:block;
-              //   // blockquote.image-field-caption{
-              //   height: 100vh;
-              //   width:100%;
-              //   border: 1px solid red;
-              //   // }
-              // }
-            }
-            figure{
-              margin: 0;
-              a{
-                display: block;
-                img{
-                  width: 100%;
-                  max-width: 100%;
-                  height: auto;
-                }
-              }
-              figcaption.image-field-caption{
-                margin: 0;
-                position: absolute;
-                bottom: 0; left: 0;
-                height: 5em;
-                width: 100%;
-                overflow: visible;
-                display: block;
-                // border: 1px solid red;
-                blockquote{
-                  position: absolute;
-                  bottom: 0; left: 0;
-                  width: 100%;
-                  margin: 0;
-                  background-color: rgba(0,0,0,0.65);
-                  color: #fff;
-                  pointer-events: none;
-                  p{
-                    margin: 0;
-                    padding: 1em;
-                    font-weight: 300;
-                    font-size: 0.8em;
-                  }
-                  opacity: 0;
-                  transition: opacity 0.3s ease-in-out;
-                }
-                &:hover{
-                  // z-index:200;
-                  blockquote{
-                    opacity: 1;
-                  }
-                }
-              }
-
-            }
-
-            &:hover{
-              z-index:200;
-
-            }
-          }
-
-        }
-
-      }
-    }
-  }
-}
-
-//   ____            _      _
-//  |  _ \ _ __ ___ (_) ___| |_
-//  | |_) | '__/ _ \| |/ _ \ __|
-//  |  __/| | | (_) | |  __/ |_
-//  |_|   |_|  \___// |\___|\__|
-//                |__/
-article.node-type-projet.view-mode-full{
-  @include nodefull();
-
-
-}
-
-
-//   _____                                           _
-//  | ____|_   _____ _ __   ___ _ __ ___   ___ _ __ | |_
-//  |  _| \ \ / / _ \ '_ \ / _ \ '_ ` _ \ / _ \ '_ \| __|
-//  | |___ \ V /  __/ | | |  __/ | | | | |  __/ | | | |_
-//  |_____| \_/ \___|_| |_|\___|_| |_| |_|\___|_| |_|\__|
-
-@mixin event-date-time($ref: 10em){
-  display: flex;
-  position: relative;
-  time{
-    position: relative;
-    display: grid;
-    grid-template-columns: $ref ($ref * 7 / 18);
-    grid-template-rows: $ref / 2.3 $ref / 2.3;
-    grid-template-areas:
-      "day month"
-      "day year";
-
-    span.date-day{
-      grid-area: day;
-      font-size: $ref;
-      font-weight: 100;
-      font-style: italic;
-    }
-    span.date-month{
-      grid-area: month;
-      align-self: end;
-      font-weight: 400;
-    }
-    span.date-year{
-      grid-area: year;
-      align-self: end;
-      font-weight: 700;
-    }
-    span.date-month,
-    span.date-year{
-      font-size: $ref / 2.45;
-    }
-  }
-  span.date-sep{
-    font-size: $ref / 2;
-    padding:0 0.2em;
-  }
-}
-
-
-article.node-type-evenement.view-mode-full{
-  @include nodefull();
-
-  .field_dates.digit-dates{
-    transform-origin: 0 0;
-    @include event-date-time();
-  }
-
-  div.field_projet_s_lie_s{
-    margin-top: 2em;
-    .field-label{
-      margin-bottom: 1em;
-    }
-    article.node-type-projet.view-mode-tableau_liste{
-      @include projetListe();
-    }
-  }
-
-}
-
-
-
-
-//  __     ___                        _             _     _                  ____            _      _
-//  \ \   / (_) _____      _____     / \   _ __ ___| |__ (_)_   _____  ___  |  _ \ _ __ ___ (_) ___| |_
-//   \ \ / /| |/ _ \ \ /\ / / __|   / _ \ | '__/ __| '_ \| \ \ / / _ \/ __| | |_) | '__/ _ \| |/ _ \ __|
-//    \ V / | |  __/\ V  V /\__ \  / ___ \| | | (__| | | | |\ V /  __/\__ \ |  __/| | | (_) | |  __/ |_
-//     \_/  |_|\___| \_/\_/ |___/ /_/   \_\_|  \___|_| |_|_| \_/ \___||___/ |_|   |_|  \___// |\___|\__|
-//                                                                                        |__/
-div.views-archives-projets{
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 2em;
-  gap: $colsgap;
-  div.views-row{
-      flex: 1 0 calc(25% - $colsgap);
-      width: calc(25% - $colsgap);
-  }
-
-  article.node-type-projet.view-mode-tableau_liste{
-
-    @include projetListe();
-    >header{
-      >h2{
-        font-size: 3em;
-      }
-    }
-
-  }
-}
-form#views-exposed-form-archives-page-1{
-  div.bef-links{
-    ul{
-      margin:0; padding:0;
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      li{
-        list-style: none;
-        flex: 0 1 auto;
-        padding: 0.2em 0.5em;
-        font-size: 0.756em;
-      }
-    }
-  }
-}
-
-//  __     ___                        _             _     _                  _____                                           _
-//  \ \   / (_) _____      _____     / \   _ __ ___| |__ (_)_   _____  ___  | ____|_   _____ _ __   ___ _ __ ___   ___ _ __ | |_ ___
-//   \ \ / /| |/ _ \ \ /\ / / __|   / _ \ | '__/ __| '_ \| \ \ / / _ \/ __| |  _| \ \ / / _ \ '_ \ / _ \ '_ ` _ \ / _ \ '_ \| __/ __|
-//    \ V / | |  __/\ V  V /\__ \  / ___ \| | | (__| | | | |\ V /  __/\__ \ | |___ \ V /  __/ | | |  __/ | | | | |  __/ | | | |_\__ \
-//     \_/  |_|\___| \_/\_/ |___/ /_/   \_\_|  \___|_| |_|_| \_/ \___||___/ |_____| \_/ \___|_| |_|\___|_| |_| |_|\___|_| |_|\__|___/
-div.views-archives-evenements {
-
-  & > h3{
-    border-bottom: 1px solid #999;
-  }
-
-  article.node-type-evenement.view-mode-calendrier{
-    // @include evenementListe();
-    display: flex;
-    flex-direction: row;
-    gap: 1em;
-    header{
-      flex:0 1 auto;
-      // width: 5em;
-      padding:0 1em 0 0;
-
-      .field_dates{
-        @include event-date-time(5em);
-        flex-direction: column;
-        align-items: center;
-        gap: 0.6em;
-        span.date-sep{
-          display: block;
-          width: 1em;
-          height: 0;
-          overflow: visible;
-          transform-origin: center;
-          transform: rotate(90deg) translateX(0.1em);
-          line-height: 0;
-          padding: 0;
-        }
-      }
-    }
-
-    section.content{
-      flex:0 1 auto;
-      h2.node-title{
-        font-size: 3em;
-      }
-    }
-
-    section.last-cel{
-      flex:0 1 auto;
-      .field_images{
-        a{
-          display: block;
-          width: 12em;
-          height: 12em;
-          overflow: hidden;
-          img{
-            width: 100%;
-            height: 100%;
-            object-fit:contain;
-            object-position: top left;
-          }
-        }
-      }
-    }
-
-  }
-}
-
+// ── Bibliothèques (aucun CSS émis, chargées par les autres) ────────────────
+@use "partials/abstracts/variables" as *;
+
+// ── Socle global (présent sur toutes les pages) ────────────────────────────
+@use "partials/global/fonts" as *;
+@use "partials/global/base";
+@use "partials/global/layout";
+@use "partials/global/header";
+@use "partials/global/variable-titles";
+
+// ── Pages (l'ordre ci-dessous EST la cascade) ──────────────────────────────
+@use "partials/pages/home";
+@use "partials/pages/projet";
+@use "partials/pages/evenement";
+@use "partials/pages/views-archives-projets";
+@use "partials/pages/views-archives-evenements";
@@ -0,0 +1,79 @@
+
+@use "../abstracts/variables" as *;
+@use "fluid" as *;
+@use "../abstracts/event-date-time" as *;
+
+@mixin event_calendar(){
+      // @include evenementListe();
+    border-top: 1px solid #ccc;
+    padding: 2em 0 1em 0;
+
+
+    display: flex;
+    flex-direction: row;
+    gap: 1em;
+    header{
+      flex:0 1 auto;
+      // width: 5em;
+      padding:0 1em 0 0;
+
+      .field_dates{
+        @include event-date-time(5em);
+        flex-direction: column;
+        align-items: center;
+        gap: 0.6em;
+        span.date-sep{
+          display: block;
+          width: 1em;
+          height: 0;
+          overflow: visible;
+          transform-origin: center;
+          transform: rotate(90deg) translateX(0.1em);
+          line-height: 0;
+          padding: 0;
+        }
+      }
+    }
+
+    section.content{
+      flex:1 1 auto;
+      h2.node-title{
+        font-size: 3em;
+      }
+
+      div.field_artiste_s_invite_s{
+        font-size: fluid-clamp(1.8rem, $min: 1.134rem);
+        .field-item{
+          display: inline-block;
+          &:not(:last-child)::after{
+            content: ", ";
+          }
+        }
+      }
+
+      div.field_type_d_evenement{
+        .field-item{
+          font-weight: 400;
+        }
+      }
+    }
+
+    section.last-cel{
+      flex:0 1 auto;
+      .field_images{
+        a{
+          display: block;
+          width: 12em;
+          height: 12em;
+          overflow: hidden;
+          img{
+            width: 100%;
+            height: 100%;
+            object-fit:contain;
+            object-position: top right;
+          }
+        }
+      }
+    }
+
+}
@@ -0,0 +1,53 @@
+
+@use "sass:math";
+@use "fluid" as *;
+
+@mixin event-date-time($ref: 10em){
+  display: flex;
+  position: relative;
+  // Métriques propres aux dates : elles dépendaient avant du bloc de masquage
+  // des titres variables (supprimé) — elles vivent ici maintenant.
+  line-height: 1;
+  letter-spacing: -0.1em;
+  // --ref : taille de référence du bloc, dérivée de $ref mais FLUIDE sous le
+  // layout (fluid-clamp, point de passage à $layout_width, plancher $ref/n).
+  // Toutes les dimensions internes — grille, jour, mois, année, séparateur —
+  // dérivent de --ref : le bloc entier rétrécit en lock-step, sans désaligner
+  // la grille par rapport à la typo. NB : les em sont convertis via px() sur
+  // hypothèse d'un contexte de 16px.
+  --ref: #{fluid-clamp(px($ref), $min: math.div(px($ref), 1.5))};
+  time{
+    position: relative;
+    display: grid;
+    grid-template-columns: var(--ref) calc(var(--ref) * 7 / 18);
+    grid-template-rows: calc(var(--ref) / 2.3) calc(var(--ref) / 2.3);
+    grid-template-areas:
+      "day month"
+      "day year";
+
+    span.date-day{
+      grid-area: day;
+      font-size: var(--ref);
+      font-weight: 100;
+      font-style: italic;
+    }
+    span.date-month{
+      grid-area: month;
+      align-self: end;
+      font-weight: 400;
+    }
+    span.date-year{
+      grid-area: year;
+      align-self: end;
+      font-weight: 700;
+    }
+    span.date-month,
+    span.date-year{
+      font-size: calc(var(--ref) / 2.45);
+    }
+  }
+  span.date-sep{
+    font-size: calc(var(--ref) / 2);
+    padding:0 0.2em;
+  }
+}
@@ -0,0 +1,53 @@
+//   ______ _           _ _
+//  |  ____| |         | | |
+//  | |    | | ___  ___| | |
+//  | |    | |/ _ \/ _ \ | |
+//  | |____| |  __/  __/ | |
+//  |_____/_|\___|\___|_|_|
+//
+// Aucun CSS émis. Outils de typo fluide.
+//
+// Usage : font-size: fluid-clamp(5rem, $min: 1.75rem);
+//   → la taille vaut 5rem tant que le viewport tient le layout complet
+//     (contenu + padding latéral), suit la largeur du viewport en dessous,
+//     plancher $min.
+//   Le point de passage est dérivé de $layout-anchor : recalage
+//   automatique si le plafond du layout ou son padding changent.
+
+@use "sass:math";
+@use "variables" as *;
+
+$root: 16px; // taille de police de <html>
+
+// Convertit px, rem ou em en px. Pour rem/em : hypothèse d'un contexte typo
+// de base 16px ($root) — suffisante pour calibrer un clamp (le point de
+// passage reste exact tant que l'élément vit dans la base typo).
+@function px($size) {
+  @if $size == 0 { @return 0px; }
+  @if math.unit($size) == "px" { @return $size; }
+  @if math.unit($size) == "rem" { @return math.div($size, 1rem) * $root; }
+  @if math.unit($size) == "em" { @return math.div($size, 1em) * $root; }
+  @error "px() : px, rem ou em attendu, reçu #{$size}";
+}
+
+// Largeur d'ancrage des clamps : le viewport auquel le layout est plein —
+// 1080px de contenu + 2 × 16px de padding = 1112px.
+// Depuis que $layout_padding et $colsgap sont proportionnels (clamp vw),
+// le padding vaut exactement 16px à ce point (1.4388vw × 1112). Valeur
+// constante : px() ne sait pas parser un clamp() pour la dériver.
+$layout-anchor: 1112px;
+
+// La valeur vw qui vaut exactement $size quand le viewport fait $at.
+@function vw-at($size, $at: $layout-anchor) {
+  @return math.div(px($size), $at) * 100 * 1vw;
+}
+
+// $size au-dessus de $at, fluide en dessous, plancher $min.
+@function fluid-clamp($size, $at: $layout-anchor, $min: 0px) {
+  @return clamp(#{px($min)}, #{vw-at($size, $at)}, #{px($size)});
+}
+
+// Tokens dérivés : tailles de référence passées en fluide. Le plancher est
+// un choix de design — 70px à l'ancrage et au-dessus (desktop inchangé),
+// 56px au plus bas (téléphone).
+$header-height-fluid: fluid-clamp($header_height, $min: 60px);
@@ -0,0 +1,333 @@
+//   _   _           _      _____      _ _
+//  | \ | | ___   __| | ___|  ___|   _| | |
+//  |  \| |/ _ \ / _` |/ _ \ |_ | | | | | |
+//  | |\  | (_) | (_| |  __/  _|| |_| | | |
+//  |_| \_|\___/ \__,_|\___|_|   \__,_|_|_|
+
+@use "variables" as *;
+@use "fluid" as *;
+@use "../abstracts/nodes-on-liste" as *;
+@use "../abstracts/event-calendrier" as *;
+
+@mixin nodefull{
+
+  div.cols{
+    div.col{
+
+      &.left{
+        z-index: 10;
+        // padding-bottom: 5em;
+        // box-sizing: border-box;
+        >header{
+          // transform-origin: 0 0;
+          // width: 205%;//calc(50% - $colsgap / 2);
+          // z-index: 100;
+          // pointer-events: none;
+
+          >h2.node-title{
+            position: relative;
+            // font-size: 12em;
+            // font-size: fluid-clamp(12rem, $min: 8rem);
+            margin: 0;
+            &.leshed-svg-export-target{
+              pointer-events: painted;
+            }
+          }
+        }
+
+        .field{
+          margin-bottom: 1rem;
+          .field-item{
+            font-weight: 400;
+          }
+        }
+        .field_artiste_s_invite_s{
+          // font-size: 1.8em;
+          font-size: fluid-clamp(1.8rem, $min: 1.134rem);
+          .field-item{
+            font-weight: 300;
+            display: inline-block;
+            &:not(:last-child):after{
+              content:", ";
+            }
+          }
+        }
+        .field_invite_accompagne_curate_p,
+        .field_partenaire_s{
+          // margin-top: 1em;
+          font-weight: 400;
+          .field-label{
+            font-weight: $default_fwght;
+          }
+          // >div{
+          //   display: inline-block;
+          // }
+        }
+
+        // Pas de marge basse sur le type de projet s'il est immédiatement
+        // suivi des dates : l'écart de 16px mesuré venait d'ici.
+        // NB : :has(+ …) — la marge appartient au PRÉCÉDENT, le combinateur
+        // seul (field_type + field_dates) ne pourrait cibler que le suivant.
+        div.field_type_de_projet:has(+ div.field_dates){
+          margin-bottom: 0;
+        }
+
+        .field_dates{
+          time{
+            font-weight: 400;
+          }
+        }
+
+        div.field_projet_s_lie_s{
+          // margin-top: 2em;
+          // .field-label{
+          //   margin-bottom: 1em;
+          // }
+          >.field-items.multiple{
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            gap: $colsgap;
+            >.field-item{
+              flex: 1 0 calc(50% - $colsgap / 2);
+              max-width: calc(50% - $colsgap / 2);
+              >article{
+                @include projetOnListe();
+                >header{
+                  >h2{
+                    font-size: 3em;
+                  }
+                }
+                .field_artiste_s_invite_s{
+                  font-size: 1.134em;
+                }
+              }
+            }
+          }
+        }
+
+        div.field_evenement_s_lie_s{
+          article.node-type-evenement.view-mode-calendrier{
+            @include event_calendar();
+            >section.content{
+              >h2.node-title{
+                font-size: 2.68em;
+              }
+              div.field{
+                margin:0;
+                p{ margin:0;}
+              }
+            }
+            >section.last-cel{
+              display: none;
+            }
+          }
+        }
+
+        >div.spacer{
+          display: block;
+          height: 5em;
+        }
+      }
+      &.right{
+
+        .field_images{
+          .field-item{
+            position: relative;
+            margin-bottom: 1em;
+            figure{
+              margin: 0;
+              a{
+                display: block;
+                line-height: 0;
+                img{
+                  width: 100%;
+                  max-width: 100%;
+                  height: auto;
+                }
+              }
+              figcaption.image-field-caption{
+                margin: 0;
+                display: block;
+                // border: 1px solid red;
+                blockquote{
+                  width: 100%;
+                  margin: 0;
+                  background-color: rgb(30,30,30);
+                  color: #fff;
+                  pointer-events: none;
+                  p{
+                    margin: 0;
+                    padding: 1em;
+                    font-weight: 300;
+                    font-size: 0.8em;
+                  }
+                }
+
+              }
+
+            }
+
+            &:hover{
+              z-index:200;
+
+            }
+          }
+
+        }
+
+      }
+    }
+  }
+  // ONLY FOR DESKTOP
+  @media (min-width:769px){
+    div.cols{
+      display: flex;
+      flex-direction: row;
+      gap: $colsgap;
+      align-items: flex-start;
+      div.col{
+        flex:0 0 calc(50% - $colsgap / 2);
+        max-width: calc(50% - $colsgap / 2);
+
+        &.left{
+          >header{
+            transform-origin: 0 0;
+            width: 205%;//calc(50% - $colsgap / 2);
+            z-index: 100;
+            pointer-events: none;
+
+            >h2.node-title{
+              font-size: fluid-clamp(12rem, $min: 8rem);
+            }
+          }
+          // .field_artiste_s_invite_s{
+          //   // font-size: 1.8em;
+          //   font-size: fluid-clamp(1.8rem, $min: 1rem);
+          //   font-weight: 300;
+          // }
+        }
+
+        &.right{
+          // Étire .field_images sur toute la hauteur de la colonne (= colonne la
+          // plus haute, via le stretch de .cols) : le contexte de collage sticky
+          // couvre alors tout le scroll, donc les cartes restent figées tant que
+          // la colonne gauche défile encore (cf. point 6).
+          display: flex;
+          .field_images{
+            flex: 1;
+            // .field-items{
+            &:after{
+              display: block;
+              position: relative;
+              content: "";
+              // border: 1px solid red;
+              width: 100%;
+              // Étend le contexte sticky au-delà de la dernière image pour
+              // couvrir le scroll restant de la colonne gauche. Hauteur calculée
+              // en JS (voir main.js, adjustStickyContext) via --sticky-extent.
+              height: var(--sticky-extent, 100vh);
+            }
+
+            .field-item{
+              position: sticky;
+              // margin-bottom: 0;
+              top: 0;
+
+              figure{
+                figcaption.image-field-caption{
+                  position: absolute;
+                  bottom: 0; left: 0;
+                  height: 5em;
+                  width: 100%;
+                  overflow: visible;
+                  blockquote{
+                    position: absolute;
+                    bottom: 0; left: 0;
+                    opacity: 0;
+                    transition: opacity 0.3s ease-in-out;
+                    background-color: rgba(0,0,0,0.65);
+
+                  }
+                  &:hover{
+                    // z-index:200;
+                    blockquote{
+                      opacity: 1;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  // ONLY FOR MOBILE
+  @media (max-width:768px){
+    div.cols{
+      display: flex;
+      flex-direction: column;
+      // Colonnes et conteneur d'images rendus transparents : chaque .field-item
+      // devient un item direct de .cols, librement ordonnable — l'image extraite
+      // est DÉPLACÉE (une seule occurrence dans le DOM, zéro octet en double).
+      div.col,
+      div.col.right .field_images{
+        display: contents;
+      }
+      div.col.left > header{
+        order: 1;
+      }
+      // Première image remontée sous le titre.
+      div.col.right .field_images .field-item:first-child{
+        order: 2;
+      }
+      // Le reste du contenu de la colonne gauche.
+      div.col.left > :not(header):not(.spacer){
+        order: 3;
+      }
+      // Les autres images, en fin de page.
+      div.col.right .field_images .field-item:not(:first-child){
+        order: 5;
+      }
+      div.col.left > div.field_fichiers{
+        order: 6;
+      }
+      div.col.left > div.field_partenaire_s{
+        order:7;
+      }
+      div.col.left > div.field_evenement_s_lie_s{
+        order: 8;
+      }
+      div.col.left > div.field_projet_s_lie_s{
+        order: 9;
+      }
+      // NB : div.spacer (et pas .spacer) — la règle de base `>div.spacer{display:block}`
+      // a une spécificité de (0,4,5) : `.spacer` seul (0,4,4) perdait le cascade
+      // malgré l'ordre. Égaler la spécificité, laisser la cascade trancher.
+      div.col.left > div.spacer{
+        order:20;
+      }
+
+      div.col{
+        &.left{
+          >header{
+            >h2.node-title{
+              font-size: 5em;
+              // font-size: fluid-clamp(12rem, $min: 8rem);
+            }
+          }
+          // .field_artiste_s_invite_s{
+          //   .field-item{
+          //     display: inline-block;
+          //     &:not(:last-child):after{
+          //       content:", ";
+          //     }
+          //   }
+          // }
+        }
+      }
+    }
+
+  }
+}
@@ -0,0 +1,108 @@
+//   _   _           _         ___          _     _     _
+//  | \ | | ___   __| | ___   / _ \ _ __   | |   (_)___| |_ ___
+//  |  \| |/ _ \ / _` |/ _ \ | | | | '_ \  | |   | / __| __/ _ \
+//  | |\  | (_) | (_| |  __/ | |_| | | | | | |___| \__ \ ||  __/
+//  |_| \_|\___/ \__,_|\___|  \___/|_| |_| |_____|_|___/\__\___|
+
+@use "variables" as *;
+@use "fluid" as *;
+
+@mixin nodeOnListe{
+  >header{
+
+    >h2{
+      font-size: fluid-clamp(5rem, $min: 3.780rem);
+    }
+  }
+  .field_artiste_s_invite_s{
+    // font-size: 1.8em;
+    font-size: fluid-clamp(1.8rem, $min: 1.323rem);
+    font-weight: 300;
+  }
+
+  .field_type_d_evenement,
+  .field_type_de_projet{
+    font-weight: 400;
+  }
+
+  &.has-image{
+    >header{
+      >h2{
+        position: relative;
+        max-height: 1em;
+        overflow: visible;
+        z-index: 10;
+        // text-shadow: 0 0 10px #fff;
+        // box-shadow: 0 0 15px #f00;
+        // filter: drop-shadow(0 0 5px #fff);
+
+        // Si le titre déborde de N lignes sous l'image, on remet N lignes
+        // supplémentaires dans le flux avant l'image pour absorber le débordement.
+        @for $i from 1 through 10 {
+          &[data-overflow-lines="#{$i}"] {
+            max-height: #{$i}em;
+          }
+        }
+      }
+      div.field_images{
+        position:relative;
+        // width: 100%;
+        z-index: 5;
+        a{
+          display:block;
+          img{
+            width:100%;
+            height: auto;
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin projetOnListe{
+  @include nodeOnListe();
+
+  div.field_artiste_s_invite_s.field-items.multiple{
+    // display: flex;
+    // flex-direction: row;
+    .field-item{
+      display: inline-block;
+      &:not(:last-of-type):after{
+        content: ", ";
+      }
+    }
+  }
+}
+
+@mixin evenementOnListe{
+  @include nodeOnListe();
+  >header{
+    .field_dates{
+      // font-size: 4em;
+      font-size: fluid-clamp(3rem, $min: 1.512rem);
+      line-height: 1;
+      // Avant fourni par le bloc de masquage des titres variables.
+      letter-spacing: -0.1em;
+      time{
+        span.date-part:not(:last-child){
+          &:after{
+            content:".";
+          }
+        }
+        span.date-day{
+          font-weight: 100;
+        }
+        span.date-month{
+          font-weight: 300;
+        }
+        span.date-year{
+          font-weight: 500;
+        }
+      }
+    }
+  }
+}
+
+
+
@@ -0,0 +1,10 @@
+$layout_width: 1080px;
+// Padding et gap proportionnels : sous l'ancrage du layout (voir _fluid.scss,
+// $layout-anchor), TOUT rétrécit ensemble (typo fluide, gouttières, colonnes) —
+// les clamps vw restent exacts à toutes les largeurs. Les vw sont calés pour
+// valoir exactement les bornes hautes à l'ancrage (1112px) : au-dessus, le
+// design desktop est identique à l'ancien 1em/2em fixe.
+$layout_padding: clamp(0.75rem, 1.4388vw, 1rem);
+$default_fwght: 200;
+$header_height: 70px;
+$colsgap: clamp(1.5rem, 2.8777vw, 2rem);
@@ -1,3 +0,0 @@
-// $bleu_site: #1642bc;
-// $bleu_typo: #0b1e52;
-// $rose: #f661e2;
@@ -0,0 +1,21 @@
+//   ____
+//  | __ )  __ _ ___  ___
+//  |  _ \ / _` / __|/ _ \
+//  | |_) | (_| \__ \  __/
+//  |____/ \__,_|___/\___|
+
+@use "../abstracts/variables" as *;
+
+
+a, a:visited{
+  text-decoration: none;
+  color: inherit;
+  transition: color 0.15s ease-out;
+}
+
+body{
+  margin: 0;
+  // background-color: green;
+  font-weight: $default_fwght;
+  line-height: 1.5;
+}
@@ -1,4 +1,4 @@
-@use "../../fonts/epilogue/stylesheet" with ($font-path: "../fonts/epilogue");
+@use "../../../fonts/epilogue/stylesheet" with ($font-path: "../fonts/epilogue");

 body{
  font-family: 'Epilogue';
@@ -0,0 +1,142 @@
+//  _   _                _
+// | | | |              | |
+// | |_| | ___  __ _  __| | ___ _ __
+// |  _  |/ _ \/ _` |/ _` |/ _ \ '__|
+// | | | |  __/ (_| | (_| |  __/ |
+// \_| |_/\___|\__,_|\__,_|\___|_|
+
+@use "../abstracts/variables" as *;
+@use "../abstracts/fluid" as *;
+
+
+header[role="banner"]{
+  background-color: #fff;
+  // box-shadow: 0 -5px 15px #000;
+
+  .header-middle{
+    display: flex;
+    justify-content:space-between;
+    align-items: center;
+    padding: 0.2em 0;
+  }
+
+  #block-leshed-identitedusite{
+    a{
+      // color: ;
+      text-decoration: none;
+      font-size: 2em;
+      font-weight: 500;
+      margin-right: 0.5em;
+      // &:hover{
+      //   color: $rose;
+      // }
+    }
+  }
+
+  .header-right{
+    // position: relative;
+    height:20px; width:20px;
+    cursor: pointer;
+    // background-color: green;
+
+    >div#burger-btn{
+      position:relative;
+      transition-duration: 0.5s;
+      transition-property: transform;
+      top: 8.5px;
+      &, &::before, &::after{
+        // position: absolute;
+        width:20px; height:3px;
+        background-color: #000;
+
+      }
+      &:hover{
+        &, &::before, &::after{
+          background-color: green;
+        }
+      }
+      &::before, &::after{
+        content: "";
+        position: absolute;
+        left: 0;
+        // background-color: red;
+      }
+      &::before{
+        top:6px;
+      }
+      &::after{
+        bottom: 6px;
+      }
+      &[opened]{
+        transform: rotate(90deg);
+      }
+    }
+
+
+    &>div.wrapper{
+      // fixed (et non absolute) pour échapper à l'overflow:hidden de
+      // .layout-container : sinon le débord pleine largeur (et donc le
+      // backdrop-filter) est rogné aux bords du conteneur centré.
+      position:fixed;
+      top:$header-height-fluid;
+      left: 0;
+      width:100vw;
+      padding: 0 calc((100vw - $layout_width) / 2) 0 calc((100vw - $layout_width) / 2);
+
+      background-color: rgba(255,255,255,0.3);
+      backdrop-filter: blur(7px);
+
+      height: 0;
+      overflow: hidden;
+      transition-duration: 0.5s;
+      &[opened]{
+        height: calc(100vh - $header-height-fluid);
+      }
+      nav#block-leshed-navigationprincipale{
+        // width: $layout_width;
+        // margin: 0 auto;
+        padding-top: 10px;
+        // background-color: #fff;
+        >ul{
+          margin: 0;
+          padding:0;
+          li{
+            list-style: none;
+            a{
+              font-size: 4em;
+              font-weight: 200;
+              filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #fff) drop-shadow(0 0 15px #fff);
+            }
+          }
+        }
+      }
+      div#block-leshed-selecteurdelangue{
+        ul{
+          margin:0;
+          padding:0;
+          li{
+            list-style: none;
+            padding:0;
+            display: inline-block;
+            font-size: 2em;
+            &:first-child{
+              &:after{
+                content: " /";
+                font-weight: 200;
+              }
+            }
+            &:last-child{
+              padding-left: 0.3em;
+
+            }
+            &.is-active{
+              font-weight: 400;
+            }
+
+          }
+        }
+      }
+    }
+
+  }
+} // end of header[role="banner"]{
@@ -0,0 +1,47 @@
+//  _                             _
+// | |                           | |
+// | |     __ _ _   _  ___  _   _| |_
+// | |    / _` | | | |/ _ \| | | | __|
+// | |___| (_| | |_| | (_) | |_| | |_
+// \_____/\__,_|\__, |\___/ \__,_|\__|
+//               __/ |
+//              |___/
+
+@use "../abstracts/variables" as *;
+@use "../abstracts/fluid" as *;
+
+
+div.layout-container{
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+  max-width:$layout_width;
+  margin: 0 auto;
+  padding: 0 $layout_padding;
+  header[role="banner"]{
+    display: block;
+    position: relative;
+    padding: 0.5em 0;
+    flex: 1 1 $header-height-fluid;
+    z-index: 100;
+    // position: fixed;
+    // top:0;
+    // width: 100%;
+    height: $header-height-fluid;
+    min-height: $header-height-fluid;
+  }
+  main[role="main"]{
+    flex: 1 1 auto;
+    // padding:5em 0;
+    overflow-y: scroll;
+  }
+  // footer[role="contentinfo"]{
+  //   // flex: 0 1 content;
+  //   z-index: 100;
+  //   position: fixed;
+  //   bottom: 0;
+  //   width: 100%;
+  // }
+}
+
@@ -0,0 +1,78 @@
+//  __     __         _       _     _        _   _ _   _
+//  \ \   / /_ _ _ __(_) __ _| |__ | | ___  | |_(_) |_| | ___
+//   \ \ / / _` | '__| |/ _` | '_ \| |/ _ \ | __| | __| |/ _ \
+//    \ V / (_| | |  | | (_| | |_) | |  __/ | |_| | |_| |  __/
+//     \_/ \__,_|_|  |_|\__,_|_.__/|_|\___|  \__|_|\__|_|\___|
+
+
+@use "../abstracts/variables" as *;
+
+
+// Splitting met .word ET .char en inline-block :
+// - inline-block sur .char crée une opportunité de coupure entre CHAQUE lettre ;
+// - inline-block sur .word (dimensionné en max-content) empêche tout retour à la
+//   ligne interne, donc les soft hyphens ne peuvent jamais couper le mot.
+// On repasse les deux en inline : le mot redevient un flux de texte qui ne coupe
+// qu'aux césures logicielles (U+00AD) insérées par le JS.
+// Spécificité (0,2,1) pour battre `.splitting .word/.char` de Splitting.
+.splitting span.word,
+.splitting span.char{
+  display: inline;
+}
+
+
+
+
+
+.variable-title{
+  margin: 0;
+  font-weight: 200;
+  text-transform:lowercase;
+  line-height: 1;
+  // margin-left: -0.04em;
+  filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 15px #fff);
+  span.word{
+    span.char{
+      letter-spacing:-0.1em;
+    }
+  }
+  // span.whitespace{
+  //   letter-spacing: 0.5em;
+  // }
+}
+
+// La classe `variable-title` est posée par assets/js/titles.js au moment où
+// il prend en charge un titre. Le CSS ne masque donc QUE des éléments que le
+// JS traite : une désynchronisation de listes de sélecteurs ne peut plus
+// rendre de contenu invisible (c'est ce qui cachait les dates des teasers
+// pendant 3 s — le garde-fou). Un titre non traité par le JS n'est jamais
+// masqué : il reste affiché tel quel.
+
+// Avant le split : même métrique qu'après, pour éviter un saut de mise en page.
+.variable-title:not(.splitting){
+  margin: 0;
+  font-weight: 200;
+  text-transform: lowercase;
+  line-height: 1;
+  letter-spacing: -0.1em;
+}
+
+// Masqués (place conservée) jusqu'au split ; réaffichés après 3 s si le JS échoue.
+@media (scripting: enabled){
+  .variable-title:not(.is-ready){
+    visibility: hidden;
+    animation: leshed-title-failsafe 0s 3s forwards;
+  }
+}
+
+@keyframes leshed-title-failsafe{
+  to{ visibility: visible; }
+}
+
+
+div#block-leshed-titredelapage h1{
+  font-size: 1em;
+  font-weight: $default_fwght;
+  margin: 0;
+}
+
@@ -1,71 +0,0 @@
-@use "colors" as *;
-
-@mixin menu-contenus{
-  ul,li{
-    padding: 0;
-    margin:0;
-    list-style: none;
-  }
-  .wrapper{
-    position: relative;
-  }
-  label{
-    color:$bleu_site;
-    font-weight: 600;
-    display: block;
-    font-size: 0.756em;
-    padding:0 0 0.25em 0;
-    transition: color 0.25s ease-out;
-    position: absolute;
-    z-index: 0;
-    &:has(+ a:hover){
-      color: $rose;
-    }
-  }
-  a{
-    font-size: 1.13em;
-    transition: color 0.15s ease-out;
-    display: block;
-    position: relative;
-    z-index: 1;
-    padding-top: 1em;
-    &:hover{
-      color: $bleu_site;
-    }
-  }
-
-}
-
-@mixin card{
-  position: relative;
-  background-color: #fff;
-  padding:2em;
-  box-shadow: 0 0 10px rgba(0,0,0,0.25);
-  max-width: 50em;
-  box-sizing: content-box;
-  margin: 30vh auto 0;
-  &[role="home-presentation"]{
-    margin-top: 10vh;
-  }
-}
-
-@mixin arrow{
-  display: block;
-  width:30px; height:30px;
-  border-radius: 15px;
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: contain;
-  text-indent: 100px;
-  overflow: hidden;
-}
-
-@mixin arrow-white{
-  @include arrow();
-  background-image: url('/themes/custom/mathallo/assets/img/arrow-white.svg');
-}
-
-@mixin arrow-blue{
-  @include arrow();
-  background-image: url('/themes/custom/mathallo/assets/img/arrow-blue.svg');
-}
@@ -0,0 +1,23 @@
+//   _____                                           _
+//  | ____|_   _____ _ __   ___ _ __ ___   ___ _ __ | |_
+//  |  _| \ \ / / _ \ '_ \ / _ \ '_ ` _ \ / _ \ '_ \| __|
+//  | |___ \ V /  __/ | | |  __/ | | | | |  __/ | | | |_
+//  |_____| \_/ \___|_| |_|\___|_| |_| |_|\___|_| |_|\__|
+
+@use "../abstracts/variables" as *;
+@use "../abstracts/node-full" as *;
+@use "../abstracts/nodes-on-liste" as *;
+@use "../abstracts/event-date-time" as *;
+
+
+article.node-type-evenement.view-mode-full{
+  @include nodefull();
+
+  .field_dates.digit-dates{
+    transform-origin: 0 0;
+    @include event-date-time();
+  }
+
+}
+
+
@@ -0,0 +1,46 @@
+//   _   _
+//  | | | | ___  _ __ ___   ___
+//  | |_| |/ _ \| '_ ` _ \ / _ \
+//  |  _  | (_) | | | | | |  __/
+//  |_| |_|\___/|_| |_| |_|\___|
+
+@use "../abstracts/variables" as *;
+@use "../abstracts/nodes-on-liste" as *;
+
+
+div.layout.layout--twocol-section--50-50.layout--twocol-section{
+  flex-wrap: nowrap;
+  // Sans ça, `align-items: stretch` (défaut flex) étire les deux colonnes à la
+  // même hauteur : la synchro de scroll ne verrait aucune différence de hauteur.
+  // flex-start = chaque colonne prend la hauteur de son contenu.
+  align-items: flex-start;
+
+  column-gap: $colsgap;
+  div.layout__region{
+    max-width: calc(50% - $colsgap / 2);
+    flex: 1 0 calc(50% - $colsgap / 2);
+    .views-row{
+      // border: 1px solid red;
+      // box-sizing: border-box;
+      margin-bottom: 2em;
+      max-width: 100%;
+      article.node-type-projet{
+        @include projetOnListe();
+      }
+      article.node-type-evenement{
+        @include evenementOnListe();
+      }
+
+    }
+  }
+
+  @media (max-width:431px) {
+    &{
+      display:block;
+      div.layout__region{
+        max-width: 100%;
+      }
+    }
+
+  }
+}
@@ -0,0 +1,15 @@
+//   ____            _      _
+//  |  _ \ _ __ ___ (_) ___| |_
+//  | |_) | '__/ _ \| |/ _ \ __|
+//  |  __/| | | (_) | |  __/ |_
+//  |_|   |_|  \___// |\___|\__|
+//                |__/
+@use "../abstracts/variables" as *;
+@use "../abstracts/node-full" as *;
+
+article.node-type-projet.view-mode-full{
+  @include nodefull();
+
+
+}
+
@@ -0,0 +1,28 @@
+//  __     ___                        _             _     _                  _____                                           _
+//  \ \   / (_) _____      _____     / \   _ __ ___| |__ (_)_   _____  ___  | ____|_   _____ _ __   ___ _ __ ___   ___ _ __ | |_ ___
+//   \ \ / /| |/ _ \ \ /\ / / __|   / _ \ | '__/ __| '_ \| \ \ / / _ \/ __| |  _| \ \ / / _ \ '_ \ / _ \ '_ ` _ \ / _ \ '_ \| __/ __|
+//    \ V / | |  __/\ V  V /\__ \  / ___ \| | | (__| | | | |\ V /  __/\__ \ | |___ \ V /  __/ | | |  __/ | | | | |  __/ | | | |_\__ \
+//     \_/  |_|\___| \_/\_/ |___/ /_/   \_\_|  \___|_| |_|_| \_/ \___||___/ |_____| \_/ \___|_| |_|\___|_| |_| |_|\___|_| |_|\__|___/
+
+@use "../abstracts/event-calendrier" as *;
+
+div.views-archives-evenements {
+
+  & > h3{
+    // border-bottom: 1px solid #999;
+    margin-bottom: 0;
+    font-size: 2em;
+    font-weight: 200;
+    span.month{
+      font-weight: 100;
+    }
+    span.year{
+      font-weight: 400;
+    }
+  }
+
+  article.node-type-evenement.view-mode-calendrier{
+    @include event_calendar();
+  }
+}
+
@@ -0,0 +1,66 @@
+//  __     ___                        _             _     _                  ____            _      _
+//  \ \   / (_) _____      _____     / \   _ __ ___| |__ (_)_   _____  ___  |  _ \ _ __ ___ (_) ___| |_
+//   \ \ / /| |/ _ \ \ /\ / / __|   / _ \ | '__/ __| '_ \| \ \ / / _ \/ __| | |_) | '__/ _ \| |/ _ \ __|
+//    \ V / | |  __/\ V  V /\__ \  / ___ \| | | (__| | | | |\ V /  __/\__ \ |  __/| | | (_) | |  __/ |_
+//     \_/  |_|\___| \_/\_/ |___/ /_/   \_\_|  \___|_| |_|_| \_/ \___||___/ |_|   |_|  \___// |\___|\__|
+//                                                                                        |__/
+
+@use "../abstracts/variables" as *;
+@use "../abstracts/nodes-on-liste" as *;
+
+
+div.views-archives-projets{
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+
+  article.node-type-projet.view-mode-tableau_liste{
+
+    @include projetOnListe();
+    >header{
+      >h2{
+        font-size: 3em;
+      }
+    }
+
+  }
+
+
+  // ONLY FOR DESKTOP
+  @media (min-width:769px){
+    // gap: 2em;
+    gap: $colsgap;
+    div.views-row{
+        flex: 1 0 calc(25% - $colsgap);
+        width: calc(25% - $colsgap);
+    }
+  }
+
+  // ONLY FOR MOBILE
+  @media (max-width:768px){
+    // gap: 2em;
+    gap: $colsgap;
+    div.views-row{
+        flex: 1 0 calc(50% - $colsgap);
+        width: calc(50% - $colsgap);
+    }
+  }
+
+}
+form#views-exposed-form-archives-page-1{
+  div.bef-links{
+    ul{
+      margin:0; padding:0;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      li{
+        list-style: none;
+        flex: 0 1 auto;
+        padding: 0.2em 0.5em;
+        font-size: 0.756em;
+      }
+    }
+  }
+}
@@ -1,4 +0,0 @@
-$layout_width: 1080px;
-$default_fwght: 200;
-$header_height: 70px;
-$colsgap: 2em;
@@ -46,18 +46,18 @@

 {% if label_hidden %}
  {% if multiple %}
-    <div{{ attributes.addClass("field-items").addClass("multiple") }}>
+    <div{{ attributes.addClass("field").addClass("field-items").addClass("multiple") }}>
      {% for item in items %}
        <div{{ item.attributes.addClass("field-item") }}>{{ item.content }}</div>
      {% endfor %}
    </div>
  {% else %}
    {% for item in items %}
-      <div{{ attributes.addClass("field-item") }}>{{ item.content }}</div>
+      <div{{ attributes.addClass("field").addClass("field-item") }}>{{ item.content }}</div>
    {% endfor %}
  {% endif %}
 {% else %}
-  <div{{ attributes }}>
+  <div{{ attributes.addClass("field") }}>
    <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
    {% if multiple %}
      <div class="field-items multiple">
@@ -0,0 +1,89 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a node.
+ *
+ * Available variables:
+ * - node: The node entity with limited access to object properties and methods.
+ *   Only method names starting with "get", "has", or "is" and a few common
+ *   methods such as "id", "label", and "bundle" are available. For example:
+ *   - node.getCreatedTime() will return the node creation timestamp.
+ *   - node.hasField('field_example') returns TRUE if the node bundle includes
+ *     field_example. (This does not indicate the presence of a value in this
+ *     field.)
+ *   - node.isPublished() will return whether the node is published or not.
+ *   Calling other methods, such as node.delete(), will result in an exception.
+ *   See \Drupal\node\Entity\Node for a full list of public properties and
+ *   methods for the node object.
+ * - label: (optional) The title of the node.
+ * - content: All node items. Use {{ content }} to print them all,
+ *   or print a subset such as {{ content.field_example }}. Use
+ *   {{ content|without('field_example') }} to temporarily suppress the printing
+ *   of a given child element.
+ * - author_picture: The node author user entity, rendered using the "compact"
+ *   view mode.
+ * - metadata: Metadata for this node.
+ * - date: (optional) Themed creation date field.
+ * - author_name: (optional) Themed author name field.
+ * - url: Direct URL of the current node.
+ * - display_submitted: Whether submission information should be displayed.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class element may contain one or more of the following
+ *   classes:
+ *   - node: The current template type (also known as a "theming hook").
+ *   - node--type-[type]: The current node type. For example, if the node is an
+ *     "Article" it would result in "node--type-article". Note that the machine
+ *     name will often be in a short form of the human readable label.
+ *   - node--view-mode-[view_mode]: The View Mode of the node; for example, a
+ *     teaser would result in: "node--view-mode-teaser", and
+ *     full: "node--view-mode-full".
+ *   The following are controlled through the node publishing options.
+ *   - node--promoted: Appears on nodes promoted to the front page.
+ *   - node--sticky: Appears on nodes ordered above other non-sticky nodes in
+ *     teaser listings.
+ *   - node--unpublished: Appears on unpublished nodes visible only to site
+ *     admins.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - content_attributes: Same as attributes, except applied to the main
+ *   content tag that appears in the template.
+ * - author_attributes: Same as attributes, except applied to the author of
+ *   the node tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ * - view_mode: View mode; for example, "teaser" or "full".
+ * - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
+ * - page: Flag for the full page state. Will be true if view_mode is 'full'.
+ *
+ * @see template_preprocess_node()
+ *
+ * @ingroup themeable
+ */
+#}
+
+{#
+{% if content.field_images.getvalue|length %}
+  {% set attributes = attributes.addClass('has-image') %}
+{% endif %} #}
+
+<article{{ attributes }}>
+
+  {# {{ title_prefix }} #}
+  {# {% if label and not page %} #}
+  <header>
+    <h2{{ title_attributes }}>
+      <a href="{{ url }}" rel="bookmark">{{ label }}</a>
+    </h2>
+    {{ content.field_images }}
+  </header>
+  {# {% endif %} #}
+  {# {{ title_suffix }} #}
+
+
+  <div{{ content_attributes }}>
+    {{ content|without('field_images') }}
+  </div>
+
+</article>
Author	SHA1	Message	Date
bachir	600aee78f5	archive projets for mobile	2026-09-29 16:28:14 +02:00
bachir	d94de125f4	node-full mobile display	2026-09-29 16:18:53 +02:00
bachir	25cf411ced	big improvement over projets, evenement, links, calendar, and mobile display	2026-09-29 15:57:34 +02:00
bachir	7581ab9333	display:contents; for moving the first image below the title on mobile	2026-09-29 10:26:09 +02:00
bachir	bbb32cadd9	node_full display for mobile	2026-09-29 10:17:32 +02:00
bachir	094e9964ec	started using fluid-clamp for titles and date	2026-09-29 09:46:34 +02:00
bachir	0ef60b1ec9	titles: hide only what js claims (.variable-title class), drop duplicated selector list (fix: teaser dates invisible for 3s)	2026-09-28 18:05:08 +02:00
bachir	7ae28cd7c1	date fields: own their line-height/letter-spacing metrics (were riding on title hiding list)	2026-09-28 18:04:38 +02:00
bachir	8077bf9022	fluid type: fluid-clamp helper (viewport-derived from $layout_width) + nodeOnListe h2	2026-09-28 17:50:59 +02:00
bachir	74399a3823	scss refactor: main.scss split into abstracts/global/pages partials, kebab-case (compiled css unchanged)	2026-09-28 17:49:46 +02:00