.btn-light-blue {
    background-color: red;
    color: white !important;
}
.btn-light-blue:hover {
    background-color: white;
    color: red !important;
    border: 2px solid red;
}
.btn-border {
    border: 2px solid black;
}
.form-div {
    padding: 9px;
    background-color: #efefef;
}
/* Ajoutez ceci dans votre fichier CSS */
.te-tabs-inactive {
    display: inline-block;
    margin-right: 10px;
}

.pointable {
    cursor: pointer;
    text-decoration: none;
}

#tab-content {
    margin-top: 20px;
}
/*.dashboard-buttons {
display: flex;
gap: 10px;
}

.dashboard-button {
padding: 8px 12px;
background-color: #ccc;
border: none;
cursor: pointer;
outline: none;
}

.dashboard-button.active {
background-color: #007bff;
color: #fff; 
}


.panel {
background-color: #f9f9f9;
padding: 10px;
border: 1px solid #ddd;
margin-top: 5px;
}

.panel-content {
margin-top: 10px;
}

.radio-container {
margin-bottom: 8px;
}

/***/

/* styles.css */

/* Styles pour le conteneur principal */

.items-center {
    align-items: center;
    color: black;
}

.gap-2 {
    gap: 0.5rem;
}

.rounded-xl {
    border-radius: 0.75rem;
}

.juice\:rounded-lg {
    border-radius: 1rem;
}
*/ .juice\:py-1\.5 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.whitespace-nowrap {
    white-space: nowrap;
}

.icon-md {
    width: 1.5rem;
    height: 1.5rem;
}

.text-token-text-tertiary {
    color: #666666;
}
/* Styles pour le menu déroulant (popover) */
.popover {
    position: absolute;
    z-index: 1000;

}

/* Positionnement spécifique pour le popover par rapport au bouton */
.popover.above {
    position: fixed;
    left: 150px;
    top: -50px;
}

.popover.left {
    right: 0;
}

.popover.right {
    left: 0;
}

.popover.below {
    top: calc(100% + 5px);
}


.juice\:rounded-lg {
    border-radius: 1rem;
}

.juice\:py-1\.5 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.text-token-text-tertiary {
    color: #666666;
}
#popoverMenu {
    display: block;
    position: fixed;
    left: -50px;
    top: 40px;
    transform: translate(272px, 56px);
    min-width: max-content;
    will-change: transform;
    /* z-index: auto; */
    --radix-popper-available-width: 579.3333129882812px;
    --radix-popper-available-height: 896px;
    --radix-popper-anchor-width: 116.5625px;
    --radix-popper-anchor-height: 40px;
    --radix-popper-transform-origin: 0 0;
}
.flex {
    display: flex;
    align-items: center;
}
.gap-2 {
    gap: 0.5rem;
}
.gap-3 {
    gap: 0.75rem;
}


/* Portlet */
.portlet > .portlet-body.grey-cascade,
.portlet.grey-cascade {
    background-color: #95a5a6;
}

.portlet.solid.grey-cascade > .portlet-title,
.portlet.solid.grey-cascade > .portlet-body {
    border: 0;
    color: white;
}
.portlet.solid.grey-cascade > .portlet-title > .caption > i {
    color: white;
}

.portlet.box.red-cascade {
    border: 1px solid #b1bdbd;
    border-top: 0;
}
.portlet.box.red-cascade > .portlet-title {
    background-color: #e60000;
}
.portlet.box.red-cascade > .portlet-title > .caption > i {
    color: white;
}
.portlet.box.red-cascade > .portlet-title > .actions .btn-default {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid #d2d9d9;
    color: #e0e5e5;
}
.portlet.box.red-cascade > .portlet-title > .actions .btn-default:hover,
.portlet.box.red-cascade > .portlet-title > .actions .btn-default:focus,
.portlet.box.red-cascade > .portlet-title > .actions .btn-default:active,
.portlet.box.red-cascade > .portlet-title > .actions .btn-default.active {
    border: 1px solid #eef0f0;
    color: #fcfcfc;
}




