/* Boo — langage visuel du casino.
   A charger apres polices/boo.css.
   Les classes .boo-* reproduisent les boutons, la navigation, les feuilles
   et les animations de la coque. Le HTML de demonstration est dans apercu.html. */

:root {
  --boo-fond: #090909;
  --boo-fond-html: #07080c;
  --boo-surface: #0E0E12;
  --boo-carte: #0E0E0E;
  --boo-relief: #151515;
  --boo-texte: #ECF0F8;
  --boo-second: #B9C2D0;
  --boo-nav: #AFB8C8;
  --boo-nav-mot: #B7C0CF;
  --boo-sourd: #8B95A6;
  --boo-eteint: #5A6B82;
  --boo-segment: #8E9AAC;
  --boo-bord: rgba(255, 255, 255, 0.07);
  --boo-bord-fort: rgba(255, 255, 255, 0.09);
  --boo-champ: rgba(255, 255, 255, 0.045);
  --boo-panneau: rgba(255, 255, 255, 0.04);
  --boo-bleu: #EE0A0A;
  --boo-bleu-clair: #FF4545;
  --boo-gagne: #46DC5B;
  --boo-badge: #3DD68C;
  --boo-sur-gagne: #04170A;
  --boo-perdu: #FF6B6B;
  --boo-or: #FFCB47;
  --boo-display: "Bricolage Grotesque", system-ui, sans-serif;
  --boo-sans: "DM Sans", system-ui, sans-serif;
  --boo-mono: "DM Mono", monospace;
  --boo-lettrage: -0.015em;
  --boo-actif: radial-gradient(130% 130% at 50% 100%, #FF4545 0%, #EE0A0A 100%);
  --boo-actif-liseret: inset 0 0 0 1px rgba(255, 225, 228, 0.55);
  --boo-verre: linear-gradient(180deg, rgba(24, 24, 30, 0.82) 0%, rgba(13, 13, 17, 0.9) 100%);
  --boo-course: cubic-bezier(.34, 1.26, .36, 1);
  --boo-sidebar: 248px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--boo-fond-html);
  color: var(--boo-texte);
  font-family: var(--boo-sans);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }

