/* ============================================================================
   BIBLIOTHEQUE UI JABS  -  states.css
   Depend de : theme.css, buttons.css, documents.css (pour .doc-squelette)

   Les ecrans que personne ne dessine et que tout le monde voit.
   Trois regles tenues partout :
   1. Un etat vide dit ce qui manque, pourquoi c'est utile, et porte le bouton
      qui debloque. Sans bouton, c'est un cul-de-sac.
   2. Un squelette a exactement la forme du contenu attendu, sinon la page
      saute a l'arrivee des donnees.
   3. Une erreur distingue ce que l'utilisateur peut corriger de ce qui releve
      du serveur : les deux n'appellent pas la meme suite.
   ========================================================================= */

.etat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-10) var(--sp-6);
  text-align: center;
}
.etat__illu { width: 92px; height: 92px; color: var(--c-text-muted); opacity: .55; }
.etat h3 { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--c-text); }
.etat p  { margin: 0; max-width: 44ch; font-size: var(--fs-md); color: var(--c-text-soft); line-height: 1.6; }
.etat__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-2); }

/* ===========================================================================
   FAMILLE A  -  ETATS VIDES
   ======================================================================== */

/* @v EMP-A1
@nom Premiere utilisation
@usage L'ecran d'un utilisateur qui n'a encore rien cree. C'est une page d'accueil deguisee : elle vend la fonction avant de la proposer.
@html
<div class="etat">
  <svg class="etat__illu" viewBox="0 0 96 96" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
    <rect x="18" y="14" width="60" height="72" rx="6"/><path d="M32 34h32M32 48h32M32 62h20"/>
    <circle cx="72" cy="68" r="16" fill="var(--c-surface)"/><path d="M72 61v14M65 68h14"/>
  </svg>
  <h3>Creez votre premier devis</h3>
  <p>Un devis se remplit en 2 minutes : le client, les operations, le montant. Le PDF est genere et envoye par courriel dans la foulee.</p>
  <div class="etat__actions">
    <button class="btn btn--plein btn--lg">{{icon:plus}} Nouveau devis</button>
    <button class="btn btn--secondaire btn--lg">Voir un exemple</button>
  </div>
</div>
@tw flex flex-col items-center gap-3 py-16 text-center
@end */
/* voir le socle .etat en haut du fichier */
/* @endv */

/* @v EMP-A2
@nom Liste vide apres filtrage
@usage Different de EMP-A1 : ici il existe des donnees, ce sont les criteres qui ne rendent rien. Le bouton efface les filtres, il ne cree pas.
@html
<div class="etat">
  {{icon:loupe}}
  <h3>Aucun dossier ne correspond</h3>
  <p>Aucun resultat pour <em>&laquo; martin &raquo;</em> avec les filtres <em>Signes</em> et <em>Septembre 2026</em>.</p>
  <div class="etat__actions">
    <button class="btn btn--secondaire">Effacer les filtres</button>
    <button class="btn btn--fantome">Chercher dans les archives</button>
  </div>
</div>
@tw idem A1, message centre sur les criteres et non sur l'absence de donnees
@end */
.etat > svg:not(.etat__illu) { width: 42px; height: 42px; color: var(--c-text-muted); opacity: .6; }
.etat em { font-style: normal; font-weight: var(--fw-semi); color: var(--c-text); }
/* @endv */

/* @v EMP-A3
@nom Etat vide compact
@usage Dans un panneau ou une colonne : la version pleine page ecraserait tout. Une phrase, un lien, rien de plus.
@html
<div class="demo-col demo-col--large">
  <div class="carte"><div class="etat etat--compact">{{icon:archive}}<p>Aucun document dans ce dossier.</p><button class="btn btn--texte">Ajouter un document</button></div></div>
  <div class="carte"><div class="etat etat--compact">{{icon:calendar}}<p>Aucune intervention planifiee.</p><button class="btn btn--texte">Planifier</button></div></div>
</div>
@tw gap-2 py-8 [&_svg]:h-8 [&_p]:text-sm
@end */
.etat--compact { padding: var(--sp-6) var(--sp-4); gap: var(--sp-2); }
.etat--compact > svg { width: 30px; height: 30px; }
.etat--compact p { font-size: var(--fs-sm); }
/* @endv */

