/* ─── Nav Tabs — bigger, more visible ─── */
.nav-tabs {
    border-bottom: 2px solid #e3e6f0;
}
.nav-tabs .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    color: #858796;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.85rem 1.5rem;
    margin-bottom: -2px;
    transition: color .2s, border-color .2s;
}
.nav-tabs .nav-link:hover {
    border-color: transparent;
    color: var(--section-color, #4e73df);
}
.nav-tabs .nav-link.active {
    color: var(--section-color, #4e73df);
    border-bottom-color: var(--section-color, #4e73df);
    background: transparent;
}

/* General */
:root{
    --text-color-black: #232323;

    /* Section color theming — default is SEO (emerald) */
    --section-color: #10b981;
    --section-color-rgb: 16, 185, 129;
    --section-color-bg: rgba(16, 185, 129, 0.1);

    /* Glassmorphism variables */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-bg-sidebar: rgba(245, 249, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.3);
    --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
    --glass-blur: 10px;
}

/* ─── Section color overrides ─── */
[data-section="traffic"] { --section-color: #e67e22; --section-color-rgb: 230, 126, 34; --section-color-bg: rgba(230, 126, 34, 0.1); }
[data-section="geo"]     { --section-color: #0891b2; --section-color-rgb: 8, 145, 178; --section-color-bg: rgba(8, 145, 178, 0.1); }
[data-section="seo"]     { --section-color: #10b981; --section-color-rgb: 16, 185, 129; --section-color-bg: rgba(16, 185, 129, 0.1); }
[data-section="ads"]     { --section-color: #4285f4; --section-color-rgb: 66, 133, 244; --section-color-bg: rgba(66, 133, 244, 0.1); }
[data-section="social"]  { --section-color: #7c3aed; --section-color-rgb: 124, 58, 237; --section-color-bg: rgba(124, 58, 237, 0.1); }
[data-section="sante"]    { --section-color: #e11d48; --section-color-rgb: 225, 29, 72; --section-color-bg: rgba(225, 29, 72, 0.1); }
[data-section="resources"] { --section-color: #6366f1; --section-color-rgb: 99, 102, 241; --section-color-bg: rgba(99, 102, 241, 0.1); }

body{
    font-family: 'Poppins', sans-serif;
    color: var(--text-color-black);
}

h1, h2, h3, h4, h5, h6{
    font-family: 'Raleway', sans-serif;
}

.alert a{
    color: inherit;
    text-decoration: underline;
    font-weight: 500;
}

.alert a:hover{
    text-decoration: none;
}
/* END General */

/* Login */
.body-bg-login{
    background: rgb(245,249,254);
    background: linear-gradient(90deg, rgba(245,249,254,1) 0%, rgba(240,244,250,1) 15%, rgba(240,244,250,1) 85%, rgba(245,249,254,1) 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

#login-screen{
    max-width: 480px;
    width: 100%;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12);
    border: none;
    margin: 0;
    overflow: hidden;
}

.login-brand{
    text-align: center;
    padding: 30px 30px 0;
}

.login-brand .login-logo{
    height: 50px;
}

#login-form{
    padding: 30px 40px 40px;
}

#login-form h1{
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 5px;
    text-align: center;
}

#login-form p.intro{
    color: #858796;
    font-size: 14px;
    text-align: center;
    margin-bottom: 25px;
}

#login-form label{
    margin-bottom: 0.3rem;
    font-weight: 600;
    font-size: 14px;
}

#login-form .form-control{
    border-radius: 10px;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#login-form .form-control:focus{
    border-color: var(--brand-primary, #10b981);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary, #10b981) 15%, transparent);
}

#login-form .btn-primary{
    background: linear-gradient(135deg, var(--brand-primary, #10b981), color-mix(in srgb, var(--brand-primary, #10b981) 85%, black));
    border: none;
    border-radius: 10px;
    padding: 12px;
    font-size: 16px;
    font-weight: 600;
    margin-top: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#login-form .btn-primary:hover{
    transform: translateY(-1px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--brand-primary, #10b981) 35%, transparent);
}

.login-links{
    text-align: center;
    margin: 20px 0 0;
    font-size: 14px;
}

.login-links a{
    color: var(--brand-primary, #10b981);
    font-weight: 500;
}

.login-legal{
    text-align: center;
    margin: 10px 0 0;
    font-size: 12px;
    color: #94a3b8;
}

.login-legal a{
    color: #94a3b8;
    text-decoration: underline;
}

@media (max-width: 480px){
    #login-form{
        padding: 25px 20px 30px;
    }

    .login-wrapper{
        padding: 10px;
    }

    #login-screen{
        border-radius: 12px;
    }
}
/* END Login */

/* Header */
#accordionSidebar .img-ico{
    display: none;
}

#accordionSidebar.toggled .img-full{
    display: none;
}

#accordionSidebar.toggled .img-ico{
    display: inline;
}

.sidebar-logo{
    padding: 12px 20px;
    background: #fff;
    box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.15);
    border-right: solid 1px rgba(0,0,0,0.08);
    border-bottom: solid 1px rgba(0,0,0,0.08);
}

#accordionSidebar.toggled .sidebar-logo{
    padding: 4px 20px 2px;
}

.sidebar .nav-item.active .nav-link{
    font-weight: 600;
    background-color: rgba(0,0,0,0.2);
}

.sidebar-dark .nav-item .nav-link{
    transition: all ease 300ms;
}

.sidebar-dark .nav-item .nav-link:hover{
    background-color: rgba(0,0,0,0.2);
}

.sidebar-dark .nav-item.nav-improve-page{
    background-color: rgb(61, 172, 69);
}

.sidebar-dark .nav-item.nav-improve-page a.nav-link, .sidebar-dark .nav-item.nav-improve-page a.nav-link i{
    color: #fff; 
}

.sidebar-dark .sidebar-heading{
    color: rgba(255,255,255,0.9);
    font-weight: 700;
    font-size: 0.75rem;
    position: relative;
    padding-bottom: 20px;
}

.sidebar-dark .sidebar-heading::before {
    content: "";
    position: absolute;
    bottom: 12px;
    width: 50px;
    height: 1px;
    background: rgba(255,255,255,0.2);
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item, .sidebar .nav-item .collapsing .collapse-inner .collapse-item{
    white-space: normal;
}

.sidebar-dark hr.sidebar-divider.space-around{
    margin: 10px 1rem 30px;
}

.sidebar-dark hr.sidebar-divider.space-bottom{
    margin-bottom: 30px;
}
/* END Header */

/* Pages */
.title-page{
    font-weight: 500;
}

.table{
    color: #666666;
}

.table td, .table th{
    vertical-align: middle;
    color: #666666;
    font-size: 14px;
}

.table thead th, .table tfoot th{
    color: var(--text-color-black);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    vertical-align: middle;
    line-height: 16px;
}

.filters{
    font-size: 0.75rem;
}

.filters .card{
    padding-bottom: 1rem;
}

.filters .card-body{
    padding: 1rem;
    max-height: 185px;
    overflow: auto;
    padding: 1rem 1rem 0;
}

.filters input{
    font-size: 0.75rem;
    padding: 0.375rem 0.5rem;
    text-align: center;
}

.list-filter .form-check{
    font-size: 0.85rem;
    line-height: 1.5rem;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
}

.list-filter .form-check label{
    cursor: pointer;
}

.list-filter .badge{
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 2px;
}

.list-filter .badge i{
    font-size: 8px;
}

.card-body > *:last-child{
    margin-bottom: 0;
}

ol.steps-config{
    padding-left: 20px;
}

ol.steps-config li{
    margin: 10px 0;
    line-height: 26px;
}

.table thead th.two-lines{
    line-height: 0.85rem;
    vertical-align: middle;
}

/* ── Funnel de conversion e-commerce ─────────────────────────────────
   Les étapes se rétrécissent et passent progressivement d'une teinte
   claire de la couleur de marque à sa version pleine (via --funnel-depth
   0 → 100, posé par le template). Compatible marque blanche. */
.funnel{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .5rem 0 .25rem;
    width: 100%;
    max-width: 680px;      /* largeur de référence : les % des étapes s'appliquent ici */
    margin: 0 auto;
}

.funnel-step{
    /* Crescendo : du clair (mélangé de blanc) vers la couleur pleine puis assombrie */
    --funnel-light: calc(68% + var(--funnel-depth, 0) * 0.32%); /* 68 % → 100 % de brand */
    --funnel-dark: calc(var(--funnel-depth, 0) * 0.22%);        /* 0 % → 22 % d'assombrissement */
    width: var(--funnel-width, 100%);
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .8rem 1.25rem;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--brand-primary, #10b981) var(--funnel-light), #fff),
        color-mix(in srgb, #1a1a2e var(--funnel-dark), var(--brand-primary, #10b981))
    );
    box-shadow: 0 6px 16px color-mix(in srgb, var(--brand-primary, #10b981) 25%, transparent);
    transition: transform .15s ease;
}

.funnel-step:hover{
    transform: scale(1.02);
}

.funnel-step-icon{
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    font-size: .95rem;
}

.funnel-step-label{
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    opacity: .92;
}

.funnel-step-value{
    margin-left: auto;
    font-size: 1.45rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.funnel-rate{
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem 0;
    color: #64748b;
    font-size: .8rem;
    font-weight: 600;
}

.funnel-rate i{
    font-size: .7rem;
    opacity: .6;
}

.funnel-summary{
    margin-top: 1rem;
    padding: .5rem 1.1rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-primary, #10b981) 10%, #fff);
    color: #1a1a2e;
    font-size: .88rem;
}

.funnel-summary i{
    color: var(--brand-primary, #10b981);
    margin-right: .35rem;
}

.funnel-summary strong{
    color: var(--brand-primary, #10b981);
}

@media (max-width: 576px){
    .funnel-step{
        width: 100% !important;
    }
}

.google-display{
    font-family: arial,sans-serif;
    margin: 0 !important;
}

.google-display p{
    margin: 0;
}

.google-display .name-site{
    color: #202124;
    font-size: 14px;
    display: block;
    line-height: 20px;
    white-space: nowrap;
}

.google-display .url-site{
    font-size: 12px;
    line-height: 18px;
    color: #4d5156;
}

.google-display .title-site{
    margin-top: 2px;
    line-height: 1.3;
    margin-bottom: 3px;
    font-size: 20px;
    font-weight: 400;
    color: #1a0dab;
}

.google-display .desc-site{
    color: #4d5156;
    line-height: 1.58;
    font-size: 14px;
    max-width: 480px;
}

.champ-lexical ul{
    columns: 4;
    -webkit-columns: 4;
    -moz-columns: 4;
}

.blog-subjects ul{
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}

.helpbox{
    display: none;
    max-width: 600px !important;
}

.helpbox .title{
    color: #4e73df;
    font-weight: 700;
    font-family: 'Raleway', sans-serif;
    font-size: 2rem;
    margin-bottom: 1rem;
    line-height: 1.2;
    margin-top: 0;
}

.infobulle-primary i{
    transform: scale(1);
	animation: pulse-primary 2s infinite;
    border-radius: 50%;
}

@keyframes pulse-primary {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(46, 89, 217, 0.7);
	}
	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(46, 89, 217, 0);
	}
	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(46, 89, 217, 0);
	}
}

.infobulle-info i{
    transform: scale(1);
	animation: pulse-info 2s infinite;
    border-radius: 50%;
}

@keyframes pulse-info {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(54, 185, 204, 0.7);
	}
	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(54, 185, 204, 0);
	}
	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(54, 185, 204, 0);
	}
}

.infobulle-danger i{
    transform: scale(1);
	animation: pulse-danger 2s infinite;
    border-radius: 50%;
}

@keyframes pulse-danger {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(231, 74, 59, 0.7);
	}
	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(231, 74, 59, 0);
	}
	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(231, 74, 59, 0);
	}
}

