/* ============================================================
   ÉVOLUTIONS UX — MENU HEADER (MÉGA-MENU)
   ------------------------------------------------------------
   Repris du composant `mega-menu/` de la maquette, avec quatre
   adaptations à l'intégration WordPress, toutes signalées par
   « INTÉGRATION » dans ce fichier :

   1. Neutralisation de trois règles de l'ancien header qui
      s'appliqueraient au nouveau (sélecteurs génériques).
   2. Colonne large : la case « Colonne large » des menus remplace
      la règle « la dernière colonne d'un panneau à 3 colonnes
      s'élargit », qui rendait large « Postuler » (1 lien) au lieu
      de « Nos métiers » dès qu'il y a 5 métiers au lieu de 7.
   3. Pas de décalage global de `<main>` : toutes les pages du site
      s'ouvrent sur un hero que le header recouvre, comme aujourd'hui.
   4. Langues : balisage Polylang au lieu de celui de la maquette.

   S'appuie sur les variables de `commun.css`.
   ============================================================ */


/* ============================================================
   INTÉGRATION 1 — Neutralisation de l'ancien header
   ------------------------------------------------------------
   Le `style.css` du thème cible la balise `header` en général,
   pas l'ancien `.header-principal`. Ces règles atteignent donc le
   nouveau header :

     header { position: fixed; z-index: 10; background-color:
              transparent; transition: all .5s }          (global)
     header nav { position: fixed; height: calc(100% - 100px);
                  left: -100%; background-color: #5073B0 } (≤ 1200 px)
     .header-scroll { background-color: white !important;
                      transition: all .5s }  ← classe ajoutée au
                      défilement par js/script.js à TOUT <header>

   La deuxième est la plus grave : entre 901 et 1200 px, elle
   repousserait le méga-menu hors de l'écran, panneau bleu compris.
   On les annule ici par spécificité, sans toucher au `style.css`
   existant, qui sert toujours aux autres gabarits.
   ============================================================ */
header.sgt-header,
header.sgt-header.header-scroll{
  width: auto;
  background-color: transparent !important;
  transition: none !important;
}
.sgt-header .sgt-nav{
  position: static;
  width: auto;
  height: auto;
  bottom: auto;
  left: auto;
  text-align: left;
  background-color: transparent;
  transition: none;
}


/* ============================================================
   HEADER
   ============================================================ */
.sgt-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  font-family: var(--sgt-font);
}
body.sgt-nav-open{ overflow: hidden; }


/* ---- Sur-header : contacts & réseaux ---- */
.sgt-header__top{
  height: var(--h-top);
  background-color: var(--sgt-noir);
  color: #fff;
}
.sgt-header__top-inner{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  height: 100%;
  padding: 0 26px;
}
.sgt-header__tel{
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 1.1px;
  color: #fff;
  transition: color .3s ease;
}
.sgt-header__tel span{ opacity: .55; }
.sgt-header__tel:hover{ color: var(--sgt-jaune); }

.sgt-header__sep{
  width: 1px;
  height: 16px;
  background-color: rgba(200, 200, 200, .3);
}
.sgt-header__social{
  display: inline-flex;
  color: #fff;
  opacity: .75;
  transition: var(--sgt-ease);
}
.sgt-header__social:hover{ opacity: 1; transform: scale(1.15); }
/* Réseau sans icône SVG connue : on reprend l'icône téléversée dans
   les options, comme l'ancien header. */
.sgt-header__social img{ width: 18px; height: 18px; object-fit: contain; }


/* ---- Header principal ----
   Toujours sur fond blanc (accessibilité) : le texte du menu garde un
   contraste constant, quelle que soit la photo en dessous.
   Au défilement, seul le gabarit se réduit : barre ET logo. */
