/* ------------------------------------------------------------------
   Facette · onglet Cycle de vente (07/10/2026)
   Que des variables de styles.css, plus les quatre couleurs des
   Statistiques (déjà validées pour les daltoniens sur les deux fonds),
   avec les mêmes rôles : signé = bleu, encaissé = vert. Ici :
   pub → 1er appel = violet, entre les appels = rose (le temps à
   réduire), dernier appel → oui = bleu, oui → paiement = vert,
   paiement attendu = hachures neutres.
   ------------------------------------------------------------------ */

#vue-cycle{--cy-pub:#8B66FA;--cy-appels:#F4467E;--cy-oui:#3D86F0;--cy-paye:#1FA884;--cy-attente:rgba(255,255,255,0.22);--cy-fond-doux:rgba(255,255,255,0.03)}
#vue-cycle .cy-vide{color:var(--texte-doux);font-size:14px;padding:6px 0}
#vue-cycle .cy-bandeau{border:1px solid rgba(255,154,61,.45);background:rgba(255,154,61,.10);border-radius:12px;padding:10px 14px;font-size:14px;margin-bottom:14px}

/* ---- la barre ---- */
#vue-cycle .cy-barre{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline;margin-bottom:14px}
#vue-cycle .cy-titre{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.4vw,28px);letter-spacing:-0.01em}
#vue-cycle .cy-sous{color:var(--texte-doux);font-size:14px}

/* ---- les cinq chiffres ---- */
#vue-cycle .cy-tuiles{display:grid;gap:10px;grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:14px}
#vue-cycle .cy-tuile{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:var(--rayon);border:1px solid var(--trait);background:var(--carte);min-width:0}
#vue-cycle .cy-tuile-etiquette{font-size:12px;color:var(--texte-faible);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
#vue-cycle .cy-tuile-valeur{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.4vw,30px);letter-spacing:-0.02em;line-height:1.15}
#vue-cycle .cy-tuile-detail{font-size:12.5px;color:var(--texte-doux)}
#vue-cycle .cy-tuile--fort{border-color:rgba(139,102,250,.50);background:linear-gradient(160deg,rgba(139,102,250,.18),var(--carte) 65%)}

/* ---- les cartes ---- */
#vue-cycle .cy-carte{border:1px solid var(--trait);border-radius:var(--rayon);background:var(--carte);padding:16px 17px;margin-bottom:14px;min-width:0}
#vue-cycle .cy-carte-tete{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;justify-content:space-between;margin-bottom:12px}
#vue-cycle .cy-carte-tete h3{font-family:var(--display);font-size:17px;font-weight:700}
#vue-cycle .cy-legende{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--texte-doux)}
#vue-cycle .cy-legende span{display:inline-flex;align-items:center;gap:6px}
#vue-cycle .cy-legende-texte{font-size:12.5px;color:var(--texte-faible)}
#vue-cycle .cy-cle{display:inline-block;width:11px;height:11px;border-radius:3px}
#vue-cycle .cy-note{font-size:12px;color:var(--texte-faible);margin-top:8px}
#vue-cycle .cy-constat{font-size:13.5px;color:var(--texte-doux);margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--cy-fond-doux);border:1px solid var(--trait)}
#vue-cycle .cy-constat b{color:var(--texte)}

/* les couleurs des morceaux */
#vue-cycle .cy-m-pub{background:var(--cy-pub)}
#vue-cycle .cy-m-appels{background:var(--cy-appels)}
#vue-cycle .cy-m-oui{background:var(--cy-oui)}
#vue-cycle .cy-m-paye{background:var(--cy-paye)}
#vue-cycle .cy-m-attente{background:repeating-linear-gradient(135deg,var(--cy-attente) 0 4px,transparent 4px 8px);box-shadow:inset 0 0 0 1px var(--cy-attente)}

/* ---- client par client ---- */
#vue-cycle .cy-clients{list-style:none;margin:0;padding:0;display:grid;gap:2px}
#vue-cycle .cy-client{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:minmax(120px,190px) 1fr minmax(64px,auto);gap:14px;align-items:center;padding:9px 8px;border-radius:10px;cursor:pointer;font-size:14px}
#vue-cycle .cy-client:hover,#vue-cycle li.ouvert .cy-client{background:var(--cy-fond-doux)}
#vue-cycle .cy-client:focus-visible{outline:2px solid var(--violet);outline-offset:-2px}
#vue-cycle .cy-client-nom{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#vue-cycle .cy-client-nom small{display:block;font-weight:400;font-size:11.5px;color:var(--texte-faible);white-space:normal}
#vue-cycle .cy-client-barre{display:flex;gap:2px;height:14px;min-width:0}
#vue-cycle .cy-client-barre i{display:block;height:100%;min-width:3px;border-radius:3px}
#vue-cycle .cy-client-total{font-family:var(--mono);font-size:13.5px;text-align:right;white-space:nowrap}
#vue-cycle .cy-attente-texte{color:var(--texte-doux);font-family:var(--corps);font-size:12.5px}

