/* --- Couleurs Générales --- */
:root {
  --color-black: #262728;
  --color-IPPA: #42cbb5;
  --color-blue: #6f97c5;
  --color-darkBlue: #36597C;
  --color-fairBlue: #B8CDE1;
  --color-green: #70d489;
  --color-orange: #eba547;
  --color-grey: #eaeaea;
  --color-grey2: #E4E4E3;
  --color-darkGreen : #559F66;
}

.text-dark{
  color: var(--color-black)!important;
}

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

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

.bg-black{
  background-color: var(--color-black)!important;
}

.bg-grey{
  background-color: var(--color-grey)!important;
}

.bg-fairBlue{
  background-color: var(--color-fairBlue)!important;
}

.bg-blue{
  background-color: var(--color-blue)!important;
}

.bg-darkBlue{
  background-color: var(--color-darkBlue)!important;
}

.bg-grey2{
  background-color: var(--color-grey2)!important;
}

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

.bg-IPPA{
  background-color: var(--color-IPPA)!important;
}

.bg-green{
  background-color: var(--color-green)!important;
}

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

.border-green{
  border: 2px, solid, var(--color-green);
}

.border-IPPA{
  border: 1px, solid, var(--color-IPPA);
}



body {
  background-image: url('../../img/conference-chart/bg-bottom.jpg'), url('../../img/conference-chart/bg-top.png');
  background-position: right bottom, top left;
  background-repeat: no-repeat, no-repeat;
  background-size: auto, auto;
  font-family: montserrat;
  padding-top: 56px; /* Espace pour la navbar fixe */
  background-color: #f7f7f7;
  margin: 0;
  max-width: 100%;
  /* clip keeps sticky sidebar working (unlike overflow-x: hidden) */
  overflow-x: clip;
}

.page-wrapper {
  overflow-x: clip;
}

img {
  max-width: 100%;
  height: auto;
}

/* --- Topbar --- */
.bg-dark-custom {
  background-color: var(--color-black);
  border-bottom: 2px solid var(--color-IPPA);
}

.text-teal {
  color: var(--color-IPPA);
}

.search-nav input::placeholder{
  color: var(--color-grey2)!important;
}

p {
  font-size: 17px;
}

/* --- Sidebar --- */
.sidebar {
  min-height: calc(100vh - 56px);
  background-color: var(--color-black) !important;
  position: relative;
  z-index: 100;
  overflow-x: hidden !important;
}

.sidebar-content {
  min-height: 100%;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

.sidebar-scrollable {
  flex: 1 1 auto;
  min-height: 0;
}

.sidebar-return-footer {
  flex-shrink: 0;
  margin-top: auto;
  background-color: var(--color-black);
}

/* Desktop: sidebar sticks in viewport; Return button stays pinned at bottom */
@media (min-width: 992px) {
  .sidebar {
    position: sticky;
    top: 56px;
    align-self: flex-start;
    height: calc(100vh - 56px);
    max-height: calc(100vh - 56px);
    min-height: 0;
    overflow: hidden;
  }

  .sidebar-content {
    height: 100%;
    max-height: 100%;
  }

  .sidebar-scrollable {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sidebar-return-footer .btn-teal {
    max-width: 100%;
  }
}

/* Conference banner: fixed 3:2 frame (dashboard menu 300×200), any source ratio cropped */
.sidebar-header-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: #2a2a2a;
}

.sidebar-header-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

@media (max-width: 991.98px) {
  .sidebar {
    position: fixed;
    top: 56px;
    left: 0;
    width: 100%;
    z-index: 1000;
    max-height: calc(100vh - 56px);
    overflow: hidden;
  }

  .sidebar.collapse.show {
    height: calc(100vh - 56px);
  }

  .sidebar-content {
    height: 100%;
    max-height: calc(100vh - 56px);
  }

  .sidebar-scrollable {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* Container global de l'avatar (losange) */
.diamond-avatar-wrapper {
  width: 85px;
  height: 85px;
  position: relative;
  margin-top: 15px;
  margin-bottom: 10px !important;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background-color: var(--color-grey);
  padding: 8px;
}

.diamond-avatar-square {
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.diamond-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Boutons Pill de la Sidebar Collés au Bord --- */
.sidebar-menu-list,
.sidebar-section-title {
  padding-left: 1rem;
}

.sidebar-menu-list {
  padding-left: 1rem !important;
  padding-right: 0 !important;
  max-width: 100%;
}

.sidebar a{
  font-size: 0.9rem
}

.sidebar-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 1rem;
}

.sidebar-section-title::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-IPPA);
  flex-shrink: 0;
}

.sidebar-btn {
  position: relative;
  /* Demi-pilule : Arrondi à gauche (top-left & bottom-left), droit à droite */
  border-radius: 50rem 0 0 50rem !important;
  border-right: none !important;
  overflow: hidden;
  transition: all 0.2s ease;
  text-decoration: none;
  margin-right: 0;
}

/* Cercle pour l'icône à gauche */
.sidebar-icon-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* Barre verticale d'accentuation au bord droit */
.sidebar-btn-accent {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 7px;
  z-index: 2;
}

/* Bouton État Actif (fond clair) */
.sidebar-btn-dashboard-active {
  background-color: white;
}

.sidebar-btn-dashboard{
  border: 1.5px solid var(--color-IPPA)!important;
}

.sidebar-btn-dashboard:hover{
  background-color:rgba(255,255,255,0.4);
  border: 1.5px solid white!important;
}


/* Bouton État Contour / Inactif (fond sombre) */
.sidebar-btn-chair {
  border: 1.5px solid var(--color-blue);
  border-right: none; /* Supprime la bordure droite pour coller au bord */
  position: relative;
}

.sidebar-btn-chair-active {
  background-color: var(--color-blue);
  border: 1.5px solid var(--color-blue);
  border-right: none;
  position: relative;
}

/* Effet de contour doublé comme sur le design */
.sidebar-btn-chair::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  right: 0; /* Coller au bord droit */
  bottom: -4px;
  border: 1px solid rgba(111, 151, 197, 0.3);
  border-right: none;
  border-radius: 50rem 0 0 50rem;
  pointer-events: none;
}

