/* Suivi des dossiers — la boîte. Dense à dessein : une quinzaine de dossiers visibles sur un portable. */

:root {
	--bleu: #050A95;
	--bleu-fonce: #03066B;
	--bleu-pale: #EEF0FA;
	--bleu-survol: #F5F6FC;
	--rouge: #C7112E;
	--rouge-fonce: #A00E25;
	--rouge-pale: #FDECEF;
	--texte: #1B1D2E;
	--gris: #5B5F7A;
	--gris-clair: #8A8DA3;
	--bord: #E3E5F2;
	--bord-fort: #C9CBD9;
	--fond: #F6F7FB;
	--blanc: #FFFFFF;
	--vert: #11643A;
	--vert-pale: #CDEFD9;
	--orange: #8A4B00;
	--orange-pale: #FFE9C7;
	--ombre: 0 8px 24px rgba(20, 22, 60, .14);

	/* Statuts : une couleur franche chacun */
	--s-a_faire: #4A4E68;
	--s-a_faire-fond: #E4E6EF;
	--s-en_cours: #1A2BBF;
	--s-en_cours-fond: #DCE1FF;
	--s-a_valider: #8A4B00;
	--s-a_valider-fond: #FFE4B8;
	--s-termine: #11643A;
	--s-termine-fond: #CDEFD9;
	--s-annule: #8A8DA3;
	--s-annule-fond: #ECEDF2;
}

* { box-sizing: border-box; }

body.eavd {
	margin: 0;
	background: var(--fond);
	color: var(--texte);
	font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--bleu); }

input[type="text"], input[type="search"], input[type="url"], input[type="date"], input[type="datetime-local"],
input[type="password"], input.input, select, textarea {
	width: 100%;
	min-width: 0;
	border: 1px solid var(--bord);
	border-radius: 6px;
	background: var(--blanc);
	font-size: 13.5px;
}
input[type="text"], input[type="search"], input[type="url"], input[type="date"], input[type="datetime-local"],
input[type="password"], input.input, select {
	height: 32px;
	padding: 0 8px;
}
textarea { padding: 8px 10px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(5, 10, 149, .12); }
.est-invalide { border-color: var(--rouge) !important; }

.eavd-icone { flex: none; width: 16px; height: 16px; }

/* Boutons */

.eavd-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 32px;
	padding: 0 12px;
	border: 1px solid var(--bord);
	border-radius: 6px;
	background: var(--blanc);
	color: var(--texte);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.eavd-bouton:hover { border-color: var(--bord-fort); background: var(--fond); }
.eavd-bouton:disabled { opacity: .45; cursor: not-allowed; }
.eavd-principal { background: var(--bleu); border-color: var(--bleu); color: var(--blanc); }
.eavd-principal:hover { background: var(--bleu-fonce); border-color: var(--bleu-fonce); }
.eavd-bouton-danger { color: var(--rouge); }
.eavd-bouton-danger:hover { border-color: #F3B8C2; background: var(--rouge-pale); }
.eavd-dialogue .eavd-bouton-danger { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); }
.eavd-bouton-ok { color: var(--vert); }
.eavd-bouton-ok:hover { border-color: #9FD9B6; background: var(--vert-pale); }
.eavd-bouton-icone {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--bord);
	border-radius: 6px;
	background: var(--blanc);
	color: var(--gris);
	cursor: pointer;
}
.eavd-bouton-icone:hover { color: var(--rouge); border-color: var(--bord-fort); }
[hidden] { display: none !important; }

.eavd-discret { color: var(--gris-clair); font-size: 12.5px; font-weight: 400; }
.eavd-aide { color: var(--gris-clair); font-size: 11.5px; line-height: 1.3; }
.eavd-rouge { color: var(--rouge); }

/* Avatars : photo ronde, ou initiales sur une couleur propre à chacun */

.eavd-avatar {
	flex: none;
	display: inline-grid;
	place-items: center;
	border-radius: 50%;
	background: hsl(var(--teinte, 240) 52% 40%);
	color: var(--blanc);
	font-weight: 700;
	object-fit: cover;
	box-shadow: 0 0 0 1px rgba(20, 22, 60, .14); /* les portraits sur fond blanc gardent un contour */
}
.eavd-avatar-s { width: 18px; height: 18px; font-size: 8px; }
.eavd-avatar-m { width: 24px; height: 24px; font-size: 10px; }
.eavd-avatar-l { width: 32px; height: 32px; font-size: 12px; }

