@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:wght@300;400;500&display=swap');

:root {
  --ex-blue:        #1a6fc4 !important;
  --ex-blue-dark:   #155da0 !important;
  --ex-blue-light:  #2589e8 !important;
  --ex-blue-pale:   #e8f2fc !important;
  --ex-text:        #1e293b !important;
  --ex-muted:       #64748b !important;
  --ex-border:      #e2e8f0 !important;
  --ex-border-focus:#2589e8 !important;
  --ex-surface:     #ffffff !important;
  --ex-input-bg:    #f8fafc !important;
  --ex-required:    #e53e3e !important;
  --ex-radius:      9px !important;
  --ex-radius-card: 16px !important;
}

/* ====== Base ====== */
/* html, body { height: 100% !important; } */

body.login-body{
  margin:0 !important;
  padding:0 !important;
  background:#f3f4f6 !important;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif !important;
  color:#0f172a !important;
}

/* On ne veut PAS le footer flottant du template */
.login-footer{ display:none !important; }

#containerlogin.login-shell{ min-height:100vh !important; }

/* ====== Bloc global ====== */
.login-form{ width:100% !important; }

.login-grid{
  min-height:100vh !important;
  display:grid !important;
  grid-template-columns: 1.25fr 0.95fr !important;
  gap:0 !important;

  max-width: 1280px !important;
  margin: 0 auto !important;
  box-sizing:border-box !important;

  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 22px 60px rgba(2,6,23,0.10) !important;
  border: 1px solid rgba(2,6,23,0.06) !important;
  overflow: hidden !important;
}

/* ====== Colonne gauche ====== */
.login-left{
  position:relative !important;
  overflow:hidden !important;
  background:#0f172a !important;
}

.login-hero-img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  transform: scale(1.02) !important;
}

.login-left-overlay{
  position:absolute !important;
  inset:0 !important;
  background: linear-gradient(135deg, rgba(2,6,23,0.62) 0%, rgba(2,6,23,0.20) 60%, rgba(2,6,23,0.12) 100%) !important;
  z-index:1 !important;
}

.login-hero-text{
  position:absolute !important;
  left:40px !important;
  bottom:38px !important;
  right:40px !important;
  z-index:2 !important;
  color:#fff !important;
}

.login-hero-title{
  font-size: 42px !important;
  font-weight: 900 !important;
  letter-spacing: -0.7px !important;
  line-height: 1.07 !important;
  margin: 0 0 12px 0 !important;
  text-shadow: 0 16px 35px rgba(0,0,0,0.35) !important;
}

.login-hero-sub{
  font-size: 15px !important;
  opacity: 0.92 !important;
  max-width: 560px !important;
  line-height: 1.55 !important;
}

/* ====== Colonne droite ====== */
.login-right{
  background: transparent !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  padding: 30px 0 !important; /* + d'air vertical */
}

.login-card{
  width:100% !important;
  max-width: 540px !important;
  padding: 34px 44px 26px 44px !important; /* + d'air */
  box-sizing:border-box !important;
  background: transparent !important;
}

/* Header logo */
.login-card-header{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  margin-bottom: 14px !important;
}

.login-brand{
  width: 220px !important;
  height:auto !important;
  display:block !important;
}

/* Titres */
.login-card-title{
  font-size: 32px !important;
  font-weight: 950 !important;
  letter-spacing: -0.4px !important;
  color:#0f172a !important;
  margin: 12px 0 8px 0 !important;
  line-height: 1.15 !important;
}

.login-card-subtitle{
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: rgba(15,23,42,0.60) !important;
  margin-bottom: 18px !important;
}

/* ====== Langues : drapeaux ====== */
.login-lang-flags{
  display:flex !important;
  gap: 10px !important;
  margin: 10px 0 22px 0 !important; /* + spacing */
  align-items:center !important;
}

.login-flag{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width: 40px !important;
  height: 30px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(2,6,23,0.10) !important;
  background: #ffffff !important;
  box-shadow: 0 10px 22px rgba(2,6,23,0.08) !important;
  transition: transform .12s ease, box-shadow .12s ease !important;
  text-decoration:none !important;
}

.login-flag:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 28px rgba(2,6,23,0.10) !important;
}

