/* ============================================================
   LIEN « ESPACE CLIENT » DANS L'EN-TÊTE (le même sur toutes les pages)
   - Sur ordinateur : une pilule bleu ciel avec une petite silhouette,
     juste à gauche du bouton rouge « Nous contacter ».
   - Ordinateur étroit (moins de 1100 px) : la silhouette seule,
     dans un rond, pour laisser la place aux liens du menu.
   - Sur téléphone (moins de 960 px) : le lien passe dans la liste
     du menu (trois traits), en dernière ligne.
   ============================================================ */

/* À droite de la barre : « Espace client » puis « Nous contacter » */
.entete-droite {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* La pilule bleu ciel */
.entete-espace {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #CFE3FF;
  color: #1D3FC4;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 18px;
  border-radius: 999px;
  white-space: nowrap;
  transition: scale 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.entete-espace svg {
  flex: none;
  width: 18px;
  height: 18px;
}
.entete-espace:hover,
.entete-espace:focus-visible {
  background: #B9D5FF;
  scale: 1.05;
}
.entete-espace:active {
  scale: 0.97;
}
@media (prefers-reduced-motion: reduce) {
  .entete-espace {
    transition: none;
  }
}

/* La ligne « Espace client » de la liste du menu : cachée sur ordinateur */
.entete-liens .entete-espace-menu {
  display: none;
}

/* Ordinateur étroit : la silhouette seule, dans un rond */
@media (max-width: 1100px) {
  .entete-espace {
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
  }
  .entete-espace span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Téléphone : la pilule disparaît de la barre, le lien est dans le menu */
@media (max-width: 960px) {
  .entete-droite {
    flex-shrink: 0;
  }
  .entete-droite .entete-espace {
    display: none;
  }
  .entete-liens .entete-espace-menu {
    display: block;
    color: #1D3FC4;
  }
}