/* ===== Layout global sans scroll cassé ===== */

/* ===== BASE STABLE ===== */

/* Les spacers globaux ne doivent pas créer un faux scroll bas */
.spacer-p-130{ padding-bottom:8px !important; }


/* Layout simple : footer collé en bas */
body{ margin:0; min-height:100vh; display:flex; flex-direction:column; }
#blocContent{ flex:1 1 auto; min-height:0; }

/* Footer sans spacers géants */
#siteFooter{ margin-top:auto; padding:8px 0; }
#siteFooter.spacer, #siteFooter.mini-spacer,
footer.spacer, footer.mini-spacer{
  padding-top:8px !important; padding-bottom:8px !important;
}

/* Wrapper des listes auto-height : boîte maîtrisée */
.table-autoheight{
  box-sizing:border-box;
  min-height:0;
  padding:0; margin:0;
}

/* --- Footer compact en mobile & tablette --- */
@media (max-width: 991.98px) {
  /* coupe les gros paddings hérités */
  #siteFooter,
  #siteFooter.footer4,
  #siteFooter.spacer,
  #siteFooter.mini-spacer,
  #siteFooter .f4-bottom-bar {
    padding-top: .25rem !important;
    padding-bottom: .25rem !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* navbar du footer ultra-compacte */
  #siteFooter .navbar {
    padding: .25rem .5rem !important;
    min-height: auto !important;
  }
  #siteFooter .navbar-brand {
    padding: 0 !important;
    margin-right: .5rem !important;
    line-height: 1 !important;
  }
  #siteFooter .navbar-brand img {
    width: 36px !important;   /* réduit le logo */
    height: auto !important;
  }

  /* liens compacts et sur une seule ligne */
  #siteFooter .navbar-nav .nav-link {
    padding: .25rem .5rem !important;
    line-height: 1.2 !important;
  }
  #siteFooter .navbar-nav {
    margin-top: 0 !important;   /* override .mt-2 */
    margin-bottom: 0 !important;
  }

  /* coupe le texte décoratif si présent */
  #siteFooter .hidden-lg-down,
  #siteFooter .f4-bottom-bar h5,
  #siteFooter .f4-bottom-bar p {
    display: none !important;
  }

  /* colonnes cachées déjà en d-none : on s’assure qu’elles ne réservent rien */
  #siteFooter .row.d-none { display: none !important; }
}


:root{
  --fs-xxs:.75rem; --fs-xs:.8125rem; --fs-sm:.875rem; --fs-md:1rem; --fs-lg:1.125rem;
}

/* Titres d’entête de carte (uniquement dans les cards) */
.card .card-header h1,
.card .card-header h2,
.card .card-header h3,
.card .card-header h4,
.card .card-header h5{
  font-size: clamp(var(--fs-sm), 2.2vw, var(--fs-lg));
}
/* Corps de cartes & tableaux */
.card .card-body, .table{
  font-size: clamp(var(--fs-xs), 1.8vw, var(--fs-md));
}
/* Boutons (évite les gros boutons hors .btn-sm) */
.btn{ font-size: clamp(var(--fs-xxs), 1.8vw, var(--fs-sm)); }