.infobulle-warning i{
    transform: scale(1);
	animation: pulse-warning 2s infinite;
    border-radius: 50%;
}

@keyframes pulse-warning {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(244, 182, 25, 0.7);
	}
	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(244, 182, 25, 0);
	}
	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(244, 182, 25, 0);
	}
}

.loader {
    transform: rotateZ(45deg);
    perspective: 1000px;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    color: #3dac45;
    display: inline-block;
    margin-bottom: 10px;
  }
    .loader:before,
    .loader:after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: inherit;
      height: inherit;
      border-radius: 50%;
      transform: rotateX(70deg);
      animation: 1s spin linear infinite;
    }
    .loader:after {
      color: #FF2424;
      transform: rotateY(70deg);
      animation-delay: .4s;
    }

  @keyframes rotate {
    0% {
      transform: translate(-50%, -50%) rotateZ(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotateZ(360deg);
    }
  }

  @keyframes rotateccw {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }

  @keyframes spin {
    0%,
    100% {
      box-shadow: .2em 0px 0 0px currentcolor;
    }
    12% {
      box-shadow: .2em .2em 0 0 currentcolor;
    }
    25% {
      box-shadow: 0 .2em 0 0px currentcolor;
    }
    37% {
      box-shadow: -.2em .2em 0 0 currentcolor;
    }
    50% {
      box-shadow: -.2em 0 0 0 currentcolor;
    }
    62% {
      box-shadow: -.2em -.2em 0 0 currentcolor;
    }
    75% {
      box-shadow: 0px -.2em 0 0 currentcolor;
    }
    87% {
      box-shadow: .2em -.2em 0 0 currentcolor;
    }
  }

  
  @keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  } 

.accordion{
    font-size: 14px;
}

.accordion .card-header h6{
    cursor: pointer;
    font-size: 14px;
}

.intro-page{
    padding: 15px 90px 15px 20px;
    font-size: 14px;
    box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.15) !important;
    border: 1px solid #e3e6f0;
    border-radius: .35rem;
    background: url('/img/maia-intro.png') no-repeat center right #ffffff;
    background-size: 90px auto;
    color: #666 !important;
}

.intro-page.no-maia{
    background-image: none;
    padding: 15px 20px;
}

.white-f7{
    background-color: #f7f7f7;
}

.h5 small{
    font-size: 70%;
}
/* END Pages */

/* Refonte graphique */
body{
    font-family: 'Lato', sans-serif;
    color: var(--text-color-black);
}

#wrapper{
    background: linear-gradient(135deg, #e8f0fe 0%, #f5f7fa 50%, #e3eeff 100%);
    background-attachment: fixed;
}

#wrapper #content-wrapper{
    background-color: transparent;
}

nav.topbar,
.sidebar-logo {
    background: rgba(235, 238, 241, 0.75) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15) !important;
}

/* Topbar must be above paywall banner */
nav.topbar {
    position: relative;
    z-index: 1200;
}

/* Quand une popin (modal Bootstrap) est ouverte, la topbar et le chatbot
   passent sous le backdrop (z-index 1040) pour être assombris avec le reste */
body.modal-open nav.topbar,
body.modal-open .chatbot-toggle,
body.modal-open .chatbot-drawer {
    z-index: 1030;
}

/* Popins Fancybox (infobulles "?", visionneuses) : z-index par défaut 1050,
   donc la topbar (1200) et le chatbot (9998) restaient au-dessus du voile sombre.
   On remonte Fancybox au-dessus de tout. */
:root {
    --fancybox-zIndex: 10050;
}

.sidebar-logo{
    padding: 0;
    height: 4.375rem;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

.sidebar-logo img{
    height: 50px;
}

#alertsDropdown .fa-bell{
    color: #1d953e;
    font-size: 20px;
    margin-right: 7px;
}

#alertsDropdown .badge{
    background: rgb(206,6,5);
    background: linear-gradient(45deg, rgba(206,6,5,1) 0%, rgba(250,104,86,1) 100%);
    transform: scale(1);
    margin-top: -1.25rem;
}

#userDropdown span{
    font-size: 16px;
    color: #000000 !important;
}

