/* ============================================================================
   BIBLIOTHEQUE UI JABS  -  feedback.css
   Depend de : theme.css, buttons.css

   Tout retour utilisateur repond a deux questions : que s'est-il passe, et
   que puis-je faire maintenant. Un message qui ne dit que la premiere laisse
   l'utilisateur bloque.
   Regle tenue partout : le message d'erreur nomme la cause en langage humain,
   jamais un code technique seul, et propose toujours une suite.
   ========================================================================= */

/* ===========================================================================
   FAMILLE A  -  MESSAGES EN LIGNE
   ======================================================================== */

/* @v FBK-A1
@nom Bandeau d'information
@usage Message pose dans le flux de la page. L'icone double le sens porte par la couleur : lu en noir et blanc, le bandeau reste comprehensible.
@html
<div class="demo-col demo-col--large">
  <div class="alerte alerte--info">{{icon:alerte}}<div><strong>Nouvelle facturation electronique</strong><p>A partir du 1er septembre 2027, toutes vos factures devront passer par une plateforme agreee.</p></div></div>
  <div class="alerte alerte--ok">{{icon:check}}<div><strong>Devis envoye</strong><p>Le client a recu le devis LTP-2026-103 par courriel.</p></div></div>
  <div class="alerte alerte--attention">{{icon:alerte}}<div><strong>Attestation manquante</strong><p>Le Cerfa de TVA reduite doit etre signe avant le debut des travaux.</p></div></div>
  <div class="alerte alerte--erreur">{{icon:alerte}}<div><strong>Envoi impossible</strong><p>L'adresse du client est incomplete. <a href="#">Completer la fiche client</a></p></div></div>
</div>
@tw flex gap-3 rounded-lg border-l-4 p-4 [&_svg]:h-5 [&_svg]:shrink-0
@end */
.alerte {
  display: flex;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-4);
  border: 1px solid transparent;
  border-left-width: 4px;
  border-radius: var(--r-md);
}
.alerte > svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.alerte strong { display: block; font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--c-text); }
.alerte p { margin: 3px 0 0; font-size: var(--fs-sm); color: var(--c-text-soft); line-height: 1.5; }
.alerte a { color: inherit; font-weight: var(--fw-semi); }
.alerte--info      { border-color: var(--c-info);    background: var(--c-info-soft); }
.alerte--info > svg { color: var(--c-info); }
.alerte--ok        { border-color: var(--c-success); background: var(--c-success-soft); }
.alerte--ok > svg  { color: var(--c-success); }
.alerte--attention { border-color: var(--c-warn);    background: var(--c-warn-soft); }
.alerte--attention > svg { color: var(--c-warn); }
.alerte--erreur    { border-color: var(--c-danger);  background: var(--c-danger-soft); }
.alerte--erreur > svg { color: var(--c-danger); }
.alerte--erreur a  { color: var(--c-danger); }
/* @endv */