/* general body settings */
body {
    color: #000;
    /*font-family: 'Open Sans', sans-serif; Modfified by Aida */
    font-family: Arial, Helvetica, sans-serif;
    padding: 0 !important;
    margin: 0 !important;
    /*font-size: 13px;*/
    direction: ltr;
}
* {
    box-sizing: border-box;  
}

/*
Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't 
properly apply the media queries in Bootstrap's CSS. To address this, 
you can optionally include the following CSS and JavaScript to work around this problem until Microsoft issues a fix.
*/
@-webkit-viewport {
    width: device-width;
}

@-moz-viewport {
    width: device-width;
}

@-ms-viewport {
    width: device-width;
}

@-o-viewport {
    width: device-width;
}

@viewport {
    width: device-width;
}

/* Internet Explorer 10 doesn't differentiate device width from viewport width, 
and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, following CSS code applied */
@-ms-viewport {
    width: auto !important;
}

/***
Custom Scrollbars
***/

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background-color: #eaeaea;
    border-left: 1px solid #cecece;
}

::-webkit-scrollbar-thumb {
    background-color: #cecece;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #aaa;
}

::-webkit-scrollbar-track {
    border-radius: 0;
    box-shadow: none;
    border: 0;
}

::-webkit-scrollbar-thumb {
    border-radius: 0;
    box-shadow: none;
    border: 0;
}

/***
General typography 
***/
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
    color: #444;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300 !important;
}

h1.block,
h2.block,
h3.block,
h4.block,
h5.block,
h6.block {
    padding-top: 10px;
    padding-bottom: 10px;
}

a {
    text-shadow: none !important;
    color: #0d638f;
}

/***
Fix link outlines after click
***/
a,
a:focus,
a:hover,
a:active {
    outline: 0;
}

/***
General backgrounds. Can be applied to any block or panel
***/
/*
.bg-blue {
background-image: none !important;
background-color: #4b8df8 !important;
border-color:#4b8df8 !important;
color: #fff !important;
}

.bg-red {
background-image: none !important;
background-color: #e02222 !important;
border-color: #e02222 !important;
color: #fff !important;
}

.bg-yellow {
background-image: none !important;
background-color: #ffb848 !important;
border-color: #ffb848 !important;
color: #fff !important;
}

.bg-green {
background-image: none !important;
background-color: #35aa47 !important;
border-color: #35aa47 !important;
color: #fff !important;
}

.bg-purple {
background-image: none !important;
background-color: #852b99 !important;
border-color: #852b99 !important;
color: #fff !important;
}

.bg-dark {
background-image: none !important;
background-color: #555555 !important;
border-color: #555555 !important;
color: #fff !important;
}

.bg-grey {
background-image: none !important;
background-color: #fafafa !important;
border-color: #fafafa !important;
}

/***
Font Awesome Icons
***/
/*
[class^="fa-"],
[class*=" fa-"] {
display: inline-block;
margin-top: 1px;
font-size: 14px;
*margin-right: .3em;
line-height: 14px;
}
*/
/***
Make font awesome icons fixed width(latest version issue)
***/
/*
li [class^="fa-"],
li [class*=" fa-"] {
display: inline-block;
width: 1.25em;
text-align: center;
}

/*
.fa-lg,
.icon-lg {
font-size: 16px;
}

.fa-2x {
font-size: 2em;
}
.fa-3x {
font-size: 3em;
}
.fa-4x {
font-size: 4em;
}
.fa-5x {
font-size: 5em;
}

.icon-default {
color: #ccc;
}

.icon-success {
color: #468847;
}

.icon-info {
color: #27a9e3; 
}

.icon-warning {
color: #dbc056;
}

.icon-danger {
color: #B94A48;
}
*/
/***
Close icon used for modal dialog and other UI element close buttons
***/
.close {
display: inline-block;
margin-top: 0;
margin-right: 0;
width: 9px;
height: 9px;
background-repeat: no-repeat !important;
text-indent: -10000px;
outline: none;

}

