/* Police Onest comme sur www.nemia.fr */
@font-face {
  font-family: 'Onest';
  src: url('./Police-Onest-Regular.woff2') format('woff2'),
    url('./Police-Onest-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* Appliquer la police partout */
body,
html,
div,
p,
a,
h1,
h2,
h3,
h4,
h5,
h6,
input,
textarea,
select,
button {
  font-family: 'Onest', Arial, sans-serif !important;
}

body {
  /*position: absolute;*/
  border-radius: inherit;
  background-image: url('./nemia-background-dots.svg');
  /* URL de ton SVG */
  background-repeat: repeat;
  /*background-position: left top;*/
  border: 0px;
  background-size: 15.5px;
}

/* Bas de page */
footer .footer-bottom,
footer .footer-bottom p {
  background-color: #ffffff;
  font-size: 14px;
  color: #222222;
  text-align: center;

}

/* ==============================
   NAVBAR
   Fond blanc, texte noir, hover vert clair ...
   ============================== */

.navbar-toggle {
  background-color: #86c2af;
  float: right !important;
  margin-right: 10px;
}

/* Espacer les liens dans la navbar */
.navbar-nav>li>a {
  padding-left: 20px;
  padding-right: 20px;
}

/* Enlever les barres verticales présentes par défaut dans le navbar*/
.navbar .divider-vertical {
  display: none !important;
}

/* Ajuster la taille des icônes Lucide dans la navbar */
.navbar .lucide {
  width: 20px;
  /* largeur */
  height: 20px;
  /* hauteur */
  stroke-width: 2;
  /* épaisseur du trait (optionnel, défaut = 2) */
  vertical-align: middle;
  /* bien aligné avec le texte */
  margin-right: 4px;
  /* petit espace avant le texte */
}

/* Fond du bandeau en blanc */
.navbar-static-top.navbar-inverse {
  background-color: #ffffff;
  border: none !important;
  box-shadow: none !important;
}

.navbar-static-top.navbar .menu-bar>.navbar-nav>li>a {
  font-weight: normal;
  /* texte pas en gras mais normal dans les liens du menu */
  font-size: 1.3em;
  /* taille du texte dans la navbar */
  display: flex;
  align-items: center;
  /* centre verticalement le texte et l’icône */
  height: 100%;
  /* prend toute la hauteur de la navbar */
}

/* Menu déroulant du navbar*/

#navbar .dropdown-menu {
  margin-top: 0px;
  border-radius: 10px;
  /* pour Admin , compte et cockpit : bulle un peu arrondie et 0 margin top*/
}

.weblink.dropdown.open .dropdown-menu {
  min-width: 250px;
}


/* mais dans le dropdown, on laisse vivre le texte */
.navbar-nav .dropdown-menu li a,
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  display: block;
}

.navbar-inverse .navbar-nav .open .dropdown-menu>li>a,
.navbar-inverse .navbar-nav .open .dropdown-menu {
  background-color: #ffffff;
  color: #222222;
  border-radius: 5px;
}

/* hover sur Menu déroulant du navbar
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus,
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a, */
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:hover {
  background-color: rgba(134, 194, 175, 0.1);
  color: #004d40;
  border-radius: 5px;
  outline: none !important;
  /* enlève le contour focus */
  box-shadow: none !important;
  /* sécurité */
  border: none !important;
  padding: 3px 20px;
  /* règle le soucis de changement de padding */
}

/* Affichage lorsque rubrique (weblink) du navbar sélectionné */
.navbar-inverse .navbar-nav>.open>a .navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.open>a:focus {
  background-color: rgba(134, 194, 175, 0.1);
  color: #004d40;
  border-radius: 5px;
}

/* Affichage lorsque rubrique (weblink) du navbar sélectionné */
/* Plus spécifique que Bootstrap : pour éviter les flash bleus */
/*  #86C2AF1A = rgba(134, 194, 175, 0.1) = #86C2AF vert clair avec de la transparence */
.navbar.navbar-inverse.navbar-static-top .navbar-nav>.open>a,
.navbar.navbar-inverse.navbar-static-top .navbar-nav>.open>a:hover,
.navbar.navbar-inverse.navbar-static-top .navbar-nav>.open>a:focus {
  background-color: #86C2AF1A !important;
  color: #004d40 !important;
  border-radius: 5px;
}

/* Empêcher le texte du menu de dépasser*/
.navbar-nav>li>a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Liens du menu en vert */
.navbar-inverse .navbar-nav>li>a {
  color: #222222;
  font-weight: normal;
}

/* Liens au survol (hover) */
.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus {
  color: #004d40;
  /* vert foncé pour contraste */
  background-color: rgba(134, 194, 175, 0.1);
  /* effet léger survol */
}

/* Titre / logo (brand) */
.navbar-inverse .navbar-brand {
  color: #86c2af;
  font-weight: 600;
}

.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
  color: #004d40;
  /* variante foncée au survol */
}

/* Lien actif dans la navbar */
.active-navlink {
  background-color: rgba(134, 194, 175, 0.1);
  color: #222222 !important;
  border-radius: 5px;
  text-decoration: none;
}

/* Lien actif dans la navbar : styliser le <li> parent 
.active-navlink-parent {
    background-color: rgba(134, 194, 175, 0.1);
    border-radius: 5px;
}*/

/* Si un dropdown contient un lien actif, applique le style parent 
.nav-item.dropdown:has(.active-navlink) {
    background-color: rgba(134, 194, 175, 0.1);
    border-radius: 5px;
}*/

/* Image drapeau */
.navbar .flag-fr {
  width: 20px;
  padding-left: 0;
  margin-top: 15px;
}


/* ==============================
   Page MES RAPPORTS ...
   ============================== */




/* Styles des sections */
.zone {
  width: 100%;
  padding: 40px 20px;
}

/* Sections impaires : première, troisième, cinquième… */
.zone.bandeau:nth-of-type(odd) {
  /* ancien style .transparente */
  background-color: transparent;
  /* ou ta couleur exacte */
}

/* Sections paires : deuxième, quatrième, sixième… */
.zone.bandeau:nth-of-type(even) {
  /* ancien style .couleur-claire */
  background-color: #cfcfcf42;
  /* par ex. ton fond clair */
}

.zone.transparente {
  background-color: transparent;
}

.zone.couleur-claire {
  background-color: #cfcfcf42;
  /* à personnaliser */
}

.zone-menu-rapports {
  width: 100%;
  padding: 10px 10px;
  background-color: transparent;
}

.zone-accueil {
  padding: 10px 20px;
}

/* Contenu centré et horizontal */
.zone-content {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  /* <-- au lieu de space-between */
  max-width: 1200px;
  margin: 0 auto;
  gap: 40px;
  flex-wrap: wrap
}

.zone-content .zone-title {
  flex-basis: 100%;
  width: 100%;
  /* Sécurité supplémentaire */
  display: block;
  /* Pour empêcher un comportement inline-flex */
  padding-left: 0;
  /* Aligne le titre avec l’image */
}

.zone-image img {
  max-width: 150px;
  height: auto;
  border-radius: 8px;
}

.zone-image-menu-rapports img {
  max-width: auto;
  height: 50px;
  border-radius: 8px;
}

/* Cards organisées en colonnes (2 max par colonne) */
.zone-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
  margin: 0 auto;
  /* centrer le tout */
  max-width: 100%;
  /* 👉 Laisse respirer ! */
}

/* Cards organisées en colonnes (1 max par colonne) pour le menu supérieur de chaque page de rapports*/
.zone-links-menu-rapports {
  display: grid;
  grid-auto-flow: column;
  grid-auto-rows: auto;
  grid-template-rows: repeat(10, auto);
  gap: 5px;
}

.zone-title {
  font-size: 30px;
  /* taille du titre */
  font-weight: bold;
  color: #222222;
  margin: 0 0 20px 0;
  /* espace dessous le titre */
  padding-left: 20px;
  /* petit retrait gauche pour aligner avec contenu */
  text-align: left;
}

.zone.couleur-claire .zone-title {
  color: #004d40;
  /* ex: couleur différente pour la section claire */
}