/* =============== MOBILE (≤576.98px) — TOPBAR + NAVBAR =============== */
@media (max-width:576.98px){

  /* ===== TOPBAR — Mobile (≤576.98px) : propre et sans doublons ===== */

  /* Compact + au-dessus du logo chevauchant */
  .h3-topbar{ position:relative; z-index:8; }
  .h3-topbar .row{
    min-height:44px;
    padding:4px 0;
    align-items:center;
  }

  /* Styles communs */
  .h3-topbar .topbar-Grp-UserConnected a.nav-link{
    display:inline-flex; align-items:center; gap:.5rem;
    padding:0; line-height:1;
  }
  .h3-topbar .topbar-Grp-UserConnected ul.list-inline{
    display:flex; align-items:center; justify-content:flex-end;
    margin:0; padding:0;
  }
  .h3-topbar .topbar-Grp-UserConnected .list-inline-item{ margin:0; }
  /* en mobile on masque le dropdown plateforme */
  .h3-topbar .topbar-Grp-UserConnected ul.list-inline > li:not(:first-child){
    display:none !important;
  }

  /* ------- ÉTAT DÉCONNECTÉ (.is-guest) ------- */
  /* gauche inutile → cachée ; droite → 100% et alignée à droite */
  .h3-topbar.is-guest .topbar-row > .col-6.col-md-5{ display:none !important; }
  .h3-topbar.is-guest .topbar-row > .col-6.col-md-7{
    display:flex !important;
    flex:0 0 100%; max-width:100%;
    justify-content:flex-end; align-items:center;
  }
  .h3-topbar.is-guest .topbar-Grp-UserDisconnected{
    width:100%; display:flex; justify-content:flex-end;
  }
  .h3-topbar.is-guest .authentication-box{ margin-left:0; }

  /* ------- ÉTAT CONNECTÉ (.is-connected) ------- */
  /* droite cachée ; gauche → 100% ; user aligné à droite */
  .h3-topbar.is-connected .topbar-row > .col-6.col-md-7{ display:none !important; }
  .h3-topbar.is-connected .topbar-row > .col-6.col-md-5{
    flex:0 0 100%; max-width:100%;
    display:flex; align-items:center;
  }
  .h3-topbar.is-connected .topbar-Grp-UserConnected{
    width:100%; display:flex; justify-content:flex-end;
  }

  /* ---------- NAVBAR : logo chevauchant + burger à droite ---------- */
  .h3-navbar{ position:relative; }
  .h3-navbar .navbar{
    display:flex; align-items:center; overflow:visible;
    min-height:48px;
  }

  /* burger compact et ancré à droite */
  .h3-navbar .navbar-toggler{
    padding:4px 8px;
    margin-left:auto;    /* pousse totalement à droite */
    order:3;
    position:relative;
    z-index:7;           /* au-dessus du logo */
  }
  .h3-navbar .navbar .nav-link{
    padding:8px 10px;
    font-size:12px;
  }

  /* LOGO : chevauche TOPBAR + NAVBAR, sans déplacer le flux */
  /* nécessite que ton JS pose bien: --topbar-height et --navbar-height */
  .h3-navbar .navbar-brand{
    position:absolute;
    left:0;
    top: calc(-1 * var(--topbar-height, 44px));
    height: calc(var(--topbar-height, 44px) + var(--navbar-height, 56px));
    display:flex; align-items:center;
    margin:0; padding:0;
    max-width:120px;     /* ajuste si besoin (140/160) */
    z-index:4;           /* sous le burger */
  }
  .h3-navbar .navbar-brand img{
    max-height:100%;
    height:auto; width:auto; display:block;
  }

  /* sécurité : ne décale pas toute la navbar */
  .h3-navbar .navbar{ padding-left:0 !important; }

  /* Gestion du Zoom de l'image Tirelire pour occuper place NavBar + TopBar */
  .h3-navbar .navbar-brand img{
    transform: scale(1.3);      /* zoom 120% */
    transform-origin: left center;  /* agrandi vers la gauche */
  }

  /* Le panneau du menu s'ouvre en OVERLAY sous la navbar, pas en haut de page */
  .h3-navbar .navbar-collapse{
    position: absolute;
    top: var(--navbar-height, 56px);   /* démarre exactement sous la navbar */
    left: 0;
    right: 0;
    z-index: 6;                        /* sous le burger, au-dessus du contenu */
    background: #eaf5ff;               /* adapte à ta couleur de barre */
    padding: .5rem 0;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    border-radius: 6px;
    max-height: calc(100vh - var(--navbar-height,56px));
    overflow: auto;
  }

  /* Quand le collapse est fermé, on ne réserve aucun espace */
  .h3-navbar .navbar-collapse.collapse:not(.show){
    display: none !important;
  }

}

/* ===== Mobile : corriger l'ouverture du menu navbar ===== */
@media (max-width:576.98px){
}


/* Neutralisation éventuelle de styles d’hier s’ils traînent encore */
.icon-action{ all: unset; }

/* Panneau mobile : liste scrollable + logout bien visible */
#UserQuickActionsModal .modal-body{ 
  max-height: calc(100vh - 220px);
  overflow: auto;
}

/* Style clair de l'élément actif dans la liste de plateformes */
#UserQuickActionsModal .list-group-item.active{
  background: #e8f4ff;
  color: #0b5ed7;
  border-color: #bee3ff;
  font-weight: 600;
}

#UserQuickActionsModal .list-group-item[disabled]{
  opacity:.7;
}

#mobileLogoutBtn{
  position: sticky; 
  bottom: 0;
  margin-top: 8px;
}

