/* ================================
   8. BOUTONS
   ================================ */

/* Style général des boutons */
button,
.btn {
  display: inline-block;
  width: 200px;
  max-width: 100%;
  padding: 0.75rem 1.5rem;
  border: 1px solid #555;
  border-radius: 6px;
  background-color: #444;
  color: #f0f0f0;
  font-size: 1rem;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.4);
  margin: 1rem auto;
}

/* Variante petite taille */
.btn-small {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  width: auto;
  display: inline-block;
  padding: 0.4rem 0.8rem;
  margin: 0.5rem 0.2rem 0;
  font-size: 0.85rem;
  border-radius: 4px;
}

/* Hover : léger éclaircissement et élévation */
button:hover,
.btn:hover {
  background-color: #555;
  border-color: #666;
  transform: translateY(-1px);

  /* Effet néon bleu */
  box-shadow:
    0 0 8px rgba(0, 255, 255, 0.6),
    0 0 16px rgba(0, 255, 255, 0.4);
  text-shadow: 0 0 4px rgba(0, 255, 255, 0.7);
}

/* Active : enfoncé */
button:active,
.btn:active {
  background-color: #444;
  border-color: #555;
  transform: translateY(0);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

/* Bouton quit/bonus style sobre */
.quit-btn {
  background-color: #8b0000;
  border-color: #8b0000;
  color: #fff;
}

.quit-btn:hover {
  background-color: #a60000;
  border-color: #a60000;
}

.bonus-btn {
  background-color: #006400;
  border-color: #006400;
  color: #fff;
}

.bonus-btn:hover {
  background-color: #008000;
  border-color: #008000;
}

/* Style pour les petits boutons “dé” */
.btn-dice-small {
  /* dimensions carrées pour un rendu “bouton-icône” */
  width: 4rem;
  height: 4rem;
  padding: 0;           /* on centre juste l’emoji */
  font-size: 2.5rem;    /* ajuste la taille de l’emoji 🎲 */
  line-height: 1;       /* évite un décalage vertical */
  
  /* un peu de style conforme à tes autres boutons */
  background-color: #a0a0a0;
  color: #fff;
  border-radius: 30%;   /* rond */
  box-shadow: 0 2px 5px rgba(0,0,0,0.4);
  transition: transform 0.1s ease, box-shadow 0.2s ease;
}

/* 1) Boutons « standard » */
.btn {
  display: inline-flex;          /* pour centrer facilement */
  align-items: center;
  justify-content: center;
  width: auto;                   /* on enlève le 300px */
  min-width: 8rem;               /* largeur minimale */
  height: 2.8rem;                /* hauteur fixe */
  padding: 0 1rem;               /* padding horizontal */
  box-sizing: border-box;
}

/* 2) Boutons « icône seule » */
.btn-icon {
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
}

/* 3) On fixe la taille de l’icône à l’intérieur */
.btn-icon i,
.btn-icon svg {
  width: 1.4rem;   /* 1.4 × la taille de font par défaut */
  height: 1.4rem;
  flex-shrink: 0;  /* l’icône ne rapetisse pas */
}


/* Override du min-width hérité de .btn */
.btn-icon,
.chrono-controls .btn.chrono-icon {
  min-width: 0;          /* désactive l’ancien min-width */
  width: var(--control-btn-size);
  height: var(--control-btn-size);
  padding: 0;
}

/* si vous voulez une classe dédiée */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

/* inutile si --control-btn-size = 3rem,
   mais pour plus de clarté : */
.chrono-controls .btn.chrono-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}