#userDropdown span strong{
    font-weight: 900;
}

#userDropdown span.chevron{
    font-size: 12px;
}

ul#accordionSidebar.sidebar {
    background: #F8FAFC !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-right: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    flex: 0 0 300px !important;
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100vh !important;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 100;
}

/* Scrollbar personnalisée pour la sidebar */
ul#accordionSidebar.sidebar::-webkit-scrollbar {
    width: 6px;
}

ul#accordionSidebar.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

ul#accordionSidebar.sidebar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

ul#accordionSidebar.sidebar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Décaler le contenu principal pour compenser la sidebar fixe */
#content-wrapper {
    margin-left: 300px !important;
}

@media (min-width: 768px) {
    .sidebar {
        width: 300px !important;
        min-width: 300px !important;
    }
}

/* Mobile : sidebar cachée, gérée par le bloc responsive principal ci-dessous */
@media (max-width: 767px) {
    #content-wrapper {
        margin-left: 0 !important;
    }
}

#accordionSidebar.sidebar-dark .sidebar-heading{
    color: #000;
    font-weight: 900;
    font-size: 15px;
    padding-bottom: 15px;
}

.sidebar-dark .sidebar-heading::before{
    display: none;
}

.sidebar-dark .nav-item .nav-link, .sidebar-dark .nav-item .nav-link i{
    color: #000;
    font-size: 16px;
}

.sidebar-dark .nav-item.nav-improve-page a.nav-link, .sidebar-dark .nav-item.nav-improve-page a.nav-link i{
    font-weight: 900;
    color: #000;
    font-size: 16px;
}

.sidebar-dark .nav-item{
    padding: 0 16px;
}

.sidebar-dark .nav-item .nav-link{
    border-radius: 10px;
    width: auto;
    padding: 10px 15px;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

.sidebar .nav-item .nav-link span{
    font-size: 0.95rem;
}

.sidebar-dark .nav-item .nav-link i{
    margin-right: 10px;
}

.sidebar .nav-item.active .nav-link{
    font-weight: 900;
    background: none;
}


.sidebar-dark .nav-item:not(.active) .nav-link:hover, .sidebar-dark .nav-item:not(.active) .nav-link:hover i, .sidebar-dark .nav-item .nav-link:active, .sidebar-dark .nav-item .nav-link:focus, .sidebar-dark .nav-item .nav-link:hover, .sidebar-dark .nav-item .nav-link:active i, .sidebar-dark .nav-item .nav-link:focus i, .sidebar-dark .nav-item .nav-link:hover i{
    background: none;
    color: #1e293b;
}

.sidebar-dark hr.sidebar-divider.space-around{
    margin: 10px 1rem 20px;
}

.sidebar-dark .nav-item.nav-improve-page{
    background: none;
    margin: 5px 0;
}

.line-separator{
    margin: 30px 0 40px 20px;
}

#contact-nav{
    padding: 20px 25px;
    margin: 0 20px;
    background-color: #fff;
}

#contact-nav .sidebar-heading{
    padding: 0 0 10px !important;
    text-transform: none !important;
    font-size: 16px;
}

#contact-nav p{
    font-size: 14px;
}

.sidebar-dark #contact-nav a{
    font-style: italic;
    font-weight: bold;
    color: #000;
    display: block;
    text-align: center;
    position: relative;
    padding-bottom: 10px;
    transition: all ease 300ms;
}

.sidebar-dark #contact-nav a:hover{
    text-decoration: none;
    color: #4b73c6;
}

.sidebar-dark #contact-nav a i{
    margin-right: 5px;
    color: #4b73c6;
}

.sidebar-dark #contact-nav a::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgb(19,112,40);
    background: linear-gradient(90deg, rgba(19,112,40,1) 0%, rgba(39,186,83,1) 70%);
}

footer.sticky-footer{
    margin-top: 2rem;
}

footer.sticky-footer .container{
    display: flex;
    justify-content: center;
    align-items: center;
}

footer.sticky-footer .copyright{
    background: #e5eefe;
    padding: 20px 40px;
    clip-path: polygon(0 10%, 100% 0%, 100% 90%, 0% 100%);
    font-size: 20px;
    color: #000;
}

footer.sticky-footer .copyright span{
    color: #868686;
}

footer.sticky-footer .copyright img{
    border-radius: 10px;
    border: solid 5px #fff;
    margin-right: 10px;
}

.title-page{
    font-size: 28px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 20px;
}

.title-page i{
    color: var(--section-color, #1d953e);
    font-size: 48px;
}

.title-page i.danger{
    color: #ff3c3c;
}

.intro{
    margin-bottom: 40px;
    font-size: 16px;
}

.intro .headline{
    font-size: 28px;
    font-weight: bold;
    margin-top: 45px;
}

.intro .headline img{
    float: none;
    margin: 0 0 0 10px;
    width: 16px;
}

.intro img{
    float:right;
    margin: 0 0 10px 20px;
}

.intro .video{
    background: url('/img/lines-intro.png') no-repeat center center;
    background-size: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.intro .video img{
    float: none;
    margin: 0;
    transition: all ease 300ms;
}

.intro .video img:hover{

}

#btn-filter-wrapper{
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

#btn-filter-wrapper .btn{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: #4c75c8;
    color: #fff;
}

#btn-filter-wrapper i{
    font-size: 15px;
}

.btn-filter-toggle{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #4c75c8;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-filter-toggle:hover{
    background: #3a5fa8;
    box-shadow: 0 4px 12px rgba(76, 117, 200, 0.35);
}

.btn-filter-toggle:focus{
    outline: none;
    box-shadow: 0 0 0 3px rgba(76, 117, 200, 0.3);
}

.btn-filter-toggle::after{
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 11px;
    transition: transform 0.3s ease;
}

.btn-filter-toggle[aria-expanded="true"]::after{
    transform: rotate(180deg);
}

.filters-row{
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 30px;
    box-shadow: var(--glass-shadow);
}

.filters-row .title-filter{
    font-weight: bold;
    color: #4367bf;
}

.filters-row .title-filter i{
    color: #000;
    margin-right: 5px;
}

.filters-row input[type=checkbox] {
    accent-color: #1d953e;
}

.filters-row .filter-content input, .filters-row .list-filter .form-check{
    font-size: 0.9rem;
}

.filters-row .filter-content{
    max-height: 135px;
    overflow-y: auto;
    padding-right: 10px;
}

.filters-row .filter-content.overflow{
    border-bottom: solid 1px rgba(0,0,0,0.03);
}

/* Filters inline (AJAX pages: Facebook, Instagram, LinkedIn) */
.filters-row-inline{
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 14px 20px;
    box-shadow: var(--glass-shadow);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 1.5rem;
}

.filters-row-inline .filter-label{
    font-size: 14px;
    font-weight: 600;
    color: #4367bf;
    white-space: nowrap;
}

.filters-row-inline .form-control{
    max-width: 220px;
    font-size: 14px;
    border-radius: 8px;
}