/* ===== Cards de LISTE uniquement ===== */
/* Desktop/Tablet : titre + bouton alignés, pas de contraintes agressives */
.card-list .card-header{
  display:flex;
  align-items:center;
  gap:.5rem;
}
.card-list .card-header h5,
.card-list .card-header h4{
  margin:0;
}
.card-list .card-header .btn-add{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  /* texte visible en desktop, géré en mobile */
}

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

  /* Entête : on réserve la place du bouton à droite */
  .card-list .card-header{
    position:relative;
    padding:.5rem .75rem;
    padding-right:56px;                /* espace réservé pour le bouton */
  }

  /* Titre : sur une seule ligne, ellipsis si trop long */
  .card-list .card-header h5,
  .card-list .card-header h4{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Bouton "Ajouter" : icône seule, compact, calé à droite et centré */
  .card-list .btn-add .btn-text{ display:none !important; }
  .card-list .btn-add{
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    padding:.25rem .4rem;
    line-height:1;
    border-radius:.25rem;             /* rectangulaire compact */
  }
  .card-list .btn-add i{
    font-size:16px;
    margin:0;
  }
}


/* Anneau de sélection lisible sur toutes couleurs */
.profile-color-swatch.profile-color-selected {
  box-shadow:
    0 0 0 2px #fff inset,
    0 0 0 2px #fff,
    0 0 0 4px rgba(0,0,0,.35);
}

/* Le bouton bootstrap-select se comporte comme un input flexible dans l'input-group */
.input-group .bootstrap-select {
  flex: 1 1 0%;
  width: auto !important;   /* clé : pas 100% */
  margin-bottom: 0;         /* évite un léger décalage vertical */
}

/* Harmonise la taille avec input-group-sm */
.input-group-sm .bootstrap-select .dropdown-toggle {
  padding: .25rem .5rem;
  font-size: .875rem;
  line-height: 1.5;
  height: calc(1.5em + .5rem + 2px);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.toast-success-custom {
    background-color: #d4edda !important; /* Vert clair */
    color: #155724 !important; /* Texte vert foncé */
    border-left: 4px solid #28a745; /* Accent Bootstrap */
}

.spinner-wrapper {
  position: relative !important;
  width: 100%;
  display: block;
  min-height: 100px;
}

.spinnerLoaderOverlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(255, 255, 255, 0.6);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

/* Rend le fond de l'overlay totalement transparent pour les spinners "ghost" */
.spinner-ghost .spinnerLoaderOverlay { 
  background-color: transparent !important;
}

.spinner-icon {
  width: 48px;
  height: 48px;
  /* background-image: url("../images/logos/spinner-fleche.png"); */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  animation: spin 1s linear infinite;
}

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

/*  Permets d'afficher le rond qui tourne

.spinnerLoaderOverlay::after {
  content: "";
  width: 2rem;
  height: 2rem;
  border: 3px solid #dc365a;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

*/

@media print {
  body * {
    visibility: hidden;
  }
  #pdfContent, #pdfContent * {
    visibility: visible;
  }
  #pdfContent {
    position: absolute;
    left: 0;
    top: 0;
    width: 794px;       /* largeur réelle A4 à 96 dpi */
    max-width: 100%;
  }
}

.topbar-row {
  min-height: 65px; /* Ajuste cette valeur à ce qui convient visuellement */
  align-items: center;
}

.topbar-Grp-UserConnected,
.topbar-Grp-UserDisconnected {
    min-height: 40px; /* Ajuste selon ton design */
    display: flex;
    align-items: center;
}


.note {
  border: 1px solid #ccc;
  margin-bottom: 10px;
  padding: 10px;
}
.note img {
  max-width: 100%;
  height: auto;
}

/*
* Pour gérer l'affichage des zone de filtre/tri au dessus des liste avec premiere colonne
*/

.reset-table-col {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
    vertical-align: middle;
    cursor: pointer;
}

.reset-table-col svg {
    color: #888;
    transition: color 0.2s ease;
}

.reset-table-col:hover svg {
    color: #d9534f;
}

/* Largeur ajustée pour l’input de la colonne 0 */
th input[data-filtrecol="0"] {
    display: inline-block;
    width: auto;
    max-width: 100px;
}

/*
* Pour gérer le fait que le header du tabla reste toujours visible
*/
.table-sticky thead th {
  position: sticky;
  /* top: 0; */
  z-index: 2;
  /* PAS de background ici */
}

/* Et uniquement si aucun fond n’est défini, on applique un fond clair par défaut */
.table-sticky thead tr:not([class]) th {
  background: #fff;
}