.sgt-header__main{
  position: relative;            /* référent des panneaux du menu */
  display: flex;
  align-items: center;
  height: var(--h-main);
  padding: 0 20px;
  background-color: #fff;
  border-bottom: 1px solid var(--sgt-bordure);
  transition: height .45s ease;
}
.sgt-header.is-scrolled{
  --h-main: 64px;
  --logo-h: 40px;
}

/* INTÉGRATION 3 — La maquette décalait tout `<main>` de la hauteur du
   header, sauf quand la page s'ouvre sur le hero de l'accueil. Dans le
   thème, TOUTES les pages s'ouvrent sur un hero (accueil, ou bandeau
   `bloc_principal_G2/G4/G5/G6/G9` des pages internes) que le header
   recouvre déjà aujourd'hui. Reprendre la règle aurait fait descendre
   tous les bandeaux des pages internes de 118 px. On ne l'applique donc
   pas : le header continue de passer par-dessus le hero partout. */

/* INTÉGRATION 4 — Le bandeau de navigation des pages internes
   (`#Bandeau_retour`) colle sous le header au défilement. style.css le
   cale à 110 px (105 px sous 1200 px), la hauteur de l'ancien header.
   Le nouveau fait 118 px, puis 104 px une fois réduit : sans recalage,
   une fente de 6 px laissait passer le contenu entre les deux. Le
   bandeau suit donc la hauteur réelle du header. Sous 500 px, style.css
   le masque : rien ne change. */
#Bandeau_retour{
  top: calc(var(--h-top) + var(--h-main));
  transition: top .45s ease;
}
body:has(.sgt-header.is-scrolled) #Bandeau_retour{ top: calc(var(--h-top) + 64px); }

.sgt-header__logo{
  display: block;
  flex: 0 0 auto;
  height: var(--logo-h);
  transition: height .45s ease;
}
.sgt-header__logo img{ height: 100%; width: auto; }

.sgt-header__right{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 auto;
  gap: 26px;
}


/* ============================================================
   NAVIGATION — NIVEAU 1
   Markup = sortie native de wp_nav_menu(), sans walker :
   nav.sgt-nav > ul.menu > li.menu-item[.menu-item-has-children] > a
   ============================================================ */
.sgt-nav .menu{ display: flex; align-items: center; }

.sgt-nav .menu > li{
  position: static;   /* les panneaux s'ancrent sur .sgt-header__main */
  display: flex;
  align-items: center;
}

.sgt-nav .menu > li > a{
  position: relative;
  display: inline-block;
  padding: 10px 16px;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 1.1px;
  color: var(--sgt-noir);
  transition: color .3s ease;
}
.sgt-nav .menu > li > a:focus-visible{ outline: 2px solid var(--sgt-bleu); outline-offset: 2px; }

/* soulignement animé — reprise du `<hr>` du thème d'origine */
.sgt-nav .menu > li > a::after{
  content: "";
  position: absolute;
  left: 16px;
  bottom: 4px;
  width: 0;
  height: 2px;
  background-color: var(--sgt-jaune);
  transition: width .5s ease;
}
.sgt-nav .menu > li:hover > a::after,
.sgt-nav .menu > li:focus-within > a::after,
.sgt-nav .menu > li.is-open > a::after,
.sgt-nav .menu > li.current-menu-item > a::after,
.sgt-nav .menu > li.current-menu-ancestor > a::after{ width: calc(100% - 32px); }

/* Page courante : pas de texte jaune sur blanc (contraste 2:1),
   graisse + soulignement jaune. */
.sgt-nav .menu > li.current-menu-item > a,
.sgt-nav .menu > li.current-menu-ancestor > a{ font-weight: 500; }

/* Chevron — injecté par mega-menu.js après chaque lien qui a un sous-menu.
   Desktop : indicateur collé au libellé, qui pivote quand le panneau est
   ouvert (il reste cliquable : utile au clavier et sur tablette).
   Mobile : bouton d'accordéon (voir Responsive). */
