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

   Les schemas devenus des attentes dans un logiciel metier. Ce ne sont plus
   des idees : un utilisateur qui a deja vu Linear, Notion ou Asana les
   cherche, et leur absence se remarque plus que leur presence.

   Trois regles tenues partout dans ce fichier :
   1. Tout ce qui est atteignable au clavier doit l'etre : ces schemas
      existent d'abord pour les gens qui utilisent l'outil huit heures par
      jour, et qui ne veulent pas lacher le clavier.
   2. Une action de masse est toujours annulable, ou precedee d'un decompte.
      Supprimer 40 lignes d'un clic sans retour possible est un piege.
   3. Rien ne remplace la navigation visible : la palette de commandes
      s'ajoute au menu, elle ne le remplace jamais.
   ========================================================================= */

/* ===========================================================================
   FAMILLE A  -  NAVIGATION ET RECHERCHE
   ======================================================================== */

/* @v PRD-A1
@nom Palette de commandes
@usage Devenue une attente au-dela d'une dizaine de rubriques : au lieu de chercher dans un menu, on tape ce qu'on veut faire. Elle s'ouvre sur Cmd+K, se ferme sur Echap, et se pilote entierement aux fleches.
@large
@html
<div class="pr-palette-scene">
  <div class="modale__voile"></div>
  <div class="pr-palette" role="dialog" aria-modal="true" aria-label="Palette de commandes">
    <div class="pr-palette__saisie">{{icon:loupe}}<input value="dev" placeholder="Rechercher ou taper une commande" autofocus><kbd class="btn__kbd">Echap</kbd></div>
    <div class="pr-palette__liste" role="listbox">
      <div class="pr-palette__groupe">Aller a</div>
      <div class="pr-palette__item is-actif" role="option" aria-selected="true">{{icon:file}}<span>Devis</span><kbd class="btn__kbd">G puis D</kbd></div>
      <div class="pr-palette__item" role="option">{{icon:grille}}<span>Tableau de bord</span><kbd class="btn__kbd">G puis T</kbd></div>
      <div class="pr-palette__groupe">Actions</div>
      <div class="pr-palette__item" role="option">{{icon:plus}}<span>Nouveau devis</span><kbd class="btn__kbd">N</kbd></div>
      <div class="pr-palette__item" role="option">{{icon:download}}<span>Exporter les devis du mois</span></div>
      <div class="pr-palette__groupe">Resultats</div>
      <div class="pr-palette__item" role="option"><span class="pr-palette__ref">2026-103</span><span>Krissi Julien &mdash; devis signe</span></div>
      <div class="pr-palette__item" role="option"><span class="pr-palette__ref">2026-118</span><span>Martin Sophie &mdash; devis envoye</span></div>
    </div>
    <div class="pr-palette__pied">
      <span><kbd class="btn__kbd">Haut</kbd><kbd class="btn__kbd">Bas</kbd> naviguer</span>
      <span><kbd class="btn__kbd">Entree</kbd> ouvrir</span>
      <span><kbd class="btn__kbd">Cmd K</kbd> rouvrir</span>
    </div>
  </div>
</div>
@tw fixed inset-0 grid place-items-start pt-24 + un panneau de 620 px
@end */
.pr-palette-scene {
  position: relative;
  display: grid;
  justify-items: center;
  align-items: start;
  width: 100%;
  min-height: 400px;
  padding: var(--sp-8) var(--sp-5) var(--sp-5);
  border-radius: var(--r-md);
  background: var(--c-surface-3);
  overflow: hidden;
}
.pr-palette {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 580px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--sh-4);
  overflow: hidden;
}
.pr-palette__saisie {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--c-border);
}
.pr-palette__saisie svg { width: 18px; height: 18px; color: var(--c-text-muted); flex: none; }
.pr-palette__saisie input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-ui);
  font-size: var(--fs-lg);
  color: var(--c-text);
  outline: none;
}
.pr-palette__liste { max-height: 260px; overflow-y: auto; padding: var(--sp-2); }
.pr-palette__groupe {
  padding: var(--sp-2) var(--sp-2) 4px;
  font-size: 10px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-text-muted);
}
.pr-palette__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  color: var(--c-text);
  cursor: pointer;
}
.pr-palette__item svg { width: 16px; height: 16px; color: var(--c-text-muted); flex: none; }
.pr-palette__item > span:not(.pr-palette__ref) { flex: 1; }
.pr-palette__item kbd { margin-left: auto; }
.pr-palette__item.is-actif, .pr-palette__item:hover { background: var(--c-primary-soft); }
.pr-palette__item.is-actif svg { color: var(--c-primary); }
.pr-palette__ref { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-text-muted); flex: none; }
.pr-palette__pied {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  border-top: 1px solid var(--c-border);
  background: var(--c-surface-2);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}
