:root {
	--accent: #EA80FC;
	--accent-clair: #C580FC;
	--action: #0E5464;
	--action-clair: #D9F0F2;
	--action-pale: #EFF9FA;
	--fond: #F4FAFB;
	--carte: #ffffff;
	--texte: #2C4650;
	--doux: #4E6570;
	--bord-controle: #6F8891;

	--g-normal: 400;
	--g-fort: 600;

	--t-mini: 12px;
	--t-petit: 13px;
	--t-texte: 15px;
	--t-fort: 17px;
	--t-titre: 22px;
	--t-page: 30px;
	--t-tactile: 16px;

	--rayon: 14px;
	--rayon-petit: 9px;
	--rayon-grand: 22px;
	--rayon-pilule: 999px;

	--ombre: 0 1px 2px rgba(15, 34, 41, .05), 0 4px 14px rgba(15, 34, 41, .06);
	--ombre-forte: 0 12px 34px rgba(8, 50, 60, .16);

	--police: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--police-chiffre: "Nerko One", "Marker Felt", "Segoe Print", "Chalkboard SE", cursive;

	--focus: #1B7F91;
	--police-titre: var(--police);
	--lh-mini:  1.35;
	--lh-texte: 1.4;
	--lh-nu:    1;
	--ic-t-petit: 16px;
	--espace-1: 4px;
	--espace-2: 8px;
	--espace-3: 12px;
	--espace-4: 16px;
	--v-dedans: var(--espace-4);
	--transition: .18s ease;
	--r-s: var(--rayon-petit);
	--ep-bord: 1.5px;
	--ic-petit: var(--ic-t-petit);
	--f-titre: var(--police-titre);
	--f-texte: var(--police);
	--h-ctrl-fort: 48px;
	--h-ctrl: var(--h-ctrl-fort);
	--c-papier: var(--carte);
	--c-surface-2: var(--action-pale);
	--c-encre: var(--texte);
	--c-doux: var(--doux);
	--c-action: var(--action);
	--c-action-vif: var(--focus);
	--c-action-voile: var(--action-clair);
	--c-bord: var(--bord-controle);
	--e1: var(--espace-1);
	--e2: var(--espace-2);
	--e3: var(--espace-3);
	--e4: var(--espace-4);
	--r-pilule: var(--rayon-pilule);
	--f-code: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--l-formulaire: 860px;
	--trait: #DCE8EA;
	--focus-ep: 2px;
	--ls-capitale: .09em;
	--espace-5: 24px;
	--espace-6: 32px;
}

.ui-sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.ui-fil { font-size: var(--t-petit); color: var(--doux); margin: 0 0 var(--espace-4); }
.ui-fil span[aria-current] { color: var(--texte); font-weight: var(--g-fort); }
.ui-fil-sep { margin: 0 6px; }

.rech{
  display:flex; align-items:center; gap:var(--e3); min-width:0;
  height:var(--h-ctrl); min-height:0; padding:0 var(--e4);
  border:var(--ep-bord) solid var(--c-bord); border-radius:var(--r-pilule);
  background:var(--c-papier); transition:border-color .15s ease;
}
.rech:focus-within{border-color:var(--focus)}
.rech{--rech-h:var(--h-ctrl); --rech-ic:calc(var(--rech-h) - 2 * var(--ep-bord) - var(--e2))}
.rech:has(> .ui-icone:first-child){padding-left:var(--e1); padding-right:var(--e1); gap:var(--e2)}
.rech > .ui-icone:first-child{
  flex:none; box-sizing:border-box; width:var(--rech-ic); height:var(--rech-ic);
  padding:calc((var(--rech-ic) - var(--ic-petit)) / 2); border-radius:50%;
  background:var(--c-action-voile); color:var(--c-action)}
