/* Variables CSS pour le responsive */
:root {
    /* Hauteurs responsive pour les graphiques */
    --chart-height-desktop: min(500px, 60vh);
    --chart-height-tablet: min(420px, 55vh);
    --chart-height-mobile: min(380px, 60vh);
    --chart-height-small: min(330px, 55vh);

    /* Touch target minimum (accessibilité) */
    --touch-min: 44px;

    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
}

/* Bandeau de qualité des données */
.data-quality-banner {
    padding: 14px 20px;
    margin: 0 0 24px 0;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.data-quality-banner i {
    flex-shrink: 0;
    margin-top: 2px;
}

.data-quality-banner.data-quality-partiel {
    background: #fff8e6;
    border: 1px solid #ffc107;
    color: #856404;
}

.data-quality-banner.data-quality-minimal {
    background: #fef3f4;
    border: 1px solid #e57373;
    color: #c62828;
}

/* Reset et styles de base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    min-height: 100%;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #1a1a1a;
    background: #ffffff;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Skip link pour accessibilité */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000000;
    color: #ffffff;
    padding: 8px 16px;
    z-index: 10000;
    text-decoration: none;
    font-weight: 500;
    border-radius: 0 0 4px 0;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
}

/* Fond galaxie */
#galaxyCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    filter: brightness(0.8);
}

.galaxy-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1;
}

/* Header */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    background: #ffffff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 80px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Logo texte header */
.logo-link-header {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    line-height: 1;
    transition: opacity 0.2s ease;
}
.logo-link-header:hover {
    opacity: 0.7;
}
.logo-link-header .logo-text-main {
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #000000;
}
.logo-link-header .logo-text-sub {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    color: #666666;
}

.header .company-info {
    text-align: right;
}

