@media screen and (max-width: 40em) {

  /* Exemple d'une base globale pour le padding */
  :root {
    --base-padding: 1em; /* Peut être ajustée dynamiquement */
    --spacing-0: 0; /* 0px reste inchangé */
    --spacing-1: 2.4px; /* 0.2525rem * 0.6 = 0.1515rem */
    --spacing-2: 4.8px; /* 0.525rem * 0.6 = 0.315rem */
    --spacing-3: 7.2px; /* 0.7525rem * 0.6 = 0.4515rem */
    --spacing-4: 9.6px; /* 1.25rem * 0.6 = 0.75rem */
    --spacing-5: 12px; /* 1.2525rem * 0.6 = 0.7515rem */
    --spacing-6: 14.4px; /* 1.525rem * 0.6 = 0.915rem */
    --spacing-7: 16.8px; /* 1.7525rem * 0.6 = 1.0515rem */
    --spacing-8: 19.2px; /* 2.25rem * 0.6 = 1.35rem */
    --spacing-9: 21.6px; /* 2.2525rem * 0.6 = 1.3515rem */
  }

  #layout-builder {
    font-size: 60%; /* Réduit la taille de la police */
    line-height: 1.5; /* Réduit la hauteur de ligne */
  }

  #layout-builder * {
    font-size: inherit; /* Applique la réduction à tous les descendants */
    line-height: inherit; /* Applique la même hauteur de ligne à tous les descendants */
  }

  #layout-builder img {
    /* width: 10px; */
    height: auto;
    margin-right: 0;
  }

  #optimized-letter.with-margins,
  #optimized-email.with-margins,
  #layout-builder.with-margins {
    padding: 0.5cm !important; /* réduit la marge pour mobile */
  }
  #layout-builder .field ul,
  #layout-builder .field ol {
    margin-top: 0.6em !important;
    margin-bottom: 0.6em  !important;
    padding-inline-start: 20px  !important; 
  }

  /* Classes utilitaires pour le padding */
  #layout-builder .padding-top-0 { padding-top: var(--spacing-0); }
  #layout-builder .padding-top-1 { padding-top: var(--spacing-1); }
  #layout-builder .padding-top-2 { padding-top: var(--spacing-2); }
  #layout-builder .padding-top-3 { padding-top: var(--spacing-3); }
  #layout-builder .padding-top-4 { padding-top: var(--spacing-4); }
  #layout-builder .padding-top-5 { padding-top: var(--spacing-5); }
  #layout-builder .padding-top-6 { padding-top: var(--spacing-6); }
  #layout-builder .padding-top-7 { padding-top: var(--spacing-7); }
  #layout-builder .padding-top-8 { padding-top: var(--spacing-8); }
  #layout-builder .padding-top-9 { padding-top: var(--spacing-9); }

  /* Classes utilitaires pour le padding */
  #layout-builder .padding-bottom-0 { padding-bottom: var(--spacing-0); }
  #layout-builder .padding-bottom-1 { padding-bottom: var(--spacing-1); }
  #layout-builder .padding-bottom-2 { padding-bottom: var(--spacing-2); }
  #layout-builder .padding-bottom-3 { padding-bottom: var(--spacing-3); }
  #layout-builder .padding-bottom-4 { padding-bottom: var(--spacing-4); }
  #layout-builder .padding-bottom-5 { padding-bottom: var(--spacing-5); }
  #layout-builder .padding-bottom-6 { padding-bottom: var(--spacing-6); }
  #layout-builder .padding-bottom-7 { padding-bottom: var(--spacing-7); }
  #layout-builder .padding-bottom-8 { padding-bottom: var(--spacing-8); }
  #layout-builder .padding-bottom-9 { padding-bottom: var(--spacing-9); }

  /* Classes utilitaires pour le padding */
  #layout-builder .padding-right-0 { padding-right: var(--spacing-0); }
  #layout-builder .padding-right-1 { padding-right: var(--spacing-1); }
  #layout-builder .padding-right-2 { padding-right: var(--spacing-2); }
  #layout-builder .padding-right-3 { padding-right: var(--spacing-3); }
  #layout-builder .padding-right-4 { padding-right: var(--spacing-4); }
  #layout-builder .padding-right-5 { padding-right: var(--spacing-5); }
  #layout-builder .padding-right-6 { padding-right: var(--spacing-6); }
  #layout-builder .padding-right-7 { padding-right: var(--spacing-7); }
  #layout-builder .padding-right-8 { padding-right: var(--spacing-8); }
  #layout-builder .padding-right-9 { padding-right: var(--spacing-9); }


  /* Classes utilitaires pour le padding */
  #layout-builder .padding-left-0 { padding-left: var(--spacing-0); }
  #layout-builder .padding-left-1 { padding-left: var(--spacing-1); }
  #layout-builder .padding-left-2 { padding-left: var(--spacing-2); }
  #layout-builder .padding-left-3 { padding-left: var(--spacing-3); }
  #layout-builder .padding-left-4 { padding-left: var(--spacing-4); }
  #layout-builder .padding-left-5 { padding-left: var(--spacing-5); }
  #layout-builder .padding-left-6 { padding-left: var(--spacing-6); }
  #layout-builder .padding-left-7 { padding-left: var(--spacing-7); }
  #layout-builder .padding-left-8 { padding-left: var(--spacing-8); }
  #layout-builder .padding-left-9 { padding-left: var(--spacing-9); }

  #layout-builder img {
    width: 10px;
  }

  #layout-builder .field--name-field_image img{
    width: 60px !important;
    /* margin: 0 auto; */
  }
}