.pr-palette__pied span { display: inline-flex; align-items: center; gap: 5px; }
/* @endv */

/* @v PRD-A2
@nom Recherche globale
@usage Differente de la palette : elle cherche dans les DONNEES, pas dans les commandes. Les resultats sont groupes par type et le terme cherche est surligne dans chaque ligne.
@large
@html
<div class="pr-recherche">
  <div class="pr-palette__saisie">{{icon:loupe}}<input value="martin" placeholder="Rechercher"></div>
  <div class="pr-palette__liste">
    <div class="pr-palette__groupe">Clients &mdash; 2</div>
    <div class="pr-palette__item is-actif">{{icon:file}}<span><b>Martin</b> Sophie<small>Colombes (92) &mdash; 3 dossiers</small></span></div>
    <div class="pr-palette__item">{{icon:file}}<span><b>Martin</b>ez Paul<small>Bondy (93) &mdash; 1 dossier</small></span></div>
    <div class="pr-palette__groupe">Devis &mdash; 1</div>
    <div class="pr-palette__item"><span class="pr-palette__ref">2026-118</span><span><b>Martin</b> Sophie &mdash; chauffe-eau<small>1 890,00 EUR &mdash; envoye le 29 aout</small></span></div>
    <div class="pr-palette__groupe">Documents &mdash; 4</div>
    <div class="pr-palette__item">{{icon:f-pdf}}<span>Devis <b>Martin</b>.pdf<small>Dossier 2026-118 &mdash; 248 Ko</small></span></div>
  </div>
</div>
@tw le terme cherche est enveloppe dans <b> cote serveur, pas surligne en CSS
@end */
.pr-recherche { width: 100%; max-width: 580px; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--sh-2); overflow: hidden; }
.pr-recherche .pr-palette__item span { display: flex; flex-direction: column; gap: 1px; }
.pr-recherche small { font-size: var(--fs-xs); color: var(--c-text-muted); font-weight: var(--fw-normal); }
.pr-recherche b { background: var(--c-warn-soft); color: var(--c-text); font-weight: var(--fw-bold); border-radius: 2px; padding: 0 1px; }
/* @endv */

/* @v PRD-A3
@nom Barre laterale a sous-navigation
@usage Le schema dominant en 2026 : une rubrique s'ouvre en sous-menu contextuel plutot qu'en arborescence permanente. Seule la section courante est depliee, le reste reste replie.
@large
@html
<div class="pr-cote-demo">
  <aside class="nav-cote">
    <div class="nav-cote__marque">JABS<span> CRM</span></div>
    <nav>
      <a href="#">{{icon:grille}} Tableau de bord</a>
      <a href="#" aria-current="page">{{icon:file}} Dossiers <b class="btn__badge">24</b></a>
      <div class="pr-sous">
        <a href="#" class="is-actif">En cours <span>12</span></a>
        <a href="#">A relancer <span>5</span></a>
        <a href="#">Signes <span>7</span></a>
        <a href="#">Archives</a>
      </div>
      <a href="#">{{icon:calendar}} Planning</a>
      <a href="#">{{icon:archive}} Documents</a>
    </nav>
    <div class="pr-cote-pied">
      <button class="btn btn--fantome btn--dense">{{icon:liste}} Replier</button>
    </div>
  </aside>
  <div class="pr-cote-demo__zone"><span>Contenu de la page</span></div>
</div>
@tw le sous-menu n'existe que sous la rubrique ouverte, jamais en permanence
@end */
.pr-cote-demo { display: flex; gap: var(--sp-4); width: 100%; align-items: stretch; }
.pr-cote-demo .nav-cote { flex: none; }
.pr-cote-demo__zone {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 280px;
  border: 1px dashed var(--c-border);
  border-radius: var(--r-lg);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}
.pr-sous { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 var(--sp-2); padding-left: var(--sp-6); border-left: 1px solid var(--c-border); margin-left: 16px; }
.pr-sous a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--c-text-soft);
  text-decoration: none;
}
.pr-sous a span { font-size: var(--fs-xs); color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.pr-sous a:hover { background: var(--c-surface-2); color: var(--c-text); }
.pr-sous a.is-actif { background: var(--c-primary-soft); color: var(--c-primary-ink); font-weight: var(--fw-semi); }
.pr-cote-pied { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--c-border); }
/* @endv */

