:root {
    --bulma-primary: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1);
    --toolkit-select-active-bg: var(--bulma-primary);
    --toolkit-select-selected-bg: hsla(var(--bulma-primary-h), var(--bulma-primary-s), 92%, 1);
    --toolkit-select-selected-color: var(--bulma-primary);

    --bulma-link-h: var(--bulma-primary-h);
    --bulma-link-s: var(--bulma-primary-s);
    --bulma-link-l: var(--bulma-primary-l);
}

html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

.page-content {
  flex: 1 0 auto;      
}

h1.title,
h4.title {
  color: var(--title);
  font-weight: var(--title-font-weight);
}
@media screen and (max-width:768px) {
  h1.title,
  h4.title {
    font-size: 1.4rem !important;
  }
}

h5.title,
h5.subtitle {
  color: var(--subtitle);
  font-weight: var(--subtitle-font-weight);
}

.subtitle {
  color: var(--subtitle) !important;
}

.button.is-primary:not(.is-outlined){
  color: #FFF;
}

.button.is-primary.is-loading {
    color: transparent !important;
}

.button.is-primary.is-loading::after {
    border-bottom-color: #FFF;
    border-left-color: #FFF;
}

.button.is-link{
    background-color: var(--bulma-secondary-color) !important;
    color: #2e333d ;
}
.asterisk{
    color: red;
}
.select:not(.is-multiple){
    height: 100% !important;
}
.has-background-primary{
    background-color: var(--bulma-primary) !important;
}
.navbar-item.logo-item{
  padding: 0rem 0rem !important;
}

.level-title {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 1.5rem !important;
}

.page-title-return .level-item {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 1rem;
}

.return-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    color: var(--bulma-primary, #12006C) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    /* Neutralise les styles natifs quand le bouton retour est un <button> */
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}
.card.return-button{
  margin-bottom: 0 !important;
}

/* Les items de navbar rendus en <button> (accessibilité) doivent rester visuellement identiques aux <a> */
button.navbar-item {
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.section + .section {
    padding-top: 0;
}

.field.warning {
    background-color: var(--bulma-warning-light);
    font-size: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--bulma-radius-large);
}

.field.warning .field-bloc-title {
  font-size: 1rem;
  margin-bottom: 1rem;
}

.message-header{
  color : white;
}

.form-row {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.form-row + .form-row,
.form-row + .field,
.field + .form-row {
    margin-top: 1rem;
}

.form-row > .form-col {
    flex: 1;
    min-width: 0;
}
/* Désactive et masque complètement l'affichage mobile sur les écrans desktop */
@media screen and (min-width: 1024px) {
    /* On cible uniquement la navbar mobile spécifique du LAYOUT1 ou les éléments purement mobiles */
    .is-hidden-desktop,
    footer.navbar.is-fixed-bottom, 
    .navbar-spacer-layout1-mobile, 
    .navbar-menu-mobile {
        display: none !important;
    }
}

/* Désactive et masque complètement l'affichage desktop sur les écrans mobiles */
@media screen and (max-width: 1023px) {
    .is-hidden-touch,
    aside.menu {
        display: none !important;
    }
}

.is-x-large {
    height: 1.75em;
    width: 1.75em;
}


@media screen and (min-width: 1024px) {
    .layout-1-content {
        margin-left: 20rem;
        width: calc(100% - 20rem);
    }
}

@media screen and (max-width: 1023px) {
    .layout-1-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    .form-row {
        flex-direction: column;
        gap: 1rem;
    }
}

@media screen and (min-width: 1024px) {
    .is-hidden-desktop,
    footer.navbar.is-fixed-bottom, 
    .navbar-spacer-layout1-mobile, 
    .navbar-menu-mobile {
        display: none !important;
    }
}

@media screen and (max-width: 1023px) {
    .is-hidden-touch,
    aside.menu {
        display: none !important;
    }
    .section.px-0-mobile{
        padding : 1rem !important;
    }
}

/* --- MENU MOBILE FULLSCREEN (LAYOUT 1) --- */

/* Quand la classe is-active est ajoutée par le JS */
.navbar-menu-fullscreen.is-active {
    display: flex !important;
}

/* En-tête du menu mobile plein écran (Logo + Bouton Fermer si besoin) */
.navbar-menu-fullscreen .navbar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f0f0f0;
}

.navbar-menu-fullscreen .navbar-header img {
    max-height: 2.5rem;
    width: auto;
}

