/*
 * Medicina CME — styles front-end ("Mon parcours" + shortcode [medicina_cme_parcours]).
 *
 * Variables BuddyBoss en priorité, repli local en second (§1.3) :
 * toujours var(--bb-rl-<nom>, var(--cme-<nom-local>)), jamais une couleur
 * en dur, jamais une seule variable sans repli — pour tout ce qui est
 * PASSIF (texte, fonds, bordures : doit suivre le thème/mode sombre actif).
 *
 * v1.5.0 — correctif de cohérence (retour de test) : les boutons de cette
 * page (ex. "+ Ajouter") utilisaient jusqu'ici les classes génériques
 * .button/.button-primary de WordPress/BuddyBoss, qui prennent la couleur
 * d'accent du THÈME actif (bleu chez BuddyBoss par défaut) — d'où un
 * rendu différent des pages de gestion CME (Domaines/Activités/Types),
 * qui utilisent notre propre teinte "accent" ci-dessous. Pour les boutons
 * spécifiquement, on n'hérite plus du thème : --cme-btn-accent est fixe,
 * identique à --ledger-accent de medcme-admin-ui.css, pour un rendu 100%
 * cohérent dans tout le plugin, quel que soit le thème actif.
 *
 * v1.6.0 — retour de test : même après le correctif ci-dessus, une fine
 * bordure "bleutée" restait visible en permanence (pas seulement au
 * survol) autour des boutons contour et des icônes crayon/corbeille.
 * Cause : `-webkit-appearance`/`appearance` du bouton natif du navigateur
 * n'était jamais neutralisé — `border: 1px solid transparent` ne suffit
 * pas à faire disparaître le rendu natif d'un `<button>` dans Chrome/Safari,
 * il faut explicitement `appearance: none`. Ajouté ci-dessous. Couleur de
 * bordure/texte des boutons contour changée pour un gris-marine neutre
 * (#1e2432, --cme-btn-border) à la demande du client, qui ne voulait plus
 * aucune teinte bleutée même discrète — seul le bouton PRINCIPAL (rempli,
 * "Envoyer et recevoir le crédit"/"Enregistrer") garde l'accent teal.
 */

:root {
	--cme-text: #1e2432;
	--cme-muted: #6b7280;
	--cme-border: #e5e7eb;
	--cme-surface: #f8f9fb;
	--cme-accent: #0d1f42;
	--cme-btn-accent: #1d7874;
	--cme-btn-accent-hover: #14524f;
	--cme-btn-accent-soft: #e6f2f1;
	--cme-btn-border: #1e2432;
	--cme-btn-border-soft: #eceef1;
	--cme-danger: #a33d3d;
	--cme-danger-hover: #832f2f;
}

.bb-rl-dark-mode {
	--cme-text: #f1f1f1;
	--cme-muted: #a8adb8;
	--cme-border: #3a3f4b;
	--cme-surface: #20242e;
	--cme-accent: #7ea0e0;
}

/* --- Boutons du plugin : jamais .button/.button-primary (thème), ------
   --- toujours ces classes, pour un rendu et un survol identiques -----
   --- partout dans le plugin (voir note ci-dessus).                 --- */

.medcme-parcours button,
.medcme-parcours input,
.medcme-parcours select,
.medcme-parcours textarea {
	box-sizing: border-box;
	font-family: inherit;
}

