/* ═══════════════════════════════════════════════════════════════
   ANIMOSTEO — habillage de l'application Patient (animolib)
   ---------------------------------------------------------------
   Fichier de surcharge autonome, à charger APRÈS le CSS d'Encore.
   Il ne modifie aucun comportement : uniquement des couleurs,
   des espacements, des rayons et des ombres.

   Il reprend exactement les mêmes tokens que l'application
   Clinique (clinique.animosteo.fr) pour que les deux applications
   se ressemblent.

   Installation :
     1. déposer ce fichier dans  public/css/animosteo-patient.css
     2. dans templates/base.html.twig, à la fin du block stylesheets :
        <link rel="stylesheet" href="{{ asset('css/animosteo-patient.css') }}">

   Pour revenir en arrière : supprimer cette ligne. Rien d'autre
   n'est touché, aucun rebuild Encore n'est nécessaire.
   =============================================================== */

/* ─────────────────────────────────────────────────────────────
   1. Tokens de la charte
   ───────────────────────────────────────────────────────────── */
:root {
  --ani-blue: #24465c;
  --ani-blue-hover: #1b3648;
  --ani-blue-soft: #e8edf0;
  --ani-orange: #ef6c00;
  --ani-orange-hover: #d35f00;
  --ani-orange-soft: #fdece0;
  --ani-mint: #4db6ac;
  --ani-mint-deep: #27796f;   /* version lisible en texte (contraste AA) */
  --ani-mint-soft: #e7f5f3;

  --ani-paper: #faf8f5;
  --ani-surface: #ffffff;
  --ani-offset: #f4f1ec;
  --ani-border: #e7e2da;
  --ani-divider: #efeae2;

  --ani-ink: #1a1a1a;
  --ani-muted: #5b6b73;

  --ani-radius-lg: 18px;
  --ani-radius-md: 12px;
  --ani-radius-sm: 8px;
  --ani-shadow: 0 1px 2px rgba(36,70,92,.04), 0 8px 24px -8px rgba(36,70,92,.12);

  /* Remappage des variables Bootstrap 5 sur la charte */
  --bs-primary: #24465c;
  --bs-primary-rgb: 36,70,92;
  --bs-secondary: #5b6b73;
  --bs-secondary-rgb: 91,107,115;
  --bs-success: #27796f;
  --bs-success-rgb: 39,121,111;
  --bs-warning: #a94e00;
  --bs-warning-rgb: 169,78,0;
  --bs-danger: #a3372a;
  --bs-danger-rgb: 163,55,42;
  --bs-info: #4db6ac;
  --bs-info-rgb: 77,182,172;
  --bs-body-bg: #faf8f5;
  --bs-body-color: #1a1a1a;
  --bs-border-color: #e7e2da;
  --bs-body-font-family: 'Mulish', system-ui, sans-serif;
  --bs-link-color: #24465c;
  --bs-link-hover-color: #1b3648;
  --bs-border-radius: 12px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 18px;
}

body {
  background: var(--ani-paper);
  color: var(--ani-ink);
  font-family: 'Mulish', system-ui, sans-serif;
}

/* ─────────────────────────────────────────────────────────────
   2. Barre de navigation
   Le problème d'origine : le fond passait au bleu de la charte,
   mais la couleur de texte restait celle de Bootstrap (#212529),
   soit du quasi-noir sur du bleu foncé. Tout est forcé en clair ici.
   ───────────────────────────────────────────────────────────── */
header.navbar,
.navbar.bg-dark {
  background: var(--ani-blue) !important;
  color: #ffffff;
  border-bottom: none;
  box-shadow: 0 1px 3px rgba(36,70,92,.25);
  /* Pas de changement de hauteur ici : la barre latérale est en
     position fixe avec un padding-top de 48px calé sur la navbar
     (voir app.scss). Toucher à cette hauteur décalerait le menu. */
}
header.navbar a,
header.navbar .nav-link,
header.navbar .navbar-brand,
header.navbar button,
header.navbar .btn-link,
header.navbar [data-lucide],
header.navbar [data-feather] {
  color: #ffffff !important;
}
header.navbar .nav-link:hover,
header.navbar .btn-link:hover {
  color: var(--ani-mint) !important;
}
/* Lien Déconnexion : discret mais lisible */
header.navbar .navbar-nav .nav-link {
  font-weight: 600;
  font-size: .9rem;
  opacity: .92;
}
header.navbar .navbar-nav .nav-link:hover { opacity: 1; }

