/* KALMA - composants de base. Uniquement des var(--k-*) (exceptions : 0, 100%).
   Etats simules pour la planche : .is-survol .is-focus .is-actif. Etats reels : :hover :focus-visible :active.
   Desactive : :disabled, [aria-disabled="true"] ou .is-desactive. */

:root {
  --k-icone-bi: "bootstrap-icons";
  --k-w-toast: calc(var(--k-space-16) * 6);
  --k-w-modale: calc(var(--k-space-16) * 7);
  --k-w-menu: calc(var(--k-space-16) * 3);
}

/* Etats simules communs. */
.is-focus { outline: var(--k-trait-fort) solid var(--k-action); outline-offset: var(--k-focus-decalage); }

/* ---------- Pastilles d'etat : toujours un mot et une icone ---------- */
.k-pastille {
  display: inline-flex; align-items: center; gap: var(--k-space-1);
  padding: var(--k-space-1) var(--k-space-2);
  border: var(--k-trait) solid transparent; border-radius: var(--k-rayon-gelule);
  font-size: var(--k-fs-sm); font-weight: var(--k-fw-medium); line-height: var(--k-lh-titre);
  white-space: nowrap;
  background: var(--k-voile-neutre); color: var(--k-attenue);
}
.k-pastille > .bi { font-size: var(--k-icone); line-height: 1; }
.k-pastille.is-prevu { background: var(--k-action-voile); color: var(--k-action); }
.k-pastille.is-present { background: var(--k-present); color: var(--k-sur-aplat); }                 /* plein : le seul aplat */
.k-pastille.is-encours { background: var(--k-present-voile); color: var(--k-present-fonce); border-color: var(--k-present-fonce); }
.k-pastille.is-fait { background: var(--k-succes-voile); color: var(--k-succes-encre); }
.k-pastille.is-attention { background: var(--k-attention-voile); color: var(--k-attention-encre); }
.k-pastille.is-probleme { background: var(--k-danger-voile); color: var(--k-danger-encre); }
.k-pastille.is-clos { background: var(--k-surface); color: var(--k-attenue); border: var(--k-trait) dashed var(--k-filet-champ); }
.k-pastille.is-neutre { background: var(--k-voile-neutre); color: var(--k-attenue); }

/* ---------- Boutons ---------- */
.k-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--k-space-2);
  min-block-size: var(--k-champ-hauteur); min-inline-size: var(--k-cible);
  padding: var(--k-space-2) var(--k-space-4);
  border: var(--k-trait) solid var(--k-filet-champ); border-radius: var(--k-rayon-petit);
  background: var(--k-surface); color: var(--k-encre);
  font: inherit; font-size: var(--k-fs-md); font-weight: var(--k-fw-medium); line-height: var(--k-lh-base);
  text-decoration: none; cursor: pointer; position: relative;
  transition: background-color var(--k-duree-rapide) var(--k-courbe), border-color var(--k-duree-rapide) var(--k-courbe);
}
.k-btn.is-petit { min-block-size: var(--k-cible); padding: var(--k-space-1) var(--k-space-3); font-size: var(--k-fs-sm); }
.k-btn.is-grand { min-block-size: calc(var(--k-space-10) + var(--k-space-2)); padding: var(--k-space-3) var(--k-space-6); font-size: var(--k-fs-base); }
.k-btn.is-bloc { display: flex; inline-size: 100%; }
.k-btn:is(:hover, .is-survol) { background: var(--k-voile-neutre); color: var(--k-encre); border-color: var(--k-filet-champ); }
.k-btn:is(:active, .is-actif) { background: var(--k-filet); border-color: var(--k-encre); }

.k-btn.is-primaire { background: var(--k-action); border-color: var(--k-action); color: var(--k-sur-aplat); }
.k-btn.is-primaire:is(:hover, .is-survol) { background: var(--k-action-fonce); border-color: var(--k-action-fonce); color: var(--k-sur-aplat); }
.k-btn.is-primaire:is(:active, .is-actif) { background: var(--k-action-fonce); border-color: var(--k-encre); }

.k-btn.is-secondaire { background: var(--k-surface); border-color: var(--k-action); color: var(--k-action); }
.k-btn.is-secondaire:is(:hover, .is-survol) { background: var(--k-action-voile); color: var(--k-action-fonce); border-color: var(--k-action-fonce); }
.k-btn.is-secondaire:is(:active, .is-actif) { background: var(--k-action-voile); border-color: var(--k-encre); }

.k-btn.is-discret { background: transparent; border-color: transparent; color: var(--k-lien); }
.k-btn.is-discret:is(:hover, .is-survol) { background: var(--k-voile-neutre); color: var(--k-action-fonce); border-color: transparent; }
.k-btn.is-discret:is(:active, .is-actif) { background: var(--k-filet); border-color: transparent; }

.k-btn.is-danger { background: var(--k-danger); border-color: var(--k-danger); color: var(--k-sur-aplat); }
.k-btn.is-danger:is(:hover, .is-survol) { background: var(--k-danger-encre); border-color: var(--k-danger-encre); color: var(--k-sur-aplat); }
.k-btn.is-danger:is(:active, .is-actif) { background: var(--k-danger-encre); border-color: var(--k-encre); }

.k-btn:is(:disabled, [aria-disabled="true"], .is-desactive) {
  background: var(--k-voile-neutre); border-color: var(--k-filet); color: var(--k-attenue); cursor: not-allowed;
}
.k-btn.is-chargement { cursor: progress; pointer-events: none; }
.k-btn.is-chargement::before {
  content: ""; inline-size: var(--k-space-4); block-size: var(--k-space-4); flex: none;
  border: var(--k-trait-fort) solid currentColor; border-block-start-color: transparent; border-radius: var(--k-rayon-gelule);
  animation: k-tourne calc(var(--k-duree-lente) * 2.5) linear infinite;
}
@keyframes k-tourne { to { transform: rotate(360deg); } }

.k-groupe-btn { display: flex; flex-wrap: wrap; gap: var(--k-space-2); align-items: center; }

/* ---------- Champs ---------- */
.k-champ { display: flex; flex-direction: column; gap: var(--k-space-1); margin-block-end: var(--k-space-4); }
/* Un bouton sous le champ (« Premier créneau libre ») s'étirait sur toute la largeur, libellé centré. */
.k-champ > .k-btn { align-self: flex-start; }
.k-champ__libelle { font-size: var(--k-fs-md); font-weight: var(--k-fw-medium); color: var(--k-encre); }
.k-requis { color: var(--k-danger-encre); }
.k-champ__aide { font-size: var(--k-fs-sm); color: var(--k-attenue); margin: 0; }
.k-champ__erreur, .k-champ__ok { display: none; margin: 0; font-size: var(--k-fs-sm); gap: var(--k-space-1); align-items: baseline; }
.k-champ__erreur { color: var(--k-danger-encre); }
.k-champ__ok { color: var(--k-succes-encre); }
.k-champ.is-erreur .k-champ__erreur, .k-champ.is-valide .k-champ__ok { display: flex; }

.k-input, .k-select, .k-textarea {
  inline-size: 100%; min-block-size: var(--k-champ-hauteur);
  padding: var(--k-space-2) var(--k-space-3);
  border: var(--k-trait) solid var(--k-filet-champ); border-radius: var(--k-rayon-petit);
  background: var(--k-surface); color: var(--k-encre);
  font: inherit; font-size: var(--k-fs-base); line-height: var(--k-lh-base);
  transition: border-color var(--k-duree-rapide) var(--k-courbe);
}
.k-textarea { min-block-size: calc(var(--k-space-16) * 2); resize: vertical; }
.k-select { appearance: none; padding-inline-end: var(--k-space-10); }
/* Main au survol : avec appearance: base-select, une liste sans curseur explicite prend celui du texte (la barre). */
:is(.k-select, .form-select) { cursor: pointer; }
.k-select-cadre { position: relative; display: block; }
.k-select-cadre::after {
  content: "\F282"; font-family: var(--k-icone-bi); position: absolute; inset-inline-end: var(--k-space-3); inset-block-start: 50%;
  transform: translateY(-50%); pointer-events: none; color: var(--k-attenue);
}
.k-input::placeholder, .k-textarea::placeholder { color: var(--k-attenue); }
.k-input:is(:hover, .is-survol), .k-select:is(:hover, .is-survol), .k-textarea:is(:hover, .is-survol) { border-color: color-mix(in srgb, var(--k-filet-champ) 70%, var(--k-encre)); }
.k-input:focus, .k-select:focus, .k-textarea:focus, :is(.k-input, .k-select, .k-textarea).is-focus { border-color: var(--k-action); outline: none; box-shadow: 0 0 0 var(--k-halo) var(--k-action-voile); }
.k-champ.is-erreur :is(.k-input, .k-select, .k-textarea, .k-groupe) { border-color: var(--k-danger); }
.k-champ.is-valide :is(.k-input, .k-select, .k-textarea, .k-groupe) { border-color: var(--k-succes); }
/* Le halo du focus prend la teinte du contour : rouge en erreur, vert si valide. */
.k-champ.is-erreur :is(.k-input, .k-select, .k-textarea):is(:focus, .is-focus), .k-champ.is-erreur .k-groupe:focus-within, :is(.k-input, .k-select, .k-textarea)[aria-invalid="true"]:focus { border-color: var(--k-danger); box-shadow: 0 0 0 var(--k-halo) var(--k-danger-voile); }
.k-champ.is-valide :is(.k-input, .k-select, .k-textarea):is(:focus, .is-focus), .k-champ.is-valide .k-groupe:focus-within { border-color: var(--k-succes); box-shadow: 0 0 0 var(--k-halo) var(--k-succes-voile); }
/* Dans un groupe (montant + « DA »), seul le groupe porte contour et halo. */
.k-champ .k-groupe :is(.k-input, .k-select):is(:focus, .is-focus) { border: 0; box-shadow: none; }
.k-input:is(:disabled, .is-desactive), .k-select:disabled, .k-textarea:disabled { background: var(--k-voile-neutre); border-color: var(--k-filet); color: var(--k-attenue); cursor: not-allowed; }
.k-input[readonly], .k-textarea[readonly] { background: var(--k-voile-neutre); border-style: dashed; }

/* Montant en DA et date JJ/MM/AAAA : chiffres tabulaires, unite hors du champ. */
.k-groupe { display: flex; align-items: stretch; border: var(--k-trait) solid var(--k-filet-champ); border-radius: var(--k-rayon-petit); background: var(--k-surface); }
.k-groupe:focus-within { border-color: var(--k-action); box-shadow: 0 0 0 var(--k-halo) var(--k-action-voile); }
.k-groupe .k-input { border: 0; background: transparent; min-inline-size: 0; }
.k-groupe .k-input:focus, .k-groupe .k-input:focus-visible { box-shadow: none; border: 0; }
.k-groupe .k-select { border: 0; border-inline-start: var(--k-trait) solid var(--k-filet); border-radius: 0; background: var(--k-voile-neutre); inline-size: auto; flex: none; field-sizing: content; }
.k-groupe .k-select-cadre { display: flex; flex: none; }
.k-groupe__suffixe { flex: none; white-space: nowrap; display: flex; align-items: center; padding-inline: var(--k-space-3); border-inline-start: var(--k-trait) solid var(--k-filet); color: var(--k-attenue); background: var(--k-voile-neutre); font-weight: var(--k-fw-medium); border-start-end-radius: var(--k-rayon-petit); border-end-end-radius: var(--k-rayon-petit); }
.k-groupe__prefixe { display: flex; align-items: center; padding-inline: var(--k-space-3); color: var(--k-attenue); }
/* Groupe compact : champ numérique court + unité sur une seule ligne (délais en heures). */
.k-groupe.is-compact { inline-size: fit-content; max-inline-size: 100%; }
.k-groupe.is-compact .k-input { inline-size: 8ch; flex: none; }
.k-input.is-montant { text-align: end; font-variant-numeric: var(--k-chiffres); }
.k-input.is-date { font-variant-numeric: var(--k-chiffres); max-inline-size: calc(var(--k-space-16) * 3); }