.medcme-parcours button {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.medcme-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff !important;
	color: var(--cme-btn-border) !important;
	border: 1px solid var(--cme-btn-border) !important;
	border-radius: 8px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.medcme-btn:hover,
.medcme-btn:focus-visible {
	background: var(--cme-btn-border) !important;
	border-color: var(--cme-btn-border) !important;
	color: #fff !important;
}

.medcme-btn-primary {
	background: var(--cme-btn-accent) !important;
	color: #fff !important;
	border-color: var(--cme-btn-accent) !important;
}

.medcme-btn-primary:hover,
.medcme-btn-primary:focus-visible {
	background: var(--cme-btn-accent-hover) !important;
	border-color: var(--cme-btn-accent-hover) !important;
	color: #fff !important;
}

.medcme-btn-danger {
	background: #fff !important;
	color: var(--cme-danger) !important;
	border-color: var(--cme-danger) !important;
}

.medcme-btn-danger:hover,
.medcme-btn-danger:focus-visible {
	background: var(--cme-danger) !important;
	border-color: var(--cme-danger) !important;
	color: #fff !important;
}

.medcme-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.medcme-icon-btn {
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none !important;
	border: 1px solid var(--cme-border) !important;
	border-radius: 8px;
	color: var(--cme-muted) !important;
	cursor: pointer;
	padding: 0;
}

.medcme-icon-btn .dashicons {
	width: 15px;
	height: 15px;
	font-size: 15px;
	/* Bug corrigé (retour de test) : une icône dashicons n'est pas
	   verticalement centrée dans sa propre boîte par défaut (quirk
	   classique des polices d'icônes) — le flex du bouton parent ne
	   suffit pas à lui seul, il faut aussi centrer le glyphe DANS sa
	   propre boîte. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.medcme-icon-btn:hover,
.medcme-icon-btn:focus-visible {
	background: var(--cme-btn-border-soft) !important;
	border-color: var(--cme-btn-border) !important;
	color: var(--cme-btn-border) !important;
}

.medcme-icon-btn.medcme-doc-delete:hover,
.medcme-icon-btn.medcme-doc-delete:focus-visible {
	background: #f7e9e9 !important;
	border-color: var(--cme-danger) !important;
	color: var(--cme-danger) !important;
}

.medcme-parcours {
	color: var(--bb-rl-text-color, var(--cme-text));
}

/*
 * Bug corrigé (retour de test) : ces chiffres reprenaient la couleur de
 * texte du thème actif (souvent un gris neutre) sur un fond déjà gris
 * clair — d'où un rendu "gris sur gris" sans relief. Couleur d'accent du
 * plugin fixée explicitement (jamais dépendante du thème pour CE
 * chiffre précis), fond blanc net + ombre légère comme le reste des
 * cartes de cette page, et une petite pastille de couleur par carte pour
 * un repère visuel immédiat.
 */
.medcme-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0 0 24px;
}

.medcme-summary-item {
	flex: 1 1 140px;
	padding: 18px 16px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid var(--bb-rl-border-color, var(--cme-border));
	box-shadow: 0 1px 2px rgba(15, 23, 41, 0.04);
	text-align: center;
	border-top: 3px solid var(--cme-btn-accent);
}

.medcme-summary-item:nth-child(2) {
	border-top-color: #a8672c;
}

.medcme-summary-item:nth-child(3) {
	border-top-color: #7e57c2;
}

.medcme-summary-value {
	display: block;
	font-size: 28px;
	font-weight: 700;
	color: var(--cme-btn-accent) !important;
}

.medcme-summary-item:nth-child(2) .medcme-summary-value {
	color: #a8672c !important;
}

.medcme-summary-item:nth-child(3) .medcme-summary-value {
	color: #7e57c2 !important;
}

.medcme-summary-label {
	display: block;
	font-size: 13px;
	color: var(--bb-rl-text-secondary-color, var(--cme-muted));
	margin-top: 4px;
}

/*
 * v1.8.0 — retour de test : remplace la simple liste de puces par de
 * vraies médailles (SVG, voir Medcme_Distinctions::render_medal_svg()),
 * avec un effet d'apparition à chaque consultation de "Mon parcours"
 * (.medcme-just-revealed, déjà utilisé ailleurs sur cette page — voir
 * l'animation medcme-reveal plus bas dans ce fichier) et un lien vers un
 * certificat imprimable.
 */
.medcme-medals-list {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.medcme-medal-card {
	flex: 0 0 auto;
	width: 140px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 16px 12px;
	background: #fff;
	border: 1px solid var(--bb-rl-border-color, var(--cme-border));
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15, 23, 41, 0.04);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.medcme-medal-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(15, 23, 41, 0.1);
}

.medcme-medal-svg {
	filter: drop-shadow(0 2px 3px rgba(15, 23, 41, 0.15));
}

.medcme-medal-label {
	font-size: 13px;
	font-weight: 700;
	color: var(--cme-text);
	margin-top: 8px;
	line-height: 1.3;
}

.medcme-medal-date {
	font-size: 11px;
	color: var(--cme-muted);
	margin-top: 2px;
}

.medcme-medal-cert-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 10px;
	font-size: 12px;
	font-weight: 600;
	color: var(--cme-btn-accent);
	text-decoration: none;
}