.login-flag img{
  width: 26px !important;
  height: 18px !important;
  border-radius: 5px !important;
  display:block !important;
}

/* ====== Champs ====== */
.login-fields{ margin-top: 6px !important; }

.login-field{
  margin-bottom: 18px !important; /* plus d'air */
}

.login-label{
  font-size: 13px !important;
  font-weight: 900 !important;
  color: rgba(15,23,42,0.78) !important;
  margin: 0 0 8px 0 !important;
}

.login-input,
.login-input.ui-inputfield,
.login-input input{
  width:100% !important;
  box-sizing:border-box !important;
}

.login-input.ui-inputfield{
  height: 48px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(2,6,23,0.12) !important;
  padding: 12px 14px !important;
  box-shadow: 0 10px 24px rgba(2,6,23,0.06) !important;
  outline:none !important;
  transition: box-shadow .12s ease, border-color .12s ease !important;
  font-size: 14px !important;
}

.login-input.ui-inputfield:focus{
  border-color: rgba(245,158,11,0.62) !important;
  box-shadow: 0 18px 40px rgba(245,158,11,0.18) !important;
}

/* Watermark PrimeFaces */
.ui-watermark{
  color: rgba(15,23,42,0.35) !important;
}

/* Password eye */
.login-password-wrap{ position:relative !important; }

.login-eye{
  position:absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  cursor:pointer !important;
  font-size: 14px !important;
  opacity: 0.55 !important;
  user-select:none !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
}

.login-eye:hover{
  opacity: 0.85 !important;
  background: rgba(2,6,23,0.05) !important;
}

/* ====== Bouton login ====== */
.login-actions{ margin-top: 14px !important; }

.login-btn,
.login-btn.ui-button{
  width:100% !important;
  height: 48px !important;
  border-radius: 14px !important;
  border: none !important;
  font-weight: 950 !important;
  letter-spacing: 0.2px !important;
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%) !important;
  box-shadow: 0 18px 35px rgba(245,158,11,0.22) !important;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease !important;
}

.login-btn.ui-button:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 22px 45px rgba(245,158,11,0.26) !important;
  filter: brightness(1.01) !important;
}

.login-btn.ui-button .ui-button-text{
  padding: 0 !important;
  display: inline-block !important;
}

.login-btn.ui-button .ui-button-icon-left{
  margin-left: 0 !important;
  left: 14px !important;
}

/* ====== Tools row (air + align) ====== */
.login-tools-row{
  display:flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding-top: 18px !important;
  margin-top: 18px !important;
  border-top: 1px solid rgba(2,6,23,0.06) !important;
}

.login-tool-link,
.login-tool-link.ui-button{
  flex: 1 1 160px !important;
  height: 42px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(2,6,23,0.10) !important;
  background:#ffffff !important;
  box-shadow: 0 10px 22px rgba(2,6,23,0.07) !important;
  font-weight: 850 !important;
  font-size: 12px !important;
  color: var(--ex-muted) !important;
}

.login-tool-link.ui-button .ui-button-text{
  padding: 0 8px 0 4px !important;
  white-space: nowrap !important;
}

.login-tool-link.ui-button .ui-button-icon-left {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}

/* ====== Contact box ====== */
.login-contact-box{
  margin-top: 18px !important;
  background: rgba(2,6,23,0.03) !important;
  border: 1px solid rgba(2,6,23,0.06) !important;
  border-radius: 12px !important;
  padding: 14px 14px !important;
}

.login-contact-line{
  display:flex !important;
  align-items:center !important;
  gap: 10px !important;
  color: rgba(15,23,42,0.78) !important;
  font-size: 12px !important;
  margin: 8px 0 !important;
  line-height: 1.4 !important;
}

.login-contact-ico{
  width: 18px !important;
  text-align:center !important;
  opacity: 0.70 !important;
}

.login-link{
  color: #2563eb !important;
  text-decoration: none !important;
  font-weight: 800 !important;
}

.login-link:hover{
  text-decoration: underline !important;
}

/* Footer */
.login-card-footer{
  text-align:center !important;
  padding: 16px 0 0 0 !important;
  margin-top: 14px !important;
  color: rgba(15,23,42,0.45) !important;
  font-size: 12px !important;
}