.rech input{
  border:0; outline:0; flex:1 1 auto; min-width:0; width:100%;
  height:100%; min-height:0; padding:0;
  font:var(--t-texte)/var(--lh-texte) var(--f-texte);
  background:transparent; color:var(--c-encre);
}
@media (pointer:coarse){.rech input{font-size:var(--t-tactile)}}
.rech input::-webkit-search-cancel-button{
  -webkit-appearance:none; appearance:none; flex:none; width:var(--rech-ic); height:var(--rech-ic); margin:0 0 0 var(--e2);
  border-radius:50%; cursor:pointer; transition:background-color var(--transition);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6 6 18' fill='none' stroke='%234E6570' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat}
@media (hover:hover){.rech input::-webkit-search-cancel-button:hover{background-color:var(--c-action-voile)}}

.recherche-form,.recherche-resultats{max-width:var(--l-formulaire); min-width:0}
.recherche-resultats{display:grid; gap:var(--e4); margin-top:var(--v-dedans)}
.recherche-resultats:empty{display:none}
.recherche-lien{display:flex; align-items:center; gap:var(--e3); padding:var(--e2); border-radius:var(--r-s);
  color:var(--c-encre); text-decoration:none; transition:background-color var(--transition), box-shadow var(--transition)}
@media (hover:hover){.recherche-lien:hover{background:color-mix(in srgb, var(--c-action-voile) 60%, transparent)}}
.recherche-lien:focus-visible{outline:none; background:var(--c-action-voile); box-shadow:inset 0 0 0 var(--ep-bord) var(--focus)}
.recherche-texte{display:grid; min-width:0}
.recherche-titre{font-weight:var(--g-fort); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.recherche-detail{font-size:var(--t-petit); color:var(--c-doux); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.filtres{display:flex; gap:var(--e2); flex-wrap:wrap}
.filtres{align-items:center}
.statut,.org-bouton,.fpil,.pastille-filtre{
  display:inline-flex; align-items:center; gap:var(--e2); white-space:nowrap;
  height:var(--h-ctrl); min-height:0; padding:0 var(--e4); border-radius:var(--r-pilule);
  border:var(--ep-bord) solid var(--c-bord); background:var(--c-papier); cursor:pointer;
  font:var(--g-fort) var(--t-petit)/var(--lh-nu) var(--f-titre); color:var(--c-action);
}
@media (hover:hover){.fpil:hover{border-color:var(--c-action-vif)}}
.fpil.on{background:var(--c-action); border-color:var(--c-action); color:#fff}
.statut,.fpil,.pastille-filtre,.org-bouton,.reglage-ouvre,.retour,.afaire-l{text-decoration:none}

.ui-feuille {
	width: min(440px, calc(100vw - var(--espace-6)));
	max-height: calc(100vh - var(--espace-6));
	padding: 0;
	border: none;
	border-radius: var(--rayon);
	background: var(--carte);
	color: var(--texte);
	box-shadow: var(--ombre-forte);
}
.ui-feuille--large { width: min(720px, calc(100vw - var(--espace-6))); }
#contenu dialog.ui-feuille, dialog.ui-feuille { margin: auto; }
.ui-feuille::backdrop { background: rgba(8, 50, 60, .42); }
.ui-feuille-tete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--espace-4);
	margin: 0;
	padding: 6px var(--espace-2) 6px var(--espace-4);
	border-bottom: 1px solid var(--trait);
	background: var(--action-pale);
	min-height: 41px;
	box-sizing: border-box;
}
.ui-feuille-tete > * { margin: 0; }
.ui-feuille-fermer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex: 0 0 auto;
	border: none;
	border-radius: var(--rayon-petit);
	background: none;
	color: var(--doux);
	font-size: var(--t-titre);
	line-height: 1;
	cursor: pointer;
	transition: background var(--transition), color var(--transition);
}
@media (hover: hover) { .ui-feuille-fermer:hover { background: var(--action-clair); color: var(--action); } }
.ui-feuille-fermer:focus-visible { outline-offset: calc(-1 * var(--focus-ep)); }
@media (pointer:coarse){
  .compte,.ui-feuille-fermer{position:relative}
  .compte::before,.ui-feuille-fermer::before{content:""; position:absolute; inset:-11px}
}
.ui-feuille-corps {
	padding: var(--espace-4);
	overflow-y: auto;
}
@media (max-width: 560px) {
	.ui-feuille,
	.ui-feuille--large {
		width: calc(100vw - var(--espace-5));
		max-width: calc(100vw - var(--espace-5));
		max-height: 88vh;
	}
}
.ui-feuille:focus { outline: none; }
h2.ui-feuille-titre{
  font:var(--g-fort) var(--t-mini)/var(--lh-mini) var(--f-titre);
  letter-spacing:var(--ls-capitale); text-transform:uppercase;
  color:var(--c-doux); margin:0}

.tb-title {
	margin: 0;
	font-family: var(--police-chiffre);
	font-weight: 400 !important;
	font-size: 30px;
	letter-spacing: .01em;
	line-height: 1.3;
	text-transform: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;

	padding-right: 4px;
	box-sizing: border-box;

	background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--action) 70%, #000));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}