.header .company-name {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.badge-fermee {
    display: inline-block;
    background-color: #dc3545;
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 10px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.header .company-siren {
    font-size: 13px;
    opacity: 0.6;
    margin: 2px 0 0 0;
}

.header .more-info-btn {
    padding: 8px 12px;
    font-size: 12px;
}

.header .search-input-wrapper {
    width: 420px;
}

.header .search-input {
    padding: 10px 16px;
    font-size: 14px;
}

.header .search-button {
    padding: 10px 20px;
    font-size: 14px;
}

/* SEO Intro */
.seo-intro {
    max-width: 100%;
    margin: 0 0 24px 0;
    padding: 0;
    position: relative;
    z-index: 10;
    background: transparent;
}

.seo-intro p {
    color: var(--color-text-primary, #1a1a1a);
    line-height: 1.6;
    font-size: 1rem;
    margin: 0 0 12px 0;
}

.seo-intro .data-update-info {
    margin-top: 12px;
    font-size: 0.8rem;
    color: var(--color-text-muted, #666666);
}

.seo-intro .data-update-info i {
    margin-right: 6px;
    color: var(--color-text-muted, #666666);
}

.seo-intro .data-update-info a {
    color: var(--color-text-primary, #1a1a1a);
    text-decoration: none;
}

.seo-intro .data-update-info a:hover {
    text-decoration: underline;
}

/* Tableau SEO données financières (crawlable par LLMs) */
.seo-financial-table {
    max-width: 100%;
    width: 100%;
    margin: 0 0 24px 0;
    border-collapse: collapse;
    font-size: 0.85rem;
    background: #ffffff;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
    border-radius: 8px;
    overflow-x: auto;
    display: block;
}

.seo-financial-table caption {
    padding: 10px 0;
    font-size: 0.75rem;
    color: var(--color-text-muted, #666666);
    text-align: left;
    caption-side: top;
}

.seo-financial-table th,
.seo-financial-table td {
    padding: 10px 12px;
    text-align: right;
    border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.06));
    white-space: nowrap;
}

.seo-financial-table th {
    color: var(--color-text-secondary, #4a4a4a);
    font-weight: 500;
}

.seo-financial-table th[scope="row"] {
    text-align: left;
    color: var(--color-text-primary, #1a1a1a);
    font-weight: 500;
}

.seo-financial-table thead th {
    background: var(--color-bg-secondary, #fafafa);
    color: var(--color-text-secondary, #4a4a4a);
    font-size: 0.8rem;
}

.seo-financial-table tbody td {
    color: var(--color-text-primary, #1a1a1a);
    font-variant-numeric: tabular-nums;
}

.seo-financial-table tbody tr:hover {
    background: var(--color-bg-secondary, #fafafa);
}

/* Responsive tableau SEO */
@media (max-width: 768px) {
    .seo-financial-table {
        font-size: 0.75rem;
    }
    .seo-financial-table th,
    .seo-financial-table td {
        padding: 8px 6px;
    }
}

@media (max-width: 480px) {
    .seo-financial-table {
        display: none; /* Cacher sur très petits écrans */
    }
}

/* Contenu principal */
.main-content {
    padding: 30px;
    max-width: 1200px;
    margin: 0 auto;
    width: 90%;
    position: relative;
    z-index: 10;
    background: #ffffff;
}

/* Titres */
h2 {
    margin-bottom: 20px;
    color: #1a1a1a;
    border-bottom: 2px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 10px;
}

.chart-title, .chart-source {
    text-align: center;
    color: var(--color-text-primary, #1a1a1a);
}

.chart-title {
    font-size: 18px;
    margin-bottom: 10px;
}

.chart-source {
    font-size: 12px;
    margin-top: 5px;
}

/* Tableaux */
/* Style du tableau */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    background-color: var(--color-bg-primary, #ffffff);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
}

/* Style des cellules */
th, td {
    border: 1px solid #e0e0e0;
    padding: 12px;
    text-align: left;
    position: relative; /* Pour l'effet de survol */
}

/* Supprimer les bordures externes */
th:first-child, td:first-child {
    border-left: none;
}

th:last-child, td:last-child {
    border-right: none;
}

/* Style de l'en-tête */
th {
    background-color: #f3f3f3;
    font-weight: bold;
}

/* Arrondir les coins du premier et du dernier th */
th:first-child {
    border-top-left-radius: 10px;
}

th:last-child {
    border-top-right-radius: 10px;
}

/* Arrondir les coins de la dernière ligne */
tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

/* Style pour les lignes impaires */
tbody tr:nth-child(odd) {
    background-color: #f5f5f5; /* Légère transparence */
}

/* Alignement des montants en euros et à droite */
td {
    text-align: right; /* Aligner tout le texte à droite */
}

/* Formater les montants en euros */
td.amount::after {
    content: " €"; /* Ajouter le symbole d'euro après le montant */
}

/* Effet de survol */
th:hover, td:hover {
    background-color: rgba(0, 0, 0, 0.08); /* Couleur de fond au survol */
}

/* Lignes séparatrices entre les colonnes */
th, td {
    border-right: 1px solid #e0e0e0;
}

/* Grille de ratios */
.ratio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
    contain: layout style; /* Fix CLS - isole les changements */
}

.ratio-card {
    background-color: var(--color-bg-primary, #ffffff);
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    min-height: 95px; /* Fix CLS - réserve l'espace */
    contain: layout; /* Isole les changements de layout */
}

.ratio-card h3 {
    font-size: 16px;
    margin-bottom: 10px;
}

.ratio-value {
    font-size: 20px;
    margin-top: 10px;
    font-variant-numeric: tabular-nums; /* Fix CLS - chiffres largeur fixe */
}

/* Ratio non interprétable (ex. capitaux propres négatifs) */
.ratio-value.ratio-na {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary, #6b7280);
    font-style: italic;
}

/* Animation des nombres */
.number {
    opacity: 0;
    transition: opacity 0.5s ease;
    font-variant-numeric: tabular-nums; /* Fix CLS - chiffres largeur fixe */
    display: inline-block;
    min-width: 80px; /* Fix CLS - réserve l'espace */
}

.number.visible {
    opacity: 1;
}

/* P&L et BFR */
.chart-container {
    background-color: var(--color-bg-primary, #ffffff);
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    width: 100%;
    /* Hauteur AUTO : la carte s'ajuste à son contenu (header + graphe). Elle ne
       dépend jamais du canvas (qui est hors flux, voir .chart-canvas-wrapper),
       donc aucune boucle de redimensionnement possible et aucun débordement. */
    height: auto;
    overflow: visible;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* === Conteneur DÉDIÉ au canvas (recommandation officielle Chart.js) ==========
   Le canvas est en position ABSOLUE : il est donc HORS FLUX et ne peut JAMAIS
   influencer la hauteur d'un parent. Combiné à une hauteur DÉFINIE sur ce
   wrapper, cela rend la boucle infinie de redimensionnement (responsive +
   maintainAspectRatio:false) mathématiquement impossible. Tous les graphes
   partagent EXACTEMENT la même hauteur via les variables --chart-height-*. */
.chart-canvas-wrapper {
    position: relative;
    width: 100%;
    height: var(--chart-height-desktop);
    flex: none;
}
.chart-canvas-wrapper > canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
}


.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chart-header h3 {
    margin: 0;
    color: #1a1a1a;
    font-size: 18px;
}

.chart-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

#plIndicatorSelect {
    background-color: #ebebeb;
    color: #1a1a1a;
    border: 1px solid #e5e5e5;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
}

#plIndicatorSelect:hover {
    background-color: #f0f0f0;
}

/* Les canvas sont désormais positionnés en absolu dans .chart-canvas-wrapper
   (hauteur gérée par le wrapper). Plus aucune règle de hauteur par canvas. */

/* Boutons */
.button-container {
    display: flex;
    gap: 10px;
}

.action-button {
    background-color: #ebebeb;
    color: #1a1a1a;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-size: 14px;
}

.action-button:hover {
    background-color: #f0f0f0;
    transform: scale(1.02);
}

/* Masquage et affichage des tableaux */
.table-container {
    transition: max-height 0.5s ease, opacity 0.5s ease;
    max-height: 1000px;
    opacity: 1;
    overflow: hidden;
}

.table-container.hidden {
    max-height: 0;
    opacity: 0;
    padding: 0;
    margin: 0;
}

/* ===== RESPONSIVE DESIGN ===== */

/* Tablette (max-width: 1024px) */
@media (max-width: 1024px) {
    .main-content {
        padding: 20px;
        width: 95%;
    }

    .chart-canvas-wrapper {
        height: var(--chart-height-tablet);
    }

    .ratio-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 15px;
    }

    .search-input-wrapper {
        width: 400px;
    }

    .button-container {
        flex-wrap: wrap;
        gap: 8px;
    }

    .action-button {
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
    /* Forcer pas de scroll horizontal sur mobile */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    body.analyse-page {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }

    /* Header compact sticky : logo + nom entreprise uniquement */
    .header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 10px 15px;
        height: 50px;
        gap: 10px;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }

    .header-left {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        width: auto;
    }

    .header-right {
        width: auto;
    }

    /* Cacher la barre de recherche sur mobile dans le header */
    .header .search-container {
        display: none;
    }

    .header .logo img {
        height: 24px;
        width: auto;
        aspect-ratio: 1358 / 442;
    }

    .header .company-info {
        text-align: right;
        margin-right: 0;
        margin-top: 0;
    }

    .header .company-name {
        font-size: 14px;
        max-width: clamp(120px, 35vw, 220px); /* Responsive: 120px min, 220px max */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .header .company-siren {
        font-size: 10px;
    }

    .header .more-info-btn {
        min-height: 44px;
        padding: 10px 12px;
        font-size: 12px;
    }

    /* Ajuster le padding du body pour le header compact */
    body.analyse-page {
        padding-top: 50px;
    }

    /* S'assurer que l'intro est visible et pas cachée */
    .seo-intro {
        margin-top: 15px;
        padding: 15px;
    }

    .main-content {
        padding: 10px 8px;
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
        border-radius: 0;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    /* Bilan : masquer colonnes Brut et Amort sur mobile */
    #th-actif-brut,
    #th-actif-amort,
    #th-passif-brut,
    #th-passif-amort,
    .bilan-col-brut,
    .bilan-col-amort {
        display: none !important;
    }

    /* Tableaux compacts mobile - sans scroll horizontal */
    .pl-table {
        font-size: 11px;
    }

    .pl-table th,
    .pl-table td {
        padding: 6px 4px;
    }

    .pl-table th.pl-label,
    .pl-table td.pl-label {
        min-width: 100px;
        max-width: 140px;
        font-size: 11px;
        word-break: break-word;
        white-space: normal;
    }

    .pl-table .pl-value {
        min-width: 60px;
        font-size: 10px;
    }

    .pl-table .pl-pct {
        min-width: 28px;
        max-width: 35px;
        font-size: 9px;
    }

    .pl-table .pl-var,
    .pl-table .pl-sparkline {
        min-width: 35px;
        max-width: 50px;
        font-size: 9px;
    }

    .table-scroll {
        margin: 0 -8px;
        padding: 0 8px;
        overflow-x: visible;
    }

    /* Touch targets - agrandir elements interactifs sur mobile */
    .indicator-info {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .more-info-btn {
        min-height: 44px;
        padding: 10px 16px;
    }

    .year-badge-link {
        min-height: 44px;
        padding: 10px 14px;
    }

    /* Tooltips tactiles - cacher hover, activer click */
    .indicator-info:hover .indicator-tooltip {
        visibility: hidden;
        opacity: 0;
    }

    .indicator-info.active .indicator-tooltip {
        visibility: visible;
        opacity: 1;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 90vw;
        width: 320px;
        z-index: 10001;
    }

    .indicator-info.active .indicator-tooltip::after {
        display: none;
    }

    /* Overlay pour fermer tooltip */
    .tooltip-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #f0f0f0;
        z-index: 10000;
    }

    /* Note: .chart-container est caché sur mobile via le CSS plus bas */
    /* Ces styles sont conservés pour compatibilité mais ne s'appliquent pas */

    .chart-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .chart-header h3 {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .chart-controls {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 8px;
    }

    .button-container {
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }

    .action-button {
        width: 100%;
        min-height: var(--touch-min);
        padding: 10px 12px;
        font-size: 14px;
        flex-grow: 1;
    }

    #plIndicatorSelect,
    #sectorComparisonIndicatorSelect,
    #sectorIndicatorSelect,
    .search-select {
        width: 100%;
        min-height: var(--touch-min);
        margin-bottom: 8px;
    }

    .ratio-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ratio-card {
        padding: 12px;
    }

    .ratio-card h3 {
        font-size: 14px;
    }

    .ratio-value {
        font-size: 18px;
    }

    /* Tables : scroll horizontal */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -10px;
        padding: 0 10px;
    }

    .table-container table {
        min-width: 600px;
    }

    table {
        font-size: 13px;
    }

    th, td {
        padding: 8px 6px;
        white-space: nowrap;
    }

    /* Première colonne sticky pour les tables */
    .table-container th:first-child,
    .table-container td:first-child {
        position: sticky;
        left: 0;
        background-color: #fafafa;
        z-index: 1;
    }

    .search-container {
        flex-direction: column;
        width: 100%;
    }

    .search-select-wrapper,
    .search-input-wrapper {
        width: 100%;
        margin-bottom: 10px;
    }

    /* Dropdowns year/decile selector - centré sur mobile */
    .year-selector,
    .decile-selector {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-height: 80vh;
        overflow-y: auto;
        width: 90%;
        max-width: 300px;
        z-index: 10000;
        background: rgba(255, 255, 255, 0.98);
    }

    .year-selector label,
    .decile-selector label {
        padding: 12px 8px;
        min-height: var(--touch-min);
    }

    h2 {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .seo-intro {
        padding: 0 15px;
        margin: 15px auto;
    }

    .seo-intro p {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    .expanded-info {
        padding: 12px;
    }

    .company-detail {
        flex-basis: 100%;
        font-size: 13px;
        padding: 8px;
    }

}

/* Petit mobile (max-width: 480px) */
@media (max-width: 480px) {
    .header {
        padding: 10px;
    }

    .logo img {
        width: 120px;
    }

    .company-name {
        font-size: 16px;
    }

    .main-content {
        padding: 8px 5px;
    }

    .table-scroll {
        margin: 0 -5px;
        padding: 0 5px;
    }

    /* Tableaux encore plus compacts sur petit ecran */
    .pl-table th.pl-label,
    .pl-table td.pl-label {
        min-width: 80px;
        max-width: 110px;
        font-size: 10px;
    }

    .pl-table .pl-value {
        min-width: 50px;
        font-size: 9px;
    }

    .pl-table th,
    .pl-table td {
        padding: 5px 3px;
    }

    .seo-intro {
        padding: 0 10px;
        margin: 10px auto;
    }

    .seo-intro p {
        font-size: 0.9rem;
    }

    h2 {
        font-size: 16px;
    }

    .chart-container,
    #sectorComparisonContainer {
        padding: 6px;
        margin-bottom: 8px;
    }

    .chart-canvas-wrapper {
        height: var(--chart-height-mobile);
    }

    .chart-header h3 {
        font-size: 14px;
    }

    .ratio-card {
        padding: 10px;
    }

    .ratio-card h3 {
        font-size: 13px;
    }

    .ratio-value {
        font-size: 16px;
    }

    .action-button {
        padding: 10px;
        font-size: 13px;
    }

    table {
        font-size: 12px;
    }

    th, td {
        padding: 6px 4px;
    }

    #autocomplete-list {
        max-height: 300px;
    }
}

/* Très petit mobile (max-width: 320px) */
@media (max-width: 320px) {
    .header {
        padding: 8px;
    }

    .logo img {
        width: 100px;
    }

    .company-name {
        font-size: 14px;
    }

    .company-siren {
        font-size: 11px;
    }

    .main-content {
        padding: 8px;
    }

    .seo-intro {
        display: none; /* Cacher sur très petits écrans */
    }

    h2 {
        font-size: 15px;
    }

    .chart-canvas-wrapper {
        height: var(--chart-height-small);
    }

    .chart-header h3 {
        font-size: 13px;
    }

    .ratio-card h3 {
        font-size: 12px;
    }

    .ratio-value {
        font-size: 14px;
    }

    .action-button {
        font-size: 12px;
        padding: 8px;
    }
}

/* Mode paysage sur mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .header {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* === Graphiques en ligne sur mobile : empêcher les barres de contrôles
   d'écraser le graphe. Le conteneur prend une hauteur AUTO (il s'adapte à la
   hauteur des contrôles) et chaque canvas reçoit une hauteur dédiée garantie.
   Important : on neutralise le flex:1 défini par ID (forte spécificité) sinon
   le canvas s'effondre à 0 dans un conteneur sans hauteur fixe. === */
@media (max-width: 768px) {
    /* Le graphe "Positionnement dans son secteur" a de nombreux boutons :
       on les met en grille 2 colonnes au lieu d'une pile pleine largeur. */
    #sectorComparisonContainer .button-container {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }

    #sectorComparisonContainer .button-container .action-button {
        width: auto;
        flex: 1 1 45%;
        font-size: 12px;
        padding: 8px 10px;
    }
}

#pl-table{
	margin-top: 10px;
}

.dark-background {
    background: #ffffff;
    padding: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}

#solvabiliteChartContainer {
	padding: 16px;
}

#liquiditeChartContainer {
	padding: 16px;
}

/* Styles communs pour les boutons */
.action-button {
    background-color: #ebebeb;
    color: #1a1a1a;
    border: 1px solid #e5e5e5;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Effet de survol pour les boutons */
.action-button:hover {
    background-color: #f0f0f0;
}

/* IA */
#ai-analysis-container {
    background-color: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    width: 100%;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
	margin-top: 15px;
}

#ai-analysis-container.expanded {
    height: auto;
    max-height: 1000px;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chart-header h3 {
    display: flex;
    align-items: center;
    margin: 0;
    color: #1a1a1a;
    font-size: 18px;
}

#analysis-content {
    transition: max-height 0.3s ease-out, opacity 0.3s ease-in-out;
    max-height: 0;
    opacity: 0;
}

#analysis-content.visible {
    max-height: 1000px;
    opacity: 1;
}

#analysis-result {
    background-color: #ebebeb;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    padding: 15px;
    margin-top: 20px;
}

#analysis-text {
    font-size: 14px;
    line-height: 1.6;
    color: #1a1a1a;
}

.icon-space {
    margin-right: 10px; /* Ajustez cette valeur selon l'espacement désiré */
}

.analysis-waiting {
	margin-top: 5px;
}

/* Header-left and Header-right containers */
.header-left, .header-right {
    display: flex;
    align-items: center;
}

/* Logo */
.logo img {
    width: 180px;
    height: auto;
    margin-right: 20px;
}

/* Barre de recherche */
.search-container {
    display: flex;
    align-items: center;
}

.search-select-wrapper {
    position: relative;
    width: 140px;
    margin-right: 10px;
}

.search-select {
    width: 100%;
    height: 100%;
    padding: 10px 30px 10px 15px;
    font-size: 14px;
    border: none;
    border-radius: 24px;
    background-color: #f5f5f5;
    color: #1a1a1a;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: background-color 0.3s;
    outline: none;
}

.search-select-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #1a1a1a;
    font-size: 12px;
}

.search-input-wrapper {
    display: flex;
    align-items: stretch;
    background-color: #f5f5f5;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    width: 500px;
}

.search-input {
    flex-grow: 1;
    padding: 10px 15px;
    font-size: 14px;
    border: none;
    background-color: transparent;
    color: #1a1a1a;
}

.search-button {
    padding: 10px 20px;
    font-size: 14px;
    border: none;
    background-color: #000000;
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.3s;
}

.search-loading-effect {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-beam {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: beam-sweep 1.2s ease-in-out infinite;
}

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

/* Informations de l'entreprise */
.company-info {
    text-align: right;
    margin-right: 20px;
}

.company-name {
    font-size: 24px;
    color: #1a1a1a;
    margin: 0;
}

.company-siren {
    font-size: 14px;
    color: #666666;
    margin: 5px 0 0 0;
}

.more-info-btn {
    background: none;
    border: none;
    color: #1a1a1a;
    font-size: 20px;
    cursor: pointer;
}

/* Responsive header - intégré dans le bloc principal @media (max-width: 768px) */

.expanded-info {
    display: none;
    background: #ffffff;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 500;
}

.expanded-info.show {
    display: block;
}

.company-details {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
}

.company-detail {
    flex-basis: calc(33.333% - 10px);
    background-color: #f0f0f0;
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.company-detail i {
    margin-right: 8px;
}

/* AUTOCOMPLETE LIST */

.search-container {
  position: relative; /* Ensure the container is positioned relative */
  display: flex; /* Flexbox for layout */
  align-items: center; /* Center items vertically */
  z-index: 10000; /* High z-index to appear above other elements */
}

#autocomplete-list {
  position: absolute;
  top: 100%; /* Directly below the search bar */
  width: 100%;
  max-height: 600px; /* Adjust height as needed */
  overflow-y: auto;
  background-color: #ffffff; /* Semi-opaque background */
  border: 0px solid #e5e5e5;
  margin-top: 10px;
  border-radius: 5px 5px 5px 5px;
  z-index: 15000; /* Ensure it appears above other elements */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08); /* Subtle shadow for depth */
}

#autocomplete-list div {
  padding: 8px 12px;
  font-size: 12px;
  cursor: pointer;
  border-bottom: 1px solid #e5e5e5;
}

#autocomplete-list div:hover {
  background-color: rgba(0, 0, 0, 0.08);
}

.company-name {
  font-size: 18px;
  font-weight: bold;
  color: #1a1a1a;
}

.company-details {
  font-size: 14px;
  color: var(--color-text-secondary, #4a4a4a);
  margin-top: 2px;
}

/* Animation du chargement */
.search-loading-effect {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    background-color: #f5f5f5; /* Darker background overlay */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Classe active pour afficher l'animation */
.search-loading-effect.active {
    opacity: 1;
}

/* L'élément animé (la barre lumineuse) */
.loading-beam {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: beam-sweep 1.2s ease-in-out infinite;
}

/* Définition de l'animation */
@keyframes beam-sweep {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Focus states - visible pour accessibilite clavier */
.search-input:focus,
.search-select:focus {
  outline: none;
}

/* Focus visible pour navigation clavier */
.search-input:focus-visible,
.search-select:focus-visible,
button:focus-visible,
a:focus-visible,
.clickable-row:focus-visible {
    outline: 2px solid #000000;
    outline-offset: 2px;
    border-radius: 4px;
}

.search-select:hover {
	background-color: #000000;
}

.search-button:hover {
	background-color: #333333;
}

.logo-link {
    display: block;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease;
}

.logo-link:hover {
    opacity: 0.8;
}

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

input, textarea {
    spellcheck: false;
}

#sectorComparisonContainer {
    /* Même modèle que .chart-container : hauteur auto, le graphe vit dans son
       wrapper dédié (.chart-canvas-wrapper). On garde juste la marge basse. */
    margin-bottom: 30px;
}

.year-selector {
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    padding: 10px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.year-selector.hidden {
    display: none;
}

.year-selector label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #1a1a1a;
    font-size: 14px;
    cursor: pointer;
}

.year-selector input[type="checkbox"] {
    margin: 0;
}

#sectorYearSelectorToggle {
    position: relative;
}

/* Navigation latérale - Panel fixe */
.sidebar-nav {
    position: fixed;
    left: 0;
    top: 80px;
    bottom: 0;
    width: 240px;
    background: rgba(255, 255, 255, 0.98);
    padding: 16px 0;
    z-index: 99;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.sidebar-nav > ul,
#sidebar-synthese ul {
    list-style: none;
    margin: 0;
    padding: 0 12px;
}

.sidebar-nav > li,
#sidebar-synthese li {
    margin-bottom: 4px;
}

.sidebar-nav .nav-link {
    display: block;
    padding: 12px 16px;
    color: #666666;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s ease;
    border-left: 3px solid transparent;
    border-radius: 6px;
}

.sidebar-nav .nav-link:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #666666;
}