.medcme-medal-cert-link:hover {
	text-decoration: underline;
}

.medcme-medal-cert-link .dashicons {
	font-size: 12px;
	width: 12px;
	height: 12px;
}

.medcme-breakdown-list {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.medcme-breakdown-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 16px;
	font-size: 13px;
	background: #fff;
	border: 1px solid var(--bb-rl-border-color, var(--cme-border));
	border-left: 3px solid var(--cme-btn-accent);
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(15, 23, 41, 0.04);
}

.medcme-breakdown-value {
	font-weight: 700;
	color: var(--cme-btn-accent);
	font-variant-numeric: tabular-nums;
}

/* --- "Détail des formations" — cartes, plus la table brute ---------- */

.medcme-formations-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.medcme-formation-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	/* Même traitement que .medcme-doc-item (retour de test) : blanc net +
	   ombre légère plutôt qu'un fond gris terne sans relief. */
	background: #fff;
	border: 1px solid var(--bb-rl-border-color, var(--cme-border));
	border-radius: 12px;
	padding: 14px 16px;
	box-shadow: 0 1px 2px rgba(15, 23, 41, 0.04);
}

.medcme-formation-main {
	flex: 1 1 240px;
	min-width: 200px;
}

.medcme-formation-title {
	font-weight: 600;
	display: block;
}

.medcme-formation-date {
	display: block;
	font-size: 12px;
	color: var(--bb-rl-text-secondary-color, var(--cme-muted));
	margin-top: 2px;
}

/*
 * Bug corrigé (retour de test) : domaines et note s'affichaient à la
 * suite l'un de l'autre sur la même ligne, sans aucune séparation
 * visuelle (ni saut de ligne, ni style différent) — impossible de
 * distinguer où s'arrêtait la liste des domaines et où commençait la
 * note. Chacun a maintenant sa propre ligne et son propre style.
 */
.medcme-formation-domains {
	display: block;
	font-size: 12px;
	color: var(--cme-btn-accent);
	margin-top: 4px;
}

.medcme-formation-note {
	display: block;
	font-size: 12px;
	font-style: italic;
	color: var(--bb-rl-text-secondary-color, var(--cme-muted));
	margin-top: 4px;
	padding-left: 8px;
	border-left: 2px solid var(--bb-rl-border-color, var(--cme-border));
}

.medcme-formation-credit {
	display: inline-flex;
	align-items: baseline;
	gap: 3px;
	background: var(--cme-btn-accent-soft);
	color: var(--cme-btn-accent);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 13px;
	white-space: nowrap;
}

.medcme-formation-credit small {
	font-weight: 500;
	opacity: 0.85;
}

.medcme-credit-disclaimer {
	display: block;
	color: var(--bb-rl-text-secondary-color, var(--cme-muted));
	font-size: 11px;
	line-height: 1.4;
	margin-top: 6px;
	flex-basis: 100%;
}

.medcme-proof-link {
	font-size: 12px;
}

/* --- "Mes certifications et attestations" — une carte par envoi ------ */

.medcme-doc-types {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0 0 24px;
}

/*
 * Palette tournante (retour de test : "donner de la vie" à cette
 * section, comme pour le résumé du haut) — un ton par fiche, qui se
 * répète toutes les 4 si le catalogue grandit (proposition de médecin
 * acceptée, nouveau type ajouté par l'admin…). Mêmes teintes que
 * .medcme-summary-item pour une cohérence visuelle sur toute la page.
 */
.medcme-doc-type-card {
	background: #fff;
	border: 1px solid var(--bb-rl-border-color, var(--cme-border));
	border-radius: 12px;
	padding: 16px 18px;
	box-shadow: 0 1px 2px rgba(15, 23, 41, 0.04);
	border-top: 3px solid var(--cme-btn-accent);
}

.medcme-doc-type-card:nth-child(4n+2) {
	border-top-color: #a8672c;
}