.header.navbar {
width: 100%;
padding: 0;
margin: 0;
border: 0;
box-shadow: none;
height: 42px;
min-height: 42px;
justify-content: center
}

.header.navbar.navbar-fixed-top {
z-index: 9995 !important;
}

.header.navbar .navbar-brand {
display: inline-block;
margin-top: -1px;
margin-right: 0;
padding-left: 0;
padding-right: 0;
width: 225px;
height: 42px;
}

.header.navbar .navbar-brand.text-logo {
padding-left: 20px;
padding-top: 12px;
}

.header.navbar .navbar-toggle {
margin: 8px 6px 4px;
padding: 2px 0 6px;
background-image: none;
filter:none;
box-shadow: none;
color: #fff;
border: 0;
}

.header.navbar .navbar-toggle:hover {
text-decoration: none;
background: none;
}

.header.navbar .navbar-nav {
margin-right: 20px;
display: block;
}

.header.navbar .navbar-nav > li {
margin: 0;
padding: 0;
}

.header.navbar .navbar-nav > li.dropdown,
.header.navbar .navbar-nav > li.dropdown > a {
padding-left: 4px;
padding-right: 4px;
}

.header.navbar .navbar-nav > li.dropdown > a:last-child {
padding-right: 0;
}

.header.navbar .navbar-nav > li.dropdown:last-child {
padding-right: 2px;
}

.header.navbar .navbar-nav > li.dropdown .dropdown-toggle {
margin: 0;
padding: 15px 10px 7px;
}

.header.navbar .navbar-nav > li.dropdown .dropdown-toggle > i {
font-size: 18px;
}

.header.navbar .navbar-nav > li.dropdown .dropdown-menu > li > a > i {
font-size: 14px;
}

.header.navbar .navbar-nav > li.dropdown.user .dropdown-toggle {
padding: 7px 0 6px 6px;
}

.header.navbar .navbar-nav > li.dropdown.user .dropdown-toggle:hover {
text-decoration: none;
}

.header.navbar .navbar-nav > li.dropdown.user .dropdown-toggle .username {
color: #ddd;
}

.header.navbar .navbar-nav > li.dropdown.user .dropdown-toggle i {
display: inline-block;
margin: 0;
font-size: 16px;
}

.header.navbar .navbar-nav > li.dropdown.user .dropdown-menu i {
width: 15px;
display: inline-block;
}

.header.navbar .navbar-nav > li.dropdown .dropdown-toggle .badge {
position: absolute;
top: 8px;
right: 20px;
}

/***
Header Search
***/
/*.header.navbar .search-form {
display: inline-block;
padding: 0;
height: 41px;
margin:0;
}

.header.navbar .search-form .form-control{
margin-top: 8px;
border: 0;
padding-top: 1px;
padding-right: 27px;
}

.header.navbar .search-form .submit {  
position: relative;
display: block;
float: right;
margin-top: -21px;
margin-right: 8px;
width: 13px;
height: 15px;
box-shadow: none;
border: 0px; 
padding: 0px;
background-color: none;
background-repeat: no-repeat !important;  
outline: none !important;
opacity: 0.8;
filter: alpha(opacity=80);
}

.header.navbar .search-form .submit:hover {
opacity: 1;
filter: alpha(opacity=100);  
}

/***
Language Bar
***/

.header.navbar .navbar-nav > li.dropdown.language {
padding-left: 0;
padding-right: 0;
margin: 0;
}

.header.navbar .navbar-nav > li.dropdown.language > a {
color: #ddd;
font-size: 13px;
padding: 11px 1px 11px 5px;
}

.header.navbar .navbar-nav > li.dropdown.language > a > img {
margin-bottom: 2px;
}

.header.navbar .navbar-nav > li.dropdown.language > a > i {
font-size: 16px;
}