/* Champ de recherche : verre dépoli sur le bleu, lisible */
header.navbar .form-control,
header.navbar .form-control-dark {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #ffffff !important;
  border-radius: var(--ani-radius-sm);
  padding: .4rem .85rem;
}
header.navbar .form-control::placeholder,
header.navbar .form-control-dark::placeholder {
  color: rgba(255,255,255,.65) !important;
}
header.navbar .form-control:focus {
  background: rgba(255,255,255,.18) !important;
  border-color: var(--ani-mint) !important;
  box-shadow: 0 0 0 .2rem rgba(77,182,172,.25) !important;
  color: #ffffff !important;
}
header.navbar .search-autocomplete { max-width: 520px; }

/* ── Signature de marque (remplace l'ancien logo animolib) ──
   Un carré arrondi discret + le nom en toutes lettres, dans le
   même esprit que l'en-tête de l'application Clinique. */
header.navbar .navbar-brand {
  display: flex !important;
  align-items: center;
  gap: .6rem;
  padding: 0 1.25rem 0 .5rem !important;
  background: none !important;
  box-shadow: none !important;
  text-decoration: none;
}
header.navbar .navbar-brand:hover { text-decoration: none; }
.brand-mark {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 9px;
  background: rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ani-mint);
}
.brand-mark .lucide,
.brand-mark svg { width: 18px; height: 18px; }
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  font-family: 'Mulish', system-ui, sans-serif;
}
.brand-text .brand-name {
  font-size: .95rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -.01em;
}
.brand-text .brand-sub {
  font-size: .72rem;
  font-weight: 600;
  color: var(--ani-mint);
  letter-spacing: .02em;
}
@media (max-width: 575.98px) {
  .brand-text .brand-sub { display: none; }
}

/* Résultats de l'autocomplétion */
.autocomplete-results {
  background: var(--ani-surface);
  border: 1px solid var(--ani-border);
  border-radius: var(--ani-radius-md);
  box-shadow: var(--ani-shadow);
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────
   3. Barre latérale
   ───────────────────────────────────────────────────────────── */
#sidebarMenu,
#sidebarMenu.bg-light {
  background: var(--ani-surface) !important;
  border-right: 1px solid var(--ani-border);
}
#sidebarMenu .nav-link {
  color: var(--ani-ink);
  font-weight: 600;
  font-size: .92rem;
  border-radius: var(--ani-radius-sm);
  margin: 1px .5rem;
  padding: .5rem .75rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
#sidebarMenu .nav-link [data-lucide],
#sidebarMenu .nav-link [data-feather],
#sidebarMenu .nav-link svg {
  color: var(--ani-muted);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
#sidebarMenu .nav-link:hover {
  background: var(--ani-mint-soft);
  color: var(--ani-blue);
}
#sidebarMenu .nav-link:hover [data-lucide],
#sidebarMenu .nav-link:hover svg { color: var(--ani-mint-deep); }
/* Page courante */
#sidebarMenu .nav-link.active,
#sidebarMenu .nav-link[aria-current="page"] {
  background: var(--ani-blue-soft);
  color: var(--ani-blue);
}
#sidebarMenu .nav-link.active [data-lucide],
#sidebarMenu .nav-link[aria-current="page"] svg { color: var(--ani-blue); }
/* Petits « + » d'ajout à droite de chaque entrée */
#sidebarMenu .link-secondary {
  color: var(--ani-muted) !important;
  display: inline-flex;
  border-radius: 6px;
  padding: 3px;
}
#sidebarMenu .link-secondary:hover {
  color: var(--ani-orange) !important;
  background: var(--ani-orange-soft);
}
#sidebarMenu hr {
  border-color: var(--ani-divider);
  opacity: 1;
  margin: .75rem .75rem;
}

/* ─────────────────────────────────────────────────────────────
   4. Boutons
   Orange = action principale uniquement. Bleu clair = secondaire.
   Contour = tertiaire. L'orange plein reste rare, comme le veut
   la charte (60 % bleu / 25 % menthe / 15 % orange).
   ───────────────────────────────────────────────────────────── */