/* Chiffres qui ne sautent pas quand la valeur change. */
.boo-chiffres { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   Presse. Tout ce qui se clique porte .boo-presse (l'ancien .spyn-cta).
   L'appui rapetisse et eclaircit ; le survol eclaircit a peine.
   --------------------------------------------------------------------------- */
.boo-presse {
  transition: transform 0.12s ease, filter 0.15s ease;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
}
.boo-presse:hover { filter: brightness(1.08); }
.boo-presse:active { transform: scale(0.96); filter: brightness(1.1); }
.boo-presse:disabled,
.boo-presse[aria-disabled="true"] {
  cursor: default;
  filter: none;
  transform: none;
  opacity: 0.55;
}

/* ---------------------------------------------------------------------------
   Bouton plein. Largeur libre, 52 px, rayon 14.
   C'est LA touche d'action : depot, confirmer, miser quand les fonds sont la.
   --------------------------------------------------------------------------- */
.boo-btn {
  appearance: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 18px;
  border-radius: 14px;
  background: var(--boo-actif);
  box-shadow: var(--boo-actif-liseret);
  color: #fff;
  font-family: var(--boo-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.boo-btn--compact { height: 48px; }
.boo-btn--bloc { width: 100%; }
.boo-btn--muet {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
  color: rgba(255, 255, 255, 0.34);
}
.boo-btn--vert {
  background: #3DD68C;
  box-shadow: none;
  color: var(--boo-sur-gagne);
}
.boo-btn--or {
  background: var(--boo-or);
  box-shadow: none;
  color: #0A0710;
  border-radius: 999px;
  font-family: var(--boo-display);
  font-size: 14px;
  padding: 0 22px;
}
.boo-btn--or:hover { background: #FFD867; }
.boo-btn--fantome {
  background: transparent;
  box-shadow: none;
  color: var(--boo-sourd);
}
.boo-btn--lien {
  background: none;
  box-shadow: none;
  height: auto;
  padding: 0;
  border-radius: 0;
  color: var(--boo-bleu-clair);
  font-size: 13px;
}

/* Pastille de notification : le « 1 » vert sur fond presque noir. */
.boo-badge {
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--boo-badge);
  color: var(--boo-sur-gagne);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Pastille de resultat : voile a 12 %, jamais un aplat plein. */
.boo-pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: var(--boo-lettrage);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.boo-pastille--gagne { background: rgba(70, 220, 91, 0.12); color: var(--boo-gagne); }
.boo-pastille--perdu { background: rgba(255, 107, 107, 0.12); color: var(--boo-perdu); }
.boo-pastille--or { background: rgba(255, 203, 71, 0.12); color: var(--boo-or); }
.boo-pastille i {
  width: 1px;
  height: 11px;
  background: currentColor;
  opacity: 0.26;
  display: block;
}

/* Carte / panneau. */
.boo-carte {
  background: var(--boo-panneau);
  border: 1px solid var(--boo-bord);
  border-radius: 14px;
}
.boo-modale {
  background: var(--boo-carte);
  border: 1px solid var(--boo-bord);
  border-radius: 18px;
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.85);
}
.boo-champ {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.045);
  outline: none;
  color: var(--boo-texte);
}
.boo-champ::placeholder { color: var(--boo-eteint); }
.boo-champ:focus {
  border-color: rgba(255, 69, 69, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 69, 69, 0.18);
}

/* Relief des cases qu'on presse (raccourcis d'accueil). */
.boo-relief {
  position: relative;
  background-color: var(--boo-relief);
  color: #D2D0DF;
  border: 0;
  border-radius: 16px;
  box-shadow: inset 0 1px 0 #242424, 0 2px 2px rgba(0, 0, 0, 0.25);
  transition: background-color .14s ease-out, box-shadow .14s ease-out, color .14s ease-out;
}
.boo-relief::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .14s ease-out;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .07) 44%, transparent 72%),
    radial-gradient(78% 58% at 50% 118%, rgba(255, 255, 255, .3) 0%, transparent 70%),
    radial-gradient(130% 130% at 50% 100%, rgba(255, 69, 69, .94) 0%, rgba(238, 10, 10, .9) 100%);
  box-shadow: 0 6px 18px rgba(170, 0, 15, .34), inset 0 0 0 1px rgba(255, 225, 228, .38);
}
@media (hover: hover) and (pointer: fine) {
  .boo-relief:hover { color: #fff; box-shadow: none; }
  .boo-relief:hover::before { opacity: 1; }
}
.boo-relief:active { color: #fff; box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.25); }
.boo-relief:active::before { opacity: 1; filter: brightness(.92); }
.boo-presse.boo-relief:hover,
.boo-presse.boo-relief:active { filter: none; }
.boo-presse.boo-relief:active { transform: none; }

/* Creux : champ pose dans une surface, paroi haute sombre, filet clair en bas. */
.boo-creux {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid #1C1C1C;
  border-radius: 10px;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.38), inset 0 -1px 0 rgba(255, 255, 255, 0.022);
}

/* ---------------------------------------------------------------------------
   Pastille glissante. Un seul objet se deplace sous l'onglet actif.
   JS : js/boo-pilule.js pose transform / width / height.
   --------------------------------------------------------------------------- */
.boo-rangee { position: relative; }
.boo-pilule {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  border-radius: 13px;
  transition:
    transform .42s var(--boo-course),
    width .42s var(--boo-course),
    height .42s var(--boo-course),
    opacity .18s ease;
}
.boo-pilule--verre {
  background: radial-gradient(130% 130% at 50% 100%, rgba(255, 69, 69, .94) 0%, rgba(238, 10, 10, .9) 100%);
  box-shadow: 0 6px 18px rgba(170, 0, 15, .34), inset 0 0 0 1px rgba(255, 225, 228, .38);
}
.boo-pilule--verre::before,
.boo-pilule--verre::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.boo-pilule--verre::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .07) 44%, transparent 72%);
}
.boo-pilule--verre::after {
  background: radial-gradient(78% 58% at 50% 118%, rgba(255, 255, 255, .3) 0%, transparent 70%);
}
.boo-pilule--sourd {
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.boo-onglet {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  color: var(--boo-segment);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.boo-onglet[aria-pressed="true"] { color: #fff; font-weight: 700; }

/* Barre laterale. */
.boo-sidebar {
  width: var(--boo-sidebar);
  background: rgba(9, 9, 9, 0.94);
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  border-right: 1px solid var(--boo-bord);
  transition: width .18s cubic-bezier(.2, .8, .2, 1);
}
.boo-side {
  width: 100%;
  height: 46px;
  border: 0;
  border-radius: 13px;
  margin-bottom: 4px;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  color: #F0EDFF;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.boo-side[aria-current="page"] { color: #fff; font-weight: 700; }
.boo-side:hover { background: rgba(255, 255, 255, 0.05); }

/* Barre du bas, telephone : pilule flottante en verre sombre. */
.boo-navbas {
  position: relative;
  height: 64px;
  border-radius: 34px;
  display: flex;
  align-items: center;
  background: var(--boo-verre);
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  border: 1px solid var(--boo-bord);
}
.boo-navbas .boo-onglet {
  flex: 1;
  height: 54px;
  margin: 0 2px;
  border-radius: 28px;
  color: var(--boo-nav);
}
.boo-navbas .boo-onglet[aria-pressed="true"] {
  color: #fff;
  transform: translateY(-1px) scale(1.04);
  transition: transform .28s var(--boo-course), color .2s ease;
}

/* Segments a deux volets. */
.boo-segments {
  position: relative;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--boo-bord);
}
.boo-segments .boo-onglet {
  height: 32px;
  padding: 0 15px;
  border-radius: 999px;
  font-size: 12.5px;
}
.boo-segments .boo-pilule { border-radius: 999px; }

/* Interrupteur. Le noyau glisse et s'etire a l'appui. */
.boo-bascule {
  position: relative;
  flex: none;
  width: 48px;
  height: 27px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.08);
  padding: 0;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.boo-bascule[data-actif="1"] {
  background: linear-gradient(180deg, #FF4545 0%, #D90A1A 100%);
  border-color: rgba(255, 130, 140, 0.5);
  box-shadow: 0 2px 10px rgba(217, 10, 26, 0.32);
}
.boo-bascule[data-teinte="or"][data-actif="1"] {
  background: linear-gradient(180deg, #FFD269 0%, #F0B02E 100%);
  border-color: rgba(255, 210, 105, 0.5);
  box-shadow: 0 2px 10px rgba(240, 176, 46, 0.30);
}
.boo-bascule-noyau {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #E8EDF6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  transition: transform .34s var(--boo-course), background .2s ease, width .18s ease;
}
.boo-bascule[data-actif="1"] .boo-bascule-noyau { transform: translateX(21px); background: #fff; }
.boo-bascule:active .boo-bascule-noyau { width: 25px; }
.boo-bascule[data-actif="1"]:active .boo-bascule-noyau { transform: translateX(17px); }

/* Feuille du bas. */
.boo-voile {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.boo-feuille {
  background: var(--boo-surface);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px 24px 0 0;
  animation: booMonte .22s cubic-bezier(.2, .8, .2, 1);
}
.boo-poignee {
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  margin: 4px auto 12px;
}
.boo-ligne {
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  color: #F0EDFF;
  font-size: 15px;
  font-weight: 600;
}
.boo-separateur { height: 1px; background: var(--boo-bord); margin: 8px 10px; }

/* Titres. Display pour les annonces, sans pour tout le reste. */
.boo-display {
  font-family: var(--boo-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.boo-sourdine { color: var(--boo-sourd); font-size: 13px; line-height: 1.5; }
.boo-mono {
  font-family: var(--boo-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
}

/* Alerte. */
.boo-alerte {
  padding: 11px 13px;
  border-radius: 10px;
  background: rgba(255, 107, 107, 0.09);
  border: 1px solid rgba(255, 107, 107, 0.2);
  color: var(--boo-perdu);
  font-size: 13px;
  font-weight: 500;
}

/* ---------------------------------------------------------------------------
   Mouvement. Courtes, avec un leger depassement. Jamais une boucle perpetuelle
   sauf la roue, qui est le seul signal « il y a quelque chose a prendre ».
   --------------------------------------------------------------------------- */
@keyframes booMonte {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: none; }
}
@keyframes booFond {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes booGlisseHaut {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes booEntre {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@keyframes booNeuve {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes booGain {
  0% { transform: scale(0.84); opacity: 0; }
  55% { transform: scale(1.035); opacity: 1; }
  78% { transform: scale(0.99); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes booPresse {
  0% { transform: scale(1); }
  40% { transform: scale(0.95); }
  100% { transform: scale(1); }
}
@keyframes booTourne { to { transform: rotate(360deg); } }
@keyframes booSouffle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.62; }
}
@keyframes booRoue {
  0% { transform: rotate(0deg); }
  38% { transform: rotate(374deg); }
  46% { transform: rotate(360deg); }
  100% { transform: rotate(360deg); }
}
@keyframes booHalo {
  0%, 100% { opacity: 0; transform: scale(0.7); }
  20% { opacity: .55; transform: scale(1.25); }
  50% { opacity: 0; transform: scale(1.05); }
}
@keyframes booFav {
  0% { transform: scale(1); }
  26% { transform: scale(.78); }
  60% { transform: scale(1.22); }
  100% { transform: scale(1); }
}
@keyframes booOnde {
  0% { opacity: .9; transform: scale(.5); }
  100% { opacity: 0; transform: scale(2.05); }
}
@keyframes booReflet {
  0% { transform: translateX(-130%) skewX(-18deg); opacity: 0; }
  30% { opacity: 0.55; }
  70%, 100% { transform: translateX(230%) skewX(-18deg); opacity: 0; }
}

.boo-entre { animation: booEntre .2s ease; }
.boo-neuve { animation: booNeuve .26s ease; }
.boo-gain { animation: booGain .42s cubic-bezier(.2, .85, .3, 1); }
.boo-souffle { animation: booSouffle 1.9s ease-in-out infinite; }
.boo-roue { animation: booRoue 5.2s cubic-bezier(.16, .85, .3, 1) infinite; transform-origin: 50% 50%; }
.boo-halo {
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 203, 71, .5) 0%, rgba(255, 73, 191, .22) 55%, transparent 72%);
  animation: booHalo 5.2s ease-in-out infinite;
  pointer-events: none;
}
.boo-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  animation: booTourne .7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .boo-presse:active { transform: none; }
  .boo-pilule { transition: opacity .18s ease !important; }
  .boo-bascule-noyau { transition: background .2s ease; }
  .boo-entre, .boo-neuve, .boo-gain, .boo-roue, .boo-halo, .boo-souffle { animation: none; }
}