body {
    background-color: white;
    font-family : CenturyGothic, "Century Gothic", sans-serif !important;
    overflow-x: hidden;
    height: 100%;
}


.btn-group-button {
    gap: 5px;
}

.btn-campagne{
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #6a1f6b;
    --bs-btn-border-color: #6a1f6b;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #6a1f6b;
    --bs-btn-hover-border-color: #6a1f6b;
    --bs-btn-focus-shadow-rgb: 11, 172, 204;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #942c96;
    --bs-btn-active-border-color: #6a1f6b;
    --bs-btn-active-shadow: inset 0 3px 5px rgb(255, 255, 255);
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: #942c96;
    --bs-btn-disabled-border-color: #6a1f6b;
}

/* Sidebar wrapper */
#sidebarLeft {
  background-color: #191b29;
  /* padding: 0 1.5rem 2rem 1.5rem; */
  color: white;
  min-height: 100vh;
}

/* Logo centré */
#sidebarLeft img {
  margin: 0 auto 2rem;
  display: block;
  max-width: 100px;
}

/* Lien de menu */
#sidebarLeft a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: black;
  font-size: 1.2rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  transition: background-color 0.3s;
}

#sidebarLeft span {
color: black;
font-size: 1rem;
}

/* Icône dans les liens */
#sidebarLeft a i {
  margin-right: 0.75rem;
  font-size: 1.2rem;
}

/* Hover / Active */
#sidebarLeft a:not(#logo-header):hover,
#sidebarLeft a.active {
  background-color: #6a1f6b;
  color: white;
}
#sidebarLeft a:not(#logo-header):hover span,
#sidebarLeft a.active span {
  color: white;
}

.border-sidebar {
    --bs-border-opacity: 1;
    border-color: rgb(213 213 213) !important;;
}
/* Déconnexion */
#logout a {
  display: inline-block;
  font-size: 0.9rem;
  text-decoration: underline;
  color: white;
}
#logout-responsive a {
  display: inline-block;
  font-size: 0.9rem;
  text-decoration: underline;
  color: white;
}



.text-fushia {
    --bs-text-opacity: 1;
    color: #c02783 !important;
}

.text-purple {
    --bs-text-opacity: 1;
    color: #6a1f6b !important;
}

.text-orange {
    --bs-text-opacity: 1;
    color: #e7541f !important;
}

 h4{
  font-family : CenturyGothic, "Century Gothic", sans-serif !important;
}

 h6{
  font-family : CenturyGothic, "Century Gothic", sans-serif !important;
}


/* CSS BOUTON RADIO */
#section-impact{
  background-color :#6a1f6b;
}

#section-incitation {
  background-color : #e7541f;
}

#section-perception{
  background-color :rgb(192, 39, 131);
}


/* CSS BOUTON VIDEO ET PTT */
#bouton-video {
  color : #6a1f6b;
}
#bouton-ppt {
  color : #e7541f;
}

#bouton-upload {
  color : #6a1f6b;
}


/* CSS CALCULETTE */

@font-face {
    font-family: 'CenturyGothic';
    font-style: normal;
  	font-weight: 400;
  	src:url('./fonts/Century Gothic/centurygothic.ttf') format('truetype'),
        url('./fonts/Century Gothic/centurygothic.eot') format('eot'),
        url('./fonts/Century Gothic/centurygothic.woff"') format('woff'),
        url('./fonts/Century Gothic/centurygothic.svg")') format('svg');
}


@font-face {
	font-family: "CenturyGothic";
	font-weight: bold;
	font-style: normal;
	src:url('./fonts/Century Gothic/centurygothic_bold.ttf') format('truetype'),
		url('./fonts/Century Gothic/centurygothic_bold.eot') format('eot'),
		url('./fonts/Century Gothic/centurygothic_bold.woff"') format('woff'),
		url('./fonts/Century Gothic/centurygothic_bold.svg")') format('svg');
}


body {
	font-family: 'CenturyGothic','Century Gothic', sans-serif !important; 
	font-size: 0.9rem !important;
	line-height: 1.42857143;
	color: #333;
	background-color: #ffffff;
}

.fs-24-bold{
  font-weight: bold !important;
  font-size: 24px !important;
}



/*
partie 1 Structure
*/











/* CSS responsive  */

/* ---- Générale pour les cards dynamiques ---- */
#charts-container .card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ---- Radial chart et Bar chart : même hauteur card ---- */
#charts-container .card-body {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- ApexCharts : forcer les graphes à bien se redimensionner ---- */
#charts-container .apexcharts-canvas {
    max-width: 100% !important;
    height: auto !important;
}

#charts-container .apexcharts-svg {
    max-width: 100% !important;
    height: auto !important;
}



/* ---- Form controls (selects etc) pour mobile ---- */
@media (max-width: 576px) {
    select.form-select {
        font-size: 0.9rem;
    }
    label.form-label {
        font-size: 0.9rem;
        text-align: center;
        display: block;
    }
}

/* ---- Eviter tout débordement horizontal ---- */
body, html, .container-fluid {
    overflow-x: hidden;
}