/* Case, radio, interrupteur : entree native, rendu maison. */
.k-option { display: inline-flex; align-items: center; gap: var(--k-space-2); min-block-size: var(--k-cible); cursor: pointer; font-size: var(--k-fs-base); }
.k-option:has(:disabled) { color: var(--k-attenue); cursor: not-allowed; }
.k-option input { appearance: none; margin: 0; flex: none; cursor: inherit;
  inline-size: calc(var(--k-space-4) + var(--k-space-1)); block-size: calc(var(--k-space-4) + var(--k-space-1));
  border: var(--k-trait) solid var(--k-filet-champ); background: var(--k-surface); color: var(--k-sur-aplat);
  display: inline-grid; place-content: center; transition: background-color var(--k-duree-rapide) var(--k-courbe);
}
.k-option input[type="checkbox"] { border-radius: var(--k-rayon-petit); }
.k-option input[type="radio"] { border-radius: var(--k-rayon-gelule); }
.k-option input[type="checkbox"]::before { content: "\F26E"; font-family: var(--k-icone-bi); font-size: var(--k-fs-base); line-height: 1; visibility: hidden; }
.k-option input[type="checkbox"]:checked::before { visibility: visible; }
.k-option input[type="checkbox"]:indeterminate::before { content: "\F2EA"; visibility: visible; }
.k-option input[type="radio"]:checked { box-shadow: inset 0 0 0 var(--k-space-1) var(--k-surface); }
.k-option input:is(:checked, :indeterminate) { background: var(--k-action); border-color: var(--k-action); }
.k-option input:is(:hover, .is-survol):not(:disabled) { border-color: var(--k-encre-2); }
.k-option input:disabled { background: var(--k-voile-neutre); border-color: var(--k-filet); }
.k-option input:disabled:checked { background: var(--k-filet-champ); border-color: var(--k-filet-champ); }
.k-champ.is-erreur .k-option input { border-color: var(--k-danger); }

.k-option input[role="switch"] {
  inline-size: var(--k-space-10); block-size: var(--k-space-6); border-radius: var(--k-rayon-gelule);
  background: var(--k-voile-neutre); display: block; position: relative;
}
.k-option input[role="switch"]::before {
  content: ""; visibility: visible; position: absolute; inset-block-start: calc(var(--k-trait-fort) / 2); inset-inline-start: calc(var(--k-trait-fort) / 2);
  inline-size: calc(var(--k-space-6) - var(--k-trait-fort) * 2); block-size: calc(var(--k-space-6) - var(--k-trait-fort) * 2);
  border-radius: var(--k-rayon-gelule); background: var(--k-attenue); font-size: 0;
  transition: transform var(--k-duree) var(--k-courbe);
}
.k-option input[role="switch"]:checked { background: var(--k-action); }
.k-option input[role="switch"]:checked::before { background: var(--k-sur-aplat); transform: translateX(var(--k-space-4)); }
.k-option input[role="switch"]:disabled::before { background: var(--k-filet-champ); }

fieldset.k-champ { border: 0; padding: 0; min-inline-size: 0; }
fieldset.k-champ > legend { padding: 0; float: none; margin: 0; font-size: var(--k-fs-md); font-weight: var(--k-fw-medium); }

/* ---------- Alerte : modèle « filet neutre » (décision client du 05/10/2026) ----------
   Boîte blanche, contour gris, titre à l'encre ; seule l'icône porte la teinte.
   Pas de liseré coloré, pas de fond teinté. */
.k-alerte {
  --k-alerte-aplat: var(--k-action);
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--k-space-1) var(--k-space-3); align-items: start;
  padding: var(--k-space-3) var(--k-space-4);
  background: var(--k-surface); color: var(--k-encre);
  border: var(--k-trait) solid var(--k-filet); border-radius: var(--k-rayon-petit);
}
.k-alerte.is-attention { --k-alerte-aplat: var(--k-attention); }
.k-alerte.is-probleme { --k-alerte-aplat: var(--k-danger); }
.k-alerte.is-succes { --k-alerte-aplat: var(--k-succes); }
.k-alerte__icone { color: var(--k-alerte-aplat); font-size: var(--k-fs-lg); line-height: var(--k-lh-base); }
.k-alerte__titre { margin: 0; font-weight: var(--k-fw-medium); color: var(--k-encre); font-size: var(--k-fs-base); font-family: var(--k-font-texte); }
.k-alerte__texte { margin: 0; font-size: var(--k-fs-md); }
.k-alerte__actions { display: flex; gap: var(--k-space-2); margin-block-start: var(--k-space-2); flex-wrap: wrap; }

/* Bouton de fermeture commun (alerte, toast, modale). */
.k-fermer { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--k-cible); block-size: var(--k-cible); padding: 0; border: 0; border-radius: var(--k-rayon-petit); background: transparent; color: var(--k-attenue); cursor: pointer; }
.k-fermer:is(:hover, .is-survol) { background: var(--k-voile-neutre); color: var(--k-encre); }

/* ---------- Toast ---------- */
.k-toasts { position: fixed; inset-block-end: var(--k-space-4); inset-inline-end: var(--k-space-4); z-index: var(--k-z-notifications); display: flex; flex-direction: column; gap: var(--k-space-2); inline-size: min(100% - var(--k-space-8), var(--k-w-toast)); }
.k-toast {
  --k-toast-aplat: var(--k-action);
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--k-space-3); align-items: center;
  padding: var(--k-space-3) var(--k-space-3) var(--k-space-3) var(--k-space-4);
  background: var(--k-surface); color: var(--k-encre); border: var(--k-trait) solid var(--k-filet);
  border-radius: var(--k-rayon-petit); /* filet neutre : seule l'icône est teintée (décision du 05/10/2026) */ box-shadow: var(--k-ombre-flottant);
  animation: k-entre var(--k-duree) var(--k-courbe);
}
.k-toast.is-succes { --k-toast-aplat: var(--k-succes); }
.k-toast.is-attention { --k-toast-aplat: var(--k-attention); }
.k-toast.is-probleme { --k-toast-aplat: var(--k-danger); }
.k-toast__icone { color: var(--k-toast-aplat); font-size: var(--k-fs-lg); }
.k-toast__texte { margin: 0; font-size: var(--k-fs-md); }
.k-toast__action { margin-inline-start: var(--k-space-2); }
.k-toast.is-statique { animation: none; box-shadow: var(--k-ombre); }
@keyframes k-entre { from { transform: translateY(var(--k-space-2)); } }

/* ---------- Modale de confirmation (dialog natif : Echap, focus, fond inerte) ---------- */
.k-modale {
  inline-size: min(100% - var(--k-space-8), var(--k-w-modale)); padding: 0; margin: auto;
  border: var(--k-trait) solid var(--k-filet); border-radius: var(--k-rayon);
  background: var(--k-surface); color: var(--k-encre); box-shadow: var(--k-ombre-flottant);
}
.k-modale::backdrop { background: color-mix(in srgb, var(--k-nuit) 60%, transparent); }
.k-modale.is-apercu { position: static; display: block; margin-inline: 0; }
.k-modale__entete { display: flex; gap: var(--k-space-3); align-items: flex-start; padding: var(--k-space-6) var(--k-space-6) var(--k-space-2); }
.k-modale__icone { color: var(--k-danger-encre); font-size: var(--k-fs-2xl); line-height: 1; }
.k-modale__titre { margin: 0; font-size: var(--k-fs-lg); }
.k-modale__corps { padding: 0 var(--k-space-6) var(--k-space-4); font-size: var(--k-fs-md); }
.k-modale__perte { margin: var(--k-space-3) 0 0; padding: var(--k-space-3) var(--k-space-4) var(--k-space-3) var(--k-space-8); background: var(--k-danger-voile); color: var(--k-danger-encre); border-radius: var(--k-rayon-petit); }
.k-modale__pied { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--k-space-2); padding: var(--k-space-4) var(--k-space-6); border-block-start: var(--k-trait) solid var(--k-filet); }

/* ---------- Onglets ---------- */
/* Le filet est une ombre interne, pas une bordure : les onglets le recouvrent sans marge negative, qui debordait
   de 1px et, avec overflow-x: auto, faisait apparaitre une barre de defilement verticale (deux fleches). */
.k-onglets { display: flex; gap: var(--k-space-1); box-shadow: inset 0 calc(var(--k-trait) * -1) 0 var(--k-filet); overflow-x: auto; overflow-y: hidden; }
.k-onglet {
  display: inline-flex; align-items: center; gap: var(--k-space-2); min-block-size: var(--k-champ-hauteur);
  padding: var(--k-space-2) var(--k-space-4);
  border: 0; border-block-end: var(--k-trait-fort) solid transparent; border-radius: var(--k-rayon-petit) var(--k-rayon-petit) 0 0;
  background: transparent; color: var(--k-attenue); font: inherit; font-size: var(--k-fs-md); font-weight: var(--k-fw-medium); white-space: nowrap; cursor: pointer;
}
.k-onglet:is(:hover, .is-survol) { background: transparent; color: var(--k-encre); border-block-end-color: var(--k-filet-champ); }
/* Selectionne (et appui) : encre, graisse 500, soulignement d'action colle au filet, aucun fond. */
.k-onglet:is(:active, .is-actif), .k-onglet[aria-selected="true"] { background: transparent; color: var(--k-encre); font-weight: var(--k-fw-medium); border-block-end-color: var(--k-action); }
/* Focus entier : dessine a l'interieur, donc jamais rogne par le defilement horizontal de la rangee. */
.k-onglet:focus-visible, .k-onglet.is-focus { outline-offset: calc(var(--k-trait-fort) * -1); box-shadow: none; }
.k-onglet:is(:disabled, [aria-disabled="true"], .is-desactive) { color: var(--k-attenue); cursor: not-allowed; background: transparent; }
.k-onglet__compte { padding: 0 var(--k-space-2); border-radius: var(--k-rayon-gelule); background: var(--k-voile-neutre); font-size: var(--k-fs-xs); font-variant-numeric: var(--k-chiffres); }
.k-onglet-panneau { padding-block: var(--k-space-4); }
.k-onglet-panneau[hidden] { display: none; }

/* ---------- Tableau dense ---------- */
.k-tableau-cadre { overflow-x: auto; border: var(--k-trait) solid var(--k-filet); border-radius: var(--k-rayon); background: var(--k-surface); }
.k-tableau { inline-size: 100%; border-collapse: collapse; font-size: var(--k-fs-md); }
.k-tableau caption { padding: var(--k-space-3); text-align: start; color: var(--k-attenue); caption-side: bottom; font-size: var(--k-fs-sm); }
.k-tableau :is(th, td) { padding: var(--k-cellule-pad); text-align: start; vertical-align: middle; border-block-end: var(--k-trait) solid var(--k-filet-leger); block-size: var(--k-ligne-hauteur); }
.k-tableau thead th { background: var(--k-voile-neutre); color: var(--k-encre-2); font-weight: var(--k-fw-semibold); border-block-end: var(--k-trait) solid var(--k-filet); white-space: nowrap; }
.k-tableau tbody tr:last-child td { border-block-end: 0; }
.k-tableau .k-num, .k-tableau th.k-num { text-align: end; font-variant-numeric: var(--k-chiffres); white-space: nowrap; }
.k-tableau tbody tr:is(:hover, .is-survol) { background: var(--k-voile-neutre); }
.k-tableau tbody tr:is([aria-selected="true"], .is-selectionnee) { background: var(--k-action-voile); box-shadow: inset var(--k-space-1) 0 0 var(--k-action); }
.k-tableau tbody tr:is(:focus-visible, .is-focus) { outline-offset: calc(var(--k-trait-fort) * -1); }
.k-tri { min-inline-size: var(--k-cible); display: inline-flex; align-items: center; gap: var(--k-space-1); min-block-size: var(--k-cible); padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.k-tri:is(:hover, .is-survol) { color: var(--k-action); }
th[aria-sort="ascending"], th[aria-sort="descending"] { color: var(--k-encre); box-shadow: inset 0 calc(var(--k-trait-fort) * -1) 0 var(--k-action); }
.k-tableau .k-pastille { vertical-align: middle; }
/* Tableaux superposés qu'on lit l'un sous l'autre (à venir / historique) : en
   largeur automatique, chacun négocie ses colonnes d'après son contenu, et la
   colonne « Créneau » ne tombait plus au même endroit. Les largeurs viennent
   donc du <colgroup>, identiques dans les deux. Le plancher garde le défilement
   horizontal du cadre sur téléphone plutôt que d'écraser les dates. */
.k-tableau.is-aligne { table-layout: fixed; min-inline-size: 36rem; }
.k-tableau .k-col-actions { inline-size: 9rem; }

/* ---------- Pagination : rendu de la pagination Bootstrap de l'application (cases collees, une seule bordure) ---------- */
.k-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-space-2); margin-block-start: var(--k-space-3); font-size: var(--k-fs-md); container-type: inline-size; }
.k-pagination[hidden] { display: none; }
.k-pagination__compteur { color: var(--k-attenue); font-size: var(--k-fs-sm); font-variant-numeric: var(--k-chiffres); }
.k-pagination__nav { margin-inline-start: auto; max-inline-size: 100%; overflow-x: auto; }
.k-pagination__liste { display: inline-flex; list-style: none; margin: 0; padding: 0; background: var(--k-surface); border: var(--k-trait) solid var(--k-filet); border-radius: var(--k-rayon-petit); }
.k-pagination__liste > li + li { border-inline-start: var(--k-trait) solid var(--k-filet); }
.k-page {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-inline-size: var(--k-champ-hauteur); block-size: var(--k-champ-hauteur); padding: 0 var(--k-space-2);
  border: 0; border-radius: 0; background: var(--k-surface); color: var(--k-action);
  font: inherit; font-weight: var(--k-fw-regular); font-variant-numeric: var(--k-chiffres); text-decoration: none; cursor: pointer;
}
.k-pagination__liste > li:first-child > .k-page { border-start-start-radius: var(--k-rayon-petit); border-end-start-radius: var(--k-rayon-petit); }
.k-pagination__liste > li:last-child > .k-page { border-start-end-radius: var(--k-rayon-petit); border-end-end-radius: var(--k-rayon-petit); }
.k-page .bi { color: var(--k-attenue); }
.k-page:is(:hover, .is-survol) { background: var(--k-action-voile); color: var(--k-action); }
.k-page:is(:active, .is-actif) { background: var(--k-action-voile); }
.k-page:focus-visible, .k-page.is-focus { outline-offset: calc(var(--k-trait-fort) * -1); box-shadow: none; position: relative; }
.k-page[aria-current="page"] { background: var(--k-action); color: var(--k-sur-aplat); cursor: default; }
.k-page:is([aria-disabled="true"], :disabled, .is-desactive) { color: var(--k-attenue); cursor: not-allowed; background: var(--k-surface); }
.k-page:is([aria-disabled="true"], .is-desactive) .bi { color: var(--k-attenue); }
.k-page.is-points { cursor: default; color: var(--k-attenue); background: var(--k-surface); }
.k-page.is-points:hover { background: var(--k-surface); }
@container (max-width: 36rem) {
  .k-pagination__compteur { flex: 1 1 100%; }
  .k-page { min-inline-size: var(--k-cible); padding: 0 var(--k-space-1); }
}