.sidebar-nav .nav-link.active {
    background: rgba(0, 0, 0, 0.08);
    color: #000000;
    border-left-color: #000000;
}

/* Décaler le contenu principal pour le header fixe et le panel */
body.analyse-page {
    margin-left: 240px;
    padding-top: 80px;
}

/* Sidebar sections (synthèse vs liasse) */
.sidebar-section {
    /* S'assure que les sections sont visibles */
}

#sidebar-liasse {
    padding-top: 8px;
}

#sidebar-synthese ul {
    list-style: none;
    margin: 0;
    padding: 0 12px;
}

#sidebar-synthese li {
    margin-bottom: 4px;
}

/* Masquer la sidebar sur mobile et tablette */
@media (max-width: 1200px) {
    .sidebar-nav {
        display: none !important;
    }

    body.analyse-page {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Info-bulles pour les indicateurs */
.indicator-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: rgba(0, 0, 0, 0.08);
    color: #666666;
    border-radius: 50%;
    font-size: 10px;
    font-weight: bold;
    cursor: help;
    margin-left: 6px;
    position: relative;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.indicator-info:hover {
    background: rgba(0, 0, 0, 0.15);
    color: #1a1a1a;
    transform: scale(1.1);
}

.indicator-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 15px;
    font-size: 13px;
    font-weight: normal;
    text-align: left;
    color: #1a1a1a;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.indicator-info:hover .indicator-tooltip {
    visibility: visible;
    opacity: 1;
}

.indicator-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.1) transparent transparent transparent;
}

.indicator-tooltip .tooltip-title {
    font-size: 14px;
    font-weight: bold;
    color: #1a1a1a;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.indicator-tooltip .tooltip-section {
    margin-bottom: 8px;
}

.indicator-tooltip .tooltip-section:last-child {
    margin-bottom: 0;
}