/* //CSS SIDEBAR  */
/* Taille par défaut (écrans grands) */
#sidebarLeft a {
    font-size: 1rem;
}

#sidebarLeft i {
    font-size: 1.0rem;

}



.fs-7 {
    font-size: 0.8rem !important;
}


/* CSS excel form */
#excel_upload_excelFile {
  padding-left: 5px;
}


.form-check-input {
  width: 1.2em !important;
  height: 1.2em !important;
  border: none;
  margin-right: 0.5em;
}

.form-check-label{
  /* margin-left: 4% !important; */
  vertical-align: middle;
}




/* charts */
#charts-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0rem;
}

.chart-col {
    flex: 1 1 30%;
    max-width: 33%;
}

#charts-container.two-charts .chart-col {
    flex: 1 1 45%;
    max-width: 50%;
}


/* Loading */
#loading-spinner{
  z-index: 1;
}

#sidebarRight {
    right: 0;
    left: auto;
}



#charts-container > .col > .card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#charts-container .card-body {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}


.offcanvas-body a {
    color: black;
    text-decoration: none;
    margin-bottom: 1rem;
}

.offcanvas-body a:not(#logo-header):hover {
    text-decoration: underline;
}
.offcanvas-body h2{
  color :black;
  font-size : 20px;
}

.offcanvas-body i{
  color :black;
  margin-left: 5%;
  font-size : 20px;
}

/* Menu Sidebar*/
.offcanvas.offcanvas-start-iligo {
  top: 0;
  left: 0;
  width: var(--bs-offcanvas-width);
  transform: translateX(-100%);
}

.offcanvas-body{
  flex-direction: column;
  display: flex;
  background-color: white;
}

.btn-close{
  color:white;
}



.item-menu {
  display: flex;
  align-items: center;
  border-radius: 20px;
  transition: background-color 0.3s ease;
  height: 40px;
}

.item-menu a:not(#logo-header):hover, 
.item-menu a:active,
.active .item-menu {
  background-color: #6A1F6B;
  text-decoration: white !important;
}

.offcanvas-body a.active .item-menu i {
  color: white;
}

.offcanvas-header{
  background-color: #6A1F6B;
}

.offcanvas-backdrop.fade.show {
  pointer-events:none 
}

.custom-button{
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  gap: 15px;
  margin-top: 1%;
}

.border-10 {
  border-width: 10px !important;
}

.offcanvas-backdrop.fade.show {
    pointer-events: none;
}

/* Pour pas que le deco qui colle le bas de page sois trop proche  */
/* #logs-menu{
  margin-bottom: 5rem !important;
} */

#deconnexion{
    padding:  1rem !important;
}



.btn-success {
  text-transform: uppercase;
}

a {
    color: #6A1F6B; 
    text-decoration: none; 
}

#campagne-suggestions.show {
    display: block;
}


.btn-iboard-rose{
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #c02783;
    --bs-btn-border-color: #c02783;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #c02783;
    --bs-btn-hover-border-color: #c02783;
    --bs-btn-focus-shadow-rgb: 11, 172, 204;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #6A1F6B;
    --bs-btn-active-border-color: #c02783;
    --bs-btn-active-shadow: inset 0 3px 5px rgb(255, 255, 255);
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: #6A1F6B;
    --bs-btn-disabled-border-color: #c02783;
}

.btn-iboard-rose-upper{
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #c02783;
    --bs-btn-border-color: #c02783;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #c02783;
    --bs-btn-hover-border-color: #c02783;
    --bs-btn-focus-shadow-rgb: 11, 172, 204;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #6A1F6B;
    --bs-btn-active-border-color: #c02783;
    --bs-btn-active-shadow: inset 0 3px 5px rgb(255, 255, 255);
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: #6A1F6B;
    --bs-btn-disabled-border-color: #c02783;
    text-transform: uppercase;
}

.form-control{
  font-size : 0.9rem;
}




.text-info {
    --bs-text-opacity: 1;
    color: #e7541f !important;
}

.border-purple {
    --bs-border-opacity: 1;
    border-color: #6A1F6B !important;
}


.dropdown-menu{
  overflow:hidden;
}

.h-82
 {
    height: 82% !important;
}



/* .h-94{
  height: 94% !important;
} */



/* reponsive */
/* home */
@media (min-width: 768px) {
    #charts-container.force-two-charts > div {
      flex: 0 0 50%;
      max-width: 50%;
    }
    .fs-md-4 {
      font-size: calc(1.275rem + .3vw) !important;
    }
    .border-md-purple{
      --bs-border-opacity: 1;
      border-color: #6A1F6B !important;
    }
    .border-md-end {
      border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  }
  .bg-md-light {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
  }
  #img-logo {
    max-width: 150px;
  }
  #logout-responsive{
    display: none !important;
  }
}


/* navbar decalage menue administration  */
@media (min-width: 1400px) {
    #nav-menu-admin {
        margin-left: 20px;
    }
}

@media (max-width: 1400px) {
    #nav-menu-admin {
        margin-left: 5px;
    }
}

@media (max-width: 1300px) {
#sidebarLeft a {
  padding: 0.75rem 0.1rem 0.75rem 1rem;
}
}