/* ---------- Etat vide, squelette, erreur ---------- */
.k-vide { display: flex; flex-direction: column; align-items: center; gap: var(--k-space-2); padding: var(--k-space-10) var(--k-space-6); text-align: center; color: var(--k-attenue); }
.k-vide__icone { display: grid; place-items: center; inline-size: var(--k-space-12); block-size: var(--k-space-12); border-radius: var(--k-rayon-gelule); background: var(--k-voile-neutre); color: var(--k-attenue); font-size: var(--k-fs-2xl); }
.k-vide__titre { margin: 0; font-size: var(--k-fs-lg); color: var(--k-encre); }
.k-vide__texte { margin: 0; max-inline-size: var(--k-largeur-saisie); font-size: var(--k-fs-md); }
.k-vide .k-btn { margin-block-start: var(--k-space-2); }

.k-squelette {
  display: block; block-size: var(--k-space-4); border-radius: var(--k-rayon-petit);
  background: linear-gradient(90deg, var(--k-voile-neutre) 30%, var(--k-filet-leger) 50%, var(--k-voile-neutre) 70%) 100% 0 / 300% 100%;
  animation: k-lueur calc(var(--k-duree-lente) * 4.5) linear infinite;
}
.k-squelette.is-titre { block-size: var(--k-space-6); inline-size: 40%; }
.k-squelette.is-court { inline-size: 30%; }
.k-squelette.is-cercle { inline-size: var(--k-space-10); block-size: var(--k-space-10); border-radius: var(--k-rayon-gelule); }
.k-squelette-groupe { display: flex; flex-direction: column; gap: var(--k-space-3); padding: var(--k-space-4); }
@keyframes k-lueur { to { background-position: 0 0; } }

.k-erreur-bloc { display: flex; flex-direction: column; align-items: flex-start; gap: var(--k-space-2); padding: var(--k-space-4) var(--k-space-6); background: var(--k-danger-voile); border: var(--k-trait) solid var(--k-danger-filet); border-radius: var(--k-rayon); color: var(--k-encre); }
.k-erreur-bloc__titre { margin: 0; display: flex; gap: var(--k-space-2); align-items: center; font-size: var(--k-fs-base); color: var(--k-danger-encre); font-family: var(--k-font-texte); }
.k-erreur-bloc__texte { margin: 0; font-size: var(--k-fs-md); }
.k-erreur-bloc__ref { font-size: var(--k-fs-sm); color: var(--k-attenue); font-variant-numeric: var(--k-chiffres); }

/* ---------- Barre patient ---------- */
.k-antecedents { grid-column: 1 / -1; font-size: var(--k-fs-md); }
.k-antecedents > summary { display: inline-flex; align-items: center; gap: var(--k-space-1); min-block-size: var(--k-cible); cursor: pointer; color: var(--k-lien); list-style: none; }
.k-antecedents > summary::-webkit-details-marker { display: none; }
.k-antecedents > summary::before { content: "\F285"; font-family: var(--k-icone-bi); transition: transform var(--k-duree-rapide) var(--k-courbe); }
.k-antecedents[open] > summary::before { transform: rotate(90deg); }
.k-antecedents > summary:is(:hover, .is-survol) { color: var(--k-action-fonce); text-decoration: underline; }
.k-antecedents__corps { margin: 0; padding: var(--k-space-2) 0 var(--k-space-1) var(--k-space-4); color: var(--k-encre-2); }

/* ---------- Carte neutre et pied de page de la planche ---------- */
.k-carte { background: var(--k-surface); border: var(--k-trait) solid var(--k-filet); border-radius: var(--k-rayon); padding: var(--k-space-4); }

/* Contraste forcé : les formes portent le sens quand les couleurs disparaissent. */
@media (forced-colors: active) {
  .k-pastille, .k-btn, .k-alerte, .k-toast { border: var(--k-trait) solid CanvasText; }
}

/* ---------- Recherche patient : combobox ARIA (meme comportement que la recherche de l'application) ---------- */
.k-recherche { position: relative; inline-size: 100%; }
.k-recherche__icone { position: absolute; inset-inline-start: var(--k-space-3); inset-block-start: 50%; transform: translateY(-50%); color: var(--k-attenue); pointer-events: none; }
.k-recherche .k-input { padding-inline-start: var(--k-space-10); padding-inline-end: var(--k-space-10); }
.k-recherche__raccourci {
  position: absolute; inset-inline-end: var(--k-space-3); inset-block-start: 50%; transform: translateY(-50%); pointer-events: none;
  padding: 0 var(--k-space-2); border: var(--k-trait) solid var(--k-filet-champ); border-radius: var(--k-rayon-petit);
  background: var(--k-voile-neutre); color: var(--k-attenue); font: inherit; font-size: var(--k-fs-xs); line-height: var(--k-lh-base);
}
.k-recherche:focus-within .k-recherche__raccourci { display: none; }

.k-recherche__panneau {
  position: absolute; inset-inline: 0; inset-block-start: calc(100% + var(--k-space-1)); z-index: var(--k-z-liste-deroulante);
  min-inline-size: min(100vw - var(--k-space-8), calc(var(--k-space-16) * 6));
  background: var(--k-surface); border: var(--k-trait) solid var(--k-filet); border-radius: var(--k-rayon-petit); box-shadow: var(--k-ombre-flottant);
  max-block-size: calc(var(--k-space-16) * 6); overflow-y: auto;
}
.k-recherche__panneau[hidden] { display: none; }
.k-recherche__panneau.is-statique { position: static; box-shadow: var(--k-ombre); max-inline-size: calc(var(--k-space-16) * 8); min-inline-size: 0; }
.k-recherche__liste { list-style: none; margin: 0; padding: var(--k-space-1); }
.k-recherche__liste[hidden] { display: none; }
.k-recherche__option {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--k-space-1) var(--k-space-3);
  min-block-size: var(--k-cible); padding: var(--k-space-2) var(--k-space-3); border-radius: var(--k-rayon-petit); cursor: pointer;
}
.k-recherche__option:is(:hover, .is-survol) { background: var(--k-voile-neutre); }
/* Option choisie au clavier : fond d'action et barre de 4 px, visible sans la couleur seule. */
.k-recherche__option:is([aria-selected="true"], .is-actif) { outline: var(--k-trait-fort) solid var(--k-action); outline-offset: calc(var(--k-trait-fort) * -1); background: var(--k-action-voile); box-shadow: inset var(--k-space-1) 0 0 var(--k-action); }
.k-recherche__nom { grid-column: 1; display: flex; align-items: center; gap: var(--k-space-2); font-weight: var(--k-fw-medium); color: var(--k-encre); }
.k-recherche__meta { grid-column: 1; margin: 0; color: var(--k-attenue); font-size: var(--k-fs-sm); font-variant-numeric: var(--k-chiffres); }
.k-recherche__meta span + span::before { content: "\00b7"; margin-inline: var(--k-space-2); }
.k-recherche__allergie { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: var(--k-space-1); padding: var(--k-space-1) var(--k-space-2); border-radius: var(--k-rayon-gelule); background: var(--k-danger-voile); color: var(--k-danger-encre); border: var(--k-trait) solid var(--k-danger-filet); font-size: var(--k-fs-xs); font-weight: var(--k-fw-medium); white-space: nowrap; }
.k-recherche mark { background: var(--k-action-voile); color: inherit; font-weight: inherit; padding: 0; border-radius: var(--k-trait-fort); box-shadow: 0 var(--k-trait-fort) 0 var(--k-action); }
.k-recherche__option:is([aria-selected="true"], .is-actif) mark { background: var(--k-surface); }
.k-recherche__etat { display: flex; flex-direction: column; align-items: flex-start; gap: var(--k-space-2); padding: var(--k-space-3) var(--k-space-4); color: var(--k-attenue); font-size: var(--k-fs-md); }
.k-recherche__etat[hidden] { display: none; }
.k-recherche__etat p { margin: 0; display: flex; align-items: center; gap: var(--k-space-2); }
.k-recherche__etat.is-erreur { color: var(--k-danger-encre); background: var(--k-danger-voile); border-radius: var(--k-rayon-petit); }
.k-recherche__tous { margin: 0; padding: var(--k-space-2) var(--k-space-4) var(--k-space-3); font-size: var(--k-fs-sm); color: var(--k-attenue); }
.k-recherche__tous[hidden] { display: none; }


/* ---------- En-tete de page (titre, compteur, actions) ---------- */
.k-entete-page { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-space-2) var(--k-space-3); margin-block-end: var(--k-space-6); }
.k-entete-page__titre { margin: 0; font-family: var(--k-font-titre); font-weight: var(--k-fw-semibold); font-size: var(--k-fs-2xl); line-height: var(--k-lh-titre); color: var(--k-encre); }
.k-entete-page__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-space-2); margin-inline-start: auto; }
.k-kbd {
  display: inline-block; min-inline-size: var(--k-space-6); padding: 0 var(--k-space-1); text-align: center;
  border: var(--k-trait) solid currentColor; border-radius: var(--k-rayon-petit); font: inherit; font-size: var(--k-fs-xs); line-height: var(--k-lh-base);
  font-variant-numeric: var(--k-chiffres);
}

/* ---------- Tableau de liste : selecteur de colonnes, nom, suivi ---------- */
.k-tableau thead th.k-tableau__coin { position: relative; z-index: 2; white-space: nowrap; } /* z-index : sans lui, les boutons des lignes (position: relative) se peignent par-dessus le menu des colonnes ouvert */
.k-tableau__colonnes { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--k-cible); block-size: var(--k-cible); margin-inline-start: var(--k-space-2); padding: 0; border: 0; border-radius: var(--k-rayon-petit); background: transparent; color: var(--k-attenue); cursor: pointer; vertical-align: middle; }
.k-tableau__colonnes:is(:hover, .is-survol, [aria-expanded="true"]) { background: var(--k-filet); color: var(--k-encre); }
/* Sélecteur de colonnes généré par colonnes.js (dropdown Bootstrap) dans l'en-tête « Actions » : libellé et bouton sur une ligne, bouton à droite, icône en currentColor atténuée. */
.k-tableau thead th.k-tableau__coin { display: table-cell; }
.k-tableau__coin > .dropdown { display: inline-block; vertical-align: middle; margin-inline-start: var(--k-space-2); white-space: nowrap; }
.k-tableau__coin .orl-colonnes-icone { display: inline-flex; align-items: center; gap: var(--k-space-1); min-block-size: var(--k-cible); padding: 0 var(--k-space-1); border: 0; border-radius: var(--k-rayon-petit); background: transparent; color: var(--k-attenue); white-space: nowrap; cursor: pointer; }
.k-tableau__coin .orl-colonnes-icone i { color: currentColor; opacity: 1; }
.k-tableau__coin .orl-colonnes-icone:is(:hover, [aria-expanded="true"]) { color: var(--k-encre); background: var(--k-filet); }
.k-tableau__coin .orl-colonnes-icone:focus-visible { color: var(--k-encre); outline: var(--k-trait-fort) solid var(--k-action); outline-offset: var(--k-trait-fort); }
.k-tableau__menu { position: absolute; inset-inline-end: 0; inset-block-start: 100%; z-index: var(--k-z-liste-deroulante); min-inline-size: calc(var(--k-space-16) * 3); padding: var(--k-space-2); background: var(--k-surface); border: var(--k-trait) solid var(--k-filet); border-radius: var(--k-rayon-petit); box-shadow: var(--k-ombre-flottant); font-weight: var(--k-fw-regular); }
.k-tableau__menu[hidden] { display: none; }
.k-tableau__menu-titre { margin: 0; padding: var(--k-space-1) var(--k-space-2); color: var(--k-attenue); font-size: var(--k-fs-sm); font-weight: var(--k-fw-medium); }
.k-tableau__menu .k-option { display: flex; padding-inline: var(--k-space-2); font-size: var(--k-fs-md); color: var(--k-encre); }
.k-tableau__nom { font-weight: var(--k-fw-medium); color: var(--k-encre); text-decoration: none; white-space: nowrap; }
.k-tableau__nom:hover { text-decoration: underline; color: var(--k-encre); }
.k-tableau__sous { display: block; color: var(--k-attenue); font-size: var(--k-fs-sm); font-weight: var(--k-fw-regular); }
.k-actions-ligne { display: flex; gap: var(--k-space-1); flex-wrap: nowrap; }
/* Posée sur le <td> lui-même (ordonnances, documents, audiogrammes), le flex en faisait une boîte hors du tableau :
   filet de ligne décalé sous la colonne. La cellule reste une cellule ; l'écart passe par une marge. */
