ajustement zoom in image

web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css

@@ -654,16 +654,14 @@ footer {
         #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img {
           width: -moz-available;
           width: 100%;
-          height: auto;
+          height: auto; }
-          z-index: 100; }
           #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img:hover, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img:hover {
             filter: brightness(75%);
             transition: 0.2s;
             cursor: url(../images/noun-loop-3037049.svg), auto;
             cursor: zoom-in;
             cursor: -moz-zoom-in;
-            cursor: -webkit-zoom-in;
+            cursor: -webkit-zoom-in; }
-            z-index: 100; }
             @media (max-width: 500px) {
               #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img:hover, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img:hover {
                 filter: brightness(100%); } }
@@ -675,11 +673,15 @@ footer {
           transform: scale(1.7);
           max-width: 100vw;
           overflow-x: scroll;
-          z-index: 100; }
+          position: relative;
+          z-index: 98; }
           #presentation .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 .zoom_in:hover, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 .zoom_in:hover {
             filter: brightness(100%);
             transition: 0.2s;
-            overflow-x: scroll; }
+            overflow-x: scroll;
+            cursor: zoom-out;
+            cursor: -moz-zoom-out;
+            cursor: -webkit-zoom-out; }
 
 .presentation footer span.totop {
   display: inline-flex;

web/themes/custom/quartiers_de_demain/scss/pages/_presentation.scss

@@ -190,7 +190,7 @@
                             width: -moz-available;
                             width: 100%;
                             height: auto;   
-                            z-index: 100;
+                            // z-index: 100;
                             &:hover{
                                 filter: brightness(75%);
                                 transition: 0.2s;
@@ -198,7 +198,6 @@
                                 cursor: zoom-in;
                                 cursor: -moz-zoom-in;
                                 cursor: -webkit-zoom-in;
-                                z-index: 100;
                                 @media(max-width: 500px){
                                     filter: brightness(100%);
                                 }
@@ -211,11 +210,16 @@
                             transform: scale(1.7);
                             max-width: 100vw;
                             overflow-x: scroll;
-                            z-index: 100;
+                            position: relative;
+                            z-index: 98;
                             &:hover{
                                 filter: brightness(100%);
                                 transition: 0.2s;
                                 overflow-x: scroll;
+                                cursor: zoom-out;
+                                cursor: -moz-zoom-out;
+                                cursor: -webkit-zoom-out;
+
                             }   
                         }
                     }

web/themes/custom/quartiers_de_demain/templates/--paragraph--static-parts.html.twig

@@ -1,61 +0,0 @@
-{# 
-/**
- * @file
- * Default theme implementation to display a paragraph.
- *
- * Available variables:
- * - paragraph: Full paragraph entity.
- *   Only method names starting with "get", "has", or "is" and a few common
- *   methods such as "id", "label", and "bundle" are available. For example:
- *   - paragraph.getCreatedTime() will return the paragraph creation timestamp.
- *   - paragraph.id(): The paragraph ID.
- *   - paragraph.bundle(): The type of the paragraph, for example, "image" or "text".
- *   - paragraph.getOwnerId(): The user ID of the paragraph author.
- *   See Drupal\paragraphs\Entity\Paragraph for a full list of public properties
- *   and methods for the paragraph object.
- * - content: All paragraph 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.
- * - attributes: HTML attributes for the containing element.
- *   The attributes.class element may contain one or more of the following
- *   classes:
- *   - paragraphs: The current template type (also known as a "theming hook").
- *   - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an
- *     "Image" it would result in "paragraphs--type--image". Note that the machine
- *     name will often be in a short form of the human readable label.
- *   - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a
- *     preview would result in: "paragraphs--view-mode--preview", and
- *     default: "paragraphs--view-mode--default".
- * - view_mode: View mode; for example, "preview" or "full".
- * - logged_in: Flag for authenticated user status. Will be true when the
- *   current user is a logged-in member.
- * - is_admin: Flag for admin user status. Will be true when the current user
- *   is an administrator.
- *
- * @see template_preprocess_paragraph()
- *
- * @ingroup themeable
- */
-#}
-{%
-  set classes = [
-    'paragraph',
-    'paragraph--type--' ~ paragraph.bundle|clean_class,
-    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
-    not paragraph.isPublished() ? 'paragraph--unpublished',
-  ]
-%}
-{%
-  set ancre_href = '#paragraph-id--' ~ paragraph.id()
-%}
-{% block paragraph %}
-  {# <div{{ attributes.addClass(classes) }}> #}
-    <div{{ attributes.addClass(classes) }}>
-      {# <a href="{{ ancre_href }}"> #}
-        {% block content %}
-          {{ content }}
-        {% endblock %}
-      </a>
-  </div>
-{% endblock paragraph %}