.filters-row-inline .btn-filter-refresh{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.filters-row-inline .btn-filter-refresh:hover{
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.filters-row-inline .btn-facebook{ background: #4267B2; }
.filters-row-inline .btn-facebook:hover{ background: #365899; }
.filters-row-inline .btn-instagram{ background: #E1306C; }
.filters-row-inline .btn-instagram:hover{ background: #c2255c; }
.filters-row-inline .btn-linkedin{ background: #0077B5; }
.filters-row-inline .btn-linkedin:hover{ background: #006097; }

.filters-row-inline .filter-actions{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.btn-success{
    background-color: #1a8c39;
    border: none;
    padding: 10px 40px;
}

.block-with-title{
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 30px;
    box-shadow: var(--glass-shadow);
}

.block-with-title .block-title, .modal-title{
    color: #1a1a2e;
    padding: 0;
    font-size: 18px;
    position: relative;
    font-weight: 800;
    margin-bottom: 25px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.block-with-title .block-title.no-margin, .modal-title.no-margin{
    margin-bottom: 0;
}

.block-with-title .block-intro{
    font-style: italic;
    margin-top: -15px;
    margin-bottom: 30px;
    text-align: center;
}

.block-with-title .block-title::before, .modal-title::before{
    display: none;
}

.block-content p:last-child{
    margin-bottom: 0;
}

.block-stats{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    gap: 15px;
}

.block-stats .block-stat{
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.5) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 14px;
    padding: 20px 15px;
    flex: 1;
    position: relative;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.block-stats .block-stat .stat-check{
    position: absolute;
    top: -6px;
    right: -6px;
    z-index: 10;
    color: var(--section-color, #1d953e);
    background: #fff;
    font-size: 16px;
    line-height: 16px;
    display: none;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.block-stats .block-stat.active .stat-check{
    display: block;
}

.block-stats .block-stat.active{
    background: linear-gradient(135deg, rgba(var(--section-color-rgb, 29, 149, 62), 0.1) 0%, rgba(var(--section-color-rgb, 29, 149, 62), 0.05) 100%);
    border: 2px solid rgba(var(--section-color-rgb, 29, 149, 62), 0.3);
    box-shadow: 0 4px 20px rgba(var(--section-color-rgb, 29, 149, 62), 0.15);
}

.block-stats .block-stat .stat-title{
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
    color: #1a1a2e;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 12px;
    min-height: auto;
    text-align: center;
}

.block-stats .block-stat.with-btn .stat-title{
    min-height: auto;
}

.block-stats .block-stat.active .stat-title{
    color: var(--section-color, #1d953e);
}

.block-stats .block-stat .stat-value{
    font-size: 26px;
    line-height: 1.2;
    color: #1a1a2e;
    font-weight: 800;
    margin: 0;
}

.block-stats .block-stat.active .stat-value{
    color: var(--section-color, #1d953e);
}

.block-stats .block-stat .stat-button{
    margin: 12px 0 0;
}

.block-stats .block-stat .stat-button .btn-primary{
    background-color: var(--section-color, #4c75c8);
    border: none;
    margin-right: 5px;
    border-radius: 8px;
    font-size: 12px;
    padding: 6px 12px;
}

.block-stats .block-stat.active .stat-button .btn-primary{
    background-color: var(--section-color, #1d953e);
    border: none;
}

.block-stats .block-stat .stat-icon{
    width: 42px;
    height: 42px;
    line-height: 42px;
    margin: 0 auto 10px;
    border-radius: 12px;
    background: rgba(var(--section-color-rgb, 16, 185, 129), 0.12);
    color: var(--section-color, #10b981);
    font-size: 18px;
    text-align: center;
}

.block-stats .block-stat .stat-value.is-ok{
    color: #10b981;
}

.table thead th, .table td, .table th{
    border-bottom: 1px solid #dde9fe;
    color: #444;
    background: transparent;
    padding: 10px;
}

.table tbody tr:hover{
    background: rgb(213,228,253);
    background: linear-gradient(90deg, rgba(213,228,253,1) 0%, rgba(255,255,255,1) 100%);
}

.table tbody tr:hover td{
    color: #000;
}

.accordion-block{
    margin-bottom: 5px;
}

.accordion-title{
    border: solid 1px rgba(0,0,0,0.1);
    color: #4367bf;
    text-transform: uppercase;
    font-weight: bold;
    padding: 10px 20px;
    margin: 0;
    cursor: pointer;
    transition: all ease 300ms;
}

.accordion-title[aria-expanded="true"], .accordion-title:hover{
    color: #000;
    border: solid 1px rgba(0,0,0,0.2);
    background: rgb(213,228,253);
    background: linear-gradient(90deg, rgba(213,228,253,1) 0%, rgba(255,255,255,1) 100%);
}

.accordion-block .collapse{
    padding: 20px;
    border: solid 1px rgba(0,0,0,.1);
    border-top: none;
}

.alert{
    border-radius: 10px;
    position: relative;
    margin-left: 35px;
    padding-left: 50px;
    border: none;
}

.alert.text-left{
    padding-left: 45px;
}

.alert::before{
    content: "";
    width: 74px;
    height: 45px;
    position: absolute;
    left: -35px;
    top: 55%;
    transform: translateY(-50%);
}

.alert-danger{
    color: #fff;
    background-color: #ff3c3c;
}

.alert-danger::before{
    background: url('/img/badge-danger.png') no-repeat;
}

.alert-success{
    color: #fff;
    background: rgb(19,112,40);
    background: linear-gradient(90deg, rgba(19,112,40,1) 0%, rgba(39,185,83,1) 100%);
}

.alert-success::before{
    background: url('/img/badge-success.png') no-repeat;
}

.alert-warning{
    color: #815501;
    background: rgb(255,220,55);
    background: linear-gradient(90deg, rgba(255,220,55,1) 0%, rgba(255,238,114,1) 100%);
}

.alert-warning::before{
    background: url('/img/badge-warning.png') no-repeat;
}

.alert-info{
    color: #a3eafb;
    background: rgb(44,67,169);
    background: linear-gradient(90deg, rgba(44,67,169,1) 0%, rgba(90,138,213,1) 100%);
}

.alert-info::before{
    background: url('/img/badge-info.png') no-repeat;
}

.dataTables_info, .dataTables_length, .dataTables_filter, .dataTables_paginate{
    font-size: 12px;
}

.jauges{
    background: rgb(240,246,255);
    padding: 40px 60px;
    border-radius: 15px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}

.jauges .jauge{
    flex: 1;
}

.jauge-title{
    color: #000;
    font-size: 18px;
    font-weight: bold;
    position: relative;
    padding-left: 15px;
    margin-bottom: 10px;
}

.jauge-title::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50px;
    background-color: #000;
    position: absolute;
    left: 0;
    top: 15px;
}

.jauge-block{
    background: #fff;
    border-left: solid 4px #00335e;
    border-radius: 10px;
    padding: 40px 40px 40px 20px;
    position: relative;
    overflow: hidden;
}

.jauge-block .progress{
    background-color: #00335e;
    overflow: visible;
}

.jauge-block .progress .cursor{
    margin-top: -5px;
    margin-left: -9px;
}

.jauge-block .progress .cursor img{
    width: 18px;
    height: 18px;
}

.jauge-block .progress-bar{
    border-radius: 50px;
}

.jauge-block .progress-bar.bg-danger{
    background-color: #e53b31 !important;
}

.jauge-block .progress-bar.bg-warning{
    background-color: #ff981e !important;
}

.jauge-block .progress-bar.bg-success{
    background-color: #009d4a !important;
}

.jauge-block .icon{
    position: absolute;
    right: 0;
    bottom: 0;
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
    background-color: #e84237;
    color: #fff;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 0 7px 9px 0;
    font-size: 20px;
}

#edit-concu{
    margin-top: 30px;
}

.btn-primary{
    background-color: #4c75c8;
    border: none;
}

.btn-primary:hover{
    background-color: #3465c7;
    border: none;
}

.modal-open .modal {
    display: flex !important;
    justify-content: center;
    align-items: center;
    background: url('/img/lines-intro.png') no-repeat center center;
}

.modal-backdrop.show{
    background: rgb(177,205,253);
    background: linear-gradient(45deg, rgba(177,205,253,1) 0%, rgba(229,238,254,1) 100%);
    opacity: 1;
}

.modal-content{
    background: var(--glass-bg);
    backdrop-filter: blur(calc(var(--glass-blur) * 1.5));
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 1.5));
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    box-shadow: var(--glass-shadow);
}

.modal-dialog{
    margin: 10px;
}

.modal-header, .modal-footer{
    border: none;
}

.body-bg-login{
    background: url('/img/lines-intro.png') no-repeat center center,
                linear-gradient(45deg, rgb(177, 205, 253) 0%, rgb(229, 238, 254) 100%);
}

.block-contact-title{
    font-size: 26px;
    margin-bottom: 5px;
}

.block-contact img{
    float: right;
    margin: 0 0 5px 10px;
    width: 325px;
}

.block-contact-title i{
    margin-right: 10px;
    font-size: 22px;
}

/* Refonte graphique */


/* Media queries 
@media all and (max-width:1600px){
    .table thead th, .table tfoot th{
        font-size: 0.8rem;
    }

    .table td, .table th{
        padding: 0.3rem;
        font-size: 0.8rem;
    }
}*/

@media all and (max-width:1200px){
    #login-form{
        padding: 15px;
    }

    .champ-lexical ul{
        columns: 1;
        -webkit-columns: 1;
        -moz-columns: 1;
    }
}

@media all and (max-width:767px){
    .intro-page{
        padding: 10px;
        background-image:none;
    }
}
/* END Media queries */

.websites>div{
    position: relative;
}
.websites>div button{
    position: absolute;
    z-index: 9;
    right: 20px;
    top: 20px;
    background: none;
    border: none;
    color: red;
}

.table-warning, .table-warning > td, .table-warning > th{
    background-color: #fceec9!important;
}

.websites_selection .form-group{
    height: 100%;
}
.websites_selection .form-group select{
    height: 100%;
}

/*pagination improve page*/

#pagination{
    display: flex;
    justify-content: center;
}
#pagination button{
    margin: 0 10px;
    border: none;
    background: no-repeat;
}
#pagination .page-button.active{
    text-decoration: underline
}

/********************FB API********************/
/* ✅ Styles pour la popup */
.custom-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1200px;
    background: white;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    padding: 15px;
    border-radius: 10px;
    z-index: 1000;
}

/* ✅ Fond semi-transparent derrière la popup */
.custom-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 999;
}

/* ✅ Style du header de la popup */
.custom-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
}

/* ✅ Bouton de fermeture */
.custom-popup-header .close {
    cursor: pointer;
    font-size: 20px;
    background: none;
    border: none;
}

/* ✅ Pied de la popup */
.custom-popup-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}
.graph {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    display: none!important;
}

.graph.show {
    display: block!important;
    opacity: 1;
}
.loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    margin: 10px auto;
}

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

.graph_toggle{
    position: absolute;
    top: -20px;
    right: 0;
    border-radius: 20px;
}

.graph_toggle i{
    margin-left: 10px;
}

#viewsChart,
#followersChart{
    height: 300px!important;
}
#tableTitleSizeImprove_wrapper{
    width: 100%;
}

.gr-form-select{
    height: calc(1.5em + .75rem + 2px);
    padding:.375rem .75rem;
    color: #6e707e;
    background-color: #fff;
    background-clip: padding-box;
    border:1px solid #d1d3e2;
    border-radius:.35rem;
}


/* ============================================
   TRIAL BANNER — Page /subscribe
   ============================================ */
.subscribe-trial-banner {
    border-radius: 14px;
    background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 50%, #ecfdf5 100%);
    border: 1px solid #bfdbfe;
    overflow: hidden;
}
.subscribe-trial-banner__inner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 28px;
}
.subscribe-trial-banner__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(99,102,241,.25);
}
.subscribe-trial-banner__text {
    flex: 1;
    font-size: 14px;
    color: #334155;
    line-height: 1.5;
}
.subscribe-trial-banner__text strong {
    color: #1e293b;
    font-size: 15px;
}
.subscribe-trial-banner__btn {
    flex-shrink: 0;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #fff !important;
    border: none;
    border-radius: 10px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: all .25s ease;
    box-shadow: 0 4px 14px rgba(99,102,241,.3);
    text-decoration: none !important;
}
.subscribe-trial-banner__btn:hover {
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(99,102,241,.4);
}