.card-menu-rapports {
  display: inline-flex;
  /* permet de rester simple et centré */
  align-items: center;
  /* centre verticalement le texte */
  justify-content: flex-start;
  padding: 6px 6px;
  min-width: 100px;
  /* largeur minimale */
  height: auto;
  /* hauteur s'adapte au texte */

  background: #d8f0e8;
  border: 1px solid #ddd;
  border-radius: 12px;
  box-sizing: border-box;

  text-align: center;
  text-decoration: none;
  /* pas de soulignement */
  color: #222;
  /* couleur du texte */

  cursor: pointer;
  transition: background-color 0.05s ease, box-shadow 0.05s ease;
}

.card {
  /*background: white;*/
  padding: 15px 20px;
  /*border: 1px solid #ddd;*/
  border-radius: 15px;
  box-shadow: none;
  /*text-align: left;
  /* plus lisible */

  /* largeur et hauteur fixes 
  width: 230px;
  height: 70px;*/

  /* pour que le contenu reste bien dans la carte */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  /* évite que padding déborde */

  text-decoration: none;
  /* enlève le soulignement par défaut */
  /*color: #222222; */
  /* hérite la couleur du texte normal */
  cursor: pointer;
  /* curseur en main */
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card-black {
  background: #2b2b2b;
  border: 1px solid #2b2b2b;
  /* largeur et hauteur fixes */
  width: 230px;
  height: 70px;
  color: white;
  font-size: 16px;
}

.card-green {
  background: #86c2af;
  border: 1px solid #86c2af;
  /* largeur et hauteur fixes */
  width: 230px;
  height: 70px;
  color: #222222;
  font-size: 17px;
}

.card-white {
  background: white;
  border: 1px solid #ddd;
  /* largeur et hauteur fixes */
  width: 230px;
  height: 70px;
  color: #222222;
  font-size: 17px;
}

.card-white-green {
  background: white;
  border: 1px solid #ddd;
  /* largeur et hauteur fixes */
  width: 230px;
  height: 70px;
  color: #86c2af;
  font-size: 17px;
}

/* Icône Lucide */
.card-header i {
  font-size: 20px;
  /* fixe la taille de l’icône */
  line-height: 1;
  /* évite un décalage vertical */
  /*color: #222222;*/
  flex-shrink: 0;
  /* empêche l’icône de se déformer */
}

/* Titre de a carte */
.card-header span {
  /*font-size: 16px;*/
  /* texte du titre/lien plus grand */
  font-weight: normal;
  /*color: #222222; */
  display: inline-flex;
  align-items: center;
}

.card-white:hover {
  color: #004d40;
  /* vert foncé pour contraste */
  background-color: rgba(134, 194, 175, 0.1);
  /* effet léger survol */
}

.card-green:hover {
  color: #222222;
  background-color: #8eceb9;
}

.card-black:hover {
  color: #ffffff;
  background-color: #474747;
}

.card-menu-rapports:hover {
  color: #004d40;
  /* vert foncé pour contraste */
  background-color: #ffffff;
  /* effet léger survol */
}

/* Lien */
.card-header {
  font-weight: normal;
  /* texte non gras */
  align-items: left;
  /* centre verticalement icône + texte */
  /*font-size: 16px;*/
  /* plus grand pour le lien */
  display: flex;
  justify-content: center;
  align-items: center;
  /* color: #222222; */
  line-height: 1.2;
  /* garde une bonne lisibilité */
  gap: 8px;
  /* espace entre l’icône et le lien */
  margin-bottom: 4px;
}

/* Description */
.card p {
  margin: 0;
  font-size: 13px;
  color: #222222;
  line-height: 1.4;
}

/*Responsive : sur mobile */
@media (max-width: 768px) {
  .zone-content {
    flex-direction: column;
    align-items: center;
    /* centre la grille */
  }

  .zone-image {
    display: none;
    /* masque totalement l'illustration */
  }

  .zone-links {
    width: 100%;
    /* pleine largeur */
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    /* cartes qui s'adaptent */
  }
}

/* Menu toggle / onglets */
.nav-tabs>li>a {
  /*color: #ffffff;*/
  background-color: #86c2af17;
  border-radius: 5px;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
  color: #ffffff;
  background-color: #86c2af;
  border-radius: 5px;
}

/* ==============================
   TABLEAUX ET FORMULAIRES ...
   ============================== */


/* Neutralise la largeur fixe de fa-fw UNIQUEMENT sur les boutons actions de tableau Power Pages */
button.btn.aria-exp .fa-fw {
  width: auto !important;
}

/* Agrandit la taille du carré autour du bouton de modif de ligne de tableau PowerPages */
.btn-xs, .btn-group-xs>.btn {
  padding: 4px 5px;
}

/*.cell .field-label {
  margin-top: 20px;  >> ALE 13/11 : IMPACT SUR L'ESPACE DANS LES FORUMAIRES DE MODALES 
}*/

button.btn {
  /*display: inline-flex;*/
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  /* espace entre l’icône et le texte */
}

/*.details-link.launch-modal:hover,
.edit-link.launch-modal:hover,
.details-link.has-tooltip.launch-modal:hover {
  border: 1px solid #5a8577;
} */

.add-folder.btn.btn-info.action:hover {
  background-color: #86c2af;
  border: 1px solid #5a8577;
}

/* Bouton de validation dans les modales sur les tableaux/formulaires*/
.submit-btn.btn.btn-primary.form-action-container-left {
  margin-left: 10px;
}

.submit-btn.btn.btn-primary.form-action-container-left:active,
.submit-btn.btn.btn-primary.form-action-container-left:focus {
  background-color: #86c2af;
}

/* Encadré de la zone de filtre de gauche des tableaux concernés ... */
.panel {
  border-radius: 20px;
}

/* Encadré de la zone de filtre de gauche des tableaux concernés : bouton pour filtrer */
.btn-default {
  border-radius: 5px;
}

/* centrer les entetes de colonnes de tableaux */
th,
td {
  text-align: center;
}

/* Suppression du souligné appliqué par défaut dans le theme.css, dans les tableaux et formulaires */
a:not(.btn) {
  text-decoration: none;
}


/* === MODALE EN OVERLAY, TOUJOURS DEVANT === */
.modal,
.modal2 {
  display: none;
  /* masquée par défaut */
  position: fixed !important;
  /* sort du flux + couvre l'écran */
  inset: 0 !important;
  /* top/right/bottom/left: 0 */
  z-index: 2147483001 !important;
  /* très haut pour passer devant l'iframe */
  overflow: hidden !important;
  /*overflow: auto; MAJ ALE 18/11*/
  background: rgba(0, 0, 0, 0.4);
  /* voile sombre */
  padding: 0;
  /* on gère l'espacement sur le contenu */
}

/* ================================
   MODALE STANDARD (export / menu)
   ================================ */

/* Contenu centré et au-dessus de l’overlay */
.modal-content,
.modal-content2 {
  position: relative;
  margin: 3% auto;
  /* centre vertical/horizontal */
  background-color: #fff;
  padding: 10px;
  border: 1px solid #888;
  padding-right: 10px;
  /* largeur ≈ croix + marge */
  min-width: 500px;
  /*height: 80vh;                      ✅ plus de hauteur pour les pages de menu */
  min-height: 200px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  z-index: 2147483001;
  display: flex;
  flex-direction: column;
  /* ✅ pour que l’iframe prenne la hauteur restante */
  /*width: calc(100% - 30px);  Pour éviter le chevauchement de la scroll bar avec la croix de sortie de modale */
}

.modal-dialog {
  width: 97%;
  max-width: 97%;
  margin: 30px auto;
  /* optionnel mais propre */
}

.modal-content {
  width: 97%;
  min-height: 70vh;
  /* garde une hauteur minimale sympa */
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

/* header / footer ne bougent pas */
.modal-header,
.modal-footer {
  flex-shrink: 0;
}

/* comportement par défaut pour toutes les modales classiques */
.modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 15px;
}

/* 2. Le contenu scrolle dans l’iframe, pas dans .modal-body */
.modal .modal-body {
  overflow-y: hidden;
  padding: 0;
}

.modal .modal-body>iframe {
  display: block;
  width: 100%;
  height: calc(90vh - 70px);
  border: 0;
}

.modal-content2 {
  height: fit-content;
  width: 60%;
}

/* Empêche le scroll du fond quand la modale est ouverte */
body.modal-open {
  overflow: hidden !important;
}

/* Ajustement taille H3 par défaut dans modales Power Pages de formulaires */
.entity-form .tab.clearfix .tab-column h3 {
font-size: 15px;
padding-left: 10px;
}

/* Responsive */
@media screen and (max-width: 1750px) {
  .modal-content {
    width: 97%;
  }

  .modal-content2 {
    width: 60%;
    margin: 3% auto;
  }
}

@media (max-width: 768px) {
  .modal-content {
    width: 97%;
    min-width: unset;
    min-height: 350px;
    margin: 3% auto;
    padding: 15px;
  }

  .modal-content2 {
    width: 60%;
    min-width: unset;
    min-height: 350px;
    margin: 3% auto;
    padding: 15px;
  }
}


/* Responsive pour la seconde modale (alignée avec ta règle .modal-content) */
@media screen and (max-width: 1750px) {
  .modal-content2 {
    width: 60%;
    margin: 5% auto;
  }
}

/* Conteneur iframe dans la modale de menu */
.menu-modal-frame-wrap {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid #eee;
  background: #fff;
  /*width: calc(100% - 30px);  Pour éviter le chevauchement de la scroll bar avec la croix de sortie de modale */
}

/* Iframe plein cadre */
#menuModalFrame {
  position: absolute;
  inset: 0;
  width: calc(100% - 30px);
  /* Pour éviter le chevauchement de la scroll bar avec la croix de sortie de modale */
  /*width: 100%;*/
  height: 100%;
  border: none;
  background: #fff;
}