td.k-actions-ligne { display: table-cell; white-space: nowrap; text-align: end; }
.k-tableau:has(td.k-actions-ligne) thead th:last-child { text-align: end; }
td.k-actions-ligne > * + * { margin-inline-start: var(--k-space-1); }
/* Dans une cellule alignée à droite (en-tête « Actions » en .k-num), les boutons suivent l'en-tête. */
.k-num > .k-actions-ligne { justify-content: flex-end; }
/* Rebut d'un lot : volet natif <details>, posé au-dessus du tableau pour ne pas l'élargir. */
.k-rebut { position: relative; }
.k-rebut > summary { list-style: none; }
.k-rebut > summary::-webkit-details-marker { display: none; }
.k-rebut__form {
  position: absolute; right: 0; top: calc(100% + var(--k-space-1)); z-index: 10;
  display: grid; gap: var(--k-space-1); min-width: 14rem; padding: var(--k-space-2);
  background: var(--k-surface); border-radius: var(--k-rayon-petit); box-shadow: var(--k-ombre-flottant);
}
.k-tableau tbody tr.is-cliquable { cursor: pointer; }
/* « Suivi par » : puce neutre, point à la teinte du praticien, nom en texte (reprend _SuiviPar de l'app). */
.k-suivi-liste { display: inline-flex; flex-wrap: wrap; gap: var(--k-space-1); vertical-align: middle; }
.k-suivi {
  --k-praticien: var(--k-autres);
  display: inline-flex; align-items: center; gap: var(--k-space-2);
  padding: 0 var(--k-space-3); line-height: 1.9; white-space: nowrap;
  background: var(--k-surface); color: var(--k-encre-2); font-weight: var(--k-fw-regular); font-size: var(--k-fs-sm);
  border: var(--k-trait) solid var(--k-filet); border-radius: var(--k-rayon-gelule);
}
.k-suivi::before { content: ""; inline-size: var(--k-space-2); block-size: var(--k-space-2); border-radius: 50%; background: var(--k-praticien); flex: none; }
.k-suivi.is-p1 { --k-praticien: var(--k-p1); } .k-suivi.is-p2 { --k-praticien: var(--k-p2); } .k-suivi.is-p3 { --k-praticien: var(--k-p3); } .k-suivi.is-p4 { --k-praticien: var(--k-p4); }
.k-suivi.is-p5 { --k-praticien: var(--k-p5); } .k-suivi.is-p6 { --k-praticien: var(--k-p6); } .k-suivi.is-p7 { --k-praticien: var(--k-p7); } .k-suivi.is-p8 { --k-praticien: var(--k-p8); }
.k-tableau [hidden] { display: none; }

/* ---------- Barre de recherche / filtres : modele unique (une seule bordure, un seul focus) ---------- */
.k-barre-recherche { container-type: inline-size; margin-block-end: var(--k-space-4); }
.k-barre-recherche__groupe {
  display: flex; align-items: stretch; position: relative;
  border: var(--k-trait) solid var(--k-filet-champ); border-radius: var(--k-rayon-petit); background: var(--k-surface);
}
.k-barre-recherche__groupe:hover { border-color: color-mix(in srgb, var(--k-filet-champ) 70%, var(--k-encre)); }
.k-barre-recherche__groupe:focus-within { border-color: var(--k-action); outline: none; box-shadow: 0 0 0 var(--k-halo) var(--k-action-voile); }
.k-barre-recherche__icone { display: flex; align-items: center; padding-inline: var(--k-space-3); color: var(--k-attenue); }
.k-barre-recherche__groupe :is(.k-input, .k-select) { border: 0; border-radius: 0; background: transparent; outline: none; box-shadow: none !important; min-inline-size: 0; }
.k-barre-recherche__champ { display: flex; align-items: stretch; min-inline-size: 0; border-inline-start: var(--k-trait) solid var(--k-filet); }
.k-barre-recherche__champ.is-texte { flex: 1 1 calc(var(--k-space-16) * 4); border-inline-start: 0; }
.k-barre-recherche__champ.is-texte .k-input { padding-inline-start: 0; inline-size: 100%; }
.k-barre-recherche__champ.is-liste { flex: 0 1 auto; overflow: hidden; }
.k-barre-recherche__champ.is-liste .k-select-cadre { display: flex; flex: 1 1 auto; min-inline-size: 0; }
/* Liste dans la barre : la flèche est un élément de flex à part (plus posée en absolu par-dessus), donc le texte
   s'arrête toujours avant elle (l'overflow d'un select se coupe au bord du padding, pas du contenu : c'était la cause).
   Largeur = celle du libellé choisi (field-sizing) tant qu'il y a la place ; rétrécit avec « … » sinon. */
.k-barre-recherche__champ.is-liste .k-select-cadre::after { position: static; transform: none; flex: none; align-self: center; margin-inline: var(--k-space-1) var(--k-space-3); }
.k-barre-recherche__champ.is-liste .k-select { flex: 1 1 auto; inline-size: auto; field-sizing: content; padding-inline-end: var(--k-space-3); min-inline-size: 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.k-barre-recherche__champ.is-liste :is(.k-select, .k-select > button) selectedcontent { display: block; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-barre-recherche__champ.is-liste .k-select::picker(select) { white-space: normal; }
.k-barre-recherche__champ.is-periode { flex: none; align-items: center; }
.k-barre-recherche__prefixe { margin: 0; padding-inline-start: var(--k-space-3); color: var(--k-attenue); font-size: var(--k-fs-sm); } /* margin : un <label> garde sinon la marge basse des formulaires et remonte au-dessus de son champ */
.k-barre-recherche__groupe .k-input.is-date { inline-size: auto; max-inline-size: none; flex: none; font-variant-numeric: var(--k-chiffres); }
.k-barre-recherche__groupe .k-btn { border: 0; border-inline-start: var(--k-trait) solid var(--k-filet); border-radius: 0; background: var(--k-voile-neutre); flex: none; }
.k-barre-recherche__groupe .k-btn:is(:hover, .is-survol) { background: var(--k-filet); }
.k-barre-recherche__groupe .k-btn:focus-visible { outline-offset: calc(var(--k-trait-fort) * -1); box-shadow: none; }
.k-barre-recherche__groupe > .k-btn { border-start-end-radius: var(--k-rayon-petit); border-end-end-radius: var(--k-rayon-petit); }

/* Rappel : resultats, puces des filtres actifs, effacer */
.k-barre-recherche__etat { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-space-2) var(--k-space-3); margin-block-start: var(--k-space-2); color: var(--k-attenue); font-size: var(--k-fs-md); }
.k-barre-recherche__etat p { margin: 0; }
.k-barre-recherche__etat strong { font-weight: var(--k-fw-medium); color: var(--k-encre); }
.k-barre-recherche__puces { display: flex; flex-wrap: wrap; gap: var(--k-space-2); list-style: none; margin: 0; padding: 0; }
.k-puce { display: inline-flex; align-items: center; gap: var(--k-space-1); min-block-size: var(--k-cible); padding: 0 var(--k-space-1) 0 var(--k-space-3); border: var(--k-trait) solid var(--k-filet); border-radius: var(--k-rayon-gelule); background: var(--k-voile-neutre); color: var(--k-encre); font-size: var(--k-fs-sm); font-variant-numeric: var(--k-chiffres); }
.k-puce__retirer { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--k-cible); block-size: var(--k-cible); border-radius: var(--k-rayon-gelule); color: var(--k-attenue); text-decoration: none; }
.k-puce__retirer:is(:hover, .is-survol) { background: var(--k-filet); color: var(--k-encre); }

/* Repli : colonne unique a 768 px et en dessous (conteneur), segments separes par un filet horizontal. */
@container (max-width: 48rem) {
  .k-barre-recherche__groupe { flex-direction: column; }
  .k-barre-recherche__icone { display: none; }
  .k-barre-recherche__champ { border-inline-start: 0; border-block-start: var(--k-trait) solid var(--k-filet); }
  .k-barre-recherche__champ.is-texte { border-block-start: 0; flex: 1 1 auto; }
  .k-barre-recherche__champ.is-texte .k-input { padding-inline-start: var(--k-space-3); }
  .k-barre-recherche__champ.is-liste { flex: 1 1 auto; }
  .k-barre-recherche__champ.is-periode { flex-wrap: wrap; padding-inline-end: var(--k-space-3); }
  .k-barre-recherche__groupe .k-btn { border-inline-start: 0; border-block-start: var(--k-trait) solid var(--k-filet); inline-size: 100%; border-start-end-radius: 0; border-end-start-radius: var(--k-rayon-petit); border-end-end-radius: var(--k-rayon-petit); }
}

/* ---------- Liste déroulante ouverte (navigateurs récents) ----------
   Chrome / Edge 135+ : la liste ouverte est dessinée aux jetons au lieu de la liste native de Windows
   (surlignage bleu vif, angles droits). Les navigateurs plus anciens gardent la liste native.
   La flèche reste celle du composant (::picker-icon masqué). */
@supports (appearance: base-select) {
  :is(.k-select, .form-select), :is(.k-select, .form-select)::picker(select) { appearance: base-select; }
  :is(.k-select, .form-select)::picker-icon { display: none; }
  /* Barre de recherche : la flèche posée à côté de la liste ne s'ouvrait pas au clic. On prend la flèche native,
     qui fait partie de la liste : cliquable, et le libellé s'arrête avant elle. Même chevron que le composant. */
  .k-barre-recherche__champ.is-liste .k-select-cadre:not(:has(details))::after { display: none; }
  .k-barre-recherche__champ.is-liste .k-select::picker-icon {
    display: block; content: "\F282"; font-family: var(--k-icone-bi); color: var(--k-attenue);
    /* margin auto : en bout de champ, comme toute liste, quand le champ est plus large que le libellé (Statistiques). */
    margin-inline-start: auto; padding-inline-start: var(--k-space-2); transition: none; flex: none;
  }
  .k-barre-recherche__champ.is-liste .k-select:open::picker-icon { rotate: none; }
  :is(.k-select, .form-select)::picker(select) {
    margin-block-start: var(--k-space-1); padding: var(--k-space-1);
    background: var(--k-surface); color: var(--k-encre);
    border: var(--k-trait) solid var(--k-filet); border-radius: var(--k-rayon-petit); box-shadow: var(--k-ombre-flottant);
  }
  :is(.k-select, .form-select) option {
    padding: var(--k-space-2) var(--k-space-3); border-radius: var(--k-rayon-petit);
    color: var(--k-encre); background: transparent; font-weight: var(--k-fw-regular);
  }
  :is(.k-select, .form-select) option:is(:hover, :focus-visible) { background: var(--k-voile-neutre); outline: none; }
  :is(.k-select, .form-select) option:checked { background: var(--k-action-voile); color: var(--k-encre); font-weight: var(--k-fw-medium); }
  :is(.k-select, .form-select) option::checkmark { color: var(--k-action); }
  :is(.k-select, .form-select) option:disabled { color: var(--k-attenue); }
}

/* Champ en erreur ou valide, au focus : contour de 2 px a la teinte (1 px de bordure + 1 px interieur) et halo teinte. */
.k-champ.is-erreur :is(.k-input, .k-select, .k-textarea):is(:focus, :focus-visible, .is-focus),
.k-champ.is-erreur .k-groupe:focus-within,
:is(.k-input, .k-select, .k-textarea)[aria-invalid="true"]:is(:focus, :focus-visible, .is-focus) {
  border-color: var(--k-danger); box-shadow: inset 0 0 0 var(--k-trait) var(--k-danger), 0 0 0 var(--k-halo) var(--k-danger-voile);
}
.k-champ.is-valide :is(.k-input, .k-select, .k-textarea):is(:focus, :focus-visible, .is-focus),
.k-champ.is-valide .k-groupe:focus-within {
  border-color: var(--k-succes); box-shadow: inset 0 0 0 var(--k-trait) var(--k-succes), 0 0 0 var(--k-halo) var(--k-succes-voile);
}
/* Barre groupee : le groupe s'allume ; le champ texte n'a pas de marque en plus (le curseur suffit,
   décision client : pas de focus gras). Listes et boutons du groupe : trait fin d'action au clavier. */
