/* ============================================================
   PGACOMPTA — Feuille de style du tableau de bord de démonstration
   ------------------------------------------------------------
   Partagée par tableau-de-bord-demo.html et ses trois pages de
   détail (factures, balance clients, balance fournisseurs).

   ⚠ Les données de ces pages sont entièrement FICTIVES. Aucun nom,
   aucun montant ne provient d'un dossier réel : ce sont des maquettes
   de démonstration destinées à montrer l'outil à un prospect.
   ============================================================ */

    /* ==========================================
       RESET & BASE STYLES
       ========================================== */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f1f5f9;
      color: #0f172a;
      line-height: 1.5;
      padding-bottom: 40px;
    }

    /* ==========================================
       HEADER & NAVIGATION
       ========================================== */
    header {
      background: #ffffff;
      border-bottom: 1px solid #e2e8f0;
      padding: 12px 28px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .logo-icon {
      width: 28px;
      height: 28px;
      background: linear-gradient(135deg, #2563eb, #0d9488);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
    }

    .brand-title {
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
    }

    .brand-subtitle {
      font-size: 14px;
      color: #64748b;
      margin-left: 8px;
      border-left: 1px solid #cbd5e1;
      padding-left: 12px;
    }

    nav {
      display: flex;
      align-items: center;
      gap: 24px;
    }

    nav a {
      text-decoration: none;
      color: #475569;
      font-size: 14px;
      font-weight: 500;
      transition: color 0.2s;
    }

    nav a:hover {
      color: #2563eb;
    }

    /* Cible d'au moins 24 px de haut (WCAG 2.5.8). Un lien de 14 px sur
       une seule ligne n'en mesure que 18 : trop fin pour être visé au
       doigt sans se tromper de rubrique. */
    nav a {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
    }

    /* En dessous de 760 px, la marque et les quatre liens ne tiennent
       plus sur une ligne : ils se serraient jusqu'à ce que « Dashboard
       Démo » passe à la ligne et que le dernier lien sorte de l'écran.
       On empile, et les liens s'enroulent sur deux lignes au besoin —
       rien n'est masqué ni renvoyé dans un défilement horizontal. */
    @media (max-width: 760px) {
      header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 16px;
      }
      .brand { gap: 9px; }
      .brand-title { font-size: 15px; }
      .brand-subtitle { font-size: 12px; margin-left: 6px; padding-left: 10px; }
      nav {
        width: 100%;
        flex-wrap: wrap;
        gap: 6px 18px;
      }
      nav a { font-size: 13px; }
    }

    /* Le bouton « déconnexion » a été retiré : sur une démonstration
       sans compte ni session, il ne pouvait rien faire. Un bouton qui
       ne produit aucun effet est pire qu'absent — il se clique. */

    /* ==========================================
       MAIN CONTAINER & LAYOUT
       ========================================== */
    .container {
      max-width: 1400px;
      margin: 24px auto;
      padding: 0 24px;
    }

    .page-header {
      margin-bottom: 20px;
    }

    .page-title {
      font-size: 22px;
      font-weight: 700;
      color: #0f172a;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .page-title::before {
      content: "";
      display: inline-block;
      width: 4px;
      height: 22px;
      background: #2563eb;
      border-radius: 2px;
    }

    /* Dashboard Grid System */
    .dashboard-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 20px;
    }

    .card {
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      padding: 20px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.02);
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .card:hover {
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }

    /* ==========================================
       TYPOGRAPHY & METRICS COMPONENTS
       ========================================== */
    .card-label {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      margin-bottom: 8px;
    }

    .metric-value {
      font-size: 24px;
      font-weight: 700;
      color: #0f172a;
      letter-spacing: -0.5px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 600;
      margin-left: 8px;
      vertical-align: middle;
    }

    .badge-success {
      background: #dcfce7;
      color: #15803d;
    }

    .badge-danger {
      background: #fee2e2;
      color: #b91c1c;
    }

    /* ⚠ Etait #94a3b8 (2,56:1 sur blanc, sous le seuil de 4,5 exige pour
       du texte normal). #64748b est deja utilise ailleurs sur cette
       meme page (chart-labels, legend-item, nav a) : on reprend une
       teinte existante plutot que d'en ajouter une nouvelle. */
    .metric-comparison {
      font-size: 12px;
      color: #64748b;
      margin-top: 6px;
    }

    /* ==========================================
       KPI OVERVIEW CARDS (TOP ROW)
       ========================================== */
    .col-kpi-3 { grid-column: span 4; }
    .col-kpi-4 { grid-column: span 3; }
    .col-kpi-6 { grid-column: span 6; }
    .col-kpi-12 { grid-column: span 12; }

    @media (max-width: 1024px) {
      .col-kpi-3, .col-kpi-4 { grid-column: span 6; }
    }
    @media (max-width: 640px) {
      .col-kpi-3, .col-kpi-4, .col-kpi-6 { grid-column: span 12; }
    }

    /* ==========================================
       HERO TREASURY BLUE CARD
       ========================================== */
    .card-hero-blue {
      grid-column: span 5;
      background: linear-gradient(135deg, #1e40af, #2563eb);
      color: white;
      border: none;
      position: relative;
      overflow: hidden;
    }

    /* ⚠ Cette règle doit rester APRÈS la déclaration ci-dessus.
       Une media query n'ajoute aucune spécificité : à spécificité égale,
       c'est la dernière écrite qui l'emporte. Placée plus haut, dans le
       bloc des .col-kpi-*, elle était purement et simplement annulée par
       le « span 5 » — la carte restait à 118 px de large sur mobile.

       Toute carte multi-colonnes doit avoir son palier responsive, sans
       exception : celle-ci n'en avait aucun. */
    @media (max-width: 1024px) {
      .card-hero-blue { grid-column: span 12; }
    }

    /* ⚠ Était #93c5fd. Sur le point le plus clair du dégradé (#2563eb),
       cette valeur ne passait que 2,87:1 — trouvé en balayant toutes les
       couleurs déclarées du fichier, pas en la relisant sur une capture
       d'écran où elle paraissait suffisamment claire. rgba blanc à 92 %
       tient 4,65:1 au même endroit. */
    .card-hero-blue .card-label {
      color: rgba(255, 255, 255, .92);
    }

    .card-hero-blue .metric-value {
      color: white;
    }

    /* Tooltip overlay on treasury chart */
    .treasury-tooltip {
      position: absolute;
      top: 35%;
      left: 35%;
      background: rgba(255, 255, 255, 0.95);
      color: #0f172a;
      padding: 6px 12px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      backdrop-filter: blur(4px);
    }

    /* ⚠ Était #16a34a (3,30:1 sur le fond blanc de l'infobulle, sous
       4,5). #15803d — déjà utilisé pour .badge-success — passe à
       5,02:1. */
    .treasury-tooltip span {
      color: #15803d;
      font-size: 11px;
    }

    /* En dessous de 700 px, l'infobulle sort du positionnement absolu et
       reprend sa place dans le flux, juste sous « Trésorerie active ».

       Un top/left en pourcentage se cale sur la HAUTEUR et la LARGEUR de
       la carte : plus la carte rétrécit, plus 35 % / 35 % se rapproche du
       titre, jusqu'à le recouvrir. Aucune valeur en pourcentage ne peut
       tenir sur toutes les largeurs — mieux vaut renoncer au chevauchement
       plutôt que chercher le bon chiffre. */
    @media (max-width: 700px) {
      .treasury-tooltip {
        position: static;
        display: inline-block;
        margin-top: 12px;
        backdrop-filter: none;   /* inutile hors superposition */
      }
    }

    /* ==========================================
       CHARTS & GRAPHICS
       ========================================== */
    .chart-container {
      position: relative;
      width: 100%;
      margin-top: 15px;
    }

    /* Bar Charts */
    .bar-chart {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      height: 150px;
      padding-top: 20px;
      border-bottom: 1px solid #e2e8f0;
      gap: 6px;
    }

    .bar-group {
      display: flex;
      gap: 3px;
      align-items: flex-end;
      height: 100%;
      flex: 1;
      justify-content: center;
    }

    .bar {
      width: 12px;
      border-radius: 3px 3px 0 0;
      transition: height 1s ease-out;
      position: relative;
    }

    .bar-2026-blue { background: #2563eb; }
    .bar-2025-blue { background: #cbd5e1; }
    .bar-2026-coral { background: #f97316; }
    .bar-2025-coral { background: #fed7aa; }

    .chart-labels {
      display: flex;
      justify-content: space-between;
      margin-top: 8px;
      font-size: 11px;
      color: #64748b;
    }

    .chart-legend {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin-top: 12px;
      font-size: 11px;
      color: #64748b;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .legend-color {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }

    /* Circular Gauges */
    .gauge-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 10px 0;
    }

    .gauge-svg {
      width: 120px;
      height: 120px;
      transform: rotate(-90deg);
    }

    .gauge-bg {
      fill: none;
      stroke: #f1f5f9;
      stroke-width: 10;
    }

    .gauge-progress {
      fill: none;
      stroke-width: 10;
      stroke-linecap: round;
      stroke-dasharray: 283;
      stroke-dashoffset: 283;
      transition: stroke-dashoffset 1.5s ease-out;
    }

    .gauge-text {
      font-size: 20px;
      font-weight: 700;
      fill: #0f172a;
      text-anchor: middle;
      dominant-baseline: middle;
    }

    /* ==========================================
       TABLES & LISTS
       ========================================== */
    .table-card {
      grid-column: span 4;
    }

    @media (max-width: 1024px) {
      .table-card { grid-column: span 12; }
    }

    .card-title-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }

    .card-title-row h3 {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
    }

    .list-item {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 12px 0;
      border-bottom: 1px solid #f1f5f9;
    }

    .list-item:last-child {
      border-bottom: none;
    }

    .item-name {
      font-size: 13px;
      font-weight: 600;
      color: #1e293b;
      max-width: 220px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Meme correction que .metric-comparison ci-dessus : #94a3b8 ne
       passait pas 4,5:1 sur blanc. */
    .item-subtext {
      font-size: 11px;
      color: #64748b;
      margin-top: 2px;
    }

    .item-amount {
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
      text-align: right;
    }

    .days-badge {
      display: inline-block;
      padding: 1px 6px;
      border-radius: 10px;
      font-size: 11px;
      font-weight: 700;
      margin-left: 6px;
      background: #f1f5f9;
      color: #475569;
    }

    .days-badge.late {
      background: #fee2e2;
      color: #dc2626;
    }

    /* ⚠ Était #0d9488 (3,74:1 sur blanc, sous 4,5). #0f766e — déjà en
       usage juste dessous pour l'état :hover — passe à 5,47:1 : repris
       comme couleur de base plutôt qu'inventer une troisième teinte. */
    .table-link {
      display: inline-block;
      margin-top: 12px;
      font-size: 13px;
      font-weight: 600;
      color: #0f766e;
      text-decoration: none;
      transition: color 0.2s;
    }

    .table-link:hover {
      color: #0c5f59;
      text-decoration: underline;
    }

    /* ==========================================
       TITRES DE SECTION (Charges d'exploitation, Bilan)
       Même principe que .page-title (barre verticale + gras), en plus
       discret : ce sont des sous-titres à l'intérieur de la page, pas
       le titre de la page elle-même.
       ========================================== */
    .section-title {
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
      margin: 4px 0 -4px;
    }
    .section-title::before {
      content: "";
      display: inline-block;
      width: 4px;
      height: 16px;
      background: #0d9488;
      border-radius: 2px;
    }

    /* ==========================================
       DONUT : répartition des charges d'exploitation
       ========================================== */
    .donut-layout {
      display: flex;
      align-items: center;
      gap: 32px;
      flex-wrap: wrap;
    }
    .donut-wrap {
      flex: 0 0 200px;
      width: 200px;
    }
    .donut-svg { display: block; width: 100%; height: auto; }
    /* Les segments à 0 % ont une longueur d'arc nulle : rien ne se
       dessine, mais l'élément reste dans le DOM pour que sa légende
       existe. Rien à masquer côté CSS. */
    .donut-segment { stroke-linecap: butt; }

    .donut-legend {
      list-style: none;
      flex: 1 1 320px;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .donut-legend__item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 7px 0;
      border-bottom: 1px solid #f8fafc;
    }
    .donut-legend__item:last-child { border-bottom: none; }
    .donut-legend__puce {
      width: 10px;
      height: 10px;
      border-radius: 3px;
      flex-shrink: 0;
    }
    .donut-legend__nom {
      font-size: 12.5px;
      color: #475569;
      flex: 1;
      min-width: 0;
    }
    /* Les deux postes à 0 % restent lisibles mais s'effacent visuellement
       par rapport aux six postes actifs : c'est la lecture correcte d'une
       ligne qui ne pèse rien dans le total, pas un défaut d'affichage. */
    .donut-legend__item:nth-child(2) .donut-legend__nom,
    .donut-legend__item:nth-child(4) .donut-legend__nom,
    .donut-legend__item:nth-child(2) .donut-legend__pct,
    .donut-legend__item:nth-child(4) .donut-legend__pct { color: #cbd5e1; }
    .donut-legend__pct {
      font-size: 12.5px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      color: #0f172a;
      flex-shrink: 0;
    }

    @media (max-width: 560px) {
      .donut-layout { justify-content: center; }
      .donut-wrap { flex-basis: 170px; width: 170px; }
    }

    /* ==========================================
       CSS KEYFRAME ANIMATIONS
       ========================================== */
    @keyframes drawPath {
      to {
        stroke-dashoffset: 0;
      }
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .animated-element {
      animation: fadeIn 0.8s ease-out forwards;
    }

    /* SVG Animated Line setup */
    .animated-line {
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      animation: drawPath 2s ease-out forwards;
    }

    .gauge-72 { stroke-dashoffset: 79; } /* 72% of 283 */
  

/* ==========================================================
   MISE EN MOUVEMENT
   ----------------------------------------------------------
   Les animations d'origine ne se déclenchaient jamais :
     — les barres portaient une transition sur height, mais leur
       hauteur définitive était écrite en dur dès le chargement ;
     — les jauges recevaient leur stroke-dashoffset cible au même
       instant que la valeur de départ.
   Une transition a besoin de deux états séparés dans le temps.
   Tout part donc de zéro, et la classe .anime — posée à l'entrée
   dans l'écran — amène chaque élément à sa valeur.
   ========================================================== */

/* ⚠ Tous les états « masqué » sont conditionnés à .anime-actif, classe
   posée par le script sur <html> dès son exécution.
   Sans JavaScript — ou si le script échoue — aucune règle de masquage ne
   s'applique et la page s'affiche complète. Un contenu rendu invisible par
   défaut et révélé par script disparaît totalement à la moindre panne. */

/* Barres : hauteur portée par --h, appliquée seulement une fois animée. */
.anime-actif .bar { height: 0; transition: height .9s cubic-bezier(.22,.61,.36,1); }
.anime-actif .anime .bar { height: var(--h, 0); }
/* Chaque barre part un peu après la précédente : la lecture suit le temps. */
.anime .bar-group:nth-child(1) .bar { transition-delay: .00s; }
.anime .bar-group:nth-child(2) .bar { transition-delay: .06s; }
.anime .bar-group:nth-child(3) .bar { transition-delay: .12s; }
.anime .bar-group:nth-child(4) .bar { transition-delay: .18s; }
.anime .bar-group:nth-child(5) .bar { transition-delay: .24s; }
.anime .bar-group:nth-child(6) .bar { transition-delay: .30s; }
.anime .bar-group:nth-child(7) .bar { transition-delay: .36s; }

/* Jauges : le trait se remplit depuis zéro. */
.anime-actif .gauge-progress { stroke-dashoffset: 283; transition: stroke-dashoffset 1.4s cubic-bezier(.22,.61,.36,1) .2s; }

/* Cartes : apparition en cascade, mais seulement quand on les atteint.
   L'animation d'origine se jouait au chargement, donc hors écran pour
   tout ce qui se trouvait plus bas que le premier écran. */
.anime-actif .animated-element { opacity: 0; transform: translateY(14px); animation: none; }
.anime-actif .animated-element.anime { animation: fadeIn .7s ease-out forwards; }

/* Courbe de trésorerie : le tracé attend lui aussi d'être visible. */
.anime-actif .animated-line { animation-play-state: paused; }
.anime-actif .anime .animated-line { animation-play-state: running; }

.compteur { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .bar { height: var(--h, 0); transition: none; }
  .gauge-progress { transition: none; }
  .animated-element { opacity: 1; transform: none; animation: none; }
  .animated-line { animation: none; stroke-dashoffset: 0; }
}


/* ============================================================
   PAGES DE DÉTAIL : factures et balances
   ============================================================ */
.bandeau-demo {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #78350f;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  margin-bottom: 20px;
}
.bandeau-demo strong { font-weight: 700; }

/* Même correction que .table-link : #0d9488 ne passait pas 4,5:1. */
.retour {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  color: #0f766e;
  text-decoration: none;
}
.retour:hover { text-decoration: underline; }

.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.filtre {
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.filtre:hover { border-color: #94a3b8; }
.filtre[aria-pressed="true"] { background: #2563eb; border-color: #2563eb; color: #fff; }
.filtre:focus-visible { outline: 2px solid #1e40af; outline-offset: 2px; }

.table-enveloppe { overflow-x: auto; }

.table-demo {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 720px;
}
.table-demo caption {
  text-align: left;
  font-size: 13px;
  color: #64748b;
  padding-bottom: 10px;
}
.table-demo th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #64748b;
  padding: 10px 12px;
  border-bottom: 2px solid #e2e8f0;
  white-space: nowrap;
}
.table-demo td {
  padding: 11px 12px;
  border-bottom: 1px solid #f1f5f9;
  color: #1e293b;
}
.table-demo tbody tr:hover { background: #f8fafc; }
.table-demo .nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-demo .principal { font-weight: 600; }
.table-demo tfoot td {
  font-weight: 700;
  color: #0f172a;
  border-top: 2px solid #e2e8f0;
  border-bottom: none;
  background: #f8fafc;
}

/* Le rouge et le vert ne portent jamais seuls l'information : chaque état
   est aussi écrit en toutes lettres. Un daltonien lit la même chose. */
.etat {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.etat-payee   { background: #dcfce7; color: #14532d; }
.etat-attente { background: #e0e7ff; color: #312e81; }
.etat-retard  { background: #fee2e2; color: #7f1d1d; }

.ligne-masquee { display: none; }