.nav-toggle{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 8px 0 -12px;
  padding: 4px;
  color: inherit;
  transition: transform .3s ease;
}
.nav-toggle svg{ width: 11px; height: 11px; }

@media (min-width: 901px){
  .sgt-nav .menu > li:hover > .nav-toggle,
  .sgt-nav .menu > li:focus-within > .nav-toggle,
  .sgt-nav .menu > li.is-open > .nav-toggle{ transform: rotate(180deg); }
}


/* ============================================================
   PANNEAU — un seul modèle pour tous les onglets
   ------------------------------------------------------------
   Toute entrée de niveau 1 qui a des enfants ouvre ce panneau.
   ul.sub-menu de niveau 2 = grille fixe de 4 colonnes.
   Chaque <li> de niveau 2 = une colonne :
     titre · description (facultative) · liens de niveau 3
   ============================================================ */
.sgt-nav .menu > li > .sub-menu{
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 40px 60px;
  padding: 26px max(8%, calc((100% - 1320px) / 2)) 40px;
  background-color: #fff;
  border-bottom: 1px solid var(--sgt-bordure);
  /* état fermé — rideau qui descend */
  opacity: 0;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transform: translateY(-10px);
  transition:
    clip-path .45s ease-in-out,
    opacity   .3s  ease,
    transform .3s  ease,
    visibility 0s linear .45s;
}
.sgt-nav .menu > li:hover        > .sub-menu,
.sgt-nav .menu > li:focus-within > .sub-menu,
.sgt-nav .menu > li.is-open      > .sub-menu{
  opacity: 1;
  visibility: visible;
  clip-path: inset(0 0 -10px 0);
  transform: translateY(0);
  transition:
    clip-path .45s ease-in-out,
    opacity   .3s  ease,
    transform .3s  ease,
    visibility 0s;
}


/* ---- Colonne (niveau 2) : titre ---- */
.sgt-nav .menu > li > .sub-menu > li{
  min-width: 0;
  padding-top: 18px;
  border-top: 2px solid var(--sgt-jaune);   /* le jaune reste en filet : en texte sur blanc il serait illisible */
}
.sgt-nav .menu > li > .sub-menu > li > a{
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--sgt-noir);
  transition: color .3s ease;
}
.sgt-nav .menu > li > .sub-menu > li > a:hover,
.sgt-nav .menu > li > .sub-menu > li > a:focus-visible,
.sgt-nav .menu > li > .sub-menu > li.current-menu-item > a{ color: var(--sgt-texte-doux); outline: none; }

/* un titre saisi avec l'URL « # » n'est pas cliquable */
.sgt-nav .menu > li > .sub-menu > li > a[href="#"]{ pointer-events: none; }

/* champ « Description » des éléments de menu (filtre PHP dans
   inc/evolutions/mega-menu.php) */
.sgt-nav .menu-item-description{
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: .3px;
  line-height: 1.6;
  text-transform: none;
  color: var(--sgt-texte-doux);
}


/* ---- Colonne : liens (niveau 3) ---- */
.sgt-nav .sub-menu .sub-menu{ margin-top: 10px; }
.sgt-nav .sub-menu .sub-menu li + li{ margin-top: 2px; }
.sgt-nav .sub-menu .sub-menu a{
  display: block;
  padding: 9px 0;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 1.2px;
  color: var(--sgt-noir);
  text-decoration: underline transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: text-decoration-color .3s ease;
}
.sgt-nav .sub-menu .sub-menu a:hover,
.sgt-nav .sub-menu .sub-menu a:focus-visible,
.sgt-nav .sub-menu .sub-menu .current-menu-item > a{ text-decoration-color: var(--sgt-jaune); outline: none; }
.sgt-nav .sub-menu .sub-menu .current-menu-item > a{ font-weight: 500; }