.header.navbar .navbar-nav > li.dropdown.language > .dropdown-menu > li > a > img {
margin-bottom: 2px;
}

.header.navbar .navbar-nav .dropdown-menu {
margin-top: 3px;
}


.nav-item.active {
    text-decoration: none;
    background-color: red;
}
/***
Page container
***/
/*
.page-container {
margin: 0px;
padding: 0px;
position: relative;
}

.page-container:before,
.page-container:after {
display: table;
content: " ";
}

.page-container:after {
clear: both;
}

.page-header-fixed .page-container {
margin-top: 42px;  
}

/*** IE 8 Fixes ***/
/***
Page sidebar
***/

.ie8 .page-sidebar {
width: 225px;
float: left;
position: relative;
margin-right: -100%;
}

/***
Page content
***/

.ie8 .page-content-wrapper {
float: left;
width: 100%;
}

.ie8 .page-content {
margin-left: 225px;
margin-top: 0;
min-height: 760px;
padding: 25px 20px 20px;
}

.SplitPane {
position: relative !important; /* Change la position */

}
.swagger-editor .swagger-ui {
height: 100%;
max-height: 600px;
overflow-y: auto;
}
/*
.input-icon input {
padding-left: 33px !important;
}*/
.editor-wrapper {
height: 100%;
}
#editor-wrapper #ace-editor {
height: 100% !important;
}
/*
.input-icon i {
color: #ccc;
display: block;
position: absolute;
margin: 11px 2px 4px 10px;
width: 16px;
height: 16px;
font-size: 16px;
text-align: center;
}

.input-icon.right input {
padding-left: 12px !important;
padding-right: 33px !important;
}

.input-icon.right i {
right: 8px;
float: right;
}

.has-success .input-icon > i {
color: #468847;
}

.has-warning .input-icon > i {
color: #c09853;
}

.has-error .input-icon > i {
color: #b94a48;
}

/***
Portlets
***/
.portlet {
clear: both;
margin-top: 0;
margin-bottom: 25px;
padding: 0;
}

.portlet > .portlet-title {
margin-bottom: 15px;
border-bottom: 1px solid #eee;
}

.portlet > .portlet-title:after,
.portlet > .portlet-title:before {
content: "";
display: table;
line-height: 0;
}

.portlet > .portlet-title:after {
clear: both;
}

.portlet > .portlet-title > .caption {
display: inline-block;
font-size: 18px;
line-height: 18px;
font-weight: 400;
margin: 0 0 8px;
padding: 0;
}

.portlet > .portlet-title > .caption > i {
margin-top: 4px;
display: inline-block !important;
font-size: 13px;
margin-right: 5px;
color: #666;
}

.portlet.blue > .portlet-title > .caption,
.portlet.green > .portlet-title > .caption,
.portlet.yellow > .portlet-title > .caption,
.portlet.red > .portlet-title > .caption,
.portlet.purple > .portlet-title > .caption,
.portlet.light-blue > .portlet-title > .caption,
.portlet.grey > .portlet-title > .caption {
color: #fff;
}

.portlet.box.blue > .portlet-title > .caption > i,
.portlet.box.green > .portlet-title > .caption > i,
.portlet.box.red > .portlet-title > .caption > i,
.portlet.box.yellow > .portlet-title > .caption > i,
.portlet.box.red > .portlet-title > .caption > i,
.portlet.box.purple > .portlet-title > .caption > i,
.portlet.box.light-blue > .portlet-title > .caption > i,
.portlet.box.light-grey > .portlet-title > .caption > i {
color: #fff;
}

.sortable .portlet > .portlet-title {
cursor: move;
}

.portlet > .portlet-title > .tools,
.portlet > .portlet-title > .actions {
display: block;
padding: 0;
margin: 6px 0 0;
float: right;
}

.portlet > .portlet-title > .tools > a {
display: inline-block;
height: 16px;
margin-left: 5px;
}