.k-barre-recherche__groupe .k-input:is(:focus, :focus-visible) { box-shadow: none !important; }
.k-barre-recherche__groupe .k-select:focus-visible,
.k-barre-recherche__groupe .k-btn:focus-visible {
  box-shadow: inset 0 calc(var(--k-trait) * -1) 0 var(--k-action) !important;
}

/* Barre sans champ texte (dates, listes seulement) : pas de loupe, pleine largeur comme la barre de recherche ;
   la liste prend la place libre (libellés lisibles), période et bouton gardent leur taille. */
.k-barre-recherche__groupe.is-sans-texte .k-barre-recherche__champ.is-liste { flex: 1 1 calc(var(--k-space-16) * 3); }
.k-barre-recherche__duo { display: inline-flex; align-items: center; }
.k-barre-recherche__champ.is-periode { gap: var(--k-space-2); }
@container (max-width: 48rem) {
  /* Libellé au-dessus de chaque date ; les deux dates passent à la ligne proprement. */
  .k-barre-recherche__duo { flex-direction: column; align-items: flex-start; gap: var(--k-space-1); }
  .k-barre-recherche__champ.is-periode { align-items: flex-start; padding-block: var(--k-space-2); gap: var(--k-space-3); }
  .k-barre-recherche__duo .k-barre-recherche__prefixe { padding-inline-start: var(--k-space-3); }
}

/* Téléphone : chiffres alignés (tabulaires) mais lu comme un texte, donc aligné à gauche, sans retour à la ligne. */
.k-tableau .k-tel { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Date et heure : chiffres alignés, mais lues comme un texte, donc au début de la colonne, sous leur en-tête.
   .k-num (aligné à droite) reste aux montants et aux quantités, qu'on compare par la fin. */
.k-tableau .k-date { white-space: nowrap; font-variant-numeric: var(--k-chiffres); }

/* Colonne Actions : toujours alignée à droite, en bout de ligne (décision client du 06/10/2026).
   Elle est repérée par l'en-tête .k-tableau__coin (sélecteur de colonnes), toujours en dernière position. */
/* La colonne prend la largeur de ses boutons (width: 1 %) : « Actions » se lit alors au début de la colonne, au-dessus
   du premier bouton, et le sélecteur de colonnes se pose à la fin, dans la marge réservée à droite. */
.k-tableau thead th.k-tableau__coin { inline-size: 1%; text-align: start; padding-inline-end: calc(var(--k-cible) + var(--k-space-3)); }
/* Centré sans transform : un ancêtre transformé capture le menu positionné en fixed, qui restait rogné par le cadre. */
.k-tableau__coin > .dropdown { position: absolute; inset-block: 0; inset-inline-end: var(--k-space-2); display: flex; align-items: center; margin: 0; }
.k-tableau:has(thead th.k-tableau__coin) tbody td:last-child { inline-size: 1%; text-align: end; white-space: nowrap; }
.k-tableau:has(thead th.k-tableau__coin) tbody td:last-child > :is(div, span, form) { justify-content: flex-end; margin-inline-start: auto; }

/* Barre groupee de saisie (Sans rendez-vous) : champ motif et bouton primaire dans le groupe. */
.k-barre-recherche__champ.is-motif { flex: 1 1 calc(var(--k-space-16) * 3); min-inline-size: calc(var(--k-space-16) * 2); }
.k-barre-recherche__champ.is-motif .k-input { inline-size: 100%; }
.k-barre-recherche__groupe .k-btn.is-primaire { background: var(--k-action); color: var(--k-sur-aplat); }
.k-barre-recherche__groupe .k-btn.is-primaire:is(:hover, .is-survol, :active, .is-actif) { background: var(--k-action-fonce); }
.k-barre-recherche__aide { margin-block-start: var(--k-space-2); }
@container (max-width: 48rem) {
  .k-barre-recherche__champ.is-motif { flex: 1 1 auto; }
}

/* ---------- Phase 4 : partiels partagés ---------- */
/* Toast : les genres posés par MedOrlNotifications (is-success/is-error/is-warning) teintent l'icône, comme is-succes/is-probleme/is-attention. */
.k-toast.is-success { --k-toast-aplat: var(--k-succes); }
.k-toast.is-warning { --k-toast-aplat: var(--k-attention); }
.k-toast.is-error { --k-toast-aplat: var(--k-danger); }

/* Barre patient : boîte blanche à filet gris, nom en titre, coordonnées atténuées. */
.k-barre-patient { display: flex; align-items: center; gap: var(--k-space-4); flex-wrap: wrap; padding: var(--k-space-3) var(--k-space-4); margin-block-end: var(--k-space-4); background: var(--k-surface); color: var(--k-encre); border: var(--k-trait) solid var(--k-filet); border-radius: var(--k-rayon-petit); }
.k-barre-patient__nom { font-family: var(--k-font-titre, var(--k-font-texte)); font-size: var(--k-fs-lg); font-weight: var(--k-fw-semibold); color: var(--k-encre); text-decoration: none; display: inline-block; }
.k-barre-patient__nom:is(:hover, .is-survol) { text-decoration: underline; }
.k-barre-patient__meta { color: var(--k-attenue); font-size: var(--k-fs-md); }
.k-barre-patient__actions { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: var(--k-space-2); }

/* Allergie : grenat (danger), toujours icône + mot. */
.k-allergie { display: inline-flex; align-items: baseline; gap: var(--k-space-2); margin-block-start: var(--k-space-2); padding: var(--k-space-1) var(--k-space-3); border: var(--k-trait) solid var(--k-danger-filet); border-radius: var(--k-rayon-petit); background: var(--k-danger-voile); color: var(--k-danger-encre); font-size: var(--k-fs-md); }
.k-allergie__mot { font-weight: var(--k-fw-medium); }

/* Mention discrète (heure de mise à jour, temps d'attente). */
.k-mention { color: var(--k-attenue); font-size: var(--k-fs-sm); }

/* Lien d'aide contextuelle « ? » : petit « ? » sans rond (la taille du texte de la date, pas celle du titre),
   cible tactile conservée par la zone minimale, attenué jusqu'au survol, anneau de focus visible. */
.k-aide-ecran { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--k-cible); min-block-size: var(--k-cible); font-family: var(--k-font-texte, inherit); font-size: var(--k-fs-sm); font-weight: var(--k-fw-medium); line-height: 1; color: var(--k-attenue); text-decoration: none; vertical-align: middle; border-radius: var(--k-rayon-petit); }
.k-aide-ecran:is(:hover, .is-survol, :focus-visible) { color: var(--k-action); }
.k-aide-ecran:focus-visible { outline: 2px solid var(--k-action); outline-offset: -4px; }

/* ---- Phase 4 : écrans de facturation et d'abonnement (formulaires, fiches, soldes) ---- */

/* Corps d'un écran de saisie : largeur de lecture bornée, sections empilées. */
.k-formulaire { max-inline-size: var(--k-largeur-saisie); display: flex; flex-direction: column; gap: var(--k-space-4); }
.k-formulaire.is-large { max-inline-size: none; }

/* Section d'écran : sans cadre, séparée de la suivante par un filet ; .is-panneau = bloc distinct en carte (formulaire ou données). */
.k-section { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.k-section + .k-section:not(.is-panneau) { border-block-start: var(--k-trait) solid var(--k-filet); margin-block-start: var(--k-space-6); padding-block-start: var(--k-space-4); }
.k-section.is-panneau { background: var(--k-surface); border: var(--k-trait) solid var(--k-filet); border-radius: var(--k-rayon); padding: var(--k-space-4); }
.k-section__titre { margin: 0 0 var(--k-space-3); font-family: var(--k-font-titre); font-weight: var(--k-fw-semibold); font-size: var(--k-fs-lg); color: var(--k-encre); }
.k-section > .k-tableau-cadre { margin-block-end: 0; }
.k-section__aide { margin: var(--k-space-3) 0 0; font-size: var(--k-fs-sm); color: var(--k-attenue); }

/* Abonnement (Views/Abonnement/Index) : licence et praticiens côte à côte, modules en tuiles dessous.
   Le chiffre clé en grand, la phrase complète dessous ; la jauge est décorative, le texte porte le sens. */
.k-abo { display: grid; gap: var(--k-space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .k-abo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.k-abo > .is-pleine { grid-column: 1 / -1; }
.k-abo .k-section.is-panneau { display: grid; gap: var(--k-space-3); align-content: start; }
.k-abo .k-section__titre { display: flex; align-items: center; gap: var(--k-space-2); margin: 0; }
.k-abo__chiffre { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--k-space-2); color: var(--k-encre-2); }
.k-abo__valeur { font-family: var(--k-font-titre); font-size: var(--k-fs-3xl); font-weight: var(--k-fw-semibold); line-height: var(--k-lh-titre); font-variant-numeric: var(--k-chiffres); color: var(--k-encre); }
.k-abo__detail { margin: 0; font-size: var(--k-fs-sm); color: var(--k-attenue); font-variant-numeric: var(--k-chiffres); }
.k-abo__jauge { display: block; block-size: var(--k-space-2); background: var(--k-voile-neutre); border-radius: var(--k-rayon-gelule); overflow: hidden; }
.k-abo__jauge > i { display: block; block-size: 100%; background: var(--k-dv-mise-en-avant); border-radius: var(--k-rayon-gelule); }
.k-abo__jauge.is-depasse > i { background: var(--k-attention); }
.k-abo__modules { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--k-space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--k-largeur-bloc-m)), 1fr)); }
.k-abo__module { display: flex; align-items: flex-start; gap: var(--k-space-3); padding: var(--k-space-3); border: var(--k-trait) solid var(--k-filet); border-radius: var(--k-rayon-petit); color: var(--k-encre); }
.k-abo__module > .k-picto { flex: none; font-size: var(--k-fs-2xl); }
.k-abo__module-nom { display: block; font-weight: var(--k-fw-medium); }
.k-abo__module-description, .k-abo__module-etat { display: block; margin-block-start: var(--k-space-1); font-size: var(--k-fs-sm); color: var(--k-attenue); }
.k-abo__module-etat { font-weight: var(--k-fw-medium); }
/* Non souscrit : grisé par les jetons, sans opacité (elle ferait tomber le contraste sous AA). */
.k-abo__module.is-non-souscrit { background: var(--k-filet-leger); border-style: dashed; color: var(--k-attenue); }



/* Soldes : cases de chiffres clés (montant, versé, reste). */
.k-solde { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--k-largeur-bloc-s), 1fr)); gap: var(--k-space-3); margin-block-end: var(--k-space-4); }
.k-solde__case { background: var(--k-surface); border: var(--k-trait) solid var(--k-filet); border-radius: var(--k-rayon); padding: var(--k-space-3) var(--k-space-4); display: flex; flex-direction: column; gap: var(--k-space-1); }
.k-solde__libelle { color: var(--k-attenue); font-size: var(--k-fs-sm); }
.k-solde__valeur { font-size: var(--k-fs-xl); font-variant-numeric: var(--k-chiffres); color: var(--k-encre); }
.k-solde__case.is-du .k-solde__valeur { color: var(--k-attention-encre); }
.k-solde__case.is-solde .k-solde__valeur { color: var(--k-succes-encre); }

/* Message de validation sous un champ (asp-validation-for) et résumé du formulaire. */
.k-champ__msg { color: var(--k-danger-encre); font-size: var(--k-fs-sm); }
.k-champ__msg:empty { display: none; }
.k-resume-erreurs { color: var(--k-danger-encre); margin-block-end: var(--k-space-3); }
.k-resume-erreurs.validation-summary-valid { display: none; }
.k-resume-erreurs ul { margin: 0; padding-inline-start: var(--k-space-4); }

/* Rangée de champs alignés par le bas (formulaire de versement). */
.k-champs-ligne { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--k-space-3); align-items: end; }
.k-champs-ligne > .k-champ { margin-block-end: 0; }
/* Formulaire d'ajout d'une ligne (Fermetures, Tarifs, Catalogue des soins) : champs alignés par le haut
   (libellés à la même hauteur, aide ou message sous le champ), bouton à hauteur des champs grâce à un libellé vide
   invisible (.k-champ__libelle.is-fantome), qui passe à la ligne proprement en écran étroit. */
.k-champs-ligne.is-ajout { display: flex; flex-wrap: wrap; align-items: flex-start; }
.k-champs-ligne.is-ajout > .k-champ { flex: 1 1 12rem; min-inline-size: 0; }
.k-champs-ligne.is-ajout > .k-champ.is-action { flex: 0 0 auto; }
/* Une date a sa largeur propre : sa case ne s'étire pas, sinon un trou s'ouvrait à droite du champ. */
.k-champs-ligne.is-ajout > .k-champ:has(> .k-input.is-date) { flex-grow: 0; }
.k-champ__libelle.is-fantome { visibility: hidden; }
.k-champ__lien { font-size: var(--k-fs-sm); }