/* @v FBK-A2
@nom Bandeau avec actions
@usage Quand le message appelle une decision. Les boutons sont dans le bandeau, pas ailleurs sur la page : l'utilisateur ne doit pas chercher.
@html
<div class="alerte alerte--attention alerte--actions">
  {{icon:alerte}}
  <div>
    <strong>3 devis attendent une relance</strong>
    <p>Envoyes il y a plus de 7 jours et toujours sans reponse.</p>
    <div class="alerte__boutons">
      <button class="btn btn--plein btn--sm">Relancer les 3</button>
      <button class="btn btn--fantome btn--sm">Voir la liste</button>
    </div>
  </div>
  <button class="btn btn--fermer" aria-label="Masquer">{{icon:x}}</button>
</div>
@tw [&_.boutons]:mt-3 [&_.boutons]:flex [&_.boutons]:gap-2
@end */
.alerte--actions { align-items: flex-start; }
.alerte--actions > div { flex: 1; }
.alerte__boutons { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
/* @endv */

/* @v FBK-A3
@nom Bandeau de page
@usage Colle en haut de l'application : maintenance prevue, essai qui se termine, mode consultation. Pleine largeur, jamais de coins arrondis.
@html
<div class="demo-col demo-col--large">
  <div class="bandeau bandeau--info">{{icon:horloge}} Votre periode d'essai se termine dans 6 jours. <a href="#">Choisir une formule</a></div>
  <div class="bandeau bandeau--danger">{{icon:alerte}} Mode consultation : vous voyez le compte de <strong>ATELIER ALBERT</strong>. <a href="#">Revenir a mon compte</a></div>
</div>
@tw flex w-full items-center justify-center gap-2 px-4 py-2 text-sm
@end */
.bandeau {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-align: center;
}
.bandeau svg { width: 16px; height: 16px; flex: none; }
.bandeau a { color: inherit; font-weight: var(--fw-bold); text-underline-offset: 3px; }
.bandeau--info   { background: var(--c-info);   color: #fff; }
.bandeau--danger { background: var(--c-danger); color: #fff; }
.bandeau--attention { background: var(--c-warn); color: #fff; }
@media (max-width: 560px) { .bandeau { flex-wrap: wrap; } }
/* @endv */

/* @v FBK-A4
@nom Message de champ
@usage Attache au champ, pas en haut du formulaire. L'erreur dit ce qui ne va pas ET comment corriger : « format invalide » ne sert a personne.
@html
<div class="demo-col demo-col--large">
  <div class="champ is-erreur">
    <label class="champ__label">Adresse de courriel</label>
    <input class="saisie" value="dupont@exemple" aria-invalid="true" aria-describedby="e1">
    <span class="champ__erreur" id="e1">{{icon:alerte}} Il manque le domaine apres le point, par exemple .fr ou .com.</span>
  </div>
  <div class="champ is-valide">
    <label class="champ__label">Numero SIRET</label>
    <span class="champ__enveloppe"><input class="saisie" value="902 123 456 00014">{{icon:check}}</span>
    <span class="champ__aide">Etablissement verifie : JABS, Neuilly-sur-Marne.</span>
  </div>
</div>
@tw aria-invalid:border-red-500 + message lie par aria-describedby
@end */
/* voir .champ.is-erreur et .champ.is-valide dans forms.css */
/* @endv */

/* ===========================================================================
   FAMILLE B  -  MESSAGES FLOTTANTS
   ======================================================================== */

/* @v FBK-B1
@nom Notification breve
@usage Confirmation d'une action reussie. Elle disparait seule apres 4 secondes ; une action irreversible propose toujours d'annuler.
@html
<div class="demo-col demo-col--large">
  <div class="toast toast--ok">{{icon:check}}<span>Devis enregistre</span></div>
  <div class="toast">{{icon:trash}}<span>Document supprime</span><button class="btn btn--texte btn--dense">Annuler</button></div>
  <div class="toast toast--erreur">{{icon:alerte}}<span>Envoi echoue, verifiez la connexion</span><button class="btn btn--texte btn--dense">Reessayer</button></div>
</div>
@tw fixed bottom-6 right-6 flex items-center gap-3 rounded-full bg-slate-900 px-4 py-3 text-white shadow-xl
@end */
.toast {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-full);
  background: var(--c-text);
  color: var(--c-surface);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  box-shadow: var(--sh-3);
}
.toast svg { width: 18px; height: 18px; flex: none; }
.toast span { flex: 1; }
.toast .btn--texte { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.toast--ok svg     { color: #4ade80; }
.toast--erreur svg { color: #f87171; }
/* @endv */

/* @v FBK-B2
@nom Notification en carte
@usage Message plus long, ou qui doit rester a l'ecran. Titre, texte et fermeture explicite : il ne part pas tout seul.
@html
<div class="toast-carte toast-carte--ok">
  <span class="toast-carte__puce">{{icon:check}}</span>
  <div><strong>Dossier 2026-103 complet</strong><p>Toutes les pieces ont ete validees. Le versement interviendra sous 15 jours.</p></div>
  <button class="btn btn--fermer" aria-label="Fermer">{{icon:x}}</button>
</div>
@tw flex w-80 gap-3 rounded-xl border bg-white p-4 shadow-xl
@end */
.toast-carte {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  width: 100%;
  max-width: 360px;
  padding: var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--sh-3);
}
.toast-carte__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);
}
.toast-carte__puce svg { width: 17px; height: 17px; }
.toast-carte > div { flex: 1; min-width: 0; }
.toast-carte strong { font-size: var(--fs-md); font-weight: var(--fw-bold); }
.toast-carte p { margin: 3px 0 0; font-size: var(--fs-sm); color: var(--c-text-soft); line-height: 1.5; }
.toast-carte--ok .toast-carte__puce     { background: var(--c-success-soft); color: var(--c-success); }
.toast-carte--erreur .toast-carte__puce { background: var(--c-danger-soft);  color: var(--c-danger); }
/* @endv */

/* @v FBK-B3
@nom Pile de notifications
@usage Plusieurs messages a la suite. Les plus recents en haut, et une limite de 3 visibles : au-dela, la pile masque l'application.
@html
<div class="toast-pile">
  <div class="toast toast--ok">{{icon:check}}<span>Devis 2026-121 enregistre</span></div>
  <div class="toast">{{icon:mail}}<span>Courriel envoye a Sophie Martin</span></div>
  <div class="toast toast--erreur">{{icon:alerte}}<span>Photo trop volumineuse (42 Mo)</span></div>
</div>
@tw fixed bottom-6 right-6 flex flex-col-reverse gap-2
@end */
.toast-pile { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.toast-pile .toast { animation: toast-entree var(--t-spring) both; }
@keyframes toast-entree {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
/* @endv */

/* @v FBK-B4
@nom Info-bulle
@usage Precision courte au survol ET au focus clavier. Elle ne porte jamais une information indispensable : tout le monde ne survole pas.
@html
<div class="demo-row demo-row--haute">
  <button class="btn btn--secondaire btn--bulle" data-bulle="Genere un PDF avec la mise en page de la societe">Exporter</button>
  <span class="bulle-info" data-bulle="Le prix indique comprend la pose et la mise en service" tabindex="0" role="button" aria-label="Precision sur le prix">{{icon:alerte}}</span>
</div>
@tw group relative [&_span]:invisible group-hover:[&_span]:visible
@end */
.bulle-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: var(--r-full);
  background: var(--c-surface-3);
  color: var(--c-text-muted);
  cursor: help;
  position: relative;
  overflow: visible;
}
.bulle-info svg { width: 13px; height: 13px; }
.bulle-info:hover { background: var(--c-primary-soft); color: var(--c-primary); }
.bulle-info::before {
  content: attr(data-bulle);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 240px;
  padding: 7px 11px;
  border-radius: var(--r-sm);
  background: var(--c-text);
  color: var(--c-surface);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  white-space: normal;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast);
  z-index: 20;
}
.bulle-info:hover::before, .bulle-info:focus-visible::before { opacity: 1; transform: translateX(-50%) translateY(0); }
/* @endv */

/* ===========================================================================
   FAMILLE C  -  FENETRES ET TIROIRS
   ======================================================================== */

/* @v FBK-C1
@nom Fenetre modale
@usage Une decision qui bloque la suite. Fermeture par la croix, par Echap et par un clic sur le voile ; le bouton d'action reste a droite.
@html
<div class="modale-scene">
  <div class="modale__voile"></div>
  <div class="modale" role="dialog" aria-modal="true" aria-labelledby="m1">
    <div class="modale__tete">
      <h3 id="m1">Envoyer le devis au client</h3>
      <button class="btn btn--fermer" aria-label="Fermer">{{icon:x}}</button>
    </div>
    <div class="modale__corps">
      <p>Le devis LTP-2026-103 sera envoye a <strong>julien@exemple.fr</strong>. Le client pourra le signer en ligne.</p>
      <label class="coche"><input type="checkbox" checked><span class="coche__boite"></span> M'envoyer une copie</label>
    </div>
    <div class="modale__pied">
      <button class="btn btn--secondaire">Annuler</button>
      <button class="btn btn--plein">Envoyer</button>
    </div>
  </div>
</div>
@tw fixed inset-0 z-50 grid place-items-center [&_.voile]:absolute [&_.voile]:inset-0 [&_.voile]:bg-black/45
@end */
.modale-scene { position: relative; display: grid; place-items: center; width: 100%; min-height: 300px; padding: var(--sp-5); border-radius: var(--r-md); background: var(--c-surface-3); overflow: hidden; }
.modale__voile { position: absolute; inset: 0; background: var(--c-overlay); }
.modale {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 440px;
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--sh-4);
  overflow: hidden;
}
.modale__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--c-border); }
.modale__tete h3 { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.modale__corps { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); }
.modale__corps p { margin: 0; font-size: var(--fs-md); color: var(--c-text-soft); line-height: 1.55; }
.modale__pied { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--c-border); background: var(--c-surface-2); }
@media (max-width: 560px) { .modale__pied { flex-direction: column-reverse; } .modale__pied .btn { width: 100%; } }
/* @endv */