.sticky-table-wrapper {
  max-height: 400px; /* ou la hauteur désirée */
  overflow-y: auto;
  position: relative;
}

.table-container {
  position: relative; /* Nécessaire pour positionner le spinner */
  overflow: hidden; /* Évite les débordements */
}

/* === AUTOHEIGHT universelle pour zones marquées === */
.js-autoheight .sticky-table-wrapper{
  max-height: none !important; /* Laisse le JS gouverner la hauteur */
}

.js-autoheight{
  box-sizing:border-box;
  min-height:0;
  padding:0;
  margin:0;
}

/*
/ * Styles généraux pour le spinner * /
.other-container {
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #ddd;
  border-top: 4px solid #b91c62;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  position: absolute; / * Par défaut * /
  z-index: 9999;      / * Assure une priorité visuelle * /
}

/ * Spinner centré dans une table-container * /
.table-container .spinner {
  top: 50%; / * Spécifique aux tables * /
  left: 50%;
  transform: translate(-50%, -50%);
}

/ * Spinner pour d'autres cas généraux * /
.other-container .spinner {
  top: 0; / * Exemple d'ajustement * /
  left: 0;
  transform: none;
}

/ * Animation * /
@keyframes spin {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}
*/

/* The spinner */
/* pris depuis https://jsfiddle.net/StephanWagner/kk5bd3hh */

/* @keyframes spinner {
  to {transform: rotate(360deg);}
}

.spinner,
.spinner:before {
  width: 30px;
  height: 30px;
  box-sizing: border-box;
}

.spinner:before {
  content: '';
  display: block;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #2e93e6;
  animation: spinner .6s linear infinite;
}

.spinner-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -10px;
  margin-left: -10px;
}

/- Animations -/

.spinner-add,
.spinner-remove {
  animation-fill-mode: both;
  animation-duration: .4s;
}

.spinner-add {
  animation-name: spinner-add;
}

@keyframes spinner-add {
  from {transform: scale(0);}
  to {transform: scale(1);} 
}

.spinner-remove {
  animation-name: spinner-remove;
}

@keyframes spinner-remove {
  to {transform: scale(0);}
} */

/************************************************************************/

.loaderAjax {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999;
  background: rgba(255,255,255,0.8) url("../images/logos/spinner.gif") center no-repeat; 
}

/* Turn off scrollbar when body element has the loading class */
body.loading{
  overflow: hidden;   
}

/* Make spinner image visible when body element has the loading class */
body.loading .loaderAjax{
  display: block;
  text-align: center;
}


/*
Template Name: Wrapkit
Author: Wrappixel
Email: niravjoshi87@gmail.com
File: scss
*/
/*============================================================== 
 You can write your style here and overwrite our style
 ============================================================== */
 .topbar.fixed-header.animated .h3-topbar,
 .topbar.fixed-header.animated .h3-navbar {
   display: none;

 }

/* .spacer-p-60 {
  padding-left: 0;
  padding-top: 60px;
  padding-bottom: 10px 0;
  padding-right: 0;
} */

.spacer-p-130 {
  padding: 130px 0;
}

.spacer-p-260 {
  padding: 260px 0;
}

.h3-navbar .navbar-brand{
  /* NOUVEAUTE PIERRE 
  top: 7px;
  */
  border-radius: 25px;
  padding: 15px 15px;
} 

.h3-navbar .navbar .navbar-nav .nav-link {
  padding: 22px 10px;
  font-size: 13px;
}

.h3-navbar .navbar .navbar-nav .nav-item li a.disabled {
  /* Make the disabled links grayish*/
  color: gray;
  /* And disable the pointer events */
  pointer-events: none;
}

/* ============================================================
FEATURE2-BOX
=============================================================== */
.wrap-feature2-box .card-body {
  padding: 40px;
}

/* ============================================================
FEATURE41-BOX
=============================================================== */
.wrap-feature41-box .f41-tab {
  display: block;
}

.wrap-feature41-box .f41-tab li a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 20px;
  padding: 25px;
}

.wrap-feature41-box .f41-tab li a .t-icon {
  margin-right: 25px;
  color: #8d97ad;
}

.wrap-feature41-box .f41-tab li a h5 {
  font-weight: 500;
}

.wrap-feature41-box .f41-tab li a h6 {
  font-size: 14px;
  margin-bottom: 0px;
}