.medcme-doc-type-card:nth-child(4n+3) {
	border-top-color: #7e57c2;
}

.medcme-doc-type-card:nth-child(4n+4) {
	border-top-color: #c2557e;
}

.medcme-doc-type-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.medcme-doc-type-header h4 {
	margin: 0;
	font-size: 15px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.medcme-doc-type-header h4::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cme-btn-accent);
	flex: 0 0 auto;
}

.medcme-doc-type-card:nth-child(4n+2) .medcme-doc-type-header h4::before {
	background: #a8672c;
}

.medcme-doc-type-card:nth-child(4n+3) .medcme-doc-type-header h4::before {
	background: #7e57c2;
}

.medcme-doc-type-card:nth-child(4n+4) .medcme-doc-type-header h4::before {
	background: #c2557e;
}

.medcme-doc-type-credit {
	display: inline-block;
	margin-left: 4px;
	font-size: 12px;
	font-weight: 600;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--cme-btn-accent-soft);
	color: var(--cme-btn-accent);
}

.medcme-doc-type-card:nth-child(4n+2) .medcme-doc-type-credit {
	background: #f6ead9;
	color: #a8672c;
}

.medcme-doc-type-card:nth-child(4n+3) .medcme-doc-type-credit {
	background: #ece6f7;
	color: #7e57c2;
}

.medcme-doc-type-card:nth-child(4n+4) .medcme-doc-type-credit {
	background: #f8e5ed;
	color: #c2557e;
}

.medcme-doc-type-items {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

/*
 * Bug corrigé (retour de test) : cette carte utilisait un fond gris
 * terne (--cme-surface) sans ombre, contre un fond blanc net + une
 * ombre légère côté page admin ("Activités & types de crédit") — même
 * information, deux présentations différentes, l'une paraissant plus
 * soignée que l'autre. Alignée sur le même traitement : blanc, ombre
 * légère, padding plus généreux, mêmes coins arrondis.
 */
.medcme-doc-item {
	background: #fff;
	border: 1px solid var(--bb-rl-border-color, var(--cme-border));
	border-radius: 12px;
	padding: 14px 16px;
	box-shadow: 0 1px 2px rgba(15, 23, 41, 0.04);
}

.medcme-doc-item-view {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.medcme-doc-item-main {
	min-width: 0;
}

.medcme-doc-item-title {
	font-weight: 600;
	font-size: 13px;
	display: block;
}

.medcme-doc-item-meta {
	display: block;
	font-size: 12px;
	color: var(--bb-rl-text-secondary-color, var(--cme-muted));
	margin-top: 2px;
}

.medcme-doc-item-links {
	display: block;
	font-size: 12px;
	margin-top: 4px;
}

.medcme-doc-item-links a {
	margin-right: 10px;
}

.medcme-doc-item-actions {
	display: flex;
	gap: 4px;
	flex: 0 0 auto;
}

.medcme-doc-type-empty {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--bb-rl-text-secondary-color, var(--cme-muted));
}

/* Formulaires (ajout ET modification d'un envoi) — transition douce,
   même logique que medcme-admin-ui.css. */
.medcme-document-form,
.medcme-doc-edit-form {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.25s ease;
}

.medcme-document-form.is-open,
.medcme-doc-edit-form.is-open {
	max-height: 900px;
	opacity: 1;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed var(--bb-rl-border-color, var(--cme-border));
}

.medcme-document-form p,
.medcme-doc-edit-form p {
	margin: 0 0 10px;
}

.medcme-document-form label,
.medcme-doc-edit-form label {
	font-size: 13px;
	color: var(--bb-rl-text-secondary-color, var(--cme-muted));
}

.medcme-document-form input[type='text'],
.medcme-document-form input[type='url'],
.medcme-document-form input[type='number'],
.medcme-document-form textarea,
.medcme-doc-edit-form input[type='text'],
.medcme-doc-edit-form input[type='url'],
.medcme-doc-edit-form input[type='number'],
.medcme-doc-edit-form textarea {
	padding: 8px 10px;
	border: 1px solid var(--bb-rl-border-color, var(--cme-border));
	border-radius: 8px;
	font-size: 14px;
	background: #fff !important;
	color: var(--cme-text) !important;
	min-height: 38px;
	width: 100%;
}

.medcme-document-form textarea,
.medcme-doc-edit-form textarea {
	min-height: 70px;
	resize: vertical;
}

/* Anneau de focus cohérent (voir medcme-admin-ui.css — même raisonnement). */
.medcme-document-form input:focus,
.medcme-document-form textarea:focus,
.medcme-doc-edit-form input:focus,
.medcme-doc-edit-form textarea:focus {
	outline: 2px solid var(--cme-btn-accent);
	outline-offset: 1px;
	border-color: var(--cme-btn-accent);
}

.medcme-document-form .medcme-form-row,
.medcme-doc-edit-form .medcme-form-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
}