/* @v PRD-A4
@nom Aide aux raccourcis
@usage Ouverte par la touche point d'interrogation. Elle ne remplace pas l'affichage des raccourcis dans les menus : elle sert a les decouvrir, pas a les retenir.
@large
@html
<div class="pr-raccourcis">
  <div class="pr-raccourcis__tete"><h4>Raccourcis clavier</h4><kbd class="btn__kbd">?</kbd></div>
  <div class="pr-raccourcis__cols">
    <div>
      <h5>Naviguer</h5>
      <dl><dt>Palette de commandes</dt><dd><kbd class="btn__kbd">Cmd K</kbd></dd>
          <dt>Rechercher</dt><dd><kbd class="btn__kbd">/</kbd></dd>
          <dt>Aller aux dossiers</dt><dd><kbd class="btn__kbd">G</kbd><kbd class="btn__kbd">D</kbd></dd>
          <dt>Aller au planning</dt><dd><kbd class="btn__kbd">G</kbd><kbd class="btn__kbd">P</kbd></dd></dl>
    </div>
    <div>
      <h5>Agir</h5>
      <dl><dt>Nouveau dossier</dt><dd><kbd class="btn__kbd">N</kbd></dd>
          <dt>Enregistrer</dt><dd><kbd class="btn__kbd">Cmd S</kbd></dd>
          <dt>Tout selectionner</dt><dd><kbd class="btn__kbd">Cmd A</kbd></dd>
          <dt>Annuler</dt><dd><kbd class="btn__kbd">Cmd Z</kbd></dd></dl>
    </div>
  </div>
</div>
@tw grid-cols-2 gap-8, dl en grid-cols-[1fr_auto]
@end */
.pr-raccourcis { width: 100%; max-width: 560px; padding: var(--sp-5); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--sh-3); }
.pr-raccourcis__tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.pr-raccourcis__tete h4 { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.pr-raccourcis__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.pr-raccourcis h5 { margin: 0 0 var(--sp-2); font-size: 10px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .08em; color: var(--c-text-muted); }
.pr-raccourcis dl { display: grid; grid-template-columns: 1fr auto; gap: 7px var(--sp-3); margin: 0; align-items: center; }
.pr-raccourcis dt { font-size: var(--fs-sm); color: var(--c-text-soft); }
.pr-raccourcis dd { margin: 0; display: flex; gap: 3px; }
@media (max-width: 560px) { .pr-raccourcis__cols { grid-template-columns: 1fr; gap: var(--sp-4); } }
/* @endv */

/* ===========================================================================
   FAMILLE B  -  MANIPULATION DES DONNEES
   ======================================================================== */

/* @v PRD-B1
@nom Edition en ligne
@usage Modifier une valeur la ou on la voit, sans ouvrir de formulaire. Trois etats : lecture, edition, enregistrement. L'enregistrement se fait a la sortie du champ, jamais sur un bouton cache.
@large
@html
<div class="tbl__cadre">
  <table class="tbl">
    <thead><tr><th>Reference</th><th>Client</th><th>Statut</th><th class="tbl__nombre">Montant HT</th></tr></thead>
    <tbody>
      <tr><td><code>2026-103</code></td>
        <td><span class="pr-edit">Krissi Julien{{icon:pencil}}</span></td>
        <td><span class="doc-etiq doc-etiq--ok">Signe</span></td>
        <td class="tbl__nombre"><span class="pr-edit">4 000,00{{icon:pencil}}</span></td></tr>
      <tr><td><code>2026-118</code></td>
        <td><span class="pr-edit is-edition"><input class="saisie" value="Martin Sophie"></span></td>
        <td><span class="doc-etiq doc-etiq--attente">Envoye</span></td>
        <td class="tbl__nombre"><span class="pr-edit">1 790,00{{icon:pencil}}</span></td></tr>
      <tr><td><code>2026-121</code></td>
        <td><span class="pr-edit">Durand Paul{{icon:pencil}}</span></td>
        <td><span class="doc-etiq doc-etiq--neutre">Brouillon</span></td>
        <td class="tbl__nombre is-enregistre"><span class="pr-edit">12 400,00</span><em>enregistre</em></td></tr>
    </tbody>
  </table>
</div>
@tw le crayon n'apparait qu'au survol ; le champ prend la place exacte du texte
@end */
.pr-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  margin: -3px -6px;
  border-radius: var(--r-sm);
  cursor: text;
  transition: background-color var(--t-fast);
}
.pr-edit svg { width: 12px; height: 12px; color: var(--c-text-muted); opacity: 0; transition: opacity var(--t-fast); }
.pr-edit:hover { background: var(--c-surface-3); }
.pr-edit:hover svg { opacity: 1; }
.pr-edit.is-edition { padding: 0; margin: 0; background: transparent; }
.pr-edit .saisie { height: 30px; font-size: var(--fs-sm); }
.tbl td.is-enregistre { position: relative; animation: an-surligner 2s ease-out forwards; }
.tbl td.is-enregistre em {
  position: absolute; right: var(--sp-3); top: 50%;
  transform: translateY(-50%);
  font-style: normal; font-size: 10px; font-weight: var(--fw-bold);
  color: var(--c-success);
  animation: pr-effacer 2s ease-out forwards;
}
@keyframes pr-effacer { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
/* @endv */

/* @v PRD-B2
@nom Filtres a facettes
@usage Chaque critere affiche le NOMBRE de resultats qu'il donnerait. Sans ce compte, l'utilisateur applique des filtres a l'aveugle et tombe sur une liste vide.
@large
@html
<div class="pr-facettes">
  <aside>
    <div class="pr-facette">
      <h5>Statut</h5>
      <label class="coche"><input type="checkbox" checked><span class="coche__boite"></span> Signe <b>7</b></label>
      <label class="coche"><input type="checkbox" checked><span class="coche__boite"></span> Envoye <b>12</b></label>
      <label class="coche"><input type="checkbox"><span class="coche__boite"></span> Brouillon <b>5</b></label>
      <label class="coche pr-facette--vide"><input type="checkbox" disabled><span class="coche__boite"></span> Refuse <b>0</b></label>
    </div>
    <div class="pr-facette">
      <h5>Operation</h5>
      <label class="coche"><input type="checkbox"><span class="coche__boite"></span> Pompe a chaleur <b>14</b></label>
      <label class="coche"><input type="checkbox"><span class="coche__boite"></span> Chauffe-eau <b>6</b></label>
      <label class="coche"><input type="checkbox"><span class="coche__boite"></span> Isolation <b>4</b></label>
    </div>
    <div class="pr-facette">
      <h5>Montant</h5>
      <input class="saisie-curseur" type="range" min="0" max="20000" value="14000">
      <span class="champ__bornes"><span>0 EUR</span><span>14 000 EUR</span></span>
    </div>
  </aside>
  <div>
    <div class="doc-filtres__actifs" style="margin-bottom:12px">
      <span class="btn-etiquette btn-etiquette--accent">Signe <button aria-label="Retirer">{{icon:x}}</button></span>
      <span class="btn-etiquette btn-etiquette--accent">Envoye <button aria-label="Retirer">{{icon:x}}</button></span>
      <button class="btn btn--texte btn--dense">Tout effacer</button>
      <span class="cat-head__spacer"></span>
      <span class="tbl-outils__compte">19 dossiers</span>
    </div>
    <ul class="liste">
      <li><a href="#"><span class="liste__bloc"><strong>Krissi Julien</strong><small>2026-103 &mdash; PAC air/eau</small></span><strong>4 280 EUR</strong></a></li>
      <li><a href="#"><span class="liste__bloc"><strong>Martin Sophie</strong><small>2026-118 &mdash; chauffe-eau</small></span><strong>1 890 EUR</strong></a></li>
      <li><a href="#"><span class="liste__bloc"><strong>Lefevre Marc</strong><small>2026-092 &mdash; chaudiere</small></span><strong>3 950 EUR</strong></a></li>
    </ul>
  </div>
</div>
@tw grid grid-cols-[220px_1fr] gap-6, chaque facette porte son compte
@end */
.pr-facettes { display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-6); width: 100%; align-items: start; }
.pr-facette { padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--c-border); }
.pr-facette:last-child { border-bottom: none; }
.pr-facette h5 { margin: 0 0 var(--sp-2); font-size: 10px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .08em; color: var(--c-text-muted); }
.pr-facette .coche { display: flex; width: 100%; padding: 4px 0; font-size: var(--fs-sm); }
.pr-facette .coche b { margin-left: auto; font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.pr-facette--vide { opacity: .42; }
@media (max-width: 700px) { .pr-facettes { grid-template-columns: 1fr; } }
/* @endv */

/* @v PRD-B3
@nom Vues enregistrees
@usage Un jeu de filtres nomme et reutilisable. C'est ce qui evite de reconstruire le meme filtre chaque matin, et ce qui permet de le partager avec l'equipe.
@large
@html
<div class="pr-vues">
  <button class="pr-vue is-actif">Mes dossiers <span>12</span></button>
  <button class="pr-vue">A relancer <span>5</span></button>
  <button class="pr-vue">Poses de la semaine <span>3</span></button>
  <button class="pr-vue pr-vue--partage">Equipe Nord <span>8</span>{{icon:liste}}</button>
  <button class="pr-vue pr-vue--neuf">{{icon:plus}} Enregistrer la vue courante</button>
</div>
@tw les vues partagees portent un marqueur : on doit savoir si l'on modifie pour soi ou pour tous
@end */
.pr-vues { display: flex; flex-wrap: wrap; gap: var(--sp-2); width: 100%; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-border); }
.pr-vue {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  background: var(--c-surface);
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--c-text-soft);
  cursor: pointer;
}
.pr-vue span { font-size: var(--fs-xs); color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.pr-vue svg { width: 13px; height: 13px; }
.pr-vue:hover { border-color: var(--c-border-strong); color: var(--c-text); }
.pr-vue.is-actif { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-primary-text); font-weight: var(--fw-semi); }
.pr-vue.is-actif span { color: rgba(255,255,255,.75); }
.pr-vue--partage svg { color: var(--c-info); }
.pr-vue--neuf { border-style: dashed; color: var(--c-text-muted); }
/* @endv */

