Ion-header issue

[sbdm05]

I have a situation with styles on simulator ios, that are just fine in the browser.

I am not sure how to write the ion-header part so that is actually display properly on ios simulator.
Right now, i have this code on a page :

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>Actualité</ion-title>
    <ion-buttons slot="start">
      <ion-back-button text='Retour' defaultHref='home-page'>
      </ion-back-button>
    </ion-buttons>
  </ion-toolbar>

</ion-header>

<ion-content [fullscreen]="true" >

    <ion-header collapse="condense">
      <ion-toolbar>
        <ion-title>Actualité</ion-title>
      </ion-toolbar>
    </ion-header>

and here the css in this component:

ion-header {
  background-color: var(--text-light-green) !important;
}

ion-toolbar {
  background-color: var(--text-light-green) !important;
}

ion-header img {
  height: 100px;
}

.toolbar-content {
  background: var(--text-light-green) !important;
}

I also put that code in the global.scss

ion-header {
  background-color: var(--text-light-green) !important;
}

ion-toolbar {
  --background: var(--dark-green) !important;
  --color: white
}
ion-back-button{
  color: white;
}
ion-button{
  --background: var(--dark-green) !important;
}

.toolbar-content {
  background: var(--text-light-green) !important;
}

.toolbar-background {
  background: var(--text-light-green) !important;
}

i am very confused about what i should do.
this is the correct verion in the browser

this is the result in ios simulator using xcode

thank you for the help