.portlet > .portlet-title > .actions > .dropdown-menu i {
color: #000 !important;
}

.portlet > .portlet-title > .tools > a.remove {
margin-bottom: 2px;

background-repeat: no-repeat;
width: 11px;
}

.portlet > .portlet-title > .tools > a.config {
margin-bottom: 2px;
background-repeat: no-repeat;
width: 12px;
}

.portlet > .portlet-title > .tools > a.reload {
margin-bottom: 2px;
width: 13px;
}

.portlet > .portlet-title > .tools > a.expand {
margin-bottom: 2px;
width: 14px;
}

.portlet > .portlet-title > .tools > a.collapse {
margin-bottom: 2px;
width: 14px;
}

.portlet > .portlet-title > .tools > a:hover {
text-decoration: none;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
opacity: .6;
filter:'alpha(opacity=60)';
}

.portlet > .portlet-title > .actions > .btn-group {
margin-top: -13px;
}

.portlet > .portlet-title > .actions > .btn {
padding: 4px 10px;
margin-top: -14px;
}

.portlet > .portlet-title > .actions > .btn-group > .btn {
padding: 4px 10px;
margin-top: -1px;
}

.portlet > .portlet-title > .actions > .btn.btn-sm {
padding: 3px 8px;
margin-top: -13px;
}

.portlet > .portlet-title > .actions > .btn-group > .btn-sm {
padding: 3px 8px;
margin-top: -1px;
}

.portlet > .portlet-title > .pagination.pagination-sm {
display: inline-block !important;
margin: -4px 0 0;
}

@media(max-width: 767px) {
.portlet > .portlet-title > .actions.btn-set > .btn-group,
.portlet > .portlet-title > .actions.btn-set > .btn {
    margin-top: 0;
    margin-bottom: 5px;
}
}

.portlet > .portlet-body {
clear: both;
padding: 0;
word-wrap: break-word;
}

.portlet > .portlet-empty {
min-height: 125px;
}

.portlet > .portlet-body.light-blue,
.portlet.light-blue {
background-color: #bfd5fa !important;
}

.portlet > .portlet-body.blue,
.portlet.blue {
background-color: #4b8df8 !important;
}

.portlet > .portlet-body.red,
.portlet.red {
background-color: #e02222 !important;
}

.portlet > .portlet-body.yellow,
.portlet.yellow {
background-color: #ffb848 !important;
}

.portlet > .portlet-body.green,
.portlet.green {
background-color: #35aa47 !important;
}

.portlet > .portlet-body.purple,
.portlet.purple {
background-color: #852b99 !important;
}

.portlet > .portlet-body.light-red,
.portlet.light-red {
background-color: red !important;
}

.portlet > .portlet-body.grey,
.portlet.grey {
background-color: #555555 !important;
}
/*portlet color light blue added by Aida */
.portlet > .portlet-body.light-blue,
.portlet.light-blue {
background-color: #169ef4 !important;
}

/*  draggable girds */
/*
.ui-sortable-placeholder { 
border: 1px dotted black; 
visibility: visible !important; 
height: 100% !important; 
}

.ui-sortable-placeholder * { 
visibility: hidden; 
}

.sortable-box-placeholder {
background-color: #f5f5f5;
border: 1px dashed #DDDDDD;
display: block;

margin-top: 0px !important;
margin-bottom: 24px !important;
}

.sortable-box-placeholder * {
visibility:hidden;
}
*/
/***
Solid colored portlet
***/
.portlet.solid {
padding: 10px;
}

.portlet.solid > .portlet-title > .tools {
margin-top: 2px;
border: 0;
}

.portlet.solid > .portlet-title {
margin-bottom: 5px;
border: 0;
}

.portlet.solid.bordered > .portlet-title {
margin-bottom: 15px;
}

.portlet.solid.red > .portlet-title,
.portlet.solid.red > .portlet-title > .caption > i,
.portlet.solid.red > .portlet-body,