/* @v PRD-B4
@nom Actions de masse
@usage La barre n'apparait qu'a la premiere case cochee. Elle rappelle le nombre exact, distingue « tout ce qui est visible » de « tout ce qui existe », et propose d'annuler apres coup.
@large
@html
<div class="pr-masse">
  <div class="pr-masse__avis">4 lignes selectionnees sur cette page. <button class="btn btn--texte btn--dense">Selectionner les 24 dossiers du filtre</button></div>
  <div class="doc-selection">
    <button class="btn btn--icone btn--fantome btn--sm" aria-label="Annuler la selection">{{icon:x}}</button>
    <strong>4 dossiers</strong>
    <span class="btn-barre__sep"></span>
    <button class="btn btn--fantome btn--dense">{{icon:download}} Exporter</button>
    <button class="btn btn--fantome btn--dense">{{icon:dossier}} Deplacer</button>
    <button class="btn btn--fantome btn--dense">{{icon:mail}} Relancer</button>
    <span class="btn-barre__sep"></span>
    <button class="btn btn--fantome btn--dense doc-selection__danger">{{icon:trash}} Supprimer</button>
  </div>
  <div class="toast">{{icon:check}}<span>4 dossiers deplaces vers Archives</span><button class="btn btn--texte btn--dense">Annuler</button></div>
</div>
@tw la barre est en position fixe en bas, le message d'annulation la remplace
@end */
.pr-masse { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); width: 100%; }
.pr-masse__avis {
  width: 100%;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--c-primary-soft);
  color: var(--c-primary-ink);
  font-size: var(--fs-sm);
  text-align: center;
}
/* @endv */

