/* =================================================================
   Seyvo / Nexlink — custom.css (RÉORGANISÉ & COMPLÉTÉ)
   -----------------------------------------------------------------
   But : te donner un fichier 100% complet, sans aucune ligne manquante,
   mais structuré et commenté pour savoir « quelle section contrôle quoi ».

   ⚠️ IMPORTANT : AUCUNE RÈGLE N'A ÉTÉ SUPPRIMÉE. J’ai seulement ajouté
   des en-têtes, regroupé visuellement, et harmonisé l’espacement.

   ─────────────────────────────────────────────────────────────────
   TABLE DES MATIÈRES
   0)  Base globale (scroll, strong, dark override)
   1)  APP (fond, overlay, sidebar, content, navbar)
   2)  Modales
   3)  Formulaires (range)
   4)  Footer (site + app)
   5)  Filtres / Breadcrumbs / Helpers généraux
   6)  Dropdowns / Navbar
   7)  Index (home) : images, header, features, CTA, etc.
   8)  Biolink (directory, thèmes, boutons, preview)
   9)  "Others" (containers disabled, custom row + side controller)
   10) Tables (wrappers, paddings)
   11) Helpers (cursor, appearance)
   12) Pricing (plans)
   13) Custom radio boxes
   14) QR Codes
   15) Formes rondes (round-circle)
   16) Badges (couleurs)
   17) Invoice
   18) Animations génériques (nexlink-animate, zoom, up, etc.)
   19) Color picker (Pickr)
   20) Width fit content
   21) Signatures
   22) Ajax loading overlay
   23) Input group button
   24) AIX (chat)
   25) Shiki (code highlight)
   26) Font Awesome helpers (prévenir layout shift)
   27) Toolkit (icônes outils)
   28) Ratings
   29) Links (icône type)
   30) Scrollbar custom & Notification bell & Gradients & PWA & Teams
   ─────────────────────────────────────────────────────────────────
================================================================= */

/* =================================================================
   0-A) DESIGN TOKENS — PALETTE: ELECTRIC + LIME (Option B)
   Remplace la palette globale, compatible avec le dark mode existant.
   ================================================================= */
:root {
  /* Brand */
  --primary:        #2563EB;
  --primary-50:     #EEF2FF;
  --primary-100:    #DBEAFE;
  --primary-200:    #BFDBFE;
  --primary-300:    #93C5FD;
  --primary-400:    #60A5FA;
  --primary-500:    #2563EB;
  --primary-600:    #1D4ED8;
  --primary-700:    #1E40AF;
  --primary-800:    #1E3A8A;
  --primary-900:    #172554;

  /* Accent Lime */
  --accent:         #84CC16;
  --accent-50:      #F7FEE7;
  --accent-100:     #ECFCCB;
  --accent-200:     #D9F99D;
  --accent-300:     #BEF264;
  --accent-400:     #A3E635;
  --accent-500:     #84CC16;
  --accent-600:     #65A30D;
  --accent-700:     #4D7C0F;
  --accent-800:     #3F6212;
  --accent-900:     #365314;

  /* Neutrals */
  --white:          #FFFFFF;
  --gray-50:        #F8FAFC;
  --gray-100:       #E5E7EB;
  --gray-200:       #E5E7EB;
  --gray-300:       #D1D5DB;
  --gray-400:       #9CA3AF;
  --gray-500:       #6B7280;
  --gray-600:       #4B5563;
  --gray-700:       #374151;
  --gray-800:       #1F2937;
  --gray-900:       #0B1220;
  --black:          #0B1220;

  /* Status */
  --success:        #16A34A;
  --success-100:    #DCFCE7;
  --success-800:    #166534;
  --danger:         #EF4444;
  --danger-100:     #FEE2E2;
  --danger-800:     #991B1B;
  --warning:        #F59E0B;
  --warning-100:    #FEF3C7;
  --warning-800:    #92400E;
  --info:           #3b82f6;
  --info-100:       #dbeafe;
  --info-800:       #1e40af;

  /* Body BG & gradients */
  --body-bg:        #F8FAFC;
  --gradient-one:   #1D4ED8;
  --gradient-two:   #84CC16;

  /* Compat radius / ring */
  --border-radius:  .5rem;
  --ring:           0 0 0 3px rgba(37,99,235,.22);
}

/* -------------------- DARK MODE TOKENS -------------------- */