.portlet.solid.green > .portlet-title,
.portlet.solid.green > .portlet-title > .caption > i,
.portlet.solid.green > .portlet-body,

.portlet.solid.yellow > .portlet-title,
.portlet.solid.yellow > .portlet-title > .caption > i,
.portlet.solid.yellow > .portlet-body,

.portlet.solid.grey > .portlet-title,
.portlet.solid.grey > .portlet-title > .caption > i,
.portlet.solid.grey > .portlet-body,

.portlet.solid.purple > .portlet-title,
.portlet.solid.purple > .portlet-title > .caption > i,
.portlet.solid.purple > .portlet-body,

.portlet.solid.blue > .portlet-title,
.portlet.solid.blue > .portlet-title > .caption > i,
.portlet.solid.blue > .portlet-body {
border: 0;
color: #fff;
}

.portlet.bordered {
border-left: 2px solid #ddd;
}

/***
Box portlet
***/

.portlet.box {
padding: 0 !important
}

.portlet.box > .portlet-title {
padding: 8px 10px 2px;
border-bottom: 1px solid #eee;
color: #fff !important;
}

.portlet.box > .portlet-title > .tools {
margin-top: 3px;
}

/* portlet buttons */
.portlet.box > .portlet-body {
background-color: #fff;
padding: 10px;
}

.portlet.box > .portlet-title {
margin-bottom: 0;
}

.portlet.box.blue > .portlet-title {
background-color: #4b8df8;
}

.portlet.box.blue {
border: 1px solid #b4cef8;
border-top: 0;
}

.portlet.box.red > .portlet-title {
background-color: #e02222;
}
.ui-multiselect .actions {
padding: 5px;
background-color: #f0f0f0;
border: 1px solid #ddd;
}

.ui-multiselect ul {
list-style: none;
margin: 0;
padding: 0;
border: 1px solid #ddd;
background-color: #fff;
overflow-y: auto;
}

.ui-multiselect ul li {
padding: 8px;
border-bottom: 1px solid #ddd;
display: flex;
justify-content: space-between;
align-items: center;
}

.ui-multiselect ul li:last-child {
border-bottom: none;
}

.ui-multiselect .action {
cursor: pointer;
}

.ui-icon {
display: inline-block;
margin-left: 8px;
}


/* Alignement des deux listes */
.ui-multiselect {
display: flex;
justify-content: space-between;
align-items: center;
}

/* Styliser la flèche entre les deux listes */
.arrow {
font-size: 24px;
text-align: center;
padding: 0 15px;
color: #555;
}


/* Styliser les deux flèches */
.arrow-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.arrow-up,
.arrow-down {
font-size: 24px;
color: #555;
cursor: pointer;
transition: color 0.3s;
}

.arrow-up:hover,
.arrow-down:hover {
color: #000;
}

/* Alignement des deux listes */
.ui-multiselect {
display: flex;
justify-content: space-between;
align-items: center;
}

.border-top-red {
border-top: 2px solid #e60000 !important;
color: red !important;
}

/* CSS pour garantir que le footer reste en bas de la page */


/*.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}*/

#container {
flex: 1; 
padding: 2rem !important;
}

.footer {
background-color: #333;
color: white;
padding: 20px 0;
text-align: center;
}


.contact-info {
margin-top: 10px;
}

.contact-info h5 {
margin-bottom: 10px;
}

.contact-info a {
color: #e60000;
text-decoration: underline;
}

.contact-info a:hover {
color: #ffffff;
}

/* Styles pour la section principale */
.hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 100px 20px;
    color: white;
    z-index: 2;
}

.hero h1 {
font-size: 2.5rem;
margin-bottom: 20px;
}

.features {
padding: 40px 20px;
background-color: #ffffff;
}

.features h2 {
text-align: center;
margin-bottom: 30px;
}