.btn {
  font-weight: 700;
  border-radius: var(--ani-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
}
.btn [data-lucide], .btn svg { width: 16px; height: 16px; }

.btn-primary {
  background: var(--ani-orange);
  border-color: var(--ani-orange);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--ani-orange-hover);
  border-color: var(--ani-orange-hover);
  color: #fff;
}
.btn-secondary {
  background: var(--ani-blue-soft);
  border-color: transparent;
  color: var(--ani-blue);
}
.btn-secondary:hover {
  background: var(--ani-blue);
  border-color: var(--ani-blue);
  color: #fff;
}
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-dark {
  border-color: var(--ani-border);
  color: var(--ani-blue);
  background: var(--ani-surface);
}
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-dark:hover {
  background: var(--ani-blue-soft);
  border-color: var(--ani-blue-soft);
  color: var(--ani-blue);
}
.btn-outline-primary [data-lucide],
.btn-outline-primary svg { color: var(--ani-orange); }

.btn-success { background: var(--ani-mint-deep); border-color: var(--ani-mint-deep); }
.btn-success:hover { background: #1f6a61; border-color: #1f6a61; }
.btn-danger, .btn-outline-danger:hover { background: #a3372a; border-color: #a3372a; color: #fff; }
.btn-outline-danger { color: #a3372a; border-color: #f0d5d0; background: transparent; }
.btn-warning { background: var(--ani-orange); border-color: var(--ani-orange); color: #fff; }

/* Barre d'outils du haut (Ajouter un propriétaire / patient / rendez-vous) :
   une seule action dominante, les autres en secondaire. */
.btn-toolbar .btn + .btn { margin-left: .5rem; }

/* ─────────────────────────────────────────────────────────────
   5. Cartes, panneaux, tableaux
   ───────────────────────────────────────────────────────────── */
.card, .panel, .list-group {
  background: var(--ani-surface);
  border: 1px solid var(--ani-border);
  border-radius: var(--ani-radius-lg);
  box-shadow: var(--ani-shadow);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--ani-divider);
  font-weight: 700;
  color: var(--ani-blue);
}
h1, h2, h3, h4, h5, .card-title {
  color: var(--ani-blue);
  font-weight: 700;
}
/* Les grands titres d'écran reprennent la serif de la charte,
   comme sur l'application Clinique. */
h1, h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  letter-spacing: -.01em;
}

.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > thead th {
  background: var(--ani-offset);
  color: var(--ani-muted);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--ani-border);
  white-space: nowrap;
}
.table > tbody td {
  border-bottom: 1px solid var(--ani-divider);
  vertical-align: middle;
}
.table > tbody tr:hover { background: var(--ani-offset); }
.table > :not(caption) > * > * { box-shadow: none; }

.badge.bg-primary { background: var(--ani-blue) !important; }
.badge.bg-secondary { background: var(--ani-mint-deep) !important; }
.badge.bg-warning { background: var(--ani-orange-soft) !important; color: var(--ani-orange) !important; }
.badge.bg-success { background: var(--ani-mint-soft) !important; color: var(--ani-mint-deep) !important; }
.badge.bg-danger { background: #fbe6e3 !important; color: #a3372a !important; }

/* ─────────────────────────────────────────────────────────────
   6. Formulaires
   ───────────────────────────────────────────────────────────── */
.form-control, .form-select {
  border: 1.5px solid var(--ani-border);
  border-radius: var(--ani-radius-sm);
  background-color: var(--ani-surface);
  color: var(--ani-ink);
}
.form-control:focus, .form-select:focus {
  border-color: var(--ani-blue);
  box-shadow: 0 0 0 .2rem rgba(36,70,92,.12);
}
.form-label { font-weight: 600; color: var(--ani-ink); }
.form-check-input:checked { background-color: var(--ani-blue); border-color: var(--ani-blue); }

/* ─────────────────────────────────────────────────────────────
   7. Calendrier des rendez-vous
   Les onglets Semaine / Jour / Planning et les flèches étaient en
   orange plein : trop dominant pour de la navigation. On les passe
   en bleu (actif) / bleu clair (inactif), l'orange reste réservé
   aux vraies actions.
   ───────────────────────────────────────────────────────────── */
/* Le calendrier utilise le thème Bootstrap 5 de FullCalendar : ses boutons
   sont littéralement des .btn.btn-primary, donc ils héritaient de l'orange
   des actions principales. On les ramène au bleu : ce sont des contrôles de
   navigation, pas des actions. */
.fc .btn.btn-primary {
  background: var(--ani-blue-soft) !important;
  border-color: transparent !important;
  color: var(--ani-blue) !important;
  font-weight: 700;
  box-shadow: none !important;
}
.fc .btn.btn-primary:hover {
  background: #d9e2e8 !important;
  color: var(--ani-blue) !important;
}
.fc .btn.btn-primary:focus,
.fc .btn.btn-primary:focus-visible {
  box-shadow: 0 0 0 .2rem rgba(36,70,92,.2) !important;
}
.fc .btn.btn-primary.active,
.fc .btn.btn-primary.fc-button-active,
.fc .btn.btn-primary:active,
.fc .btn.btn-primary[aria-pressed="true"] {
  background: var(--ani-blue) !important;
  border-color: var(--ani-blue) !important;
  color: #fff !important;
}
.fc .btn.btn-primary:disabled { opacity: .45; }
.fc .fc-toolbar .btn-group { gap: 2px; }
.fc .fc-toolbar .btn-group > .btn { border-radius: var(--ani-radius-sm) !important; }

.fc .fc-button,
.fc .fc-button-primary {
  background: var(--ani-blue-soft) !important;
  border-color: transparent !important;
  color: var(--ani-blue) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  box-shadow: none !important;
  border-radius: var(--ani-radius-sm) !important;
  padding: .35rem .9rem !important;
}
.fc .fc-button-primary:hover {
  background: #d9e2e8 !important;
  color: var(--ani-blue) !important;
}
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background: var(--ani-blue) !important;
  border-color: var(--ani-blue) !important;
  color: #fff !important;
}
.fc .fc-button-group { gap: 2px; }
.fc .fc-toolbar-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.05rem !important;
  color: var(--ani-blue);
}
.fc .fc-scrollgrid,
.fc .fc-scrollgrid td,
.fc .fc-scrollgrid th { border-color: var(--ani-divider) !important; }
.fc .fc-col-header-cell-cushion {
  color: var(--ani-muted);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  text-decoration: none;
}
.fc .fc-daygrid-day.fc-day-today,
.fc .fc-timegrid-col.fc-day-today { background: var(--ani-mint-soft) !important; }
.fc .fc-event {
  background: var(--ani-blue);
  border-color: var(--ani-blue);
  border-radius: 6px;
  font-weight: 600;
  padding: 1px 4px;
}
.fc .fc-event:hover { background: var(--ani-blue-hover); }

