/* L'encart « Mes RDV » : ce qui vient, et de quoi y entrer.
 *
 * Feuille à part, et pour les raisons de copilote.css : `finitions.css` est
 * tenue en ajout de fin de fichier par convention et un encart entier y serait
 * noyé ; et celui-ci doit pouvoir être retiré d'un lot sans toucher à une
 * feuille que toute l'application partage.
 *
 * ── Pourquoi il ne ressemble pas au copilote, alors qu'il est juste au-dessus
 *
 * Le copilote est une BANDE de cinq colonnes : cinq nombres à comparer d'un
 * regard, chacun à sa place, l'œil apprenant la position. Les rendez-vous ne
 * se comparent pas, ils se lisent dans l'ordre du temps — une liste, donc, et
 * des lignes. Leur donner cinq colonnes aurait fait deux bandes jumelles dont
 * l'une aurait menti sur sa nature.
 *
 * Ce qui est COMMUN est ce qui doit l'être, et rien de plus : la même
 * bordure, le même rayon, le même fond de carte, les mêmes variables de
 * couleur, la même marge basse de 16 px, le même turquoise pour ce qui
 * s'ouvre, le même gris pour ce qui ne presse pas, la même ligne
 * d'empêchement et le même bouton « Réessayer ». Les deux encarts se lisent
 * comme une seule chose empilée, sans se copier.
 *
 * Tous les sélecteurs sont en « rdv-visio- ». Aucun ne redéfinit quoi que ce
 * soit de main.css, lisa.css, finitions.css ou copilote.css.
 */