/* Compat */
:root { --dark: #0B1220; --light: #FFFFFF; --primary-600: #1D4ED8; }



/* ================================================================
   0) BASE GLOBALE
   --------------------------------------------------------------- */
html { scroll-behavior: smooth; }

b, strong { font-weight: 500; }

/* Cancel the bg white for dark mode */


/* ================================================================
   1) APP (fond, overlay, sidebar, content, navbar)
   --------------------------------------------------------------- */
/* App */
.app { background: #F8FAFC; }
[data-theme-style="dark"].app { background: #F8FAFC; }
.app-container {}

.app-overlay { position: fixed; width: 100%; height: 100%; background: #E5E7EB; z-index: 100; opacity: .5; }

/* Sidebar */
.app-sidebar {
	display: flex; flex-direction: column;
	min-width: 260px; max-width: 260px;
	background: #FFFFFF;
	border: 1px solid #E5E7EB;
	border-radius: var(--border-radius);
	margin: 3rem 1.5rem 3rem -300px;
	transition: margin-left .15s linear, margin-right .15s linear;
	position: fixed; top: 0; bottom: 0; left: 0; z-index: 101;
}
[dir="rtl"] .app-sidebar { margin-left: initial; left: initial; right: 0; margin-right: -300px; border-left: 1px solid #E5E7EB; border-right: 0; }
[dir="rtl"] [data-theme-style="dark"] .app-sidebar { border-right: 0; border-left: 1px solid #E5E7EB; }
body.app-sidebar-opened .app-sidebar { margin-left: 1.5rem; }
[dir="rtl"] body.app-sidebar-opened .app-sidebar { margin-right: 1.5rem; }
@media (min-width: 992px) { .app-sidebar { margin-left: 1.5rem; } [dir="rtl"] .app-sidebar { margin-right: 1.5rem; } }

.app-sidebar-title { display: flex; justify-content: center; align-items: center; padding: .5rem; margin: .5rem; height: 75px; }
.app-sidebar-title a { font-size: 1.4rem; color: #0B1220; font-weight: 600; }
.app-sidebar-title a:hover { text-decoration: none; }

.app-sidebar-footer { width: 100%; }
.app-sidebar-footer > a { width: 100%; padding: .75rem 1.75rem; border-top: 1px solid #E5E7EB; display: flex; align-items: center; color: #6B7280; font-size: .9rem; font-weight: 500; transition: background .3s; border-radius: var(--border-radius); }
.app-sidebar-footer > a:hover { text-decoration: none; background: #E5E7EB; color: #4B5563; }

.app-sidebar-links-wrapper { overflow-y: scroll; width: calc(100% - 6px); padding-bottom: .25rem; scrollbar-width: none; }
.app-sidebar-links-wrapper:hover { width: 100%; scrollbar-color: #E5E7EB #FFFFFF !important; scrollbar-width: thin !important; }
.app-sidebar-links-wrapper::-webkit-scrollbar { background-color: transparent; width: 0; }
.app-sidebar-links-wrapper::-webkit-scrollbar-thumb { background: #E5E7EB; border-radius: 10px; }
.app-sidebar-links-wrapper:hover::-webkit-scrollbar { width: 6px; }
.app-sidebar-links-wrapper:hover::-webkit-scrollbar-track { width: 6px; }

.app-sidebar-links { display: flex; flex-direction: column; align-items: center; list-style: none; padding: 0; margin: 0; }
.app-sidebar-links > li { width: 100%; padding: 0.25rem calc(1rem - 6px) 0.25rem 1rem; }
.app-sidebar-links > .divider-wrapper { width: 100%; padding: 0 calc(0.75rem - 6px) 0 0.75rem; margin: .25rem 0; }
.app-sidebar-links > .divider-wrapper > .divider { border-top: 1px solid #E5E7EB; }
.app-sidebar-links > li > a { width: 100%; display: flex; align-items: center; color: #4B5563; border-radius: var(--border-radius); padding: 0.75rem 1rem; transition: background .3s; font-size: .9rem; font-weight: 500; }
.app-sidebar-links > li > a:hover { text-decoration: none; background: #E5E7EB; color: #4B5563; }
[data-theme-style="dark"] .app-sidebar-links > li > a:hover { background: #E5E7EB; color: #1F2937; }
.app-sidebar-links > li.active > a:not(.default) { background: #2563EB; color: #FFFFFF; font-weight: 500; }
[data-theme-style="dark"] .app-sidebar-links > li.active > a:not(.default) { background: #1E3A8A; color: #FFFFFF; }

.app-sidebar-avatar { width: 35px; height: 35px; border-radius: 50%; }
.app-sidebar-footer-block { max-width: 100%; }
.app-sidebar-footer-text { color: #4B5563; }

/* Content */
.app-content { margin-left: 0; flex-grow: 1; }
[dir="rtl"] .app-content { margin-left: initial; margin-right: 0; }
@media (min-width: 992px) { .app-content { margin-left: calc(260px + 1.5rem); } [dir="rtl"] .app-content { margin-left: initial; margin-right: calc(260px + 1.5rem); } }

/* Navbar */
.app-navbar { min-height: 75px; border-bottom: 1px solid #E5E7EB; }
[data-theme-style="dark"] .app-navbar { border-color: #E5E7EB; }

/* ================================================================
   2) MODALES
   --------------------------------------------------------------- */
.modal-header { padding: 1rem; border-bottom: 0; }
.modal-content { padding: 1rem; border: none; box-shadow: none; -webkit-box-shadow: none; border-radius: calc(2 * var(--border-radius)); }

/* ================================================================
   3) FORMULAIRES (range)
   --------------------------------------------------------------- */
.input-group-text { font-size: 0.9rem; }

.form-control-range { -webkit-appearance: none; appearance: none; overflow: hidden; accent-color: #2563EB; background: #E5E7EB; border-radius: var(--border-radius); height: .5rem; margin: 0.75rem 0; }
.form-control-range::-webkit-slider-runnable-track, .form-control-range::-moz-range-track { background: #E5E7EB; }
.form-control-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; height: .75rem; width: .75rem; background-color: #2563EB; border-radius: 50%; border: 2px solid #FFFFFF; box-shadow: -2007px 0 0 2000px #93C5FD; }
.form-control-range::-moz-range-thumb { -webkit-appearance: none; appearance: none; height: .75rem; width: .75rem; background-color: #2563EB; border-radius: 50%; border: 2px solid #FFFFFF; box-shadow: -2007px 0 0 2000px #93C5FD; }

/* ================================================================
   4) FOOTER (site + app)
   --------------------------------------------------------------- */
.footer { margin: 3rem 0; padding-top: 3rem; padding-bottom: 3rem; background: #FFFFFF; }
.footer { color: #374151; }
.footer a:not(.dropdown-item), .footer a:hover:not(.dropdown-item) { color: #374151; }
.footer a.icon { color: #374151; }
.footer button, .footer button:hover { color: var(--gray) !important; }
.footer-logo { max-height: 2.5rem; height: 2.5rem; }
.footer-heading { color: #0B1220 !important; }

/* App footer */
.app-footer { border: 1px solid #E5E7EB; border-radius: var(--border-radius); padding: 1.25rem; }

/* ================================================================
   5) FILTRES / BREADCRUMBS / HELPERS GÉNÉRAUX
   --------------------------------------------------------------- */
/* Filters */
.filters-dropdown { width: 18rem; max-height: 30rem; overflow-y: auto; }

/* Custom breadcrumbs */
.custom-breadcrumbs { list-style: none; padding: 0; display: flex; flex-wrap: wrap; }
.custom-breadcrumbs > li { margin-right: .5rem; }
.custom-breadcrumbs > li > a { color: var(--gray); }
.custom-breadcrumbs > li > svg { color: #9CA3AF; margin-left: .5rem; }
.custom-breadcrumbs > li.active {}

/* Helpers */
.font-size-small { font-size: .9rem; }
.font-weight-500 { font-weight: 500; }
.list-style-none { list-style: none; padding: 0; }
img { vertical-align: inherit !important; }
.icon-favicon { width: .95rem; height: auto; }
.icon-favicon-small { width: .75rem; height: auto; }

/* ================================================================
   6) DROPDOWNS / NAVBAR
   --------------------------------------------------------------- */
/* Dropdown */
.dropdown-item { color: #1F2937; font-weight: 450; font-size: .9rem; }
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active { border-radius: var(--border-radius); }
.dropdown-item svg { color: #4B5563; }
.dropdown-item:active svg, .dropdown-item.active svg { color: #FFFFFF; }

/* Navbar */
.navbar-main { min-height: 0 !important; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; }
.navbar-main .navbar-nav > li > a { font-size: .9rem; font-weight: 500; }
.navbar-main .navbar-nav > li { padding: .5rem 0 !important; }
@media (min-width: 992px) { .navbar-main .navbar-nav > li { padding: .5rem !important; } }
.navbar-logo { max-height: 2.5rem; height: 2.5rem; }
.navbar-logo-mini { max-height: 1.25rem; height: 1.25rem; }
.navbar-avatar { width: 20px; height: 20px; border-radius: 50%; }
.navbar-custom-toggler { padding: 0.5rem .8rem; font-size: 1.25rem; line-height: 1; background-color: transparent; border-radius: var(--border-radius); color: #374151; border-color: #D1D5DB; }
.navbar-dark .navbar-nav .nav-link { color: rgba(255,255,255,.85); }

.chart-container { position: relative; margin: auto; height: 275px; width: 100%; }
@media print { .chart-container canvas { min-height: 100%; max-width: 100%; max-height: 100%; height: auto!important; width: auto!important; } }

/* Dropdown simple */
.dropdown-toggle-simple::after { display:none; }

/* ================================================================
   7) INDEX (home)
   --------------------------------------------------------------- */
.index { background: #F8FAFC; }
[data-theme-style="dark"].index { background: #F8FAFC; }
.index .navbar-main .btn { border-radius: 5rem; padding: 0.5rem 1rem; }
.index-container-content { margin-top: 4rem; margin-bottom: 4rem; }
.index-container { width: 100%; padding: 0 0 4rem 0; }
@media (min-width: 992px) { .index-container-content { margin-top: 6rem; } .index-container { padding: 0 0 8rem 0; } }

/* Index images (switch animations) */
@keyframes index-image-one-switch { 33%{ transform: scale(1.05); left: 3rem; } 66%{ transform: scale(0.9); } 100%{ z-index: 1; left: 9rem; transform: scale(0.9); filter: blur(1px); } }
@keyframes index-image-two-switch { 33%{ right: -6rem; transform: scale(0.95); } 66%{ transform: scale(1.1); top: -2rem; } 100%{ z-index: 2; right: -3rem; top: -2rem; filter: blur(0px); transform: scale(1.05); } }
.index-image { width: auto; max-height: 540px; position: absolute; transition: all 0.3s ease-out; border-radius: 30px; }
.index-image-one { z-index: 2; top: -1.5rem; right: 11.5rem; }
.index-image-two { z-index: 1; right: 0; top: -5rem; filter: blur(1px); }
[dir="rtl"] .index-image-one { left: 3.5rem; right: inherit; }
@media (min-width: 1325px) {
	.index-image { max-height: 600px; }
	.index-image-one { top: -1.5rem; left: 9rem; animation: index-image-one-switch 2s forwards; animation-delay: 2s; }
	.index-image-two { right: -3rem; top: -5rem; left: inherit; animation: index-image-two-switch 2s forwards; animation-delay: 2s; }
	[dir="rtl"] .index-image-one { animation: none; }
	[dir="rtl"] .index-image-two { animation: none; right: 3rem; }
}

.index-header { font-size: 2.5rem; font-weight: bold; color: #0B1220; }
@media (min-width: 768px) { .index-header { font-size: 3rem; } }
@media (min-width: 1200px) { .index-header { font-size: 4rem; } }

.index-input { padding: 1.5rem 1rem; }

.index-feature { line-height: 2.5rem; font-weight: 500; transition: background .6s; border-radius: 100px; }
.index-feature a { color: #1F2937; text-decoration: none; transition: color .6s; }
.index-feature:hover { background: #DBEAFE; }
.index-feature:hover a { color: #1D4ED8; }

.index-button { padding: 1.2rem 2.2rem; font-size: 1rem; font-weight: 600; text-transform: uppercase; transition: all .3s ease-in-out; }
.index-button-white, .index-button-white:hover { color: white; }

.index-card-image { max-width: 100%; height: auto; object-fit: cover; box-shadow: 10px 10px 0 #DBEAFE; border: 1px solid #D1D5DB; transition: all .3s ease-in-out; }
.index-card-image:hover { box-shadow: 0 0 0 #D1D5DB; }
.index-highly-rounded { border-radius: 1rem; }

.index-fade { position: absolute; background: linear-gradient(0deg, #F8FAFC, hsla(0,0%,100%,0)) !important; bottom: 0; top: 0; right: 0; left: 0; z-index: 1; }

/* Index testimonial */
.index-testimonial-avatar { width: 85px; height: 85px; border-radius: 50%; transform: translateY(-70%); border: 4px solid #FFFFFF; position: absolute; left: 50%; margin-left: -52px; }

/* Index FAQ */
.index-faq svg { transition: all .15s; color: #1E3A8A; }

/* Index call to action */
.index-cta {
  background: linear-gradient(120deg, #1D4ED8, #84CC16);
  background-repeat: no-repeat; background-size: cover; color: #FFFFFF !important;
}
.index-cta a.btn { color: white; background: #0B1220; border-color: #0B1220; padding: 1.1rem 4rem; font-size: 1.15rem; }
.index-cta a.btn:hover { background: #172554; border-color: #172554; }
[data-theme-style="dark"] .index-cta a.btn { background: #FFFFFF; border-color: #FFFFFF; }

.user-avatar { border-radius: 50%; max-width: 80px; max-height: 80px; }

/* ================================================================
   8) BIOLINK
   --------------------------------------------------------------- */
/* Link Settings page */
.link-background-type-preset { width: 100%; height: 5rem; border-radius: var(--border-radius); transition: .3s transform, opacity; }
.link-background-type-preset:hover { cursor: pointer; transform: scale(1.025); }
input[type="radio"]:checked ~ .link-background-type-preset { transform: scale(1.05); opacity: .25; }

/* Biolink directory */
.link-directory-avatar { width: 60px; height: 60px; object-fit: cover; }

/* Biolink theme */
.link-biolink-theme { transition: .3s transform, .3s opacity, .3s border-color; height: 22.5rem !important; background-size: cover !important; background-position: center center !important; border-width: 2px; }
.link-biolink-theme:hover { cursor: pointer; transform: scale(1.025); }
input[type="radio"]:checked ~ .link-biolink-theme { transform: scale(1.05); border-color: #2563EB; }
.link-biolink-theme-custom { background: linear-gradient(to right, #1D4ED8, #A3E635); color: white; }

.link-btn-straight { border-radius: 0; }
.link-btn-round { border-radius: 50px; }
.link-btn-rounded { border-radius: .4rem; }
.biolink-switch-buttons .nav-link.active { background: #6B7280; }

/* Biolink preview iframe */
.biolink-preview { position: relative; margin: 0 auto; height: auto; width: auto; display: inline-block; text-align: left; }
.biolink-preview-iframe-container { overflow: hidden; width: 300px; height: 625px; border-radius: 2.5rem; border: 10px solid black; position: relative; box-shadow: 0 0 30px rgba(0,0,0,0.20); }
@media (min-width: 768px) { .biolink-preview-iframe-container { width: 375px; height: 800px; } }
.biolink-preview-iframe-loading { width: 100%; height: 100%; background: hsla(0, 0%, 0%, .6); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); position: absolute; display: flex; justify-content: center; align-items: center; }
.biolink-preview-iframe { width: 100%; height: 100%; border: 0; margin: 0; padding: 0; }

/* ================================================================
   9) OTHERS (containers disabled, custom row & controller)
   --------------------------------------------------------------- */
.container-disabled { pointer-events: none; opacity: .5; }
.container-disabled-simple { pointer-events: none; }

/* Custom row */
.custom-row { border-radius: var(--border-radius); padding: 1.25rem; position: relative; border: 1px solid #E5E7EB; background: #FFFFFF; }
.custom-row-inactive { background: #E5E7EB; }
.custom-row-side-controller { right: 100%; top: 25%; font-size: 1.2em; padding: .2em .2em; }
[dir="rtl"] .custom-row-side-controller { right: initial; left: 100%; }
@media (min-width: 992px) { .custom-row-side-controller { position: absolute; padding: .4em .8em; } }
.custom-row-side-controller-grab { cursor: grab; opacity: .5; transition: .3s opacity; }
.biolink_block:hover .custom-row-side-controller-grab { opacity: 1; }

/* ================================================================
   10) TABLES
   --------------------------------------------------------------- */
.table-image-wrapper { border-radius: 50%; width: 2.5rem; height: 2.5rem; max-width: 2.5rem; max-height: 2.5rem; display: flex; align-items: center; justify-content: center; background: #DBEAFE; }
.table-custom-container { border-radius: var(--border-radius); border: 1px solid #E5E7EB; }
.table-custom { margin-bottom: 0; }
.table-custom thead th { border-top: 0; border-bottom: 0; background: #FFFFFF; color: #0B1220 }
.table-custom th { padding: 1.25rem 1rem; }
.table-custom td { padding: 1.55rem 1rem; background: #FFFFFF; vertical-align: middle; border-color: #E5E7EB; }

/* ================================================================
   11) HELPERS (cursor, appearance)
   --------------------------------------------------------------- */
.cursor-pointer { cursor: pointer; }
.appearance-none { appearance: none; -moz-appearance: none; -webkit-appearance: none; }

/* ================================================================
   12) PRICING
   --------------------------------------------------------------- */
.pricing-plan { border: 1px solid #E5E7EB; height: 100%; display: flex; flex-direction: column; }
.pricing-header { display: flex; flex-direction: column; align-items: center; padding: 2.2rem 2.2rem 0 2.2rem; background: #FFFFFF; border-bottom: 1px solid #E5E7EB; border-radius: var(--border-radius); }
[data-theme-style="dark"] .pricing-header { border-color: #E5E7EB; }
.pricing-name { background: #BFDBFE; padding: .15rem 1.25rem; color: #1D4ED8; font-size: .85rem; font-weight: 600; text-transform: uppercase; border-radius: var(--border-radius); }
.pricing-price { margin: 1rem 0; }
.pricing-price-amount { font-size: 3.3rem; font-weight: bold; }
.pricing-price-currency { font-size: .9rem; color: var(--gray); }
.pricing-details { text-align: center; font-size: .85rem; color: #1E3A8A; margin-bottom: 1.5rem; }
.pricing-body { padding: 0 2.2rem 2.2rem 2.2rem; background: #FFFFFF; height: 100%; border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); }
.pricing-features { margin: 2rem 0; list-style: none; padding: 0; }
.pricing-features li { display: flex; justify-content: space-between; align-items: center; margin: 1rem 0; }

/* ================================================================
   13) CUSTOM RADIO BOXES
   --------------------------------------------------------------- */
.custom-radio-box { cursor: pointer; }
.custom-radio-box .custom-radio-box-main-text { font-size: 1.15rem; font-weight: bold; }
.custom-radio-box .custom-radio-box-main-icon { font-size: 1.25rem; }
.custom-radio-box input[type="radio"] + div { transition: all .3s ease-in-out; border: 1px solid #E5E7EB; background: #FFFFFF; }
.custom-radio-box input[type="radio"]:checked + div { border: 1px solid #2563EB; }
.custom-radio-box input[type="radio"]:hover + div { border: 1px solid #2563EB; }

/* ================================================================
   14) QR CODES
   --------------------------------------------------------------- */
.qr-code { width: 100rem; }
.qr-code-loading { animation: opacity-loading 1s infinite ease-in-out alternate; }
@keyframes opacity-loading { 0%{ opacity:1; } 100%{ opacity:.5; filter: blur(5px) } }
.qr-code-avatar { width: 65px; height: 65px; border-radius: var(--border-radius); padding: .25rem; border: 1px solid #E5E7EB; }

/* ================================================================
   15) ROUND CIRCLES
   --------------------------------------------------------------- */
.round-circle-md { width: 2.5rem; height: 2.5rem; display: flex; justify-content: center; align-items: center; border-radius: 50%; }
.round-circle-lg { width: 4.5rem; height: 4.5rem; display: flex; justify-content: center; align-items: center; border-radius: 50%; }

/* ================================================================
   16) BADGES (couleurs)
   --------------------------------------------------------------- */
.badge { padding: 0.45em 0.9em; }
.badge-primary { color: #1E40AF; background: #DBEAFE; }
[data-theme-style="dark"] .badge-primary { background: #1E3A8A; color: #DBEAFE; }
.badge-secondary { color: hsl(208, 7%, 35%); background-color: hsl(208, 7%, 85%); }
[data-theme-style="dark"] .badge-secondary { background-color: hsl(208, 7%, 35%); color: hsl(208, 7%, 85%); }
.badge-success { color: hsla(134, 50%, 30%, 1); background-color: hsla(134, 50%, 85%, 1); }
[data-theme-style="dark"] .badge-success { background-color: hsla(134, 50%, 30%, 1); color: hsla(134, 50%, 85%, 1); }
.badge-danger { color: hsla(354, 70%, 35%, 1); background-color: hsla(354, 70%, 85%, 1); }
[data-theme-style="dark"] .badge-danger { background-color: hsla(354, 70%, 35%, 1); color: hsla(354, 70%, 85%, 1); }
.badge-warning { background-color: hsla(45, 100%, 85%, 1); color: hsla(40, 80%, 30%, 1); }
[data-theme-style="dark"] .badge-warning { background-color: hsla(50, 10%, 20%, 1); color: hsla(45, 100%, 85%, 1); }
.badge-info { color: #1e3a8a; background-color: #dbeafe; }
[data-theme-style="dark"] .badge-info { background-color: #1e3a8a; color: #dbeafe; }
.badge-light { color: hsla(210, 15%, 35%, 1); background-color: hsl(210, 17%, 95%); }
[data-theme-style="dark"] .badge-light { background-color: hsla(210, 15%, 20%, 1); color: hsl(210, 17%, 95%); }
.badge-dark { color: hsla(210, 10%, 90%, 1); background-color: hsla(210, 10%, 20%, 1); }
[data-theme-style="dark"] .badge-dark { background-color: hsla(210, 10%, 90%, 1); color: hsla(210, 10%, 20%, 1); }

/* ================================================================
   17) INVOICE
   --------------------------------------------------------------- */
.invoice-table th { border-top: 0 !important; }
.invoice-table td { vertical-align: baseline !important; }
@media print { .invoice-logo { filter: grayscale(100%); } }

/* ================================================================
   18) ANIMATIONS GÉNÉRIQUES
   --------------------------------------------------------------- */
.nexlink-animate { -webkit-animation-duration:500ms; animation-duration:500ms; }
.nexlink-animate-fill-both { -webkit-animation-fill-mode:both; animation-fill-mode:both; }
.nexlink-animate-fill-none { -webkit-animation-fill-mode:none; animation-fill-mode:none; }
@keyframes fadeIn{ 0%{ opacity:0 } to{ opacity:1 } }
.nexlink-animate-fade-in { -webkit-animation-name:fadeIn; animation-name:fadeIn }

/* Custom button */
.btn-custom { padding: .5rem 1.5rem; color: var(--gray); border-radius: var(--border-radius); border: 1px solid #E5E7EB !important; font-size: .9rem; background: #FFFFFF; }
.btn-custom:hover { color: var(--gray); border: 1px solid #E5E7EB !important; }
.btn-custom.active { color: #2563EB; border: 1px solid #2563EB; }

/* Blog */
.blog-post-image { max-height: 20rem; object-fit: cover; }
.blog-post-image-small { height: 13rem; max-height: 13rem; object-fit: cover; }
.blog-post-content { line-height: 1.75; word-break: break-word; }
.blog-post-content p { margin-bottom: 1.5rem; }

/* Quill helper + blockquote */
.ql-code-block { background-color: #E5E7EB; color: #4B5563; padding: 1rem; border-radius: var(--border-radius); overflow-x: auto; font-family: 'Courier New', Courier, monospace; white-space: pre; font-size: .9rem; line-height: 1.5; }
.ql-content p { margin-bottom: 0 !important; }
.ql-content li[data-list="bullet"] { list-style-type: disc; }
blockquote { border-left: 4px solid #9CA3AF; padding: 1rem 1.5rem; margin: 1.5rem 0; background-color: #E5E7EB; font-style: italic; color: #4B5563; font-size: 1.1rem; line-height: 1.6; border-radius: var(--border-radius); }

/* File input */
.nexlink-file-input { padding: 1rem; background: #E5E7EB; border: 1px solid #E5E7EB; border-radius: 0.25rem; cursor: pointer; font-size: .9rem; }
.nexlink-file-input:hover { border-color: #D1D5DB; }
.nexlink-file-input::file-selector-button { border: 0; padding: .4rem .75rem; border-radius: var(--border-radius); background-color: #FFFFFF; cursor: pointer; font-size: .9rem; margin-right: 1rem; }
.nexlink-file-input-preview { max-width: 100%; max-height: 68px; min-height: 68px; object-fit: cover; }

.sticky { position: sticky !important; top: 1rem; height: min-content; }

/* Icons on links animations */
a svg { transition: transform .15s; }
a:hover svg { transform: scale(1.1); }
a:active svg { transform: scale(.9); }

/* Helper zoom class for icons */
.icon-zoom-animation svg { transition: transform .15s; }
.icon-zoom-animation:hover svg { transform: scale(1.1); }

/* Self zoom */
.zoom-animation { transition: transform .15s; }
.zoom-animation:hover { transform: scale(1.05); }
.zoom-animation:active { transform: scale(.95); }
.zoom-animation-subtle { transition: transform .3s; }
.zoom-animation-subtle:hover { transform: scale(1.025); }
.up-animation { transition: transform .3s; }
.up-animation:hover { transform: translateY(-10px); }

/* ================================================================
   19) COLOR PICKER (Pickr)
   --------------------------------------------------------------- */
@media print { .pcr-app { display: none; } }
.pcr-button { border: 1px solid white !important; outline: 1px solid #D1D5DB !important; height: calc(var(--input-padding-y) + var(--input-padding-x) + var(--input-font-size) + calc(var(--input-font-size) / 2.75)) !important; border-radius: var(--border-radius) !important; width: 100% !important; }
.pcr-button::before, .pcr-button::after { border-radius: var(--border-radius) !important; }

/* ================================================================
   20) WIDTH FIT CONTENT
   --------------------------------------------------------------- */
.w-fit-content { width: fit-content !important; }

/* ================================================================
   21) SIGNATURES
   --------------------------------------------------------------- */



/* ================================================================
   22) AJAX LOADING OVERLAY
   --------------------------------------------------------------- */
.loading-overlay { padding: 1.25rem; border-radius: var(--border-radius); display: flex; justify-content: center; align-items: center; position: absolute; width: 100%; height: 100%; background: #FFFFFF; z-index: 100; opacity: 0.8; }
[data-theme-style="dark"] .loading-overlay { background: #F8FAFC; }

/* ================================================================
   23) INPUT GROUP BUTTON
   --------------------------------------------------------------- */
.input-group > .input-group-append > .btn { font-size: .9rem; }

/* ================================================================
   24) AIX (chat)
   --------------------------------------------------------------- */



/* ================================================================
   25) SHIKI (code highlight)
   --------------------------------------------------------------- */
.shiki { overflow: auto; border-radius: var(--border-radius); padding: 1.5rem; font-size: .9rem; line-height: 1.5rem; }
.shiki code { background: initial !important; }

/* ================================================================
   26) FONT AWESOME HELPERS
   --------------------------------------------------------------- */
.fa-stack-small { font-size: 0.65rem; vertical-align: middle; }
.btn-group-custom { border: 1px solid #E5E7EB; padding: 0.5rem 0; border-radius: var(--border-radius); }
.btn-group-custom .btn { margin: 0 .5rem; border-radius: var(--border-radius) !important; background: #E5E7EB; }
.btn-group-custom .btn.active { background: #0B1220; color: #FFFFFF; }

/* Prevent fontawesome layout shifts */
i.fa-fw { width: 1.25em; display: inline-block; }
i.fa-xs { font-size: .85em; }
i.fa-sm { font-size: .875em; }
i.fa-lg { font-size: 1.25em; }
i.xl { font-size: 1.5em; }

/* ================================================================
   27) TOOLKIT (icônes outils)
   --------------------------------------------------------------- */
.tool-icon { min-width: 2.75rem; max-height: 2.75rem; width: 2.75rem; height: 2.75rem; }
.tool-icon-wrapper { padding: 0 1.25rem; }

/* ================================================================
   28) RATINGS
   --------------------------------------------------------------- */
.rating-star { cursor: pointer; }
.rating-star svg { color: #ffc107; transition: color .15s; }
.rating-star:hover svg, .rating-star:hover ~ .rating-star svg { color: #ff8800 !important; }
.rating-star-chosen svg, .rating-star-chosen ~ .rating-star svg { color: #dd6200; }

/* ================================================================
   29) LINKS (icône type)
   --------------------------------------------------------------- */
.link-type-icon { min-width: 2.25rem; max-height: 2.25rem; width: 2.25rem; height: 2.25rem; }

/* ================================================================
   30) SCROLLBAR / BELL / GRADIENTS / TEAMS / PWA
   --------------------------------------------------------------- */
/* Custom scrollbar */
body * { scrollbar-color: #E5E7EB #FFFFFF !important; scrollbar-width: thin !important; }
body *::-webkit-scrollbar-thumb{ background: #E5E7EB; border-radius: 10px; width: 6px; height: 6px; }
body *::-webkit-scrollbar, body *::-webkit-scrollbar-track { background: #FFFFFF; border-radius: 10px; width: 6px; height: 6px; }

/* Notification bell */
.internal-notification-icon { animation: pulse-animation 2s infinite; }
@keyframes pulse-animation { 0%{ box-shadow: 0 0 0 0px #EF4444; } 100%{ box-shadow: 0 0 0 20px rgba(0,0,0,0); } }

/* Gradient text */
.text-gradient-primary { background: linear-gradient(135deg, #1D4ED8, #84CC16); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
/* Gradient background */
.bg-gradient { animation: bg-gradient-animation 3s ease infinite alternate !important; background: linear-gradient(60deg,#f79533,#f37055,#ef4e7b,#a166ab,#5073b8,#1098ad,#07b39b,#6fba82); background-size: 300% 300%; }
@keyframes bg-gradient-animation { 0%{ background-position: 0 50%; } 50%{ background-position: 100% 50%; } 100%{ background-position: 0 50%; } }


/* Announcements */
.announcement-wrapper { margin: .75rem; border-radius: .5rem; opacity: 0; transition: opacity .3s ease-in; animation: ac-fade-in-down .3s ease-in .6s forwards; }
@media (min-width: 992px) { .announcement-wrapper { border-radius: 5rem; } }
@keyframes ac-fade-in-down { from{ opacity:0; transform: translate3d(0,-100%,0);} to{ opacity:1; transform: translate3d(0,0,0);} }


/* Extra radii */
.rounded-2x { border-radius: calc(2*var(--border-radius)); }
.rounded-3x { border-radius: calc(3*var(--border-radius)); }

/* Pointer events */
.pointer-events-all { pointer-events: all !important; }

/* ================================================================
   31) EMOJI MODERNES (GLASS)
   --------------------------------------------------------------- */
.glass {
  position: relative;
  border-radius: 16px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(229,231,235,.7);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.emoji-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 999px; line-height: 1;
  font-weight: 700; letter-spacing: .1px; outline: none;
}
.emoji-chip:focus-visible { box-shadow: var(--ring); }
.emoji-chip--accent {
  border: 1px solid rgba(37,99,235,.35);
  background: linear-gradient(to bottom right, rgba(37,99,235,.18), rgba(132,204,22,.14)), rgba(255,255,255,.04);
}
.emoji {
  width: 28px; height: 28px; flex: 0 0 28px; display: inline-block;
  border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.emoji--img { background-position: center; background-size: cover; background-repeat: no-repeat; }
.emoji svg { width: 100%; height: 100%; display: block; }
.emoji-label { font-size: 14px; color: #0B1220; }

.btn-emoji {
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:14px; color:#fff;
  background: linear-gradient(135deg, #1D4ED8, #84CC16);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 10px 24px rgba(2,6,12,.25);
  backdrop-filter: blur(10px);
  transition: transform .08s ease, box-shadow .18s ease, filter .18s ease;
  text-decoration:none;
}
.btn-emoji:hover { transform: translateY(-1px); filter: saturate(1.05); }
.btn-emoji:focus-visible { outline: none; box-shadow: var(--ring); }
.btn-emoji .emoji { width: 24px; height: 24px; border-radius:6px; }