/* ==========================================================================
   CALM : en-tête avec image affichée EN ENTIER, sans déformation

   L'image est une balise <img> dans le flux : largeur 100 %, hauteur
   automatique. Rien n'est recadré ni étiré. Le contenu (liens de compte,
   logos, titres) est superposé à l'image.

   26/10/2026 (2) : les logos et les textes sont CENTRÉS VERTICALEMENT dans
   le bandeau, et non plus collés en bas.
   ========================================================================== */

/* 1. Le bandeau : simple cadre autour de l'image */
.calm-header,
header.calm-header,
body.calm .calm-header {
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  background-color: #090B16 !important;
  background-image: none !important;
  border-bottom: 4px solid #1180DB !important;
  line-height: 0 !important;
}

/* 2. L'image occupe toute la largeur, hauteur proportionnelle */
.calm-header .calm-header-img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  object-fit: contain !important;
}

/* 3. Voile de lisibilité : sombre au centre, plus clair sur les bords */
.calm-header .calm-header-voile {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(
    90deg,
    rgba(9, 11, 22, 0.26) 0%,
    rgba(9, 11, 22, 0.64) 20%,
    rgba(9, 11, 22, 0.82) 40%,
    rgba(9, 11, 22, 0.82) 62%,
    rgba(9, 11, 22, 0.58) 80%,
    rgba(9, 11, 22, 0.24) 100%
  ) !important;
}

/* 4. Colonne de contenu : liens de compte en haut, reste centré verticalement */
.calm-header .calm-wrap {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 2 !important;

  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0.75rem 1.5rem 0.9rem !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  line-height: 1.7 !important;
}

/* 5. Ligne de compte : en haut, alignée à droite */
.calm-header .calm-compte-ligne {
  flex: 0 0 auto !important;
  display: block !important;
  width: 100% !important;
  text-align: right !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 1.4rem !important;
  background: transparent !important;
  border: 0 !important;
  position: relative !important;
  z-index: 3 !important;
}

/* 6. Bloc logos + textes : occupe le reste et se CENTRE verticalement */
.calm-header .calm-head {
  flex: 1 1 auto !important;
  position: relative !important;
  z-index: 2 !important;

  display: flex !important;
  align-items: center !important;          /* logos et textes centrés verticalement */
  justify-content: space-between !important;
  gap: 1.6rem !important;

  margin: 0 !important;
  padding-bottom: 0.35rem !important;
}

/* 7. Liens de compte */
.calm-header .calm-compte,
.calm #navigationUser {
  position: static !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.calm-header .calm-compte,
.calm-header ul.calm-compte {
  list-style: none !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 2.2rem !important;
}

.calm-header .calm-compte > li + li {
  padding-left: 2.2rem !important;
  border-left: 1px solid rgba(166, 173, 209, 0.40) !important;
}

.calm-header .calm-compte li {
  position: relative !important;
  display: inline-block !important;
  margin: 0 !important;
}

.calm-header .calm-compte a,
.calm #navigationUser a {
  color: #FFFFFF !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: .79rem !important;
  font-weight: 600 !important;
  letter-spacing: .25px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  text-shadow: 0 1px 4px rgba(9, 11, 22, .95), 0 0 10px rgba(9, 11, 22, .8) !important;
  transition: color .18s ease !important;
}

.calm-header .calm-compte a:hover,
.calm-header .calm-compte a:focus,
.calm #navigationUser a:hover {
  color: #A6ADD1 !important;
  text-decoration: underline !important;
}

/* 8. Sous-menus déroulants */
.calm-header .calm-compte ul {
  display: none !important;
  position: absolute !important;
  right: 0 !important;
  left: auto !important;
  top: calc(100% + 8px) !important;
  background: #FFFFFF !important;
  border: 1px solid #E3E5F0 !important;
  border-top: 3px solid #1180DB !important;
  border-radius: 0 0 9px 9px !important;
  box-shadow: 0 14px 30px rgba(9, 11, 22, .28) !important;
  padding: .4rem 0 !important;
  min-width: 13rem !important;
  flex-direction: column !important;
  gap: 0 !important;
  z-index: 60 !important;
}