/* @v FBK-C2
@nom Confirmation destructrice
@usage Suppression definitive. Le bouton nomme l'action (« Supprimer le dossier »), jamais « OK » : on doit pouvoir confirmer sans relire la question.
@html
<div class="modale-scene">
  <div class="modale__voile"></div>
  <div class="modale modale--danger" role="alertdialog" aria-modal="true" aria-labelledby="m2">
    <div class="modale__corps modale__corps--centre">
      <span class="modale__puce">{{icon:trash}}</span>
      <h3 id="m2">Supprimer le dossier 2026-103 ?</h3>
      <p>Les 12 documents et les 3 interventions liees seront supprimes. Cette action est definitive.</p>
    </div>
    <div class="modale__pied">
      <button class="btn btn--secondaire">Annuler</button>
      <button class="btn btn--destructif">Supprimer le dossier</button>
    </div>
  </div>
</div>
@tw role="alertdialog" + bouton qui nomme l'action, jamais « OK »
@end */
.modale--danger { max-width: 400px; }
.modale__corps--centre { align-items: center; text-align: center; padding-top: var(--sp-6); }
.modale__corps--centre h3 { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.modale__puce {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--r-full);
  background: var(--c-danger-soft);
  color: var(--c-danger);
}
.modale__puce svg { width: 22px; height: 22px; }
.modale--danger .modale__pied { justify-content: center; }
/* @endv */

