/* ============================================================================
   BIBLIOTHEQUE UI JABS  -  dashboard.css
   Depend de : theme.css, buttons.css, cards.css, tables.css

   Un tableau de bord repond a une question : est-ce que tout va bien, et
   sinon ou regarder. Tout ce qui n'aide pas a decider est du bruit.
   Regles tenues partout :
   1. Un chiffre est toujours accompagne de sa periode de reference.
   2. Une variation porte un signe ET une fleche, jamais la couleur seule.
   3. Les graphiques sont en SVG pur, sans bibliotheque : ils restent nets a
      toute taille et ne pesent rien.
   ========================================================================= */

.dash {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-4);
  width: 100%;
  /* Container query : la grille reagit a la largeur de SON conteneur, pas a
     celle de la fenetre. Indispensable des qu'un tableau de bord est pose
     dans une colonne, un panneau ou un apercu. */
  container-type: inline-size;
}
.dash > .col-3  { grid-column: span 3; }
.dash > .col-4  { grid-column: span 4; }
.dash > .col-6  { grid-column: span 6; }
.dash > .col-8  { grid-column: span 8; }
.dash > .col-12 { grid-column: span 12; }
@container (max-width: 900px) { .dash > .col-3, .dash > .col-4 { grid-column: span 6; } .dash > .col-8 { grid-column: span 12; } }
@container (max-width: 560px) { .dash > * { grid-column: span 12; } }
/* Repli pour les navigateurs sans container queries. */
@supports not (container-type: inline-size) {
  @media (max-width: 900px) { .dash > .col-3, .dash > .col-4 { grid-column: span 6; } .dash > .col-8 { grid-column: span 12; } }
  @media (max-width: 560px) { .dash > * { grid-column: span 12; } }
}

.panneau { display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; }
.panneau__tete {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-border);
}
.panneau__tete h3 { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-bold); }
.panneau__tete small { font-size: var(--fs-xs); color: var(--c-text-muted); }
.panneau__corps { padding: var(--sp-4); flex: 1; }

/* ===========================================================================
   FAMILLE A  -  COMPTEURS
   ======================================================================== */

/* @v DSH-A1
@nom Rangee de compteurs
@usage La premiere ligne d'un tableau de bord. Quatre chiffres maximum : au-dela, plus aucun ne ressort et la ligne devient decorative.
@html
<div class="dash">
  <div class="col-3 carte stat"><span class="stat__label">Chiffre d'affaires</span><strong class="stat__valeur">48 250 EUR</strong><span class="stat__delta is-hausse">{{icon:arrow-up}} +12,4 % vs aout</span></div>
  <div class="col-3 carte stat"><span class="stat__label">Devis en attente</span><strong class="stat__valeur">17</strong><span class="stat__delta is-baisse">{{icon:arrow-up}} -3 vs la semaine derniere</span></div>
  <div class="col-3 carte stat"><span class="stat__label">Taux de signature</span><strong class="stat__valeur">62 %</strong><span class="stat__delta">stable sur 3 mois</span></div>
  <div class="col-3 carte stat"><span class="stat__label">Interventions du mois</span><strong class="stat__valeur">31</strong><span class="stat__delta is-hausse">{{icon:arrow-up}} +5 vs aout</span></div>
</div>
@tw grid grid-cols-4 gap-4 max-md:grid-cols-2
@end */
/* reutilise .stat de cards.css : un seul style de compteur pour tout le catalogue */
/* @endv */

/* @v DSH-A2
@nom Compteur avec repartition
@usage Un total qui se decompose. La barre segmentee remplace un camembert : elle se lit plus vite et tient sur une ligne.
@html
<div class="panneau" style="max-width:420px">
  <div class="panneau__corps stat">
    <span class="stat__label">24 dossiers en cours</span>
    <strong class="stat__valeur">148 200 EUR</strong>
    <div class="repartition">
      <span style="--part: 42%; --teinte: var(--c-success)"></span>
      <span style="--part: 33%; --teinte: var(--c-primary)"></span>
      <span style="--part: 25%; --teinte: var(--c-warn)"></span>
    </div>
    <ul class="repartition__legende">
      <li><i style="--teinte: var(--c-success)"></i>Signes <strong>10</strong></li>
      <li><i style="--teinte: var(--c-primary)"></i>Envoyes <strong>8</strong></li>
      <li><i style="--teinte: var(--c-warn)"></i>Brouillons <strong>6</strong></li>
    </ul>
  </div>
</div>
@tw flex h-2 overflow-hidden rounded-full [&>span]:h-full
@end */
.repartition { display: flex; height: 10px; margin: var(--sp-3) 0 var(--sp-2); border-radius: var(--r-full); overflow: hidden; background: var(--c-surface-3); }
.repartition > span { width: var(--part); background: var(--teinte); }
.repartition__legende { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.repartition__legende li { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--c-text-soft); }
.repartition__legende i { width: 9px; height: 9px; border-radius: 2px; background: var(--teinte); }
.repartition__legende strong { color: var(--c-text); font-variant-numeric: tabular-nums; }
/* @endv */

