.to-tickets { font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.to-tickets h2 { font-family: Georgia, serif; font-size: 18px; margin: 0 0 16px; }
.to-tickets h3 { font-family: Georgia, serif; font-size: 15px; }

.to-tickets-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.to-tickets-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #fff;
	border: 1px solid #e7e5e4;
	border-radius: 10px;
	padding: 12px 14px;
	text-decoration: none;
	color: #1c1917;
	font-size: 14px;
}
.to-tickets-item:hover { border-color: #065f46; }
.to-tickets-status {
	font-size: 11px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 999px;
	background: #f5f5f4;
	color: #57534e;
}
.to-tickets-status--open { background: #fffbeb; color: #92400e; }
.to-tickets-status--answered { background: #ecfdf5; color: #065f46; }
.to-tickets-status--archived { background: #f5f5f4; color: #a8a29e; }

/* (14/09, demande de Vincent) — mise en évidence du dernier message sur
   la liste "Mes tickets" hôte : rouge pulsé tant qu'un message admin n'a
   pas été lu (nécessite une action de l'hôte), vert une fois lu. Fond +
   bordure directement sur .to-tickets-item (pas un badge séparé) pour que
   la ligne entière attire l'œil, comme demandé. */
.to-tickets-item--unread {
	background: #fef2f2;
	border-color: #ef4444;
	animation: to-tickets-pulse-red 1.8s ease-in-out infinite;
}
@keyframes to-tickets-pulse-red {
	0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.35); }
	50% { box-shadow: 0 0 0 7px rgba(239,68,68,0); }
}
.to-tickets-item--read-admin { background: #ecfdf5; border-color: #34d399; }
@media (prefers-reduced-motion: reduce) {
	.to-tickets-item--unread { animation: none; }
}

.to-tickets-back { display: inline-block; margin-bottom: 12px; font-size: 13px; color: #57534e; text-decoration: none; }
.to-tickets-back:hover { color: #065f46; }

.to-tickets-thread { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.to-tickets-bubble { background: #fff; border: 1px solid #e7e5e4; border-radius: 12px; padding: 10px 14px; }
.to-tickets-bubble.is-admin { background: #ecfdf5; border-color: #a7f3d0; }
.to-tickets-bubble p { margin: 0 0 10px; font-size: 14px; }
.to-tickets-bubble p:last-child { margin-bottom: 0; }
.to-tickets-bubble time { display: block; margin-top: 4px; font-size: 11px; color: #a8a29e; }
.to-tickets-admin-tag {
	display: inline-block;
	margin-bottom: 4px;
	font-size: 11px;
	font-weight: 600;
	color: #92400e;
	background: #fffbeb;
	padding: 2px 8px;
	border-radius: 999px;
}
.to-tickets-archived-note { font-size: 13px; color: #78716c; }

.to-tickets-form { display: flex; flex-direction: column; gap: 8px; }
.to-tickets-form label { font-size: 12px; color: #57534e; }
.to-tickets-form input, .to-tickets-form textarea {
	width: 100%;
	margin-top: 4px;
	padding: 8px 10px;
	border: 1px solid #e7e5e4;
	border-radius: 8px;
	font-size: 14px;
	box-sizing: border-box;
	font-family: inherit;
}

.to-tickets-feedback { padding: 8px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 12px; }
.to-tickets-feedback--success { background: #ecfdf5; color: #065f46; }
.to-tickets-feedback--error { background: #fef2f2; color: #991b1b; }

.to-tickets .to-btn {
	display: inline-block;
	text-align: center;
	border-radius: 999px;
	padding: 9px 18px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	align-self: flex-start;
}
.to-tickets .to-btn--primary { background: #065f46; color: #fff; }
.to-tickets .to-btn--primary:hover { background: #064e3b; color: #fff; }

.to-tickets-bubble.is-read { box-shadow: inset 0 0 0 1px #a7f3d0; }

/* Bandeau d'introduction (dégradé vert), en tête de la page Support */
.to-tickets-intro-banner {
	display: flex;
	align-items: center;
	gap: 16px;
	background: linear-gradient(135deg,#0a7355 0%,#065f46 55%,#043c2c 100%);
	border-radius: 16px;
	padding: 20px 24px;
	margin-bottom: 20px;
	color: #fff;
}
.to-tickets-intro-banner svg { flex: 0 0 auto; color: #6ee7b7; }
.to-tickets-intro-banner strong { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 16px; margin-bottom: 4px; }
.to-tickets-intro-banner p { margin: 0; font-size: 13.5px; color: #d1fae5; line-height: 1.5; max-width: 640px; }

/* Bandeau équipe support */
.to-tickets-team {
	background: #fff;
	border: 1px solid #e7e5e4;
	border-radius: 16px;
	padding: 24px 28px;
	margin-bottom: 24px;
	box-shadow: 0 1px 2px rgba(28,25,23,0.03);
}
.to-tickets-team h2 { font-family: 'Fraunces', Georgia, serif; font-size: 19px; color: #064e3b; margin: 0 0 8px; }
.to-tickets-team-intro { font-size: 13.5px; color: #57534e; line-height: 1.6; margin: 0 0 20px; max-width: 640px; }
.to-tickets-team-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.to-tickets-team-group {
	background: #fafaf9;
	border: 1px solid #f0efe9;
	border-radius: 12px;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	box-shadow: 0 10px 24px -14px rgba(28,25,23,0.18);
}
/* (22/08, 2ᵉ passage, demande de Vincent) — les 2 blocs paraissaient
   fades comparés au bloc Lisa (image en fond) : fond dégradé coloré
   distinctif par département, contenu centré (avatar au-dessus du nom
   plutôt qu'aligné à gauche) pour un rendu plus travaillé. */
.to-tickets-team-group--commercial {
	background: linear-gradient(160deg, #fff7e6 0%, #ffedc2 100%);
	border-color: #f3d896;
}
.to-tickets-team-group--technique {
	background: linear-gradient(160deg, #eef1ff 0%, #dbe0fb 100%);
	border-color: #c7cdf5;
}
.to-tickets-team-group-label {
	display: inline-block;
	align-self: flex-start;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 999px;
	margin-bottom: 2px;
}
.to-tickets-team-group-label--commercial { background: #fff; color: #92400e; }
.to-tickets-team-group-label--technique { background: #fff; color: #3730a3; }
.to-tickets-team-group-label--annuaire { background: rgba(255,255,255,0.9); color: #7a4a06; align-self: flex-start; }

.to-tickets-team-member { display: flex; align-items: center; gap: 12px; }
.to-tickets-team-avatar {
	flex: 0 0 auto;
	width: 60px;
	height: 60px;
	border-radius: 999px;
	overflow: hidden;
	box-shadow: 0 0 0 3px #fff, 0 0 0 4px #d6d3d1, 0 4px 10px -4px rgba(28,25,23,0.25);
}
.to-tickets-team-member.is-supervisor .to-tickets-team-avatar {
	width: 72px;
	height: 72px;
	box-shadow: 0 0 0 3px #fff, 0 0 0 4px #6ee7b7, 0 6px 14px -4px rgba(6,95,70,0.35);
}
.to-tickets-team-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.to-tickets-team-info { display: flex; flex-direction: column; gap: 1px; }
.to-tickets-team-info strong { font-family: 'Fraunces', Georgia, serif; font-size: 15px; color: #1c1917; }
.to-tickets-team-member.is-supervisor .to-tickets-team-info strong::after {
	content: "Superviseur";
	display: inline-block;
	margin-left: 8px;
	font-family: -apple-system, sans-serif;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #065f46;
	background: #ecfdf5;
	padding: 2px 8px;
	border-radius: 999px;
	vertical-align: middle;
}
.to-tickets-team-title { font-size: 12.5px; color: #78716c; }

@media (max-width: 900px) {
	.to-tickets-team-groups { grid-template-columns: 1fr; }
}

/* Bloc "Gestionnaire annuaire" (Lisa) — 22/08, 2ᵉ passage, demande de
   Vincent — désormais un vrai 3ᵉ item de la même grille que
   commercial/technique (pas un bloc séparé en dessous), avec le même
   arrondi et le même padding de base que .to-tickets-team-group, pour
   un rendu fluide entre les 3 colonnes. Seule différence : l'image
   plein format en fond + le texte en overlay, plutôt que la structure
   avatar+nom+titre répétée par membre. */
.to-tickets-lisa-block {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	min-height: 240px;
	display: flex;
	flex-direction: column;
	padding: 16px 18px;
	border: 1px solid #f0efe9;
}
.to-tickets-lisa-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 18px;
	/* (22/08, demande de Vincent) — overlay allégé pour laisser mieux voir
	   le visage de Lisa sur la partie haute de l'image, tout en gardant
	   assez de contraste en bas pour la lisibilité du texte. */
	background: linear-gradient(0deg, rgba(15,20,18,0.78) 0%, rgba(15,20,18,0.32) 45%, rgba(15,20,18,0) 75%);
	color: #fff;
}
.to-tickets-lisa-name { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 18px; }
.to-tickets-lisa-title { display: block; font-size: 12px; font-weight: 600; color: #f7c65b; margin: 2px 0 8px; }
.to-tickets-lisa-desc { font-size: 12.5px; line-height: 1.55; color: #f5f5f4; margin: 0; }

/* Badge département */
.to-tickets-dept-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 999px;
	margin-left: 8px;
	vertical-align: middle;
}
.to-tickets-dept-badge--commercial { background: #fffbeb; color: #92400e; }
.to-tickets-dept-badge--technique { background: #eef2ff; color: #3730a3; }

/* Formulaire nouveau ticket : département + anti-spam */
.to-tickets-form select { width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid #e7e5e4; border-radius: 8px; font-size: 14px; box-sizing: border-box; font-family: inherit; }
.to-tickets-antispam { display: flex; flex-direction: column; gap: 4px; max-width: 260px; }
.to-tickets-antispam input[type="text"] { max-width: 100px; }

.to-tickets-new-title { font-family: 'Fraunces', Georgia, serif; font-size: 16px; margin: 24px 0 10px; }
.to-tickets-archive-title { font-family: 'Fraunces', Georgia, serif; font-size: 16px; margin: 0 0 10px; }

/* Archivage année / mois */
.to-tickets-archive-year, .to-tickets-archive-year--admin {
	border: 1px solid #e7e5e4;
	border-radius: 12px;
	padding: 4px 14px;
	margin-bottom: 10px;
	background: #fff;
}
.to-tickets-archive-year summary, .to-tickets-archive-year--admin summary {
	cursor: pointer;
	padding: 10px 0;
	font-family: 'Fraunces', Georgia, serif;
	font-size: 15px;
	color: #064e3b;
	font-weight: 600;
	list-style: none;
}
.to-tickets-archive-year summary::-webkit-details-marker,
.to-tickets-archive-year--admin summary::-webkit-details-marker { display: none; }
.to-tickets-archive-year summary::before { content: "▸"; display: inline-block; margin-right: 8px; transition: transform .15s; }
.to-tickets-archive-year[open] summary::before { transform: rotate(90deg); }
.to-tickets-archive-year--admin summary::before { content: "▸"; display: inline-block; margin-right: 8px; transition: transform .15s; }
.to-tickets-archive-year--admin[open] summary::before { transform: rotate(90deg); }

.to-tickets-archive-month { margin: 0 0 14px; }
.to-tickets-archive-month-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #a8a29e;
	margin: 0 0 6px;
}
.to-tickets-item-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.to-tickets-item-row .to-tickets-item { flex: 1 1 auto; margin-bottom: 0; }
.to-tickets-item-main { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }

.to-tickets-delete-form { flex: 0 0 auto; }
.to-tickets-delete-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	border: 1px solid #e7e5e4;
	background: #fff;
	color: #b91c1c;
	cursor: pointer;
}
.to-tickets-delete-btn:hover { background: #fef2f2; border-color: #fca5a5; }
.to-tickets-delete-btn--text {
	width: auto;
	height: auto;
	padding: 6px 12px;
	font-size: 12.5px;
	font-weight: 600;
}

.to-tickets-thread-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.to-tickets-thread-header form { margin: 0; }

.to-tickets-reply-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin: 28px 0 6px;
}
.to-tickets-reply-header h2 { margin: 0; }
.to-tickets-reply-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.to-tickets-reply-actions form { margin: 0; }
.to-tickets-form .wp-editor-wrap,
.to-tickets-form .wp-editor-container { margin-top: 0 !important; }
.to-tickets-close-btn {
	display: inline-block;
	padding: 7px 16px;
	border-radius: 999px;
	border: 1px solid #a7f3d0;
	background: #ecfdf5;
	color: #065f46;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}
.to-tickets-close-btn:hover { background: #d1fae5; border-color: #6ee7b7; }

.to-admin-list-item.is-current { border-color: #065f46; box-shadow: 0 0 0 1px #065f46; }
/* (21/08) .is-read-ack est déjà stylé globalement dans to-core.css
   (fond vert clair) — .has-new-reply est la nouvelle mise en avant
   demandée par Vincent : nouvelle réponse du demandeur, pas encore
   ouverte par l'admin. Bordure/fond légèrement différents de
   is-read-ack pour rester visuellement distincts (l'un ferme un
   échange, l'autre en signale un nouveau à traiter). */
.to-admin-list-item.has-new-reply { background: #ecfdf5; border-color: #a7f3d0; border-left: 3px solid #059669; }
.to-admin-list-item.has-new-reply.is-current { border-color: #065f46; }

.to-tickets-msg-author { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.to-tickets-msg-author-avatar {
	width: 52px;
	height: 52px;
	border-radius: 999px;
	object-fit: cover;
	flex: 0 0 auto;
	box-shadow: 0 0 0 3px #fff, 0 0 0 4px #a7f3d0;
}
.to-tickets-msg-author-info { display: flex; flex-direction: column; gap: 1px; }
.to-tickets-msg-author-info strong { font-family: 'Fraunces', Georgia, serif; font-size: 15px; color: #1c1917; }
.to-tickets-msg-author-title { font-size: 12px; color: #78716c; }

/* Pièce jointe (image ou fichier) — remplace l'ancien lien texte avec
   l'émoji brut 📎, qui pouvait s'afficher démesurément grand selon la
   police système/le navigateur. */
.to-tickets-attachment-photo { margin: 8px 0; }
.to-tickets-attachment-photo img {
	display: block;
	max-width: 220px;
	max-height: 220px;
	width: auto;
	height: auto;
	border-radius: 10px;
	border: 1px solid #e7e5e4;
	cursor: zoom-in;
}
.to-tickets-attachment-file {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 8px 0;
	padding: 8px 14px;
	background: #f5f5f4;
	border: 1px solid #e7e5e4;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: #44403c;
	text-decoration: none;
	max-width: 100%;
}
.to-tickets-attachment-file:hover { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.to-tickets-attachment-file-icon { flex: 0 0 auto; display: flex; }
.to-tickets-attachment-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Page de recrutement (22/08, demande de Vincent) — design premium,
   cohérent avec le reste du site (Fraunces pour les titres, vert sapin,
   doré). */
.to-recruit-hero {
	background: linear-gradient(160deg, #0f2847 0%, #1e3a5f 55%, #16324f 100%);
	padding: 64px 24px;
	text-align: center;
}
.to-recruit-hero-inner { max-width: 780px; margin: 0 auto; }
.to-recruit-eyebrow { color: #f7c65b; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 10px; }
.to-recruit-hero h1 { font-family: 'Fraunces', Georgia, serif; color: #fff; font-size: 30px; margin: 0 0 10px; line-height: 1.25; }
.to-recruit-hero-subtitle { color: #e2e8f4; font-size: 15px; margin: 0; }

.to-recruit-content { max-width: 760px; }
.to-recruit-content h2 { font-family: 'Fraunces', Georgia, serif; color: #1e3a5f; font-size: 22px; margin: 36px 0 12px; }
.to-recruit-content h3 { font-family: 'Fraunces', Georgia, serif; color: #065f46; font-size: 16px; margin: 22px 0 8px; }
.to-recruit-content p, .to-recruit-content li { font-size: 14.5px; line-height: 1.7; color: #292524; }
.to-recruit-content ul { padding-left: 20px; margin: 0 0 8px; }

.to-recruit-meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: #f6f4e6;
	border: 1px solid #eadfb8;
	border-radius: 12px;
	padding: 18px 20px;
	margin-bottom: 8px;
	font-size: 13.5px;
	color: #57534e;
}

.to-recruit-feedback { padding: 14px 18px; border-radius: 10px; font-size: 14px; margin-bottom: 24px; }
.to-recruit-feedback--success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.to-recruit-feedback--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

.to-recruit-apply-card {
	margin-top: 40px;
	background: linear-gradient(160deg, #f9f7f1 0%, #f3efe2 100%);
	border: 1px solid #e9e4d6;
	border-radius: 16px;
	padding: 28px 26px;
}
.to-recruit-apply-card h2 { margin-top: 0; }
.to-recruit-form { display: flex; flex-direction: column; gap: 16px; }
.to-recruit-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) {
	.to-recruit-form-row { grid-template-columns: 1fr; }
}
.to-recruit-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: #44403c; }
.to-recruit-form input[type="text"],
.to-recruit-form input[type="email"],
.to-recruit-form input[type="tel"],
.to-recruit-form input[type="number"],
.to-recruit-form input[type="file"],
.to-recruit-form textarea {
	padding: 10px 12px;
	border: 1px solid #d6d3d1;
	border-radius: 8px;
	font-size: 14px;
	font-family: inherit;
	background: #fff;
}
.to-recruit-captcha { max-width: 320px; }

/* "Poste vacant" — page support hôte (22/08, demande de Vincent) — carte
   discrète sous les membres actuels d'un département, avatar grisé sans
   photo pour signaler un poste ouvert plutôt qu'une personne en place. */
.to-tickets-team-vacancy { display: flex; align-items: center; gap: 12px; padding-top: 10px; border-top: 1px dashed rgba(0,0,0,0.12); margin-top: 4px; }
.to-tickets-team-vacancy-avatar {
	flex: 0 0 auto;
	width: 60px;
	height: 60px;
	border-radius: 999px;
	background: #d6d3d1;
	box-shadow: 0 0 0 3px #fff, 0 0 0 4px #d6d3d1, 0 4px 10px -4px rgba(28,25,23,0.25);
}
.to-tickets-team-vacancy-info { display: flex; flex-direction: column; gap: 2px; }
.to-tickets-team-vacancy-title { font-family: 'Fraunces', Georgia, serif; font-size: 14px; color: #57534e; }
.to-tickets-team-vacancy-status { font-size: 11.5px; font-weight: 700; color: #065f46; text-transform: uppercase; letter-spacing: 0.03em; }
.to-tickets-team-vacancy-apply { font-size: 12.5px; color: #047857; text-decoration: underline; }