/* ══════════════════════════════════════════════════════════════════════════
   LES BOUTONS D'APPEL À L'ACTION — une seule DA, « Sylen tactile » (09/10/2026)

   Choisis par Idris sur la page des propositions (15 emplacements). Une base
   commune, des couleurs, des signatures :
   · base `.sb` : pilule de 56 px, Montserrat 700, pastille d'icône à gauche,
     ressort à l'enfoncement, aimantation au curseur (chrome.js) ;
   · couleurs `.sb-k-*` : bleu (démo), encre (inscription), rose
     (diagnostic, Start), indigo (Pro), vert, relief (neutre), blanc ;
   · signatures : `.sb-flow` (le fond se remplit depuis la pastille),
     `.sb-eclipse` (la pastille avale le bouton, couleurs inversées),
     `.sb-tactile` (épaisseur, couches), `.sb-reflet` (bande translucide),
     `.sb-faisceau` (trait qui fait le tour), `.sb-sonne` (combiné qui vibre) ;
   · libellés animés : `.sb-roule` (lettres qui roulent), `.sb-bascule`
     (texte → numéro), `.sb-odo` (compteur de prix).
   Le balisage vient de lib/boutons.ts (une seule source pour React et pour
   les gabarits HTML) ; chrome.js découpe en lettres ce qui ne l'a pas été.

   AUCUN DÉGRADÉ : couleurs pleines et ombres seulement (règle de la marque).
   Toutes les classes sont préfixées `sb-` pour ne rien heurter de l'existant.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --sb-face: #ECEFF5; --sb-sol: #E3E8EF; --sb-creux: #DBE1EA; --sb-encre: #161A26; --sb-noir: #000;
  --sb-bleu: #068FFF; --sb-bleu-2: #0563B5; --sb-rose: #FF91E4; --sb-rose-2: #E46CC9; --sb-rose-t: #2A1726;
  --sb-indigo: #4F46E5; --sb-indigo-2: #3730A3; --sb-vert: #00D084; --sb-vert-2: #00A367; --sb-vert-t: #06291C;
  --sb-lo: 163, 177, 198; --sb-hi: 255, 255, 255;
  --sb-relief: 7px 7px 18px rgba(var(--sb-lo), .55), -7px -7px 18px rgba(var(--sb-hi), .75);
  --sb-ressort: cubic-bezier(.34, 1.56, .64, 1); --sb-doux: cubic-bezier(.22, 1, .36, 1);
}

/* ═══ La base ═══ */
/* Les variables par défaut à spécificité minimale : les couleurs `.sb-k-*`,
   déclarées après, doivent toujours l'emporter. */
