Tableaux de bord 14 variantes

<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"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg> +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"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg> -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"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg> +5 vs aout</span></div>
</div>

/* reutilise .stat de cards.css : un seul style de compteur pour tout le catalogue */

grid grid-cols-4 gap-4 max-md:grid-cols-2

<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>

.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; }

flex h-2 overflow-hidden rounded-full [&>span]:h-full

<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>

.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); }

flex divide-x [&>div]:px-5 [&_strong]:block [&_strong]:text-xl

<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>

.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); }

flex h-40 items-end gap-2 [&>div>span]:block [&>div>span]:rounded-t [&>div>span]:bg-blue-500

<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>

.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); }

h-32 w-full text-blue-600 [&_path]:vector-effect-non-scaling-stroke

<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>

.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; }

grid grid-cols-[1fr_auto] gap-2 [&_div]:h-2 [&_div]:rounded-full [&_div]:bg-blue-500

<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>

.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); }

stroke-dasharray en pourcentage sur un cercle de circonference 100

<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>

.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; }

grid grid-cols-7 gap-1 [&_span]:aspect-square [&_span]:rounded

<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"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/></svg></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"><svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" fill="#e8453c"/><path d="M14 2v6h6" fill="#fff" fill-opacity=".35"/><text x="12" y="17" font-family="system-ui,sans-serif" font-size="6.5" font-weight="700" fill="#fff" text-anchor="middle">PDF</text></svg></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"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg></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>

.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); }

divide-y [&_li]:flex [&_li]:items-center [&_li]:gap-3 [&_li]:p-3

<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>

.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); }

[&_li]:flex [&_li]:gap-3 [&_li]:p-3 [&_p]:text-sm

<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>

.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); }

[&_li]:grid [&_li]:grid-cols-[56px_1fr] [&_li]:gap-3 [&_.maintenant]:border-l-2 [&_.maintenant]:border-blue-600

<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"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> Plage libre</button>
  <button class="btn btn--secondaire"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> Exporter</button>
</div>

.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); }

flex flex-wrap items-center gap-3 border-b pb-4

<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><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m20 6-11 11-5-5"/></svg> 74 % atteint</span>
      <span>Reste 16 750 EUR en 24 jours, soit 700 EUR par jour</span>
    </div>
  </div>
</div>

.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; }

flex flex-col gap-2 [&_.pied]:flex [&_.pied]:justify-between [&_.pied]:text-xs

<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"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/></svg></span><div><strong>Devis 2026-097</strong><small>Sans reponse depuis 14 j</small></div></li>
      <li><span class="afaire__puce"><svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" fill="#e8453c"/><path d="M14 2v6h6" fill="#fff" fill-opacity=".35"/><text x="12" y="17" font-family="system-ui,sans-serif" font-size="6.5" font-weight="700" fill="#fff" text-anchor="middle">PDF</text></svg></span><div><strong>Facture 2026-118</strong><small>A emettre</small></div></li>
      <li><span class="afaire__puce"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="5" rx="1"/><path d="M5 9v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9M10 13h4"/></svg></span><div><strong>Dossier 2026-121</strong><small>2 pieces manquantes</small></div></li>
    </ul>
  </div></div>
</div>

/* aucun style specifique : le socle .btn suffit */

grid grid-cols-12 gap-4