/* @v DSH-A3
@nom Compteur compact en ligne
@usage Dans un en-tete de page ou une barre laterale, quand la place manque. Meme information, un quart de la hauteur.
@html
<div class="compteurs-ligne">
  <div><strong>24</strong><span>dossiers</span></div>
  <div><strong>17</strong><span>devis en attente</span></div>
  <div><strong>3</strong><span>relances a faire</span></div>
  <div><strong>48 250 EUR</strong><span>ce mois</span></div>
</div>
@tw flex divide-x [&>div]:px-5 [&_strong]:block [&_strong]:text-xl
@end */
.compteurs-ligne {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  overflow: hidden;
}
.compteurs-ligne > div { padding: var(--sp-3) var(--sp-5); border-left: 1px solid var(--c-border); flex: 1; min-width: 120px; }
.compteurs-ligne > div:first-child { border-left: none; }
.compteurs-ligne strong { display: block; font-size: var(--fs-xl); font-weight: 800; color: var(--c-text); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.compteurs-ligne span   { font-size: var(--fs-xs); color: var(--c-text-muted); }
/* @endv */

/* ===========================================================================
   FAMILLE B  -  GRAPHIQUES
   Tous en SVG pur, sans bibliotheque. Chaque graphique est double d'un
   tableau lisible par un lecteur d'ecran, place en visually-hidden.
   ======================================================================== */

/* @v DSH-B1
@nom Histogramme
@usage Comparer des periodes. Les barres partent toujours de zero : tronquer l'axe fausse la perception des ecarts.
@html
<div class="panneau">
  <div class="panneau__tete"><h3>Chiffre d'affaires mensuel</h3><small>2026, en milliers d'euros</small></div>
  <div class="panneau__corps">
    <div class="barres">
      <div style="--h: 42%"><span></span><small>Avr</small></div>
      <div style="--h: 58%"><span></span><small>Mai</small></div>
      <div style="--h: 51%"><span></span><small>Juin</small></div>
      <div style="--h: 74%"><span></span><small>Juil</small></div>
      <div style="--h: 63%"><span></span><small>Aout</small></div>
      <div style="--h: 88%" class="is-actif"><span></span><small>Sept</small></div>
    </div>
  </div>
</div>
@tw flex h-40 items-end gap-2 [&>div>span]:block [&>div>span]:rounded-t [&>div>span]:bg-blue-500
@end */
.barres { display: flex; align-items: flex-end; gap: var(--sp-2); height: 150px; }
.barres > div { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; flex: 1; height: 100%; }
.barres > div > span {
  display: block;
  width: 100%;
  height: var(--h);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--c-primary-soft);
  transition: height var(--t-slow), background-color var(--t-fast);
}
.barres > div:hover > span { background: color-mix(in srgb, var(--c-primary) 45%, var(--c-primary-soft)); }
.barres > div.is-actif > span { background: var(--c-primary); }
.barres small { font-size: var(--fs-xs); color: var(--c-text-muted); }
/* @endv */