/* @v EMP-A4
@nom Etat vide avec liste d'amorce
@usage Plutot qu'une page nue, proposer des modeles a partir desquels demarrer. C'est ce qui transforme un ecran vide en premier pas.
@html
<div class="etat">
  <h3>Commencez a partir d'un modele</h3>
  <p>Choisissez une trame, puis adaptez les lignes a votre chantier.</p>
  <div class="etat__amorces">
    <button class="btn btn--pointille">{{icon:file}} Pompe a chaleur air/eau</button>
    <button class="btn btn--pointille">{{icon:file}} Chauffe-eau thermodynamique</button>
    <button class="btn btn--pointille">{{icon:file}} Isolation des combles</button>
    <button class="btn btn--pointille">{{icon:plus}} Partir d'un devis vierge</button>
  </div>
</div>
@tw flex flex-wrap justify-center gap-2
@end */
.etat__amorces { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-3); max-width: 520px; }
/* @endv */

/* @v EMP-A5
@nom Acces refuse
@usage Droits insuffisants. Nommer QUI peut debloquer, sinon l'utilisateur ecrit au support pour rien.
@html
<div class="etat">
  {{icon:alerte}}
  <h3>Cette rubrique ne vous est pas ouverte</h3>
  <p>L'acces a la facturation est reserve aux administrateurs. Demandez a <strong>Julien K.</strong> de modifier vos droits dans Parametres, Utilisateurs.</p>
  <div class="etat__actions"><button class="btn btn--secondaire">Revenir au tableau de bord</button></div>
</div>
@tw idem A1, en nommant la personne qui peut debloquer
@end */
/* @endv */

/* ===========================================================================
   FAMILLE B  -  CHARGEMENT
   ======================================================================== */

/* @v EMP-B1
@nom Squelette de liste
@usage Le squelette reprend le gabarit reel : avatar rond, deux lignes de texte, une valeur a droite. Toute autre forme fait sauter la page.
@html
<ul class="liste">
  <li><div class="squel-ligne">
    <span class="doc-squelette squel-rond"></span>
    <span class="squel-bloc"><span class="doc-squelette doc-squelette--ligne" style="width:45%;height:14px"></span><span class="doc-squelette doc-squelette--ligne" style="width:65%;height:10px"></span></span>
    <span class="doc-squelette doc-squelette--ligne" style="width:70px;height:14px"></span>
  </div></li>
  <li><div class="squel-ligne">
    <span class="doc-squelette squel-rond"></span>
    <span class="squel-bloc"><span class="doc-squelette doc-squelette--ligne" style="width:38%;height:14px"></span><span class="doc-squelette doc-squelette--ligne" style="width:55%;height:10px"></span></span>
    <span class="doc-squelette doc-squelette--ligne" style="width:70px;height:14px"></span>
  </div></li>
</ul>
@tw animate-pulse (voir .doc-squelette dans documents.css)
@end */
.squel-ligne { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); }
.squel-rond { width: 40px; height: 40px; flex: none; border-radius: 50%; }
.squel-bloc { display: flex; flex-direction: column; gap: 7px; flex: 1; }
/* @endv */