.indicator-tooltip .tooltip-label {
    font-weight: bold;
    color: #666666;
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.indicator-tooltip .tooltip-content {
    color: #333333;
    line-height: 1.4;
}

.indicator-tooltip .tooltip-formula {
    font-family: monospace;
    background: #f5f5f5;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.indicator-tooltip .tooltip-good {
    color: var(--color-positive, #1565c0);
}

.indicator-tooltip .tooltip-warning {
    color: var(--color-warning, #b45309);
}

.indicator-tooltip .tooltip-bad {
    color: var(--color-negative, #c62828);
}

/* Blocs d'analyse intelligente */
.smart-analysis {
    background: var(--color-bg-secondary, #fafafa);
    border-left: 3px solid var(--color-accent-blue, rgb(59, 130, 246));
    border-radius: 0 8px 8px 0;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.smart-analysis p {
    margin: 0;
    color: var(--color-text-secondary, #4a4a4a);
    font-size: 0.9rem;
    line-height: 1.6;
    font-style: normal;
    position: relative;
}

/* Synthèse - verdict d'ensemble mis en avant en tête de page */
.synthese-box {
    background: var(--color-bg-secondary, #f5f8ff);
    border: 1px solid var(--color-accent-blue, rgb(59, 130, 246));
    border-radius: 10px;
    padding: 18px 22px;
    margin: 24px 0;
}

.synthese-box h2 {
    margin: 0 0 8px;
    font-size: 1.05rem;
    color: var(--color-accent-blue, rgb(59, 130, 246));
    display: flex;
    align-items: center;
    gap: 8px;
}

.synthese-box p {
    margin: 0 0 10px;
    color: var(--color-text-primary, #1a1a1a);
    font-size: 0.95rem;
    line-height: 1.65;
}

.synthese-box p:last-child {
    margin-bottom: 0;
}

/* Badge de santé financière - hiérarchise le risque d'un coup d'œil */
.health-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.health-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.health-saine        { background: #e7f6ec; color: #1c7c3e; }
.health-saine .health-dot    { background: #1c7c3e; }
.health-tension      { background: #fff4e0; color: #b45309; }
.health-tension .health-dot  { background: #e8920a; }
.health-fragile      { background: #fdeaea; color: #b42323; }
.health-fragile .health-dot  { background: #d63232; }

.health-reason {
    font-size: 0.9rem !important;
    color: var(--color-text-secondary, #4a4a4a) !important;
}

/* Termes financiers survolables dans les textes d'analyse */
.gloss {
    border-bottom: 1px dotted var(--color-accent-blue, #3b82f6);
    cursor: help;
    position: relative;
}
.gloss::after {
    content: attr(data-tip);
    position: absolute;
    left: 0;
    bottom: 100%;
    margin-bottom: 8px;
    width: 300px;
    max-width: 78vw;
    background: #1f2937;
    color: #f9fafb;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
    white-space: normal;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
    z-index: 60;
    pointer-events: none;
}
.gloss:hover::after,
.gloss:focus::after {
    opacity: 1;
    visibility: visible;
}

/* Fix CLS - réserve l'espace avec le texte original invisible */
.smart-analysis .original-text {
    visibility: hidden;
}

.smart-analysis .typing-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

/* Animation typing style IA */
.smart-analysis.typing-ready {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.smart-analysis.typing-visible {
    opacity: 1;
    transform: translateY(0);
}

.smart-analysis .typing-text {
    display: inline;
}

.smart-analysis .typing-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: #000000;
    margin-left: 2px;
    animation: cursor-blink 0.8s infinite;
    vertical-align: text-bottom;
}

.smart-analysis.typing-done .typing-cursor {
    display: none;
}

@keyframes cursor-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Tableau P&L style reporting financier */
.pl-report {
    background: #f8f8f8;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
}

.pl-report h3 {
    color: #1a1a1a;
    font-size: 1.1rem;
    margin: 0 0 15px 0;
    font-weight: 500;
}

.table-scroll {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
    position: relative;
}

/* Indicateur de scroll - gradient sur le bord droit */
.table-scroll::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 6px; /* espace pour scrollbar */
    width: 30px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.95), transparent);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s;
}

/* Cacher l'indicateur quand scrolle a droite */
.table-scroll.scrolled-end::after {
    opacity: 0;
}

/* Cacher indicateur si pas de scroll necessaire */
.table-scroll.no-scroll::after {
    opacity: 0;
}

.table-scroll::-webkit-scrollbar {
    height: 6px;
}

.table-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}

.table-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.table-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.05);
}

.pl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.pl-table th,
.pl-table td {
    padding: 8px 6px;
    text-align: right;
    border: 1px solid rgba(0, 0, 0, 0.08);
    white-space: nowrap;
}

.pl-table th.pl-label,
.pl-table td.pl-label {
    text-align: left;
    color: #555555;
    font-weight: 400;
    white-space: normal;
    min-width: 180px;
}

.pl-table th.pl-year {
    color: #1a1a1a;
    font-weight: 600;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    text-align: center;
}

.pl-subheader th {
    font-size: 10px;
    color: #666;
    font-weight: 400;
    padding: 4px 6px;
}

.pl-table .pl-value {
    color: #333333;
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
    min-width: 90px;
}

.pl-table .pl-pct {
    font-size: 10px;
    font-family: 'Roboto Mono', monospace;
    min-width: 35px;
    max-width: 40px;
    /* color définie par les classes pl-pct-X */
}

.pl-table .pl-var {
    font-size: 10px;
    font-family: 'Roboto Mono', monospace;
    min-width: 45px;
    max-width: 50px;
    font-weight: 500;
}

/* Dégradé couleur pour variations */
.pl-var-positive {
    background: none;
    color: #1c7c3e !important;
}

.pl-var-negative {
    background: none;
    color: #c62828 !important;
}

.pl-var-neutral {
    color: #666666;
}

.pl-row-primary td {
    font-weight: 500;
    background: #f5f5f5;
}

.pl-row-primary td.pl-label {
    color: #1a1a1a;
}

.pl-row-primary td.pl-var-positive {
    background: rgba(28, 124, 62, 0.08);
}

.pl-row-primary td.pl-var-negative {
    background: rgba(198, 40, 40, 0.08);
}

/* Lignes intermédiaires (écarts) */
.pl-row-diff td {
    font-size: 10px;
    color: #6a6a6a;
    font-style: italic;
    padding: 5px 6px;
    background: rgba(0, 0, 0, 0.04);
}

.pl-row-diff td.pl-label {
    color: #666666;
    padding-left: 30px;
}

.pl-row-diff .pl-value {
    font-size: 10px;
    color: #666666;
}

.confidential-value {
    color: #666;
    font-style: italic;
}

.pl-indent {
    padding-left: 20px !important;
}

.pl-negative {
    color: #c62828 !important;
}

/* Lignes de catégorie pour bilan */
.pl-row-category td {
    font-weight: 600;
    color: #1a1a1a;
    background: #f3f3f3;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    padding: 10px 6px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* ===== LIGNES KPI PRINCIPALES (CA, EBE, EBIT, RN) ===== */
.pl-row-kpi td {
    font-weight: 600;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.25), rgba(59, 130, 246, 0.10));
    border-top: 2px solid rgba(59, 130, 246, 0.5);
    border-bottom: 2px solid rgba(59, 130, 246, 0.5);
    padding: 12px 6px;
}

.pl-row-kpi td.pl-label {
    color: #1a1a1a;
    font-size: 13px;
}

.pl-row-kpi td.pl-value {
    color: #1a1a1a;
    font-size: 13px;
}

.pl-row-kpi td.pl-pct {
    font-size: 12px;
    font-weight: 600;
}

.pl-row-kpi:hover td {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.35), rgba(59, 130, 246, 0.20));
}

/* KPI négatif */
.pl-row-kpi td.pl-var-negative {
    background: rgba(198, 40, 40, 0.10);
    color: #c62828 !important;
}

/* ===== SOUS-KPI (Total produits, Résultat financier, etc.) ===== */
.pl-row-subkpi td {
    font-weight: 500;
    background: #f7f7f7;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding: 8px 6px;
}

.pl-row-subkpi td.pl-label {
    color: #5f6368;
    font-size: 12px;
}

.pl-row-subkpi td.pl-value {
    color: var(--color-text-secondary, #4a4a4a);
    font-size: 12px;
}

.pl-row-subkpi:hover td {
    background: #f3f3f3;
}

/* Code poste fiscal */
.pl-code {
    color: #666;
    font-size: 10px;
    font-family: 'Roboto Mono', monospace;
    margin-right: 6px;
}

/* Lignes cliquables */
.pl-table .clickable-row {
    cursor: pointer;
    transition: background 0.15s ease;
}

.pl-table .clickable-row:hover td {
    background: #f3f3f3;
}

/* ===== P&L LIASSE DÉTAILLÉE ===== */

/* Badge liasse dans le titre */
.liasse-badge {
    display: inline-block;
    padding: 3px 10px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.1));
    border: 1px solid rgba(34, 197, 94, 0.5);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    color: #1c7c3e;
    margin-left: 10px;
    vertical-align: middle;
}

/* Badge estimé pour les valeurs calculées */
.estimated-badge {
    display: inline-block;
    padding: 1px 6px;
    background: rgba(255, 159, 64, 0.12);
    border: 1px solid rgba(255, 159, 64, 0.4);
    border-radius: 8px;
    font-size: 9px;
    font-weight: 500;
    color: #b45309;
    margin-left: 6px;
    vertical-align: middle;
}

/* Table P&L liasse */
.pl-liasse-table {
    font-size: 13px;
}

.pl-liasse-table th.pl-code,
.pl-liasse-table td.pl-code {
    width: 50px;
    text-align: center;
    font-family: monospace;
    font-size: 11px;
    color: #666666;
    padding: 8px 6px;
}

/* En-tête de section P&L */
.pl-section-header td {
    background: linear-gradient(90deg, rgba(58, 134, 255, 0.15), transparent);
    color: #1565c0;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 12px !important;
    border-left: 3px solid #3a86ff;
}

/* Lignes P&L dans la liasse */
.pl-liasse-table .pl-row td {
    padding: 6px 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.pl-liasse-table .pl-row:hover td {
    background: #f7f7f7;
}

.pl-liasse-table .pl-row-primary td {
    background: rgba(58, 134, 255, 0.1);
    font-weight: 600;
    border-bottom: 1px solid rgba(58, 134, 255, 0.2);
}

.pl-liasse-table .pl-row-primary td.pl-code {
    color: #1565c0;
}

/* Valeurs négatives en rouge */
.pl-negative {
    color: #c62828 !important;
}

/* Style pour la catégorie du code */
.code-category {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(58, 134, 255, 0.2);
    border-radius: 4px;
    font-size: 11px;
    color: #1565c0;
    margin-top: 5px;
}

/* Description encyclopédie */
.encyclo-description {
    margin-top: 15px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.6;
    color: #555555;
}

/* Conseils d'analyse */
.encyclo-tips {
    margin-top: 15px;
    padding: 12px;
    background: rgba(34, 197, 94, 0.1);
    border-left: 3px solid #22c55e;
    border-radius: 0 8px 8px 0;
    font-size: 13px;
    line-height: 1.5;
    color: #555555;
}

/* ===== MODALE GRAPHIQUE MOBILE ===== */

/* Bouton déclencheur - caché par défaut sur desktop */
/* Graphiques : affichés en ligne (inline) et responsive sur mobile/tablette.
   L'ancien système (containers poussés hors écran + modale "tournez votre téléphone")
   a été supprimé au profit de graphiques directement lisibles en portrait. */
@media (max-width: 1024px) {
    .chart-container,
    #sectorComparisonContainer {
        width: 100%;
        max-height: none;
    }
}

/* ========================================
   Type de Bilan Selector (dans Sidebar)
   ======================================== */
.type-bilan-section {
    position: relative;
    padding: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.type-bilan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.type-bilan-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666666;
}

/* Info icon avec tooltip au hover */
.type-bilan-info-icon {
    position: relative;
    color: #666;
    font-size: 13px;
    cursor: help;
    display: inline-flex;
    align-items: center;
}

.type-bilan-info-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 400;
    color: #333333;
    width: 320px;
    line-height: 1.6;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    pointer-events: none;
}

.type-bilan-info-icon:hover::after {
    opacity: 1;
    visibility: visible;
}

.type-bilan-tabs {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.type-bilan-tab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #666666;
    background: #f7f7f7;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.type-bilan-tab:hover {
    background: #f3f3f3;
    color: #1a1a1a;
    border-color: rgba(0, 0, 0, 0.1);
}

.type-bilan-tab.active {
    background: #f0f0f0;
    color: #1a1a1a;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.type-bilan-tab .tab-label {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 3px;
}

.type-bilan-tab .tab-ca {
    font-size: 11px;
    font-weight: 400;
    color: #5f6368;
}

.type-bilan-tab.active .tab-ca {
    color: #6a6a6a;
}

/* Section confidentialité par année */
.confidentiality-section {
    padding: 14px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.confidentiality-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.confidentiality-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #5f6368;
    font-weight: 600;
}

.confidentiality-info-icon {
    color: #5f6368;
    font-size: 11px;
    cursor: help;
    position: relative;
}

.confidentiality-info-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 8px;
    background: #ffffff;
    color: #1a1a1a;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.4;
    width: 220px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.08);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}

.confidentiality-info-icon:hover::after {
    opacity: 1;
    visibility: visible;
}

.confidentiality-years {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.year-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: #f7f7f7;
    border-radius: 4px;
    font-size: 11px;
}

.year-value {
    color: #1a1a1a;
    font-weight: 500;
}

.year-status {
    font-weight: 600;
    font-size: 10px;
}

/* Badges années cliquables */
.year-badge-link {
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    font: inherit;
    color: inherit;
}

.year-badge-link:hover {
    background: rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.year-badge-link:active {
    transform: translateY(0);
}

/* Responsive mobile */
@media (max-width: 768px) {
    .type-bilan-section {
        padding: 10px;
    }

    .type-bilan-tabs {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .type-bilan-tab {
        flex: 1;
        min-width: 80px;
        text-align: center;
        align-items: center;
        padding: 8px;
    }

    .type-bilan-info-icon::after {
        left: 50%;
        right: auto;
        top: 100%;
        transform: translateX(-50%);
        margin-top: 10px;
        width: 280px;
    }
}

/* ============================================================
   TABS PRINCIPAUX (Synthèse / Liasse Fiscale)
   ============================================================ */

.main-tabs-container {
    position: sticky;
    top: 80px;
    z-index: 100;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding: 0 20px;
}

.main-tabs {
    display: flex;
    gap: 0;
    max-width: 1400px;
    margin: 0 auto;
}

.main-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    background: none;
    border: none;
    color: #666666;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
    position: relative;
}

.main-tab:hover {
    color: #1a1a1a;
    background: #f7f7f7;
}

.main-tab.active {
    color: #1a1a1a;
    border-bottom-color: #1a1a1a;
}

.main-tab i {
    font-size: 1rem;
}

/* Tab content visibility */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ============================================================
   LIASSE FISCALE - Container et Header
   ============================================================ */

.liasse-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px;
}

.liasse-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.liasse-header-left {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.liasse-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 12px;
}

.liasse-header h2 i {
    color: #1a1a1a;
}

.liasse-year-selector {
    display: flex;
    align-items: center;
    gap: 10px;
}

.liasse-year-selector label {
    color: #666666;
    font-size: 0.9rem;
}

.liasse-year-selector select {
    background: rgba(245, 245, 250, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    color: #1a1a1a;
    padding: 8px 32px 8px 12px;
    font-size: 0.95rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.liasse-year-selector select:focus {
    outline: none;
    border-color: rgba(0, 0, 0, 0.6);
}

.liasse-external-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    color: #555555;
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.liasse-external-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: #f5f5f5;
    color: #1a1a1a;
}

/* ============================================================
   LIASSE FISCALE - Tabs niveau 2
   ============================================================ */

.liasse-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.liasse-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 20px;
    background: rgba(245, 245, 250, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    color: #666666;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 120px;
}

.liasse-tab:hover {
    background: rgba(240, 240, 245, 0.95);
    color: #555555;
}

.liasse-tab.active {
    background: rgba(0, 0, 0, 0.08);
    border-color: #f5f5f5;
    color: #1a1a1a;
}

.liasse-tab .tab-icon {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    color: var(--color-text-muted, #666666);
}

.liasse-tab.active .tab-icon {
    background: rgba(0, 0, 0, 0.15);
    color: #1a1a1a;
}

.liasse-tab .tab-label {
    font-size: 0.9rem;
    font-weight: 500;
}

/* ============================================================
   LIASSE FISCALE - Toggle détails
   ============================================================ */

.liasse-view-toggle {
    margin-bottom: 20px;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.toggle-label input[type="checkbox"] {
    display: none;
}

.toggle-slider {
    width: 44px;
    height: 24px;
    background: rgba(235, 235, 240, 0.95);
    border-radius: 12px;
    position: relative;
    transition: background 0.2s;
}

.toggle-slider::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #e0e0e0;
    border-radius: 50%;
    transition: all 0.2s;
}

.toggle-label input:checked + .toggle-slider {
    background: rgba(0, 0, 0, 0.2);
}

.toggle-label input:checked + .toggle-slider::after {
    left: 23px;
    background: #fff;
}

.toggle-text {
    color: #666666;
    font-size: 0.9rem;
}

/* ============================================================
   LIASSE FISCALE - Tables
   ============================================================ */

.liasse-tables-container {
    position: relative;
}

.liasse-loading {
    display: none;
    text-align: center;
    padding: 60px 20px;
    color: #666666;
    font-size: 1rem;
}

.liasse-loading.active {
    display: block;
}

.liasse-loading i {
    font-size: 1.5rem;
    margin-right: 10px;
    color: #666666;
}

.liasse-table-wrapper {
    display: none;
    overflow-x: auto;
}

.liasse-table-wrapper.active {
    display: block;
}

.liasse-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    overflow: hidden;
    font-size: 0.9rem;
}

.liasse-table thead {
    background: rgba(250, 250, 252, 0.95);
    position: sticky;
    top: 0;
    z-index: 10;
}

.liasse-table th {
    padding: 14px 16px;
    text-align: left;
    color: #1a1a1a;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.liasse-table th.col-amount {
    text-align: right;
    min-width: 100px;
}

.liasse-table td {
    padding: 10px 16px;
    color: #555555;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    vertical-align: middle;
}

.liasse-table td.col-amount {
    text-align: right;
    font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.liasse-table tbody tr:hover td {
    background: #f7f7f7;
}

/* Lignes de total */
.liasse-table tr.is-total td {
    font-weight: 600;
    color: #1a1a1a;
    background: #f3f3f3;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Lignes de catégorie (header de section) */
.liasse-table tr.is-category td {
    font-weight: 600;
    color: #1a1a1a;
    background: #f5f5f5;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding-top: 16px;
}

/* Code officiel */
.liasse-code {
    display: inline-block;
    color: rgba(0, 0, 0, 0.6);
    font-size: 0.75rem;
    font-family: monospace;
    margin-right: 10px;
    min-width: 28px;
}

/* Montants négatifs */
.amount-negative {
    color: #c62828;
}

/* Lignes détail (masquables) */
.liasse-table tr.is-detail {
    display: none;
}

.liasse-table.show-details tr.is-detail {
    display: table-row;
}

/* Indentation hiérarchique */
.liasse-table tr[data-level="1"] td:first-child {
    padding-left: 24px;
}

.liasse-table tr[data-level="2"] td:first-child {
    padding-left: 40px;
}

/* ============================================================
   LIASSE FISCALE - Responsive
   ============================================================ */

@media (max-width: 768px) {
    .main-tabs-container {
        top: 60px;
        padding: 0 10px;
    }

    .main-tab {
        padding: 12px 16px;
        font-size: 0.85rem;
    }

    .main-tab span {
        display: none;
    }

    .main-tab i {
        font-size: 1.2rem;
    }

    .liasse-container {
        padding: 20px 15px;
    }

    .liasse-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .liasse-header-left {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .liasse-tabs {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 8px;
    }

    .liasse-tab {
        min-width: 100px;
        flex-shrink: 0;
    }

    .liasse-table {
        font-size: 0.8rem;
    }

    .liasse-table th,
    .liasse-table td {
        padding: 8px 10px;
    }

    .liasse-table th.col-amount,
    .liasse-table td.col-amount {
        min-width: 80px;
    }
}

/* ============================================================
   SIDEBAR LIASSE FISCALE
   ============================================================ */

.liasse-sidebar-section {
    padding: 16px 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.liasse-sidebar-section:last-child {
    border-bottom: none;
}

.liasse-sidebar-header {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666;
    margin-bottom: 12px;
}

.liasse-year-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.liasse-year-btn {
    padding: 6px 12px;
    background: #f5f5f5;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    color: #666666;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.liasse-year-btn:hover {
    background: #f0f0f0;
    color: #555555;
}

.liasse-year-btn.active {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.2);
    color: #1a1a1a;
}

.liasse-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.liasse-nav-list li {
    margin-bottom: 4px;
}

.liasse-nav-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #666666;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
}

.liasse-nav-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #666666;
}

.liasse-nav-btn.active {
    background: #f0f0f0;
    color: #1a1a1a;
}

.liasse-nav-btn .form-number {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 3px;
    color: rgba(0, 0, 0, 0.6);
}

.liasse-nav-btn.active .form-number {
    background: rgba(0, 0, 0, 0.1);
    color: #1a1a1a;
}

.liasse-nav-btn .form-label {
    font-weight: 500;
}

.liasse-inpi-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px;
    background: #f5f5f5;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    color: #666666;
    text-decoration: none;
    font-size: 12px;
    transition: all 0.2s;
}

.liasse-inpi-btn:hover {
    background: #f0f0f0;
    color: #1a1a1a;
}

/* ============================================================
   MODAL EVOLUTION HISTORIQUE
   ============================================================ */

.evolution-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.3s, opacity 0.3s ease;
}

.evolution-modal.active {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 0.3s ease;
}

.evolution-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
}

.evolution-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    max-width: 1000px;
    max-height: 90vh;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.evolution-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.evolution-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #1a1a1a;
    font-weight: 500;
}

.evolution-modal-close {
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.08);
    border: none;
    border-radius: 6px;
    color: #666666;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.evolution-modal-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #1a1a1a;
}

.evolution-modal-body {
    padding: 24px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.2) transparent;
}