.medcme-document-form .medcme-form-row > p,
.medcme-doc-edit-form .medcme-form-row > p {
	flex: 1 1 160px;
	margin: 0;
}

.medcme-declare-form p {
	margin: 0 0 12px;
}

.medcme-declare-feedback {
	margin-left: 8px;
	font-size: 13px;
}

.medcme-declare-feedback.is-error {
	color: #c0392b;
}

.medcme-declare-feedback.is-success {
	color: #1e8449;
}

/* Titres de section ("Détail des formations", "Mes certifications et
   attestations"…) — un peu de couleur pour rythmer la page, plutôt que
   des <h3> nus sans repère visuel. */
.medcme-section-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 28px 0 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--cme-btn-accent-soft);
}

.medcme-section-title::before {
	content: '';
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--cme-btn-accent);
	flex: 0 0 auto;
}

.medcme-pending-section .medcme-section-title::before {
	background: #c99a1f;
}

/* --- Sélection multiple de domaines (v1.7.0 — ajoutée à tous les ------
   --- types de justificatifs, reprise à l'identique du formulaire -----
   --- Activités externes pour une expérience cohérente).            --- */

.medcme-field-wide {
	flex: 1 1 100%;
	margin: 10px 0;
}

.medcme-field-help {
	display: block;
	font-size: 11px;
	font-weight: 400;
	color: var(--cme-muted);
	margin-top: 3px;
	line-height: 1.4;
}

.medcme-proposed-type-field {
	background: var(--cme-btn-accent-soft);
	border: 1px dashed var(--cme-btn-accent);
	border-radius: 8px;
	padding: 10px 12px;
	margin: 0 0 12px;
}

.medcme-multiselect {
	position: relative;
}

.medcme-multiselect-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 10px;
	border: 1px solid var(--cme-border);
	border-radius: 8px;
	background: #fff !important;
	color: var(--cme-text) !important;
	font-size: 14px;
	font-weight: 400;
	min-height: 38px;
	cursor: pointer;
	text-align: left;
}

.medcme-multiselect-trigger:hover,
.medcme-multiselect-trigger:focus-visible {
	background: #fff !important;
	border-color: var(--cme-btn-border) !important;
	color: var(--cme-text) !important;
}

.medcme-multiselect.is-open .medcme-multiselect-trigger {
	border-color: var(--cme-btn-border) !important;
}

.medcme-multiselect-trigger .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	color: var(--cme-muted);
	transition: transform 0.15s ease;
}

.medcme-multiselect.is-open .medcme-multiselect-trigger .dashicons {
	transform: rotate(180deg);
}

.medcme-multiselect-panel {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid var(--cme-border);
	border-radius: 8px;
	box-shadow: 0 8px 20px rgba(15, 23, 41, 0.12);
	padding: 6px;
	max-height: 0;
	opacity: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 5;
	transition: max-height 0.2s ease, opacity 0.15s ease;
}

.medcme-multiselect.is-open .medcme-multiselect-panel {
	max-height: 240px;
	opacity: 1;
	pointer-events: auto;
	overflow-y: auto;
}

/* Même garde-fou que medcme-admin-ui.css : le thème BuddyBoss peut
   forcer `display:block` sur label/input en front-end. */
.medcme-multiselect-option {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 10px;
	padding: 8px 10px;
	font-size: 13px;
	line-height: 1.3;
	border-radius: 6px;
	cursor: pointer;
}