.delete-btn {
  /* mêmes dimensions que .edit-btn */
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;

  /* centrage de l’icône */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* style rouge néon */
  background-color: #c0392b;
  border: 1px solid #922b21;
  color: #fff;
  border-radius: 4px;

  /* même taille de police que pour l’édit */
  font-size: 1.2rem;
  line-height: 1;

  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.delete-btn:hover {
  background-color: #e74c3c; /* éclairci au hover */
  transform: translateY(-1px);
}

.delete-btn:active {
  background-color: #922b21; /* un peu plus sombre en actif */
  transform: translateY(0);
}

.toggle-btn {
  background-color: #0ff;
  color: #111;
}
.toggle-btn:hover {
  background-color: #4dcfff;
}

.toggle-btn {
  font-size: 1rem;
  padding: 0.3rem 0.6rem;
  width: 250px;
  border-radius: 4px;
  background-color: #444;
  border: 1px solid #555;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.toggle-btn:hover {
  background-color: #555;
}

.edit-btn {
  /* dimensions fixes */
  width: 2.2rem;
  height: 2.2rem;

  /* plus de padding parasite */
  padding: 0;

  /* centrer l’icône en flex */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* style “néon” existant */
  background-color: #0ff;
  border: 1px solid #0cc;
  color: #111;
  border-radius: 4px;

  /* police assez grande pour remplir le carré */
  font-size: 1.2rem;
  line-height: 1;

  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

/* Hover / Active */
.edit-btn:hover {
  background-color: #0cc;
  transform: translateY(-1px);
}
.edit-btn:active {
  background-color: #0cc;
  transform: translateY(0);
}

.small-btn {
  padding: 0.25em 0.5em; /* réduit la taille */
  font-size: 0.9rem;
}

/*************************************** Boutons pied de page *******************************************/

.floating-button-group {
  position: fixed;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 16px;
  z-index: 9999;
}

.floating-square-btn {
  background-color: #1a1a1a;
  border: 2px solid #000000;
  width: 50px;
  height: 50px;
  border-radius: 8px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.floating-square-btn:hover {
  transform: scale(1.08);
  color: #0ff;
}

.floating-square-btn i {
  width: 24px;
  height: 24px;
}

.btn-topbar-mini {
  width: 2rem;
  height: 2rem;
  min-width: 0;
  padding: 0;
  font-size: 1.1rem;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.floating-square-btn[title="Accueil"] svg {
  stroke: #36ff21; /* couleur de l'icône */
}

/* Style commun : bouton icône rond, fond transparent */
.btn-dice-small,
.btn-fab {
  width: 4rem;
  height: 4rem;
  margin: 0 auto;     
  padding: 0;
  font-size: 2.5rem;
  line-height: 1;
  border-radius: 30%;
  color: #fff;
  box-shadow: 0 2px 5px rgba(143, 143, 143, 0.4);
  transition: transform .1s ease, box-shadow .2s ease;
}
.btn-dice-small:active,
.btn-fab:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* ── Dock visible qui englobe les dés ─────────────────────────── */
#dice-dock {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  top: 50%;
  transform: translateY(-50%);
  z-index: 12000;

  display: flex;
  padding: 12px;
  background: rgba(26,26,26,0.85);
  border: 2px solid #555;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}
#dice-dock.hidden { display: none; }

#dice-dock .dice-dock-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Les boutons dans le dock ne doivent pas être en position:fixed */
#dice-dock button {
  position: static !important;
  margin: 0;
}

/* Option “raccroché au bord droit” (tiroir) :
   décommente si tu veux coller le bloc au bord */
 /*
#dice-dock {
  right: 0;
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
*/

/* Desktop/tablette : collé à droite + centré verticalement */
@media (min-width: 481px) {
  #dice-dock {
    right: 0 !important;                 /* bord droit */
    top: 50% !important;                 /* centrage vertical */
    bottom: auto !important;
    transform: translateY(-50%) !important;

    border-right: 0;                     /* pas d'arrondi/bord à droite */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

    padding-right: max(12px, env(safe-area-inset-right)); /* encoche/safe area */

    /* sécurité si beaucoup de boutons */
    max-height: calc(100vh - 24px);
    overflow: auto;
  }
}

/* Mobile : collé à droite + CENTRÉ VERTICALEMENT */
@media (max-width: 480px) {
  #dice-dock {
    right: 0 !important;                 /* bord droit */
    top: 50% !important;                 /* centrage vertical */
    bottom: auto !important;
    transform: translateY(-50%) !important;

    /* pas d'arrondis à droite */
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

    /* marge pour l'encoche éventuelle */
    padding-right: max(12px, env(safe-area-inset-right));
  }

  /* Garde les boutons en ligne sur mobile (comme avant) */
  #dice-dock .dice-dock-inner {
    flex-direction: row;
    gap: 10px;
  }
}