/* @v FBK-C3
@nom Tiroir lateral
@usage Formulaire ou detail qui ne merite pas un changement de page. Il garde le contexte visible derriere, contrairement a une modale plein ecran.
@html
<div class="modale-scene modale-scene--tiroir">
  <div class="modale__voile"></div>
  <aside class="tiroir" role="dialog" aria-modal="true" aria-labelledby="t1">
    <div class="modale__tete"><h3 id="t1">Nouvelle intervention</h3><button class="btn btn--fermer" aria-label="Fermer">{{icon:x}}</button></div>
    <div class="modale__corps">
      <div class="champ"><label class="champ__label">Type</label>
        <div class="saisie-select"><select class="saisie"><option>Entretien annuel</option><option>Depannage</option></select>{{icon:chevron-down}}</div></div>
      <div class="champ"><label class="champ__label">Date</label><input class="saisie" type="date" value="2026-09-24"></div>
      <div class="champ"><label class="champ__label">Notes</label><textarea class="saisie" rows="3"></textarea></div>
    </div>
    <div class="modale__pied"><button class="btn btn--secondaire">Annuler</button><button class="btn btn--plein">Creer</button></div>
  </aside>
</div>
@tw fixed inset-y-0 right-0 z-50 flex w-[420px] flex-col bg-white shadow-2xl max-sm:w-full
@end */
.modale-scene--tiroir { justify-items: end; padding: 0; }
.tiroir {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 380px;
  height: 100%;
  background: var(--c-surface);
  box-shadow: var(--sh-4);
}
.tiroir .modale__corps { flex: 1; overflow-y: auto; }
/* @endv */