/* @v DSH-B2
@nom Courbe
@usage Une tendance dans le temps. L'aire sous la courbe aide a lire le volume ; les points ne sont marques que sur les valeurs remarquables.
@html
<div class="panneau">
  <div class="panneau__tete"><h3>Devis signes</h3><small>30 derniers jours</small></div>
  <div class="panneau__corps">
    <svg class="courbe" viewBox="0 0 300 100" preserveAspectRatio="none" role="img" aria-label="Courbe des devis signes, de 4 a 12 par semaine, en hausse">
      <defs><linearGradient id="c-aire" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="currentColor" stop-opacity=".28"/><stop offset="100%" stop-color="currentColor" stop-opacity="0"/>
      </linearGradient></defs>
      <path d="M0 78 L50 70 L100 74 L150 44 L200 52 L250 26 L300 14 L300 100 L0 100 Z" fill="url(#c-aire)"/>
      <path d="M0 78 L50 70 L100 74 L150 44 L200 52 L250 26 L300 14" fill="none" stroke="currentColor" stroke-width="2" vector-effect="non-scaling-stroke" stroke-linejoin="round"/>
    </svg>
    <div class="courbe__axe"><span>9 aout</span><span>23 aout</span><span>6 sept.</span></div>
  </div>
</div>
@tw h-32 w-full text-blue-600 [&_path]:vector-effect-non-scaling-stroke
@end */
.courbe { display: block; width: 100%; height: 120px; color: var(--c-primary); overflow: visible; }
.courbe__axe { display: flex; justify-content: space-between; margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--c-text-muted); }
/* @endv */