.medcme-multiselect-option + .medcme-multiselect-option {
	margin-top: 1px;
}

.medcme-multiselect-option:hover {
	background: var(--cme-btn-accent-soft) !important;
}

.medcme-multiselect-option input[type='checkbox'] {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	min-width: 16px;
	min-height: 16px;
	margin: 0;
	accent-color: var(--cme-btn-accent);
	cursor: pointer;
}

.medcme-multiselect-option span {
	flex: 1 1 auto;
}

.medcme-multiselect-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}

.medcme-multiselect-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--cme-btn-accent-soft);
	color: var(--cme-btn-accent);
	font-size: 12px;
	font-weight: 500;
	padding: 3px 8px 3px 10px;
	border-radius: 999px;
}

/* Bug corrigé (retour de test §1) : voir le commentaire équivalent dans
   medcme-admin-ui.css — rendu natif du bouton (gros pavé bleu/gris) non
   neutralisé par background/border seuls, `appearance` + `!important`
   nécessaires. */
.medcme-multiselect-chip button {
	appearance: none !important;
	-webkit-appearance: none !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0;
	width: auto;
	min-height: 0;
	display: inline-flex;
	/* Bug corrigé (retour de test) : ce bouton affichait un "×" blanc,
	   invisible sur le fond clair de la puce — `color: inherit` ne
	   suffisait pas à garantir la couleur voulue dans tous les cas.
	   Couleur sombre fixée explicitement, avec !important comme pour le
	   reste des contrôles de ce composant. */
	color: #1e2432 !important;
	cursor: pointer;
	opacity: 0.75;
}

.medcme-multiselect-chip button:hover {
	opacity: 1;
}

.medcme-multiselect-chip .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
	color: #1e2432 !important;
}

/* --- "Propositions en attente" (v1.7.0) ------------------------------ */

.medcme-pending-section {
	margin: 0 0 24px;
}

.medcme-pending-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.medcme-pending-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: #fdf7ec;
	border: 1px solid #f0dfb4;
	border-radius: 12px;
	padding: 12px 16px;
	box-shadow: 0 1px 2px rgba(15, 23, 41, 0.04);
}

.medcme-pending-badge {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #92720c;
	background: #f7ecc9;
	border-radius: 999px;
	padding: 3px 10px;
	white-space: nowrap;
}

/* --- Lien externe : petite flèche pour signaler que c'est cliquable -- */

.medcme-external-link {
	display: inline-flex;
	align-items: center;
	gap: 3px;
}

.medcme-external-link .dashicons {
	font-size: 12px;
	width: 12px;
	height: 12px;
}

/* Ligne d'actions d'un formulaire (Envoyer + Annuler, ou Enregistrer +
   Annuler) — v1.6.0, retour de test : un bouton Annuler manquait à côté
   de "Envoyer et recevoir le crédit" pour fermer le formulaire sans
   valider. */
.medcme-form-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 6px;
}

/* --- Badge "type" sur une ligne de "Détail des formations" ----------- */