/* Bouton fermer */
#menuModalClose {
  position: absolute;
  top: 10px;
  right: 15px;
  background: transparent;
  border: none;
  font-size: 30px;
  font-weight: bold;
  color: #666;
  cursor: pointer;
  z-index: 10;
}

#menuModalClose:hover {
  color: #000;
}



/* Lignes d’infos compactes et responsives */
.info-row {
  z-index: 3000 !important;
  /* très haut pour passer devant l'iframe */
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
  margin: 8px 0 12px;
  visibility: hidden;
}

.info-row .field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.info-row .label {
  font-weight: 600;
}

.info-row .value {
  font-weight: 400;
}

/* Bouton de fermeture (si utilisé) */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/* === INPUTS / LAYOUT EXISTANTS === */
.custominput {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  resize: vertical;
}

label {
  /* padding: 12px 12px 12px 0; >> ALE 13/11 : IMPACT SUR L'ESPACE DANS LES FORUMAIRES DE MODALES */
  display: inline-block;
}

input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container.customcontainer {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  width: 100%;
  height: 100%;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.row.customrow {
  text-align: center;
  margin-top: 10px;
}

/* === RESPONSIVE === */
@media screen and (max-width: 1750px) {

  .col-25,
  .col-75,
  input[type=submit] {
    width: 100%;
    margin-top: 0;
  }

  .modal-content {
    width: 90%;
    /* plus confortable sur petits écrans */
    margin: 5% auto;
  }

  .label {
    padding: 0;
  }

  .row.customrow {
    text-align: center;
    margin-top: -10px;
  }
}

/* === Adaptations manuelles de tailles de modales via CSS === */

/* Contexte : pages où les formulaires en modale sont petits */
.small-modals .modal.modal-form .modal-dialog {
  max-width: 600px;              /* plus étroit que la modale standard */
  width: 95vw;                    /* reste responsive */
}

.small-modals .modal.modal-form .modal-content {
  min-height: auto !important;    /* on enlève le gros min-height */
  max-height: none !important;
  height: auto !important;  /* couche de sécurité */
}

/* On laisse le contenu respirer, mais sans “trou” énorme */
.small-modals .modal.modal-form .modal-body {
  max-height: calc(100vh - 160px);  /* sécurité si le formulaire est plus grand que l'écran */
  overflow-y: auto;                 /* scroll interne si nécessaire */
  background-color: #F6F6F6;  /* Généralisation du fond gris bootstrap à tout le body car difficile de désactiver ce gris dans l'iframe Power Pages */
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.small-modals .modal.modal-form .modal-body>iframe {
  height: auto !important;              /* ne force plus 90vh */
  max-height: calc(100vh - 220px);      /* sécurité si le formulaire est grand */
  min-height: 500px;                    /* petite hauteur de base, à ajuster */
}

***

.medium-modals .modal.modal-form .modal-dialog {
  max-width: 900px;              /* plus étroit que la modale standard */
  width: 100vw;                    /* reste responsive */
}

.medium-modals .modal.modal-form .modal-content {
  min-height: auto !important;    /* on enlève le gros min-height */
  max-height: none !important;
  height: auto !important;  /* couche de sécurité */
  width: 70%;
}

/* On laisse le contenu respirer, mais sans “trou” énorme */
.medium-modals .modal.modal-form .modal-body {
  max-height: calc(100vh - 160px);  /* sécurité si le formulaire est plus grand que l'écran */
  overflow-y: auto;                 /* scroll interne si nécessaire */
  background-color: #F6F6F6;  /* Généralisation du fond gris bootstrap à tout le body car difficile de désactiver ce gris dans l'iframe Power Pages */
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.medium-modals .modal.modal-form .modal-body>iframe {
  height: auto !important;              /* ne force plus 90vh */
  max-height: calc(100vh - 220px);      /* sécurité si le formulaire est grand */
  min-height: 500px;                    /* petite hauteur de base, à ajuster */
}

/* === LOADER (au-dessous de la modale, au-dessus du reste) === */
#loader {
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 9999;
  /* < modal (999999), > page */
  display: none;
}

/*@-webkit-keyframes spin { from {-webkit-transform:rotate(0deg);} to {-webkit-transform:rotate(360deg);} }
@keyframes spin { from {transform:rotate(0deg);} to {transform:rotate(360deg);} } */
#loader::after {
  content: '';
  display: block;
  position: absolute;
  left: 48%;
  top: 40%;
  width: 100px;
  height: 100px;
  border-style: solid;
  border-color: #86c2af;
  border-top-color: transparent;
  border-width: 7px;
  border-radius: 50%;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

/* === EMPÊCHER LE SCROLL DU FOND QUAND LA MODALE EST OUVERTE === */
body.modal-open {
  overflow: hidden !important;
}


/* ================================
   FIN DU BLOCK MODALE STANDARD ET LOADER (export / menu)
   ================================ */


/* Couleur de sélection des radios & checkboxes */
input[type="radio"],
input[type="checkbox"] {
  accent-color: #86c2af;
  /* ton vert */
}

/* Ring d’accessibilité quand on tabule (optionnel mais recommandé) */
input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible {
  outline: 2px solid #004d40;
  outline-offset: 2px;
}

/* Carré de loupe, bouton de téléchargement, dans les formulaires */
.input-group-btn >.btn,
.input-group-addon,
.btn-info {
  background-color: #86c2af;
  border-color: #86c2af;
  border-radius: 10px;
  margin-left: 10px;
}

/* Conteneur global input + bouton de recherche (Bootstrap) */
.input-group .query.form-control {
  height: 34px;                /* hauteur standard Bootstrap, souvent déjà le cas */
}

/* On force le bouton de recherche à avoir la même hauteur que le champ */
.input-group .btn-hg {
  height: 34px;                /* même hauteur que l'input */
  padding: 0 12px;             /* on gère la largeur, pas la hauteur */
  display: flex;
  align-items: center;         /* centre verticalement l’icône */
  justify-content: center;     /* centre horizontalement */
}

/* On évite que l’icône de recherche rajoute un line-height bizarre */
.input-group .btn-hg .fa {
  line-height: 1;
}


/* Boutons de validation dans les formulaires */
.btn-primary {
  margin-right: 30px;
  border-radius: 10px;
}

/* Boutons natifs dans les tableaux */
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary:active:hover,
.btn-primary.active:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.btn-primary:focus,
.btn-primary.focus {
  color: white;
  background-color: #86c2af;
  border-color: #86c2af;
}

/* Propriétés des formulaires XXX NETTOYAGE ARNAUD XXX
.crmEntityFormView,
.entitylist {
  background-color: #ffffffb2;
  color: #222222;
  border-radius: 20px;
  border: 1px solid #e5e6e6;
  padding: 3% 0%;
}*/

/* Zones de saisie des formulaires */
input.form-control,
.form-control {
  color: #222222;
  border-radius: 10px;
  border-color: #e5e6e6;
}

/* Mettre de l'espace avant le titre du formulaire */
.crmEntityFormView .tab-title {
  padding-left: 30px;
}

.crmEntityFormView {
  border-radius: 15px;
}

.crmEntityFormView .actions {
  margin: 0px;
  padding: 10px;
}

/* Pour modales */
.wrapper-body .crmEntityFormView {
	margin-top: 10px;
}

/* Pour modales */
.wrapper-body .crmEntityFormView .actions {
	border-top: none;
}

.btn-link,
.btn-link {
  color: #86c2af;
  text-decoration: none;
  background-color: transparent;
}

.btn-link:hover,
.btn-link:focus {
  color: #86c2af;
  text-decoration: none;
  background-color: transparent;
}

/* pour la mise en forme de base des pages (hors rapports) */
.nemia-page-container {
  max-width: 900px;
  /* largeur maximale */
  margin: 0 auto;
  /* centre la div */
  padding: 0 20px;
  /* ajoute du padding gauche/droite */
}

/* ==============================
   AUTRES
   ============================== */


/* redimensionnement du paramétrage bdese  

/* Section Hero */
.section-landing-search,
.section-landing-forums {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  min-height: 420px;
  background: url('/Homehero.png') center / cover no-repeat;
  padding: 8px;
  margin: 0;
}

.entity-grid a:hover {
  background-color: #86c2af31;
  border-radius: 8px;
}


@media (min-width: 1024px) {
  .modal-lg {
    width: 80%
  }
}


/* Onglets dans les pages web */
.nav>li>a:hover,
.nav>li>a:focus {
  background-color: rgba(134, 194, 175, 0.4);
}

/* fin du bloc pour les modals */

/* Couleur du texte dans les titres de pages HTML custom NEMIA */
.customColorText {
  color: #222222;
  padding-left: 20px;
  padding-right: 20px;
  /* width: 20px;       largeur ICONE LUCIDE */
  /* height: 20px;      hauteur ICONE LUCIDE */
  /* stroke-width: 2; épaisseur du trait ICONE LUCIDE (optionnel, défaut = 2) */
  vertical-align: middle;
  /* ICONE LUCIDE bien alignée avec le texte */
}

/*
.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {
    background-color: #86c2af;
    color: #86c2af;
    border-radius: 5px;
}*/

.signInNoBgImg {
  background-image: none;
  /* background: url("SignInBackground.png") no-repeat center center fixed;
    background-size: cover;
    height: 100%;
    overflow: hidden; */
}

.visible-sm-block.visible-md-block.visible-lg-block.visible-xs-block.navbar-brand {
  position: absolute;
  left: 0;
  margin-left: 10px;
}

/* @media (min-width: 1400px) {
  .nav.navbar-nav.weblinks {
    position: absolute;
    right: 0;
    margin-right: 10px;
    font-size: small;
  }
}*/

/* Forcer le burger à droite dans la navbar 
.navbar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}*/

/* 1500px -> 768px : cacher le menu mais afficher le burger */
@media (max-width: 1500px) and (min-width: 768px) {
  #navbar.navbar-collapse.collapse {
    display: none !important;
  }

  .navbar-toggle {
    display: block !important;
    position: absolute;
    right: 0;
    padding: 9px 10px;
    margin-top: 8px;
    margin-bottom: 8px;
  }

  #navbar.navbar-collapse.in {
    display: block !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
    /* ⬅ Force à passer sous le bloc du logo + burger */
    /*padding: 10px 0; Supprimé car ça faisait compresser la navbar */
  }

  #navbar .nav.navbar-nav {
    float: none !important;
    width: 100%;
  }

  #navbar .nav.navbar-nav>li {
    float: none !important;
    width: 100%;
  }

  #navbar.navbar-collapse {
    max-height: 0;
    transition: max-height 0.4s ease-in-out;
    overflow: hidden !important;
  }

  /* Menu ouvert : animé */
  #navbar.navbar-collapse.in {
    overflow: visible !important;
    max-height: none !important;
  }

  #navbar.navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid #ddd;
    z-index: 1000;
  }

  .navbar {
    position: relative;
  }

  /* Corrige le menu qui part à droite */
  #navbar .navbar-right {
    float: none !important;
    margin-right: 0 !important;
  }

  #navbar .navbar-nav.ml-auto,
  #navbar .navbar-nav.ms-auto {
    margin-left: 0 !important;
  }

  #navbar .navbar-nav {
    text-align: left !important;
  }

  .navbar-nav>li>a {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  #navbar .navbar-right .dropdown-menu,
  #navbar .pull-right>.dropdown-menu,
  #navbar .dropdown-menu-right {
    right: auto !important;
    left: 0 !important;
  }


}