/* Liens du menu mobile */
.navbar-menu-fullscreen .navbar-start {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.navbar-menu-fullscreen .navbar-item:hover,
.navbar-menu-fullscreen .navbar-item.is-active {
    background-color: var(--bulma-background, #f5f5f5);
    color: var(--bulma-primary, #12006C);
}

.navbar-menu-fullscreen .navbar-end {
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid #ededed;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ==========================================
   LAYOUT 2 DESKTOP ONLY (>= 1024px)
   ========================================== */
@media screen and (min-width: 1024px) {
    /* 1. Structure globale du Header */
    nav.navbar.is-hidden-touch {
        display: flex !important;
        align-items: stretch;
        justify-content: space-between;
        height: 3.5rem;
    }

    nav.navbar.is-hidden-touch .navbar-menu {
        display: flex !important;
        flex: 1;
        justify-content: center;
        align-items: stretch;
        box-shadow: none !important;
        background: transparent !important;
        padding: 0;
    }

    nav.navbar.is-hidden-touch .navbar-start {
        display: flex !important;
        align-items: stretch;
        margin: 0 auto !important;
    }

    nav.navbar.is-hidden-touch .navbar-end {
        display: flex !important;
        align-items: stretch;
        margin-left: 0 !important;
    }

    /* 2. Boutons de navigation principaux (Pleine hauteur) */
    nav.navbar.is-hidden-touch .navbar-start .navbar-item {
        display: flex !important;
        align-items: center;
        height: 100%;
        padding: 0 1.25rem;
    }

    /* Element actif principal (Bloc rouge) */
    nav.navbar.is-hidden-touch .navbar-start .navbar-item.is-active {
        background-color: var(--bulma-primary, #e50914) !important;
        color: #ffffff !important;
    }

    nav.navbar.is-hidden-touch .navbar-start .navbar-item.is-active .icon,
    nav.navbar.is-hidden-touch .navbar-start .navbar-item.is-active span {
        color: #ffffff !important;
    }

    /* 3. Gestion du Menu Déroulant "Plus" */
    nav.navbar.is-hidden-touch .navbar-start .navbar-item.has-dropdown {
        background-color: transparent !important;
    }

    nav.navbar.is-hidden-touch .navbar-dropdown .navbar-item {
        height: auto !important;
        padding: 0.65rem 1rem !important;
        color: #2e333d !important;
    }

    /* Liens au survol ou actifs DANS le menu déroulant */
    nav.navbar.is-hidden-touch .navbar-dropdown .navbar-item:hover,
    nav.navbar.is-hidden-touch .navbar-dropdown .navbar-item.is-active {
        background-color: var(--bulma-background, #f5f5f5) !important;
        color: var(--bulma-primary, #e50914) !important;
    }

    nav.navbar.is-hidden-touch .navbar-dropdown .navbar-item.is-active .icon,
    nav.navbar.is-hidden-touch .navbar-dropdown .navbar-item.is-active span {
        color: var(--bulma-primary, #e50914) !important;
    }
}

/* ==========================================
   LAYOUT 1 MOBILE : BARRE FIXE DU BAS & MENU FULLSCREEN
   ========================================== */

/* 1. Barre fixe du bas (Footer Mobile) */
footer.navbar.is-fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    z-index: 40;
}

.navbar-menu-fullscreen {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* Dynamic Viewport Height pour mobile moderne */
    background-color: #ffffff !important; /* Opacité 100% absolue */
    z-index: 99999 !important; /* Repasse AU-DESSUS de tout le reste */
    padding: 1.5rem;
    flex-direction: column;
    overflow-y: auto;
    box-sizing: border-box;
}

.navbar-menu-fullscreen .navbar-item {
    display: flex !important;
    align-items: center !important;
    padding: 0.85rem 1rem;
    border-radius: var(--bulma-radius-large, 8px);
    color: #2e333d;
    font-weight: 500;
}

.navbar-menu-fullscreen .navbar-item .icon {
    width: 2rem !important;
    min-width: 2rem !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Alignement pleine hauteur et centrage des éléments du footer mobile */
footer.navbar.is-fixed-bottom .navbar-brand {
  align-items: stretch !important;
  height: 100% !important;
}

footer.navbar.is-fixed-bottom .navbar-item {
  height: 100% !important;
  max-width: 25% !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  justify-content: center !important;
}




.breadcrumb li a {
    color: #6E6E6E ;
}
.has-text-grey {
    color: #575757 !important;
}

.subscriptions-content .columns .column .box .has-text-info{
    color: #3e8ed0 !important;
}