/* ---------- Phase 4 : dossier patient (formulaires, fiches) ---------- */
/* Bloc de formulaire : fieldset a cadre, remplace .orl-bloc. La legende entre dans le flux (sinon elle chevauche la bordure). */
.k-fiche { min-inline-size: 0; margin: 0 0 var(--k-space-4); background: var(--k-surface); border: var(--k-trait) solid var(--k-filet); border-radius: var(--k-rayon); padding: var(--k-space-4) var(--k-space-6) var(--k-space-6); }
.k-fiche__legende { float: inline-start; inline-size: 100%; padding: 0; margin: 0 0 var(--k-space-3); font-size: var(--k-fs-lg); font-weight: var(--k-fw-medium); color: var(--k-encre); }
.k-fiche__legende + * { clear: both; }
.k-fiche .k-champ { margin-block-end: 0; }
/* Proximite : le libelle colle a son champ, et c'est entre deux champs que l'air se met. La marge du label herite
   (site-custom.css, .3rem) s'ajoutait au gap et, la marge basse des champs etant nulle dans une fiche, le libelle
   suivant touchait presque le champ du dessus. Pas dans une rangee : ses champs sont cote a cote. */
.k-champ__libelle { margin: 0; }
.k-fiche :not(.k-champs-ligne) > :is(.k-champ, .k-champs-ligne) + :is(.k-champ, .k-champs-ligne) { margin-block-start: var(--k-space-4); }
.k-fiche__aide { margin: var(--k-space-3) 0 0; font-size: var(--k-fs-sm); color: var(--k-attenue); }
/* Pied d'un formulaire : bouton principal, sorties, puis rappel « champs obligatoires » repousse a droite. */
.k-actions-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-space-2); }
.k-actions-form__aide { margin-inline-start: auto; font-size: var(--k-fs-sm); color: var(--k-attenue); }
/* Plafond de largeur d un formulaire a deux colonnes (fiche patient). */
.k-fiche-large { max-inline-size: var(--k-largeur-contenu); }
/* Liste de definitions (fiche en lecture) : libelle attenue a gauche, valeur a droite. */
.k-liste-def { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--k-space-2) var(--k-space-4); margin: 0; }
.k-liste-def > dt { color: var(--k-attenue); font-weight: var(--k-fw-regular); }
.k-liste-def > dd { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }
/* « Non renseigné » reste atténué mais à la taille de son libellé : plus petit, il se décalait sous la ligne. */
.k-liste-def > dd.k-mention { font-size: inherit; }
@media (max-width: 40rem) { .k-liste-def { grid-template-columns: 1fr; gap: 0; } .k-liste-def > dd { margin-block-end: var(--k-space-2); } }
/* Liens secondaires en pied de fiche (reunir, masquer). */
.k-pied-fiche { display: flex; flex-wrap: wrap; gap: var(--k-space-4); margin-block-start: var(--k-space-3); padding-block-start: var(--k-space-3); border-block-start: var(--k-trait) solid var(--k-filet); font-size: var(--k-fs-sm); }
.k-pied-fiche .is-danger { color: var(--k-danger-encre); }
/* Texte libre saisi : conserve les retours a la ligne. */
.k-texte-libre { white-space: pre-line; }
/* Champ de saisie a largeur bornee, ancre de sa liste de suggestions (fusion de dossiers). */
.k-saisie-etroite { position: relative; max-inline-size: var(--k-largeur-saisie); }

/* ---------- Phase 4 : saisie et fiche de consultation ---------- */
/* Une liste déroulante masquée par l'attribut hidden (le cadre est en display: block). */
.k-select-cadre[hidden] { display: none; }
/* Erreur serveur ou jQuery Validate : le contour des champs KALMA passe au grenat, comme .is-erreur. */
:is(.k-input, .k-select, .k-textarea).input-validation-error { border-color: var(--k-danger); }
:is(.k-input, .k-select, .k-textarea).input-validation-error:focus { border-color: var(--k-danger); box-shadow: 0 0 0 var(--k-halo) var(--k-danger-voile); }
/* Écran de saisie : formulaire à gauche, rappel du dossier (consultations précédentes) à droite ; empilé sur écran étroit. */
.k-saisie { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--k-space-6); align-items: start; }
.k-saisie__lateral { display: flex; flex-direction: column; gap: var(--k-space-4); }
@media (max-width: 64rem) { .k-saisie { grid-template-columns: minmax(0, 1fr); } }
/* Carte de rappel : titre, corps, pied. Complète .k-carte. */
.k-carte__titre { margin: 0 0 var(--k-space-3); font-family: var(--k-font-titre); font-weight: var(--k-fw-semibold); font-size: var(--k-fs-base); color: var(--k-encre); }
.k-carte__ligne { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--k-space-2); margin-block-end: var(--k-space-2); }
.k-carte__ligne .k-carte__lien { margin-inline-start: auto; }
.k-carte__liste { list-style: none; margin: var(--k-space-3) 0 0; padding: 0; font-size: var(--k-fs-md); }
.k-carte__liste > li { padding-block: var(--k-space-2); border-block-start: var(--k-trait) solid var(--k-filet-leger); }
.k-carte__pied { margin-block-start: var(--k-space-3); padding-block-start: var(--k-space-3); border-block-start: var(--k-trait) solid var(--k-filet); font-size: var(--k-fs-md); }
.k-carte .k-liste-def { font-size: var(--k-fs-md); }
/* Fiches côte à côte (lecture d'une consultation) ; .is-large occupe toute la largeur. */
.k-fiches { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--k-largeur-bloc-l)), 1fr)); gap: var(--k-space-4); align-items: start; margin-block-end: var(--k-space-4); }
.k-fiches > .is-large { grid-column: 1 / -1; }
/* Deux fiches côte à côte, chacune la moitié de la largeur. Sans plafond, un bloc .is-large étendu sur toutes les
   colonnes empêchait celles restées vides de se replier : cinq colonnes sur grand écran, deux cartes étroites. */
.k-fiches.is-deux { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--k-largeur-bloc-l), calc(50% - var(--k-space-4)))), 1fr)); }
.k-fiches > .k-fiche { margin: 0; }
/* Choix de soin (radio dans un fieldset) : une option par ligne, sans cadre. */
.k-choix { display: flex; flex-direction: column; gap: var(--k-space-1); border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.k-choix > legend { padding: 0; margin: 0 0 var(--k-space-1); float: none; font-size: var(--k-fs-md); font-weight: var(--k-fw-medium); color: var(--k-encre); }

/* ---------- Prise de rendez-vous : legende de section, patient choisi, note, creneaux, occupation ---------- */
/* Legende d'un fieldset.k-section : dans le flux (Bootstrap la flotte), sans remplissage. */
.k-section > legend.k-section__titre { float: none; inline-size: 100%; padding: 0; }
/* Dans un panneau encadré, une legend non flottante se dessine SUR la bordure du fieldset : le titre chevauchait le
   haut de la carte. Flottante, elle rentre dans la marge intérieure ; ce qui la suit repasse dessous.
   Tout ce qui la suit, et pas seulement son voisin : quand ce voisin est un champ caché (l'agenda d'un praticien
   seul, sur Nouveau rendez-vous), il ne dégageait rien, et le champ Date se logeait contre le titre, large de zéro. */
.k-section.is-panneau > legend.k-section__titre { float: left; }
.k-section.is-panneau > legend.k-section__titre ~ * { clear: both; }
/* Deux colonnes des 1400 px : patient et date a gauche, creneau et note a droite ; une colonne en dessous. */
.k-colonnes { display: flex; flex-direction: column; gap: var(--k-space-6); }
@media (min-width: 87.5rem) { .k-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.k-colonnes > div { display: flex; flex-direction: column; gap: var(--k-space-6); min-inline-size: 0; }
.k-formulaire.is-rdv { max-inline-size: calc(var(--k-largeur-saisie) * 2); }
/* Patient retenu (formulaire) : nom en texte, action « Changer » a droite. Le [hidden] natif doit l'emporter. */
.k-patient-choisi { display: flex; align-items: center; gap: var(--k-space-2); padding: var(--k-space-2) var(--k-space-3); background: var(--k-voile-neutre); border: var(--k-trait) solid var(--k-filet); border-radius: var(--k-rayon-petit); }
.k-patient-choisi[hidden] { display: none; }
.k-patient-choisi .bi { color: var(--k-attenue); }
.k-patient-choisi .k-btn { margin-inline-start: auto; }
/* Note d'accueil : texte neutre, sans fond ni liseré colore. */
.k-postit { display: flex; align-items: flex-start; gap: var(--k-space-2); max-inline-size: calc(var(--k-largeur-saisie) * 1.3); padding: var(--k-space-2) var(--k-space-3); background: var(--k-surface); border: var(--k-trait) solid var(--k-filet); border-radius: var(--k-rayon-petit); white-space: pre-line; overflow-wrap: anywhere; }
.k-postit > .bi { flex: none; color: var(--k-attenue); }
/* Grille des creneaux (boutons crees par appointment.js, qui garde ses classes orl-creneau*). */
.k-creneaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--k-space-16) * 2), 1fr)); gap: var(--k-space-2); }
.k-creneaux .orl-creneau { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-block-size: var(--k-cible); padding: var(--k-space-2) var(--k-space-3); background: var(--k-surface); color: var(--k-encre); border: var(--k-trait) solid var(--k-filet-champ); border-radius: var(--k-rayon-petit); cursor: pointer; font: inherit; text-align: start; }
.k-creneaux .orl-creneau-heure { font-weight: var(--k-fw-medium); font-size: var(--k-fs-lg); font-variant-numeric: var(--k-chiffres); color: inherit; }
.k-creneaux .orl-creneau-fin { font-size: var(--k-fs-sm); color: var(--k-attenue); font-variant-numeric: var(--k-chiffres); }
.k-creneaux .orl-creneau:hover:not(:disabled, .is-choisi) { background: var(--k-voile-neutre); border-color: var(--k-encre-2); }
/* Le survol epargne le creneau choisi : sa regle (plus precise avec :hover:not()) mettait le fond beige sous le texte blanc. */
.k-creneaux .orl-creneau:focus-visible { outline: var(--k-trait-fort) solid var(--k-action); outline-offset: var(--k-trait-fort); }
/* Choisi : fond d'action plein (lisible sans la couleur : texte inverse). Pris : pointille et barre. */
.k-creneaux .orl-creneau.is-choisi { background: var(--k-action); border-color: var(--k-action); color: var(--k-sur-aplat); }
.k-creneaux .orl-creneau.is-choisi :is(.orl-creneau-heure, .orl-creneau-fin) { color: var(--k-sur-aplat); }
.k-creneaux .orl-creneau.is-pris { background: var(--k-voile-neutre); border-style: dashed; color: var(--k-attenue); cursor: not-allowed; }
.k-creneaux .orl-creneau.is-pris .orl-creneau-heure { color: var(--k-attenue); text-decoration: line-through; }
.k-creneaux__message { margin: 0 0 var(--k-space-2); color: var(--k-attenue); font-size: var(--k-fs-md); }
.k-creneaux__message:empty { display: none; }
/* Creneaux libres de la semaine (maquette A) : une colonne par jour, libres et pris dans l'ordre de la journee. */
.k-semaine__filtres { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--k-space-3); padding: var(--k-space-3) var(--k-space-4); margin-block-end: var(--k-space-4); background: var(--k-surface); border: var(--k-trait) solid var(--k-filet); border-radius: var(--k-rayon); }
.k-segment { display: inline-flex; flex-wrap: wrap; border: var(--k-trait) solid var(--k-filet-champ); border-radius: var(--k-rayon-petit); overflow: hidden; }
.k-segment button { display: inline-flex; align-items: center; gap: var(--k-space-2); min-block-size: calc(var(--k-champ-hauteur) - 2 * var(--k-trait)); padding: 0 var(--k-space-4); border: 0; background: var(--k-surface); color: var(--k-encre); font: inherit; font-size: var(--k-fs-md); font-weight: var(--k-fw-medium); cursor: pointer; }
.k-segment button + button { border-inline-start: var(--k-trait) solid var(--k-filet-champ); }
.k-segment button[aria-pressed="true"] { background: var(--k-action); color: var(--k-sur-aplat); }
.k-segment__compte { font-size: var(--k-fs-xs); padding: 0 var(--k-space-2); border-radius: var(--k-rayon-gelule); background: var(--k-voile-neutre); color: var(--k-attenue); }
.k-segment button[aria-pressed="true"] .k-segment__compte { background: var(--k-action-fonce); color: var(--k-sur-aplat); }
.k-semaine__duree { display: flex; align-items: center; gap: var(--k-space-2); margin: 0; font-size: var(--k-fs-md); font-weight: var(--k-fw-medium); color: var(--k-encre); }
.k-semaine__duree .k-select { inline-size: auto; }
.k-semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--k-space-3); }
@media (max-width: 1100px) { .k-semaine { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); } }
.k-semaine__titre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-space-2); margin: 0; font-family: var(--k-font-titre); font-size: var(--k-fs-base); font-weight: var(--k-fw-semibold); }
.k-semaine__auj { font-size: var(--k-fs-xs); font-weight: var(--k-fw-medium); padding: 0 var(--k-space-2); border-radius: var(--k-rayon-gelule); background: var(--k-action-voile); color: var(--k-action-fonce); }
.k-semaine__charge { margin: var(--k-space-1) 0; font-size: var(--k-fs-xs); color: var(--k-attenue); }
.k-semaine__jauge { block-size: var(--k-space-1); margin-block-end: var(--k-space-3); border-radius: var(--k-rayon-gelule); background: var(--k-voile-neutre); overflow: hidden; }
.k-semaine__jauge span { display: block; block-size: 100%; background: var(--k-action); }
.k-semaine .k-creneaux { grid-template-columns: 1fr; gap: var(--k-space-2); }
/* Heure et fin sur une ligne, la pastille dessous, a la largeur de son texte. */
.k-semaine button.orl-creneau { display: grid; grid-template-columns: auto 1fr; align-items: baseline; justify-items: start; column-gap: var(--k-space-2); }
.k-semaine__libre { grid-column: 1 / -1; margin-block-start: var(--k-space-1); padding: 0 var(--k-space-2); border-radius: var(--k-rayon-gelule); background: var(--k-succes-voile); color: var(--k-succes-encre); font-size: var(--k-fs-xs); font-weight: var(--k-fw-medium); }
.k-semaine .orl-creneau.is-choisi .k-semaine__libre { background: var(--k-action-fonce); color: var(--k-sur-aplat); }
.k-semaine .orl-creneau.is-pris { min-block-size: 0; padding-block: var(--k-space-1); font-size: var(--k-fs-sm); }
.k-semaine .orl-creneau.is-pris .orl-creneau-heure { font-size: var(--k-fs-sm); font-weight: var(--k-fw-regular); }
/* Trop court pour le soin : atténué par les jetons, pas par l'opacité, qui tombait sous l'AA sur un bouton toujours actif. */
.k-semaine .orl-creneau.is-trop-court:not(.is-choisi) { color: var(--k-attenue); border-color: var(--k-filet); }
.k-semaine .orl-creneau.is-trop-court:not(.is-choisi) .k-semaine__libre { background: var(--k-voile-neutre); color: var(--k-attenue); }
.k-semaine__pause { margin: 0; padding-block-start: var(--k-space-1); border-block-start: var(--k-trait) dotted var(--k-filet-champ); text-align: center; font-size: var(--k-fs-xs); color: var(--k-attenue); }
/* Jour ferme : hachures neutres, pas de teinte d'alerte (charte 03 §1.1). */
.k-semaine__ferme { min-block-size: calc(var(--k-space-16) * 3); margin: 0; padding: var(--k-space-2) var(--k-space-3); border: var(--k-trait) solid var(--k-filet); border-radius: var(--k-rayon-petit); color: var(--k-attenue); font-size: var(--k-fs-sm); background: repeating-linear-gradient(135deg, var(--k-voile-neutre) 0 var(--k-space-2), var(--k-surface) var(--k-space-2) var(--k-space-4)); }
.k-semaine.is-libres .orl-creneau.is-pris, .k-semaine.is-pris .orl-creneau:not(.is-pris), .k-semaine:is(.is-libres, .is-pris) .k-semaine__pause { display: none; }
.k-semaine__actions { position: sticky; inset-block-end: var(--k-space-4); margin-block-start: var(--k-space-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-space-3); padding: var(--k-space-3) var(--k-space-4); background: var(--k-surface); border: var(--k-trait) solid var(--k-filet); border-radius: var(--k-rayon); box-shadow: var(--k-ombre-flottant); }
.k-semaine__actions[hidden] { display: none; }
.k-semaine__actions p { flex: 1; min-inline-size: 14rem; margin: 0; }
/* Occupation du jour (duree libre) : creux cliquables, plages prises (elements crees par appointment.js). */
.k-occupation { padding: var(--k-space-3); border: var(--k-trait) solid var(--k-filet); border-radius: var(--k-rayon-petit); background: var(--k-surface); }
.k-occupation[hidden] { display: none; }
.k-occupation .orl-occupation-titre { display: block; margin-block-end: var(--k-space-2); font-size: var(--k-fs-sm); color: var(--k-attenue); }
.k-occupation .orl-occupation-liste { display: flex; flex-wrap: wrap; gap: var(--k-space-2); list-style: none; margin: 0; padding: 0; }
.k-occupation .orl-occupation-plage { padding: var(--k-space-1) var(--k-space-2); border-radius: var(--k-rayon-gelule); background: var(--k-voile-neutre); font-variant-numeric: var(--k-chiffres); }
.k-occupation .orl-occupation-libre { display: inline-flex; align-items: baseline; gap: var(--k-space-2); min-block-size: var(--k-cible); padding: var(--k-space-1) var(--k-space-3); background: var(--k-surface); color: var(--k-encre); border: var(--k-trait) solid var(--k-filet-champ); border-radius: var(--k-rayon-gelule); cursor: pointer; font: inherit; font-variant-numeric: var(--k-chiffres); }
.k-occupation .orl-occupation-libre:is(:hover, :focus-visible) { background: var(--k-action-voile); border-color: var(--k-action); color: var(--k-action-fonce); }
.k-occupation .orl-occupation-duree { font-size: var(--k-fs-sm); color: var(--k-attenue); }
.k-occupation .orl-occupation-vide { color: var(--k-attenue); }
.k-occupation__pris { margin-block-start: var(--k-space-3); }
.k-occupation__pris > summary { cursor: pointer; color: var(--k-attenue); font-size: var(--k-fs-sm); margin-block-end: var(--k-space-2); }
/* Pages de statut et de lecture longue (confidentialite, nouveautes). */
.k-texte { max-inline-size: calc(var(--k-largeur-saisie) * 2); }
.k-texte h2 { margin-block: var(--k-space-6) var(--k-space-2); font-family: var(--k-font-titre); font-weight: var(--k-fw-semibold); font-size: var(--k-fs-lg); }
.k-sommaire { display: flex; flex-direction: column; gap: var(--k-space-2); }
.k-sommaire details > summary { cursor: pointer; padding-block: var(--k-space-1); font-weight: var(--k-fw-medium); }
.k-sommaire ul { list-style: none; margin: 0; padding: 0; }
.k-sommaire a { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--k-space-2); min-block-size: var(--k-cible); padding: var(--k-space-1) var(--k-space-3); color: var(--k-encre); text-decoration: none; border-radius: var(--k-rayon-petit); }
.k-sommaire a:is(:hover, .is-survol) { background: var(--k-voile-neutre); }
.k-sommaire a[aria-current="page"] { background: var(--k-action-voile); color: var(--k-action-fonce); font-weight: var(--k-fw-medium); }