@media (max-width: 768px) {
    .subscribe-trial-banner__inner {
        flex-direction: column;
        text-align: center;
        gap: 14px;
        padding: 20px;
    }
    .subscribe-trial-banner__btn {
        width: 100%;
    }
}

/* ============================================
   PAYWALL PREMIUM — Design SaaS 2026
   ============================================ */
.premium-paywall {
    position: relative;
    margin-top: -25px;
    padding-top: 25px;
    min-height: 100%;
}

/* Semi-transparent overlay with blur effect */
.premium-paywall__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 40%, rgba(255,255,255,.97) 100%);
    z-index: 998;
    pointer-events: none;
}

/* Blurred content behind — light blur to keep readability hint */
.premium-paywall__content {
    filter: blur(1.5px);
    opacity: .55;
    pointer-events: none;
    user-select: none;
}

/* Floating banner — centered vertically in viewport */
.premium-paywall__banner {
    position: fixed;
    bottom: auto;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 1100;
    display: flex;
    justify-content: center;
    padding: 0 24px;
    pointer-events: none;
}

.premium-paywall__banner-inner {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 28px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 8px 48px rgba(0,0,0,.18), 0 0 0 1px rgba(59,130,246,.1);
    padding: 28px 40px;
    max-width: 900px;
    width: 100%;
    animation: paywall-slide-up .4s ease-out;
}

@keyframes paywall-slide-up {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* Lock icon — larger */
.premium-paywall__icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 26px;
    box-shadow: 0 6px 18px rgba(99,102,241,.35);
}

/* Text block */
.premium-paywall__text {
    flex: 1;
    min-width: 0;
}

.premium-paywall__title {
    font-size: 19px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 6px;
    line-height: 1.3;
}