/* En dessous de 768px : comportement Bootstrap normal */
@media (max-width: 768px) {
  #navbar.navbar-collapse.collapse {
    display: none !important;
  }

  #navbar.navbar-collapse.collapse.in {
    display: block !important;
    width: 100%;
    /* Menu mobile pleine largeur */
  }

  .navbar-toggle {
    display: block !important;
    position: absolute;
    right: 0;
    padding: 9px 10px;
    margin-top: 8px;
    margin-bottom: 8px;
  }

  #navbar.navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid #ddd;
    z-index: 1000;
  }

  .navbar {
    position: relative;
  }
}

/* Cacher la navigation sous le breakpoint 
@media (max-width: 1500px) {
  #navbar.navbar-collapse.collapse {
    display: none !important;
  }
  #navbar.navbar-collapse.collapse.in {
    display: block !important;
    width: 100%; pour que le menu mobile prenne toute la largeur 
  }

    .navbar-toggle {
    display: block !important;  le burger apparaît 
  }*/

.navbar-header .navbar-brand {
  display: inline-block;
}

*/
/* Optionnel : centrer ou empiler les liens en mode mobile 
  .navbar-nav {
    float: none !important;
    width: 100%;
  }
}*/


.centerButtonProfile {
  text-align: center;
  margin-top: 10px;
}

/* Ajustements pour Power BI*/

.rapport-wrapper {
  position: relative;
  width: 100%;
}

/* Conteneur du rapport (iframe)
.pbi-container {
  width: 100%;
  min-height: 900px; 
  overflow: hidden;
} */

/* ✅ Iframe adaptative 
.pbi-container iframe,
.pbi-container .powerbi {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    position: relative !important;   enlève le position:fixed forcé 
}*/

/* Overlay du menu */
.rapport-menu-overlay {
  position: fixed;
  top: 120px;
  /* distance depuis le haut du rapport */
  left: 10px;
  /* distance depuis la gauche */
  z-index: 100;
  /* plus haut que l’iframe */
  background: rgba(134, 194, 175, 0.9);
  padding: 10px;
  border-radius: 12px;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Bouton toggle */
.menu-toggle-btn {
  /*position: absolute;*/
  top: 20px;
  left: 20px;
  /*z-index: 200;*/
  background: #86c2af;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

/* État replié */
.rapport-menu-overlay.collapsed {
  opacity: 0;
  visibility: hidden;
}

/* État replié par défaut*/
.rapport-menu-overlay.hidden {
  display: none;
}

.rapport-layout {
  display: flex;
  /*width: 100vw; 100%;*/
  /*height: calc(100vh - 64px); -80px si tu as une navbar au-dessus */
}

/* Colonne gauche */
.rapport-sidebar {
  width: 60px;
  /* Ajuste selon la place que tu veux */
  padding: 10px;
  background: transparent;
}

.rapport-content {
  flex: 1;
  /*padding-left: 10px; */
  /*overflow: auto;   permet de scroller le rapport sans déborder */
}

/* Enlever l'encadré noir de l'iframe PBI */
iframe[src*="powerbi.com"] {
  border: none !important;
  /* border-radius: 12px;*/
}

/* Utilisé par template PBI.html */
.pbicontainer {
  /* position: relative; */
  overflow: hidden;
  width: 100%;
  height: auto;
  /* ne force pas */
}

/*.pbi-container {
  margin-top: 40px;
   ajoute de l’air au-dessus du rapport 
}*/

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}



.powerbi.portal-pbi-embedded {
  position: fixed;
  height: 91% !important;
  z-index: 1;
  width: 100%;
}


/* ==============================
 ANIMATION PAGE Cockpit
   ============================== */

/* Overlay global fixé — hors du subtree PBI */
#pbiLoadingPlaceholder {
  position: fixed;
  inset: 0;
  display: none;
  /* montré par JS */
  align-items: center;
  justify-content: center;
  background: transparent;
  z-index: 2147483000;
  /* très haut, au-dessus du dialog Power BI */
  pointer-events: none;
  will-change: transform, opacity;
}

