/* =====================================================================================
 *  LES ÉCHANGES AVEC L'ENTRAÎNEUR — boutons de réponse (05/10/2026)
 *  -------------------------------------------------------------------------------------
 *  Demande de Ju : « revois le design des boutons pour l'adapter au mieux au thème du jeu ».
 *  Avant : des boutons « .btn green » plein vert fluo, alignés à gauche, tous pareils, le
 *  montant collé au texte et une jauge chiffrée en retour (« moral +11 »).
 *  Désormais, la charte du jeu : pelouse de nuit (dégradé terrain du hero coach), onglets
 *  verts, or pour l'argent, rouge réservé à ce qui rompt. Chaque réponse est une carte
 *  tactile (≥ 52 px de haut, 390 px confortables), avec un repère de couleur selon ce
 *  qu'elle engage et le prix à part, dans une pastille or.
 *  Fichier dédié : public/index.html ne fait que l'inclure. Logique : coach-messages.js.
 * ===================================================================================== */
.cm-rdv, .cm-dial, .cm-suivi {
  --cm-vert: #3ddc97; --cm-vert2: #1fa971; --cm-or: #f4c04a; --cm-or2: #ffe08a;
  --cm-rouge: #ff5c72; --cm-ciel: #4db8ff; --cm-ambre: #fb923c; --cm-ligne: #ffffff17;
  --cm-fond: #0f1a30; --cm-carte: #13203a;
}