/* Saisie de consultation : champs en deux colonnes alignés en haut (les aides n ont pas la même hauteur) ; .is-large pleine largeur. */
.k-champs-ligne.is-haut { align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--k-largeur-bloc-m)), 1fr)); }
.k-champs-ligne > .is-large { grid-column: 1 / -1; }

/* Alerte posee dans une carte : respiration au-dessus. */
.k-carte .k-alerte { margin-block-start: var(--k-space-4); }

/* ---------- Phase 4 : paramètres (cartes de choix, logo, compte de droits) ---------- */
/* Choix d'un mode en cartes cliquables (mode de rendez-vous) : filet neutre, choisi = contour d'action, sans liseré ni aplat. */
.k-mode-agenda { display: grid; gap: var(--k-space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--k-largeur-bloc-m)), 1fr)); }
.k-mode-carte { display: grid; gap: var(--k-space-1); padding: var(--k-space-4); background: var(--k-surface); border: var(--k-trait) solid var(--k-filet); border-radius: var(--k-rayon); cursor: pointer; transition: border-color var(--k-duree-rapide) var(--k-courbe); }
.k-mode-carte:hover { border-color: var(--k-encre-2); }
.k-mode-carte:has(input:checked) { border-color: var(--k-action); box-shadow: inset 0 0 0 var(--k-trait) var(--k-action); }
.k-mode-carte:has(input:focus-visible) { outline: var(--k-trait-fort) solid var(--k-action); outline-offset: var(--k-focus-decalage); }
.k-mode-carte__titre { font-weight: var(--k-fw-medium); color: var(--k-encre); }
.k-mode-carte__detail { color: var(--k-attenue); font-size: var(--k-fs-sm); }
/* Actions d'une ligne de tableau ou d'un bloc : alignées à droite. */
.k-actions-droite { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--k-space-2); }

/* Rapprochement des medicaments : propositions de la nomenclature (boutons crees par le script de l'ecran, qui garde .proposition/.mention/.retire). */
.k-propositions { display: flex; flex-direction: column; gap: var(--k-space-1); }
.k-propositions .proposition { display: block; inline-size: 100%; text-align: start; padding: var(--k-space-2) var(--k-space-3); background: var(--k-surface); color: var(--k-encre); border: var(--k-trait) solid var(--k-filet-champ); border-radius: var(--k-rayon-petit); font: inherit; cursor: pointer; }
.k-propositions .proposition:is(:hover, :focus-visible) { background: var(--k-action-voile); border-color: var(--k-action); }
.k-propositions .mention { font-size: var(--k-fs-sm); color: var(--k-attenue); }
.k-propositions .retire { color: var(--k-danger-encre); font-weight: var(--k-fw-medium); }

/* ---------- Phase 4 : comptes (connexion et « Mon compte ») ---------- */
/* Un champ posé directement dans un formulaire : l'écart vient du gap du formulaire, pas de la marge du champ. */
.k-formulaire > .k-champ { margin-block-end: 0; }
/* « Mon compte » : menu des rubriques à gauche, contenu à droite ; empilé sur écran étroit. */
.k-compte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--k-space-6); align-items: start; }
@media (max-width: 48rem) { .k-compte { grid-template-columns: minmax(0, 1fr); } }
/* Menu à largeur fixe (il ne grandit pas avec l'écran) ; fiches à deux colonnes dès ~58rem de contenu plutôt que trois pistes dont une vide ; libellés de la liste de définitions sur une ligne, la valeur ne se coupe qu'en dernier recours. */
@media (min-width: 48.01rem) { .k-compte { grid-template-columns: 14rem minmax(0, 1fr); } }
.k-compte .k-fiches { grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); }
.k-compte .k-liste-def { grid-template-columns: max-content minmax(0, 1fr); }
@media (max-width: 40rem) { .k-compte .k-liste-def { grid-template-columns: 1fr; } }
/* Champ de mot de passe avec son bouton d'affichage (.orl-mdp-bouton, piloté par connexion.js) : place pour le bouton. */
.orl-mdp .k-input { padding-inline-end: var(--k-space-10); }
/* Clé de l'application d'authentification : recopiée groupe par groupe, chiffres tabulaires, sélection en un clic. */
.k-cle { display: inline-block; padding: var(--k-space-1) var(--k-space-3); border: var(--k-trait) solid var(--k-filet); border-radius: var(--k-rayon-petit); background: var(--k-voile-neutre); color: var(--k-encre); font-size: var(--k-fs-lg); font-variant-numeric: var(--k-chiffres); user-select: all; }
/* Codes de secours : une grille de codes, sans calcul d'index. */
.k-codes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--k-largeur-bloc-s)), 1fr)); gap: var(--k-space-2); }
.k-codes code { display: block; padding: var(--k-space-2) var(--k-space-3); border: var(--k-trait) solid var(--k-filet); border-radius: var(--k-rayon-petit); background: var(--k-voile-neutre); color: var(--k-encre); font-variant-numeric: var(--k-chiffres); user-select: all; }
@media print { .k-codes code { background: transparent; } }

/* « Mon compte » : l'alerte de statut respire au-dessus du contenu ; liens du menu sans soulignement par défaut déjà posés par .k-sommaire. */
.k-compte .k-alerte { margin-block-end: var(--k-space-4); }
/* Aide de fiche suivie d'un formulaire : l'écart vient d'ici. */
.k-fiche__aide + .k-formulaire, .k-fiche__aide + .k-actions-form, .k-alerte + .k-fiche__aide, .k-fiche .k-alerte + * { margin-block-start: var(--k-space-4); }
.k-tableau-cadre + .k-actions-form { margin-block-start: var(--k-space-4); }
.k-fiche__aide + form { margin-block-start: var(--k-space-4); }