/* Bloc vertical : logo + lignes */
#pbiLoadingPlaceholder .nemia-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
}

/* Ligne affichée uniquement en cas de CAPA-KO */
#pbiLoadingPlaceholder .nemia-boot-line {
  margin-top: 50px;
  font-family: Arial, sans-serif;
  font-size: 20px;
  color: #86c2af;
  text-align: center;
  opacity: 0;
  animation: nemia-boot-fade 2.2s ease-in-out infinite;
}



@keyframes nemia-boot-fade {
  0% {
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* Conteneur principal du ripple + logo */
.nemia-ripple {
  position: relative;
  width: 220px;
  height: 220px;
}

/* Cercle blanc derrière le logo + vagues */

.nemia-bg {
  position: absolute;
  top: -15%;
  left: -15%;
  width: 130%;
  height: 130%;
  background: white;
  border-radius: 50%;
  z-index: 0;
}



/* Cercles de vague autour */
.nemia-ripple::before,
.nemia-ripple::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid #86C2AF;
  border-radius: 50%;
  opacity: 0.35;
  animation: ripple 2.8s ease-out infinite;
  z-index: 1;
}

.nemia-ripple::after {
  animation-delay: 0.9s;
}

@keyframes ripple {
  0% {
    transform: scale(0.5);
    opacity: 0.35;
  }

  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* “N” au centre qui pulse légèrement */
.nemia-logo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  animation: pulse 3.2s ease-in-out infinite;
  z-index: 2;
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.03);
  }
}

/* 3 lignes animées sous le logo */
#pbiLoadingPlaceholder .nemia-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: 'Onest', Arial, sans-serif;
  color: #86c2af;
  font-size: 24px;
  line-height: 1.25;
  min-height: 3.5em;
}

#pbiLoadingPlaceholder .nemia-line {
  opacity: 0;
  animation: nemia-fade 6s ease-in-out infinite;
}

#pbiLoadingPlaceholder .nemia-line.l2 {
  animation-delay: 2s;
}

#pbiLoadingPlaceholder .nemia-line.l3 {
  animation-delay: 4s;
}

@keyframes nemia-fade {
  0% {
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  30% {
    opacity: 1;
  }

  40% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}


.page-copy {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.page-copy.fadeout {
  opacity: 0;
}



/* Fond texturé appliqué à la page pendant le chargement Nemia */
.page-copy.nemia-loading-bg {
  position: relative;
  border-radius: inherit;
  background-image: url('./nemia-background-dots.svg');
  background-repeat: repeat;
  background-size: 15.5px;
  border: 0;
  transition: background 0.6s ease-in-out;
}


/* Masquer le spinner natif Power BI */
.pbi-svg-item img[alt="Power BI loading"] {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* SVG qualité */
#pbiLoadingPlaceholder svg {
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
  image-rendering: optimizeQuality;
}

/* Responsive */
@media (max-width: 480px) {
  .nemia-ripple {
    width: 160px;
    height: 160px;
  }

  #pbiLoadingPlaceholder .nemia-lines {
    font-size: 18px;
  }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {

  .nemia-ripple::before,
  .nemia-ripple::after,
  .nemia-logo,
  #pbiLoadingPlaceholder .nemia-line {
    animation: none !important;
  }
}

/* Couleurs du logo Nemia */
.st0 {
  fill: #222222;
}

.st1 {
  fill: #86C2AF;
}


/* ==============================
 FIN ANIMATION PAGE Cockpit SOCIAL
   ============================== */


.notification.alert.alert-success.success.alert-dismissible {
  visibility: hidden;
  height: 0;
}

.notifications {
  visibility: hidden;
  height: 0;
}

.navbar-toggle collapsed {
  background-color: #86c2af
}

.alert-warning {
  background-color: #d8f0e8;
  border-color: #d8f0e8;
  color: #222222;
}

.btn-success {
  color: #fff;
  background-color: #86c2af;
  border-color: #86c2af;
}

.btn-success:hover {
  color: #fff;
  background-color: #689788;
  border-color: #689788;
}

.btn-danger {
  color: #fff;
  background-color: #3d3d3d;
  border-color: #3d3d3d;
}

.btn-danger:hover,
.btn-danger:active,
.btn-danger:focus {
  color: #fff;
  background-color: #222222;
  border-color: #222222;
}

a.text-primary,
a.text-primary:hover,
a.text-primary:focus {
  color: #6b9b8c;
}

.btn-primary.disabled:hover {
  color: #fff;
  background-color: #689788;
  border-color: #689788;
}

.icon-vert {
  color: #86c2af;
  min-width: 20px;
  /* ton vert sauge */
}

.text-vert {
  color: #86c2af;
  /* ton vert sauge */
}

.jquery-bootstrap-pagination>.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover {
  background-color: #86c2af !important;
}


.pagination>li>a:hover,
.pagination>li>span:hover {
  color: #86c2af !important;
}

.pagination>li>a:focus,
.pagination>li>span:focus {
  color: white !important;
}

/* CSS pour la loupe de recherche sur la navbar */
.dropdown-search {
  padding: 10px 15px;
  min-width: 250px;
}

.dropdown-search form {
  margin: 0;
}

.navbar .navbar-icon {
  padding-top: 15px;
  padding-bottom: 15px;
  display: block;
}


/* ====================================================================
 REFACTO CSS (ANAUD) pour les pages avec tableaux et formulaires/listes
   ==================================================================== */

/* Styles d’aspect général des tableaux et éléments Power Pages */
.zone-docs-table table {
  width: 100%;
  /*background: #ffffffb2;*/
  /*border-radius: 12px;*/
  overflow: hidden;
}

.zone-docs-table table thead {
  background-color: rgba(134, 194, 175, 0.15);
  color: rgb(39, 39, 39);
  font-weight: 600;
  padding: 8px 12px;
}

.zone-docs-table table td {
  padding: 8px 12px;
  font-size: 14px;
  color: #222;
}

.zone-docs-table table tr:hover td {
  background-color: #ffffffb2;
}

.entitylist {
  border: none;
  background-color: transparent;
  padding: 0% 0%;
}

.entity-grid .view-grid {
  background-color: #ffffffb2;
  border-radius: 12px;
  border: 1px solid #ddd;
}

table.table.table-striped tbody tr {
  background-color: #ffffffb2;
}

table.table.table-striped tbody tr td a.launch-modal.details-link,
table.table.table-striped tbody tr td a.launch-modal.edit-link {
  /*background-color: #86c2af17;*/
  /*border: 1px solid #ddd;*/
  /*border-radius: 10px;*/
  display: inline-block;
  /*padding: 4px 8px;*/
  min-width: 140px;
  /*text-align: center;*/
  /*color: black;*/
  text-decoration: none;
  margin: 2px 4px;
}

/* Modale et barres d’outils / toolbar / boutons */

/*clearfix.cell.form-control-cell
.clearfix.cell.text.form-control-cell {
  padding: 0 28px 0px; 
}*/
.clearfix.cell.picklist-cell,
.clearfix.cell.form-control-cell,
.clearfix.cell.boolean-radio-cell {
  padding: 0 28px 5px;
}

.crmEntityFormView .tab {
  margin-bottom: 0;
}

fieldset[aria-label="Général"] {
    margin-bottom: 0;
}

.row.form-custom-actions {
  background: none !important;
}


/*pour annuler le padding 20 des lignes vides Power Pages, ici c'est match exact de l'ordre*/
[class="clearfix cell"],
[class="cell clearfix"] {
    padding: 0 !important;
}

.view-toolbar.grid-actions.clearfix {
  margin-bottom: 0px;
  padding-bottom: 5px;
  border-bottom: none;
}

/*
button.btn.btn-info {
  margin-bottom: 10px;
}*/

button.btn.btn-info:hover {
  background-color: #86c2af;
  border: 1px solid #5a8577;
}

.table-toreinvite {
  border: 1px solid #ddd;
  border-radius: 10px;
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
  margin-top: 10px;
}

.table-toreinvite .row td {
  background-color: white;
}

.table-toreinvite .row th {
  padding: 5px;
}

/* une page = un mode = une classe racine (.page-compact / .page-extended / .page-large) */

.page-compact .zone-docs-intro .container,
.page-compact .zone-docs-table .container {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
  text-align: center;
}

.page-compact .columnBlockLayout,
.page-compact .columnBlockLayout>p .page-compact .columnBlockLayout>h2 {
  text-align: center;
}

.page-compact .columnBlockLayout .input-group,
.page-compact .columnBlockLayout .control {
  text-align: left;
}

.page-extended .zone-docs-intro .container,
.page-extended .zone-docs-table .container {
  margin: 0 auto;
  padding: 0 15px;
  text-align: center;
}

@media (min-width: 1200px) {

  .page-extended .zone-docs-intro .container,
  .page-extended .zone-docs-table .container {
    max-width: 1500px;
    /*width: 1500px;*/
  }
}

.page-extended .columnBlockLayout,
.page-extended .columnBlockLayout * {
  text-align: center;
}

.page-large .zone-docs-table .container-fluid {
  width: 100%;
  max-width: 100%;
  padding-left: 24px;
  padding-right: 24px;
  margin: 0;
}

.page-large .zone-docs-table .col-md-12 {
  padding-left: 0;
  padding-right: 0;
  text-align: left;
}

.page-large .zone-docs-table table {
  width: 100%;
  max-width: 100%;
  table-layout: auto;
}

.page-large .zone-docs-intro .columnBlockLayout,
.page-large .zone-docs-intro .columnBlockLayout *,
.page-large .zone-docs-table .columnBlockLayout,
.page-large .zone-docs-table .columnBlockLayout * {
  text-align: left !important;
}

.page-large .zone-docs-intro .container {
  /* PAGE LARGE — Intro plein écran, alignée à gauche */
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  /* pas de centrage bootstrap */
  padding-left: 24px !important;
  /* marge intérieure côté gauche */
  padding-right: 24px !important;
}

@media (max-width: 768px) {
  .page-large .zone-docs-table .container-fluid {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Page de Formulaire de contact Nemia */
.nemia-contact-form {
  max-width: 700px;
  margin: 0 auto;
  text-align: left;
}

.nemia-form-group {
  margin-bottom: 16px;
}

.nemia-form-group label {
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

.nemia-form-group .form-control,
.nemia-form-group textarea,
.nemia-form-group select {
  border-radius: 6px;
  border: 1px solid #ccc;
  width: 100%;
}

.nemia-form-actions {
  text-align: center;
  margin-top: 24px;
}

#contactBanner.alert {
  margin: 16px auto 24px auto;
  max-width: 700px;
  border-radius: 8px;
}

/* =========================================
   OVERRIDES SPÉCIFIQUES pour la modale d’iframe #menuModal
   (celle déclenchée par data-modal="on")
   ========================================= */

/* overlay */
#menuModal.modal {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.45);
  z-index: 2147483600 !important;
  overflow: auto;
  /* ✅ si la modale est plus grande que l’écran, on peut scroller */
}

/* le “cadre” de la modale */
#menuModal .modal-content {
  position: relative;
  margin: 3.5rem auto;
  max-width: 1400px;
  width: calc(100% - 2.5rem);
  /* centré, avec un peu d’air sur les côtés */
  background: #fff;
  border-radius: 14px;
  border: 0;
  padding: 0;
  /* c’est le wrapper qui gère */
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  /*max-height: calc(100vh - 3.5rem);*/
  /* ALE 12/11 */
  /* ✅ ne dépasse plus l’écran */
  overflow: hidden;
  /* on garde l’arrondi global */
  display: flex;
  flex-direction: column;
}

/* le bloc qui contient l’iframe */
#menuModal .menu-modal-frame-wrap {
  position: relative !important;
  flex: 1 1 auto;
  min-height: 380px;
  background: #fff;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  overflow: hidden;
  /* ✅ pour que l’arrondi coupe bien l’iframe */
}