/* ====== Responsive ====== */
@media (max-width: 1100px){
  .login-grid{
    grid-template-columns: 1fr !important;
    padding: 16px !important;
    border-radius: 16px !important;
  }

  .login-left{ display:none !important; }

  .login-right{
    padding: 12px 0 !important;
  }

  .login-card{
    padding: 26px 22px 18px 22px !important;
  }

  .login-card-title{
    font-size: 28px !important;
  }
}

/* ====== Mobile / iPhone ====== */
@media (max-width: 600px){

  /* on �vite le �bloc centr� + grosse marge� */
  .login-grid{
    min-height: 100vh !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 0 !important;     /* plein �cran propre sur mobile */
    box-shadow: none !important;
    border: none !important;
  }

  .login-left{ display:none !important; }

  .login-right{
    padding: 0 !important;
    align-items: flex-start !important; /* �vite l�effet �tout tass� au milieu� */
  }

  .login-card{
    max-width: 100% !important;
    padding: 18px 16px 16px 16px !important;
  }

  /* Typo + logo adapt�s */
  .login-brand{ width: 170px !important; }
  .login-card-title{ font-size: 24px !important; }
  .login-card-subtitle{ font-size: 13px !important; margin-bottom: 14px !important; }

  /* champs + boutons un peu moins hauts pour �viter scroll inutile */
  .login-input.ui-inputfield{ height: 44px !important; border-radius: 12px !important; }
  .login-btn, .login-btn.ui-button{ height: 44px !important; border-radius: 12px !important; }

  /* outils : 1 colonne si �cran tr�s �troit */
  .login-tool-link, .login-tool-link.ui-button{
    flex: 1 1 100% !important;
  }
}

/* =========================================================
   LOST PASSWORD (page) - style moderne coh�rent login
   ========================================================= */
.lp-wrap{
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  box-sizing: border-box !important;
}

.lp-card{
  width: 100% !important;
  max-width: 560px !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid rgba(2,6,23,0.06) !important;
  box-shadow: 0 22px 60px rgba(2,6,23,0.10) !important;
  padding: 28px !important;
  box-sizing: border-box !important;
}

.lp-header{ margin-bottom: 18px !important; }

.lp-brand{
  width: 220px !important;
  height: auto !important;
  display: block !important;
  margin-bottom: 10px !important;
}

.lp-title{
  font-size: 26px !important;
  font-weight: 950 !important;
  letter-spacing: -0.35px !important;
  margin: 6px 0 6px 0 !important;
  color: #0f172a !important;
}

.lp-subtitle{
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: rgba(15,23,42,0.60) !important;
}

.lp-field{ margin-top: 12px !important; }

.lp-label{
  font-size: 13px !important;
  font-weight: 900 !important;
  color: rgba(15,23,42,0.78) !important;
  margin: 0 0 8px 0 !important;
}

.lp-input,
.lp-input.ui-inputfield{
  width: 100% !important;
  box-sizing: border-box !important;
}

.lp-input.ui-inputfield{
  height: 48px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(2,6,23,0.12) !important;
  padding: 12px 14px !important;
  box-shadow: 0 10px 24px rgba(2,6,23,0.06) !important;
  outline: none !important;
}

.lp-input.ui-inputfield:focus{
  border-color: rgba(245,158,11,0.62) !important;
  box-shadow: 0 18px 40px rgba(245,158,11,0.18) !important;
}

.lp-actions{
  display: flex !important;
  gap: 12px !important;
  margin-top: 18px !important;
  flex-wrap: wrap !important;
}

.lp-btn,
.lp-btn.ui-button{
  flex: 1 1 220px !important;
  height: 46px !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
  border: none !important;
}

.lp-btn-primary,
.lp-btn-primary.ui-button{
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%) !important;
  box-shadow: 0 18px 35px rgba(245,158,11,0.22) !important;
}

.lp-btn-secondary,
.lp-btn-secondary.ui-button{
  background: #ffffff !important;
  border: 1px solid rgba(2,6,23,0.12) !important;
  box-shadow: 0 10px 22px rgba(2,6,23,0.07) !important;
  color: var(--ex-muted) !important;
}