/* Pastille de statut, dans la liste et dans le fil */

.eavd-l-statut {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0 7px 0 6px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
	white-space: nowrap;
}
.eavd-l-statut::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.s-a_faire { background: var(--s-a_faire-fond); color: var(--s-a_faire); }
.s-en_cours { background: var(--s-en_cours-fond); color: var(--s-en_cours); }
.s-a_valider { background: var(--s-a_valider-fond); color: var(--s-a_valider); }
.s-termine { background: var(--s-termine-fond); color: var(--s-termine); }
.s-annule { background: var(--s-annule-fond); color: var(--s-annule); text-decoration: line-through; }

/* Menu du compte */

details.eavd-compte { position: relative; }
details.eavd-compte > summary { list-style: none; cursor: pointer; }
details.eavd-compte > summary::-webkit-details-marker { display: none; }
.eavd-compte > summary { display: flex; align-items: center; gap: 8px; padding: 4px; color: var(--blanc); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.eavd-compte > summary::after { content: "▾"; opacity: .7; font-size: 11px; }
.eavd-compte > summary .eavd-avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }
.eavd-compte nav {
	position: absolute;
	right: 0;
	top: calc(100% + 4px);
	z-index: 20;
	min-width: 240px;
	padding: 4px;
	border: 1px solid var(--bord);
	border-radius: 8px;
	background: var(--blanc);
	box-shadow: var(--ombre);
}
.eavd-compte nav a, .eavd-compte nav button {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 8px 10px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--texte);
	font-size: 13.5px;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.eavd-compte nav a:hover, .eavd-compte nav button:hover { background: var(--fond); }
.eavd-compte nav .eavd-icone { color: var(--gris); }

/* ------------------------------------------------------------------
 * Cadre : barre du haut, colonnes
 * ---------------------------------------------------------------- */

body.eavd-boite { height: 100vh; overflow: hidden; }
.eavd-app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

.eavd-bandeau { flex: none; padding: 4px 12px; background: #FFF4CC; color: #5C4A00; font-size: 12.5px; text-align: center; }
.eavd-bandeau.est-alerte { background: var(--rouge); color: var(--blanc); font-weight: 600; }
.eavd-bandeau.est-alerte a { color: var(--blanc); }

.eavd-barre {
	flex: none;
	display: flex;
	align-items: center;
	gap: 12px;
	height: 48px;
	padding: 0 16px;
	background: var(--bleu);
	color: var(--blanc);
}
.eavd-marque { color: var(--blanc); font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; }
#eavd-nouveau { margin-left: auto; }
.eavd-replier {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin-left: -6px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: rgba(255, 255, 255, .85);
	cursor: pointer;
}
.eavd-replier:hover { background: rgba(255, 255, 255, .14); color: var(--blanc); }
.eavd-replier .eavd-icone { width: 20px; height: 20px; }
.eavd-liste-repliee .eavd-replier { background: rgba(255, 255, 255, .18); }
@media (min-width: 901px) {
	body.eavd-liste-repliee .eavd-corps { grid-template-columns: minmax(0, 1fr); }
	body.eavd-liste-repliee .eavd-colonne-liste { display: none; }
}
.eavd-marque span { margin-right: 6px; font-weight: 500; opacity: .7; }
.eavd-barre .eavd-principal { background: var(--rouge); border-color: var(--rouge); }
.eavd-barre .eavd-principal:hover { background: var(--rouge-fonce); border-color: var(--rouge-fonce); }

.eavd-corps { flex: 1; display: grid; grid-template-columns: minmax(320px, 380px) minmax(0, 1fr); min-height: 0; }

/* ------------------------------------------------------------------
 * Colonne de gauche : la liste
 * ---------------------------------------------------------------- */

.eavd-colonne-liste { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--bord); background: var(--blanc); }

.eavd-outils { flex: none; display: grid; gap: 5px; padding: 8px 12px 7px; border-bottom: 1px solid var(--bord); }
.eavd-outils input[type="search"] { height: 30px; }
/* Les vues, dans la barre bleue */
.eavd-vues { display: flex; gap: 2px; margin-left: 20px; padding: 3px; border-radius: 8px; background: rgba(255, 255, 255, .1); }
.eavd-vues button {
	padding: 5px 12px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: rgba(255, 255, 255, .82);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}
