/* Le cours du coach : styles propres à cette page (la barre et l'agent viennent de tresorerie.css). */
.co-page { max-width: 1140px; margin: clamp(24px, 6vh, 56px) auto 60px; padding: 0 clamp(16px, 4vw, 40px); }
.co-etapes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.co-scene { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 16px; align-items: start; }
.co-agent { min-height: 560px; }

/* Le téléphone du coach */
.co-tel { border: 10px solid var(--ink); border-radius: 46px; background: var(--ink); box-shadow: 0 30px 60px -20px rgba(15,15,14,.35); }
.co-ecran { height: 640px; overflow: hidden; background: var(--bg); border-radius: 36px; padding: 20px 16px; }
.co-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.co-tete .mark { font-size: 14px; }
.co-tete .s { font: 500 11px/1 var(--mono); }
.co-titre { font: 600 24px/1.1 var(--sans); letter-spacing: -.035em; animation: apparait .4s var(--ease) both; }
.co-liste { list-style: none; display: grid; gap: 6px; margin-top: 14px; }
.co-liste.petit { margin-top: 12px; }
.co-el { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; background: var(--white); border-radius: 14px; padding: 9px 12px; box-shadow: var(--shadow); }
.co-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #f9e8d9; color: #a6541c; font-weight: 600; font-size: 14px; }
.co-nom { font-size: 14px; font-weight: 500; display: grid; }
.co-nom .s { font-size: 11px; margin: 0; }
.co-info, .co-note { grid-column: 2 / -1; font-size: 12px; color: var(--clay); opacity: 0; max-height: 0; overflow: hidden; transition: opacity .4s, max-height .4s; }
.co-note { color: #276b3c; }
.co-info.on, .co-note.on { opacity: 1; max-height: 40px; }
.co-rond { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #dcd9d2; position: relative; }
.co-rond.present { background: #3f9a5a; border-color: #3f9a5a; }
.co-rond.present::after { content: ""; position: absolute; left: 9px; top: 4px; width: 6px; height: 12px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.co-rond.absent { border-color: var(--clay); background: #fbe3dc; }
.co-rond.excuse { border-style: dashed; border-color: #b9b5ad; }
.co-pied { margin-top: 12px; font: 500 12px/1 var(--mono); color: var(--soft); text-align: center; }
.co-saisie { margin-top: 14px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: 14px; line-height: 1.5; min-height: 92px; }
.co-curseur { display: inline-block; width: 2px; height: 1em; background: var(--clay); vertical-align: -2px; animation: battre .8s steps(1) infinite; }
@keyframes battre { 50% { opacity: 0; } }
.co-saisie + .s { font-size: 12px; margin-top: 6px; }
.co-msgs { display: grid; gap: 10px; margin-top: 12px; }
.co-msg { animation: apparait .4s var(--ease) both; }
.co-msg .mini { margin: 0 0 4px; }
.co-msg .bulle { max-width: 100%; font-size: 13px; background: var(--white); box-shadow: var(--shadow); }
.co-bilans { display: grid; gap: 6px; margin-top: 12px; }
.co-bilan { display: grid; gap: 2px; background: var(--white); border-radius: 12px; padding: 9px 12px; box-shadow: var(--shadow); font-size: 12px; line-height: 1.4; animation: apparait .4s var(--ease) both; }
.co-bilan b { font-size: 13px; }
.co-bilan span { color: #44423d; }
.co-valider { margin-top: 12px; width: 100%; justify-content: center; pointer-events: none; animation: apparait .4s var(--ease) both; }
.co-ok { display: block; margin-top: 12px; text-align: center; }

@media (max-width: 900px) {
  .co-scene { grid-template-columns: minmax(0, 1fr); }
  .co-tel { max-width: 390px; margin: 0 auto; width: 100%; }
  .co-agent { min-height: 0; }
}
@media (max-width: 640px) {
  .co-etapes { grid-column: 1 / -1; }
  .co-tel { border-width: 6px; border-radius: 32px; }
  .co-ecran { height: 620px; border-radius: 26px; }
}
@media (prefers-reduced-motion: reduce) { .co-curseur { display: none; } }
/* Les 6 bilans doivent tenir dans l'écran du téléphone ; s'il manque de place, l'écran défile. */
.co-ecran { overflow-y: auto; }
.co-bilans { gap: 5px; margin-top: 10px; }
.co-bilan { padding: 7px 10px; font-size: 11.5px; line-height: 1.35; }
.co-bilan b { font-size: 12px; }
.co-bilan span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Six moments maintenant */
.co-etapes { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* Le filet : la notification sur l'écran verrouillé */
.co-ecran.noir { padding: 0; background: linear-gradient(160deg, #2b2a27, #0f0f0e); }
.co-verrou { height: 100%; padding: 56px 16px; color: #fff; text-align: center; }
.co-heure { font: 300 64px/1 var(--sans); letter-spacing: -.04em; }
.co-verrou > .s { color: #a3a09a; margin-top: 4px; }
.co-notif { margin-top: 40px; text-align: left; background: #3a3935; border-radius: 18px; padding: 14px; animation: apparait .5s var(--ease) both; }
.co-notif .mini { color: #c9c6bf; margin: 0 0 6px; }
.co-notif-t { font-size: 15px; font-weight: 500; }
.co-notif-b { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; }
.co-b { text-align: center; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.18); font-size: 14px; transition: background-color .2s, transform .2s; }
.co-b.touche { background: #3f9a5a; transform: scale(.96); }
.co-ecran.noir { position: relative; overflow: hidden; }
.co-ici { margin-top: 8px; font: 500 11px/1 var(--mono); letter-spacing: .04em; color: #a3a09a; }
.co-notif { transition: transform .2s, background-color .2s; }
.co-notif.touche { transform: scale(.97); background: #4a4842; }
.co-appli { position: absolute; inset: 0; padding: 56px 16px 16px; background: #f4f2ee; color: var(--ink); text-align: left; animation: co-monte .35s var(--ease) both; }
.co-appli .mini { margin: 0 0 14px; }
.co-appli-t { font: 600 20px/1.25 var(--sans); letter-spacing: -.02em; }
.co-appli .co-notif-b { margin-top: 20px; }
.co-appli .co-b { background: var(--white); box-shadow: inset 0 0 0 1px var(--line); padding: 14px; }
.co-appli .co-b.touche { background: #3f9a5a; color: #fff; }
@keyframes co-monte { from { transform: translateY(100%); } }