/* ---------- Phase 4 : paramètres › utilisateurs (liste + panneau), compte de droits ---------- */
/* Le script des droits (droits-accordeon.js) bascule is-info / is-neutral sur les pastilles de compte : mêmes teintes que is-prevu / is-neutre. */
.k-pastille.is-info { background: var(--k-action-voile); color: var(--k-action); }
.k-pastille.is-neutral { background: var(--k-voile-neutre); color: var(--k-attenue); }
/* Liste des comptes à gauche, panneau du compte choisi à droite ; empilés sous 64 rem. */
.k-comptes-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--k-space-3); margin-block-end: var(--k-space-4); }
.k-comptes-entete > p { margin: 0; }
.k-comptes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--k-space-4); align-items: start; }
@media (min-width: 64rem) { .k-comptes { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .k-compte-panneau { position: sticky; inset-block-start: var(--k-space-4); } }
.k-comptes-liste { display: flex; flex-direction: column; gap: var(--k-space-1); padding: var(--k-space-2); background: var(--k-surface); border: var(--k-trait) solid var(--k-filet); border-radius: var(--k-rayon); }
.k-compte-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-space-3); min-block-size: var(--k-cible); padding: var(--k-space-2) var(--k-space-3); border: var(--k-trait) solid transparent; border-radius: var(--k-rayon-petit); color: var(--k-encre); text-decoration: none; }
.k-compte-ligne:is(:hover, .is-survol) { background: var(--k-voile-neutre); color: var(--k-encre); }
.k-compte-ligne:focus-visible { outline: var(--k-trait-fort) solid var(--k-action); outline-offset: var(--k-focus-decalage); }
.k-compte-ligne.is-actif { background: var(--k-action-voile); border-color: var(--k-action); }
.k-compte-ligne__ident { flex: 1 1 var(--k-largeur-bloc-s); min-inline-size: 0; display: flex; flex-direction: column; }
.k-compte-ligne__ident > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-compte-ligne__roles { display: flex; flex-wrap: wrap; gap: var(--k-space-1); }
.k-compte-panneau { padding: var(--k-space-4) var(--k-space-6) var(--k-space-6); background: var(--k-surface); border: var(--k-trait) solid var(--k-filet); border-radius: var(--k-rayon); scroll-margin-block-start: var(--k-space-4); }
.k-compte-panneau__titre { margin: 0; font-family: var(--k-font-titre); font-weight: var(--k-fw-semibold); font-size: var(--k-fs-lg); color: var(--k-encre); overflow-wrap: anywhere; }
.k-compte-section { margin-block-start: var(--k-space-4); padding-block-start: var(--k-space-4); border-block-start: var(--k-trait) solid var(--k-filet); }
.k-compte-section__titre { margin: 0 0 var(--k-space-2); font-size: var(--k-fs-md); font-weight: var(--k-fw-medium); color: var(--k-attenue); }
.k-compte-section .k-champ { margin-block-end: var(--k-space-2); }
.k-compte-role { display: flex; flex-direction: column; margin-block-end: var(--k-space-2); }
.k-compte-role .k-champ__aide { margin-inline-start: calc(var(--k-space-4) + var(--k-space-1) + var(--k-space-2)); }

/* Largeurs de colonnes de tableau (en-têtes th) : jetons --k-largeur-col-*. */
.k-col-xs { inline-size: var(--k-largeur-col-xs); }
.k-col-s { inline-size: var(--k-largeur-col-s); }
.k-col-m { inline-size: var(--k-largeur-col-m); }
.k-col-l { inline-size: var(--k-largeur-col-l); }
.k-col-min-xl { min-inline-size: var(--k-largeur-col-xl); }

/* Pictogrammes Kalma de la navigation (charte 04 §3.4) : fichiers de images/kalma/pictos/, copiés de
   KALMA Branding/assets/pictogrammes/app/. Posés en masque : couleur du texte, taille de la police. */
.k-picto { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -.125em; background: currentColor;
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.k-picto--abonnement { -webkit-mask-image: url("../images/kalma/pictos/abonnement.svg"); mask-image: url("../images/kalma/pictos/abonnement.svg"); }
.k-picto--accueil { -webkit-mask-image: url("../images/kalma/pictos/accueil.svg"); mask-image: url("../images/kalma/pictos/accueil.svg"); }
.k-picto--agenda { -webkit-mask-image: url("../images/kalma/pictos/agenda.svg"); mask-image: url("../images/kalma/pictos/agenda.svg"); }
.k-picto--aide { -webkit-mask-image: url("../images/kalma/pictos/aide.svg"); mask-image: url("../images/kalma/pictos/aide.svg"); }
.k-picto--caisse { -webkit-mask-image: url("../images/kalma/pictos/caisse.svg"); mask-image: url("../images/kalma/pictos/caisse.svg"); }
.k-picto--dentaire { -webkit-mask-image: url("../images/kalma/pictos/dentaire.svg"); mask-image: url("../images/kalma/pictos/dentaire.svg"); }
.k-picto--dent-incisive { -webkit-mask-image: url("../images/kalma/pictos/dent-incisive.svg"); mask-image: url("../images/kalma/pictos/dent-incisive.svg"); }
.k-picto--dent-canine { -webkit-mask-image: url("../images/kalma/pictos/dent-canine.svg"); mask-image: url("../images/kalma/pictos/dent-canine.svg"); }
.k-picto--dent-premolaire { -webkit-mask-image: url("../images/kalma/pictos/dent-premolaire.svg"); mask-image: url("../images/kalma/pictos/dent-premolaire.svg"); }
.k-picto--dent-molaire { -webkit-mask-image: url("../images/kalma/pictos/dent-molaire.svg"); mask-image: url("../images/kalma/pictos/dent-molaire.svg"); }
.k-picto--confidentialite { -webkit-mask-image: url("../images/kalma/pictos/confidentialite.svg"); mask-image: url("../images/kalma/pictos/confidentialite.svg"); }
.k-picto--consultations { -webkit-mask-image: url("../images/kalma/pictos/consultations.svg"); mask-image: url("../images/kalma/pictos/consultations.svg"); }
.k-picto--medicaments { -webkit-mask-image: url("../images/kalma/pictos/medicaments.svg"); mask-image: url("../images/kalma/pictos/medicaments.svg"); }
.k-picto--mon-compte { -webkit-mask-image: url("../images/kalma/pictos/mon-compte.svg"); mask-image: url("../images/kalma/pictos/mon-compte.svg"); }
.k-picto--nouveautes { -webkit-mask-image: url("../images/kalma/pictos/nouveautes.svg"); mask-image: url("../images/kalma/pictos/nouveautes.svg"); }
.k-picto--parametres { -webkit-mask-image: url("../images/kalma/pictos/parametres.svg"); mask-image: url("../images/kalma/pictos/parametres.svg"); }
.k-picto--patients { -webkit-mask-image: url("../images/kalma/pictos/patients.svg"); mask-image: url("../images/kalma/pictos/patients.svg"); }
.k-picto--raccourcis { -webkit-mask-image: url("../images/kalma/pictos/raccourcis.svg"); mask-image: url("../images/kalma/pictos/raccourcis.svg"); }
.k-picto--sans-rendez-vous { -webkit-mask-image: url("../images/kalma/pictos/sans-rendez-vous.svg"); mask-image: url("../images/kalma/pictos/sans-rendez-vous.svg"); }
.k-picto--se-connecter { -webkit-mask-image: url("../images/kalma/pictos/se-connecter.svg"); mask-image: url("../images/kalma/pictos/se-connecter.svg"); }
.k-picto--se-deconnecter { -webkit-mask-image: url("../images/kalma/pictos/se-deconnecter.svg"); mask-image: url("../images/kalma/pictos/se-deconnecter.svg"); }
.k-picto--statistiques { -webkit-mask-image: url("../images/kalma/pictos/statistiques.svg"); mask-image: url("../images/kalma/pictos/statistiques.svg"); }
.k-picto--stock { -webkit-mask-image: url("../images/kalma/pictos/stock.svg"); mask-image: url("../images/kalma/pictos/stock.svg"); }
.k-picto--utilisateurs { -webkit-mask-image: url("../images/kalma/pictos/utilisateurs.svg"); mask-image: url("../images/kalma/pictos/utilisateurs.svg"); }
.k-picto--audiogramme { -webkit-mask-image: url("../images/kalma/pictos/audiogramme.svg"); mask-image: url("../images/kalma/pictos/audiogramme.svg"); }
.k-picto--rappels { -webkit-mask-image: url("../images/kalma/pictos/rappels.svg"); mask-image: url("../images/kalma/pictos/rappels.svg"); }
.k-picto--sauvegarde { -webkit-mask-image: url("../images/kalma/pictos/sauvegarde.svg"); mask-image: url("../images/kalma/pictos/sauvegarde.svg"); }

/* ---------- Schema dentaire (Views/Dentaire/_Schema) ----------
   Deux arcades face a face, vue de face. Chaque dent est une case blanche a filet neutre : la forme et l'icone
   portent la teinte de l'etat, prise dans la table des pastilles (03 §1.1). Numero au bord exterieur, couronne
   tournee vers le plan d'occlusion. Le schema est anatomique : il ne se met pas en miroir en arabe (01 §4.3). */
.k-dentaire { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--k-space-4); margin-block-end: var(--k-space-6); }
/* Trop large pour un telephone : le schema garde ses 16 dents et defile a l'horizontale, sans se replier. */
.k-dentaire__defile { overflow-x: auto; overscroll-behavior-x: contain; padding-block-end: var(--k-space-1); }
.k-dentaire__defile:focus-visible { outline: var(--k-trait-fort) solid var(--k-action); outline-offset: var(--k-focus-decalage); }
.k-dentaire__schema {
  --dentaire-n: 16; --dentaire-case: var(--k-space-10); --dentaire-gouttiere: var(--k-space-1);
  direction: ltr; position: relative; display: grid;
  min-inline-size: calc(var(--dentaire-n) * var(--dentaire-case) + (var(--dentaire-n) - 1) * var(--dentaire-gouttiere));
}
.k-dentaire__schema.is-lait { --dentaire-n: 10; }
/* Ligne mediane : au milieu exact de la grille, puisque colonnes et gouttieres sont egales. */
.k-dentaire__schema::before {
  content: ""; position: absolute; inset-block: var(--k-space-6); inset-inline-start: 50%;
  inline-size: var(--k-trait-fort); transform: translateX(-50%); background: var(--k-filet-champ);
}
.k-dentaire__arcade {
  display: grid; grid-template-columns: repeat(var(--dentaire-n), minmax(0, 1fr)); gap: var(--dentaire-gouttiere);
  margin: 0; padding: 0; list-style: none;
}
.k-dentaire__arcade > li { display: grid; }
/* Plan d'occlusion : le filet qui separe les deux arcades. */
.k-dentaire__arcade.is-haut { padding-block-end: var(--k-space-2); border-block-end: var(--k-trait) solid var(--k-filet-champ); }
.k-dentaire__arcade:not(.is-haut) { padding-block-start: var(--k-space-2); }

.k-pastille.k-dent {
  flex-direction: column; justify-content: flex-start; gap: var(--k-space-1);
  inline-size: 100%; min-block-size: var(--k-cible); padding: var(--k-space-1) 0;
  background: var(--k-surface); border-color: var(--k-filet); border-radius: var(--k-rayon-petit);
  text-decoration: none;
  transition: background-color var(--k-duree-rapide) var(--k-courbe), border-color var(--k-duree-rapide) var(--k-courbe);
}
.k-pastille.k-dent.is-clos { border-color: var(--k-filet-champ); }
/* Numero (et icone d'etat) au bord exterieur : en tete au maxillaire, en pied a la mandibule. */
.k-dent__etiquette { display: inline-flex; align-items: center; gap: var(--k-space-1); min-block-size: var(--k-space-4); }
.k-dent__num { color: var(--k-encre); font-variant-numeric: var(--k-chiffres); }
.k-dent__etiquette > .bi { font-size: var(--k-fs-xs); line-height: 1; }
.k-dentaire__arcade:not(.is-haut) .k-dent__etiquette { order: 1; }
/* La forme de la dent (Dents.Forme) : dessinee couronne en haut, retournee au maxillaire. */
.k-dent__forme { font-size: var(--k-space-10); }
.is-lait .k-dent__forme { font-size: var(--k-space-8); }
.k-dent__forme.is-haut { transform: scaleY(-1); }
/* Dent sans etat : forme discrete, pour que les dents notees ressortent ; dent absente : en filigrane. */
.k-dent.is-neutre .k-dent__forme { color: var(--k-filet-champ); }
.k-dent.is-clos .k-dent__forme { color: var(--k-filet); }
a.k-dent:is(:hover, .is-survol) { background: var(--k-filet-leger); border-color: currentColor; }
a.k-dent:focus-visible { outline: var(--k-trait-fort) solid var(--k-action); outline-offset: var(--k-focus-decalage); }
.k-dentaire__lait > summary { display: inline-flex; align-items: center; min-block-size: var(--k-cible); margin-block-end: var(--k-space-2); cursor: pointer; color: var(--k-lien); }
.k-dentaire__legende { display: flex; flex-wrap: wrap; gap: var(--k-space-2); margin: 0; padding: 0; list-style: none; }
/* Contraste force : le fond des masques serait remplace par Canvas, les pictogrammes disparaitraient. */
@media (forced-colors: active) {
  .k-picto { forced-color-adjust: none; background: CanvasText; }
  .k-dentaire__schema::before { background: CanvasText; }
}