.lp-footer{
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(2,6,23,0.06) !important;
  text-align: center !important;
  color: rgba(15,23,42,0.45) !important;
  font-size: 12px !important;
}

/* Dialogs */
.lp-dialog .ui-dialog-content{
  padding: 18px 18px 16px 18px !important;
}

.lp-dialog-body{ display: grid !important; gap: 10px !important; }
.lp-dialog-row{ line-height: 1.45 !important; }

.lp-select{ width: 100% !important; }

.lp-dialog-actions{
  display: flex !important;
  gap: 12px !important;
  justify-content: flex-end !important;
  margin-top: 14px !important;
  flex-wrap: wrap !important;
}

/* Mobile */
@media (max-width: 600px){
  .lp-wrap{ padding: 14px !important; }
  .lp-card{
    border-radius: 14px !important;
    padding: 20px 16px !important;
    box-shadow: none !important;
  }
  .lp-brand{ width: 180px !important; }
  .lp-title{ font-size: 22px !important; }
}

.rapportpanel {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.export-card {
  width: 100% !important;
  max-width: 740px !important;
  margin: 32px auto 80px !important;
  background: var(--ex-surface) !important;
  border: 1px solid var(--ex-border) !important;
  border-radius: var(--ex-radius-card) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
  animation: ex-slideUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both !important;
  font-family: 'DM Sans', sans-serif !important;
}

@keyframes ex-slideUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Top colour stripe ──────────────────────────────────────── */
.export-card__stripe {
  height: 4px !important;
  background: linear-gradient(90deg, var(--ex-blue), #63b3ed, var(--ex-blue-light)) !important;
}

/* ── Header ─────────────────────────────────────────────────── */
.export-card__header {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 22px 30px 20px !important;
  border-bottom: 1px solid var(--ex-border) !important;
}

.export-card__icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background: var(--ex-blue-pale) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--ex-blue) !important;
  flex-shrink: 0 !important;
}

.export-card__titles {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.export-card__title {
  font-family: 'Syne', sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--ex-text) !important;
  line-height: 1 !important;
}

.export-card__subtitle {
  font-size: 12px !important;
  color: var(--ex-muted) !important;
}

/* ── Body ───────────────────────────────────────────────────── */
.export-card__body {
  padding: 24px 30px 26px !important;
}

/* ── Section labels ─────────────────────────────────────────── */
.export-section-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ex-muted) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}

.export-section-label::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: var(--ex-border) !important;
}

/* ── 2-column grid for dates ────────────────────────────────── */
.export-grid-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}

/* ── Field ──────────────────────────────────────────────────── */
.export-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 14px !important;
}

.export-field:last-child {
  margin-bottom: 0 !important;
}

/* ── Labels ─────────────────────────────────────────────────── */
.export-label {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  display: block !important;
  text-align: left;
}

/* Red star for required fields — keep existing .starrequired logic */
.export-label--required::before,
label.starrequired.export-label::before {
  content: 'â—� ' !important;
  color: var(--ex-required) !important;
  font-size: 8px !important;
  vertical-align: middle !important;
  margin-right: 2px !important;
}

/* Hide the original star character if present */
label.starrequired.export-label .ui-outputlabel-rfi {
  display: none !important;
}

/* ── Input wrapper (positions the leading icon) ─────────────── */
.export-input-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.export-input-ico {
  position: absolute !important;
  left: 11px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #94a3b8 !important;
  pointer-events: none !important;
  display: flex !important;
  align-items: center !important;
  z-index: 2 !important;
}

/* ── Base input / calendar / select ────────────────────────── */
.export-input,
.export-input input,
.export-input .ui-inputtext,
.export-input-wrap > .ui-inputtext,
.export-input-wrap > input,
.export-input-wrap .ui-calendar input,
.export-select .ui-selectonemenu {
  width: 100% !important;
  background: var(--ex-input-bg) !important;
  border: 1px solid #d1d9e6 !important;
  border-radius: var(--ex-radius) !important;
  padding: 9px 13px 9px 34px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13.5px !important;
  color: var(--ex-text) !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s !important;
  -webkit-appearance: none !important;
}