/* @v FBK-C4
@nom Tiroir du bas
@usage L'equivalent mobile du tiroir lateral. La poignee dit qu'il se referme au glissement, et le contenu depasse la zone de l'encoche.
@html
<div class="modale-scene modale-scene--bas">
  <div class="modale__voile"></div>
  <div class="tiroir-bas" role="dialog" aria-modal="true">
    <span class="tiroir-bas__poignee"></span>
    <h3>Actions du dossier</h3>
    <nav>
      <button class="btn btn--fantome">{{icon:pencil}} Modifier le dossier</button>
      <button class="btn btn--fantome">{{icon:download}} Exporter en PDF</button>
      <button class="btn btn--fantome">{{icon:mail}} Envoyer au client</button>
      <button class="btn btn--fantome" style="color:var(--c-danger)">{{icon:trash}} Supprimer</button>
    </nav>
  </div>
</div>
@tw fixed inset-x-0 bottom-0 rounded-t-2xl bg-white pb-[env(safe-area-inset-bottom)]
@end */
.modale-scene--bas { align-items: end; padding: 0; }
.tiroir-bas {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--c-surface);
  box-shadow: 0 -8px 32px rgba(16,24,40,.18);
}
.tiroir-bas__poignee { width: 38px; height: 4px; margin: 0 auto var(--sp-2); border-radius: var(--r-full); background: var(--c-border-strong); }
.tiroir-bas h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-md); font-weight: var(--fw-bold); }
.tiroir-bas nav { display: flex; flex-direction: column; }
.tiroir-bas nav .btn { justify-content: flex-start; height: 46px; }
/* @endv */

/* ===========================================================================
   FAMILLE D  -  PROGRESSION
   ======================================================================== */

/* @v FBK-D1
@nom Barres de progression
@usage Determinee quand la duree est connue, indeterminee sinon. Ne jamais afficher une barre determinee figee : elle passe pour un blocage.
@html
<div class="demo-col demo-col--large">
  <div class="progres"><span style="--p: 34%"></span></div>
  <div class="progres progres--epais"><span style="--p: 72%"></span></div>
  <div class="progres progres--indetermine"><span></span></div>
</div>
@tw h-2 w-full overflow-hidden rounded-full bg-slate-200
@end */
.progres { width: 100%; height: 6px; border-radius: var(--r-full); background: var(--c-surface-3); overflow: hidden; }
.progres > span { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: var(--c-primary); transition: width var(--t-slow); }
.progres--epais { height: 12px; }
.progres--indetermine > span {
  width: 35%;
  animation: progres-va-et-vient 1.4s ease-in-out infinite;
}
@keyframes progres-va-et-vient {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(340%); }
}
/* @endv */