/* @v EMP-B2
@nom Squelette de tableau
@usage Meme nombre de colonnes que le tableau reel, largeurs variees pour ne pas donner l'impression d'une grille figee.
@html
<div class="tbl__cadre">
  <table class="tbl">
    <thead><tr><th>Reference</th><th>Client</th><th>Statut</th><th class="tbl__nombre">Montant</th></tr></thead>
    <tbody>
      <tr><td><span class="doc-squelette doc-squelette--ligne" style="width:70px"></span></td><td><span class="doc-squelette doc-squelette--ligne" style="width:120px"></span></td><td><span class="doc-squelette doc-squelette--ligne" style="width:60px"></span></td><td><span class="doc-squelette doc-squelette--ligne" style="width:80px"></span></td></tr>
      <tr><td><span class="doc-squelette doc-squelette--ligne" style="width:70px"></span></td><td><span class="doc-squelette doc-squelette--ligne" style="width:90px"></span></td><td><span class="doc-squelette doc-squelette--ligne" style="width:70px"></span></td><td><span class="doc-squelette doc-squelette--ligne" style="width:60px"></span></td></tr>
      <tr><td><span class="doc-squelette doc-squelette--ligne" style="width:70px"></span></td><td><span class="doc-squelette doc-squelette--ligne" style="width:140px"></span></td><td><span class="doc-squelette doc-squelette--ligne" style="width:55px"></span></td><td><span class="doc-squelette doc-squelette--ligne" style="width:90px"></span></td></tr>
    </tbody>
  </table>
</div>
@tw [&_td_span]:block [&_td_span]:h-3 [&_td_span]:animate-pulse [&_td_span]:rounded
@end */
/* @endv */

/* @v EMP-B3
@nom Chargement de page
@usage Quand le squelette n'est pas possible (premiere ouverture, gabarit inconnu). Le texte dit ce qui charge : « chargement » seul inquiete au-dela de 3 secondes.
@html
<div class="etat">
  <span class="btn__spin etat__spin"></span>
  <p>Chargement des 24 dossiers...</p>
</div>
@tw flex flex-col items-center gap-4 py-20
@end */
.etat__spin {
  width: 34px; height: 34px;
  border-width: 3px;
  border-color: color-mix(in srgb, var(--c-primary) 25%, transparent);
  border-top-color: var(--c-primary);
}
/* @endv */

/* @v EMP-B4
@nom Chargement d'une portion
@usage Un bloc se recharge sans bloquer le reste : le contenu reste lisible sous un voile, ce qui evite le clignotement a chaque filtre applique.
@html
<div class="voile-charge">
  <ul class="liste">
    <li><a href="#"><span class="liste__bloc"><strong>Krissi Julien</strong><small>Neuilly-sur-Marne (93)</small></span><strong>4 280 EUR</strong></a></li>
    <li><a href="#"><span class="liste__bloc"><strong>Martin Sophie</strong><small>Colombes (92)</small></span><strong>1 890 EUR</strong></a></li>
  </ul>
  <div class="voile-charge__voile"><span class="btn__spin etat__spin"></span></div>
</div>
@tw relative [&>div]:absolute [&>div]:inset-0 [&>div]:grid [&>div]:place-items-center [&>div]:bg-white/65
@end */
.voile-charge { position: relative; width: 100%; }
.voile-charge__voile {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--c-surface) 62%, transparent);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}
/* @endv */

/* @v EMP-B5
@nom Chargement progressif
@usage Longue liste : les elements suivants se chargent en approchant du bas. Le bouton de repli reste present, le defilement infini seul pieges les lecteurs d'ecran.
@html
<div class="demo-col demo-col--large">
  <ul class="liste">
    <li><a href="#"><span class="liste__bloc"><strong>Dossier 2026-118</strong><small>Colombes (92)</small></span></a></li>
    <li><a href="#"><span class="liste__bloc"><strong>Dossier 2026-121</strong><small>Le Raincy (93)</small></span></a></li>
  </ul>
  <div class="charge-plus">
    <span class="doc-squelette doc-squelette--ligne" style="height:44px"></span>
    <button class="btn btn--secondaire btn--bloc">Charger 10 dossiers de plus</button>
    <small>10 sur 24 affiches</small>
  </div>
</div>
@tw flex flex-col items-center gap-3
@end */
.charge-plus { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); width: 100%; }
.charge-plus small { font-size: var(--fs-xs); color: var(--c-text-muted); }
/* @endv */