/* Écrans petits (ex : <768px) */
@media (max-width: 767.98px) {
    #sidebarLeft a {
        font-size: 0.75rem;
        padding: 0.3rem 0.5rem;
    }

    #sidebarLeft i {
        font-size: 0.9rem;
        margin-right: 0.3rem;
    }

    #sidebarLeft img {
        max-width: 80px;
    }

    #logout .btn-link i {
        font-size: 1rem;
    }

    #logout-responsive .btn-link i {
        font-size: 1rem;
    }

    #bouton-log {
        flex-direction: column;
    }

    #img-logo {
       max-width: 250px;
    }
    #logout{
      display: none;
    }
}

@media (min-width: 1200px) {
    .flex-lg-row {
        flex-direction: row !important;
    }
}

/* ---- Ajuster les paddings internes des cards sur petit écran ---- */
@media (max-width: 768px) {
    #charts-container .card {
        padding: 0.5rem;
    }
    #logo-iligo{
    max-width: 140px !important;
  }

  #logo-client{
    max-width: 100px !important;
  }
    
}

/* ---- Responsive layout Bootstrap grid : col-12 full width en mobile ---- */
@media (max-width: 576px) {
    #charts-container > div {
        width: 100% !important;
        max-width: 100% !important;
    }

    #charts-container .card-header h3,
    #charts-container .card-header h5 {
        font-size: 1.1rem;
        /* text-align: center; */
        word-wrap: break-word;
    }

    #charts-container .card-body {
        padding: 0.5rem;
    }

    #section-select-container .form-check {
        text-align: center;
        margin-bottom: 10px;
    }

    #section-select-container label {
        display: block;
        width: 100%;
    }

    #section-select-container {
        margin-left: 0 !important;
    }

    #sidebarLeft a {
        font-size: 0.65rem;
    }

    #sidebarLeft i {
        font-size: 0.8rem;
    }

    #sidebarLeft img {
        max-width: 60px;
    }
}

@media (max-width:992px){
  #sidebarLeft { 
    position:static !important; 
  }
  .header-campaign {
    width: 50%;
    display: contents;
  }
  #custom-campaign {
    display: none;
  }
}

/* Campagne auto-complete :  */
.dropdown-items {
    display: block;
    width: 100%;
    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
    clear: both;
    font-weight: 400;
    color: var(--bs-dropdown-link-color);
    text-align: inherit;
    text-decoration: none;
    white-space: wrap; 
    background-color: transparent;
    border: 0;
    border-radius: var(--bs-dropdown-item-border-radius, 0);
}

.dropdown-menu-campagne {
    --bs-dropdown-zindex: 1000;
    /* --bs-dropdown-min-width: 10rem; */
    --bs-dropdown-padding-x: 0;
    --bs-dropdown-padding-y: 0.5rem;
    --bs-dropdown-spacer: 0.125rem;
    --bs-dropdown-font-size: 1rem;
    --bs-dropdown-color: var(--bs-body-color);
    --bs-dropdown-bg: var(--bs-body-bg);
    --bs-dropdown-border-color: var(--bs-border-color-translucent);
    --bs-dropdown-border-radius: var(--bs-border-radius);
    --bs-dropdown-border-width: var(--bs-border-width);
    --bs-dropdown-inner-border-radius: calc(var(--bs-border-radius) - var(--bs-border-width));
    --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
    --bs-dropdown-divider-margin-y: 0.5rem;
    --bs-dropdown-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --bs-dropdown-link-color: var(--bs-body-color);
    --bs-dropdown-link-hover-color: var(--bs-body-color);
    --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: #0d6efd;
    --bs-dropdown-link-disabled-color: var(--bs-tertiary-color);
    --bs-dropdown-item-padding-x: 0.60rem;
    --bs-dropdown-item-padding-y: 0.25rem;
    --bs-dropdown-header-color: #6c757d;
    --bs-dropdown-header-padding-x: 1rem;
    --bs-dropdown-header-padding-y: 0.5rem;
    position: absolute;
    z-index: var(--bs-dropdown-zindex);
    display: none;
    min-width: var(--bs-dropdown-min-width);
    /* padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x); */
    margin: 0;
    font-size: 14px;
    color: var(--bs-dropdown-color);
    text-align: left;
    list-style: none;
    background-color: var(--bs-dropdown-bg);
    background-clip: padding-box;
    border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
    border-radius: var(--bs-dropdown-border-radius);
}
.dropdown-items:hover {
    background-color: #f0f0f0; 
}

option{
  width: 20px;
}



@media (min-width: 1600px) {
    .h-xl-81{
      height: 81% !important;
    }
    .h-xl-83{
      height: 83% !important;
    }
}
@media (min-width: 700px) and (max-width: 1400px) {
    .h-lg-78 {
        height: 78% !important;
    }
    .h-lg-79 {
        height: 79% !important;
    }
  }

  .ms-5{
    margin-left: 2.0rem !important;
  }

  /* #logo-iligo{
    max-width: 150px;
  }

  #logo-client{
    max-width: 100px;
  } */

    #logo-iligo{
    max-width: 100px;
  }