.calm-header .calm-compte li:hover > ul,
.calm-header .calm-compte li:focus-within > ul {
  display: flex !important;
}

.calm-header .calm-compte ul li {
  border-left: 0 !important;
  padding-left: 0 !important;
}

.calm-header .calm-compte ul a {
  color: #3D436B !important;
  padding: .5rem 1.1rem !important;
  display: block !important;
  white-space: normal !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

.calm-header .calm-compte ul a:hover {
  background: #F5F6FB !important;
  color: #1180DB !important;
  text-decoration: none !important;
}

.calm-header .calm-compte .task_count,
.calm #navigationUser .task_count {
  background: #1180DB !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  padding: 0 .42rem !important;
  margin-left: .28rem !important;
  font-size: .7rem !important;
  display: inline-block !important;
  text-shadow: none !important;
}

/* ==========================================================================
   9. LOGOS ET TEXTES sur l'image
   ========================================================================== */
.calm .calm-logos {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  flex: 0 0 auto !important;
}

/* Bloc de textes : centré horizontalement, aligné au milieu des logos */
.calm-header .calm-titres {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: center !important;
  align-self: center !important;
}

.calm .calm-titre,
.calm .calm-titre a {
  color: #FFFFFF !important;
  text-shadow: 0 2px 14px rgba(9, 11, 22, .98), 0 1px 5px rgba(9, 11, 22, .98) !important;
}

.calm-sous-titre {
  color: #EDF0FA !important;
  text-shadow: 0 1px 10px rgba(9, 11, 22, .98), 0 1px 4px rgba(9, 11, 22, .98) !important;
}

.calm-sous-titre b { color: #FFFFFF !important; }

.calm-accroche {
  color: #E2E6F4 !important;
  text-shadow: 0 1px 10px rgba(9, 11, 22, .98), 0 1px 4px rgba(9, 11, 22, .98) !important;
}

.calm-header .calm-logo > img {
  background: #FFFFFF !important;
  padding: 8px !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 26px rgba(9, 11, 22, .65), 0 0 0 1px rgba(255, 255, 255, .22) !important;
  object-fit: contain !important;
  height: 74px !important;
  width: auto !important;
}

/* ==========================================================================
   10. Aucun espace parasite au-dessus du bandeau
   ========================================================================== */
body.calm,
body.calm .pkp_structure_page {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

/* ==========================================================================
   11. Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .calm-header .calm-wrap { padding: .65rem 1rem 0.8rem !important; }
  .calm-header .calm-compte { gap: 1.6rem !important; }
  .calm-header .calm-compte > li + li { padding-left: 1.6rem !important; }
  .calm-header .calm-compte a { font-size: .73rem !important; }
  .calm-header .calm-logo > img { height: 60px !important; }
  .calm .calm-titre { font-size: 1.5rem !important; }
}

@media (max-width: 560px) {
  .calm-header .calm-header-img { min-height: 150px !important; object-fit: cover !important; }
  .calm-header .calm-wrap { padding: .55rem .8rem .75rem !important; }
  .calm-header .calm-compte-ligne { text-align: center !important; }
  .calm-header .calm-compte { justify-content: center !important; gap: 1.2rem !important; }
  .calm-header .calm-compte > li + li { padding-left: 1.2rem !important; }
  .calm-header .calm-compte a { font-size: .69rem !important; }
  .calm-header .calm-logo > img { height: 46px !important; }
  .calm .calm-titre { font-size: 1.1rem !important; }
  .calm-sous-titre { font-size: .75rem !important; }
  .calm-accroche { display: none !important; }
  .calm-header .calm-head { gap: .7rem !important; }
}

@media print {
  .calm-header .calm-compte-ligne { display: none !important; }
  .calm-header .calm-header-img { display: none !important; }
  .calm-header { min-height: 60px !important; background: #090B16 !important; }
}