.sidebar-btn-chair:hover {
  background-color: rgba(111, 151, 197, 0.4);
}

.bg-teal {
  background-color: var(--color-IPPA);
}

.btn-teal {
  background-color: var(--color-IPPA);
  color: #000;
  border: none;
}

.btn-teal:hover {
  background-color: #36b19d;
  color: #000;
}

.sidebar-link {
  color: #a0aab0;
  border-radius: 4px;
}

.sidebar-link:hover, .sidebar-link.active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
}

/* --- Content Main --- */
.main-content {
  padding: 5% 5%
}

.main-content-dashboard {
  padding: 0 0 5% 0
}

/* Bannière principale bleue */
.myPanelsBanner {
  background-color: var(--color-blue);
}

.myPanelsBanner h1, .bannerBlack h1{
  font-weight: 800;
  padding: 2.5%;
}

.bannerBlack h2{
  font-weight: 800;
  padding: 2.5%;
}

.myPanelsBanner h1{
  color: var(--color-black);
  border-left: 15px solid var(--color-black)!important;
  padding-bottom: 100px!important
}

.bannerBlack {
  background-color: var(--color-black);
}

.bannerBlack h1{
  border-left: 15px solid var(--color-IPPA);
}

/* Submit a panel / Modify panel — cadres principaux */
.panel-submit-form .panel-submit-banner-wrap,
.panel-submit-form .card-panel-form,
.panel-submit-form .panel-instructions-block {
  border-radius: 12px;
  overflow: visible;
  box-shadow:
    0 18px 48px rgba(38, 39, 40, 0.24),
    0 8px 24px rgba(38, 39, 40, 0.18) !important;
}

.panel-submit-form .card-panel-form,
.panel-submit-form .panel-instructions-block {
  background-color: #fff;
}

/* Bannière titre Submit / Modify — fond sombre + vagues */
.panel-submit-form > .panel-submit-banner-wrap {
  margin-bottom: 1.25rem;
  background-color: var(--color-black);
}

.panel-submit-form > .panel-submit-banner-wrap .panel-submit-banner {
  background-color: transparent;
  color: #fff;
}

.panel-submit-form > .panel-submit-banner-wrap .panel-submit-banner::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(68%, 480px);
  height: 88%;
  background: url('../../img/conference-chart/panel-submit-banner-waves.svg') no-repeat right bottom;
  background-size: 100% auto;
  pointer-events: none;
}

.panel-submit-form > .panel-submit-banner-wrap .panel-submit-banner-title {
  color: #fff;
}

.panel-submit-form > .panel-submit-banner-wrap .panel-submit-banner-subtitle {
  color: rgba(255, 255, 255, 0.78);
}

