html {
  font-size: 0.9rem;
}

[v-cloak] {
  display: none;
}

.initials-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #8c1c40;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}

.notification-bell {
  position: relative;
  font-size: 1.2rem;
}

.notification-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  background-color: #e74c3c;
  color: white;
  border-radius: 50%;
  min-width: 18px;
  height: 18px;
  font-size: 0.65rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}

.notification-dropdown-menu {
  width: 360px;
  max-height: 400px;
  overflow-y: auto;
}

.notification-item {
  white-space: normal !important;
  border-left: 3px solid transparent;
}

.notification-unread {
  background-color: #f5f0f2;
  border-left-color: #8c1c40;
}

.no-border {
  border: none;
  box-shadow: none;
}

.has-right-border {
  border-right: 1px solid #ccc; /* ou une autre couleur selon ton thème */
}

@media (min-width: 768px) {
  .box-lg {
    width: 90%;
    max-width: 1200px;
  }
}

.input-wide {
  width: 100%;
}

.select.is-narrow select {
  max-width: 80px;
}

/* Changer la couleur du placeholder */
.ql-editor.ql-blank::before {
  color: #c0c0c0; /* Gris plus clair */
  font-style: normal;
}

.logo {
  max-height: 130px; /* Fixe la hauteur maximale */
  width: auto; /* Assure que l'image se réduit proportionnellement */
}

.logoAsso {
  max-height: 110px; /* Fixe la hauteur maximale */
  width: auto; /* Assure que l'image se réduit proportionnellement */
}

.section {
  page-break-inside: avoid;
}
h2 {
  page-break-after: avoid;
}

/* Gestion des coupure defs pages avec IronPdf */
.no-break {
  page-break-inside: avoid;
  break-inside: avoid; /* Pour compatibilité avec d'autres moteurs */
}

.navbar {
  /* La navbar elle-même garde sa hauteur naturelle (~2.75rem) pour que les
     menus déroulants restent positionnés juste sous leur déclencheur.
     Le padding-bottom réserve uniquement l'espace nécessaire au logo
     (positionné en absolu) afin que le contenu de la page ne touche pas
     le logo. Sur desktop : 105px (logo) - ~44px (navbar) ≈ 61px. */
  padding-bottom: 61px;
}

.navbar-brand {
  position: relative;
}

.navbar-item-logo {
  background: url(/images/fmoq_rouge_gris_4l.png) no-repeat center center;
  background-size: contain;
  width: 115px;
  height: 115px;
  position: absolute;
  left: 1.25rem;
  top: 0;
  z-index: 1;
  pointer-events: auto;
}

.navbar-item-logo + .navbar-item {
  margin-left: 115px;
}

/* Fix pour les boutons outlined désactivés */
.button.is-fmoq.is-outlined:disabled,
.button.is-fmoq.is-outlined[disabled] {
  background-color: transparent;
  border-color: #dbdbdb;
  color: #7a7a7a;
  opacity: 0.5;
}

/* Jusqu'à tablette (Bulma définit tablette à max-width: 1023px) */
@media screen and (max-width: 1023px) {
  .navbar {
    padding-bottom: 33px; /* 77px logo - ~44px navbar */
  }
  .navbar-item-logo {
    width: 80px;
    height: 80px;
    left: 0.5rem;
  }
  .navbar-item-logo + .navbar-item {
    margin-left: 90px;
  }
}

/* Bordure couleur FMOQ pour les tuiles */
.has-border-fmoq {
    border: 1px solid #8c1c40 !important;
    transition: box-shadow 0.2s ease-in-out;
}

.has-border-fmoq:hover {
    box-shadow: 0 4px 12px rgba(140, 28, 64, 0.3);
}

/* ─── Alignement PrimeVue (Aura) sur le thème Bulma fmoq ─────────────────── */
/* Bulma fmoq utilise un radius uniforme de 0.25rem ; on aligne les tokens
   de design Aura pour que tous les composants PrimeVue (AutoComplete, Dialog,
   DataTable, Select, DatePicker, InputNumber, Toast, Menu, Button…) suivent
   le même style. */