/* ============================================================
   INTÉGRATION 2 — Colonne large : prend 2 places
   ------------------------------------------------------------
   Deux déclencheurs :

   · AUTOMATIQUE — une colonne qui a 6 liens ou plus prend 2 places,
     et ses liens se répartissent à parts égales sur 2 colonnes
     (7 → 4 + 3). « Deux colonnes, c'est au-delà de 5 éléments. »

   · EXPLICITE — la case « Colonne large » d'un élément de menu
     (Apparence → Menus) pose la classe `colonne-large`. Pour les
     colonnes qui ont besoin de place sans avoir beaucoup de liens :
     « Nos implantations » n'a que 2 lignes, mais chacune aligne
     4 ou 5 entités (« France : SGT France · SGR · … »).

   La maquette avait une troisième règle, retirée ici : dans un panneau
   de 3 colonnes sans colonne de 6 liens, la DERNIÈRE s'élargissait.
   Elle tombait juste avec les 7 métiers de la maquette, mais avec les
   5 du lancement elle rendait large « Postuler » et son unique lien,
   en laissant « Nos métiers » à l'étroit.
   ============================================================ */
.sgt-nav .menu > li > .sub-menu > li:has(> .sub-menu > li:nth-child(6)),
.sgt-nav .menu > li > .sub-menu > li.colonne-large{
  grid-column: span 2;
}

/* Répartition des liens sur 2 colonnes : seulement pour une liste
   simple de 6 liens ou plus. Une colonne large par case à cocher mais
   courte reste sur une colonne, et une colonne à sous-groupes en ligne
   (« France : … ») n'est jamais coupée en deux. */
.sgt-nav .menu > li > .sub-menu > li > .sub-menu:has(> li:nth-child(6)):not(:has(.sub-menu)){
  columns: 2;
  column-gap: 40px;
}
.sgt-nav .menu > li > .sub-menu > li > .sub-menu > li{ break-inside: avoid; }


/* ---- Sous-groupe (niveau 4) : « France : A · B · C » ----
   Le niveau 3 devient un libellé, ses enfants s'affichent en ligne. */
.sgt-nav .sub-menu .sub-menu > .menu-item-has-children{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  line-height: 1.9;
}
.sgt-nav .sub-menu .sub-menu > .menu-item-has-children + .menu-item-has-children{ margin-top: 12px; }
.sgt-nav .sub-menu .sub-menu > .menu-item-has-children > a{
  padding: 0;
  margin-right: 6px;
  font-weight: 500;
  pointer-events: none;        /* libellé, pas un lien */
}
.sgt-nav .sub-menu .sub-menu > .menu-item-has-children > a::after{ content: " :"; }

/* la liste se fond dans la ligne */
.sgt-nav .sub-menu .sub-menu .sub-menu{ display: contents; }
.sgt-nav .sub-menu .sub-menu .sub-menu li{ display: block; margin: 0; white-space: nowrap; }
/* séparateur en fin d'élément : au retour à la ligne, aucune ligne ne
   commence par « · » */
.sgt-nav .sub-menu .sub-menu .sub-menu li:not(:last-child)::after{
  content: "·";
  margin: 0 7px;
  color: var(--sgt-texte-doux);
}
.sgt-nav .sub-menu .sub-menu .sub-menu a{
  display: inline;
  padding: 0;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}


/* ============================================================
   INTÉGRATION 4 — Langues (Polylang)
   ------------------------------------------------------------
   Le gabarit construit la liste à partir de pll_the_languages()
   en mode brut, avec le balisage de la maquette : `.is-current`
   sur la langue courante.
   ============================================================ */
.sgt-lang{ display: flex; align-items: center; gap: 12px; }
.sgt-lang a{
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--sgt-noir);
  opacity: .7;               /* ≈ #646464 sur blanc : contraste 5,9:1 */
  transition: opacity .5s ease;
}
.sgt-lang a:hover{ opacity: 1; }
.sgt-lang .is-current a{ opacity: 1; font-weight: 600; }
.sgt-lang a:focus-visible{ opacity: 1; outline: 2px solid var(--sgt-bleu); outline-offset: 2px; }