/* @v PRD-B5
@nom Tableau kanban
@usage Le meme jeu de donnees, vu par etape. Chaque colonne affiche son compte et son total : sans eux, on ne sait pas si une colonne qui deborde est un probleme ou la normale.
@large
@html
<div class="pr-kanban">
  <div class="pr-col">
    <div class="pr-col__tete"><h5>Devis envoyes</h5><span>3 &mdash; 12 920 EUR</span></div>
    <article class="pr-carte"><b>2026-118</b><strong>Martin Sophie</strong><small>Colombes &mdash; chauffe-eau</small><span class="pr-carte__pied"><em>1 890 EUR</em><i class="personne__avatar">MS</i></span></article>
    <article class="pr-carte"><b>2026-121</b><strong>Durand Paul</strong><small>Le Raincy &mdash; isolation</small><span class="pr-carte__pied"><em>12 400 EUR</em><i class="personne__avatar">DP</i></span></article>
    <article class="pr-carte pr-carte--alerte"><b>2026-097</b><strong>Bernard Alice</strong><small>Gagny &mdash; sans reponse depuis 14 j</small><span class="pr-carte__pied"><em>6 750 EUR</em><i class="personne__avatar">BA</i></span></article>
  </div>
  <div class="pr-col">
    <div class="pr-col__tete"><h5>Signes</h5><span>2 &mdash; 8 230 EUR</span></div>
    <article class="pr-carte"><b>2026-103</b><strong>Krissi Julien</strong><small>Neuilly &mdash; PAC air/eau</small><span class="pr-carte__pied"><em>4 280 EUR</em><i class="personne__avatar">JK</i></span></article>
    <div class="pr-depose">Deposer ici</div>
  </div>
  <div class="pr-col">
    <div class="pr-col__tete"><h5>En pose</h5><span>1 &mdash; 3 950 EUR</span></div>
    <article class="pr-carte pr-carte--attrapee"><b>2026-092</b><strong>Lefevre Marc</strong><small>Chelles &mdash; chaudiere</small><span class="pr-carte__pied"><em>3 950 EUR</em><i class="personne__avatar">LM</i></span></article>
  </div>
</div>
@tw flex gap-3 overflow-x-auto, chaque colonne en flex-col avec un compte en tete
@end */
.pr-kanban { display: flex; gap: var(--sp-3); width: 100%; overflow-x: auto; padding-bottom: var(--sp-2); }
.pr-col { flex: none; width: 250px; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-lg); background: var(--c-surface-2); }
.pr-col__tete { display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--sp-2); }
.pr-col__tete h5 { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--c-text); }
.pr-col__tete span { font-size: var(--fs-xs); color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.pr-carte {
  display: flex; flex-direction: column; gap: 3px;
  padding: var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  cursor: grab;
  box-shadow: var(--sh-1);
  transition: box-shadow var(--t-fast), transform var(--t-fast);
}
.pr-carte:hover { box-shadow: var(--sh-2); }
.pr-carte b { font-family: var(--font-mono); font-size: 10.5px; color: var(--c-text-muted); }
.pr-carte strong { font-size: var(--fs-md); font-weight: var(--fw-semi); }
.pr-carte small { font-size: var(--fs-xs); color: var(--c-text-muted); line-height: 1.35; }
.pr-carte__pied { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-2); }
.pr-carte__pied em { font-style: normal; font-size: var(--fs-sm); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.pr-carte__pied .personne__avatar { width: 24px; height: 24px; font-size: 9.5px; }
.pr-carte--alerte { border-left: 3px solid var(--c-danger); }
.pr-carte--alerte small { color: var(--c-danger); font-weight: var(--fw-semi); }
.pr-carte--attrapee { transform: rotate(2deg) scale(1.02); box-shadow: var(--sh-4); cursor: grabbing; }
.pr-depose {
  display: grid; place-items: center;
  min-height: 66px;
  border: 2px dashed var(--c-primary);
  border-radius: var(--r-md);
  background: var(--c-primary-soft);
  color: var(--c-primary-ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
}
/* @endv */

/* @v PRD-B6
@nom Tri sur plusieurs colonnes
@usage Trier par statut PUIS par montant. L'ordre des criteres est visible et reordonnable : sans cela, personne ne comprend pourquoi la liste est dans cet ordre.
@large
@html
<div class="pr-tri">
  <div class="pr-tri__tete"><h5>Trier par</h5><button class="btn btn--texte btn--dense">Reinitialiser</button></div>
  <div class="pr-tri__ligne"><span class="liste__poignee">{{icon:liste}}</span><b>1</b><span>Statut</span><div class="btn-segmente"><button class="btn is-actif">A &rarr; Z</button><button class="btn">Z &rarr; A</button></div><button class="btn btn--icone btn--fantome btn--sm" aria-label="Retirer">{{icon:x}}</button></div>
  <div class="pr-tri__ligne"><span class="liste__poignee">{{icon:liste}}</span><b>2</b><span>Montant</span><div class="btn-segmente"><button class="btn">Croissant</button><button class="btn is-actif">Decroissant</button></div><button class="btn btn--icone btn--fantome btn--sm" aria-label="Retirer">{{icon:x}}</button></div>
  <button class="btn btn--pointille btn--dense" style="width:100%">{{icon:plus}} Ajouter un critere</button>
</div>
@tw chaque critere est une ligne deplacable, numerotee dans l'ordre d'application
@end */
.pr-tri { width: 100%; max-width: 520px; padding: var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--sh-2); }
.pr-tri__tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.pr-tri__tete h5 { margin: 0; font-size: 10px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .08em; color: var(--c-text-muted); }
.pr-tri__ligne { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.pr-tri__ligne b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: none;
  border-radius: var(--r-full);
  background: var(--c-surface-3);
  font-size: 10px; font-weight: var(--fw-bold);
  color: var(--c-text-soft);
}
.pr-tri__ligne > span:not(.liste__poignee) { flex: 1; font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.pr-tri__ligne .btn-segmente > .btn { height: 26px; padding: 0 var(--sp-2); font-size: 11px; }
/* @endv */

/* ===========================================================================
   FAMILLE C  -  ACCOMPAGNEMENT
   ======================================================================== */

/* @v PRD-C1
@nom Visite guidee
@usage Trois etapes maximum, et une sortie visible a chaque etape. Une visite qu'on ne peut pas quitter est vecue comme une prise d'otage, pas comme une aide.
@large
@html
<div class="pr-visite-scene">
  <div class="pr-visite__cible">{{icon:plus}} Nouveau dossier</div>
  <div class="pr-visite">
    <div class="pr-visite__tete"><span>2 sur 3</span><button class="btn btn--fermer" aria-label="Quitter la visite">{{icon:x}}</button></div>
    <strong>Creez votre premier dossier</strong>
    <p>Tout part d'ici : le client, le chantier, l'operation. Le devis se genere ensuite en deux clics.</p>
    <div class="pr-visite__pied">
      <span class="pr-visite__points"><i></i><i class="c"></i><i></i></span>
      <span><button class="btn btn--fantome btn--sm">Precedent</button><button class="btn btn--plein btn--sm">Suivant</button></span>
    </div>
  </div>
</div>
@tw un panneau ancre a l'element cible, avec fleche et compteur d'etapes
@end */
.pr-visite-scene { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); width: 100%; padding: var(--sp-6); border-radius: var(--r-md); background: var(--c-surface-2); }
.pr-visite__cible {
  display: inline-flex; align-items: center; gap: 7px;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--c-primary);
  color: var(--c-primary-text);
  font-size: var(--fs-sm); font-weight: var(--fw-semi);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primary) 26%, transparent);
}
.pr-visite__cible svg { width: 15px; height: 15px; }
.pr-visite {
  position: relative;
  width: 100%; max-width: 320px;
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--sh-4);
}
/* La fleche pointe vers la cible : sans elle, le panneau flotte sans lien. */
.pr-visite::before {
  content: "";
  position: absolute;
  top: -7px; left: 50%;
  margin-left: -7px;
  border: 7px solid transparent;
  border-top: none;
  border-bottom-color: var(--c-surface);
}
.pr-visite__tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.pr-visite__tete span { font-size: 10px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .08em; color: var(--c-text-muted); }
.pr-visite strong { display: block; font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.pr-visite p { margin: 5px 0 var(--sp-4); font-size: var(--fs-sm); color: var(--c-text-soft); line-height: 1.5; }
.pr-visite__pied { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.pr-visite__pied > span:last-child { display: flex; gap: var(--sp-2); }
.pr-visite__points { display: flex; gap: 5px; }
.pr-visite__points i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-border-strong); }
.pr-visite__points i.c { background: var(--c-primary); width: 18px; border-radius: 3px; }
/* @endv */