.rdv-visio {
  display: block;
  margin: 0 0 16px;
  background: var(--fond-carte, #fff);
  border: 1px solid var(--bordure, #e2e8f0);
  border-radius: 10px;
  overflow: hidden;
}

/* `hidden` ne suffit pas à masquer un élément qui porte un `display` : il faut
 * le dire. L'encart naît caché dans `index.html` — c'est le JavaScript qui le
 * montre, et lui seul sait s'il y a quelque chose à montrer. */
.rdv-visio[hidden] { display: none; }

.rdv-visio-tete {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--bordure, #e2e8f0);
}

.rdv-visio-nom {
  font-size: .82rem;
  font-weight: 600;
  color: var(--texte, #0f172a);
}

/* « Planifier » est poussé au bout de la ligne et reste discret : c'est une
 * commande qu'on cherche quand on en a besoin, pas une invitation permanente
 * à remplir l'agenda. */
.rdv-visio-planifier {
  margin-left: auto;
  padding: 3px 10px;
  border: 1px solid var(--bordure, #e2e8f0);
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: .76rem;
  color: var(--texte-doux, #475569);
  cursor: pointer;
}

.rdv-visio-planifier:hover { background: var(--fond-survol, #f8fafc); }
.rdv-visio-planifier[aria-expanded="true"] {
  border-color: var(--turquoise, #17a2a2);
  color: var(--turquoise, #17a2a2);
}

/* « Tout voir » porte le `margin-left: auto` et non « Planifier », pour que les
 * deux boutons restent COLLÉS au bout de la ligne : le second `auto` est sans
 * effet quand le premier a déjà poussé le groupe à droite. Même procédé que
 * « Annuler » et « Rejoindre » sur une ligne de rendez-vous, plus bas. */
.rdv-visio-portee {
  margin-left: auto;
  padding: 3px 10px;
  border: 1px solid var(--bordure, #e2e8f0);
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: .76rem;
  color: var(--texte-doux, #475569);
  cursor: pointer;
}

.rdv-visio-portee:hover { background: var(--fond-survol, #f8fafc); }

/* Enfoncé, il annonce qu'on ne regarde PLUS la semaine : l'encart ne dit pas la
 * même chose selon l'état, et rien d'autre à l'écran ne le signale. */
.rdv-visio-portee[aria-pressed="true"] {
  border-color: var(--turquoise, #17a2a2);
  color: var(--turquoise, #17a2a2);
}

/* ── Les lignes ──────────────────────────────────────────────────────────── */

.rdv-visio-liste { margin: 0; padding: 0; list-style: none; }

.rdv-visio-ligne {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--bordure, #e2e8f0);
  font-size: .8rem;
}

.rdv-visio-ligne:last-child { border-bottom: 0; }

/* L'heure d'abord, et en chiffres tabulaires : c'est la colonne que l'œil
 * suit en descendant la liste, et des chiffres de largeurs inégales la font
 * onduler. */
.rdv-visio-quand {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--texte, #0f172a);
  white-space: nowrap;
}

.rdv-visio-intitule { color: var(--texte, #0f172a); }

.rdv-visio-gens {
  font-size: .74rem;
  color: var(--texte-faible, #94a3b8);
}

/* Un rendez-vous en cours porte un filet turquoise à gauche. C'est la seule
 * marque de couleur de la liste : la couleur ne sert qu'à ce qui se passe
 * MAINTENANT, sans quoi elle cesse de vouloir dire quelque chose. */
.rdv-visio-ligne[data-encours="oui"] {
  border-left: 3px solid var(--turquoise, #17a2a2);
  background: var(--fond-survol, #f8fafc);
}

/* L'annulé reste lisible mais s'efface : il est là pour répondre à « où est
 * passé le rendez-vous de 14 h », pas pour occuper l'attention. Barré ET
 * grisé, parce que le barré seul se perd sur un petit écran. */
.rdv-visio-ligne[data-annule="oui"] .rdv-visio-quand,
.rdv-visio-ligne[data-annule="oui"] .rdv-visio-intitule {
  text-decoration: line-through;
  color: var(--texte-faible, #94a3b8);
  font-weight: 400;
}

.rdv-visio-annule {
  font-size: .74rem;
  color: var(--texte-doux, #475569);
}

.rdv-visio-ouvert {
  font-size: .74rem;
  color: var(--turquoise, #17a2a2);
}

/* ── Les commandes d'une ligne ───────────────────────────────────────────── */

/* « Rejoindre » est le seul élément plein de l'encart, et il n'apparaît que
 * dans la fenêtre où il fonctionne — dix minutes avant, un quart d'heure après
 * la fin. C'est le serveur qui en décide : rien ici ne grise un bouton, il est
 * présent ou absent. Un bouton grisé se lit comme une panne ou un droit
 * manquant, jamais comme « pas encore l'heure ». */
.rdv-visio-rejoindre {
  margin-left: auto;
  padding: 4px 14px;
  border: 0;
  border-radius: 6px;
  background: var(--turquoise, #17a2a2);
  color: #fff;
  font: inherit;
  font-size: .76rem;
  font-weight: 600;
  cursor: pointer;
}

.rdv-visio-rejoindre:hover { filter: brightness(1.08); }
.rdv-visio-rejoindre:disabled { opacity: .6; cursor: default; }

.rdv-visio-annuler,
.rdv-visio-plus,
.rdv-visio-reprendre,
.rdv-visio-renoncer {
  padding: 3px 10px;
  border: 1px solid var(--bordure, #e2e8f0);
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: .74rem;
  color: var(--texte-doux, #475569);
  cursor: pointer;
}

.rdv-visio-annuler:hover,
.rdv-visio-plus:hover,
.rdv-visio-reprendre:hover,
.rdv-visio-renoncer:hover { background: var(--fond-survol, #f8fafc); }

.rdv-visio-annuler:disabled { opacity: .6; cursor: default; }

/* `auto` sur les deux fait que « Annuler » reste au bout quand il n'y a pas de
 * « Rejoindre » — le second `auto` est sans effet quand le premier a déjà
 * poussé le groupe à droite. */
.rdv-visio-annuler { margin-left: auto; }

.rdv-visio-plus { margin: 8px 12px; }

.rdv-visio-vide {
  padding: 10px 12px;
  font-size: .78rem;
  color: var(--texte-faible, #94a3b8);
}

/* Le mot de l'encart : ce que le serveur vient de refuser, ou ce qu'il faut
 * faire ensuite. Vide la plupart du temps, et sans hauteur quand il est vide
 * — une bande réservée à un message absent fait flotter l'encart. */
.rdv-visio-mot:not(:empty) {
  padding: 8px 12px;
  border-top: 1px solid var(--bordure, #e2e8f0);
  font-size: .76rem;
  color: var(--texte-doux, #475569);
}

/* ── Le formulaire ───────────────────────────────────────────────────────── */

.rdv-visio-formulaire {
  padding: 10px 12px;
  border-top: 1px solid var(--bordure, #e2e8f0);
  background: var(--fond-survol, #f8fafc);
}

.rdv-visio-rangee {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rdv-visio-champ {
  padding: 4px 8px;
  border: 1px solid var(--bordure, #e2e8f0);
  border-radius: 6px;
  background: var(--fond-carte, #fff);
  font: inherit;
  font-size: .78rem;
}

/* L'intitulé prend la place qui reste ; le jour, l'heure et la durée gardent
 * la leur. Sans cette répartition, le champ de texte tombe à la ligne suivante
 * dès qu'on réduit un peu la fenêtre. */
.rdv-visio-rangee .rdv-visio-champ:first-child { flex: 1 1 14rem; }
.rdv-visio-champ--court { flex: 0 0 auto; }

.rdv-visio-gens-choix {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 8px;
}

.rdv-visio-case {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .78rem;
  color: var(--texte-doux, #475569);
  cursor: pointer;
}

.rdv-visio-mot-formulaire {
  margin-top: 6px;
  font-size: .76rem;
  color: var(--texte-doux, #475569);
}

.rdv-visio-commandes {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.rdv-visio-poser {
  padding: 4px 14px;
  border: 0;
  border-radius: 6px;
  background: var(--turquoise, #17a2a2);
  color: #fff;
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
}

.rdv-visio-poser:hover { filter: brightness(1.08); }
.rdv-visio-poser:disabled { opacity: .6; cursor: default; }

/* ── L'empêchement ───────────────────────────────────────────────────────── */

/* Même forme que celle du copilote, et c'est voulu : les deux encarts sont
 * empilés, et deux façons de dire « je n'ai pas pu lire » à dix pixels l'une
 * de l'autre feraient croire à deux pannes différentes. Sobre à dessein — le
 * tableau des dossiers fonctionne juste en dessous. */
.rdv-visio-empeche {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  font-size: .82rem;
  color: var(--texte-doux, #475569);
}

.rdv-visio-empeche strong { color: var(--texte, #0f172a); font-weight: 600; }

.rdv-visio-reprendre { margin-left: auto; }

/* ── Petits écrans ───────────────────────────────────────────────────────── */

/* Sous 600 px la ligne se replie : l'heure et l'intitulé restent ensemble sur
 * le premier rang, le bouton passe dessous en pleine largeur plutôt que de
 * rétrécir jusqu'à devenir imprécis au doigt. */
@media (max-width: 600px) {
  .rdv-visio-rejoindre,
  .rdv-visio-annuler { margin-left: 0; }

  .rdv-visio-rejoindre { flex: 1 1 100%; padding: 8px 14px; text-align: center; }

  .rdv-visio-rangee .rdv-visio-champ:first-child { flex: 1 1 100%; }
}

/* À l'impression, l'encart n'a rien à faire : il dit l'état d'un instant, et
 * une feuille imprimée le fige en le datant mal. Le copilote est retiré pour
 * la même raison. */
@media print {
  .rdv-visio { display: none; }
}