/* ---- Notifications ----
   Fonctionnalité de l'ancien header, absente de la maquette, conservée
   telle quelle : la cloche n'apparaît que si une notification des
   options a un lien. Aucune n'en a aujourd'hui, donc rien ne s'affiche. */
.sgt-notif{ position: relative; display: flex; }
.sgt-notif__bouton{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--sgt-bordure);
}
.sgt-notif__bouton img{ width: 15px; height: 15px; }
.sgt-notif__compteur{
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  color: #fff;
  background-color: var(--sgt-magenta);
}
.sgt-notif__bulle{
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 300px;
  padding: 18px 20px;
  background-color: #fff;
  border: 1px solid var(--sgt-bordure);
}
.sgt-notif__bulle[hidden]{ display: none; }
.sgt-notif__date{ margin: 0; font-size: 12px; color: var(--sgt-texte-doux); }
.sgt-notif__titre{ margin: 4px 0 8px; font-size: 15px; font-weight: 500; }
.sgt-notif__lien{ font-size: 14px; color: var(--sgt-bleu); text-decoration: underline; }
.sgt-notif__item + .sgt-notif__item{ margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--sgt-bordure); }


/* ============================================================
   BURGER & VOILE
   ============================================================ */
.sgt-burger{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 42px;
  height: 42px;
  margin-left: auto;
}
.sgt-burger span{
  display: block;
  width: 26px;
  height: 2px;
  background-color: var(--sgt-noir);
  transition: var(--sgt-ease);
}
.sgt-burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.sgt-burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.sgt-burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