/* @v DSH-B3
@nom Barres horizontales
@usage Classement : meilleurs clients, operations les plus vendues. Les libelles restent lisibles, contrairement a un histogramme vertical.
@html
<div class="panneau">
  <div class="panneau__tete"><h3>Operations les plus vendues</h3><small>Depuis janvier</small></div>
  <div class="panneau__corps">
    <ul class="classement">
      <li><span>Pompe a chaleur air/eau</span><div style="--p: 100%"></div><strong>42</strong></li>
      <li><span>Chauffe-eau thermodynamique</span><div style="--p: 64%"></div><strong>27</strong></li>
      <li><span>Isolation des combles</span><div style="--p: 45%"></div><strong>19</strong></li>
      <li><span>PAC air/air</span><div style="--p: 26%"></div><strong>11</strong></li>
    </ul>
  </div>
</div>
@tw grid grid-cols-[1fr_auto] gap-2 [&_div]:h-2 [&_div]:rounded-full [&_div]:bg-blue-500
@end */
.classement { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.classement li { display: grid; grid-template-columns: 1fr 40px; grid-template-areas: "nom valeur" "barre valeur"; gap: 4px var(--sp-3); align-items: center; }
.classement span { grid-area: nom; font-size: var(--fs-sm); color: var(--c-text); }
.classement div { grid-area: barre; height: 7px; width: var(--p); border-radius: var(--r-full); background: var(--c-primary); min-width: 4px; }
.classement strong { grid-area: valeur; text-align: right; font-size: var(--fs-md); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
/* @endv */

/* @v DSH-B4
@nom Anneau de repartition
@usage Trois a cinq parts maximum. Au-dela, un classement en barres horizontales se lit mieux qu'un anneau.
@html
<div class="panneau" style="max-width:340px">
  <div class="panneau__tete"><h3>Origine des demandes</h3></div>
  <div class="panneau__corps camembert">
    <svg viewBox="0 0 42 42" role="img" aria-label="Repartition : 45 % bouche a oreille, 30 % Google, 25 % site internet">
      <circle class="camembert__fond" cx="21" cy="21" r="15.9"/>
      <circle class="camembert__part" cx="21" cy="21" r="15.9" stroke="var(--c-primary)" stroke-dasharray="45 55" stroke-dashoffset="0"/>
      <circle class="camembert__part" cx="21" cy="21" r="15.9" stroke="var(--c-success)" stroke-dasharray="30 70" stroke-dashoffset="-45"/>
      <circle class="camembert__part" cx="21" cy="21" r="15.9" stroke="var(--c-warn)" stroke-dasharray="25 75" stroke-dashoffset="-75"/>
    </svg>
    <ul class="repartition__legende">
      <li><i style="--teinte: var(--c-primary)"></i>Bouche a oreille <strong>45 %</strong></li>
      <li><i style="--teinte: var(--c-success)"></i>Google <strong>30 %</strong></li>
      <li><i style="--teinte: var(--c-warn)"></i>Site internet <strong>25 %</strong></li>
    </ul>
  </div>
</div>
@tw stroke-dasharray en pourcentage sur un cercle de circonference 100
@end */
.camembert { display: flex; align-items: center; gap: var(--sp-4); }
.camembert svg { width: 120px; height: 120px; flex: none; transform: rotate(-90deg); }
.camembert circle { fill: none; stroke-width: 5; }
.camembert__fond { stroke: var(--c-surface-3); }
.camembert__part { stroke-linecap: butt; }
.camembert .repartition__legende { flex-direction: column; gap: var(--sp-2); }
/* @endv */

/* @v DSH-B5
@nom Carte de chaleur
@usage Repartition dans le temps : jours et creneaux. Une grille suffit, et l'intensite se lit meme en niveaux de gris.
@html
<div class="panneau">
  <div class="panneau__tete"><h3>Interventions par jour</h3><small>12 dernieres semaines</small></div>
  <div class="panneau__corps">
    <div class="chaleur">
      <span data-n="0"></span><span data-n="1"></span><span data-n="2"></span><span data-n="1"></span><span data-n="3"></span><span data-n="4"></span><span data-n="0"></span>
      <span data-n="1"></span><span data-n="3"></span><span data-n="2"></span><span data-n="4"></span><span data-n="4"></span><span data-n="2"></span><span data-n="0"></span>
      <span data-n="2"></span><span data-n="4"></span><span data-n="3"></span><span data-n="3"></span><span data-n="2"></span><span data-n="1"></span><span data-n="0"></span>
      <span data-n="1"></span><span data-n="2"></span><span data-n="4"></span><span data-n="4"></span><span data-n="3"></span><span data-n="3"></span><span data-n="1"></span>
    </div>
    <div class="chaleur__legende"><span>Moins</span><i data-n="0"></i><i data-n="1"></i><i data-n="2"></i><i data-n="3"></i><i data-n="4"></i><span>Plus</span></div>
  </div>
</div>
@tw grid grid-cols-7 gap-1 [&_span]:aspect-square [&_span]:rounded
@end */
.chaleur { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.chaleur span, .chaleur__legende i {
  aspect-ratio: 1;
  border-radius: var(--r-xs);
  background: var(--c-surface-3);
}
.chaleur [data-n="1"], .chaleur__legende [data-n="1"] { background: color-mix(in srgb, var(--c-primary) 25%, var(--c-surface-3)); }
.chaleur [data-n="2"], .chaleur__legende [data-n="2"] { background: color-mix(in srgb, var(--c-primary) 50%, var(--c-surface-3)); }
.chaleur [data-n="3"], .chaleur__legende [data-n="3"] { background: color-mix(in srgb, var(--c-primary) 75%, var(--c-surface-3)); }
.chaleur [data-n="4"], .chaleur__legende [data-n="4"] { background: var(--c-primary); }
.chaleur__legende { display: flex; align-items: center; gap: 4px; margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--c-text-muted); }
.chaleur__legende i { width: 12px; height: 12px; }
/* @endv */

/* ===========================================================================
   FAMILLE C  -  PANNEAUX D'ACTIVITE
   ======================================================================== */

/* @v DSH-C1
@nom Ce qu'il y a a faire
@usage Le panneau le plus utile d'un tableau de bord : ce qui attend une action, trie par urgence. Chaque ligne porte son bouton.
@html
<div class="panneau">
  <div class="panneau__tete"><h3>A traiter aujourd'hui</h3><span class="doc-etiq doc-etiq--attente">5</span></div>
  <ul class="afaire">
    <li class="is-urgent"><span class="afaire__puce">{{icon:alerte}}</span><div><strong>Devis 2026-097 sans reponse</strong><small>Envoye il y a 14 jours</small></div><button class="btn btn--plein btn--dense">Relancer</button></li>
    <li><span class="afaire__puce">{{icon:f-pdf}}</span><div><strong>Facture 2026-118 a emettre</strong><small>Chantier termine le 2 septembre</small></div><button class="btn btn--secondaire btn--dense">Emettre</button></li>
    <li><span class="afaire__puce">{{icon:archive}}</span><div><strong>Dossier 2026-121 incomplet</strong><small>RIB et justificatif manquants</small></div><button class="btn btn--secondaire btn--dense">Ouvrir</button></li>
  </ul>
</div>
@tw divide-y [&_li]:flex [&_li]:items-center [&_li]:gap-3 [&_li]:p-3
@end */
.afaire { list-style: none; margin: 0; padding: 0; }
.afaire li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--c-border); }
.afaire li:first-child { border-top: none; }
.afaire li > div { flex: 1; min-width: 0; }
.afaire strong { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--c-text); }
.afaire small  { font-size: var(--fs-xs); color: var(--c-text-muted); }
.afaire__puce {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none;
  border-radius: var(--r-full);
  background: var(--c-surface-3);
  color: var(--c-text-soft);
}
.afaire__puce svg { width: 16px; height: 16px; }
.afaire .is-urgent .afaire__puce { background: var(--c-danger-soft); color: var(--c-danger); }
.afaire .is-urgent strong { color: var(--c-danger); }
/* @endv */