/* Collé au bord droit + pas d'arrondis à droite */
#dice-dock {
  right: 0 !important;                 /* plus de marge de 12px */
  border-right: 0;                     /* pas de bord côté écran */
  border-top-right-radius: 0;          /* pas d’arrondi à droite */
  border-bottom-right-radius: 0;       /* pas d’arrondi à droite */
  padding-right: max(12px, env(safe-area-inset-right)); /* sécurité encoche */
}

/* --- Dock masqué quand vide --- */
#dice-dock.hidden { display: none !important; }

/* --- Empilement vertical des boutons (desktop + mobile) --- */
#dice-dock .dice-dock-inner {
  display: flex;
  flex-direction: column !important; /* pile verticale */
  align-items: center;
  gap: 12px;
}

/* --- Mobile: toujours centré verticalement et collé à droite, sans arrondis à droite --- */
@media (max-width: 480px) {
  #dice-dock {
    right: 0 !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;

    border-right: none !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    padding-right: max(12px, env(safe-area-inset-right));
  }

  /* Crucial: on retire l'ancien "row" si tu l'avais */
  #dice-dock .dice-dock-inner {
    flex-direction: column !important;
  }
}

/* === Bouton de dé unifié === */
.dice-btn {
  --size: 4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--size);
  height: var(--size);
  min-width: 0;
  padding: 0;
  margin: 0;                       /* annule le margin global des buttons */
  font-size: 2.5rem;
  line-height: 1;

  background: #a0a0a0;
  color: #fff;
  border: 1px solid #555;
  border-radius: 30%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.4);
  transition: transform .1s ease, box-shadow .2s ease;
}
.dice-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.45);
}
.dice-btn:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

/* Si jamais un dé a aussi .btn par mégarde, on neutralise le min-width/height hérités */
.dice-btn.btn {
  min-width: 0 !important;
  width: var(--size) !important;
  height: var(--size) !important;
  padding: 0 !important;
}

/* === FAB "La décision" — look sombre + transparent (glass) === */
.decision-fabs { z-index: 14000; } /* reste au-dessus du dice-dock */

/* Base : bouton rond translucide */
.decision-fabs .fab-decision{
  position: relative;
  width: 64px;
  height: 64px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%;
  color: #f5f5f5;                 /* icons Feather = currentColor */
  background:
    linear-gradient(135deg, rgba(30,30,30,0.66), rgba(10,10,10,0.55));
  backdrop-filter: blur(6px) saturate(125%);
  -webkit-backdrop-filter: blur(6px) saturate(125%);
  box-shadow:
    0 8px 24px rgba(0,0,0,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}

/* Icônes un poil plus grandes */
.decision-fabs .fab-decision i,
.decision-fabs .fab-decision svg{
  width: 26px; height: 26px;
}

/* Accents (couleur des icônes + halos) */
.decision-fabs .fab-decision.accept{
  --accent: 64, 224, 146;         /* vert doux */
  color: rgb(var(--accent));
}
.decision-fabs .fab-decision.refuse{
  --accent: 235, 87, 87;          /* rouge doux */
  color: rgb(var(--accent));
}

/* Halo léger autour du bouton au survol */
.decision-fabs .fab-decision:hover{
  transform: translateY(-2px) scale(1.03);
  background:
    linear-gradient(135deg, rgba(32,32,32,0.70), rgba(12,12,12,0.60));
  box-shadow:
    0 10px 28px rgba(0,0,0,0.5),
    0 0 18px rgba(var(--accent), .25),
    inset 0 0 0 1px rgba(255,255,255,0.06);
}

/* Clic : léger enfoncement */
.decision-fabs .fab-decision:active{
  transform: translateY(0) scale(0.98);
  box-shadow:
    0 4px 14px rgba(0,0,0,0.5),
    0 0 12px rgba(var(--accent), .2),
    inset 0 2px 6px rgba(0,0,0,0.5);
}

/* Accessibilité : anneau de focus propre */
.decision-fabs .fab-decision:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.12),
    0 0 0 6px rgba(var(--accent), .35),
    0 10px 25px rgba(0,0,0,.45);
}