.panel-submit-banner {
  position: relative;
  background-color: #fff;
  color: var(--color-black);
  padding: 1.75rem 1.5rem 1.75rem 0;
  border-radius: 12px;
  overflow: hidden;
}

.panel-submit-banner-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  gap: 1rem;
  padding-left: 1.5rem;
}

.panel-submit-banner-bar {
  flex: 0 0 8px;
  border-radius: 999px;
  background-color: var(--color-IPPA);
}

.panel-submit-banner-text {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-self: center;
}

.panel-submit-banner-title {
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-black);
}

.panel-submit-banner-subtitle {
  margin: 0;
  max-width: 42rem;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-black);
}

.panel-submit-form .card-panel-form {
  border-radius: 12px;
}

/* Instructions / informations — cadre unique */
.panel-instructions-block {
  margin-top: 1.5rem;
}

.panel-instructions-block.h-100 {
  display: flex;
  flex-direction: column;
}

.panel-instructions-block .panel-submit-banner {
  padding: 1.15rem 1.5rem 0.85rem 0;
}

.panel-instructions-block .panel-submit-banner-title {
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}

.panel-instructions-block .panelInformationText {
  background-color: #fff;
  padding-top: 0.75rem !important;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-black);
  line-height: 1.45;
}

.panel-instructions-block .style-instructions p {
  margin-bottom: 0.45rem;
  line-height: 1.45;
  font-size: inherit;
  font-weight: 400;
  text-align: left;
}

.panel-instructions-block .style-instructions p:last-child {
  margin-bottom: 0;
}

.panel-instructions-block.h-100 .panelInformationText {
  flex: 1;
}

/* Bouton noir flottant sur la bannière */
.btn-myPanels-Submit {
  background-color: var(--color-black);
  border-radius: 20px;
  letter-spacing: 1px;
  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.8);
}

.btn-myPanels-Submit:hover {
  background-color: var(--color-IPPA);
}

/* --- Cards / Panels --- */

.myPanels-section{
    margin-top:-140px!important
}

.myPanel-card {
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

.format{
  width: auto;
  height: 40px;
}


.bg-submitted,
.bg-draft {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
}

.bg-submitted {
  background-color: var(--color-green);
  font-size: 1rem;
  font-weight: 800;
}

.bg-draft {
  background-color: var(--color-orange);
  font-size: 1rem;
  font-weight: 800;
}

.myPanel-card-body{
  padding: 4% 2%
}

.myPanel-card-body p{
  font-size: 0.9rem
}

.myPanel-chairs {
  list-style: none;
  padding: 0;
  margin: 0 auto 1rem;
  text-align: center;
  font-size: 0.9rem;
}

.myPanel-chairs li {
  line-height: 1.5;
}

/* Boutons d'action EDIT / VIEW */
.btn-action {
  background-color: var(--color-blue);
  color: var(--color-black);
  font-weight: bold;
  border: none;
  padding: 0 1.5rem 0 0;
  font-size: 0.85rem;
}

.btn-action img{
  width: 40px;
  height: auto;
  background-color: var(--color-black);
}

.btn-action:hover {
  background-color: #4f7aa3;
  color: white;
}

/* --- Couleurs supplémentaires pour la vue détail --- */


/* Re-ajustement bannière My Panels pour le détail */
.panelsBanner h1{
  padding-bottom: 2.5% !important; /* Ajusté car pas de bouton central sur ce mockup */
}

.panelDetailHeader {
  background-color: var(--color-grey2) !important;
  align-items: stretch !important; /* Force tous les blocs enfants à s'étirer verticalement */
}

/* Boutons Flèches Noirs (Prennent toute la hauteur du bandeau) */
.btnArrow {
  background-color: var(--color-black) !important;
  align-self: stretch !important; /* Force la hauteur à 100% de celle du parent */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  user-select: none;
}

.btnArrow:hover {
  background-color: #000000 !important;
}

/* Le petit cercle autour de la flèche */
.btn-arrow-circle {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
}

/* Badges (Draft / Submitted) s'étirent et centrent leur texte verticalement */
.bg-submitted,
.bg-draft {
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important; /* Adaptatif selon le texte et le padding */
  padding: 0 1.5rem !important;
  font-size: 1rem;
  font-weight: 800;
}

.panelTitle{
  color: var(--color-black);
}

/* Bouton Edit dans la barre sombre */
.btn-action-edit {
  background-color: var(--color-blue);
  color: #000;
  font-weight: bold;
  border-radius: 4px;
  border: none;
}

.cardHeaderChair{
  background-color: var(--color-darkBlue);
}

.cardHeaderCategorisation{
  background-color: var(--color-blue);
}

.cardHeaderKewords{
  background-color: var(--color-fairBlue);
}

/* Badges / Pilules */
.badge-outline-blue {
  border: 1px solid var(--color-blue);
  background-color: transparent;
}

/* Avatar en losange pour les Panel Chairs */
.diamond-shape {
  width: 45px;
  height: 45px;
  transform: rotate(45deg);
  overflow: hidden;
  border: 5px, solid, var(--color-black);;
  margin: 10px;
}

.diamond-shape i {
  transform: rotate(-45deg);
}

.mail-badge {
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  text-decoration: none;
  background-color: var(--color-blue);
  color: var(--color-black);
}

.traitHorizontal{
  background-color: var(--color-blue);
  height: 2px;
  width: 105%;
  margin-left: -20px
}

.badge{
  font-size: 0.8rem
}

.panelHeaderBlue{
  border-left: 15px solid var(--color-black)!important;
}

/* Justification du texte des descriptions */
.style-description p {
  line-height: 1.6;
  text-align: justify;
}

.panelDetailHeader{
  background-color: var(--grey);
}

/* --- Dashboard dashbord Banner --- */
.dashboardUserConf {
  /* background-image set inline from conferenceImage_Cover (BO) */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 400px;
  width: 100%;             /* On remplace 100vw par 100% */
  position: relative;
  left: 0;                 /* Supprime le décalage provoqué par left: 50% */
  right: 0;
  margin-left: 0;          /* Supprime margin-left: -50vw */
  margin-right: 0;         /* Supprime margin-right: -50vw */
  margin-top: -10px;
}

.dashbord-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(38, 39, 40, 0.55); /* Voile sombre pour le contraste */
}