/* @v DSH-C2
@nom Journal d'activite
@usage Qui a fait quoi. Utile a plusieurs, inutile seul : ne le mettre que si l'equipe compte au moins deux personnes.
@html
<div class="panneau">
  <div class="panneau__tete"><h3>Activite recente</h3><button class="btn btn--texte btn--dense">Tout voir</button></div>
  <ul class="journal">
    <li><span class="personne__avatar">SM</span><div><p><strong>Sophie M.</strong> a valide le dossier <a href="#">2026-103</a></p><small>Il y a 12 minutes</small></div></li>
    <li><span class="personne__avatar personne__avatar--vert">JK</span><div><p><strong>Julien K.</strong> a envoye le devis <a href="#">2026-121</a> a Paul Durand</p><small>Il y a 1 heure</small></div></li>
    <li><span class="personne__avatar">SM</span><div><p><strong>Sophie M.</strong> a ajoute 4 photos au dossier <a href="#">2026-118</a></p><small>Hier a 17:48</small></div></li>
  </ul>
</div>
@tw [&_li]:flex [&_li]:gap-3 [&_li]:p-3 [&_p]:text-sm
@end */
.journal { list-style: none; margin: 0; padding: var(--sp-2) 0; }
.journal li { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); }
.journal .personne__avatar { width: 32px; height: 32px; font-size: var(--fs-xs); }
.journal p { margin: 0; font-size: var(--fs-sm); color: var(--c-text-soft); line-height: 1.45; }
.journal p strong { color: var(--c-text); font-weight: var(--fw-semi); }
.journal a { color: var(--c-primary-ink); font-weight: var(--fw-semi); text-decoration: none; }
.journal a:hover { text-decoration: underline; }
.journal small { font-size: var(--fs-xs); color: var(--c-text-muted); }
/* @endv */

/* @v DSH-C3
@nom Planning du jour
@usage Ce qui se passe aujourd'hui, par creneau. Le trait de l'heure courante fait gagner plus de temps que n'importe quel filtre.
@html
<div class="panneau">
  <div class="panneau__tete"><h3>Aujourd'hui</h3><small>Vendredi 6 septembre</small></div>
  <ul class="agenda">
    <li class="is-passe"><span>08:30</span><div><strong>Pose PAC - Krissi</strong><small>Neuilly-sur-Marne - equipe Nord</small></div></li>
    <li class="is-maintenant"><span>11:00</span><div><strong>Visite technique - Durand</strong><small>Le Raincy - Sophie M.</small></div></li>
    <li><span>14:00</span><div><strong>Entretien annuel - Martin</strong><small>Colombes - equipe Ouest</small></div></li>
    <li><span>16:30</span><div><strong>Livraison materiel</strong><small>Depot</small></div></li>
  </ul>
</div>
@tw [&_li]:grid [&_li]:grid-cols-[56px_1fr] [&_li]:gap-3 [&_.maintenant]:border-l-2 [&_.maintenant]:border-blue-600
@end */
.agenda { list-style: none; margin: 0; padding: var(--sp-2) 0; }
.agenda li { display: grid; grid-template-columns: 54px 1fr; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); border-left: 3px solid transparent; }
.agenda span { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.agenda strong { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--c-text); }
.agenda small  { font-size: var(--fs-xs); color: var(--c-text-muted); }
.agenda .is-passe { opacity: .5; }
.agenda .is-maintenant { border-left-color: var(--c-primary); background: var(--c-primary-soft); }
.agenda .is-maintenant span { color: var(--c-primary-ink); }
/* @endv */