.export-input-wrap input::placeholder,
.export-input-wrap .ui-inputtext::placeholder {
  color: #b0bac8 !important;
  font-size: 13px !important;
}

.export-input-wrap input:focus,
.export-input-wrap .ui-inputtext:focus,
.export-input-wrap .ui-calendar input:focus {
  border-color: var(--ex-border-focus) !important;
  box-shadow: 0 0 0 3px rgba(37, 137, 232, 0.12) !important;
  background: #ffffff !important;
}

.export-input-wrap input:hover:not(:focus),
.export-input-wrap .ui-inputtext:hover:not(:focus) {
  border-color: #a8b8cc !important;
}

/* ── PrimeFaces selectOneMenu override ─────────────────────── */
.export-select .ui-selectonemenu {
  padding-left: 34px !important;
  padding-right: 32px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
}

.export-select .ui-selectonemenu .ui-selectonemenu-trigger {
  display: none !important; /* hide PF default trigger arrow */
}

/* ── AutoComplete override ──────────────────────────────────── */
.export-autocomplete,
.export-input-wrap .ui-autocomplete {
  width: 100% !important;
}

.export-input-wrap .ui-autocomplete-multiple-container {
  width: 93% !important;
  min-height: 38px !important;
  background: var(--ex-input-bg) !important;
  border: 1px solid #d1d9e6 !important;
  border-radius: var(--ex-radius) !important;
  padding: 5px 10px 5px 34px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13.5px !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
  list-style: none !important;
}

.export-input-wrap .ui-autocomplete-multiple-container:focus-within {
  border-color: var(--ex-border-focus) !important;
  box-shadow: 0 0 0 3px rgba(37, 137, 232, 0.12) !important;
  background: #ffffff !important;
}

.export-input-wrap .ui-autocomplete-input-token input {
  border: none !important;
  background: transparent !important;
  padding: 2px 4px !important;
  font-size: 13px !important;
  color: var(--ex-text) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Tags inside autocomplete */
.export-input-wrap .ui-autocomplete-token {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: var(--ex-blue-pale) !important;
  color: var(--ex-blue) !important;
  border: 1px solid rgba(26, 111, 196, 0.2) !important;
  border-radius: 5px !important;
  padding: 2px 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.export-input-wrap .ui-autocomplete-token-icon {
  cursor: pointer !important;
  opacity: 0.55 !important;
  transition: opacity 0.15s !important;
}
.export-input-wrap .ui-autocomplete-token-icon:hover { opacity: 1; }

/* Dropdown panel */
.ui-autocomplete-panel .ui-autocomplete-item {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13.5px !important;
  padding: 8px 14px !important;
  color: var(--ex-text) !important;
}
.ui-autocomplete-panel .ui-autocomplete-item:hover,
.ui-autocomplete-panel .ui-state-highlight {
  background: var(--ex-blue-pale) !important;
  color: var(--ex-blue) !important;
}

/* ── Calendar trigger button ────────────────────────────────── */
.export-input-wrap .ui-datepicker-trigger {
  display: none !important; /* icon is our SVG, hide PF default */
}

/* ── Separator ──────────────────────────────────────────────── */
.export-separator {
  height: 1px !important;
  background: var(--ex-border) !important;
  margin: 20px 0 !important;
}

/* ── Footer ─────────────────────────────────────────────────── */
.export-card__footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 30px !important;
  border-top: 1px solid var(--ex-border) !important;
  background: #f8fafc !important;
}

.export-hint {
  font-size: 11.5px !important;
  color: #94a3b8 !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.export-hint__dot {
  color: var(--ex-required) !important;
  font-size: 8px !important;
}

/* ── Submit button ──────────────────────────────────────────── */
.export-submit-wrap { display: inline-flex; }

.export-btn-submit {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, var(--ex-blue-light), var(--ex-blue)) !important;
  color: #ffffff !important;
  font-family: 'Syne', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  border: none !important;
  border-radius: var(--ex-radius) !important;
  padding: 10px 22px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: 0 2px 10px rgba(26, 111, 196, 0.25) !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
}

.export-btn-submit:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 18px rgba(26, 111, 196, 0.35) !important;
  color: #fff !important;
  text-decoration: none !important;
}