.sgt-overlay{
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
  background-color: rgba(0, 0, 0, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.sgt-header.has-panel-open .sgt-overlay,
.sgt-header.is-nav-open .sgt-overlay{ opacity: 1; pointer-events: auto; }


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px){
  .sgt-nav .menu > li > .sub-menu{ gap: 28px 32px; padding-inline: 5%; }
  .sgt-nav .menu > li > a{ padding: 10px 11px; font-size: 15px; }
  .sgt-nav .menu > li > a::after{ left: 11px; }
  .sgt-nav .menu > li:hover > a::after,
  .sgt-nav .menu > li:focus-within > a::after,
  .sgt-nav .menu > li.is-open > a::after,
  .sgt-nav .menu > li.current-menu-item > a::after,
  .sgt-nav .menu > li.current-menu-ancestor > a::after{ width: calc(100% - 22px); }
  .nav-toggle{ margin: 0 4px 0 -8px; }
}

@media (max-width: 900px){
  /* -------- Header : bascule en tiroir -------- */
  .sgt-header__top-inner{ gap: 10px; padding: 0 16px; }
  .sgt-header__tel span{ display: none; }
  .sgt-header__main{ padding: 0 16px; }
  .sgt-header{ --logo-h: 40px; }
  .sgt-header.is-scrolled{ --logo-h: 34px; }
  .sgt-burger{ display: flex; }

  .sgt-header__right{
    position: fixed;
    top: calc(var(--h-top) + var(--h-main));
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 20px 0 40px;
    background-color: #fff;
    overflow-y: auto;
    transform: translateX(105%);
    /* INTÉGRATION — La maquette ne faisait que décaler le tiroir fermé hors
       de l'écran. Ses liens restaient donc atteignables à la touche Tab et
       lus par les lecteurs d'écran, alors qu'ils sont invisibles. On le
       masque pour de bon, avec un délai égal à l'animation pour ne pas
       couper la fermeture. */
    visibility: hidden;
    transition: transform .45s ease, visibility 0s linear .45s;
  }
  .sgt-header.is-nav-open .sgt-header__right{
    transform: translateX(0);
    visibility: visible;
    transition: transform .45s ease, visibility 0s;
  }

  .sgt-nav .menu{ flex-direction: column; align-items: stretch; }
  .sgt-nav .menu > li{
    position: relative;
    display: block;
    border-bottom: 1px solid var(--sgt-bordure);
  }
  .sgt-nav .menu > li > a{
    display: block;
    padding: 18px 70px 18px 24px;
    font-size: 17px;
    letter-spacing: 2px;
    color: var(--sgt-noir) !important;
  }
  .sgt-nav .menu > li > a::after{ display: none; }
  .sgt-nav .menu > li.current-menu-item > a,
  .sgt-nav .menu > li.current-menu-ancestor > a{ font-weight: 600; box-shadow: inset 3px 0 0 var(--sgt-jaune); }

  .nav-toggle{
    display: flex;
    position: absolute;
    top: 8px;
    right: 10px;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 8px;
    color: var(--sgt-noir);
    transition: transform .35s ease;
  }
  .nav-toggle svg{ width: 14px; height: 14px; }
  .sgt-nav .menu > li.is-open > .nav-toggle{ transform: rotate(180deg); }

  /* Panneau → accordéon : les colonnes s'empilent dans l'ordre du menu. */
  .sgt-nav .menu > li > .sub-menu{
    position: static;
    display: block;
    max-height: 0;
    overflow: hidden;
    padding: 0 24px;
    background-color: #fff;
    clip-path: none;
    transform: none;
    transition: max-height .45s ease-in-out, padding .45s ease-in-out, opacity .3s ease, visibility 0s linear .45s;
  }
  /* sur mobile, ni survol ni focus n'ouvrent : uniquement le chevron */
  .sgt-nav .menu > li:hover        > .sub-menu,
  .sgt-nav .menu > li:focus-within > .sub-menu{
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    clip-path: none;
  }
  .sgt-nav .menu > li.is-open > .sub-menu{
    max-height: 2000px;
    padding: 20px 24px 26px;
    opacity: 1;
    visibility: visible;
    clip-path: none;
    transition: max-height .45s ease-in-out, padding .45s ease-in-out, opacity .3s ease, visibility 0s;
  }
  .sgt-nav .menu > li > .sub-menu > li + li{ margin-top: 22px; }
  .sgt-nav .menu > li > .sub-menu > li:first-child{ padding-top: 0; border-top: 0; }
  .sgt-nav .sub-menu .sub-menu a{ font-size: 16px; }

  /* Sur mobile, une colonne large redevient une colonne normale : le
     panneau est déjà une pile. Mêmes sélecteurs que desktop pour
     l'emporter. */
  .sgt-nav .menu > li > .sub-menu > li:has(> .sub-menu > li:nth-child(6)),
  .sgt-nav .menu > li > .sub-menu > li.colonne-large{ grid-column: auto; }
  .sgt-nav .menu > li > .sub-menu > li > .sub-menu:has(> li:nth-child(6)):not(:has(.sub-menu)){ columns: auto; }

  .sgt-lang{ justify-content: center; padding: 26px 24px 0; }
  .sgt-lang a{ color: var(--sgt-noir) !important; font-size: 16px; }

  .sgt-notif{ justify-content: center; padding: 18px 24px 0; }
  .sgt-notif__bulle{ position: static; width: auto; margin-top: 12px; }
}

/* La maquette masquait ici le téléphone algérien sous 480 px, avec
   `.sgt-header__tel:last-of-type`. Ce sélecteur n'a jamais rien atteint,
   dans la maquette non plus : :last-of-type vise le dernier <a> du
   sur-header, c'est-à-dire LinkedIn. Règle retirée : le cahier des
   charges veut la barre supérieure inchangée, et le site actuel affiche
   les deux numéros sur mobile. On réduit seulement l'écartement sur les
   très petits écrans pour que tout tienne sur une ligne. */
@media (max-width: 400px){
  .sgt-header__top-inner{ gap: 8px; padding: 0 12px; }
  .sgt-header__tel{ letter-spacing: .4px; }
}