How to change the position of the zoom control in leaflet (Angular)

I'm trying to find a way to move my control.zoom and my control.layer. I get there with the css with the :: ngdeep tag but I don't find it clean.

Here is my code: my TS:

import { Component, OnInit } from '@angular/core';
import * as L from 'leaflet';
import {circle, icon, latLng, map, marker, polygon, tileLayer} from 'leaflet';
import {ObservatoryService} from '../../../@core/services/observatory.service';
import {Observatory} from '../../../@core/models/observatory.model';


@Component({
  selector: 'ngx-observatory-labs',
  templateUrl: './observatory-labs.component.html',
  styleUrls: ['./observatory-labs.component.scss'],
})
export class ObservatoryLabsComponent implements OnInit {

  Observ: Array<Observatory>;
  ObservLayers = [];

  constructor(private obsService: ObservatoryService) {
  }

  leafletOptions: any = {
    layers: [
      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        {
          zoomControl: false,
          maxZoom: 18,
          attribution: '...',
          id: 'mapbox.streets',
          accessToken: 'your.mapbox.access.token',
        }),
      L.control.zoom({
        position: 'bottomleft',
      }),
      L.control.layer-toggle({
        position: 'topleft',
      }),
    ],
    zoom: 17,
    center: L.latLng({lat: 43.599508, lng: 1.439671}),
  };

  layersControl = {
    baseLayers: {
      'Open Map basic': tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        {maxZoom: 18, attribution: '...'}),
      'Open Cycle Map': tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png',
        {maxZoom: 18, attribution: '...'}),
      'Open satelit Map': tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
        {maxZoom: 18, attribution: '...'}),
    },
    overlays: {
      'Critical Zone': L.layerGroup([
        circle([43.529070, 1.429942], {radius: 60, color: 'green'}).bindTooltip('<b>Hôtel :</b><br>la flannerie')]),
    },
  };

My Html:

<div style="height: 700px;"
       leaflet
       [leafletOptions]='leafletOptions'
       [leafletLayersControl]='layersControl'
       [leafletLayers]="ObservLayers">
  </div>

I tried to move the elements in the initialization of the map but it does not work and I did not find any satisfying examples either. Would someone have the solution please.