.modal-header {
  padding: 2px;
}

/* l’iframe elle-même */
#menuModal #menuModalFrame {
  width: 100% !important;
  /*height: calc(100vh - 3.5rem - 50px) !important;*/
  /* ALE 12/11 */
  /* 50px ≈ hauteur zone haute + marge ; ajuste si besoin */
  border: 0;
  display: block;
  background: #fff;
  transition: opacity .25s ease;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

/* si jamais c’est trop haut sur mobile, on réduit */
@media (max-width: 768px) {
  #menuModal .modal-content {
    margin: 3rem auto;
    width: calc(100% - 1.25rem);
    max-height: calc(100vh - 2.5rem);
  }

  #menuModal #menuModalFrame {
    height: calc(100vh - 2.5rem - 45px) !important;
  }
}

/* loader par-dessus, avec arrondi aussi */
#menuModal #menuModalLoader {
  position: absolute !important;
  inset: 0 !important;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  z-index: 3;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

#menuModal #menuModalLoader::before {
  content: "";
  width: 34px;
  height: 34px;
  border: 3px solid rgba(0, 0, 0, 0.15);
  border-top-color: #86c2af;
  border-radius: 999px;
  animation: menuModalSpin 1s linear infinite;
  margin-right: .75rem;
}

@keyframes menuModalSpin {
  to {
    transform: rotate(360deg);
  }
}

/* bouton fermer toujours au-dessus et bien placé */
#menuModal #menuModalClose {
  position: absolute;
  top: 10px;
  right: 25px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
}

#menuModal #menuModalClose:hover,
#menuModal #menuModalClose:focus {
  background: rgba(0, 0, 0, 0.55);
  outline: none;
}

#menuModal .container {
  margin: 0 auto !important;
}

/* === PATCH ciblé : neutralise les règles plein-cadre héritées === */

/* 1) Le wrap de #menuModal : pas de bordure, arrondi cohérent, clip OK */
#menuModal .menu-modal-frame-wrap {
  position: relative !important;
  /* ALE 12/11 */
  flex: 1 1 auto;
  /* ALE 12/11 */
  min-height: 200px;
  /* ALE 12/11 */
  border: 0 !important;
  border-bottom-left-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
  overflow: hidden !important;
  max-height: calc(100dvh - 7rem) !important;
  /* 7rem ≈ marges + bouton close */
}

/* 2) L’iframe de #menuModal : repasse en flux normal */
#menuModal #menuModalFrame {
  /*position: static !important;    🔴 annule le position:absolute global */
  inset: auto !important;
  width: 100% !important;
  /* 🔴 annule le width:calc(100% - 30px) */
  height: 100% !important;
  /* occupe tout le wrap */
  border: 0;
  display: block;
  border-bottom-left-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
}

/* 3) La boîte : centrée, pas limitée par un max-height trop strict */
#menuModal .modal-content {
  width: min(1100px, calc(100% - 2rem)) !important;
  margin: 3.5rem auto !important;
  max-height: none !important;
  /* laisse le wrap gérer la hauteur utile */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* garde l’arrondi global */
}

/* 4) Overlay : autoriser le scroll si la boîte dépasse */
#menuModal.modal {
  overflow: auto !important;
}

/* 5) Loader : suit les arrondis et recouvre l’iframe */
#menuModal #menuModalLoader {
  position: absolute !important;
  inset: 0 !important;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9) !important;
  z-index: 3;
  border-bottom-left-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
}

/* 6) Mobile : plus de hauteur utile, moins de marge */
@media (max-width: 768px) {
  #menuModal .modal-content {
    margin: 2rem auto !important;
    width: calc(100% - 1rem) !important;
  }

  #menuModal .menu-modal-frame-wrap {
    max-height: calc(100dvh - 4rem) !important;
  }
}

/* ===============================
   MODE "PP EMBED" = page dans la modale #menuModal
   =============================== */

/* 1) Fond plus neutre dans la modale 
body.pp-embed {
  background-image: none;
}*/

/* 2) On resserre un peu les sections pour la modale */
body.pp-embed .zone-docs-intro,
body.pp-embed .zone-docs-table {
  padding: 12px 16px;
  margin: 0;
}

/* 3) Les titres un peu plus compacts dans la modale */
body.pp-embed .zone-docs-intro .columnBlockLayout,
body.pp-embed .zone-docs-table .columnBlockLayout {
  padding-left: 0;
  padding-right: 0;
}