/* le détail d'un client : ses dates une par une */
#vue-cycle .cy-detail{padding:6px 8px 14px}
#vue-cycle .cy-etapes{list-style:none;margin:0;padding:0 0 0 4px;display:grid;gap:0}
#vue-cycle .cy-etapes li{display:grid;grid-template-columns:84px 14px minmax(0,1fr) auto;gap:10px;align-items:center;padding:5px 0;font-size:13.5px;position:relative}
#vue-cycle .cy-etapes li::before{content:'';grid-column:2;grid-row:1;width:10px;height:10px;border-radius:50%;background:var(--texte-faible);justify-self:center}
#vue-cycle .cy-etapes li:not(:last-child)::after{content:'';position:absolute;left:calc(4px + 84px + 10px + 6px);top:calc(50% + 6px);height:calc(100% - 4px);width:2px;background:var(--trait-fort)}
#vue-cycle .cy-etapes .cy-pt-arrivee::before{background:var(--cy-pub)}
#vue-cycle .cy-etapes .cy-pt-appel::before{background:var(--cy-appels)}
#vue-cycle .cy-etapes .cy-pt-oui::before{background:var(--cy-oui)}
#vue-cycle .cy-etapes .cy-pt-paye::before{background:var(--cy-paye)}
#vue-cycle .cy-etapes .cy-pt-attente::before{background:transparent;box-shadow:inset 0 0 0 2px var(--cy-attente)}
#vue-cycle .cy-ecart{grid-column:1;grid-row:1;text-align:right;font-family:var(--mono);font-size:12.5px;color:var(--texte-doux);white-space:nowrap}
#vue-cycle .cy-pt-nom{grid-column:3;grid-row:1;font-weight:600}
#vue-cycle .cy-pt-date{grid-column:4;grid-row:1;color:var(--texte-doux);text-align:right}

/* ---- entre les rendez-vous ---- */
#vue-cycle .cy-lignes{list-style:none;margin:0;padding:0;display:grid;gap:12px}
#vue-cycle .cy-lignes li{display:grid;grid-template-columns:minmax(160px,260px) 1fr minmax(120px,auto);gap:14px;align-items:center;font-size:14px}
#vue-cycle .cy-ligne-nom{font-weight:600}
#vue-cycle .cy-ligne-nom small,#vue-cycle .cy-ligne-valeur small{display:block;font-weight:400;font-size:11.5px;color:var(--texte-faible)}
#vue-cycle .cy-ligne-barre{height:12px;display:block}
#vue-cycle .cy-ligne-barre i{display:block;height:100%;min-width:3px;border-radius:0 4px 4px 0}
#vue-cycle .cy-ligne-valeur{font-family:var(--mono);font-size:13.5px;text-align:right;white-space:nowrap}
#vue-cycle .cy-ligne-valeur small{font-family:var(--corps)}

/* ---- écrans moyens et téléphone ---- */
@media (max-width:1180px){
  #vue-cycle .cy-tuiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  #vue-cycle .cy-tuile:first-child{grid-column:1/-1}
}
@media (max-width:760px){
  #vue-cycle .cy-tuile{padding:12px}
  #vue-cycle .cy-tuile-valeur{font-size:21px}
  #vue-cycle .cy-carte{padding:14px 12px}
  #vue-cycle .cy-client{grid-template-columns:1fr auto;gap:6px 10px}
  #vue-cycle .cy-client-barre{grid-column:1/-1;grid-row:2}
  #vue-cycle .cy-lignes li{grid-template-columns:1fr auto;gap:4px 10px}
  #vue-cycle .cy-ligne-barre{grid-column:1/-1;grid-row:2}
  #vue-cycle .cy-etapes li{grid-template-columns:76px 14px minmax(0,1fr);row-gap:0}
  #vue-cycle .cy-etapes li:not(:last-child)::after{left:calc(4px + 76px + 10px + 6px)}
  #vue-cycle .cy-pt-date{grid-column:3;grid-row:2;text-align:left;font-size:12.5px}
}

/* ---- fond clair : les mêmes rôles, des pas plus foncés (ceux des Statistiques) ---- */
html[data-theme="clair"] #vue-cycle{--cy-pub:#6E3AF7;--cy-appels:#D6336C;--cy-oui:#2563EB;--cy-paye:#0E8F6A;--cy-attente:rgba(60,42,20,0.30);--cy-fond-doux:rgba(60,42,20,0.04)}
html[data-theme="clair"] #vue-cycle .cy-tuile--fort{border-color:rgba(110,58,247,.35);background:linear-gradient(160deg,rgba(110,58,247,.08),var(--carte) 65%)}