/* ===========================================================================
   FAMILLE C  -  ERREURS
   ======================================================================== */

/* @v EMP-C1
@nom Page introuvable
@usage Erreur 404. Ne jamais laisser sur une impasse : proposer la recherche et le retour a l'accueil, pas seulement un numero.
@html
<div class="etat">
  <span class="etat__code">404</span>
  <h3>Cette page n'existe pas</h3>
  <p>Le lien est peut-etre obsolete, ou le dossier a ete supprime.</p>
  <div class="etat__actions">
    <button class="btn btn--plein">Revenir a l'accueil</button>
    <button class="btn btn--secondaire">{{icon:loupe}} Rechercher</button>
  </div>
</div>
@tw text-8xl font-black tracking-tighter text-slate-200
@end */
.etat__code {
  font-size: 76px;
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--c-surface-3);
}
/* @endv */

/* @v EMP-C2
@nom Erreur serveur
@usage Erreur 500 : rien n'est de la faute de l'utilisateur, le dire. La reference d'incident sert au support, elle est copiable en un clic.
@html
<div class="etat">
  {{icon:alerte}}
  <h3>Un incident est survenu de notre cote</h3>
  <p>Vos donnees n'ont pas ete perdues. Reessayez dans quelques instants ; si le probleme persiste, transmettez cette reference au support.</p>
  <div class="btn-copier"><code>INC-2026-09-06-8F3A</code><button class="btn btn--icone btn--fantome btn--sm" aria-label="Copier la reference">{{icon:copy}}</button></div>
  <div class="etat__actions">
    <button class="btn btn--plein">Reessayer</button>
    <a href="#" class="btn btn--secondaire">Contacter le support</a>
  </div>
</div>
@tw idem, avec la reference d'incident copiable
@end */
/* @endv */

/* @v EMP-C3
@nom Hors connexion
@usage Perte de reseau sur mobile. Dire ce qui reste consultable hors ligne evite la fermeture de l'application.
@html
<div class="etat">
  {{icon:alerte}}
  <h3>Pas de connexion</h3>
  <p>Les 12 dossiers deja ouverts restent consultables. Les modifications seront envoyees des le retour du reseau.</p>
  <div class="etat__actions"><button class="btn btn--secondaire">Reessayer</button></div>
</div>
@tw idem, en precisant ce qui reste disponible hors ligne
@end */
/* @endv */

/* @v EMP-C4
@nom Erreur en ligne
@usage Un bloc de la page a echoue sans casser le reste. Le reste de l'ecran continue de fonctionner, seul le bloc propose de recharger.
@html
<div class="carte">
  <div class="carte__corps">
    <div class="etat etat--compact">
      {{icon:alerte}}
      <p>Les statistiques n'ont pas pu etre chargees.</p>
      <button class="btn btn--secondaire btn--sm">{{icon:rotation}} Recharger ce bloc</button>
    </div>
  </div>
</div>
@tw grid place-items-center gap-2 py-8 text-center
@end */
/* @endv */

/* @v EMP-C5
@nom Conflit de version
@usage Deux personnes ont modifie la meme fiche. Ne jamais choisir a la place de l'utilisateur : montrer les deux versions et laisser trancher.
@html
<div class="alerte alerte--attention alerte--actions">
  {{icon:alerte}}
  <div>
    <strong>Ce dossier a ete modifie pendant votre saisie</strong>
    <p>Sophie M. a change le montant il y a 2 minutes. Votre version indique <strong>4 280 EUR</strong>, la sienne <strong>4 520 EUR</strong>.</p>
    <div class="alerte__boutons">
      <button class="btn btn--plein btn--sm">Garder ma version</button>
      <button class="btn btn--secondaire btn--sm">Reprendre la sienne</button>
      <button class="btn btn--fantome btn--sm">Comparer</button>
    </div>
  </div>
</div>
@tw idem FBK-A2, avec les deux valeurs affichees cote a cote
@end */
/* @endv */