/* ---------------------------------------------------------------- LA DEMANDE D'ENTRETIEN */
.cm-rdv {
  position: relative; overflow: hidden; border-radius: 18px; margin-bottom: 14px; padding: 16px 16px 14px;
  border: 1px solid #3ddc9755;
  background:
    radial-gradient(circle at 50% -40px, transparent 64px, #ffffff0f 65px, #ffffff0f 66px, transparent 67px),
    linear-gradient(90deg, transparent calc(50% - .5px), #ffffff0b calc(50% - .5px), #ffffff0b calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(160deg, #0f3b2c 0%, #0c2230 52%, #0b1530 100%);
  box-shadow: 0 12px 30px #0007, inset 0 1px 0 #ffffff10;
  animation: cmEntre .5s cubic-bezier(.16, 1, .3, 1) both;
}
.cm-rdv::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--cm-vert), var(--cm-vert2));
}
@keyframes cmEntre { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
.cm-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 12px }
.cm-ini {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: 800 15px var(--font-disp, 'Chakra Petch', sans-serif); color: #062117;
  background: linear-gradient(135deg, var(--cm-vert), #2a63c9); box-shadow: 0 0 0 3px #3ddc9726;
}
.cm-kick { font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--cm-vert); font-weight: 700 }
.cm-titre { font: 700 19px/1.2 var(--font-disp, 'Chakra Petch', sans-serif); color: #fff; margin-top: 2px }
.cm-texte {
  white-space: pre-line; font-size: 14.5px; line-height: 1.55; color: #e6edf9;
  padding: 12px 14px; border-radius: 12px; background: #0008; border: 1px solid var(--cm-ligne); margin-bottom: 14px;
}
.cm-note { font-size: 12px; color: #a9b8d6; margin-top: 10px; line-height: 1.4 }

/* ---------------------------------------------------------------- LES RÉPONSES */
.cm-reps { display: flex; flex-direction: column; gap: 9px }
.cm-rep {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative;
  display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 12px;
  width: 100%; min-height: 52px; padding: 11px 14px 11px 12px; border-radius: 14px;
  background: linear-gradient(180deg, #172744, #121e37); border: 1px solid var(--cm-ligne);
  color: #fff; font-size: 14.5px; font-weight: 600; line-height: 1.3; text-align: left;
  transition: transform .15s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
  animation: cmEntre .45s cubic-bezier(.16, 1, .3, 1) both;
}
.cm-rep:nth-child(2) { animation-delay: .05s } .cm-rep:nth-child(3) { animation-delay: .1s }
.cm-rep:nth-child(4) { animation-delay: .15s } .cm-rep:nth-child(5) { animation-delay: .2s }
.cm-rep .cm-pt { width: 10px; height: 10px; border-radius: 50%; background: #8ea0cf; box-shadow: 0 0 0 4px #8ea0cf22 }
.cm-rep .cm-lib { min-width: 0 }
.cm-rep .cm-lib small { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; color: #a9b8d6 }
.cm-rep .cm-prix {
  justify-self: end; white-space: nowrap; font: 700 13px var(--font-num, 'Rajdhani', sans-serif); letter-spacing: .3px;
  padding: 5px 10px; border-radius: 999px; color: #241a00;
  background: linear-gradient(180deg, var(--cm-or2), var(--cm-or)); box-shadow: 0 2px 8px #f4c04a33;
}
.cm-rep .cm-prix.gain { color: #062117; background: linear-gradient(180deg, #8ff0c4, var(--cm-vert)) }
.cm-rep .cm-prix.reserve { color: var(--cm-or2); background: #f4c04a1a; border: 1px solid #f4c04a66; box-shadow: none }
.cm-rep:hover:not([disabled]) { border-color: #3ddc9788; background: linear-gradient(180deg, #1b2f52, #142440); box-shadow: 0 6px 18px #0006 }
.cm-rep:active:not([disabled]) { transform: scale(.985) }
.cm-rep:focus-visible { outline: 2px solid var(--cm-vert); outline-offset: 2px }
.cm-rep[disabled] { cursor: default; opacity: .5 }
.cm-rep[disabled] .cm-prix { background: #ff5c7222; color: #ffb3bd; box-shadow: none; border: 1px solid #ff5c7255 }
.cm-rep.envoi { pointer-events: none; opacity: .7 }

/* Le repère dit ce que la réponse engage. */
.cm-rep.st-soutien .cm-pt { background: var(--cm-vert); box-shadow: 0 0 0 4px #3ddc9726 }
.cm-rep.st-soutien { border-color: #3ddc9733 }
.cm-rep.st-argent .cm-pt, .cm-rep.st-mandat .cm-pt { background: var(--cm-or); box-shadow: 0 0 0 4px #f4c04a26 }
.cm-rep.st-argent { border-color: #f4c04a33 }
.cm-rep.st-mandat { border: 1px dashed #f4c04a88; background: linear-gradient(180deg, #2a2412, #1a1a24) }
.cm-rep.st-staff .cm-pt { background: var(--cm-ciel); box-shadow: 0 0 0 4px #4db8ff26 }
.cm-rep.st-staff { border-color: #4db8ff33 }
.cm-rep.st-jeunes .cm-pt { background: #5eead4; box-shadow: 0 0 0 4px #5eead426 }
.cm-rep.st-dur .cm-pt { background: var(--cm-ambre); box-shadow: 0 0 0 4px #fb923c26 }
.cm-rep.st-danger { border-color: #ff5c7277; background: linear-gradient(180deg, #2a1220, #1b0f1a); color: #ffd3d9 }
.cm-rep.st-danger .cm-pt { background: var(--cm-rouge); box-shadow: 0 0 0 4px #ff5c7230 }
.cm-rep.st-danger:hover:not([disabled]) { border-color: var(--cm-rouge); background: linear-gradient(180deg, #3a1526, #24101c) }

/* ---------------------------------------------------------------- LA FENÊTRE DE DIALOGUE */
.cm-dial .cm-tete { padding-right: 34px }
.cm-dial .cm-texte { background: linear-gradient(160deg, #0f3b2c55, #0b153088) }

/* ---------------------------------------------------------------- CE QUI COURT ENCORE */
.cm-suivi {
  border-radius: 16px; padding: 14px 16px; margin-bottom: 14px;
  background: linear-gradient(160deg, #1d1a0c, #121a2c 70%); border: 1px solid #f4c04a44;
}
.cm-suivi h4 { margin: 0 0 8px; font: 700 12px var(--font-disp, 'Chakra Petch', sans-serif); letter-spacing: 1.2px; text-transform: uppercase; color: var(--cm-or) }
.cm-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 0; border-top: 1px solid var(--cm-ligne); font-size: 13.5px }
.cm-ligne:first-of-type { border-top: 0 }
.cm-ligne b { color: #fff } .cm-ligne span { color: #c8d4ec } .cm-ligne em { font-style: normal; color: var(--cm-or2); white-space: nowrap; font-weight: 700 }

/* ---------------------------------------------------------------- LE RETOUR APRÈS UNE DÉCISION */
.cm-toast b { display: block; margin-bottom: 3px }
.cm-toast span { opacity: .85; font-size: .92em }

/* ---------------------------------------------------------------- LE DILEMME DE L'ENTRAÎNEUR (pop-up) */
/* La carte en pop-up (index.html, .dil-ov) garde son décor ; ses choix prennent le même
   langage que les entretiens : repère vert, prix en or, cible tactile confortable. */
.dil-coach .dil-choix button {
  position: relative; min-height: 54px; padding: 12px 14px 12px 34px; border-radius: 14px;
  background: linear-gradient(180deg, #11301f, #0b1d16); border: 1px solid #4ade8033;
}
.dil-coach .dil-choix button::before {
  content: ""; position: absolute; left: 14px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
  background: var(--a, #4ade80); box-shadow: 0 0 0 4px rgba(74, 222, 128, .16);
}
.dil-coach .dil-choix button:hover { background: linear-gradient(180deg, #164029, #0e2519); border-color: var(--a, #4ade80); transform: none }
.dil-coach .dil-choix button:active { transform: scale(.985) }
.dil-coach .dil-choix button small { color: #b9d8c6 }
.dil-coach .dil-choix button.pris { border-color: var(--a, #4ade80); background: linear-gradient(180deg, #1b4d31, #10291c) }
.dil-coach .dil-tard { min-height: 44px; padding: 0 18px; font-size: 13.5px }
.dil-coach .dil-suite { min-height: 50px }
.dil-a-coach-demission .dil-choix button { background: linear-gradient(180deg, #2a1414, #170b0b); border-color: #ff6b6b33 }
.dil-a-coach-demission .dil-choix button::before { background: #ff8f8f; box-shadow: 0 0 0 4px rgba(255, 107, 107, .16) }
.dil-a-coach-demission .dil-choix button:hover { background: linear-gradient(180deg, #3a1a1a, #200e0e); border-color: #ff8f8f }
.dil-a-coach-crise .dil-choix button::before { background: #fb923c; box-shadow: 0 0 0 4px rgba(251, 146, 60, .18) }

@media (max-width: 560px) {
  .cm-rdv { padding: 14px 12px 12px 14px; border-radius: 16px }
  .cm-titre { font-size: 17px }
  .cm-texte { font-size: 14px; padding: 11px 12px }
  .cm-rep { grid-template-columns: 10px 1fr; font-size: 14px; padding: 12px 12px 12px 11px }
  .cm-rep .cm-prix { grid-column: 2; justify-self: start; margin-top: 2px }
}
@media (prefers-reduced-motion: reduce) { .cm-rdv, .cm-rep { animation: none } }