.evolution-modal-body::-webkit-scrollbar {
    width: 6px;
}

.evolution-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.evolution-modal-body::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 3px;
}

.evolution-modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.25);
}

/* Layout 2 colonnes pour desktop */
.evolution-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 768px) {
    .evolution-layout {
        grid-template-columns: 1fr;
    }
}

.evolution-left {
    display: flex;
    flex-direction: column;
}

.evolution-right {
    display: flex;
    flex-direction: column;
    height: 300px;
    align-self: start;
}

.evolution-chart-container {
    position: relative;       /* conteneur dédié au canvas (cf. Chart.js) */
    height: 300px;
    max-height: 300px;
}

.evolution-chart-container > canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.evolution-table {
    width: 100%;
    border-collapse: collapse;
}

.evolution-table th,
.evolution-table td {
    padding: 10px 12px;
    text-align: right;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.evolution-table th:first-child,
.evolution-table td:first-child {
    text-align: left;
}

.evolution-table th {
    color: #666666;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.evolution-table td {
    color: #333333;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
}

.evolution-table .var-positive {
    color: #000000;
}

.evolution-table .var-negative {
    color: #c62828;
}

/* Lignes cliquables dans la table liasse */
.liasse-table tbody tr.clickable-row {
    cursor: pointer;
    transition: background 0.15s;
}

.liasse-table tbody tr.clickable-row:hover td {
    background: #f3f3f3;
}

/* ============================================================
   SECTIONS LOADING ET EMPTY
   ============================================================ */

.section-loading,
.section-empty {
    text-align: center;
    padding: 40px 20px;
    color: #666666;
    font-size: 0.95rem;
}

.section-loading i,
.section-empty i {
    margin-right: 10px;
}

.section-empty {
    background: #f8f8f8;
    border-radius: 8px;
}

/* ===== FALLBACK COMPTE DE RÉSULTAT (historique DI) ===== */
.cr-fallback-container {
    text-align: left;
    max-width: 500px;
    margin: 0 auto;
}

.cr-fallback-notice {
    color: #5f6368;
    font-size: 0.9rem;
    margin-bottom: 20px;
    line-height: 1.5;
}

.cr-fallback-notice i {
    color: #1565c0;
    margin-right: 8px;
}

.cr-fallback-notice strong {
    color: #1565c0;
}

.cr-consolide-note {
    color: #5f6368;
    font-size: 0.85rem;
    margin-top: 10px;
    padding: 10px 15px;
    background: rgba(59, 130, 246, 0.1);
    border-left: 3px solid #3b82f6;
    border-radius: 0 6px 6px 0;
    line-height: 1.5;
}

.cr-consolide-note i {
    color: #1565c0;
    margin-right: 8px;
}

.cr-fallback-subtitle {
    color: #1a1a1a;
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 12px;
}

.cr-fallback-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(230, 240, 255, 0.8);
    border-radius: 8px;
    overflow: hidden;
}