.export-btn-submit:active {
  transform: translateY(0) !important;
}

.export-btn-submit svg {
  flex-shrink: 0 !important;
}

/* ── Cancel button ──────────────────────────────────────────── */
.export-btn-cancel.ui-button {
  background: #f1f5f9 !important;
  border: 1px solid var(--ex-border) !important;
  color: var(--ex-muted) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  border-radius: var(--ex-radius) !important;
  padding: 8px 18px !important;
  cursor: pointer !important;
  transition: background 0.15s, border-color 0.15s !important;
}
.export-btn-cancel.ui-button:hover {
  background: #e2e8f0 !important;
  border-color: #c8d4e0 !important;
}

.export-dlg-msg {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  color: var(--ex-text) !important;
}

.export-dlg-btn-wrap {
  display: flex !important;
  justify-content: center !important;
  margin-top: 10px !important;
}

/* ── Dialogs ────────────────────────────────────────────────── */
.export-error-dlg .ui-dialog-titlebar {
  background: var(--ex-blue) !important;
  color: #fff !important;
  font-family: 'Syne', sans-serif !important;
  border-radius: 12px 12px 0 0 !important;
}

.export-error-dlg .ui-dialog-content {
  border-radius: 0 0 12px 12px !important;
}

/* ── Watermarks ─────────────────────────────────────────────── */
.export-input-wrap .ui-watermark {
  color: #b0bac8 !important;
  font-size: 13px !important;
  padding-left: 34px !important;
}

/* =========================================================
   STICKY FOOTER — Layout global
   ========================================================= */

body {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* #container {
  flex: 1 0 auto !important;
} */

/* =========================================================
   FOOTER — Générique
   ========================================================= */

.footer {
  flex-shrink: 0 !important;
  position: relative !important;
  bottom: unset !important;
  height: auto !important;
  width: 100% !important;
  padding: 14px 28px !important;
  text-align: center !important;
  border-top: 1px solid var(--ex-border) !important;
  background: #2589e8 !important;
  margin-top: 24px !important;
  box-sizing: border-box !important;
}

.text_footer {
  font-size: 11.5px !important;
  font-weight: 400 !important;
  font-family: 'DM Sans', sans-serif !important;
  margin-right: 0 !important;
}

/* =========================================================
   HOME DASHBOARD — Page d'accueil
   ========================================================= */

.home-wrap {
  padding: 32px 28px 60px !important;
  max-width: 1140px !important;
  margin: 0 auto !important;
  font-family: 'DM Sans', sans-serif !important;
  box-sizing: border-box !important;
}

/* ── Hero banner ─────────────────────────────────────────── */
.home-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1a3a5c 55%, #1a6fc4 100%) !important;
  border-radius: var(--ex-radius-card) !important;
  padding: 32px 40px !important;
  margin-bottom: 36px !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  animation: ex-slideUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both !important;
  box-shadow: 0 8px 32px rgba(15,23,42,0.18) !important;
  position: relative !important;
  overflow: hidden !important;
}

.home-hero::after {
  content: '' !important;
  position: absolute !important;
  right: -40px !important;
  top: -40px !important;
  width: 220px !important;
  height: 220px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.04) !important;
  pointer-events: none !important;
}

.home-hero__left { flex: 1 !important; }

.home-hero__eyebrow {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  opacity: 0.60 !important;
  margin: 0 0 8px 0 !important;
  display: block !important;
}

.home-hero__greeting {
  font-size: 30px !important;
  font-weight: 800 !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.15 !important;
  display: block !important;
}

.home-hero__sub {
  font-size: 14px !important;
  opacity: 0.70 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  display: block !important;
}

.home-hero__right {
  text-align: right !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.home-hero__date {
  font-size: 13px !important;
  opacity: 0.55 !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.home-hero__role {
  display: inline-block !important;
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 20px !important;
  padding: 3px 12px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
}

/* ── Section label ───────────────────────────────────────── */
.home-section-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ex-muted) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}

.home-section-label::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: var(--ex-border) !important;
}

/* ── Tiles grid ──────────────────────────────────────────── */
.home-tiles {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 32px !important;
}

/* ── Info strip ──────────────────────────────────────────── */
.home-info-strip {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 32px !important;
}