/* Option : version "verre plus sombre" en mobile si tu veux */
@media (max-width: 480px){
  .decision-fabs .fab-decision{
    background:
      linear-gradient(135deg, rgba(22,22,22,0.70), rgba(8,8,8,0.60));
  }
}

/* Barre flottante centrée */
.decision-fabbar{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--fabbar-bottom, 100px) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: row !important;
  align-items: center;
  gap: 18px;
  z-index: 10000;
  pointer-events: none; /* le conteneur laisse passer, seuls les boutons captent */
  gap: var(--fab-gap, 5rem); /* variable d'écart */
}

/* Bouton rond sombre translucide, isolé de tout style global */
.fab-circle{
  all: unset;                       /* purge les styles hérités */
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: var(--fab-size, 64px) !important;
  height: var(--fab-size, 64px) !important;
  border-radius: 9999px !important;
  background: rgba(54, 54, 54, 0.46);   /* verre fumé */
  color: rgba(229,231,235,.92);     /* gris-200 */
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  cursor: pointer;
  pointer-events: auto;             /* réactive le clic */
  -webkit-tap-highlight-color: transparent;
  transition:
    transform .16s ease,
    box-shadow .2s ease,
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease;
}

/* Fallback si pas de backdrop-filter */
@supports not ((backdrop-filter: blur(10px))) {
  .fab-circle{ background: rgba(17,17,17,.70); }
}

/* Petit highlight spéculaire */
.fab-circle::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background: radial-gradient(120% 120% at 50% 0%,
              rgba(255,255,255,.12), rgba(255,255,255,0) 60%);
  pointer-events:none;
  mix-blend-mode: overlay;
}

/* Icônes Feather (une fois remplacées en SVG) */
.fab-circle svg,
.fab-circle i{
  width: 28px;
  height: 28px;
  stroke: currentColor;
}

/* Teintes d’accent (icône + halo à l’interaction) */
.fab-circle.accept{ --accent: 34 197 94; }   /* vert-500 */
.fab-circle.refuse{ --accent: 239 68 68; }   /* rouge-500 */

.fab-circle:hover,
.fab-circle:focus-visible{
  background: rgba(24,24,24,.60);
  color: rgb(var(--accent)); /* icon teintée */
  border-color: rgb(var(--accent) / .40);
  box-shadow:
    0 12px 36px rgba(0,0,0,.45),
    0 0 0 1.5px rgb(var(--accent) / .35),
    0 0 24px rgb(var(--accent) / .25);
  outline: none;
}

.fab-circle:focus-visible{
  /* anneau d’accessibilité discret en plus du halo coloré */
  box-shadow:
    0 12px 36px rgba(0,0,0,.45),
    0 0 0 2px rgba(255,255,255,.35),
    0 0 0 4px rgb(var(--accent) / .35),
    0 0 24px rgb(var(--accent) / .25);
}

/* Effet d’appui */
.fab-circle:active{
  transform: translateY(1px) scale(.96);
  box-shadow: 0 8px 24px rgba(0,0,0,.40);
}

/* Ordre explicite : accepter à gauche, refuser à droite */
.fab-circle.accept{ order: 1 !important; }
.fab-circle.refuse{ order: 2 !important; }

/* 1) Presets des accents (inchangé) */
.fab-circle.accept{ --accent: 34 197 94; }   /* vert-500 */
.fab-circle.refuse{ --accent: 239 68 68; }   /* rouge-500 */