:root {
    --p-border-radius-xs: 0.125rem;
    --p-border-radius-sm: 0.25rem;
    --p-border-radius-md: 0.25rem;
    --p-border-radius-lg: 0.25rem;
    --p-border-radius-xl: 0.25rem;

    /* Aura définit pour les overlays/dialogues des tokens dédiés qui ne
       descendent PAS de --p-border-radius-* (ex. --p-dialog-border-radius
       vaut ~1rem). On les force à 0.25rem pour être cohérent avec Bulma. */
    --p-dialog-border-radius: 0.25rem;
    --p-overlay-modal-border-radius: 0.25rem;
    --p-overlay-popover-border-radius: 0.25rem;
    --p-overlay-select-border-radius: 0.25rem;
    --p-popover-border-radius: 0.25rem;
    --p-confirmdialog-border-radius: 0.25rem;
    --p-drawer-border-radius: 0.25rem;

    /* Police : on force PrimeVue à utiliser le system-font-stack de Bulma
       au lieu d'« Inter var » (police par défaut d'Aura). */
    --p-font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto",
        "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
        "Helvetica Neue", "Helvetica", "Arial", sans-serif;

    /* Focus style Bulma : bordure bleue + halo 0.125em (~2px) à 25% d'opacité.
       On reprend la couleur "link" Bulma (#485fc7). */
    --p-focus-ring-width: 0.125em;
    --p-focus-ring-style: solid;
    --p-focus-ring-color: rgba(72, 95, 199, 0.25);
    --p-focus-ring-offset: 0;
    --p-focus-ring-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25);

    /* Bordure des champs de formulaire au focus (remplace le vert Aura) */
    --p-form-field-focus-border-color: #485fc7;
    --p-inputtext-focus-border-color: #485fc7;
    --p-select-focus-border-color: #485fc7;
    --p-autocomplete-focus-border-color: #485fc7;
    --p-datepicker-focus-border-color: #485fc7;
    --p-inputnumber-focus-border-color: #485fc7;
    --p-textarea-focus-border-color: #485fc7;
}

/* Filets de sécurité pour les composants qui utilisent encore une valeur dure */
.p-autocomplete,
.p-autocomplete-input,
.p-autocomplete-dropdown,
.p-inputtext,
.p-select,
.p-select-label,
.p-datepicker-input,
.p-inputnumber-input,
.p-button,
.p-dialog,
.p-overlaypanel,
.p-menu,
.p-toast-message,
.p-datatable .p-datatable-header,
.p-datatable .p-datatable-footer,
.p-tag,
.p-chip {
    border-radius: 0.25rem;
}

/* Aura applique parfois font-family directement sur les overlays/panels. */
.p-component,
.p-component * {
    font-family: var(--p-font-family);
}

/* L'input Bulma (.input) que l'on injecte via `inputClass="input"` doit
   conserver sa hauteur native ; on s'assure juste que la coquille du
   AutoComplete prenne la même radius que le champ. */
.p-autocomplete .p-autocomplete-input.input {
    border-radius: 0.25rem;
}

/* Halo bleu Bulma au focus (override du vert Aura) sur tous les champs PrimeVue.
   Utilise :focus-visible quand disponible, fallback sur :focus. */
.p-inputtext:focus,
.p-inputtext:focus-visible,
.p-autocomplete-input:focus,
.p-autocomplete-input:focus-visible,
.p-select:focus,
.p-select:focus-visible,
.p-select.p-focus,
.p-datepicker-input:focus,
.p-datepicker-input:focus-visible,
.p-inputnumber-input:focus,
.p-inputnumber-input:focus-visible,
.p-togglebutton:focus,
.p-togglebutton:focus-visible,
.p-toggleswitch:focus-visible .p-toggleswitch-slider,
.p-checkbox:focus-visible .p-checkbox-box,
.p-radiobutton:focus-visible .p-radiobutton-box {
    border-color: #485fc7 !important;
    box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25) !important;
    outline: none;
}

[v-cloak] {
    display: none;
}