.home-info-card {
  background: #ffffff !important;
  border: 1px solid var(--ex-border) !important;
  border-radius: var(--ex-radius-card) !important;
  padding: 16px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  box-shadow: 0 1px 6px rgba(2,6,23,0.04) !important;
}

.home-info-card__icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background: var(--ex-blue-pale) !important;
  color: var(--ex-blue) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.home-info-card__icon--green  { background: #d1fae5 !important; color: #047857 !important; }
.home-info-card__icon--purple { background: #ede9fe !important; color: #6d28d9 !important; }
.home-info-card__icon--orange { background: #fff7ed !important; color: #c2410c !important; }

.home-info-card__title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  margin-bottom: 2px !important;
}

.home-info-card__sub {
  font-size: 11px !important;
  color: var(--ex-muted) !important;
}

@media (max-width: 900px) {
  .home-info-strip { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 500px) {
  .home-info-strip { grid-template-columns: 1fr !important; }
}

/* ── Single tile ─────────────────────────────────────────── */
.home-tile {
  background: #ffffff !important;
  border: 1px solid var(--ex-border) !important;
  border-radius: var(--ex-radius-card) !important;
  padding: 22px 20px 18px !important;
  text-decoration: none !important;
  color: var(--ex-text) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
  box-shadow: 0 2px 10px rgba(2,6,23,0.05) !important;
  cursor: pointer !important;
  animation: ex-slideUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

.home-tile:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(2,6,23,0.10) !important;
  border-color: var(--ex-blue-light) !important;
  text-decoration: none !important;
  color: var(--ex-text) !important;
}

/* ── Tile icon ───────────────────────────────────────────── */
.home-tile__icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: var(--ex-blue-pale) !important;
  color: var(--ex-blue) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 4px !important;
  flex-shrink: 0 !important;
}

.home-tile--analyse .home-tile__icon  { background: #dbeafe !important; color: #1d4ed8 !important; }
.home-tile--stat    .home-tile__icon  { background: #d1fae5 !important; color: #047857 !important; }
.home-tile--br      .home-tile__icon  { background: #ede9fe !important; color: #6d28d9 !important; }
.home-tile--bills   .home-tile__icon  { background: #fff7ed !important; color: #c2410c !important; }
.home-tile--releves .home-tile__icon  { background: #fef9c3 !important; color: #a16207 !important; }
.home-tile--sav     .home-tile__icon  { background: #fce7f3 !important; color: #be185d !important; }
.home-tile--prive   .home-tile__icon  { background: #f0fdf4 !important; color: #166534 !important; }
.home-tile--admin   .home-tile__icon  { background: #f1f5f9 !important; color: #475569 !important; }
.home-tile--t9      .home-tile__icon  { background: #fef3c7 !important; color: #b45309 !important; }

/* ── Tile text ───────────────────────────────────────────── */
.home-tile__name {
  font-family: 'Syne', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  color: #0f172a !important;
}

.home-tile__desc {
  font-size: 12px !important;
  color: var(--ex-muted) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  flex: 1 !important;
}

.home-tile__arrow {
  margin-top: 10px !important;
  color: var(--ex-blue) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  opacity: 0 !important;
  transition: opacity 0.15s !important;
}

.home-tile:hover .home-tile__arrow { opacity: 1 !important; }

/* ── Home responsive ─────────────────────────────────────── */
@media (max-width: 768px) {
  .home-wrap { padding: 20px 14px 40px !important; }
  .home-hero { padding: 22px 22px !important; flex-direction: column !important; align-items: flex-start !important; }
  .home-hero__right { text-align: left !important; }
  .home-hero__greeting { font-size: 24px !important; }
  .home-tiles { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
}

@media (max-width: 420px) {
  .home-tiles { grid-template-columns: 1fr !important; }
}

/* ── Export card responsive ──────────────────────────────── */
@media (max-width: 540px) {
  .export-card {
    margin: 16px 10px 60px !important;
  }

  .export-card__header,
  .export-card__body,
  .export-card__footer {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .export-grid-2 {
    grid-template-columns: 1fr !important;
  }

  .export-card__footer {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  .export-btn-submit {
    justify-content: center !important;
  }
}