.cr-fallback-table thead th {
    background: rgba(59, 130, 246, 0.12);
    color: #1565c0;
    padding: 12px 16px;
    text-align: left;
    font-weight: 500;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cr-fallback-table thead th:last-child {
    text-align: right;
}

.cr-fallback-table tbody td {
    padding: 10px 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 0.9rem;
}

.cr-fallback-table tbody td:first-child {
    color: #5f6368;
    font-weight: 500;
}

.cr-fallback-table tbody td:last-child {
    text-align: right;
    font-weight: 600;
    font-family: 'Roboto Mono', monospace;
}

.cr-fallback-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.1);
}

.cr-positive {
    color: #1c7c3e;
}

.cr-negative {
    color: #c62828;
}

/* Résumé des années récentes sans P&L */
.cr-recent-summary {
    background: rgba(230, 240, 255, 0.9);
    border-left: 3px solid #60a5fa;
    border-radius: 0 8px 8px 0;
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.cr-recent-notice {
    color: #5f6368;
    font-size: 0.85rem;
    margin: 0;
    flex-shrink: 0;
}

.cr-recent-notice i {
    color: #1565c0;
    margin-right: 6px;
}

.cr-recent-notice strong {
    color: var(--color-text-primary, #1a1a1a);
}

.cr-fallback-table.cr-mini {
    margin: 0;
    background: transparent;
    flex-shrink: 0;
}

.cr-fallback-table.cr-mini thead {
    display: none;
}

.cr-fallback-table.cr-mini tbody {
    display: flex;
    gap: 16px;
}

.cr-fallback-table.cr-mini tbody tr {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.05);
    padding: 6px 12px;
    border-radius: 6px;
}

.cr-fallback-table.cr-mini tbody td {
    padding: 0;
    border: none;
    font-size: 0.85rem;
}

.cr-fallback-table.cr-mini tbody td:first-child {
    color: #5f6368;
    font-weight: 500;
}

.cr-fallback-table.cr-mini tbody td:first-child::after {
    content: ':';
}

.cr-pl-available {
    color: #5f6368;
    font-size: 0.8rem;
    margin: 0;
    margin-left: auto;
}

.cr-pl-available strong {
    color: #1565c0;
}

/* Colonne % avec mise en forme conditionnelle bleue */
.pl-pct-header {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    text-align: center !important;
}

.pl-pct {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    text-align: center !important;
    font-size: 0.85em;
    color: #1a1a1a;
    padding: 4px 6px !important;
}

/* Gradient de bleu pour les pourcentages - texte toujours blanc */
.pl-pct-0 { background: rgba(59, 130, 246, 0.10); color: #1a1a1a; }
.pl-pct-1 { background: rgba(59, 130, 246, 0.20); color: #1a1a1a; }
.pl-pct-2 { background: rgba(59, 130, 246, 0.30); color: #1a1a1a; }
.pl-pct-3 { background: rgba(59, 130, 246, 0.40); color: #1a1a1a; }
.pl-pct-4 { background: rgba(59, 130, 246, 0.22); color: #1a1a1a; }
.pl-pct-5 { background: rgba(59, 130, 246, 0.26); color: #1a1a1a; }
.pl-pct-6 { background: rgba(59, 130, 246, 0.30); color: #1a1a1a; }
.pl-pct-7 { background: rgba(59, 130, 246, 0.34); color: #1a1a1a; }

/* Colonne sparkline */
.pl-sparkline-header {
    width: 80px;
    min-width: 80px;
    text-align: center !important;
}

.pl-sparkline {
    width: 80px;
    min-width: 80px;
    padding: 4px 8px !important;
    text-align: center;
}

.pl-sparkline svg {
    display: block;
    margin: 0 auto;
}

/* Modal header amélioré */
.modal-title-main {
    font-size: 1.1em;
    font-weight: 600;
    color: #1a1a1a;
}

.modal-title-sub {
    font-size: 0.85em;
    color: #666666;
    margin-top: 4px;
}

/* Section encyclopédie dans le modal */
.encyclo-section {
    margin-bottom: 16px;
}

.encyclo-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.encyclo-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: 500;
    background: #f0f0f0;
    color: #6a6a6a;
    border: 1px solid rgba(0, 0, 0, 0.08);
    cursor: help;
    position: relative;
    transition: all 0.2s;
}

.encyclo-badge:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #1a1a1a;
}

/* Tooltip pour les badges */
.encyclo-badge .badge-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.85em;
    font-weight: 400;
    color: #555555;
    white-space: nowrap;
    max-width: 250px;
    white-space: normal;
    text-align: left;
    z-index: 10010;
    transition: opacity 0.2s, visibility 0.2s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.encyclo-badge .badge-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(30, 30, 35, 0.98);
}

.encyclo-badge:hover .badge-tooltip {
    visibility: visible;
    opacity: 1;
}

.encyclo-description {
    color: #666666;
    font-size: 0.88em;
    line-height: 1.6;
    margin: 0 0 16px 0;
}

.encyclo-analyse {
    color: #1a1a1a;
    font-size: 0.9em;
    line-height: 1.5;
    margin: 0;
    padding: 12px 14px;
    background: #f5f5f5;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
}

.encyclo-analyse strong {
    color: #1a1a1a;
}

/* Bouton afficher plus */
.evolution-show-more {
    display: block;
    width: 100%;
    padding: 8px;
    margin-top: 8px;
    background: transparent;
    border: 1px dashed rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    color: #666666;
    font-size: 0.8em;
    cursor: pointer;
    transition: all 0.2s;
}

.evolution-show-more:hover {
    border-color: rgba(0, 0, 0, 0.2);
    color: #555555;
}

.evolution-table tr.hidden-row {
    display: none;
}

.evolution-table.show-all tr.hidden-row {
    display: table-row;
}

.encyclo-analyse strong {
    color: #1a1a1a;
}

/* ============================================
   RATIO POSITIONING WIDGETS V2
   Design épuré avec gradient rouge UI → bleu confiance
   ============================================ */

.ratio-positioning-section {
    margin-top: 28px;
    padding-top: 24px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.positioning-title {
    font-size: 1em;
    font-weight: 600;
    color: #666666;
    margin: 0 0 16px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ratio-positioning-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}

.ratio-focus-card {
    background: rgba(245, 245, 245, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.2s ease;
}

.ratio-focus-card:hover {
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(245, 245, 245, 0.95);
}

/* Header avec nom ratio + valeur + année */
.ratio-focus-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.ratio-focus-header .ratio-name {
    font-size: 0.9em;
    font-weight: 500;
    color: #666666;
}

.ratio-focus-header .ratio-value-block {
    text-align: right;
}

.ratio-focus-header .ratio-value {
    font-size: 1.4em;
    font-weight: 700;
    color: #1a1a1a;
    display: block;
}

.ratio-focus-header .ratio-year {
    font-size: 0.75em;
    color: #5f6368;
    margin-top: 2px;
}

/* ========== GAUGE MULTI-ANNÉES ========== */
.gauge-container {
    margin: 20px 0 16px;
}

/* Barre de gradient : Rouge UI (#E57373) → Bleu confiance (#64B5F6) */
.gauge-track {
    position: relative;
    height: 8px;
    border-radius: 4px;
    overflow: visible;
}

/* Pour ratios où BAS = BIEN (endettement, capacité remboursement) */
.gauge-track.low-is-good {
    background: linear-gradient(to right,
        #64B5F6 0%,
        #90CAF9 20%,
        #B0BEC5 50%,
        #EF9A9A 80%,
        #E57373 100%
    );
}

/* Pour ratios où HAUT = BIEN (autonomie, liquidité, couverture) */
.gauge-track.high-is-good {
    background: linear-gradient(to right,
        #E57373 0%,
        #EF9A9A 20%,
        #B0BEC5 50%,
        #90CAF9 80%,
        #64B5F6 100%
    );
}

/* Labels Q1 / Médiane / Q3 sous la barre */
.gauge-scale {
    position: relative;
    height: 24px;
    margin-top: 4px;
}

.gauge-tick {
    position: absolute;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gauge-tick::before {
    content: '';
    width: 1px;
    height: 8px;
    background: rgba(0, 0, 0, 0.15);
}

.gauge-tick-label {
    font-size: 0.65em;
    color: #5f6368;
    margin-top: 2px;
    white-space: nowrap;
}

.gauge-tick.median .gauge-tick-label {
    color: #666666;
    font-weight: 500;
}

/* ========== MARKERS MULTI-ANNÉES ========== */
.gauge-markers {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
}

/* Ligne de tendance entre les années */
.trend-line {
    position: absolute;
    top: 50%;
    height: 2px;
    background: rgba(0, 0, 0, 0.2);
    transform: translateY(-50%);
    z-index: 1;
}

/* Point de positionnement par année */
.year-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.year-marker .marker-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #fafafa;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s;
}

.year-marker:hover .marker-dot {
    transform: scale(1.2);
}

.year-marker .marker-label {
    position: absolute;
    top: -22px;
    font-size: 0.7em;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.7);
    padding: 2px 6px;
    border-radius: 4px;
}

.year-marker.current .marker-dot {
    width: 18px;
    height: 18px;
    background: #64B5F6;
    border-color: #1a1a1a;
}

.year-marker.current .marker-label {
    background: #64B5F6;
    color: #000;
    font-weight: 700;
}

/* Marqueur entreprise principal (année courante) */
.company-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

.company-marker .marker-point {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #64B5F6;
    box-shadow: 0 0 0 4px rgba(100, 181, 246, 0.3), 0 2px 8px #f5f5f5;
}

.company-marker .marker-name {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7em;
    font-weight: 600;
    color: #1565c0;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========== BADGE ÉVALUATION ========== */
.ratio-evaluation {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
}

.eval-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75em;
    font-weight: 600;
}

.eval-badge.excellent {
    background: rgba(100, 181, 246, 0.15);
    color: #1565c0;
    border: 1px solid rgba(100, 181, 246, 0.3);
}

.eval-badge.good {
    background: rgba(129, 199, 132, 0.15);
    color: #1c7c3e;
    border: 1px solid rgba(129, 199, 132, 0.3);
}

.eval-badge.average {
    background: rgba(255, 183, 77, 0.15);
    color: #b45309;
    border: 1px solid rgba(255, 183, 77, 0.3);
}

.eval-badge.warning {
    background: rgba(229, 115, 115, 0.15);
    color: #c62828;
    border: 1px solid rgba(229, 115, 115, 0.3);
}

.eval-trend {
    font-size: 0.75em;
    color: #5f6368;
}

.eval-trend.up {
    color: #1c7c3e;
}

.eval-trend.down {
    color: #c62828;
}

.eval-trend.stable {
    color: #666666;
}

/* ========== INTERPRÉTATION ========== */
.ratio-interpretation {
    font-size: 0.85em;
    color: #666666;
    line-height: 1.6;
    margin: 0;
    padding: 12px 14px;
    background: #f7f7f7;
    border-radius: 8px;
    border-left: 3px solid rgba(100, 181, 246, 0.4);
}

.ratio-interpretation strong {
    color: #1a1a1a;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .ratio-positioning-grid {
        grid-template-columns: 1fr;
    }

    .ratio-focus-card {
        padding: 16px;
    }

    .ratio-focus-header .ratio-value {
        font-size: 1.2em;
    }

    .company-marker .marker-name {
        display: none;
    }

    .year-marker .marker-label {
        font-size: 0.6em;
        padding: 1px 4px;
    }
}

/* ============================================================
   VALORISATION D'ENTREPRISE - SECTION STYLES
   ============================================================ */

/* === Main Block === */
.valorisation-main-block {
    background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.valorisation-main-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #64B5F6, #81C784, #FFB74D);
}

.valorisation-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.valorisation-icon {
    width: 48px;
    height: 48px;
    background: rgba(100, 181, 246, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.valorisation-icon i {
    font-size: 1.5rem;
    color: #1565c0;
}

.valorisation-title-block {
    flex: 1;
    min-width: 150px;
}

.valorisation-label {
    display: block;
    font-size: 0.9rem;
    color: var(--color-text-muted, #666666);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.valorisation-year {
    font-size: 0.85rem;
    color: var(--color-text-secondary, #4a4a4a);
}

.valorisation-fiabilite {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.valorisation-fiabilite.fiabilite-haute {
    background: rgba(129, 199, 132, 0.15);
    color: #1c7c3e;
    border: 1px solid rgba(129, 199, 132, 0.3);
}

.valorisation-fiabilite.fiabilite-moyenne {
    background: rgba(255, 183, 77, 0.15);
    color: #b45309;
    border: 1px solid rgba(255, 183, 77, 0.3);
}

.valorisation-fiabilite.fiabilite-basse {
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-text-muted, #666666);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* === Result Display === */
.valorisation-result {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;
    padding: 20px 0;
}

.valorisation-fourchette {
    width: 100%;
    max-width: 400px;
}

.fourchette-bar {
    height: 12px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}

.fourchette-range {
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 100%;
    background: linear-gradient(90deg, rgba(100, 181, 246, 0.4), rgba(129, 199, 132, 0.6), rgba(255, 183, 77, 0.4));
    border-radius: 6px;
}

.fourchette-median {
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: #fff;
    border: 3px solid #64B5F6;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.fourchette-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    font-size: 0.85rem;
}

.fourchette-low, .fourchette-high {
    color: rgba(0, 0, 0, 0.6);
}

.fourchette-mid {
    color: #1565c0;
    font-size: 1rem;
}

.valorisation-main-value {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.valorisation-amount {
    font-size: 2.5rem;
    font-weight: 300;
    color: #1a1a1a;
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
}

.valorisation-range {
    font-size: 0.9rem;
    color: rgba(0, 0, 0, 0.6);
}

/* === Source Badge === */
.valorisation-source {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    margin-top: 16px;
}

.source-badge {
    background: rgba(0, 0, 0, 0.05);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--color-text-muted, #666666);
    display: flex;
    align-items: center;
    gap: 6px;
}

.source-fallback-info {
    font-size: 0.75rem;
    color: #b45309;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* === Methods Grid === */
.valorisation-methods {
    margin-bottom: 24px;
}

.methods-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: #1a1a1a;
    margin: 0 0 8px 0;
}

.methods-subtitle {
    font-size: 0.85rem;
    color: var(--color-text-secondary, #4a4a4a);
    margin: 0 0 20px 0;
}

.methods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.method-card {
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px;
    transition: border-color 0.3s, transform 0.2s;
}

.method-card:hover {
    border-color: rgba(100, 181, 246, 0.3);
    transform: translateY(-2px);
}

.method-card.method-ebe {
    border-left: 3px solid #81C784;
}

.method-card.method-ca {
    border-left: 3px solid #64B5F6;
}

.method-card.method-rn {
    border-left: 3px solid #FFB74D;
}

.method-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.method-name {
    font-size: 0.95rem;
    font-weight: 500;
    color: #1a1a1a;
}

.method-weight {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1565c0;
    font-variant-numeric: tabular-nums;
}

.method-slider {
    margin-bottom: 16px;
}

.valorisation-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.08);
    outline: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.valorisation-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #64B5F6;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s;
}

.valorisation-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.valorisation-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #64B5F6;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.method-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.method-formula {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--color-text-secondary, #4a4a4a);
    flex-wrap: wrap;
}

.formula-value {
    color: #1a1a1a;
    font-weight: 500;
}

.formula-operator {
    color: rgba(0, 0, 0, 0.2);
}

.formula-multiple {
    background: rgba(100, 181, 246, 0.15);
    padding: 2px 8px;
    border-radius: 4px;
    color: #1565c0;
    font-weight: 500;
}

.method-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: #f7f7f7;
    border-radius: 8px;
}

.result-label {
    font-size: 0.8rem;
    color: rgba(0, 0, 0, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.result-value {
    font-size: 1.15rem;
    font-weight: 500;
    color: #1a1a1a;
    font-variant-numeric: tabular-nums;
}

.method-range {
    font-size: 0.8rem;
    color: var(--color-text-muted, #666666);
    text-align: center;
}

.methods-actions {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

/* === Explainer === */
.valorisation-explainer {
    margin-top: 24px;
}

.valorisation-explainer details {
    background: rgba(245, 245, 245, 0.9);
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
}

.valorisation-explainer summary {
    padding: 14px 18px;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.6);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.3s;
}

.valorisation-explainer summary:hover {
    background: #f7f7f7;
}

.valorisation-explainer summary i {
    color: #b45309;
}

.explainer-content {
    padding: 16px 18px;
    border-top: 1px solid #e0e0e0;
    color: rgba(0, 0, 0, 0.6);
    font-size: 0.9rem;
    line-height: 1.6;
}

.explainer-content p {
    margin: 0 0 12px 0;
}

.explainer-content ul {
    margin: 0 0 12px 0;
    padding-left: 20px;
}

.explainer-content li {
    margin-bottom: 8px;
}

.explainer-content strong {
    color: #1a1a1a;
}

.explainer-warning {
    background: rgba(255, 183, 77, 0.1);
    border-left: 3px solid #FFB74D;
    padding: 10px 14px;
    border-radius: 0 6px 6px 0;
    margin-top: 12px;
    font-size: 0.85rem;
}

.explainer-warning i {
    color: #b45309;
    margin-right: 6px;
}

/* === Unavailable State === */
.valorisation-unavailable {
    background: rgba(245, 245, 245, 0.9);
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 40px 24px;
    text-align: center;
}

.unavailable-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.unavailable-icon i {
    font-size: 1.8rem;
    color: rgba(0, 0, 0, 0.2);
}

.unavailable-text h3 {
    font-size: 1.1rem;
    font-weight: 500;
    color: #1a1a1a;
    margin: 0 0 12px 0;
}

.unavailable-text p {
    color: rgba(0, 0, 0, 0.6);
    font-size: 0.9rem;
    margin: 0 0 16px 0;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.unavailable-hint {
    font-size: 0.8rem;
    color: var(--color-text-muted, #666666);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* === Valorisation Chart Container === */
#valorisation .chart-container {
    margin-top: 24px;
    padding: 20px;
}
/* La hauteur du graphe est gérée par .chart-canvas-wrapper (canvas en absolu).
   Plus de min-height sur le canvas : il remplit exactement son wrapper. */

#valorisation .chart-header {
    margin-bottom: 16px;
}

#valorisation .chart-header h3 {
    font-size: 1rem;
    font-weight: 500;
    color: #1a1a1a;
    margin: 0;
}

/* === Single Method Display === */
.valorisation-single-method {
    margin-top: 24px;
}

.valorisation-single-method .methods-title {
    font-size: 1rem;
    font-weight: 500;
    color: #1a1a1a;
    margin: 0 0 16px 0;
}

.single-method-card {
    background: rgba(245, 245, 245, 0.9);
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px;
}

.single-method-content {
    text-align: center;
}

.single-method-name {
    display: block;
    font-size: 0.9rem;
    color: #1565c0;
    margin-bottom: 16px;
    font-weight: 500;
}

.single-method-name i {
    margin-right: 8px;
}

.single-method-formula {
    font-size: 1.1rem;
    color: #1a1a1a;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.single-method-formula .formula-operator {
    color: var(--color-text-muted, #666666);
}

.single-method-formula .formula-equals {
    color: var(--color-text-muted, #666666);
    margin: 0 4px;
}

.single-method-formula strong {
    color: #1c7c3e;
    font-size: 1.3rem;
}

.single-method-range {
    font-size: 0.9rem;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 16px;
}

.single-method-note {
    font-size: 0.85rem;
    color: var(--color-text-secondary, #4a4a4a);
    margin: 16px 0 0 0;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    text-align: center;
}

.single-method-note i {
    color: #b45309;
    margin-right: 6px;
}

/* === Responsive === */
@media (max-width: 768px) {
    .valorisation-main-block {
        padding: 16px;
    }

    .valorisation-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .valorisation-icon {
        width: 40px;
        height: 40px;
    }

    .valorisation-icon i {
        font-size: 1.2rem;
    }

    .valorisation-amount {
        font-size: 2rem;
    }

    .fourchette-labels {
        font-size: 0.75rem;
    }

    .methods-grid {
        grid-template-columns: 1fr;
    }

    .method-card {
        padding: 16px;
    }

    .method-formula {
        font-size: 0.8rem;
    }

    .result-value {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .valorisation-main-block {
        padding: 12px;
        border-radius: 12px;
    }

    .valorisation-amount {
        font-size: 1.6rem;
    }

    .valorisation-range {
        font-size: 0.8rem;
    }

    .method-header {
        flex-wrap: wrap;
    }
}

/* ===================================
   SECTION FAQ - SEO
   =================================== */
.faq-section {
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
}

.faq-section h2 {
    color: #1a1a1a;
    font-size: 1.5rem;
    margin-bottom: 20px;
    font-weight: 600;
}

.faq-item {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: background 0.2s ease;
}

.faq-item:hover {
    background: #f0f0f0;
}

.faq-item summary {
    padding: 15px 20px;
    cursor: pointer;
    font-weight: 500;
    color: #1a1a1a;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '+';
    font-size: 1.2rem;
    color: #666666;
    transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
    content: '−';
}

.faq-item p {
    padding: 0 20px 15px;
    color: #5f6368;
    line-height: 1.6;
    font-size: 0.95rem;
}

.faq-item p strong {
    color: #1a1a1a;
}

/* ===================================
   SECTION ENTREPRISES SIMILAIRES - SEO
   =================================== */
.similar-section {
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
    background: #f7f7f7;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.similar-section h2 {
    color: #1a1a1a;
    font-size: 1.3rem;
    margin-bottom: 15px;
    font-weight: 600;
}

.similar-section > p {
    color: #666666;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.similar-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.similar-list li a {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    color: #1565c0;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.similar-list li a:hover {
    background: rgba(160, 196, 255, 0.15);
    border-color: #1565c0;
    color: #1a1a1a;
}

.sector-link-wrapper {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.sector-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1565c0;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.sector-link:hover {
    color: #0d47a1;
}

.sector-link i {
    font-size: 0.85rem;
}

/* H1 SEO dans seo-intro */
.seo-intro h1 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 15px;
    line-height: 1.4;
}

/* Responsive FAQ et Similar */
@media (max-width: 768px) {
    .faq-section,
    .similar-section {
        margin: 20px 10px;
        padding: 15px;
    }

    .faq-section h2,
    .similar-section h2 {
        font-size: 1.2rem;
    }

    .faq-item summary {
        padding: 12px 15px;
        font-size: 0.9rem;
    }

    .faq-item p {
        padding: 0 15px 12px;
        font-size: 0.85rem;
    }

    .similar-list {
        gap: 8px;
    }

    .similar-list li a {
        padding: 6px 12px;
        font-size: 0.85rem;
    }
}

/* ==========================================================================
   CONTENEURS PUBLICITAIRES (AdSense)
   ========================================================================== */
.ad-container {
    margin: 12px 0;
    padding: 0;
    text-align: center;
    min-height: 50px;
    background: transparent;
}

.ad-container.ad-horizontal {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.ad-container ins.adsbygoogle {
    display: block;
    width: 100%;
}

/* Masquer les pubs vides */
.ad-container ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}

/* Responsive - moins de marge sur mobile */
@media (max-width: 768px) {
    .ad-container {
        margin: 8px 0;
    }
}