/* @v PRD-C2
@nom Liste de demarrage
@usage Les premieres actions a accomplir, avec la progression. Elle disparait definitivement une fois terminee : une liste completee qui reste affichee devient un reproche.
@large
@html
<div class="pr-demarrage">
  <div class="pr-demarrage__tete">
    <div><strong>Prise en main</strong><small>3 etapes sur 5 &mdash; environ 4 minutes</small></div>
    <button class="btn btn--fantome btn--sm">Masquer</button>
  </div>
  <div class="stat__jauge"><span style="--p:60%"></span></div>
  <ul>
    <li class="f">{{icon:check}}<span>Completer les informations de la societe</span></li>
    <li class="f">{{icon:check}}<span>Ajouter votre logo</span></li>
    <li class="f">{{icon:check}}<span>Creer un premier client</span></li>
    <li class="c"><i>4</i><span>Emettre un devis</span><button class="btn btn--plein btn--dense">Commencer</button></li>
    <li><i>5</i><span>Inviter un collaborateur</span></li>
  </ul>
</div>
@tw les etapes faites restent visibles et cochees : c'est la preuve du chemin parcouru
@end */
.pr-demarrage { width: 100%; max-width: 480px; padding: var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--sh-2); }
.pr-demarrage__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.pr-demarrage strong { display: block; font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.pr-demarrage small { font-size: var(--fs-xs); color: var(--c-text-muted); }
.pr-demarrage ul { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pr-demarrage li {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}
.pr-demarrage li > span { flex: 1; }
.pr-demarrage li svg, .pr-demarrage li i {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: none;
  border-radius: 50%;
  background: var(--c-surface-3);
  color: var(--c-text-muted);
  font-style: normal; font-size: 10px; font-weight: var(--fw-bold);
}
.pr-demarrage li svg { padding: 5px; }
.pr-demarrage li.f svg { background: var(--c-success); color: #fff; }
.pr-demarrage li.f span { color: var(--c-text-muted); text-decoration: line-through; text-decoration-color: var(--c-border-strong); }
.pr-demarrage li.c { background: var(--c-primary-soft); }
.pr-demarrage li.c i { background: var(--c-primary); color: var(--c-primary-text); }
/* @endv */

/* @v PRD-C3
@nom Annonce de nouveaute
@usage Ce qui a change depuis la derniere connexion. Datee, courte, et fermable definitivement : une pastille rouge qui ne part jamais finit par etre ignoree.
@large
@html
<div class="pr-nouveau">
  <div class="pr-nouveau__tete"><strong>Nouveautes</strong><button class="btn btn--fermer" aria-label="Fermer">{{icon:x}}</button></div>
  <article><span class="doc-etiq doc-etiq--ok">Nouveau</span><div><strong>Relances automatiques</strong><p>Un courriel part seul 7 jours apres l'envoi d'un devis reste sans reponse.</p><small>6 septembre</small></div></article>
  <article><span class="doc-etiq doc-etiq--neutre">Ameliore</span><div><strong>Export Excel plus rapide</strong><p>Les exports de plus de 500 lignes passent de 40 a 4 secondes.</p><small>2 septembre</small></div></article>
  <article><span class="doc-etiq doc-etiq--attente">Corrige</span><div><strong>Dates au format francais</strong><p>Les dates saisies avec des barres obliques ne s'inversent plus.</p><small>29 aout</small></div></article>
</div>
@tw trois categories seulement : nouveau, ameliore, corrige
@end */
.pr-nouveau { width: 100%; max-width: 420px; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--sh-3); overflow: hidden; }
.pr-nouveau__tete { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-border); }
.pr-nouveau__tete strong { font-size: var(--fs-md); font-weight: var(--fw-bold); }
.pr-nouveau article { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-border); }
.pr-nouveau article:last-child { border-bottom: none; }
.pr-nouveau article .doc-etiq { flex: none; height: fit-content; }
.pr-nouveau article strong { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semi); }
.pr-nouveau article p { margin: 3px 0; font-size: var(--fs-xs); color: var(--c-text-soft); line-height: 1.5; }
.pr-nouveau article small { font-size: 10.5px; color: var(--c-text-muted); }
/* @endv */