.premium-paywall__desc {
    font-size: 14px;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

/* Action buttons */
.premium-paywall__actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.premium-paywall__btn-trial {
    background: #fff;
    color: #3b82f6;
    border: 2px solid #3b82f6;
    border-radius: 10px;
    padding: 11px 26px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: all .2s;
    text-decoration: none;
    text-align: center;
}
.premium-paywall__btn-trial:hover {
    background: #eff6ff;
    color: #2563eb;
    text-decoration: none;
    transform: translateY(-1px);
}

.premium-paywall__btn-premium {
    background: linear-gradient(135deg, #10b981, #22c55e);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 13px 30px;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    transition: all .2s;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 4px 14px rgba(16,185,129,.35);
}
.premium-paywall__btn-premium:hover {
    background: linear-gradient(135deg, #059669, #16a34a);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(16,185,129,.45);
}

/* Responsive — stack on mobile */
@media (max-width: 768px) {
    .premium-paywall__banner-inner {
        flex-direction: column;
        text-align: center;
        gap: 16px;
        padding: 20px;
    }
    .premium-paywall__actions {
        width: 100%;
    }
    .premium-paywall__btn-trial,
    .premium-paywall__btn-premium {
        width: 100%;
    }
}

/* ============================================
   MENU COLLAPSIBLE - Style SaaS 2026
   ============================================ */

/* Section de menu */
.menu-section {
    margin: 0 8px 4px;
}

/* Header de section - Style minimaliste épuré */
.menu-section-header {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 12px 14px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
    color: #334155;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: transparent;
    border: none;
    box-shadow: none;
}

.menu-section-header:hover {
    background: rgba(0, 0, 0, 0.03);
    text-decoration: none;
}

/* Icône avec fond circulaire pastel — couleur par défaut, overridée par section */
.menu-section-header .section-icon {
    margin-right: 12px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 50%;
    flex-shrink: 0;
}

.menu-section-header .section-title {
    flex: 1;
}

/* Chevron simple */
.menu-section-header .chevron {
    transition: transform 0.2s ease;
    font-size: 10px;
    color: #94a3b8;
    background: none;
    width: auto;
    height: auto;
}

.menu-section-header[aria-expanded="true"] .chevron {
    transform: rotate(90deg);
}

/* Contenu de section (sous-menus) */
.menu-section-content {
    padding: 4px 0 8px 0;
}

.menu-section-content .nav-item {
    padding: 0 !important;
    margin: 1px 0;
}

.menu-section-content .nav-item .nav-link {
    display: flex;
    align-items: center;
    padding: 8px 12px 8px 20px !important;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
    border-radius: 0;
    transition: all 0.15s ease;
    position: relative;
    border-left: 3px solid transparent;
    margin-left: 0;
}

.menu-section-content .nav-item .nav-link i {
    color: #64748b;
    font-size: 14px;
    width: 20px;
    margin-right: 10px;
}

.menu-section-content .nav-item .nav-link:hover {
    background: #f1f5f9;
    color: #334155;
    transform: none;
}

.menu-section-content .nav-item .nav-link:hover i {
    color: #64748b;
}

/* État actif - Barre verticale émeraude */
.menu-section-content .nav-item.active .nav-link {
    background: rgba(16, 185, 129, 0.08) !important;
    color: #10b981 !important;
    font-weight: 500;
    border-left: 3px solid #10b981;
}

.menu-section-content .nav-item.active .nav-link i {
    color: #10b981 !important;
}

/* Section active — fallback (overridden by .section-* rules below) */
.menu-section.has-active .menu-section-header {
    background: transparent;
    border: none;
    box-shadow: none;
}

.menu-section.has-active .menu-section-header .section-icon {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.menu-section.has-active .menu-section-header .chevron {
    color: #10b981;
}

/* ─── Sidebar section colors (MUST come after generic green rules) ─── */

/* Traffic — Orange #e67e22 */
.section-traffic .menu-section-header .section-icon { color: #e67e22; background: rgba(230, 126, 34, 0.1); }
.section-traffic.has-active .menu-section-header .section-title { color: #e67e22; }
.section-traffic.has-active .menu-section-header .section-icon { color: #e67e22; background: rgba(230, 126, 34, 0.15); }
.section-traffic.has-active .menu-section-header .chevron { color: #e67e22; }
.section-traffic .menu-section-content .nav-item.active .nav-link { color: #e67e22 !important; border-left-color: #e67e22; background: rgba(230, 126, 34, 0.08) !important; }
.section-traffic .menu-section-content .nav-item.active .nav-link i { color: #e67e22 !important; }
.section-traffic .menu-section-content .nav-item .nav-link:hover { color: #e67e22 !important; background: rgba(230, 126, 34, 0.05); }
.section-traffic .menu-section-content .nav-item .nav-link:hover i { color: #e67e22 !important; }

/* GEO/IA — Cyan #0891b2 */
.section-geo .menu-section-header .section-icon { color: #0891b2; background: rgba(8, 145, 178, 0.1); }
.section-geo.has-active .menu-section-header .section-title { color: #0891b2; }
.section-geo.has-active .menu-section-header .section-icon { color: #0891b2; background: rgba(8, 145, 178, 0.15); }
.section-geo.has-active .menu-section-header .chevron { color: #0891b2; }
.section-geo .menu-section-content .nav-item.active .nav-link { color: #0891b2 !important; border-left-color: #0891b2; background: rgba(8, 145, 178, 0.08) !important; }
.section-geo .menu-section-content .nav-item.active .nav-link i { color: #0891b2 !important; }
.section-geo .menu-section-content .nav-item .nav-link:hover { color: #0891b2 !important; background: rgba(8, 145, 178, 0.05); }
.section-geo .menu-section-content .nav-item .nav-link:hover i { color: #0891b2 !important; }

/* SEO — Émeraude #10b981 */
.section-seo .menu-section-header .section-icon { color: #10b981; background: rgba(16, 185, 129, 0.1); }
.section-seo.has-active .menu-section-header .section-title { color: #10b981; }
.section-seo.has-active .menu-section-header .section-icon { color: #10b981; background: rgba(16, 185, 129, 0.15); }
.section-seo.has-active .menu-section-header .chevron { color: #10b981; }
.section-seo .menu-section-content .nav-item.active .nav-link { color: #10b981 !important; border-left-color: #10b981; background: rgba(16, 185, 129, 0.08) !important; }
.section-seo .menu-section-content .nav-item.active .nav-link i { color: #10b981 !important; }
.section-seo .menu-section-content .nav-item .nav-link:hover { color: #10b981 !important; background: rgba(16, 185, 129, 0.05); }
.section-seo .menu-section-content .nav-item .nav-link:hover i { color: #10b981 !important; }

/* Santé du site — Rose/Ruby #e11d48 */
.section-sante .menu-section-header .section-icon { color: #e11d48; background: rgba(225, 29, 72, 0.1); }
.section-sante.has-active .menu-section-header .section-title { color: #e11d48; }
.section-sante.has-active .menu-section-header .section-icon { color: #e11d48; background: rgba(225, 29, 72, 0.15); }
.section-sante.has-active .menu-section-header .chevron { color: #e11d48; }
.section-sante .menu-section-content .nav-item.active .nav-link { color: #e11d48 !important; border-left-color: #e11d48; background: rgba(225, 29, 72, 0.08) !important; }
.section-sante .menu-section-content .nav-item.active .nav-link i { color: #e11d48 !important; }
.section-sante .menu-section-content .nav-item .nav-link:hover { color: #e11d48 !important; background: rgba(225, 29, 72, 0.05); }
.section-sante .menu-section-content .nav-item .nav-link:hover i { color: #e11d48 !important; }

/* Google Ads — Bleu Google #4285f4 */
.section-sea .menu-section-header .section-icon { color: #4285f4; background: rgba(66, 133, 244, 0.1); }
.section-sea.has-active .menu-section-header .section-title { color: #4285f4; }
.section-sea.has-active .menu-section-header .section-icon { color: #4285f4; background: rgba(66, 133, 244, 0.15); }
.section-sea.has-active .menu-section-header .chevron { color: #4285f4; }
.section-sea .menu-section-content .nav-item.active .nav-link { color: #4285f4 !important; border-left-color: #4285f4; background: rgba(66, 133, 244, 0.08) !important; }
.section-sea .menu-section-content .nav-item.active .nav-link i { color: #4285f4 !important; }
.section-sea .menu-section-content .nav-item .nav-link:hover { color: #4285f4 !important; background: rgba(66, 133, 244, 0.05); }
.section-sea .menu-section-content .nav-item .nav-link:hover i { color: #4285f4 !important; }

/* Social — Violet #7c3aed */
.section-social .menu-section-header .section-icon { color: #7c3aed; background: rgba(124, 58, 237, 0.1); }
.section-social.has-active .menu-section-header .section-title { color: #7c3aed; }
.section-social.has-active .menu-section-header .section-icon { color: #7c3aed; background: rgba(124, 58, 237, 0.15); }
.section-social.has-active .menu-section-header .chevron { color: #7c3aed; }
.section-social .menu-section-content .nav-item.active .nav-link { color: #7c3aed !important; border-left-color: #7c3aed; background: rgba(124, 58, 237, 0.08) !important; }
.section-social .menu-section-content .nav-item.active .nav-link i { color: #7c3aed !important; }
.section-social .menu-section-content .nav-item .nav-link:hover { color: #7c3aed !important; background: rgba(124, 58, 237, 0.05); }
.section-social .menu-section-content .nav-item .nav-link:hover i { color: #7c3aed !important; }

/* Resources — Indigo #6366f1 */
.section-resources .menu-section-header .section-icon { color: #6366f1; background: rgba(99, 102, 241, 0.1); }
.section-resources.has-active .menu-section-header .section-title { color: #6366f1; }
.section-resources.has-active .menu-section-header .section-icon { color: #6366f1; background: rgba(99, 102, 241, 0.15); }
.section-resources.has-active .menu-section-header .chevron { color: #6366f1; }
.section-resources .menu-section-content .nav-item.active .nav-link { color: #6366f1 !important; border-left-color: #6366f1; background: rgba(99, 102, 241, 0.08) !important; }
.section-resources .menu-section-content .nav-item.active .nav-link i { color: #6366f1 !important; }
.section-resources .menu-section-content .nav-item .nav-link:hover { color: #6366f1 !important; background: rgba(99, 102, 241, 0.05); }
.section-resources .menu-section-content .nav-item .nav-link:hover i { color: #6366f1 !important; }

/* Pilotage — Bleu #4e73df (groupe toujours déplié : Performances / Plan d'action / ROI) */
.section-pilotage .menu-section-header { cursor: default; }
.section-pilotage .menu-section-header .section-icon { color: #4e73df; background: rgba(78, 115, 223, 0.1); }
.section-pilotage.has-active .menu-section-header .section-title { color: #4e73df; }
.section-pilotage.has-active .menu-section-header .section-icon { color: #4e73df; background: rgba(78, 115, 223, 0.15); }
.section-pilotage .menu-section-content .nav-item.active .nav-link { color: #4e73df !important; border-left-color: #4e73df; background: rgba(78, 115, 223, 0.08) !important; }
.section-pilotage .menu-section-content .nav-item.active .nav-link i { color: #4e73df !important; }
.section-pilotage .menu-section-content .nav-item .nav-link:hover { color: #4e73df !important; background: rgba(78, 115, 223, 0.05); }
.section-pilotage .menu-section-content .nav-item .nav-link:hover i { color: #4e73df !important; }

/* Animation smooth du collapse */
.menu-section-content.collapsing {
    transition: height 0.2s ease;
}

/* Divider dans les sections */
.menu-section + .sidebar-divider {
    display: none;
}

/* ============================================
   SÉLECTEUR DE SITE - Style SaaS 2026
   ============================================ */
.site-selector-wrapper {
    padding: 12px 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}

.site-selector-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: none;
    color: #334155;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.site-selector-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    box-shadow: none;
    transform: none;
}

.site-selector-btn:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.site-selector-btn .site-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border-radius: 6px;
    color: #64748b;
    font-size: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

.site-selector-btn .site-icon .site-favicon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.site-selector-btn .site-name {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-selector-btn .site-chevron {
    font-size: 10px;
    color: #888;
    transition: transform 0.3s ease;
}

.site-selector.show .site-selector-btn .site-chevron {
    transform: rotate(180deg);
}

/* Dropdown menu - Style épuré */
.site-dropdown-menu {
    width: 100%;
    padding: 6px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    margin-top: 4px;
    max-height: 400px;
    overflow: hidden;
}

.site-dropdown-menu.show {
    display: flex !important;
    flex-direction: column;
}

.site-dropdown-scroll {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.site-dropdown-fixed {
    flex-shrink: 0;
}

/* Scrollbar personnalisée pour le dropdown sites */
.site-dropdown-scroll::-webkit-scrollbar {
    width: 6px;
}

.site-dropdown-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.site-dropdown-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.site-dropdown-scroll::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.site-dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    color: #334155;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    transition: background-color 0.15s ease;
}

.site-dropdown-menu .dropdown-item:hover {
    background: #f1f5f9;
    color: #334155;
}

.site-dropdown-menu .dropdown-item.site-option {
    position: relative;
}

.site-dropdown-menu .dropdown-item.active {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    font-weight: 500;
}

.site-dropdown-menu .site-favicon-small {
    width: 16px;
    height: 16px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

.site-dropdown-menu .dropdown-item .site-check {
    margin-left: auto;
    opacity: 0;
    color: #10b981;
    font-size: 10px;
}

.site-dropdown-menu .dropdown-item.active .site-check {
    opacity: 1;
}

.site-dropdown-menu .dropdown-divider {
    margin: 6px 0;
    border-color: #e2e8f0;
}

.site-dropdown-menu .site-add-new {
    color: #10b981;
}

.site-dropdown-menu .site-add-new i {
    color: #10b981;
}

.site-dropdown-menu .site-settings {
    color: #666;
}

/* ============================================
   CTA "Passer en Premium" - Topbar
   ============================================ */
.btn-premium-cta {
    background: linear-gradient(135deg, #10b981, #22c55e);
    color: #fff !important;
    border: none;
    border-radius: 8px;
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: all .25s ease;
    box-shadow: 0 2px 8px rgba(16,185,129,.3);
    text-decoration: none !important;
    letter-spacing: .02em;
}
.btn-premium-cta:hover {
    background: linear-gradient(135deg, #059669, #16a34a);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(16,185,129,.45);
}
.btn-premium-cta i {
    color: #fbbf24;
}

/* ============================================
   Badge Trial Premium - Topbar
   ============================================ */
.btn-trial-badge {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff !important;
    border: none;
    border-radius: 8px;
    padding: 7px 18px;
    font-size: .82rem;
    font-weight: 600;
    transition: all .25s ease;
    box-shadow: 0 2px 8px rgba(99,102,241,.3);
    text-decoration: none !important;
    letter-spacing: .02em;
}
.btn-trial-badge:hover {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(99,102,241,.45);
    color: #fff !important;
}
.btn-trial-badge i {
    color: #fbbf24;
}

/* ============================================
   SWITCH DE LANGUE - Topbar
   ============================================ */
.locale-switcher {
    margin-right: 15px;
}

.locale-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    color: #334155;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.locale-btn:hover,
.locale-btn:focus {
    background: #f8fafc;
    border-color: #cbd5e1;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    color: #334155;
}

.locale-btn::after {
    font-size: 10px;
    margin-left: 2px;
}

.locale-flag {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.locale-dropdown {
    min-width: auto;
    padding: 4px 0;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.locale-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #334155;
}

.locale-item:hover {
    background: #f1f5f9;
    color: #1e293b;
}

/* ============================================
   GRAPHIQUES CHART.JS - Styles modernes
   ============================================ */
.chart-pie,
.chart-area,
.chart-bar {
    position: relative;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.3) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.chart-pie:hover,
.chart-area:hover,
.chart-bar:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.chart-pie canvas,
.chart-area canvas,
.chart-bar canvas {
    max-height: 300px !important;
}

/* Titres des blocs de graphiques */
.card-header {
    font-weight: 800;
    color: #1a1a2e;
    font-size: 18px;
    letter-spacing: 0.5px;
    text-align: center;
    text-transform: uppercase;
}

/* Conteneur de statistiques */
.stat-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.5) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 20px;
}

/* Fallback pour navigateurs sans backdrop-filter */
@supports not (backdrop-filter: blur(10px)) {
    #accordionSidebar {
        background: rgb(245, 249, 255) !important;
    }

    .topbar {
        background: rgb(235, 238, 241) !important;
    }

    .block-with-title,
    .filters-row {
        background: rgba(255, 255, 255, 0.95);
    }

    .modal-content {
        background: #fff;
    }
}

/* ============================================
   SECTION COLOR ACCENTS — page content
   ============================================ */

/* Block titles — subtle left border accent */
.block-with-title {
    border-left: 3px solid var(--section-color, #10b981);
}

/* Stat cards — top border accent */
.stat-card {
    border-top: 3px solid var(--section-color, #10b981);
}

/* Block stat cards — top border accent */
.block-stats .block-stat {
    border-top: 3px solid var(--section-color, #10b981);
}

/* Card headers — section colored underline */
.card-header {
    border-bottom: 2px solid rgba(var(--section-color-rgb, 16, 185, 129), 0.2);
}

/* Links styled as primary — follow section color */
a.text-primary:not(.btn) { color: var(--section-color, #4e73df) !important; }
a.text-primary:not(.btn):hover { color: var(--section-color, #4e73df) !important; filter: brightness(0.85); }

/* Primary buttons — follow section color */
.btn-primary {
    background-color: var(--section-color, #4c75c8);
    border-color: var(--section-color, #4c75c8);
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--section-color, #3465c7);
    border-color: var(--section-color, #3465c7);
    filter: brightness(0.9);
}

/* Scrollbar thumb on content area — subtle section tint */
#content-wrapper::-webkit-scrollbar { width: 6px; }
#content-wrapper::-webkit-scrollbar-thumb {
    background: rgba(var(--section-color-rgb, 16, 185, 129), 0.25);
    border-radius: 4px;
}
#content-wrapper::-webkit-scrollbar-track { background: transparent; }

/* ============================================
   MOBILE RESPONSIVE - Design Mobile-First
   ============================================ */

/* Overlay sombre pour mobile */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    /* Doit passer AU-DESSUS de la topbar (nav.topbar z-index:1200) et de tout
       contenu (#period-bar z-index:1050) pour les griser quand le menu est ouvert.
       Le drawer (.sidebar.mobile-open) repasse juste au-dessus à 1310. */
    z-index: 1300;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Le bouton chatbot (position:fixed, z-index:9998) flotterait au-dessus du menu
   mobile : on le masque tant que le drawer est ouvert. La classe est posée sur
   <body> par le JS uniquement à l'ouverture du menu mobile. */
body.sidebar-mobile-open .chatbot-toggle {
    display: none;
}

/* Bouton fermer sidebar - desktop caché */
.sidebar-close-btn {
    display: none;
}

/* Bouton fermer sidebar - mobile visible */
@media (max-width: 767px) {
    .sidebar-close-btn {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: #f1f5f9;
        border: none;
        border-radius: 8px;
        color: #64748b;
        font-size: 20px;
        cursor: pointer;
        transition: all 0.2s ease;
        z-index: 100;
        -webkit-tap-highlight-color: transparent;
    }

    .sidebar-close-btn:hover,
    .sidebar-close-btn:active {
        background: #e2e8f0;
        color: #1e293b;
    }
}

@media (max-width: 767px) {
    /* ========================================
       SIDEBAR DRAWER MOBILE
       ======================================== */
    ul#accordionSidebar.sidebar {
        position: fixed;
        left: 0;
        top: 0;
        transform: translateX(-100%);
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
        z-index: 1310;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: none;
        height: 100vh !important;
        height: 100dvh !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2rem;
    }

    /* Seul mobile-open affiche le menu sur mobile.
       !important pour toujours l'emporter sur .toggled (ajouté par sb-admin selon
       la largeur d'écran) qui, sinon, gagne par ordre source au premier affichage. */
    ul#accordionSidebar.sidebar.mobile-open {
        transform: translateX(0) !important;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    }

    /* Désactiver toggled sur mobile - on utilise mobile-open */
    ul#accordionSidebar.sidebar.toggled {
        transform: translateX(-100%);
    }

    /* Header dans le drawer */
    .sidebar-logo {
        height: 60px;
        border-bottom: 1px solid #e2e8f0;
    }

    .sidebar-logo img {
        height: 35px;
        max-width: 200px;
        object-fit: contain;
    }

    /* Content wrapper sans marge */
    #content-wrapper {
        margin-left: 0 !important;
    }

    /* ========================================
       MASQUER .intro SAUF CONSEIL DE MAIA
       ======================================== */
    .intro:not(.intro-conseil-maia) {
        display: none;
    }

    /* ========================================
       TOPBAR COMPACTE — fixée en haut
       Sélecteur nav.topbar (spécificité 0,1,1) indispensable : la règle globale
       `nav.topbar { position: relative; z-index: 1200 }` battait l'ancienne règle
       `.topbar` (0,1,0), si bien que position:fixed n'était jamais appliquée.
       La topbar restait alors dans le flux ET #content gardait padding-top:60px,
       d'où la bande vide de 60px. On garde z-index:1200 (hérité du global) pour
       rester au-dessus du contenu ; l'overlay du menu (1300) la grise à l'ouverture.
       ======================================== */
    nav.topbar {
        padding: 0.25rem 0.5rem;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }

    /* Réserve la hauteur de la topbar fixe : ce n'est plus un décalage en trop,
       l'espace est exactement occupé par la topbar. */
    #content {
        padding-top: 60px;
    }

    .topbar .navbar-nav {
        flex-direction: row;
    }

    .locale-switcher .locale-btn {
        padding: 4px 10px;
        font-size: 12px;
        gap: 5px;
    }

    .topbar .nav-item .nav-link {
        padding: 0.25rem;
    }

    .title-page.h3 {
        font-size: 1.2rem;
    }

    /* ========================================
       CARDS RESPONSIVE - STACKING MOBILE
       ======================================== */
    .block-stats {
        flex-direction: column;
    }

    .block-stats .block-stat {
        flex: none;
        width: 100%;
    }

    .jauges {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }

    .jauges .jauge {
        flex: none;
        width: 100%;
    }

    .row > [class*="col-xl-"],
    .row > [class*="col-lg-"],
    .row > [class*="col-md-"] {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 1rem;
    }

    .block-with-title {
        padding: 15px;
    }

    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* ========================================
       TABLES RESPONSIVE - SCROLL HORIZONTAL
       ======================================== */
    .block-with-title .block-content,
    .card-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Exclure les conteneurs de charts du overflow-x */
    .chart-pie,
    .chart-area,
    .chart-bar {
        overflow: visible;
        min-width: 0;
    }

    .chart-pie canvas,
    .chart-area canvas,
    .chart-bar canvas {
        min-width: 0 !important;
        width: 100% !important;
    }

    .table {
        min-width: 600px;
    }

    /* Tables inline Ads : pas de min-width quand ce sont des KPI simples */
    .block-with-title .block-content .table.table-bordered.table-striped {
        min-width: 0;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        text-align: left;
        margin-bottom: 10px;
    }

    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        text-align: center;
        margin-top: 10px;
    }

    /* ========================================
       CHARTS - HAUTEUR REDUITE
       ======================================== */
    .chart-area {
        min-height: 200px;
    }

    /* Tables scrollables */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    /* ========================================
       FILTRES RESPONSIVE MOBILE
       ======================================== */
    #btn-filter-wrapper .btn,
    .btn-filter-toggle {
        width: 100%;
        justify-content: center;
    }

    .filters-row {
        padding: 15px;
        border-radius: 8px;
    }

    .filters-row .row > [class*="col-md-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .filters-row .btn-success {
        width: 100%;
    }

    .filters-row-inline {
        flex-direction: column;
        align-items: stretch;
    }

    .filters-row-inline .form-control {
        max-width: 100%;
    }

    .filters-row-inline .filter-actions {
        margin-left: 0;
        justify-content: center;
    }

    /* Modals plein écran sur mobile */
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100%;
    }

    .modal-content {
        border-radius: 0;
        height: 100%;
    }
}

/* ============================================
   BREAKPOINT TABLETTE (768px-991px)
   ============================================ */
@media (min-width: 768px) and (max-width: 991px) {
    ul#accordionSidebar.sidebar {
        width: 250px !important;
        min-width: 250px !important;
        max-width: 250px !important;
    }

    #content-wrapper {
        margin-left: 250px !important;
    }

    .block-stats {
        gap: 10px;
    }

    /* Filtres form-based : grille 2x2 */
    .filters-row .row > .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ═══════════════════════════════════════════
   SKELETON LOADER
   ═══════════════════════════════════════════ */
@keyframes skeleton-shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 8px;
}

.skeleton-block {
    background: var(--glass-bg, rgba(255,255,255,0.7));
    border: 1px solid var(--glass-border, rgba(255,255,255,0.3));
    border-left: 3px solid #e2e8f0;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 1.5rem;
}

.skeleton-title {
    height: 20px;
    width: 200px;
    margin: 0 auto 20px;
}

.skeleton-stats {
    display: flex;
    flex-flow: row wrap;
    gap: 15px;
}

.skeleton-stat {
    flex: 1;
    min-width: 150px;
    background: linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.5) 100%);
    border: 1px solid rgba(255,255,255,0.5);
    border-top: 3px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px 15px;
    text-align: center;
}

.skeleton-stat-value {
    height: 28px;
    width: 80px;
    margin: 0 auto 10px;
}

.skeleton-stat-label {
    height: 12px;
    width: 100px;
    margin: 0 auto;
}

.skeleton-table-row {
    height: 16px;
    margin-bottom: 12px;
    width: 100%;
}

.skeleton-table-row:nth-child(odd) { width: 90%; }
.skeleton-table-row:nth-child(even) { width: 75%; }

/* Loading overlay for forms */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
}

.loading-overlay.active {
    display: flex;
}

.loading-overlay .loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #e2e8f0;
    border-top-color: var(--section-color, #10b981);
    border-radius: 50%;
    animation: skeleton-spin 0.7s linear infinite;
}

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

.loading-overlay .loading-text {
    font-size: 15px;
    color: #475569;
    font-weight: 600;
}
}