.eavd-vues button:hover { background: rgba(255, 255, 255, .12); color: var(--blanc); }
.eavd-vues button span { margin-left: 3px; font-size: 11.5px; font-weight: 400; opacity: .75; }
.eavd-vues button[data-vue="a_trier"] span {
	padding: 0 6px;
	border-radius: 999px;
	background: #FFB547;
	color: #3D2200;
	font-weight: 700;
	opacity: 1;
}
.eavd-vues button.est-actif { background: var(--blanc); color: var(--bleu); }
.eavd-vues button.est-actif span { opacity: .7; }
.eavd-filtres { display: flex; gap: 6px; }
.eavd-filtres select { flex: 1 1 0; height: 28px; font-size: 12.5px; }
.eavd-filtres input + select { flex: none; width: auto; max-width: 42%; }
.eavd-filtres select.est-actif { border-color: var(--bleu); background: var(--bleu-pale); color: var(--bleu); font-weight: 600; }

.eavd-lignes { flex: 1; min-height: 0; overflow-y: auto; }

.eavd-ligne {
	display: block;
	padding: 5px 12px 5px 11px;
	border-bottom: 1px solid #EEF0F5;
	border-left: 3px solid transparent;
	color: inherit;
	text-decoration: none;
}
.eavd-ligne:hover { background: var(--bleu-survol); }
.eavd-ligne:focus-visible { outline: 2px solid var(--bleu); outline-offset: -2px; }
.eavd-ligne.est-ouvert { border-left-color: var(--bleu); background: var(--bleu-pale); }
.eavd-l1 { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.eavd-l-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eavd-urgent {
	flex: none;
	padding: 1px 6px;
	border-radius: 4px;
	background: var(--rouge);
	color: var(--blanc);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
}
.eavd-l2 { display: flex; align-items: center; gap: 6px; margin-top: 1px; color: var(--gris); font-size: 12px; line-height: 18px; }
.eavd-l-gens { flex: none; display: inline-flex; align-items: center; }
.eavd-l-gens .eavd-avatar + .eavd-avatar { margin-left: -4px; box-shadow: 0 0 0 1.5px var(--blanc); }
.eavd-l-resp { color: var(--rouge); font-style: italic; white-space: nowrap; }
.eavd-l-trier { min-width: 0; overflow: hidden; color: var(--orange); font-size: 11.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.eavd-l-date { flex: none; margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.eavd-l-date.est-retard { color: var(--rouge); font-weight: 700; }
.eavd-l-date.est-jour { color: var(--orange); font-weight: 700; }
.eavd-ligne.est-clos .eavd-l-nom { color: var(--gris-clair); font-weight: 500; }
.eavd-ligne.est-clos .eavd-urgent { background: var(--gris-clair); }

.eavd-groupe-titre {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	padding: 5px 12px 5px 14px;
	border-bottom: 1px solid var(--bord);
	background: var(--fond);
	color: var(--gris);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}
.eavd-liste-vide { margin: 32px 20px; color: var(--gris); text-align: center; }

/* ------------------------------------------------------------------
 * Le dossier ouvert : la fiche au centre, le fil de suivi à droite
 * ---------------------------------------------------------------- */

.eavd-colonne-fiche { min-height: 0; overflow-y: auto; background: var(--blanc); container-type: inline-size; }
.eavd-vide { margin: 22vh 24px 0; color: var(--gris-clair); text-align: center; }
.eavd-fiche { max-width: 900px; padding: 0 28px 40px; }

.eavd-fiche-tete {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	padding: 10px 0 8px;
	border-bottom: 1px solid var(--bord);
	background: var(--blanc);
}
.eavd-retour { display: none; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--bleu); font-weight: 600; cursor: pointer; }
.eavd-etat { margin-right: auto; color: var(--gris-clair); font-size: 12.5px; white-space: nowrap; }
.eavd-etat.est-ok::before { content: "✓ "; color: var(--vert); }
.eavd-etat.est-attente { color: var(--orange); }
.eavd-etat.est-erreur { color: var(--rouge); font-weight: 600; text-decoration: underline; cursor: pointer; }
.eavd-actions { display: flex; align-items: center; gap: 6px; }
.eavd-actions .eavd-bouton { padding: 0 10px; }

.eavd-nom {
	display: block;
	width: calc(100% + 18px);
	margin: 10px -9px 0;
	padding: 5px 8px;
	overflow: hidden;
	border: 1px solid transparent;
	border-radius: 6px;
	background: transparent;
	color: var(--texte);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	resize: none;
}
.eavd-nom:hover { border-color: var(--bord); }
.eavd-nom:focus { border-color: var(--bleu); background: var(--blanc); }
.eavd-nom::placeholder { color: var(--bord-fort); }
.eavd-meta { margin: 0 0 4px; color: var(--gris); font-size: 12.5px; }

.eavd-a-trier {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 6px 0 0;
	padding: 6px 10px;
	border-radius: 6px;
	background: var(--orange-pale);
	color: var(--orange);
	font-size: 13px;
	font-weight: 600;
}
.est-a-completer { border-color: #E9B565 !important; background-color: #FFF8EC !important; }
.eavd-puces.est-a-completer { padding: 3px; border: 1px dashed #E9B565; border-radius: 8px; }

/* Six colonnes : un champ simple en prend deux, partenaires et Drive quatre, thèmes et lieu trois. */
.eavd-proprietes {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px 14px;
	padding: 12px 0 16px;
	border-bottom: 1px solid var(--bord);
}
.p-2 { grid-column: span 2; }
.p-3 { grid-column: span 3; }
.p-4 { grid-column: span 4; }
.eavd-prop { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.eavd-prop > span:first-child, .eavd-prop > label {
	color: var(--gris);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.eavd-avec-bouton { display: flex; gap: 6px; }
.eavd-avec-bouton input { flex: 1; }

select[data-champ="statut"] { font-weight: 700; }
select[data-valeur="a_faire"] { border-color: #C9CCDA; background-color: var(--s-a_faire-fond); color: var(--s-a_faire); }
select[data-valeur="en_cours"] { border-color: #AEB8FF; background-color: var(--s-en_cours-fond); color: var(--s-en_cours); }
select[data-valeur="a_valider"] { border-color: #F2C27A; background-color: var(--s-a_valider-fond); color: var(--s-a_valider); }
select[data-valeur="termine"] { border-color: #9FD9B6; background-color: var(--s-termine-fond); color: var(--s-termine); }
select[data-valeur="annule"] { background-color: var(--s-annule-fond); color: var(--s-annule); }
select[data-valeur="urgent"] { border-color: #F3B8C2; background-color: var(--rouge-pale); color: var(--rouge); font-weight: 700; }
/* Responsable et partenaires : des avatars, et un menu de l'équipe pour choisir */
.eavd-membres { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 36px; }
.eavd-membre-bouton {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 1px 8px 1px 1px;
	border: 1px solid var(--bord);
	border-radius: 999px;
	background: var(--blanc);
	color: var(--gris);
	cursor: pointer;
}
.eavd-membre-bouton:hover { border-color: var(--bord-fort); background: var(--fond); }
.eavd-fleche { font-size: 11px; }
.eavd-avatar-vide { background: var(--blanc); border: 1.5px dashed var(--rouge); color: var(--rouge); box-shadow: none; }
.eavd-membres.est-a-completer .eavd-membre-bouton { border-color: #E9B565; background: #FFF8EC; }
.eavd-membre { position: relative; display: inline-flex; }
.eavd-retirer {
	position: absolute;
	top: -5px;
	right: -5px;
	display: none;
	place-items: center;
	width: 18px;
	height: 18px;
	padding: 0;
	border: 2px solid var(--blanc);
	border-radius: 50%;
	background: var(--texte);
	color: var(--blanc);
	cursor: pointer;
}
.eavd-retirer .eavd-icone { width: 10px; height: 10px; }
.eavd-membre:hover .eavd-retirer, .eavd-membre:focus-within .eavd-retirer { display: grid; }
.eavd-retirer:hover { background: var(--rouge); }
@media (hover: none) { .eavd-retirer { display: grid; } }
.eavd-membre-ajout {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1.5px dashed var(--bord-fort);
	border-radius: 50%;
	background: transparent;
	color: var(--bleu);
	cursor: pointer;
}
.eavd-membre-ajout:hover { border-color: var(--bleu); background: var(--bleu-pale); }
.eavd-menu-membres {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 30;
	min-width: 210px;
	max-height: 300px;
	padding: 4px;
	overflow-y: auto;
	border: 1px solid var(--bord);
	border-radius: 8px;
	background: var(--blanc);
	box-shadow: var(--ombre);
}
.eavd-menu-membres button {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 6px 8px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	font-size: 13.5px;
	text-align: left;
	cursor: pointer;
}
.eavd-menu-membres button:hover, .eavd-menu-membres button:focus-visible { background: var(--fond); outline: none; }
.eavd-menu-membres button[aria-current] { font-weight: 700; }
.eavd-menu-membres button .eavd-icone:last-child { margin-left: auto; color: var(--bleu); }

/* Puces : partenaires et thèmes */
.eavd-puces { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 32px; }
.eavd-puce {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 28px;
	padding: 0 2px 0 2px;
	border: 1px solid var(--bord);
	border-radius: 999px;
	background: var(--blanc);
	font-size: 13px;
	white-space: nowrap;
}
.eavd-puce-theme { padding-left: 9px; border-color: #C9CDF2; background: var(--bleu-pale); color: var(--bleu); font-weight: 600; }
.eavd-puce-theme .eavd-icone { width: 13px; height: 13px; }
.eavd-puce button {
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--gris-clair);
	cursor: pointer;
}
.eavd-puce button .eavd-icone { width: 12px; height: 12px; }
.eavd-puce button:hover { background: var(--rouge-pale); color: var(--rouge); }
select.eavd-ajout {
	width: auto;
	height: 28px;
	padding: 0 8px;
	border: 1px dashed var(--bord-fort);
	border-radius: 999px;
	background: transparent;
	color: var(--bleu);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.eavd-bloc { padding-top: 16px; }
.eavd-bloc h2, .eavd-suivi-tete h2 { margin: 0 0 8px; color: var(--gris); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

/* Éditeur de description */
.eavd-editeur { overflow: hidden; border: 1px solid var(--bord); border-radius: 8px; }
.eavd-editeur:focus-within { border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(5, 10, 149, .08); }
.eavd-outils-texte { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-bottom: 1px solid var(--bord); background: var(--fond); }
.eavd-outils-texte button { padding: 3px 9px; border: 0; border-radius: 4px; background: transparent; color: var(--texte); font-size: 12.5px; cursor: pointer; }
.eavd-outils-texte button:hover { background: var(--blanc); box-shadow: 0 0 0 1px var(--bord); }
.eavd-zone { min-height: 140px; padding: 10px 14px; outline: none; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.eavd-zone:empty::before { content: attr(data-vide); color: var(--gris-clair); }
.eavd-zone[contenteditable="false"] { opacity: .5; }
.eavd-zone p, .eavd-ancienne p { margin: 0 0 .6em; }
.eavd-zone h3, .eavd-zone h4 { margin: .8em 0 .3em; font-size: 15px; }
.eavd-zone ul, .eavd-zone ol, .eavd-ancienne ul, .eavd-ancienne ol { margin: 0 0 .6em; padding-left: 1.4em; }
.eavd-zone blockquote { margin: 0 0 .6em; padding-left: 10px; border-left: 3px solid var(--bord); color: var(--gris); }
.eavd-zone a { cursor: pointer; }

/* Le fil de suivi */
.eavd-suivi { padding: 0 28px 32px; background: var(--fond); }
.eavd-suivi-tete { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 0 6px; }
.eavd-suivi-tete h2 { margin: 0; }
.eavd-fil { position: relative; margin: 0; padding: 0; list-style: none; }
.eavd-fil::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 15px; width: 2px; background: var(--bord); }
.eavd-fil-evt { position: relative; padding: 4px 0 4px 40px; color: var(--gris); font-size: 12.5px; }
.eavd-fil-evt::before {
	content: "";
	position: absolute;
	top: 9px;
	left: 11px;
	width: 10px;
	height: 10px;
	border: 2px solid var(--bord-fort);
	border-radius: 50%;
	background: var(--blanc);
}
.eavd-fil-evt.avec-marque::before { display: none; }
.eavd-marque-evt {
	position: absolute;
	top: 3px;
	left: 5px;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border: 1.5px solid var(--bord-fort);
	border-radius: 50%;
	background: var(--blanc);
	color: var(--gris);
}
.eavd-marque-evt .eavd-icone { width: 12px; height: 12px; }
.eavd-evt-creation .eavd-marque-evt { border-color: var(--bleu); background: var(--bleu); color: var(--blanc); }
.eavd-evt-partage .eavd-marque-evt { border-color: var(--bleu); color: var(--bleu); }
.eavd-evt-partage p { color: var(--texte); }
.eavd-evt-rappel .eavd-marque-evt { border-color: var(--orange); background: var(--orange-pale); color: var(--orange); }
.eavd-evt-rappel p { color: var(--orange); }
.eavd-fil-evt p { margin: 0; }
.eavd-fil-evt strong { color: var(--texte); font-weight: 600; }
.eavd-fil-evt strong.eavd-rouge { color: var(--rouge); }
.eavd-fil time { color: var(--gris-clair); white-space: nowrap; }

.eavd-fil-note { position: relative; display: flex; gap: 8px; padding: 6px 0; }
.eavd-fil-note .eavd-avatar { position: relative; z-index: 1; border: 2px solid var(--fond); box-sizing: content-box; margin-left: -2px; }
.eavd-bulle { flex: 1; min-width: 0; padding: 7px 12px 8px; border: 1px solid var(--bord); border-radius: 8px; background: var(--blanc); }
.eavd-bulle-tete { margin: 0 0 2px; color: var(--gris); font-size: 12.5px; }
.eavd-bulle-tete strong { color: var(--texte); }
.eavd-bulle-texte { overflow-wrap: anywhere; }
.eavd-ancienne { margin: 2px 0 4px; }
.eavd-ancienne summary { color: var(--bleu); font-size: 12px; cursor: pointer; }
.eavd-ancienne > div { margin-top: 4px; padding: 8px 12px; border-radius: 6px; background: var(--blanc); color: var(--texte); font-size: 13px; }

.eavd-note { margin-top: 10px; border: 1px solid var(--bord); border-radius: 8px; background: var(--blanc); }
.eavd-note:focus-within { border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(5, 10, 149, .08); }
.eavd-note textarea { display: block; min-height: 64px; border: 0; border-radius: 8px 8px 0 0; font-size: 14px; resize: vertical; }
.eavd-note textarea:focus { box-shadow: none; }
.eavd-note-pied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 8px 6px 12px;
	border-top: 1px solid var(--bord);
	border-radius: 0 0 8px 8px;
	background: var(--fond);
}

/*
 * Assez de place : le fil se met à droite de la fiche, le champ de note en bas, comme une
 * discussion. On mesure la place de la colonne elle-même, pas la largeur de l'écran : dès qu'elle
 * passe sous 900 pixels (fenêtre réduite), le fil repasse sous la fiche.
 */
@container (min-width: 900px) {
	.eavd-dossier { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); height: 100%; }
	.eavd-fiche { height: 100%; overflow-y: auto; }
	.eavd-suivi { display: flex; flex-direction: column; min-height: 0; height: 100%; padding: 0 16px 14px; border-left: 1px solid var(--bord); }
	.eavd-suivi-tete { flex: none; padding: 14px 0 8px; }
	.eavd-fil { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
	.eavd-fil::before { display: none; } /* dans une colonne qui défile, le trait serait coupé */
	.eavd-note { flex: none; }
	.eavd-note-pied .eavd-aide { display: none; }
}

/* ------------------------------------------------------------------
 * Fenêtres : envoi par courriel, suppression, thèmes ; messages
 * ---------------------------------------------------------------- */

.eavd-dialogue { width: min(520px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 12px; box-shadow: 0 20px 60px rgba(10, 12, 40, .3); color: var(--texte); }
.eavd-dialogue::backdrop { background: rgba(10, 12, 40, .4); }
.eavd-dialogue form, .eavd-dialogue-corps { display: grid; gap: 8px; padding: 20px 22px; }
.eavd-dialogue-corps form { padding: 0; }
.eavd-dialogue h2 { margin: 0; font-size: 18px; }
.eavd-dialogue p { margin: 0; }
.eavd-dialogue fieldset { margin: 6px 0 2px; padding: 0; border: 0; }
.eavd-dialogue legend, .eavd-dialogue form > label:not(.eavd-case) { margin-bottom: 2px; font-size: 13px; font-weight: 600; }
.eavd-cases { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.eavd-case { display: flex; align-items: center; gap: 6px; font-size: 13.5px; cursor: pointer; }
.eavd-case input { width: auto; height: auto; margin: 0; }
.eavd-erreur { color: var(--rouge); font-size: 13px; }
.eavd-dialogue-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.eavd-themes-liste { display: grid; gap: 6px; max-height: 50vh; margin: 4px 0; padding: 0; overflow-y: auto; list-style: none; }
.eavd-themes-liste li { display: flex; gap: 6px; }

.eavd-toast {
	position: fixed;
	bottom: 20px;
	left: 50%;
	z-index: 50;
	max-width: calc(100vw - 32px);
	padding: 10px 16px;
	border-radius: 8px;
	background: var(--texte);
	color: var(--blanc);
	font-size: 13.5px;
	box-shadow: var(--ombre);
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 8px);
	transition: opacity .2s, transform .2s;
}
.eavd-toast.est-visible { opacity: 1; transform: translate(-50%, 0); }
.eavd-toast.est-erreur { background: var(--rouge); }

/* ------------------------------------------------------------------
 * Pages seules : connexion, accès refusé, courriels du prototype
 * ---------------------------------------------------------------- */

.eavd-carte-seule { max-width: 400px; margin: 12vh auto 40px; padding: 28px; border: 1px solid var(--bord); border-radius: 12px; background: var(--blanc); }
.eavd-carte-seule h1 { margin: 0 0 16px; color: var(--bleu); font-size: 22px; }
.eavd-surtitre { margin: 0 0 2px; color: var(--gris); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.eavd-connexion form p { margin: 0 0 12px; }
.eavd-connexion label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; }
.eavd-connexion .login-remember label { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.eavd-connexion input[type="submit"] {
	width: 100%;
	height: 38px;
	border: 0;
	border-radius: 6px;
	background: var(--bleu);
	color: var(--blanc);
	font-weight: 600;
	cursor: pointer;
}
.eavd-connexion input[type="submit"]:hover { background: var(--bleu-fonce); }
.eavd-aide-connexion { margin-top: 18px; padding: 10px 12px; border-radius: 8px; background: #FFF4CC; color: #5C4A00; font-size: 13px; }

/* ------------------------------------------------------------------
 * Téléphone et petite tablette : une colonne à la fois
 * ---------------------------------------------------------------- */

/* Fenêtre moyenne : la barre bleue garde tout sur une ligne */
@media (max-width: 1150px) {
	.eavd-marque span { display: none; }
	.eavd-vues { margin-left: 8px; }
	.eavd-vues button { padding: 5px 9px; }
}
@media (max-width: 1020px) {
	#eavd-nouveau .eavd-large, .eavd-compte > summary .eavd-large { display: none; }
}

@media (max-width: 900px) {
	.eavd-corps { grid-template-columns: minmax(0, 1fr); }
	.eavd-colonne-fiche { display: none; }
	body.eavd-mode-fiche .eavd-colonne-liste { display: none; }
	body.eavd-mode-fiche .eavd-colonne-fiche { display: block; }
	.eavd-fiche { padding: 0 16px 24px; }
	.eavd-suivi { padding: 0 16px 32px; }
	.eavd-retour { display: inline-flex; }
	.eavd-actions .eavd-bouton span { display: none; }
	.eavd-large { display: none; }
	.eavd-marque span { display: none; }
	.eavd-barre { flex-wrap: wrap; gap: 6px 8px; height: auto; padding: 8px 12px; }
	.eavd-vues { order: 3; width: 100%; margin-left: 0; }
	.eavd-replier { display: none; } /* sur téléphone, la liste et le dossier s'affichent déjà l'un après l'autre */
	.eavd-vues button { flex: 1 1 auto; padding: 5px 4px; font-size: 12.5px; }
	.eavd-nom { font-size: 19px; }
	.eavd-proprietes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.p-2 { grid-column: span 1; }
	.p-3, .p-4 { grid-column: span 2; }
	.eavd-note-pied .eavd-aide { display: none; }
	.eavd-note-pied { justify-content: flex-end; }
}