/* @v DSH-C4
@nom Selecteur de periode
@usage En tete du tableau de bord. Les raccourcis courants d'abord, la plage libre en dernier : neuf fois sur dix un raccourci suffit.
@html
<div class="dash-tete">
  <div><h2>Tableau de bord</h2><small>Donnees a jour au 6 septembre 2026, 09:14</small></div>
  <span class="cat-head__spacer"></span>
  <div class="btn-segmente">
    <button class="btn">7 j</button>
    <button class="btn is-actif">30 j</button>
    <button class="btn">Trimestre</button>
    <button class="btn">Annee</button>
  </div>
  <button class="btn btn--secondaire">{{icon:calendar}} Plage libre</button>
  <button class="btn btn--secondaire">{{icon:download}} Exporter</button>
</div>
@tw flex flex-wrap items-center gap-3 border-b pb-4
@end */
.dash-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-border);
}
.dash-tete h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.dash-tete small { font-size: var(--fs-xs); color: var(--c-text-muted); }
/* @endv */

/* @v DSH-C5
@nom Objectif du mois
@usage Un seul objectif suivi, avec le reste a faire et le rythme necessaire. C'est le rythme qui declenche l'action, pas le pourcentage.
@html
<div class="panneau objectif">
  <div class="panneau__corps">
    <span class="stat__label">Objectif de septembre</span>
    <div class="objectif__ligne"><strong class="stat__valeur">48 250</strong><span>sur 65 000 EUR</span></div>
    <div class="stat__jauge"><span style="--p: 74%"></span></div>
    <div class="objectif__pied">
      <span>{{icon:check}} 74 % atteint</span>
      <span>Reste 16 750 EUR en 24 jours, soit 700 EUR par jour</span>
    </div>
  </div>
</div>
@tw flex flex-col gap-2 [&_.pied]:flex [&_.pied]:justify-between [&_.pied]:text-xs
@end */
.objectif__ligne { display: flex; align-items: baseline; gap: var(--sp-2); }
.objectif__ligne span { font-size: var(--fs-sm); color: var(--c-text-muted); }
.objectif__pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--c-text-muted); }
.objectif__pied span:first-child { display: inline-flex; align-items: center; gap: 5px; color: var(--c-success); font-weight: var(--fw-semi); }
.objectif__pied svg { width: 13px; height: 13px; }
/* @endv */

/* @v DSH-C6
@nom Tableau de bord complet
@usage L'assemblage : periode, compteurs, graphique, panneaux d'activite. C'est le gabarit a copier pour demarrer un ecran d'accueil d'application.
@html
<div class="dash">
  <div class="col-12"><div class="compteurs-ligne">
    <div><strong>24</strong><span>dossiers en cours</span></div>
    <div><strong>17</strong><span>devis en attente</span></div>
    <div><strong>5</strong><span>a relancer</span></div>
    <div><strong>48 250 EUR</strong><span>ce mois</span></div>
  </div></div>
  <div class="col-8"><div class="panneau">
    <div class="panneau__tete"><h3>Chiffre d'affaires mensuel</h3><small>2026</small></div>
    <div class="panneau__corps"><div class="barres">
      <div style="--h: 42%"><span></span><small>Avr</small></div><div style="--h: 58%"><span></span><small>Mai</small></div>
      <div style="--h: 51%"><span></span><small>Juin</small></div><div style="--h: 74%"><span></span><small>Juil</small></div>
      <div style="--h: 63%"><span></span><small>Aout</small></div><div style="--h: 88%" class="is-actif"><span></span><small>Sept</small></div>
    </div></div>
  </div></div>
  <div class="col-4"><div class="panneau">
    <div class="panneau__tete"><h3>A traiter</h3><span class="doc-etiq doc-etiq--attente">3</span></div>
    <ul class="afaire">
      <li class="is-urgent"><span class="afaire__puce">{{icon:alerte}}</span><div><strong>Devis 2026-097</strong><small>Sans reponse depuis 14 j</small></div></li>
      <li><span class="afaire__puce">{{icon:f-pdf}}</span><div><strong>Facture 2026-118</strong><small>A emettre</small></div></li>
      <li><span class="afaire__puce">{{icon:archive}}</span><div><strong>Dossier 2026-121</strong><small>2 pieces manquantes</small></div></li>
    </ul>
  </div></div>
</div>
@tw grid grid-cols-12 gap-4
@end */
/* @endv */