.features .feature {
text-align: center;
margin-bottom: 20px;
}
/*
.api-section {
padding: 60px 20px;
background-color: #f0f0f0;
}

.api-section h2 {
margin-bottom: 40px;
}

.api-image {
position: relative;
overflow: hidden;
transition: transform 0.3s ease, opacity 0.3s ease;
text-align: center;
}

.api-image img {
transition: transform 0.3s ease;
}

.api-item {
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.5s forwards;
}

.api-item:nth-child(1) {
animation-delay: 0.3s;
}

.api-item:nth-child(2) {
animation-delay: 0.5s;
}

.api-item:nth-child(3) {
animation-delay: 0.7s;
}

.api-image:hover {
transform: scale(1.05);
}
*/


/* Section des APIs */
.api-section {
position: relative;
height: 100vh;
background-color: #f8f9fa;
padding-top: 100px;
text-align: center;
}

.api-section h2 {
margin-bottom: 50px;
font-size: 2rem;
}

/* Cercle rotatif pour les API */
.circle-container {
width: 300px;
height: 300px;
position: relative;
margin: 0 auto;
animation: rotate 10s infinite linear;
}

.api-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}

.api-item {
position: absolute;
text-align: center;
width: 80px;
transform-origin: center;
cursor: pointer;
transition: transform 0.3s ease-in-out;
}

.api-item:hover {
transform: scale(1.2); /* Zoom sur les images au survol */
}

/* Placement des images en cercle */
.api1 {
transform: rotate(0deg) translate(150px) rotate(0deg);
}
.api2 {
transform: rotate(45deg) translate(150px) rotate(-45deg);
}
.api3 {
transform: rotate(90deg) translate(150px) rotate(-90deg);
}
.api4 {
transform: rotate(135deg) translate(150px) rotate(-135deg);
}
.api5 {
transform: rotate(180deg) translate(150px) rotate(-180deg);
}
.api6 {
transform: rotate(225deg) translate(150px) rotate(-225deg);
}
.api7 {
transform: rotate(270deg) translate(150px) rotate(-270deg);
}
.api8 {
transform: rotate(315deg) translate(150px) rotate(-315deg);
}

/* Animation de rotation */
@keyframes rotate {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}

/* Centre pour la description */
.description-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
display: none; /* Caché par défaut */
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 20px;
border-radius: 10px;
}

/* Bouton pour fermer la description */
.close-description {
background-color: #007bff;
color: white;
border: none;
padding: 5px 10px;
margin-top: 10px;
border-radius: 5px;
cursor: pointer;
}
@keyframes fadeInUp {
to {
    opacity: 1;
    transform: translateY(0);
}
}
.about-section {
padding: 60px 20px;
background-color: #f8f9fa;
}
.about-section h2 {
margin-bottom: 30px;
}
.about-section p {
margin-bottom: 20px;
}

#backToTop {
position: fixed;
bottom: 25px;
right: 10px;
display: none;
background-color: red;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: opacity 0.3s ease;
}

#backToTop:hover {
background-color: #0056b3;
}


#notificationIcon {
position: relative;
cursor: pointer;
width: 40px;
}

#notificationCount {
position: absolute;
top: -5px;
right: -1px;
background-color: red;
color: white;
border-radius: 50%;
padding: 2px 5px;
}

.marquee-alert {
position: absolute;
right: 0;
top: 15px;
white-space: nowrap;
overflow: hidden;
width: 100%;
background-color: transparent;
/*border-color: red;*/
color: red;
padding: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
animation: marquee 10s linear infinite;
}

@keyframes marquee {
0% {
    transform: translateX(100%);
}
100% {
    transform: translateX(-100%);
}
}

.btn-danger {
    background-color: #e60000 !important;
}
#navbarNav {
 padding: 10px;
 font-weight: 600;
}
.language-selector {
    position: absolute;
    top: 10px;
    right: 20px;
    display: flex;
    gap: 1rem;
    font-size: 14px;
}

.navbar {
    padding: 0 !important;
}