/* 4) Les onglets ne prennent plus 100vw (qui déborde dans une iframe) */
body.pp-embed .full-width-tabs {
  width: 100%;
  /* au lieu de 100vw */
  margin-left: 0;
  /* on neutralise les bidouilles "déboîtage" éventuelles */
}

/* 5) Le tableau et les filtres respirent un peu moins large */
body.pp-embed .container-fluid {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

body.pp-embed .col-md-12.columnBlockLayout {
  padding-left: 0;
  padding-right: 0;
}

/* 6) Dans la modale on évite les énormes max-width centrés,
      on laisse la page occuper tranquillement la largeur de l'iframe */
body.pp-embed .page-compact .zone-docs-intro .container,
body.pp-embed .page-compact .zone-docs-table .container,
body.pp-embed .page-extended .zone-docs-intro .container,
body.pp-embed .page-extended .zone-docs-table .container {
  max-width: 100%;
}

/* 7) Optional : tu peux légèrement réduire la taille globale du texte dans la modale */
body.pp-embed {
  font-size: 14px;
}

/* ========================
   MODALE WIDE AVEC MARGE
   ======================== */

#menuModal.modal-wide {
  padding: 0 !important;
}

#menuModal.modal-wide .modal-content {
  margin: 1.5rem auto !important; /* marge haut + bas + centrage */
  width: calc(100vw - 1.5rem) !important; /* 3rem = marge gauche + droite */
  max-width: 100vw !important; /* supprime toute contrainte */
  border-radius: 12px !important; /* joli arrondi conservé */
  min-height: 95vh; /*hauteur élevée si pleine page*/
  max-height: 95vh; /*hauteur élevée si pleine page*/
}

#menuModal.modal-wide .menu-modal-frame-wrap {
  max-height: calc(100vh - 5rem) !important;
}

#menuModal.modal-wide #menuModalFrame {
  width: 100% !important;
  height: 100% !important;
}

/* ========================
    Glossaire ajustements 
   ======================== */

/* Tableau DSN : 3e colonne alignée à gauche */
.dsn-values-table th.custom_th3,
.dsn-values-table td:nth-child(3) {
  text-align: left !important;
}

.glossaire .zone-docs-table .container>h3,
.glossaire .zone-docs-table .container>h4,
.glossaire .zone-docs-table .container .panel.panel-default>.panel-heading>h4,
.glossaire .zone-docs-table .container .panel.panel-default>.panel-heading>h5,
.glossaire .zone-docs-table .container .panel-body {
  text-align: left;
}

.glossaire .zone-docs-intro .container,
.glossaire .zone-docs-table .container {
  display: block !important;
  /* ou flex-direction: column; */
}

.glossaire .zone-docs-table .panel-body>.table {
  border: 1px solid #ddd;
  overflow: hidden;
  /* ESSENTIEL pour couper les bordures internes */
  border-collapse: separate !important;
  border-radius: 10px;
}

.glossaire .table>tbody>tr>th {
  border-top: none;
}

.glossaire .definition-line {
  display: flex;
  align-items: center;
  /* ✅ centre verticalement */
  gap: 6px;
  /* ✅ petit espace entre l’icône et le texte */
}

.glossaire .definition-line i[data-lucide] {
  vertical-align: middle;
  /* Aligne avec le milieu du texte */
}

.glossaire .definition-details {
  margin: 16px 0;
}

.glossaire .definition-details b {
  display: block;
  margin-bottom: 6px;
}

/* Aligne le texte de description sur la gauche */
.glossaire .text-left td:nth-child(2) {
  text-align: left;
}

.glossaire .panel-default>.panel-heading {
  border-radius: 10px;
}

/* ========================
    Params BDESE ajustements 
   ======================== */

.parametrages-bdese .view-toolbar.grid-actions.clearfix {
  border-bottom: none;
}

.parametrages-bdese button.btn.btn-info:hover {
  background-color: #86c2af;
  border: 1px solid #5a8577;
}

.parametrages-bdese button.btn.btn-info.action {
  gap: 0 !important;
}

/*.parametrages-bdese .table>thead>tr>th {
  vertical-align: middle;
}*/

.entitylist .view-grid .table>thead>tr>th {
  vertical-align: middle;
}

.parametrages-bdese .entitylist-download.btn.btn-info.pull-right.action {
  display: inline-flex !important;
  width: auto !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
}

/* Ajouts Arnaud pour améliorer le visuel des tableaux */

.zone-docs-table .entitylist .col-md-9 {
	padding-right: 0px;
}

.entitylist .col-md-3.filter-vertical {
	padding-left: 0px;
}

/* Section d’introduction */
.parametrages-bdese .zone-docs-intro {
  display: flex;
  flex-wrap: wrap;
  text-align: left;
  padding: 8px;
  margin: 0;
}

/* Section tableau
.zone-docs-table {
  display: flex;
  flex-wrap: wrap;
  text-align: left;
  min-height: 100px;
  padding: 8px;
  margin: 0;
} */

/*
.zone-docs-intro .container,
.zone-docs-table .container {
  display: flex;
  flex-wrap: wrap;
}*/

/*
.zone-docs-intro .columnBlockLayout,
.zone-docs-table .columnBlockLayout {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-width: 250px;
}*/

/* Style du tableau SharePoint si Bootstrap / EntityList génère une <table> 
.zone-docs-table table {
  width: 100%;
  background: #ffffffb2;
  border-radius: 12px;
  overflow: hidden;
}*/

.parametrages-bdese .zone-docs-table table th {
  background-color: rgba(134, 194, 175, 0.15);
  color: #222222;
  font-weight: 600;
  padding: 8px 12px;
}

/* 
.parametrages-bdese .zone-docs-table table td {
  padding: 8px 12px;
  font-size: 14px;
  color: #222;
}*/

/* Hover sur les lignes */
.parametrages-bdese .zone-docs-table table tr:hover td {
  background-color: #ffffffb2;
}

.parametrages-bdese .entitylist {
  border: none;
  background-color: transparent;
  padding: 0% 0%;
  margin-top: 8px;
}

.zone-docs-table .entitylist {
    margin-top: 8px;
}

.parametrages-bdese .entity-grid .view-grid {
  background-color: #ffffffb2;
  border-radius: 12px;
  border: 1px solid #ddd;
}

.parametrages-bdese table.table.table-striped tbody tr {
  background-color: #ffffffb2;
}

/*table.table.table-striped tbody tr td a.launch-modal.details-link,*/
.parametrages-bdese table.table.table-striped tbody tr td a.launch-modal.edit-link {
  /* background-color: #86c2af; */
  /*border: 1px solid #ddd;*/
  /*border-radius: 5px;*/
  display: inline-block;
  /* ✅ permet d’ajuster largeur + padding */
  padding: 4px 8px;
  /* ✅ espace texte/bordure */
  min-width: 140px;
  /* ✅ largeur uniforme minimale */
  /*text-align: center;*/
  /* ✅ texte centré */
  /*color: white;*/
  /* ✅ (si nécessaire) texte lisible */
  text-decoration: none;
  /* ✅ enlève le soulignement par défaut */
  margin: 2px 4px;
}

/* pour corriger le padding-right à 0 sur le lien dans le tableau */
.parametrages-bdese a.edit-link.launch-modal {
  /*padding-right: unset !important;*/
  padding-right: 8px !important;
  /* ou padding-right: initial !important; */
}

/*.parametrages-bdese a.edit-link.launch-modal:hover {
  background-color: #86c2af;
  border: 1px solid #5a8577;
}*/

.parametrages-bdese .row.sectionBlockLayout p {
  margin: 0 0 0;
}

.parametrages-bdese button.btn.btn-info.action {
  display: inline-block !important;
  /* annule flex */
  gap: 0 !important;
  /* supprime les espaces internes */
}

.parametrages-bdese button.btn.btn-info:hover {
  background-color: #86c2af;
  border: 1px solid #5a8577;
}

.parametrages-bdese .columnBlockLayout button.btn.action {
  display: inline-flex !important;
  width: auto !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
}

.parametrages-bdese .entitylist-download.btn.btn-info.pull-right.action {
  display: inline-flex !important;
  width: auto !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
}

.parametrages-bdese .view-toolbar.grid-actions.clearfix {
  border-bottom: none;
}

