/* ═══════════════════════════════════════════════════════════
   COMMON.CSS — styles GLOBAUX de l'Account Console
   (fond, header, sidebar, navigation, boutons, inputs)
   Chargé sur toutes les pages. Tout ce qui est propre à une
   page vit dans son fichier scopé via :has(<marqueur>).
   ═══════════════════════════════════════════════════════════ */

/* =============================================
   FOND GÉNÉRAL
   ============================================= */
html, body {
  background-color: #cee7fa !important;
  font-family: "Reckless Neue", sans-serif !important;
}

.pf-v5-c-page {
  background-color: #cee7fa !important;
  font-family: "Reckless Neue", sans-serif !important;
}

.pf-v5-c-page__main,
.pf-v5-c-page__main-section {
  background-color: #cee7fa !important;
}

.pf-v5-c-page__main-section.pf-m-light {
  background-color: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid #b8d9f0 !important;
  box-shadow: 0 4px 24px rgba(0,156,222,0.10) !important;
  margin: 16px !important;
}

/* =============================================
   HEADER / MASTHEAD — tout en #cee7fa, plat
   ============================================= */
._headerTitle_elfox_5 {
  font-family: "Reckless Neue", sans-serif !important;
  color: #1a2a3a !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

.pf-v5-c-masthead,
.pf-v5-c-masthead__main,
.pf-v5-c-masthead__brand,
.pf-v5-c-masthead__content,
.pf-v5-c-masthead .pf-v5-c-toolbar,
.pf-v5-c-masthead .pf-v5-c-toolbar__content,
.pf-v5-c-masthead .pf-v5-c-toolbar__content-section,
.pf-v5-c-masthead .pf-v5-c-toolbar__item,
header,
header * {
  background-color: #cee7fa !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Textes et icônes du header lisibles */
.pf-v5-c-masthead ._headerTitle_elfox_5,
.pf-v5-c-masthead .pf-v5-c-menu-toggle__text,
.pf-v5-c-masthead .pf-v5-c-menu-toggle {
  color: #1a2a3a !important;
}

/* =============================================
   SIDEBAR
   ============================================= */
.pf-v5-c-page__sidebar {
  background-color: #cee7fa !important;
  border-right: none !important;
}

.pf-v5-c-page__sidebar-body {
  background-color: #cee7fa !important;
}

/* =============================================
   NAVIGATION — items
   ============================================= */
.pf-v5-c-nav {
  background-color: transparent !important;
  --pf-v5-c-nav__item--before--BorderWidth: 0;
}

.pf-v5-c-nav__list {
  background-color: transparent !important;
}

.pf-v5-c-nav__item {
  background-color: transparent !important;
  margin-bottom: 4px !important;
  --pf-v5-c-nav__link--before--BorderBottomWidth: 0 !important;
  --pf-v5-c-nav__link--after--BorderBottomWidth: 0 !important;
}

.pf-v5-c-nav__link::before,
.pf-v5-c-nav__link::after {
  border: none !important;
  display: none !important;
}

/* Lien normal */
a.pf-v5-c-nav__link,
button.pf-v5-c-nav__link {
  font-family: "Reckless Neue", sans-serif !important;
  color: #1a2a3a !important;
  background-color: transparent !important;
  border-radius: 50px !important;
  border-left: none !important;
  padding: 12px 20px !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  width: 100% !important;
  text-align: left !important;
}

a.pf-v5-c-nav__link:hover,
button.pf-v5-c-nav__link:hover {
  background-color: rgba(255,255,255,0.6) !important;
  color: #009cde !important;
  text-decoration: none !important;
}

/* Lien ACTIF — pill bleu */
a.pf-v5-c-nav__link.pf-m-current,
a.pf-v5-c-nav__link[aria-current="page"] {
  background-color: #009cde !important;
  color: #ffffff !important;
  border-radius: 50px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(0,156,222,0.3) !important;
  border-left: none !important;
}

/* =============================================
   NAVIGATION — groupe expandable (Sécurité)
   ============================================= */
.pf-v5-c-nav__item.pf-m-expandable > button.pf-v5-c-nav__link {
  background-color: #ffffff !important;
  border: 1.5px solid #b8d9f0 !important;
  border-radius: 14px !important;
  color: #1a2a3a !important;
  font-weight: 500 !important;
}

.pf-v5-c-nav__item.pf-m-expandable > button.pf-v5-c-nav__link:hover {
  border-color: #009cde !important;
}

.pf-v5-c-nav__item.pf-m-expandable.pf-m-expanded > button.pf-v5-c-nav__link {
  border-radius: 14px 14px 0 0 !important;
  border-bottom-color: #b8d9f0 !important;
}

/* Sous-menu */
.pf-v5-c-nav__subnav {
  background-color: #ffffff !important;
  border: 1.5px solid #b8d9f0 !important;
  border-top: none !important;
  border-radius: 0 0 14px 14px !important;
  padding: 4px 0 !important;
}

.pf-v5-c-nav__subnav .pf-v5-c-nav__list {
  background-color: transparent !important;
  padding: 0 !important;
}

.pf-v5-c-nav__subnav a.pf-v5-c-nav__link {
  border-radius: 0 !important;
  color: #5a7a9a !important;
  font-size: 14px !important;
  padding: 10px 28px !important;
  font-weight: 400 !important;
  border-left: 3px solid transparent !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

.pf-v5-c-nav__subnav a.pf-v5-c-nav__link:hover {
  background-color: #e0f4fd !important;
  color: #009cde !important;
  border-radius: 0 !important;
}

.pf-v5-c-nav__subnav a.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__subnav a.pf-v5-c-nav__link[aria-current="page"] {
  background-color: #e0f4fd !important;
  color: #009cde !important;
  border-left: 3px solid #009cde !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* Icône chevron */
.pf-v5-c-nav__toggle-icon {
  color: #5a7a9a !important;
}

/* =============================================
   TITRES DE PAGE (base — les pages peuvent surcharger)
   ============================================= */
.pf-v5-c-title,
h1, h2, h3 {
  font-family: "Reckless Neue", sans-serif !important;
  color: #1a2a3a !important;
}

.pf-v5-c-title.pf-m-2xl {
  font-size: 26px !important;
  font-weight: 600 !important;
  letter-spacing: -0.5px !important;
}

/* =============================================
   BOUTONS (base globale)
   ============================================= */
.pf-v5-c-button.pf-m-primary {
  background-color: #009cde !important;
  border-color: #009cde !important;
  border-radius: 50px !important;
  font-family: "Reckless Neue", sans-serif !important;
  font-weight: 600 !important;
  color: #fff !important;
}

.pf-v5-c-button.pf-m-primary:hover {
  background-color: #007ab8 !important;
  border-color: #007ab8 !important;
}

.pf-v5-c-button:not(.pf-m-primary) {
  border-radius: 50px !important;
  font-family: "Reckless Neue", sans-serif !important;
}

/* =============================================
   INPUTS
   ============================================= */
.pf-v5-c-form-control {
  border-radius: 10px !important;
  border-color: #b8d9f0 !important;
  background-color: #f7fbff !important;
  font-family: "Reckless Neue", sans-serif !important;
}

.pf-v5-c-form-control:focus-within {
  border-color: #009cde !important;
  box-shadow: 0 0 0 3px rgba(0,156,222,0.12) !important;
}

label,
.pf-v5-c-form__label-text {
  font-family: "Reckless Neue", sans-serif !important;
  color: #5a7a9a !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* =============================================
   MENU TOGGLE (dropdown utilisateur du header)
   — version consolidée : pilule blanche, ombre légère
   ============================================= */
.pf-v5-c-menu-toggle {
  background-color: #ffffff !important;
  border-radius: 50px !important;
  border: none !important;
  outline: none !important;
  box-shadow: 0 2px 8px rgba(0,156,222,0.15) !important;
  color: #1a2a3a !important;
  padding: 8px 16px !important;
  font-family: "Reckless Neue", sans-serif !important;
  font-weight: 500 !important;
}

.pf-v5-c-menu-toggle:before,
.pf-v5-c-menu-toggle:after {
  pointer-events: none;
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  border: 0 solid;
}

.pf-v5-c-menu-toggle:hover,
.pf-v5-c-menu-toggle:focus,
.pf-v5-c-menu-toggle:active,
.pf-v5-c-menu-toggle[aria-expanded="true"] {
  background-color: #ffffff !important;
  border: none !important;
  outline: none !important;
  box-shadow: 0 2px 8px rgba(0,156,222,0.15) !important;
  color: #1a2a3a !important;
}

/* le header * met du #cee7fa partout : re-forcer le blanc du toggle */
header .pf-v5-c-menu-toggle,
header .pf-v5-c-menu-toggle * {
  background-color: #ffffff !important;
}

.pf-v5-c-menu-toggle__text {
  color: #1a2a3a !important;
  font-family: "Reckless Neue", sans-serif !important;
}

.pf-v5-c-menu-toggle .pf-v5-svg {
  color: #5a7a9a !important;
}

/* Dropdown utilisateur — arrondi, items bleus */
.pf-v5-c-menu {
  border-radius: 14px !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(0,156,222,0.15) !important;
  overflow: hidden !important;
}

.pf-v5-c-menu__item {
  padding-block-start: 0;
  padding-block-end: 0;
  padding-inline-start: 0;
  padding-inline-end: 0;
}

.pf-v5-c-menu__item:hover,
.pf-v5-c-menu__item:focus {
  background-color: #009cde !important;
  color: #ffffff !important;
  border-radius: 50px !important;
}

.pf-v5-c-menu__item-text {
  text-align: center !important;
  width: 100% !important;
}

/* Item Déconnexion bleu — override header * */
body header ul.pf-v5-c-menu__list li.pf-v5-c-menu__list-item button.pf-v5-c-menu__item,
body header ul.pf-v5-c-menu__list li.pf-v5-c-menu__list-item button.pf-v5-c-menu__item *,
body .pf-v5-c-menu ul.pf-v5-c-menu__list li.pf-v5-c-menu__list-item button.pf-v5-c-menu__item,
body .pf-v5-c-menu ul.pf-v5-c-menu__list li.pf-v5-c-menu__list-item button.pf-v5-c-menu__item * {
  background-color: #009cde !important;
  color: #ffffff !important;
}

body .pf-v5-c-menu,
body header .pf-v5-c-menu,
body .pf-v5-c-menu__list,
body header .pf-v5-c-menu__list,
body .pf-v5-c-menu__list-item,
body header .pf-v5-c-menu__list-item {
  background-color: #009cde !important;
}

/* =============================================
   PAGE INFOS PERSONNELLES — scopé via :has(jump-links)
   (les jump-links n'existent que sur cette page)
   ============================================= */
.pf-v5-c-jump-links {
  display: none !important;
}

.pf-v5-c-page__main-section:has(.pf-v5-c-jump-links) .pf-v5-l-grid__item.pf-m-4-col-on-md {
  display: none !important;
}

.pf-v5-c-page__main-section:has(.pf-v5-c-jump-links) .pf-v5-l-grid__item.pf-m-8-col-on-md {
  width: 100% !important;
  max-width: 100% !important;
}

/* =============================================
   RESPONSIVE — menu user visible sur mobile
   ============================================= */
@media (max-width: 1199px) {
  .pf-v5-c-masthead .pf-v5-c-toolbar__item,
  .pf-v5-c-masthead .pf-v5-c-toolbar__group,
  header .pf-v5-c-toolbar__item,
  header .pf-v5-c-toolbar__group {
    display: flex !important;
    visibility: visible !important;
  }

  .pf-v5-c-masthead .pf-v5-c-menu-toggle,
  header .pf-v5-c-menu-toggle {
    display: inline-flex !important;
    visibility: visible !important;
  }

  .pf-v5-c-masthead .pf-v5-u-display-none,
  .pf-v5-c-masthead [class*="pf-m-hidden"]:not([class*="pf-m-visible"]),
  header .pf-v5-u-display-none {
    display: flex !important;
  }
}