/* ─────────────────────────────────────────────────────────────
   8. Icônes Lucide
   Feather génère des <svg class="feather feather-x">, Lucide génère
   des <svg class="lucide lucide-x">. Les règles de taille existantes
   dans app.scss ne visent que .feather : on les double ici pour
   .lucide, sinon les icônes s'afficheraient en 24px par défaut
   après la migration.
   ───────────────────────────────────────────────────────────── */
.lucide {
  width: 16px;
  height: 16px;
  vertical-align: text-bottom;
}
.sidebar .nav-link .lucide { margin-right: 4px; color: #727272; }
.sidebar .nav-link:hover .lucide,
.sidebar .nav-link.active .lucide { color: inherit; }
.autocomplete-icon .lucide { width: 18px; height: 18px; }
.input-group .btn-password-toggle .lucide,
.input-group .btn-outline-secondary .lucide { width: 18px; height: 18px; }

/* ─────────────────────────────────────────────────────────────
   9. Divers
   ───────────────────────────────────────────────────────────── */
.border-bottom { border-color: var(--ani-border) !important; }
.bg-light { background: var(--ani-offset) !important; }
.text-muted { color: var(--ani-muted) !important; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.alert-success { background: var(--ani-mint-soft); border-color: #cfe9e5; color: var(--ani-mint-deep); }
.alert-danger  { background: #fbe6e3; border-color: #f0d5d0; color: #a3372a; }
.alert-warning { background: var(--ani-orange-soft); border-color: #f8d9c2; color: var(--ani-orange-hover); }
.alert { border-radius: var(--ani-radius-md); }
.modal-content { border-radius: var(--ani-radius-lg); border: 1px solid var(--ani-border); }
.pagination .page-link { color: var(--ani-blue); border-color: var(--ani-border); }
.pagination .active > .page-link { background: var(--ani-blue); border-color: var(--ani-blue); }
::selection { background: var(--ani-mint-soft); color: var(--ani-blue); }

/* ─────────────────────────────────────────────────────────────
   10. Planches anatomiques du compte rendu
   Elles s'affichaient à pleine largeur de colonne, imposant un long
   défilement avant d'atteindre le formulaire — alors que la saisie
   consiste à faire des allers-retours entre les deux.
   image-map-pro est initialisé en mode responsive : il prend la
   largeur de son conteneur et met ses zones cliquables à la même
   échelle. La contrainte de largeur est donc sans risque pour
   l'alignement des points. Ajuster la valeur au besoin.
   ───────────────────────────────────────────────────────────── */
.report-images-grid > [class*="col-"] > div {
  max-width: 480px;
  margin-inline: auto;
}

/* ─────────────────────────────────────────────────────────────
   11. Remarques de relecture
   Le premier jet s'appuyait sur « alert-light » et « badge
   text-bg-warning » : dans ce thème, cela donnait de l'orange sur
   un fond crème, illisible. Les remarques sont faites pour être
   lues — elles ont donc leurs propres règles, et les pastilles de
   gravité portent du blanc sur des fonds assez foncés pour tenir
   le contraste AA.
   ───────────────────────────────────────────────────────────── */
.remarque-champ,
.remarque-bloc {
  background: var(--ani-orange-soft);
  border: 1px solid #f3d7be;
  border-left: 4px solid var(--ani-orange);
  border-radius: var(--ani-radius-md);
  color: #1a1a1a;
  padding: .6rem .85rem;
}

.remarque-champ { margin-bottom: .5rem; }

.remarque-champ + .remarque-champ { margin-top: -.25rem; }

.remarque-champ .remarque-texte,
.remarque-bloc .remarque-texte { color: #1a1a1a; }

.remarque-champ .remarque-second,
.remarque-bloc .remarque-second { color: #4a5a63; }

/* Les remarques de la fiche : une liste, pas un empilement d'encadrés. */
.remarque-liste { list-style: none; margin: 0; padding: 0; }

.remarque-liste > li {
  border-top: 1px solid var(--ani-border);
  padding: .65rem 0;
}

.remarque-liste > li:first-child { border-top: none; }

.remarque-section {
  color: var(--ani-blue);
  font-weight: 600;
}

.gravite,
.verdict {
  border-radius: .35rem;
  color: #fff;
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .01em;
  padding: .12rem .5rem;
  vertical-align: middle;
  white-space: nowrap;
}

.gravite-bloquante { background: #b3261e; }
.gravite-importante { background: #c25700; }  /* orange assombri : blanc dessus tient AA */
.gravite-mineure { background: #5b6b74; }

.verdict-traitee { background: #2e7d32; }
.verdict-partielle { background: #c25700; }
.verdict-non_traitee { background: #b3261e; }

/* L'état de la fiche, dans le bandeau de relecture. */
.etat-fiche {
  border-radius: .4rem;
  color: #fff;
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  padding: .2rem .6rem;
  white-space: nowrap;
}

.etat-attente { background: #5b6b74; }
.etat-reprendre { background: #c25700; }
.etat-valider { background: var(--ani-blue); }
.etat-envoye { background: #2e7d32; }

/* Les remarques de l'école : bleu de la charte, pour ne pas les confondre
   avec celles de la relecture automatique, en orange. */
.remarque-champ.remarque-ecole {
  background: var(--ani-blue-soft);
  border-color: #c9d5dc;
  border-left-color: var(--ani-blue);
}

.origine-remarque {
  border: 1px solid var(--ani-border);
  border-radius: .35rem;
  color: var(--ani-muted);
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  padding: .08rem .45rem;
}

.origine-remarque.origine-ecole {
  background: var(--ani-blue);
  border-color: var(--ani-blue);
  color: #fff;
}

.saisie-renvoi textarea { background: var(--ani-blue-soft); }

/* ─────────────────────────────────────────────────────────────
   12. Agenda — vue « Planning » (liste)
   « .fc-event » porte aussi sur les lignes de la vue liste : le fond
   bleu prévu pour les pastilles du calendrier repeignait la ligne
   entière, et la semaine se lisait comme un mur de blocs sombres.
   Une liste se lit comme une liste : fond clair, texte sombre, une
   pastille orange pour repérer l'évènement, et un bandeau menthe
   pour séparer les jours. Les vues Semaine et Jour, elles, gardent
   leurs blocs bleus — là, le bloc EST l'information.
   ───────────────────────────────────────────────────────────── */
.fc {
  --fc-list-event-hover-bg-color: var(--ani-mint-soft);
  --fc-neutral-bg-color: var(--ani-mint-soft);
  --fc-border-color: var(--ani-divider);
}

.fc .fc-list {
  border-color: var(--ani-border) !important;
  border-radius: var(--ani-radius-md);
  overflow: hidden;
}

.fc .fc-list-day-cushion {
  background: var(--ani-mint-soft) !important;
  padding: .5rem .75rem;
}

.fc .fc-list-day-text,
.fc .fc-list-day-side-text {
  color: var(--ani-blue) !important;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
}

.fc .fc-list-day-side-text {
  color: var(--ani-muted) !important;
  font-weight: 500;
}

.fc .fc-list-event,
.fc .fc-list-event > td {
  background: var(--ani-surface) !important;
  border-color: var(--ani-divider) !important;
}

.fc .fc-list-event:hover,
.fc .fc-list-event:hover > td {
  background: var(--ani-mint-soft) !important;
}

.fc .fc-list-table td { padding: .55rem .75rem; }

.fc .fc-list-event-time {
  color: var(--ani-muted) !important;
  font-size: .82rem;
  white-space: nowrap;
  width: 8.5rem;
}

.fc .fc-list-event-title a {
  color: var(--ani-ink) !important;
  font-weight: 500;
  text-decoration: none;
}

.fc .fc-list-event-dot { border-color: var(--ani-orange) !important; }

.fc .fc-list-empty {
  background: var(--ani-offset) !important;
  color: var(--ani-muted);
}

/* ─────────────────────────────────────────────────────────────
   13. Agenda — vue « Mois »
   FullCalendar distingue deux sortes d'évènements : les barres
   pleines (journée entière), où la barre porte l'étendue de
   l'évènement, et les « points » (évènements horaires), qui sont
   normalement une pastille suivie du texte, sur fond transparent.
   La règle « .fc-event » peignait les deux en bleu plein : les
   lignes horaires devenaient des barres sombres où le texte tient
   à peine. On rend aux évènements horaires leur forme légère, et
   on laisse aux journées entières leur bloc.
   ───────────────────────────────────────────────────────────── */
.fc .fc-daygrid-dot-event {
  background: transparent !important;
  border: none !important;
  color: var(--ani-ink) !important;
  padding: 1px 2px;
}

.fc .fc-daygrid-dot-event:hover { background: var(--ani-mint-soft) !important; }

.fc .fc-daygrid-dot-event .fc-event-title {
  color: var(--ani-ink) !important;
  font-weight: 500;
}

.fc .fc-daygrid-dot-event .fc-event-time {
  color: var(--ani-muted) !important;
  font-weight: 500;
}

.fc .fc-daygrid-event-dot { border-color: var(--ani-orange) !important; }

.fc .fc-daygrid-block-event {
  background: var(--ani-blue) !important;
  border-color: var(--ani-blue) !important;
}

.fc .fc-daygrid-block-event .fc-event-title { color: #fff !important; font-weight: 600; }

.fc .fc-daygrid-day-number {
  color: var(--ani-muted);
  font-size: .8rem;
  text-decoration: none;
}

.fc .fc-day-today .fc-daygrid-day-number {
  color: var(--ani-blue);
  font-weight: 700;
}

.fc .fc-daygrid-more-link { color: var(--ani-mint-deep) !important; font-weight: 600; }