.parametrages-bdese table.table.table-striped .deactivate-link {
  background-color: #222;
  border: 1px solid #222;
  border-radius: 5px;
  display: inline-block;
  /* ✅ permet d’ajuster largeur + padding */
  padding: 4px 8px;
  /* ✅ espace texte/bordure */
  min-width: 140px;
  /* ✅ largeur uniforme minimale */
  text-align: center;
  /* ✅ texte centré */
  color: white;
  /* ✅ (si nécessaire) texte lisible */
  text-decoration: none;
  /* ✅ enlève le soulignement par défaut */
  margin: 2px 4px;
}

.parametrages-bdese .nav-tabs>li {
  float: none;
  /* empêche les onglets de se rétrécir */
  display: inline-block;
}

.parametrages-bdese .nav-tabs {
  text-align: left;
  /* optionnel si tu veux centrer */
  width: 100%;
  /* s’assurer que ça prend toute la largeur */
}

.full-width-tabs {
  width: 100vw;
  /* toute la largeur de la fenêtre */
  /*margin-left: calc(50% - 50vw);  astuce pour "déboîter" du container Bootstrap */
}

.parametrages-bdese .btn.btn-default.btn-entitylist-filter-submit {
  color: white;
  background-color: #86c2af;
  border-color: #86c2af;
}

.parametrages-bdese .btn.btn-default.btn-entitylist-filter-submit:hover {
  border-color: #588174;
}

@media (min-width: 992px) {
  .parametrages-bdese .col-md-3 {
    width: 20%;
  }
}

/* Ajout du 16/10/25 */

.parametrages-bdese .filters {
  display: flex;
  justify-content: center;
  gap: 20px;
  /* espacer les filtres */
}

.parametrages-bdese .filter-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  /* espace entre label et input */
}

.parametrages-bdese .filter-group select {
  background-color: rgba(134, 194, 175, 0.15);
  border: 1px solid #ddd;
  border-radius: 10px;
  display: inline-block;
  /* ✅ permet d’ajuster largeur + padding */
  padding: 4px 8px;
  /* ✅ espace texte/bordure */
  text-align: center;
  /* ✅ texte centré */
  text-decoration: none;
  /* ✅ enlève le soulignement par défaut */
  margin: 2px 4px;
}

.parametrages-bdese .filter-group input {
  background-color: rgba(134, 194, 175, 0.15);
  border: 1px solid #ddd;
  border-radius: 10px;
  display: inline-block;
  /* ✅ permet d’ajuster largeur + padding */
  padding: 4px 8px;
  /* ✅ espace texte/bordure */
  text-align: center;
  /* ✅ texte centré */
  text-decoration: none;
  /* ✅ enlève le soulignement par défaut */
  margin: 2px 4px;
}

.parametrages-bdese .filter-group input:active,
.filter-group input:focus {
  border: 1px solid #86c2af;
}

/* supprimer bordure bleue par défaut */
.parametrages-bdese #filterLibelle {
  outline: none;
  box-shadow: none;
}

.parametrages-bdese .col-md-12 .filters {
  margin-top: 30px;
  margin-bottom: 30px;
}

.parametrages-bdese .table.table-bordered {
  border-collapse: separate !important;
  border-spacing: 0;
  border-radius: 10px;
  overflow: hidden;
}

/* Centrer le tableau dans l’onglet Taux */

.parametrages-bdese .zone-docs-table #Taux .table-container {
  max-width: 1100px;
  /* largeur max du tableau */
  margin: 0 auto;
  /* centre le bloc */
}

/* Si tu veux un effet plus étroit */
.parametrages-bdese .zone-docs-table #Taux .table-container.narrow {
  max-width: 900px;
}

.highlighted-text {
  font-weight: bold;
  background-color: #86c2af;
  /* Couleur de surlignage */
}

/* Permet de masquer la 1ere colonne (n°Nemia) de l'affichage */

.parametrages-bdese .entity-grid.entitylist table thead th:first-child,
.parametrages-bdese .entity-grid.entitylist table tbody td:first-child {
  display: none;
}

.parametrages-bdese input[type="radio"] {
  margin-right: 8px;
}

/* Pour le menu de filtres généré depuis les formulaires Power Pages, notamment pour les pages de paramétrages */
.entitylist-filter-option .radio, 
.entitylist-filter-option .checkbox {
  margin-top: 1px;
  margin-bottom: 1px;
}

.entitylist-filter-option-group-label.h4 {
  font-size: 15px;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 5px;
}

.panel-default.entitylist-filter .panel-body {
  padding: 10px;
}

/* ========================
    Modale export PDF 
   ======================== */

.export-pdf .row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.export-pdf .col-25 {
  flex: 0 0 25%;
  max-width: 25%;
  text-align: right;
  padding-right: 10px;
}

.export-pdf .col-75 {
  flex: 0 0 75%;
  max-width: 75%;
}

.export-pdf .custominput {
  width: 100%;
  box-sizing: border-box;
}

.export-pdf .row-note {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

/* Boutons alignés au centre */
.export-pdf .customrow {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}


/* ========================
    Modale Power pages de désactivation 
   ======================== */

.modal-deactivate .modal-body {
  display: flex;
  align-items: center;
}

/* ========================
    Modale Commentaire 
   ======================== */

/* Pour garder le style de tes champs de formulaire déjà utilisés */
.commentaire .col-25 {
    flex: 0 0 25%;
    max-width: 25%;
    text-align: right;
    padding-right: 10px;
}

.commentaire .col-25 .label {
    color: #222222;
    font-size: 100%;
    white-space: normal;

}

.commentaire .col-75 {
    flex: 0 0 75%;
    max-width: 75%;
}

.commentaire .custominput {
    width: 100%;
    box-sizing: border-box;
}

/* Boutons centrés */
.commentaire .customrow {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.commentaire .modal2 .row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

/* ========================
    IMporter mes DSNs 
   ======================== */

/* Cible uniquement la modale Formulaire "Importer mes DSNs" 
iframe[title="Importer mes DSNs"] {
    background: transparent !important;
}*/

/* Contenu du formulaire dans la modale (iframe → html interne) 
iframe[title="Importer mes DSNs"] + * .crmEntityFormView,
iframe[title="Importer mes DSNs"] .crmEntityFormView {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

iframe[title="Importer mes DSNs"] .sharepoint-data .view-grid {
  border-radius: 12px !important;
  border: 1px solid #808080;
}*/

/* Supprime fond gris uniquement pour la modale Importer mes DSNs 
.modal-body iframe[title="Importer mes DSNs"] {
    background-color: transparent !important;
}

.modal-body iframe[title="Importer mes DSNs"] * {
    background-color: transparent !important;
    border-color: transparent !important;
}*/


/* ========================
    Ajustements pour Import DSNs
   ======================== */

.sharepoint-data .table-striped.table {
  margin-top: 10px;
  border-radius: 12px;
}

/* Dossiers SharePoint dans le formulaire d'import DSN */
.sharepoint-grid .fa-folder.text-primary,
 .sharepoint-grid .fa-level-up.text-primary {
  color: #86c2af !important;      /* ton vert Nemia */
  font-size: 16px;
}

/* Optionnel : harmoniser aussi la flèche de tri et les autres icônes */
.sharepoint-grid .fa-chevron-circle-down,
.sharepoint-grid .fa-file-o,
.sharepoint-grid .fa-trash-o,
.sharepoint-grid .fa-arrow-up,
.sharepoint-grid .fa-level-up {
  color: #555;                      /* gris doux */
}

/* ========================
    TESTS 
   ======================== */

   /* ============================
   MODALE ARCHIVAGE (modal2)
   ============================ */

.modal2 {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: none;
  z-index: 2147483600;
  overflow-y: auto;
  padding: 2rem 1rem;
}

/* Cadre blanc centré */
.modal-content2 {
  background: #fff;
  width: 100%;
  max-width: 600px;         /* largeur agréable */
  margin: 2rem auto;
  border-radius: 14px;
  padding: 20px 25px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}

/* Harmonisation interne */
.modal-content2 .customcontainer {
  padding: 0; /* ton container ajoute trop de padding sinon */
}

/* Labels alignés */
.modal-content2 .col-25 label {
  font-weight: 600;
  white-space: normal;
}

.modal-content2 .row {
  margin-bottom: 12px;
}

/* Boutons centrés */
.modal-content2 .customrow {
  text-align: center;
  margin-top: 20px;
  gap: 12px;
}

.modal-content2 .btn {
  min-width: 120px;
}