/* @v PRD-C4
@nom Fil d'activite
@usage Qui a fait quoi, dans l'ordre. Utile a plusieurs, inutile seul : ne l'afficher que si l'equipe compte au moins deux personnes.
@large
@html
<div class="pr-activite">
  <div class="pr-activite__jour">Aujourd'hui</div>
  <div class="pr-act"><span class="personne__avatar">SM</span><div><p><b>Sophie M.</b> a change le statut de <a href="#">2026-103</a> de <em>Envoye</em> a <em>Signe</em></p><small>14:32</small></div></div>
  <div class="pr-act"><span class="personne__avatar personne__avatar--vert">JK</span><div><p><b>Julien K.</b> a ajoute 4 photos au dossier <a href="#">2026-118</a></p><small>11:05</small><div class="pr-act__apercu"><i></i><i></i><i></i><i></i></div></div></div>
  <div class="pr-act"><span class="personne__avatar">SM</span><div><p><b>Sophie M.</b> a commente : &laquo; Prevoir une rehausse pour l'unite exterieure &raquo;</p><small>09:47</small></div></div>
  <div class="pr-activite__jour">Hier</div>
  <div class="pr-act"><span class="personne__avatar personne__avatar--vert">JK</span><div><p><b>Julien K.</b> a cree le dossier <a href="#">2026-121</a></p><small>17:48</small></div></div>
</div>
@tw le changement de valeur est montre en clair : de X a Y, pas « a modifie »
@end */
.pr-activite { width: 100%; max-width: 540px; }
.pr-activite__jour {
  position: sticky; top: 0; z-index: 2;
  padding: var(--sp-2) 0;
  background: var(--c-bg);
  font-size: 10px; font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-text-muted);
}
.pr-act { display: flex; gap: var(--sp-3); padding: var(--sp-3) 0; }
.pr-act .personne__avatar { width: 30px; height: 30px; font-size: 10.5px; flex: none; }
.pr-act p { margin: 0; font-size: var(--fs-sm); color: var(--c-text-soft); line-height: 1.5; }
.pr-act b { color: var(--c-text); font-weight: var(--fw-semi); }
.pr-act em { font-style: normal; padding: 1px 6px; border-radius: var(--r-xs); background: var(--c-surface-3); color: var(--c-text); font-size: var(--fs-xs); font-weight: var(--fw-semi); }
.pr-act a { color: var(--c-primary-ink); font-weight: var(--fw-semi); text-decoration: none; }
.pr-act small { display: block; margin-top: 2px; font-size: 10.5px; color: var(--c-text-muted); }
.pr-act__apercu { display: flex; gap: 5px; margin-top: var(--sp-2); }
.pr-act__apercu i { width: 36px; height: 28px; border-radius: var(--r-xs); background: linear-gradient(140deg, #4a6fa5, #c9d9e8); }
.pr-act__apercu i:nth-child(2) { background: linear-gradient(140deg, #a8643c, #f0d9b5); }
.pr-act__apercu i:nth-child(3) { background: linear-gradient(140deg, #3d6b4f, #c3ddc9); }
.pr-act__apercu i:nth-child(4) { background: linear-gradient(140deg, #6b4a72, #ddc9dc); }
/* @endv */