/* 2) État par défaut TEINTÉ par l'accent (vert/rouge) */
.fab-circle.accept,
.fab-circle.refuse{
  background: linear-gradient(180deg,
              rgb(var(--accent) / .28),
              rgb(16 16 16 / .38));
  color: rgba(229,231,235,.92);                 /* texte/icône clair */
  border-color: rgb(var(--accent) / .40);
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgb(var(--accent) / .18);
}

/* 3) Survol & focus : on INTENSIFIE l'accent (même logique qu'actuellement) */
.fab-circle.accept:hover,
.fab-circle.accept:focus-visible,
.fab-circle.refuse:hover,
.fab-circle.refuse:focus-visible{
  background: linear-gradient(180deg,
              rgb(var(--accent) / .38),
              rgb(24 24 24 / .62));
  color: rgb(var(--accent));                    /* icône teintée accent */
  border-color: rgb(var(--accent) / .55);
  box-shadow:
    0 12px 36px rgba(0,0,0,.45),
    0 0 0 1.5px rgb(var(--accent) / .35),
    0 0 24px rgb(var(--accent) / .30);
  outline: none;
}

/* 4) Anneau d’accessibilité (si tu veux le garder, accentué) */
.fab-circle:focus-visible{
  box-shadow:
    0 12px 36px rgba(0,0,0,.45),
    0 0 0 2px rgba(255,255,255,.35),
    0 0 0 4px rgb(var(--accent) / .35),
    0 0 24px rgb(var(--accent) / .25);
}

/* 5) Effet d’appui (inchangé) */
.fab-circle:active{
  transform: translateY(1px) scale(.96);
  box-shadow: 0 8px 24px rgba(0,0,0,.40);
}

/* ——— Boutons dans le dock : NE DOIVENT PAS être fixed ——— */
#dice-dock #roll-chrono-dice-btn-1,
#dice-dock #roll-chrono-dice-btn-2,
#dice-dock #open-chrono-btn-inline,
#dice-dock #roll-dice-btn,
#dice-dock #buy-bonus-dock-btn {
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto !important;
}

/* Taille/présentation cohérentes dans la colonne du dock */
#dice-dock .btn-dice-small,
#dice-dock .dice-btn {
  width: 48px;
  height: 48px;
}

/* Petit confort de rendu pour l’animation du top */
#dice-dock { will-change: top; }

/* Poignée plus “drag-friendly” (facultatif) */
#dice-dock .dice-dock-handle {
  cursor: grab;
}
#dice-dock .dice-dock-handle:active {
  cursor: grabbing;
}

/* Le conteneur visible qui entoure les FAB */
.decision-fabbar .fabbar-frame{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--fab-gap, 18px);
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(20,20,20,.55);
  backdrop-filter: blur(8px) saturate(125%);
  -webkit-backdrop-filter: blur(8px) saturate(125%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  pointer-events: none;               /* le cadre ne capte pas les clics */
}

/* Les boutons doivent rester cliquables */
.decision-fabbar .fabbar-frame .fab-circle{
  pointer-events: auto;
}

/* Crée un contexte d’empilement pour que z-index fonctionne
   et que la frame puisse être derrière les boutons, mais devant la page */
.decision-fabbar {
  isolation: isolate;
}

/* Place la frame sous les boutons */
.decision-fabbar .fabbar-frame {
  position: relative;   /* nécessaire pour z-index */
  z-index: 0;
}

/* S'assure que les boutons sont au-dessus de la frame */
.decision-fabbar .fabbar-frame .fab-circle {
  position: relative;
  z-index: 1;
}

/* Les images à l'intérieur des FAB prennent la même taille que les SVG */
.fab-circle img.fab-icon,
.fab-circle svg,
.fab-circle i {
  width: 28px;
  height: 28px;
}

/* Rendu propre des images d'icônes */
.fab-circle img.fab-icon {
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Si tu utilises aussi l'œil dans un bouton "rectangulaire" .btn */
.btn img.fab-icon {
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0;
}