.dashboardTraitWelcome{
  margin: -200px auto 100px auto;
  width: 5px;
  height: 120px;
}

.dashboardCard{
  border-top: 6px solid var(--color-IPPA)!important;
  min-height: 100%;
}

/* Badge Current Phase */
.current-phase-badge {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  position: relative;
}

/* Le trait noir décalé qui reprend la forme */
.current-phase-badge::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 15px;
  right: -10px;
  bottom: 10px;
  border: 1.5px solid var(--color-black);
  border-radius: 50rem;
  z-index: -2;
  pointer-events: none;
}

.dashboardWelcome{
  margin-top: -80px;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
}

/* Décalage du contenu sur la bannière */



.dashboard-content {
  margin-top: -100px;
  position: relative;
  z-index: 10;
  padding-bottom: 50px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Carte Call for Panel --- */
.megaphone-circle {
  width: 120px;
  height: 120px;
}

.megaphone-line {
  width: 2px;
  height: 60px;
  background-color: #a0aab0;
  margin: 10px auto;
}

.deadline-pill {
  background-color: #ffffff;
  max-width: 450px;
}

.btn-action-dashboard {
  background-color: var(--color-blue);
  border-radius: 0 6px 6px 0 ;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: all 0.2s ease-in-out;
  font-size: 0.9rem!important;
}

.btn-action-dashboard:hover {
  background-color: #5b84b3;
  color: #fff;
}

.dashboardCard2{
  border-radius: 0 0 8px 0 !important;

}

.dashboardCardHeader2{
  border-radius: 0 !important
}

/* Border vertical conditionnel pour desktop */
@media (min-width: 768px) {
  .border-end-md {
    border-right: 1px solid #dee2e6 !important;
  }

  .border-start-md {
    border-left: 1px solid #dee2e6 !important;
  }
}

/* --- Couleurs des headers de la colonne droite --- */
.bg-dark-blue {
  background-color: #2b4c6f;
}

.bg-medium-blue {
  background-color: #5c84b1;
}

.bg-light-blue-header {
  background-color: #a2bedd;
}

/* --- Couleurs utilitaires --- */
.bg-orange {
  background-color: var(--color-orange);
}

.bg-blue {
  background-color: var(--color-blue);
}

.border-teal {
  border: 1px solid var(--color-IPPA) !important;
}


.bannerListPanel{
  padding-right: 2%
}

.bannerListPanel h1{
  border-left: 15px solid var(--color-green);
  border-right: 1px solid var(--color-green);
  color : var(--color-green);
}


.bannerListPanel h2{
  border-left: 15px solid var(--color-green);
  color : var(--color-green);
}


.panel-search-bar input::placeholder{
  color:var(--color-green);
  font-style: italic;
}

/* --- Boutons Pill de Filtrage --- */
.btn-filter-pill-blue {
  border: 1px solid var(--color-blue);
  background-color: #ffffff;
  color: var(--color-black);
  border-radius: 50rem;
  font-size: 0.78rem;
  padding: 0.25rem 0.75rem;
  transition: all 0.15s ease-in-out;
  font-weight: 500;
}

.btn-filter-pill-blue:hover {
  background-color: var(--color-blue);
  border-color: var(--color-blue);
}

.btn-filter-pill-orange {
  border: 1px solid var(--color-orange);
  color: var(--color-black);
  color: #495057;
  border-radius: 50rem;
  font-size: 0.78rem;
  padding: 0.25rem 0.75rem;
  transition: all 0.15s ease-in-out;
  font-weight: 500;
}

.btn-filter-pill-orange:hover {
  background-color: var(--color-orange);
  border-color: var(--color-orange);
}

/* État actif Orange */
.btn-filter-pill-orange.active-orange {
  background-color: var(--color-orange);
  border-color: var(--color-orange);
  color: #000000;
  font-weight: bold;
}

/* État actif Bleu */
.btn-filter-pill-blue.active-blue {
  background-color: var(--color-blue);
  border-color: var(--color-blue);
  color: var(--color-black);
  font-weight: bold;
}

/* --- Cartes Résultats Panels --- */
.format-icon-circle {
  width: 38px;
  height: 38px;
  font-size: 1rem;
}

/* Boutons d'action Verts (VIEW / SUBMIT PAPER) */
.btn-action-green {
  background-color: var(--color-IPPA);
  color: var(--color-black);
  font-weight: bold;
  border: none;
  padding: 0.2rem 1rem 0.2rem 0.3rem;
  font-size: 0.75rem;
  text-decoration: none;
  transition: background-color 0.15s ease-in-out;
}

.btn-action-green i {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
}

.btn-green:hover {
  background-color: var(--color-darkGreen)!important;
  color: var(--color-black);
}

.btn-green{
  background-color: var(--color-green);
}

.btn-green:hover{
  background-color: var(--color-green);
}

.listPaneltraitVertical{
 height: 100%;
 background-color: var(--color-green);
 width: 1px

}


/*Submit a Panel*/

/* Titre des sous-sections avec bordure teal inférieure — même taille que .sidebar a (My Dashboard) */
.form-section-title {
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
}

.card-panel-form .form-section-title.border-bottom-teal {
  margin-bottom: 0.35rem !important;
  padding-bottom: 0.25rem !important;
}

.border-bottom-teal {
  border-bottom: 2px solid var(--color-IPPA);
  display: block;
}

.border-bottom {
  border-bottom: 1px solid var(--color-blue)!important;

}

/* Styles des champs de saisie (inputs & textareas) */
.custom-input {
  border: 1px solid #c8d1d9;
  border-radius: 2px;
  font-size: 0.875rem;
  color: #495057;
}

.custom-input:focus {
  border-color: var(--color-IPPA);
  box-shadow: 0 0 0 0.2rem rgba(66, 203, 181, 0.25);
}

/* Submit a panel — champs alignés maquette */
.card-panel-form .custom-input,
.card-panel-form .searchable-select-input {
  background-color: transparent;
  border: 1px solid #d4d9de !important;
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  font-size: 0.875rem;
  color: var(--color-black);
  min-height: 42px;
  box-shadow: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.card-panel-form textarea.custom-input {
  min-height: 88px;
  line-height: 1.45;
  resize: vertical;
}

.card-panel-form .custom-input::placeholder,
.card-panel-form .searchable-select-input::placeholder {
  color: #9aa3ab;
  opacity: 1;
}

.card-panel-form .custom-input:focus,
.card-panel-form .searchable-select-input:focus {
  background-color: transparent;
  border-color: var(--color-IPPA) !important;
  box-shadow: 0 0 0 0.15rem rgba(66, 203, 181, 0.18);
}

.card-panel-form .custom-input[readonly],
.card-panel-form .panel-chair-main-input {
  background-color: transparent;
  cursor: default;
}

.card-panel-form .panel-chair-input-wrap {
  position: relative;
}

.card-panel-form .panel-chair-input-wrap .custom-input {
  padding-right: 2.5rem;
}

.card-panel-form .panel-chair-input-icon {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: #b0b8bf;
  font-size: 0.95rem;
  pointer-events: none;
  z-index: 2;
}

.main-content .card-panel-form .form-utilisateur-Panel:before,
.main-content .card-panel-form .form-utilisateur-Panel.active:before {
  display: none;
}

.card-panel-form .panel-chair-caption {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: #9aa3ab;
}

.card-panel-form .panel-format-options {
  border: 1px solid #d4d9de;
  border-radius: 8px;
  background-color: transparent;
  padding: 0.85rem 1rem;
}

.card-panel-form .panel-format-options .form-check {
  margin-bottom: 0;
}

.card-panel-form .panel-format-options .form-check + .form-check {
  margin-top: 0.65rem;
}

.card-panel-form .panel-format-options .form-check img {
  width: 32px;
  height: 32px;
  margin-right: 0 !important;
  flex-shrink: 0;
}

.card-panel-form .panel-format-options .form-check-input {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0;
  border-color: #b0b8bf;
}

.card-panel-form .panel-format-options .form-check-input:checked {
  background-color: var(--color-IPPA);
  border-color: var(--color-IPPA);
}

.card-panel-form .panel-format-options .form-check-label {
  color: var(--color-black);
  font-size: 0.875rem;
}

.card-panel-form .searchable-select-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239aa3ab' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 12px 8px;
  cursor: pointer;
}

.card-panel-form .searchable-select {
  margin-bottom: 0.5rem;
}

.card-panel-form .searchable-select:last-child {
  margin-bottom: 0;
}

.card-panel-form .tox-tinymce {
  border: 1px solid #d4d9de !important;
  border-radius: 8px !important;
  overflow: hidden;
  box-shadow: none !important;
}

.card-panel-form .tox .tox-edit-area__iframe {
  background-color: transparent;
}

.card-panel-form .tox.tox-tinymce:focus-within {
  border-color: var(--color-IPPA) !important;
  box-shadow: 0 0 0 0.15rem rgba(66, 203, 181, 0.18) !important;
}

/* Boutons d'action bas du formulaire */
.btn-dark-action {
  background-color: var(--color-black);
  color: #ffffff;
  border: none;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.btn-dark-action:hover {
  background-color: #383a3c;
  color: #ffffff;
}

.btn-teal-action {
  background-color: var(--color-IPPA);
  color: var(--color-black);
  border: none;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
}

.btn-teal-action:hover {
  background-color: #36b19d;
  color: var(--color-black);
}

/* Style de texte de la colonne d'instructions */
.style-instructions p {
  line-height: 1.6;
  text-align: justify;
  margin-bottom: 1.2rem;
}

.panelFormTitle, .panelInstructionTitle{
  padding: 2rem 2.5rem;
}

.panelFormTitle{
  color: var(--color-black);
  background-color: var(--color-grey);
  border-left: 15px solid var(--color-black)!important;
}

.panelInstructionTitle{
  background-color: var(--color-black);
  border-left: 15px solid var(--color-IPPA)!important;
  color: var(--color-IPPA);
}

.panelFormTitle h3, .panelInstructionTitle h3{
  font-weight: 800;
  font-size: 1.2rem!important;
}

.panelInformationText{
  background-color: var(--color-grey);
}

.btnPanelForm{
  margin-bottom: -24px !important;
  margin-top: -44px !important;
  position: relative;
  z-index: 5;
}

.card-body-with-actions {
  padding-bottom: 3.5rem !important;
}

.btnPanelForm .btn{
  width: 270px;
  max-width: 100%;
}

.btnPanelForm .btn1{
  background-color: var(--color-black);
}

.btnPanelForm .btn1:hover{
  background-color: #383a3c;
  color: #ffffff;
}

.btnPanelForm .btn2{
  background-color: var(--color-IPPA);
  color: var(--color-black);
}

.btnPanelForm .btn2:hover{
  background-color: #36b19d;
  color: var(--color-black);
}

.form-label{
  color: var(--color-black);
  border-bottom-color: var(--color-IPPA)!important;
}

.form-control{
  border-color: var(--color-black)!important;
}

.formatImg{
  height: auto;
  width: 45px;
}

.panel-search-bar {
  display: flex;
  align-items: center;
}

.searchImg {
  position: absolute;
  left: 3px;                  /* Décale l'icône du bord gauche */
  top: 50%;
  transform: translateY(-50%);/* Centre verticalement l'icône */
  height: 40px;               /* Taille ajustée pour rentrer dans la pill */
  width: auto;
  z-index: 2;
  pointer-events: none;      /* Permet de cliquer à travers l'image vers l'input */
}

/* Espace à gauche pour éviter que le texte du placeholder ne chevauche l'icône */
.panel-search-bar input[type="search"] {
  padding-left: 50px !important;
  height: 44px;
}


/* --- Style du Footer pleine largeur --- */
.footer-wrapper {
  background-color: var(--color-black) !important;
  position: relative;
  z-index: 10;
  clear: both;
}

.border-teal {
  border-color: var(--color-IPPA) !important;
}

.btn-outline-teal {
  border-color: var(--color-IPPA);
  color: #fff;
}

.btn-outline-teal:hover {
  background-color: var(--color-IPPA) !important;
  color: #000 !important;
}

.liensRS img {
  transition: opacity 0.3s ease;
}

.liensRS img:hover {
  opacity: 0.7;
}

.footer-adresse-container {
  position: relative;
}

/* Le trait vertical : commence pile au haut du texte et descend jusqu'au bas du footer */
.footer-adresse-container::before {
  content: "";
  position: absolute;
  top: 0;                /* Alignement parfait sur le haut du titre */
  bottom: -3rem;         /* Descend jusqu'au bord inférieur du footer */
  left: 0;
  width: 5px;            /* Épaisseur du trait */
  background-color: var(--color-IPPA);
}

.adresse a i {
  color: var(--color-IPPA) !important;
}




/* RESPONSIVE*/

@media (min-width: 992px) and (max-width: 1200px) {
  /* Réduire légèrement le rembourrage et la taille de police pour les écrans intermédiaires */
  .sidebar-btn {
    padding-left: 0.25rem !important;
    padding-right: 0.5rem !important;
  }

  .sidebar-btn span {
    font-size: 0.78rem !important;
  }

  main{
    padding-top:8%!important
  }

  .main-content-dashboard{
    padding-top:0!important
  }

}

@media (min-width: 768px) and (max-width: 992px) {
  /* Réduire légèrement le rembourrage et la taille de police pour les écrans intermédiaires */
  main{
    padding-top:8%!important
  }

  .myPanelsBanner{
    margin-top: 8%!important
  }

}

@media (max-width: 1200px) {
  /* Réduire légèrement le rembourrage et la taille de police pour les écrans intermédiaires */
  .btnPanelForm{
    margin-bottom: 5%!important
  }
}

@media (max-width: 767px) {
  .panelDetailHeader {
    border-radius: 6px;
    overflow: hidden;
  }

  .panelTitle {
    font-size: 0.9rem !important;
    word-break: break-word;
  }

  .statutPanel {
    min-height: 48px;
    flex-grow: 1;
    text-align: center;
  }

  .btn-action {
    padding-right: 1rem !important;
  }

  .btnArrow{
    display: none!important
  }

  main{
    padding-top:22%!important
  }

  .bannerListPanel{
    padding-bottom: 10%!important;
  }

  .bannerListPanel h1{
    border-right: 0px!important
  }


  .panel-search-bar{
    margin: 0 1%
  }

  .myPanelsBanner{
    margin-top: 10%!important;
  }

  .myPanelsBanner h1{
    padding-top: 20%!important
  }

  .myPanel-card{
    display:inline!important;
  }

  .main-content-dashboard{
    padding-top:15%!important
  }

  .megaphone-line{
    display: none!important
  }

  .badge{
    border-radius: 0!important;
    width: 100%!important
  }

  .current-phase-badge{
    border-radius: 0!important;
  }

}

/*********************
 System messages (error / warning / success / info)
 Ported from cssGlobal.css — chart pages do not load that stylesheet
 *********************/
.main-content .messageSystem,
.main-content-dashboard .messageSystem,
.main-content .messageSystem_Error,
.main-content-dashboard .messageSystem_Error {
  margin: 0 0 1.5rem;
  overflow: hidden;
  border-radius: 0.25rem;
  position: relative;
  z-index: 5;
}

/* Flash sits above page banners; keep above overlapping cards (e.g. myPanels-section) */
.main-content > .container-fluid:has(.messageSystem),
.main-content > .container-fluid:has(.messageSystem_Error),
.main-content-dashboard > .container-fluid:has(.messageSystem),
.main-content-dashboard > .container-fluid:has(.messageSystem_Error) {
  position: relative;
  z-index: 5;
}

.messageSystem {
  background: #ffffff;
  border: 2px solid #4bb8b5;
  color: #4bb8b5;
  text-align: left;
}

.messageSystem_Error {
  background: #ffffff;
  border: 2px solid #c5464a;
  color: #c5464a;
  text-align: left;
}

.messageSystem_Title {
  background: #4bb8b5;
  color: #ffffff;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 15px;
  text-align: center;
  vertical-align: middle;
  padding: 0.4rem 0.75rem;
}

.messageSystem_Title_Error {
  background: #c5464a;
  color: #ffffff;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 15px;
  text-align: center;
  vertical-align: middle;
  padding: 0.4rem 0.75rem;
}

.messageSystem_Text {
  padding: 0.75rem 1rem 0.75rem 0.5rem;
  color: inherit;
  display: flex;
  align-items: center;
}

.messageSystem_Text ul {
  margin: 0;
  padding-left: 1.25rem;
}

.messageSystem_Text a {
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
}

.messageSystem_Icone {
  background: #4bb8b5;
  color: #ffffff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 0;
  min-height: 100%;
}

.messageSystem_Icone_Error {
  background: #c5464a;
  color: #ffffff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 0;
  min-height: 100%;
}

.messageSystem_Icone i,
.messageSystem_Icone_Error i {
  font-size: 3rem;
  line-height: 1;
}

/*********************
 Chair / user autocomplete (chart pages do not load cssGlobal.css)
 *********************/
.main-content .form-utilisateur,
.main-content .form-utilisateur-Panel {
  position: relative;
  width: 100%;
}

.main-content .form-utilisateur-Panel:before,
.main-content .form-utilisateur:before {
  content: '';
  height: 12px;
  width: 12px;
  border: 1px solid #3a3f52;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
}

.main-content .form-utilisateur-Panel.active:before,
.main-content .form-utilisateur.active:before {
  border-color: #8088a5;
  background-color: var(--color-IPPA);
}

.main-content .form-utilisateurlist {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  background-color: #ffffff;
  border: 1px solid #2b2b2b;
  border-top: 3px solid var(--color-IPPA);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  z-index: 40;
  max-height: 260px;
  overflow-y: auto;
}

.main-content .form-utilisateurlist p {
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1.3;
  padding: 0.65rem 0.85rem;
  margin: 0;
  color: #2b2b2b;
  border-bottom: 1px solid #e8ecef;
  transition: background-color 0.15s ease;
}

.main-content .form-utilisateurlist p:last-child {
  border-bottom: none;
}

.main-content .form-utilisateurlist p:hover {
  background-color: #d9f5f1;
}

.text-word-range-ok {
  color: var(--color-green) !important;
}

.text-word-range-ko {
  color: var(--color-orange) !important;
}

/* Allow dropdown to escape the form card */
.card-panel-form,
.card-panel-form .card-body {
  overflow: visible !important;
}

.searchable-select {
  position: relative;
  width: 100%;
  z-index: 1;
}

.searchable-select.is-open {
  z-index: 50;
}

.searchable-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.searchable-select-input {
  width: 100%;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232b2b2b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px 8px;
}

.searchable-select.is-open .searchable-select-input {
  border-color: var(--color-IPPA) !important;
  box-shadow: 0 0 0 0.15rem rgba(66, 203, 181, 0.2);
}

.searchable-select-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  z-index: 60;
  max-height: min(280px, 45vh);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid #2b2b2b;
  border-top: 3px solid var(--color-IPPA);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.searchable-select-option {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #e8ecef;
  background: #fff;
  color: #2b2b2b;
  font-size: 0.85rem;
  line-height: 1.3;
  padding: 0.65rem 0.85rem;
  cursor: pointer;
}

.searchable-select-option:last-child {
  border-bottom: none;
}

.searchable-select-option:hover,
.searchable-select-option.is-selected {
  background-color: #d9f5f1;
}

.searchable-select-empty {
  padding: 0.75rem 0.85rem;
  font-size: 0.85rem;
  color: #6c757d;
  font-style: italic;
}

.js-keyword-suggest.is-invalid-duplicate {
  border-color: #c5464a !important;
  box-shadow: 0 0 0 0.15rem rgba(197, 70, 74, 0.25);
}

/* Adaptation responsive des liens du header */
.top-nav-links a {
  font-size: 0.85rem;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .top-nav-links a {
    font-size: 0.7rem;
  }

  .navbar-brand img {
    max-height: 30px;
  }

  .search-nav input {
    width: 70px;
  }
}