.medcme-formation-type {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	color: var(--bb-rl-text-secondary-color, var(--cme-muted));
	background: var(--bb-rl-background-secondary, #eef0f3);
	border-radius: 999px;
	padding: 2px 9px;
	margin-right: 6px;
	white-space: nowrap;
}

/* --- "Afficher plus" — pagination douce, tout est déjà dans le DOM --- */

.medcme-hidden-extra {
	display: none;
}

/* Révélation douce des cartes masquées par "Afficher plus" (v1.6.0). */
@keyframes medcme-reveal {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.medcme-just-revealed {
	animation: medcme-reveal 0.25s ease;
}

/*
 * Médailles (v1.8.0) : entrée un peu plus festive qu'un simple fondu —
 * léger "pop" avec rotation, décalé carte par carte (nth-child) pour un
 * effet de cascade plutôt que toutes les médailles qui apparaissent
 * d'un coup.
 */
@keyframes medcme-medal-pop {
	0% {
		opacity: 0;
		transform: scale(0.5) rotate(-8deg);
	}
	60% {
		opacity: 1;
		transform: scale(1.08) rotate(3deg);
	}
	100% {
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}
}

.medcme-medal-card.medcme-just-revealed {
	animation: medcme-medal-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.medcme-medal-card:nth-child(2).medcme-just-revealed {
	animation-delay: 0.08s;
}

.medcme-medal-card:nth-child(3).medcme-just-revealed {
	animation-delay: 0.16s;
}

.medcme-medal-card:nth-child(4).medcme-just-revealed {
	animation-delay: 0.24s;
}

.medcme-medal-card:nth-child(n+5).medcme-just-revealed {
	animation-delay: 0.3s;
}

.medcme-show-more-row {
	margin-top: 10px;
	text-align: center;
}

.medcme-show-more {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: none !important;
	border: none !important;
	padding: 6px 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--cme-btn-accent) !important;
	cursor: pointer;
}

.medcme-show-more:hover,
.medcme-show-more:focus-visible {
	color: var(--cme-btn-accent-hover) !important;
	text-decoration: underline;
}

.medcme-show-more .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
	transition: transform 0.15s ease;
}

.medcme-show-more.is-expanded .dashicons {
	transform: rotate(180deg);
}

/*
 * v1.6.0 — popup de confirmation (suppression d'un justificatif) :
 * remplace window.confirm() natif (retour de test : boîte moche, mal
 * positionnée en haut de l'écran) par une modale centrée. Même
 * composant que medcme-admin-ui.css (dupliqué : ces deux feuilles ne se
 * chargent jamais forcément ensemble sur la même page).
 */
.medcme-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 41, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 100000;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.medcme-modal-overlay.is-open {
	opacity: 1;
}

.medcme-modal {
	background: #fff;
	border-radius: 12px;
	padding: 24px;
	max-width: 380px;
	width: 100%;
	box-shadow: 0 20px 50px rgba(15, 23, 41, 0.28);
	transform: translateY(8px) scale(0.98);
	transition: transform 0.15s ease;
}

.medcme-modal-overlay.is-open .medcme-modal {
	transform: translateY(0) scale(1);
}

.medcme-modal-message {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--cme-text);
}

.medcme-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}

@media (max-width: 480px) {
	.medcme-modal-actions {
		flex-direction: column-reverse;
	}

	.medcme-modal-actions .medcme-btn {
		width: 100%;
		justify-content: center;
	}
}

/*
 * v1.8.0 — popup de célébration à l'obtention d'une nouvelle distinction
 * (retour de test : "vrai animation"). Confetti ajoutés dynamiquement en
 * JS (voir celebrateDistinctions() dans medcme.js) — seule leur
 * animation de chute est définie ici.
 */
.medcme-celebrate-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 41, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100010;
	opacity: 0;
	transition: opacity 0.2s ease;
	overflow: hidden;
}

.medcme-celebrate-overlay.is-open {
	opacity: 1;
}

.medcme-celebrate-card {
	position: relative;
	z-index: 2;
	background: #fff;
	border-radius: 16px;
	padding: 32px 28px;
	max-width: 340px;
	width: calc(100% - 40px);
	text-align: center;
	box-shadow: 0 24px 60px rgba(15, 23, 41, 0.35);
	transform: scale(0.85);
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.medcme-celebrate-overlay.is-open .medcme-celebrate-card {
	transform: scale(1);
}

.medcme-celebrate-kicker {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--cme-btn-accent);
}

.medcme-celebrate-medal {
	display: flex;
	justify-content: center;
	margin-bottom: 14px;
}

.medcme-celebrate-label {
	margin: 0 0 22px;
	font-size: 18px;
	font-weight: 700;
	color: var(--cme-text);
}

.medcme-celebrate-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.medcme-celebrate-actions .medcme-btn {
	justify-content: center;
	width: 100%;
}

.medcme-celebrate-confetti {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 1;
}

.medcme-confetti-piece {
	position: absolute;
	top: -10px;
	width: 8px;
	height: 14px;
	opacity: 0.9;
	animation-name: medcme-confetti-fall;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

@keyframes medcme-confetti-fall {
	0% {
		transform: translateY(0) rotate(0deg);
		opacity: 1;
	}
	100% {
		transform: translateY(110vh) rotate(540deg);
		opacity: 0.3;
	}
}