.wrap-feature41-box .f41-tab li a.active,
.wrap-feature41-box .f41-tab li a:hover {
  background: #ffffff;
  -webkit-box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
  box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
}

.wrap-feature41-box .f41-tab li a.active .t-icon,
.wrap-feature41-box .f41-tab li a:hover .t-icon {
  background: #188ef4;
  background: -webkit-linear-gradient(
    legacy-direction(to right),
    #188ef4 0%,
    #316ce8 100%
  );
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#188ef4),
    to(#316ce8)
  );
  background: -webkit-linear-gradient(left, #188ef4 0%, #316ce8 100%);
  background: -o-linear-gradient(left, #188ef4 0%, #316ce8 100%);
  background: linear-gradient(to right, #188ef4 0%, #316ce8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /*
  text-fill-color: transparent;
  */
}

.footer4 .f4-bottom-bar {
    /* padding-top: 10px;
    margin-top: 20px; */
    padding-top: 1px;
    margin-top: 2px;
    border-top: 1px solid border;
  }

/*
  .table tbody tr > td.danger {
    background-color: #d73e6b !important;
  }
*/
  .table tbody tr > td.success {
    background-color: #dff0d8 !important;
  }
  
  .table tbody tr > td.error {
    background-color: #f2dede !important;
  }
  
  .table tbody tr > td.warning {
    background-color: #fcf8e3 !important;
  }
  
  .table tbody tr > td.info {
    background-color: #d9edf7 !important;
  }
  
  /* a revoir 
  .table-hover tbody tr:hover > td.danger {
    background-color: #d0e9c6 !important;
  }
  */
  .table-hover tbody tr:hover > td.success {
    background-color: #d0e9c6 !important;
  }
  
  .table-hover tbody tr:hover > td.error {
    background-color: #ebcccc !important;
  }
  
  .table-hover tbody tr:hover > td.warning {
    background-color: #faf2cc !important;
  }
  
  .table-hover tbody tr:hover > td.info {
    background-color: #c4e3f3 !important;
  }


  /*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/

.table-fixed {
  width: 100%;
  table-layout: fixed;
}
.table-fixed thead,
.table-fixed tbody {
  display: block;
  width: 100%;
}
.table-fixed th, .table-fixed td {
  float: left;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.table-fixed thead tr,
.table-fixed tbody tr {
  display: block;
  width: 100%;
}
.table-fixed thead tr:not(.trifiltre-row) th {
  height: 36px;
  vertical-align: middle;
  padding: 6px 8px;
  background: #f9f9f9;
  font-weight: bold;
  border-bottom: 1px solid #dee2e6;
}
.table-fixed thead .trifiltre-row th,
.table-fixed thead .trifiltre-row-max th {
  min-height: 44px;
  background: #f3f8fa;
  border-bottom: 1px solid #dee2e6;
  padding: 2px 4px;
}
.table-fixed thead input.form-control-sm.filter-inline,
.table-fixed thead select.form-control-sm.filter-inline {
  width: 48%;
  display: inline-block;
  margin-right: 2%;
  min-height: 26px;
}
.table-fixed thead input.form-control-sm.filter-inline[data-filtreop="max"] {
  margin-right: 0;
}
.table-fixed thead input.form-control-sm,
.table-fixed thead select.form-control-sm {
  padding: 2px 4px;
  box-sizing: border-box;
}
.table-fixed tbody {
  overflow-y: auto;      /* OBLIGATOIRE pour le scroll vertical ! */
  width: 100%;
}
.table-fixedshort tbody { height: 200px; }
.table-fixedMiddle tbody { height: 300px; }        /* adapte pour fixedlong, fixedshort, etc. */
.table-fixedlong tbody  { height: 500px; }
.table-responsive .table-fixed {
  min-width: 700px;
}

/* Changer la couleur du titre (si tu en as un) */
.modal-header-note {
  background-color: #007bff; /* Par exemple, une couleur bleue pour le header */
  color: white; /* Texte blanc pour contraster avec le fond */
}

.modal-content-note {
  height: 50vh; /* La modale occupe 90% de la hauteur de la fenêtre */
  display: flex;
  flex-direction: column;
}

.modal-body-note {
  flex-grow: 1; /* La zone principale prend tout l'espace disponible */
  overflow: hidden; /* Évite les barres de défilement inutiles */
  padding: 10; /* Maximiser l'espace pour CKEditor */
}

.ck-editor__editable {
  height: 100% !important; /* Assurer que CKEditor prend toute la hauteur du conteneur */
  min-height: 100% !important; /* Ajouter une contrainte pour éviter les rétrécissements */
  overflow: auto !important; /* Ajoute le défilement si nécessaire */
}


.empty-table-message {
  text-align: center;
  vertical-align: middle;
  font-style: italic;
  font-size: 1.2rem;
  color: gray;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* Étendre les styles Bootstrap pour inclure form-control-sm */
form.was-validated .form-control-sm:valid,
.form-control-sm.is-valid {
  border-color: #28a745; /* Bordure verte */
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%2328a745' viewBox='0 0 8 8'%3e%3cpath d='M6.564 1.125a.5.5 0 01.707 0l.354.353a.5.5 0 010 .708L3.707 6.104a.5.5 0 01-.707 0L1.354 4.457a.5.5 0 010-.707l.354-.354a.5.5 0 01.707 0l1.293 1.293 3.563-3.563z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

form.was-validated .form-control-sm:invalid,
.form-control-sm.is-invalid {
  border-color: #dc3545; /* Bordure rouge */
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='0 0 8 8'%3e%3cpath d='M4.93 0c.13 0 .26.05.36.15l.02.02 2.57 2.57c.2.2.2.51 0 .71L5.36 5.36l2.57 2.57a.5.5 0 010 .71l-.71.71a.5.5 0 01-.71 0L4 6.78 1.43 9.36a.5.5 0 01-.71 0l-.71-.71a.5.5 0 010-.71L2.64 5.36.07 2.79a.5.5 0 010-.71l.71-.71a.5.5 0 01.71 0L4 3.22 6.57.64a.5.5 0 01.36-.15z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}


/*  Gestion des statut des activités */
.status-circle {
  width: 15px; /* Taille du cercle */
  height: 15px;
  border-radius: 50%; /* Rond */
  display: inline-block;
  margin-right: 8px; /* Espacement avec le texte */
}

.status-active {
  background-color: green; /* Couleur verte pour actif */
}

.status-inactive {
  background-color: red; /* Couleur rouge pour inactif */
}


.status2-icon {
  font-size: 20px; /* Taille de l'icône */
  margin-right: 8px; /* Espacement avec le texte */
}

.status2-active {
  color: green; /* Couleur verte pour actif */
}

.status2-inactive {
  color: red; /* Couleur rouge pour inactif */
}


.modal-fullscreen {
  width: 100vw; /* Largeur totale de l'écran */
  height: 100vh; /* Hauteur totale de l'écran */
  margin: 0;
  padding: 0;
  max-width: 100%; /* Empêche la limitation de la largeur */
}

.modal-fullscreen .modal-content {
  height: 100%; /* Contenu qui remplit tout */
  border: none; /* Supprime les bordures */
  border-radius: 0; /* Supprime les coins arrondis */
}

.modal-fullscreen img {
  object-fit: contain; /* Gère l'image pour qu'elle s'adapte sans déformation */
  max-height: 100%; /* Empêche le débordement vertical */
}

.undo-validation-icon {
  cursor: pointer;
  transition: transform 0.2s ease;
  font-size: 18px; /* taille normale */
  display: inline-block;
}

.undo-validation-icon:hover {
  transform: scale(1.3); /* effet d'agrandissement */
}


/* Gestion pour le mode TV */
@media (min-width: 1920px) {
  .container, .container-fluid {
    max-width: 1800px;
  }
}

/*******************
footer social icons
*******************/
footer .round-social a {
  background: rgba(120, 130, 140, 0.13);
  color: #8d97ad;
  width: 40px;
  height: 40px;
  line-height: 40px; }
  footer .round-social a:hover {
    color: #ffffff; }

/* Réduction progressive du spacer */
/* Hauteur cumulée des barres */
:root{ --header-offset: 96px; }              /* mobile */
/* ajuste au besoin par breakpoint */
@media (min-width: 768px){ :root{ --header-offset: 104px; } }
@media (min-width: 992px){ :root{ --header-offset: 112px; } }

/* Le spacer ne dépend plus d’un nombre magique */
.spacer-p-130{
  padding-top: calc(var(--header-offset) + 8px) !important;
  padding-bottom: 8px !important;
}

.badge.codepilote {
  background-color: #6c757d; /* gris bootstrap */
  color: #fff;
  font-weight: 600;
  border-radius: .5rem;     /* arrondi plus doux */
  padding: .25rem .6rem;
}