/* @v FBK-D2
@nom Anneau de progression
@usage Compact, pose sur une vignette ou dans un tableau. Le chiffre au centre reste la vraie information, l'anneau n'est qu'un repere.
@html
<div class="demo-row">
  <span class="anneau" style="--p: 34"><em>34 %</em></span>
  <span class="anneau anneau--ok" style="--p: 100"><em>{{icon:check}}</em></span>
  <span class="anneau anneau--sm" style="--p: 62"></span>
</div>
@tw conic-gradient + mask radial pour evider le centre
@end */
.anneau {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: conic-gradient(var(--c-primary) calc(var(--p) * 1%), var(--c-surface-3) 0);
}
.anneau::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: var(--c-surface);
}
.anneau em {
  position: relative;
  z-index: 1;
  font-style: normal;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.anneau em svg { width: 18px; height: 18px; display: block; }
.anneau--ok { background: conic-gradient(var(--c-success) calc(var(--p) * 1%), var(--c-surface-3) 0); }
.anneau--ok em { color: var(--c-success); }
.anneau--sm { width: 34px; height: 34px; }
.anneau--sm::after { inset: 5px; }
/* @endv */

/* @v FBK-D3
@nom Etapes de traitement
@usage Traitement long en plusieurs phases : envoi, conversion, signature. L'etape en cours est nommee, pas seulement numerotee.
@html
<ol class="etapes">
  <li class="is-fait">{{icon:check}}<div><strong>Devis genere</strong><small>Termine il y a 2 min</small></div></li>
  <li class="is-fait">{{icon:check}}<div><strong>PDF converti en Factur-X</strong><small>Termine il y a 1 min</small></div></li>
  <li class="is-encours"><span class="btn__spin"></span><div><strong>Envoi au client</strong><small>En cours...</small></div></li>
  <li><em>4</em><div><strong>Attente de signature</strong><small>A venir</small></div></li>
</ol>
@tw relative [&_li]:flex [&_li]:gap-3 [&_li]:pb-6 before:absolute before:left-3.5 before:h-full before:w-px
@end */
.etapes { list-style: none; margin: 0; padding: 0; width: 100%; position: relative; }
.etapes::before { content: ""; position: absolute; left: 14px; top: 16px; bottom: 22px; width: 2px; background: var(--c-border); }
.etapes li { position: relative; display: flex; align-items: flex-start; gap: var(--sp-3); padding-bottom: var(--sp-5); }
.etapes li:last-child { padding-bottom: 0; }
.etapes li > svg, .etapes li > em, .etapes li > .btn__spin {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none;
  border-radius: var(--r-full);
  background: var(--c-surface-3);
  border: 3px solid var(--c-surface);
  color: var(--c-text-muted);
  font-style: normal;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  box-sizing: border-box;
  z-index: 1;
}
.etapes li > svg { padding: 6px; }
.etapes li > .btn__spin { border: 2px solid color-mix(in srgb, var(--c-primary) 30%, transparent); border-top-color: var(--c-primary); background: transparent; width: 24px; height: 24px; margin: 3px; }
.etapes .is-fait > svg { background: var(--c-success); color: #fff; }
.etapes .is-fait strong { color: var(--c-text); }
.etapes .is-encours strong { color: var(--c-primary-ink); }
.etapes li strong { display: block; font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--c-text-muted); }
.etapes li small  { font-size: var(--fs-xs); color: var(--c-text-muted); }
/* @endv */

/* @v FBK-D4
@nom Compte a rebours
@usage Delai contraint : creneau reserve, code qui expire, offre limitee. Les chiffres sont tabulaires pour que la largeur ne bouge pas a chaque seconde.
@html
<div class="rebours">
  <span class="rebours__label">Creneau reserve encore</span>
  <span class="rebours__temps"><em>04</em>:<em>32</em></span>
  <div class="progres"><span style="--p: 45%"></span></div>
</div>
@tw tabular-nums [&_em]:not-italic [&_em]:text-2xl [&_em]:font-extrabold
@end */
.rebours {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 240px;
  padding: var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  text-align: center;
}
.rebours__label { font-size: var(--fs-xs); color: var(--c-text-muted); }
.rebours__temps { font-size: 30px; font-weight: 800; color: var(--c-text); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.rebours__temps em { font-style: normal; }
/* @endv */