.sb { --c: var(--sb-bleu); --c2: var(--sb-bleu-2); --t: #fff; --p: rgba(255, 255, 255, .22); }
a.sb, button.sb, .sb {
  position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 12px; height: 56px; min-width: 0; max-width: 100%; margin: 0;
  padding: 0 24px 0 8px; border: 0; border-radius: 999px;
  background: var(--c); color: var(--t);
  font: 700 15px/1 var(--font-montserrat), Montserrat, "Helvetica Neue", Arial, sans-serif; letter-spacing: -.01em;
  text-decoration: none; text-transform: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 10px 24px -10px rgba(var(--sb-lo), .9), var(--sb-relief);
  transition: transform .5s var(--sb-ressort), box-shadow .4s var(--sb-doux), background-color .3s, color .3s;
  will-change: transform; -webkit-tap-highlight-color: transparent; user-select: none; vertical-align: middle;
}
a.sb:hover, a.sb:focus, a.sb:visited { color: var(--t); text-decoration: none; }
.sb:focus-visible { outline: 3px solid var(--sb-encre); outline-offset: 4px; }
.sb-sur-nuit .sb, .sb.sb-sur-nuit { box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset; }
.sb-sur-nuit .sb:focus-visible, .sb.sb-sur-nuit:focus-visible { outline-color: #fff; }
.sb:active { transform: scale(.95) !important; transition-duration: .12s; }
.sb.sb-sans-ico { padding-left: 26px; }
/* Bouton pleine largeur (cartes de prix) : le libellé se centre, la pastille reste à gauche. */
.sb.sb-large { display: flex; width: 100%; padding-right: 56px; }
.sb.sb-large.sb-sans-ico { padding-left: 32px; padding-right: 32px; justify-content: center; }
.sb.sb-large .sb-lab { flex: 1; justify-content: center; }

/* ═══ Les couleurs ═══ */
.sb-k-bleu { --c: var(--sb-bleu); --c2: var(--sb-bleu-2); --t: #fff; }
.sb-k-encre { --c: var(--sb-encre); --c2: var(--sb-noir); --t: #fff; --p: rgba(255, 255, 255, .14); }
.sb-k-rose { --c: var(--sb-rose); --c2: var(--sb-rose-2); --t: var(--sb-rose-t); --p: rgba(255, 255, 255, .4); }
.sb-k-indigo { --c: var(--sb-indigo); --c2: var(--sb-indigo-2); --t: #fff; }
.sb-k-vert { --c: var(--sb-vert); --c2: var(--sb-vert-2); --t: var(--sb-vert-t); --p: rgba(255, 255, 255, .35); }
.sb-k-relief { --c: var(--sb-face); --c2: var(--sb-encre); --t: var(--sb-encre); --p: var(--sb-creux); }
.sb-k-blanc { --c: #fff; --c2: var(--sb-encre); --t: var(--sb-encre); --p: var(--sb-sol); }
/* L'encre sur une section sombre : un filet clair dessine le bord, sinon la
   pilule se perd dans le fond. */
.sb-sur-nuit .sb-k-encre, .sb-k-encre.sb-sur-nuit { box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 0 0 1px rgba(255, 255, 255, .22) inset; }

/* ═══ Pastille, libellé, flèche ═══ */
.sb-pas { position: relative; z-index: 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--p); color: inherit; transition: transform .5s var(--sb-ressort); }
.sb-pas svg { width: 19px; height: 19px; display: block; }
.sb-lab { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.sb-t { display: inline; min-width: 0; }
.sb-fl { position: relative; z-index: 2; width: 18px; height: 18px; flex: none; margin-left: -2px; transition: transform .5s var(--sb-ressort); }
.sb:hover .sb-fl { transform: translateX(5px); }

/* Roulement de lettres : chaque mot est une fenêtre d'une ligne, chaque
   lettre porte son double juste dessous (::after) et monte au survol. Les
   mots restent séparés par de vrais espaces : le libellé peut passer à la
   ligne sur un petit écran. */
.sb-roule { display: inline; }
.sb-roule .sb-mot { display: inline-flex; overflow: hidden; height: 1.15em; line-height: 1.15em; vertical-align: top; }
.sb-roule .sb-mot > span { display: inline-block; position: relative; transition: transform .55s var(--sb-ressort); transition-delay: calc(var(--i) * 18ms); white-space: pre; }
.sb-roule .sb-mot > span::after { content: attr(data-l); position: absolute; left: 0; top: 100%; }
.sb:hover .sb-roule .sb-mot > span { transform: translateY(-100%); }

/* Bascule texte → numéro, lettre par lettre */
.sb-bascule { display: grid; overflow: hidden; height: 1.2em; line-height: 1.2em; }
.sb-bascule > span { grid-area: 1 / 1; display: inline-flex; }
.sb-bascule > span > i { font-style: normal; display: inline-block; white-space: pre; transition: transform .6s var(--sb-ressort), opacity .3s; transition-delay: calc(var(--i) * 14ms); }
.sb-bascule > span + span > i { transform: translateY(110%); opacity: 0; font-variant-numeric: tabular-nums; }
.sb:hover .sb-bascule > span:first-child > i { transform: translateY(-110%); opacity: 0; }
.sb:hover .sb-bascule > span + span > i { transform: none; opacity: 1; }
@media (hover: none) {
  .sb-bascule > span:first-child > i { animation: sb-sort 7s var(--sb-doux) infinite; animation-delay: calc(var(--i) * 14ms); }
  .sb-bascule > span + span > i { animation: sb-entre 7s var(--sb-doux) infinite; animation-delay: calc(var(--i) * 14ms); }
}
@keyframes sb-sort { 0%, 44% { transform: none; opacity: 1; } 52%, 92% { transform: translateY(-110%); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes sb-entre { 0%, 44% { transform: translateY(110%); opacity: 0; } 52%, 92% { transform: none; opacity: 1; } 100% { transform: translateY(110%); opacity: 0; } }

/* Compteur : au repos le vrai prix, au survol chaque chiffre fait un tour. */
.sb-odo { display: inline-flex; overflow: hidden; height: 1.15em; line-height: 1.15em; font-variant-numeric: tabular-nums; vertical-align: top; }
.sb-odo > span { display: inline-flex; flex-direction: column; transition: transform .9s var(--sb-ressort); transition-delay: calc(var(--i) * 60ms); }
.sb:hover .sb-odo > span { transform: translateY(calc(var(--to) * -1.15em)); }

/* ═══ Les signatures ═══ */
/* Flow : le fond se remplit depuis la pastille */
.sb-flow::before { content: ''; position: absolute; z-index: 1; left: 8px; top: 8px; width: 40px; height: 40px; border-radius: 50%; background: var(--c2); transform: scale(1); transition: transform .7s var(--sb-doux); }
.sb-flow:hover::before { transform: scale(var(--sb-k, 16)); }
a.sb-flow.sb-k-relief:hover, a.sb-flow.sb-k-blanc:hover { color: #fff; }

/* Eclipse : la pastille avale le bouton, couleurs inversées */
.sb-eclipse::before { content: ''; position: absolute; z-index: 1; left: 8px; top: 8px; width: 40px; height: 40px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .65s var(--sb-doux); }
.sb-eclipse:hover::before { transform: scale(var(--sb-k, 16)); }
a.sb-eclipse:hover { color: var(--c); }
a.sb-eclipse.sb-k-rose:hover { color: var(--sb-rose-t); }
.sb-eclipse.sb-k-blanc::before, .sb-eclipse.sb-k-relief::before { background: var(--sb-encre); }
a.sb-eclipse.sb-k-blanc:hover, a.sb-eclipse.sb-k-relief:hover { color: #fff; }
.sb-eclipse .sb-pas { transition: transform .5s var(--sb-ressort), background-color .3s, color .3s; }
.sb-eclipse:hover .sb-pas { background: var(--c); color: #fff; transform: rotate(-12deg); }
.sb-eclipse.sb-k-rose:hover .sb-pas { color: var(--sb-rose-t); }
.sb-eclipse.sb-k-relief:hover .sb-pas, .sb-eclipse.sb-k-blanc:hover .sb-pas { background: #fff; color: var(--sb-encre); }

/* Reflet : une bande pleine translucide, pas un dégradé */
.sb-reflet::after { content: ''; position: absolute; z-index: 1; top: -20%; left: -30%; width: 22%; height: 140%; background: rgba(255, 255, 255, .32); transform: skewX(-20deg) translateX(0); animation: sb-reflet 3.6s var(--sb-doux) infinite; pointer-events: none; }
.sb-k-rose.sb-reflet::after, .sb-k-vert.sb-reflet::after { background: rgba(255, 255, 255, .5); }
@keyframes sb-reflet { 0%, 55% { transform: skewX(-20deg) translateX(0); } 85%, 100% { transform: skewX(-20deg) translateX(720%); } }

/* Faisceau de bord : un trait plein qui fait le tour (cadré par chrome.js) */
.sb-faisceau { overflow: visible; }
.sb-faisceau svg.sb-tour { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); z-index: 3; pointer-events: none; overflow: visible; }
.sb-faisceau svg.sb-tour rect { fill: none; stroke: var(--c); stroke-width: 2.5; stroke-linecap: round; }
.sb-sur-nuit .sb-faisceau svg.sb-tour rect, .sb-k-encre.sb-faisceau svg.sb-tour rect { stroke: #fff; }
.sb-k-relief.sb-faisceau svg.sb-tour rect { stroke: var(--sb-bleu); }

/* Tactile : couches, épaisseur, ressort */
.sb-tactile { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 0 0 1px rgba(0, 0, 0, .06) inset, 0 4px 0 var(--c2), 0 14px 22px -10px rgba(var(--sb-lo), 1), var(--sb-relief); }
.sb-tactile.sb-k-relief { box-shadow: 0 1px 0 #fff inset, 0 4px 0 #C5CDD9, var(--sb-relief); }
.sb-sur-nuit .sb-tactile, .sb-tactile.sb-sur-nuit { box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 4px 0 var(--c2); }
.sb-tactile:hover { transform: translateY(-6px); }
.sb-tactile:active { transform: translateY(1px) scale(.98) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset !important; }

/* Sonnerie : le combiné vibre, deux ondes autour de la pastille */
.sb-sonne .sb-pas svg { animation: sb-vibre 2.8s ease-in-out infinite; transform-origin: 50% 60%; }
.sb-sonne .sb-pas::before, .sb-sonne .sb-pas::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: sb-cercle 2.8s var(--sb-doux) infinite; }
.sb-sonne .sb-pas::after { animation-delay: .45s; }
.sb.sb-sonne:hover .sb-pas svg { animation-duration: 1s; }
.sb.sb-sonne { overflow: visible; }
@keyframes sb-vibre { 0%, 55%, 100% { transform: rotate(0); } 58% { transform: rotate(-18deg); } 62% { transform: rotate(16deg); } 66% { transform: rotate(-12deg); } 70% { transform: rotate(8deg); } 74% { transform: rotate(0); } }
@keyframes sb-cercle { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(1.8); opacity: 0; } }

/* Coche qui se trace (au survol, ou en boucle) */
.sb-coche path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .6s var(--sb-doux) .05s; }
.sb:hover .sb-coche path { stroke-dashoffset: 0; }
.sb-coche.sb-boucle path { animation: sb-trace 3s var(--sb-doux) infinite; }
@keyframes sb-trace { 0% { stroke-dashoffset: 24; } 35%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 24; } }

/* ═══ Onde de clic et éclats (posés par chrome.js) ═══ */
.sb-clip { position: absolute; inset: 0; z-index: 1; border-radius: inherit; overflow: hidden; pointer-events: none; }
.sb-goutte { position: absolute; z-index: 1; border-radius: 50%; background: currentColor; opacity: .28; transform: scale(0); animation: sb-goutte .7s var(--sb-doux) forwards; pointer-events: none; }
@keyframes sb-goutte { to { transform: scale(1); opacity: 0; } }
.sb-eclat { position: fixed; z-index: 2147483000; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; animation: sb-eclat .8s var(--sb-doux) forwards; }
@keyframes sb-eclat { to { transform: translate(var(--x), var(--y)) scale(.2); opacity: 0; } }

/* Texte réservé aux lecteurs d'écran */
.sb-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ═══ Petits écrans : le libellé peut passer à la ligne ═══ */
@media (max-width: 760px) {
  a.sb, button.sb, .sb { white-space: normal; height: auto; min-height: 56px; padding-top: 8px; padding-bottom: 8px; line-height: 1.15; text-align: left; }
}

/* Les rangées de boutons qui passent en pleine largeur sur téléphone : la
   pastille reste au bord gauche (le remplissage part d'elle), le libellé se
   centre dans la place restante. */
/* Le bandeau sombre de la démo étire ses boutons sur la colonne. */
.rf-cta-demo-actions .sb { display: flex; width: 100%; padding-right: 56px; }
.rf-cta-demo-actions .sb .sb-lab { flex: 1; justify-content: center; }
@media (max-width: 760px) {
  .rf-cta-rangee .sb, .rf-cta-diag-actions .sb { display: flex; width: 100%; }
  .rf-cta-rangee .sb .sb-lab, .rf-cta-diag-actions .sb .sb-lab { flex: 1; justify-content: center; }
  .rf-cta-rangee .sb:not(.sb-sans-ico), .rf-cta-diag-actions .sb:not(.sb-sans-ico) { padding-right: 56px; }
}
@media (max-width: 640px) {
  .rf-actions .sb { display: flex; width: 100%; }
  .rf-actions .sb .sb-lab { flex: 1; justify-content: center; }
  .rf-actions .sb:not(.sb-sans-ico) { padding-right: 56px; }
}

/* ═══ Mouvement réduit : tout s'arrête, les états restent lisibles ═══ */
@media (prefers-reduced-motion: reduce) {
  .sb, .sb *, .sb::before, .sb::after, .sb *::before, .sb *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .sb-goutte, .sb-eclat { display: none !important; }
  .sb-coche.sb-boucle path { stroke-dashoffset: 0; }
}

/* Un seul bouton vivant par rangée : les autres gardent leur réaction au
   survol, mais aucune animation en boucle (chrome.js pose `sb-calme`). */
.sb-calme, .sb-calme *, .sb-calme::before, .sb-calme::after, .sb-calme *::before, .sb-calme *::after { animation: none !important; }
.sb-calme .dv-fil { display: none; }