/**
 * Skin "Tir Club Fréjusien" pour Roundcube 1.6 - basé sur Larry
 *
 * Identité : carbone noir + jaune #fee303 du logo + touche tricolore.
 * Ce fichier est chargé APRÈS les CSS de Larry : il ne fait que les surcharger.
 *
 * Licence : Creative Commons Attribution-ShareAlike 3.0 (comme Larry)
 */

/* ==========================================================================
   0. Police et couleurs
   ========================================================================== */

@font-face {
	font-family: "Rajdhani";
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	src: url("fonts/rajdhani-500.woff2") format("woff2");
}
@font-face {
	font-family: "Rajdhani";
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	src: url("fonts/rajdhani-600.woff2") format("woff2");
}
@font-face {
	font-family: "Rajdhani";
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url("fonts/rajdhani-700.woff2") format("woff2");
}

:root {
	--tc-yellow: #fee303;
	--tc-yellow-hover: #ffe93d;
	--tc-yellow-pale: #fff7c2;
	--tc-yellow-row: #fff3a0;
	--tc-carbon: #1f1f1f;
	--tc-panel: #262626;
	--tc-panel-2: #2e2e2e;
	--tc-line: #383838;
	--tc-text-light: #ececec;
	--tc-text-muted: #9a9a9a;
	--tc-blue: #0038a8;
	--tc-red: #dc141e;
	--tc-font: "Rajdhani", "Arial Narrow", Arial, sans-serif;
	/* noir -> jaune du logo (calculé pour #fee303) */
	--tc-filter-yellow: brightness(0) saturate(100%) invert(77%) sepia(96%) saturate(1540%) hue-rotate(358deg) brightness(105%) contrast(99%);
	--tc-filter-white: brightness(0) invert(1);
	--tc-filter-light: brightness(0) invert(.86);
	--tc-filter-black: brightness(0);
}


/* ==========================================================================
   1. Fond général (carbone)
   ========================================================================== */

body {
	background-color: #1b1b1b;
	background-image:
		repeating-linear-gradient(45deg, rgba(255,255,255,.028) 0 2px, transparent 2px 4px),
		repeating-linear-gradient(-45deg, rgba(0,0,0,.35) 0 2px, transparent 2px 4px);
}

/* empêche Larry d'élargir la page quand la barre d'outils est large */
body.minwidth {
	min-width: 1024px !important;
}


/* ==========================================================================
   2. En-tête : ligne du haut, logo, onglets
   ========================================================================== */

#topline {
	background: rgba(0,0,0,.35);
	border-bottom: 0;
	color: var(--tc-text-muted);
	/* filet tricolore discret sous la ligne du haut */
	box-shadow: inset 0 -2px 0 0 transparent;
	position: relative;
}
#topline:after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--tc-blue) 0 33.3%, #fff 33.3% 66.6%, var(--tc-red) 66.6% 100%);
	opacity: .55;
}
#topline .topleft a,
#topline a {
	color: var(--tc-text-muted);
}
#topline a:hover {
	color: var(--tc-yellow);
	text-decoration: none;
}
#topline span.username {
	color: var(--tc-text-light);
}
#topline a.button-logout {
	color: var(--tc-text-light);
}

#topnav {
	background: transparent;
}

#toplogo {
	height: 42px;
	width: auto;
	padding-top: 2px;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
}

/* onglets Courriel / Contacts / Paramètres */
#taskbar a {
	height: 32px;
	margin-top: 6px;
	padding: 6px 12px 0 8px;
	border-radius: 8px;
	transition: background-color .15s;
}
#taskbar a span.button-inner {
	font-family: var(--tc-font);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .3px;
	color: #fff;
	filter: var(--tc-filter-white);
}
#taskbar a:hover {
	background-color: rgba(255,255,255,.06);
}
#taskbar a:hover span.button-inner {
	filter: var(--tc-filter-yellow);
}
#taskbar a.button-selected,
#taskbar a.button-selected:hover {
	background-color: var(--tc-yellow);
	box-shadow: 0 2px 8px rgba(254,227,3,.25);
}
#taskbar a.button-selected span.button-inner {
	filter: var(--tc-filter-black);
}
#taskbar a:focus {
	background-color: rgba(254,227,3,.25);
}


/* ==========================================================================
   3. Barres d'outils (toutes les pages)
   ========================================================================== */

/* bandeau noir pleine largeur, dessiné derrière la barre
   (pseudo-élément : n'influence pas le calcul de largeur de Larry) */
.toolbar {
	z-index: 1;
}
#mainscreen > .toolbar:before,
#mainscreen > #messagetoolbar:before,
#mainscreen > #addressbooktoolbar:before,
#calendarsidebar > #calendartoolbar:before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -2px;
	left: 0;
	width: calc(100vw - 20px);
	height: 48px;   /* le liseré jaune passe sous les libellés et la recherche */
	background: linear-gradient(#303030, #1d1d1d);
	border-radius: 8px;
	border-bottom: 3px solid var(--tc-yellow);
	box-shadow: 0 3px 10px rgba(0,0,0,.55);
	box-sizing: border-box;
}

.toolbar a.button {
	font-family: var(--tc-font);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .2px;
	height: 14px;
	line-height: 14px;
	padding: 27px 4px 0 4px;
	color: #fff;
	filter: var(--tc-filter-white);
	border-radius: 6px;
	transition: filter .12s;
}
.toolbar a.button:not(.disabled):hover,
.toolbar a.button.pressed,
.toolbar a.button.selected {
	filter: var(--tc-filter-yellow);
	background-color: transparent;
}
.toolbar a.button:focus {
	background-color: transparent;
	filter: var(--tc-filter-yellow);
	outline: none;
}
.toolbar a.button.disabled {
	opacity: .32;
}

/* flèches des boutons à menu (Répondre à tous, Transférer) */
.toolbar .dropbutton .dropbuttontip {
	filter: var(--tc-filter-white);
	opacity: .7;
}
.toolbar .dropbutton .dropbuttontip:hover {
	filter: var(--tc-filter-yellow);
	opacity: 1;
}

/* séparateur vertical fin entre groupes de boutons */
.toolbar .spacer {
	width: 13px;
	position: relative;
}
.toolbar .spacer:after {
	content: "";
	position: absolute;
	left: 6px;
	top: 8px;
	height: 26px;
	border-left: 1px solid rgba(255,255,255,.14);
}

/* nouveaux boutons (actions du menu "Plus") : icônes dessinées en CSS */
.toolbar a.button.tc-copy,
.toolbar a.button.tc-download,
.toolbar a.button.tc-editnew,
.toolbar a.button.tc-source,
.toolbar a.button.tc-open {
	position: relative;
	background-image: none;
	max-width: 84px;
}
.toolbar a.button.tc-copy:before,
.toolbar a.button.tc-download:before,
.toolbar a.button.tc-editnew:before,
.toolbar a.button.tc-source:before,
.toolbar a.button.tc-open:before {
	position: absolute;
	top: 3px;
	left: 0;
	right: 0;
	text-align: center;
	font-family: "Segoe UI Symbol", "DejaVu Sans", Arial, sans-serif;
	font-size: 19px;
	line-height: 22px;
	font-weight: normal;
}
.toolbar a.button.tc-copy:before     { content: "\2398"; }
.toolbar a.button.tc-download:before { content: "\2913"; }
.toolbar a.button.tc-editnew:before  { content: "\270E"; }
.toolbar a.button.tc-source:before   { content: "</>"; font-family: Consolas, monospace; font-size: 15px; font-weight: bold; }
.toolbar a.button.tc-open:before     { content: "\29C9"; }


/* ==========================================================================
   4. Recherche et filtres (dans le bandeau)
   ========================================================================== */

#quicksearchbar input,
.searchbox input {
	height: 20px;
	background: #fff;
	border: 1px solid #444;
	border-radius: 15px;
	font-weight: 600;
	color: #222;
	box-shadow: inset 0 1px 3px rgba(0,0,0,.25);
}
#quicksearchbar input:focus,
.searchbox input:focus {
	border-color: var(--tc-yellow);
	box-shadow: 0 0 0 2px rgba(254,227,3,.55);
	outline: none;
}
/* la recherche passe au-dessus du bandeau noir */
#messagesearchtools,
#quicksearchbar,
#searchfilter {
	z-index: 2;
}
#quicksearchbar {
	top: 5px;
	right: 8px;
}
#messagesearchtools #searchfilter,
#messagesearchtools select,
#searchfilter {
	border-radius: 6px;
}
#messagesearchtools {
	top: 3px;
}


/* ==========================================================================
   5. Panneaux (cadres arrondis avec ombre)
   ========================================================================== */

.uibox {
	border: 0;
	border-radius: 8px;
	box-shadow: 0 3px 12px rgba(0,0,0,.55);
}

/* titres des panneaux */
.boxtitle,
.uibox .listing thead th,
.uibox .listing thead td {
	font-family: var(--tc-font);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .4px;
	color: #1d1d1d;
	text-shadow: none;
	background: #f3f3f3;
	border-bottom: 2px solid var(--tc-yellow);
}

/* pied de panneau (boutons + / roue dentée) */
.boxfooter {
	border-top: 1px solid #e3e3e3;
}
.boxfooter .listbutton {
	background-color: #f0f0f0;
	border-right-color: #fff;
}
.boxfooter .listbutton:hover {
	background-color: var(--tc-yellow-pale);
}


/* ==========================================================================
   6. Colonnes de navigation sombres
      (dossiers, carnets d'adresses, sections des paramètres)
   ========================================================================== */

#mailboxcontainer,
#directorylistbox,
#compose-contacts,
#settings-sections {
	background: var(--tc-panel);
}
#mailboxcontainer .boxtitle,
#directorylistbox .boxtitle,
#compose-contacts .boxtitle,
#settings-sections .boxtitle {
	background: var(--tc-carbon);
	color: var(--tc-yellow);
	border-bottom: 1px solid var(--tc-line);
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 1px;
}

#mailboxcontainer .listing li,
#directorylistbox .listing li,
#compose-contacts .listing li,
#settings-sections .listing li {
	border-bottom: 1px solid var(--tc-line);
	background: transparent;
}

#mailboxcontainer .listing li a,
#directorylistbox .listing li a,
#compose-contacts .listing li a,
#settings-sections .listing li a {
	position: relative;
	font-family: var(--tc-font);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--tc-text-light);
	text-shadow: none;
	/* l'icône d'origine (dans le padding) est masquée... */
	background-clip: content-box;
	background-color: transparent;
	transition: background-color .12s, color .12s;
}
/* ...et redessinée dans un pseudo-élément qu'on peut colorer à part */
#mailboxcontainer .listing li a:before,
#directorylistbox .listing li a:before,
#compose-contacts .listing li a:before,
#settings-sections .listing li a:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 36px;
	background-image: inherit;
	background-position: inherit;
	background-repeat: no-repeat;
	filter: var(--tc-filter-light);
	pointer-events: none;
}
/* sous-dossiers : la zone d'icône est décalée */
#mailboxcontainer .listing li ul li a:before,
#directorylistbox .listing li ul li a:before ,
#compose-contacts .listing li ul li a:before {
	width: 62px;
}

#mailboxcontainer .listing li a:hover,
#directorylistbox .listing li a:hover,
#compose-contacts .listing li a:hover,
#settings-sections .listing li a:hover {
	background-color: rgba(255,255,255,.05);
	color: #fff;
}

#mailboxcontainer .listing li.selected > a,
#directorylistbox .listing li.selected > a,
#compose-contacts .listing li.selected > a,
#settings-sections .listing li.selected > a,
#mailboxcontainer .listing li > a:focus {
	background-color: #353535;
	color: var(--tc-yellow);
	font-weight: 700;
	box-shadow: inset 4px 0 0 var(--tc-yellow);
}
#mailboxcontainer .listing li.selected > a:before,
#directorylistbox .listing li.selected > a:before,
#compose-contacts .listing li.selected > a:before,
#settings-sections .listing li.selected > a:before {
	filter: var(--tc-filter-yellow);
}

/* dossiers avec messages non lus */
#mailboxcontainer .listing li.unread > a {
	color: #fff;
	font-weight: 700;
}
#mailboxlist li a span.unreadcount {
	top: 6px;
	padding: 1px 7px;
	background: var(--tc-yellow);
	color: #000;
	font-family: var(--tc-font);
	font-weight: 700;
	font-size: 12px;
	border-radius: 10px;
	box-shadow: none;
	text-shadow: none;
}

/* triangles d'ouverture des sous-dossiers */
ul.treelist li div.treetoggle {
	filter: var(--tc-filter-light);
}

/* pied de la colonne des dossiers (roue dentée + quota) */
#mailboxcontainer .boxfooter,
#directorylistbox .boxfooter ,
#compose-contacts .boxfooter {
	background: var(--tc-carbon);
	border-top: 1px solid var(--tc-line);
}
#mailboxcontainer .boxfooter .listbutton,
#directorylistbox .boxfooter .listbutton ,
#compose-contacts .boxfooter .listbutton {
	background-color: transparent;
	border-right: 1px solid var(--tc-line);
}
#mailboxcontainer .boxfooter .listbutton .inner,
#directorylistbox .boxfooter .listbutton .inner ,
#compose-contacts .boxfooter .listbutton .inner {
	filter: var(--tc-filter-light);
}
#mailboxcontainer .boxfooter .listbutton:hover .inner,
#directorylistbox .boxfooter .listbutton:hover .inner ,
#compose-contacts .boxfooter .listbutton:hover .inner {
	filter: var(--tc-filter-yellow);
}
#quotadisplay,
.boxfooter .countdisplay {
	color: var(--tc-text-muted);
	font-family: var(--tc-font);
	font-weight: 600;
	font-size: 13px;
}


/* ==========================================================================
   7. Listes (messages, contacts, dossiers, identités...)
   ========================================================================== */

.records-table tbody tr:hover td {
	background-color: #fafafa;
}

/* ligne sélectionnée : jaune pâle + liseré jaune à gauche */
.records-table tr.selected td,
.records-table.focus tr.selected td {
	color: #111 !important;
	background-color: var(--tc-yellow-row) !important;
}
.records-table tr.selected td:first-child {
	box-shadow: inset 4px 0 0 #e0c600;
}
.records-table tr.selected td a,
.records-table tr.selected td span {
	color: #111 !important;
}
.records-table.focus tr.focused td {
	border-bottom-color: #e0c600;
}

/* messages non lus : gras + petit marqueur jaune */
.messagelist tr.unread td.subject span.subject a,
.messagelist tr.unread td {
	font-weight: bold;
	color: #000;
}

/* messages signalés : rouge du drapeau tricolore */
.messagelist tr.flagged td,
.messagelist tr.flagged td a {
	color: var(--tc-red);
}

/* en-tête et pied de la liste des messages */
#messagelistheader,
#messagelistfooter {
	background: #f6f6f6;
}
.records-table thead th,
.records-table thead td {
	font-family: var(--tc-font);
	font-weight: 700;
	font-size: 13px;
	color: #555;
	background: #f1f1f1;
	border-left-color: #e2e2e2;
	border-bottom: 2px solid var(--tc-yellow);
}
.records-table thead th a,
.records-table thead td a,
.records-table thead th span,
.records-table thead td span {
	color: #555;
}
.messagelist thead tr th.sortedASC a,
.messagelist thead tr th.sortedDESC a {
	color: #111;
	text-decoration: none;
}
.records-table thead th a:focus,
.records-table thead td a:focus {
	color: #000;
	background-color: var(--tc-yellow-pale);
}

/* listes claires (paramètres, contacts...) : sélection en jaune */
.listing li.selected,
.listing li.selected > a {
	color: #111;
	background-color: var(--tc-yellow-row);
}


/* ==========================================================================
   8. Lecture d'un message
   ========================================================================== */

#messageheader,
#composeheaders {
	background: #fafafa;
	border-bottom: 1px solid #e6e6e6;
}
h2.subject,
#messageheader h3.subject,
#messageheader.previewheader h3.subject {
	font-family: var(--tc-font);
	font-size: 21px;
	font-weight: 700;
	color: #1a1a1a;
	letter-spacing: .2px;
}
#messageheader .headers-table td.header a,
#messageheader .headers-table td.header {
	color: #333;
}
#messagebody {
	background: #fff;
}
#remote-objects-message,
#message-objects .notice {
	border-radius: 6px;
}


/* ==========================================================================
   9. Boutons et formulaires
   ========================================================================== */

input.button,
button.button,
a.button.pushbutton,
.formbuttons .button {
	border-radius: 6px;
	font-family: var(--tc-font);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .3px;
}

/* bouton principal (Enregistrer, Envoyer, Connexion...) : jaune du club */
input.button.mainaction,
button.mainaction,
.button.mainaction {
	color: #111 !important;
	background: var(--tc-yellow);
	border: 1px solid #d8c000;
	text-shadow: none;
	box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
input.button.mainaction:hover,
input.button.mainaction:focus,
button.mainaction:hover,
.button.mainaction:hover {
	color: #000 !important;
	background: var(--tc-yellow-hover);
	border-color: #c9b200;
	box-shadow: 0 0 0 3px rgba(254,227,3,.35);
}
input.button.mainaction:active,
button.mainaction:active {
	background: #e8cf00;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
	border-color: #d8c000;
	box-shadow: 0 0 0 2px rgba(254,227,3,.45);
	outline: none;
}

/* onglets dans les formulaires (préférences, contact) */
.tabsbar .tablink.selected,
.tabsbar .tablink.selected a {
	color: #111;
	border-bottom-color: var(--tc-yellow);
}
fieldset.tab legend,
.propform fieldset legend {
	font-family: var(--tc-font);
	font-weight: 700;
	font-size: 15px;
	color: #222;
}


/* ==========================================================================
   10. Menus déroulants
   ========================================================================== */

.popupmenu,
.popupmenu.dropdown {
	background: #232323;
	border: 1px solid #3a3a3a;
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(0,0,0,.6);
	overflow: hidden;
}
ul.toolbarmenu li,
.popupmenu ul li {
	border-top-color: #333;
}
ul.toolbarmenu li a,
.popupmenu ul li a {
	color: #777;
}
ul.toolbarmenu li a.active,
.popupmenu ul li a.active {
	color: #f0f0f0;
}
ul.toolbarmenu li a.active:hover,
ul.toolbarmenu li a.active:focus,
.popupmenu ul li a.active:hover {
	color: #000;
	background-color: var(--tc-yellow);
}
ul.toolbarmenu.iconized li a.active:hover span.icon,
ul.toolbarmenu.iconized li a.active:focus span.icon {
	filter: var(--tc-filter-black);
}


/* ==========================================================================
   11. Page de connexion
   ========================================================================== */

#login-form {
	width: 520px;
	margin-top: 9vh;
}
#login-form .box-inner {
	width: 400px;
	margin: 0 auto;
	padding: 28px 30px 26px;
	background: linear-gradient(#2c2c2c, #1c1c1c);
	border-radius: 14px;
	border-top: 5px solid var(--tc-yellow);
	box-shadow: 0 10px 40px rgba(0,0,0,.75);
	text-align: center;
}
#login-form #logo {
	display: block;
	width: 300px;
	height: auto;
	margin: 0 auto 22px;
	border-radius: 10px;
	box-shadow: 0 4px 14px rgba(0,0,0,.6);
}
#login-form td.title {
	font-family: var(--tc-font);
	font-weight: 600;
	font-size: 15px;
	color: #d0d0d0;
}
#login-form input[type="text"],
#login-form input[type="email"],
#login-form input[type="password"] {
	height: 22px;
	padding: 5px 10px;
	border-radius: 8px;
	border: 1px solid #555;
	background: #f7f7f7;
	font-size: 13px;
}
#login-form p.formbuttons {
	margin-top: 1.6em;
}
#login-form .button.mainaction,
#login-form input.button.mainaction {
	background: var(--tc-yellow);
	border-color: #d8c000;
	width: 100%;
	height: 38px;
	font-size: 17px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	border-radius: 8px;
}
#login-form .box-bottom {
	width: 460px;
	margin: 0 auto;
}
#login-form #message div {
	border-radius: 8px;
}
#bottomline {
	color: #777;
	font-family: var(--tc-font);
	font-size: 13px;
}


/* ==========================================================================
   12. Divers
   ========================================================================== */

/* séparateurs redimensionnables : plus discrets */
.splitter-v,
.splitter-h {
	opacity: .5;
}

/* messages de notification (en bas à droite) */
#messagestack div {
	border-radius: 8px;
	font-family: var(--tc-font);
	font-size: 14px;
	font-weight: 600;
}
#messagestack div.confirmation {
	background-color: #1f1f1f;
	border-left: 5px solid var(--tc-yellow);
	color: #fff;
}

/* barres de défilement fines (Chrome, Edge, Firefox) */
* {
	scrollbar-width: thin;
	scrollbar-color: #b5b5b5 transparent;
}
#mailboxcontainer *,
#directorylistbox *,
#compose-contacts *,
#settings-sections * {
	scrollbar-color: #555 transparent;
}


/* ==========================================================================
   13. Listes du milieu (contacts, sections, identités, dossiers...) : blanc
   ========================================================================== */

.listbox {
	background: #fff;
}
.uibox .boxtitle {
	background: #f3f3f3;
	color: #1d1d1d;
}
.listbox .listing li {
	border-bottom-color: #ececec;
}
.listbox .listing li a,
#sections-table tbody td,
#sections-table .listitem span {
	color: #333;
}
.listbox .listing li a:hover,
#sections-table tbody tr:hover td {
	background-color: #fafafa;
}
.listbox .boxfooter {
	background: #f6f6f6;
	border-top-color: #e3e3e3;
}
.boxfooter .countdisplay {
	color: #888;
}

/* les pages Paramètres n'ont pas de barre d'outils : on remonte le contenu */
#mainscreen.offset {
	top: 88px;
}

/* carnet sélectionné : on garde l'icône "normale" (la variante sélectionnée
   de Larry est un carré plein qui devient un pavé jaune) */
#directorylistbox #directorylist li.addressbook.selected > a:before,
#compose-contacts #directorylist li.addressbook.selected > a:before {
	background-position: 6px -766px;
}

/* fonds bleus de Larry dans les listes -> blanc / gris très clair */
ul.listing li,
.listbox table.listing,
.listing tbody td,
.listbox .listitem,
.listbox .tablink {
	background-color: transparent;
	border-color: #ececec;
}
.listing tbody tr.selected td,
.listbox .tablink.selected > a {
	color: #111;
	background-color: var(--tc-yellow-row);
}
.listsearchbox {
	background: #f3f3f3;
	border-bottom: 1px solid #e3e3e3;
}
ul.listing li.droptarget,
#compose-attachments.droptarget.active,
#contactpic.droptarget.hover {
	background-color: var(--tc-yellow-pale);
}

/* colonne "Contacts" de la rédaction : sombre comme les autres colonnes */
#compose-contacts .listsearchbox,
#compose-contacts #directorylist {
	background: var(--tc-panel);
	border-color: var(--tc-line);
}
#compose-contacts .listsearchbox {
	padding-bottom: 4px;
}
#compose-contacts #contacts-table td,
#compose-contacts #contacts-table td span {
	color: var(--tc-text-light);
	background: var(--tc-panel);
	border-color: var(--tc-line);
}
#compose-contacts .boxtitle .pagenav a,
#compose-contacts .boxtitle .pagenavbuttons a,
#compose-contacts .boxfooter .listbutton .inner {
	filter: var(--tc-filter-light);
}
#compose-contacts .boxfooter .listbutton.disabled .inner {
	opacity: .35;
}

/* ligne "Destinataire / Cc / Cci" de la rédaction */
#composeheaders {
	background: #fafafa;
}
#compose-attachments {
	background: #f6f6f6;
}


/* ==========================================================================
   14. Agenda (plugin Calendar de Kolab)
   ========================================================================== */

/* la barre de l'agenda (vues, titre, navigation) passe au-dessus du bandeau */
.calendarmain #calendar .fc-toolbar.fc-header-toolbar {
	position: relative;
	z-index: 2;
}

/* titre de la période affichée */
.calendarmain #calendar .fc-header-toolbar .fc-center h2 {
	color: #fff;
	font-family: var(--tc-font);
	font-weight: 700;
	font-size: 21px;
	letter-spacing: .4px;
	text-shadow: none;
}

/* boutons Jour / Semaine / Mois / Ordre du jour */
.calendarmain #calendar .fc-left .fc-button {
	font-family: var(--tc-font);
	font-weight: 600;
	font-size: 12px;
	color: #fff;
	text-shadow: none;
	filter: var(--tc-filter-white);
	opacity: .75;
}
.calendarmain #calendar .fc-left .fc-button:hover,
.calendarmain #calendar .fc-left .fc-button.fc-state-active {
	color: #fff;
	font-weight: 700;
	filter: var(--tc-filter-yellow);
	opacity: 1;
	background-color: transparent;
}
.calendarmain #calendar .fc-left .fc-button:focus {
	background-color: transparent;
	text-shadow: none;
}

/* boutons précédent / suivant / aujourd'hui */
.calendarmain #calendar .fc-right .fc-button,
.calendarmain #calendar .fc-right .fc-button.fc-state-default {
	font-family: var(--tc-font);
	font-weight: 700;
	font-size: 13px;
	color: #fff;
	background: #3a3a3a;
	border: 1px solid #555;
	border-radius: 6px;
	margin: -2px 2px 0;
}
.calendarmain #calendar .fc-right .fc-button:hover {
	color: #000;
	background: var(--tc-yellow);
	border-color: #d8c000;
}
.calendarmain #calendar .fc-right .fc-button .fc-icon {
	color: inherit;
}
.calendarmain #calendar .fc-right .fc-button.fc-state-disabled {
	color: #888;
	background: #2c2c2c;
}

/* en-têtes des jours */
.calendarmain .fc-widget-header,
.calendarmain #calendar thead .fc-widget-header {
	background-color: #f1f1f1;
	color: #333;
	text-shadow: none;
	font-family: var(--tc-font);
	font-weight: 700;
	font-size: 14px;
}
.calendarmain .fc-widget-header .fc-agenda-divider-inner {
	background: #e2e2e2 !important;
}
.calendarmain #calendar .fc-head .fc-today,
.calendarmain #calendar th.fc-today {
	background-color: var(--tc-yellow);
	color: #000;
}
.calendarmain .fc-unthemed td.fc-day.fc-today,
.calendarmain .fc-unthemed td.fc-today {
	background-color: rgba(254,227,3,.13);
}
.calendarmain .fc-time,
.calendarmain .fc-axis {
	font-family: var(--tc-font);
	font-weight: 600;
	color: #555;
}

/* mini-calendrier */
#datepicker .ui-datepicker-header {
	background: var(--tc-carbon);
	border-bottom: 2px solid var(--tc-yellow);
	font-family: var(--tc-font);
	font-size: 14px;
}
#datepicker .ui-datepicker td a {
	border-radius: 4px;
}
#datepicker .ui-datepicker-activerange a {
	color: #111;
	background: var(--tc-yellow-row);
}
#datepicker td.ui-datepicker-activerange {
	border-color: #e0c600;
}
#datepicker .ui-datepicker-days-cell-over a.ui-state-default,
#datepicker .ui-datepicker td a:hover {
	color: #000;
	border-color: #e0c600;
	background: rgba(254,227,3,.55);
}
#datepicker .ui-datepicker-activerange a.ui-state-active,
#datepicker a.ui-state-active {
	color: #000;
	font-weight: bold;
	background: var(--tc-yellow);
}
#datepicker .ui-state-highlight,
#datepicker .ui-widget-content .ui-state-highlight {
	border-color: #e0c600;
	color: #000;
}

/* liste des agendas */
#calendars .treelist li.selected > div.calendar {
	background-color: var(--tc-yellow-row);
}
#calendars .treelist li a.calname {
	color: #222;
	font-family: var(--tc-font);
	font-weight: 600;
	font-size: 14px;
}

/* fenêtres de rendez-vous */
.ui-dialog .ui-dialog-titlebar {
	font-family: var(--tc-font);
	font-size: 17px;
	border-bottom: 2px solid var(--tc-yellow);
}
.eventdialog h1,
#event-title {
	font-family: var(--tc-font);
	font-weight: 700;
}

/* --- renforts : la CSS du plugin est chargée après celle du skin --- */

/* vue active : on garde l'icône "normale" (la variante active est un pavé plein) */
body.calendarmain #calendar .fc-left .fc-agendaDay-button.fc-state-active { background-position: center -120px !important; }
body.calendarmain #calendar .fc-left .fc-agendaWeek-button.fc-state-active { background-position: center -200px !important; }
body.calendarmain #calendar .fc-left .fc-month-button.fc-state-active { background-position: center -280px !important; }
body.calendarmain #calendar .fc-left .fc-list-button.fc-state-active { background-position: center -360px !important; }

body.calendarmain #datepicker .ui-datepicker-activerange a,
body.calendarmain #datepicker td.ui-datepicker-activerange a.ui-state-default {
	color: #111 !important;
	background: var(--tc-yellow-row) !important;
	border-color: #e0c600 !important;
}
body.calendarmain #datepicker a.ui-state-active,
body.calendarmain #datepicker .ui-datepicker-activerange a.ui-state-active,
body.calendarmain #datepicker .ui-datepicker-today a.ui-state-highlight {
	color: #000 !important;
	font-weight: bold;
	background: var(--tc-yellow) !important;
	border-color: #c9b200 !important;
}
body.calendarmain #datepicker .ui-datepicker td a:hover,
body.calendarmain #datepicker .ui-datepicker-days-cell-over a.ui-state-default {
	color: #000 !important;
	background: rgba(254,227,3,.55) !important;
}
body.calendarmain #calendars .treelist li.selected > div.calendar {
	background-color: var(--tc-yellow-row) !important;
}
body.calendarmain #calendars .treelist li.selected > div.calendar a.calname {
	color: #111 !important;
}
body.calendarmain #datepicker td.ui-datepicker-today a {
	color: #000 !important;
	font-weight: bold;
	background: var(--tc-yellow) !important;
	border-color: #c9b200 !important;
}


/* ==========================================================================
   15. Fenêtres (jQuery UI) et rendez-vous - lisibilité
   ========================================================================== */

/* boutons des fenêtres : blancs, texte foncé */
.ui-dialog .ui-dialog-buttonpane .ui-button,
.ui-dialog .ui-dialog-buttonpane button {
	font-family: var(--tc-font);
	font-weight: 700;
	font-size: 14px;
	color: #222 !important;
	background: #fff !important;
	border: 1px solid #b5b5b5 !important;
	border-radius: 6px;
	padding: 5px 14px;
	text-shadow: none;
	box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.ui-dialog .ui-dialog-buttonpane .ui-button:hover,
.ui-dialog .ui-dialog-buttonpane .ui-button.ui-state-hover,
.ui-dialog .ui-dialog-buttonpane .ui-button.ui-state-focus {
	color: #000 !important;
	background: var(--tc-yellow-pale) !important;
	border-color: #d8c000 !important;
}

/* bouton principal (Modifier, Enregistrer...) : jaune du club */
.ui-dialog .ui-dialog-buttonpane .ui-button.mainaction,
.ui-button.mainaction {
	color: #000 !important;
	background: var(--tc-yellow) !important;
	border-color: #c9b200 !important;
}
.ui-dialog .ui-dialog-buttonpane .ui-button.mainaction:hover,
.ui-button.mainaction.ui-state-hover,
.ui-button.mainaction.ui-state-focus,
.ui-button.mainaction.ui-state-active {
	color: #000 !important;
	background: var(--tc-yellow-hover) !important;
	box-shadow: 0 0 0 3px rgba(254,227,3,.35);
}

/* bouton "Supprimer" : rouge discret au survol */
.ui-dialog .ui-dialog-buttonpane .ui-button.delete:hover {
	color: #fff !important;
	background: var(--tc-red) !important;
	border-color: #b00f17 !important;
}

/* bandeau de titre des fenêtres */
.ui-dialog .ui-dialog-titlebar {
	color: #111;
}

/* rendez-vous : heure et titre lisibles sur la couleur de l'agenda */
.calendarmain .fc-event,
.calendarmain .fc-event .fc-content {
	text-shadow: 0 1px 1px rgba(0,0,0,.35);
}
.calendarmain .fc-event .fc-time,
.calendarmain .fc-event .fc-time span,
.calendarmain .fc-event .fc-title {
	color: inherit !important;
	opacity: 1 !important;
}
.calendarmain .fc-event .fc-time {
	font-family: var(--tc-font);
	font-size: 12.5px !important;
	font-weight: 700 !important;
}
.calendarmain .fc-event .fc-title {
	font-family: var(--tc-font);
	font-size: 14px;
	font-weight: 700;
}
.ui-dialog .ui-dialog-titlebar {
	border-bottom: 3px solid var(--tc-yellow) !important;
}


/* ==========================================================================
   16. Icônes des colonnes sombres : même forme, sélectionnées ou non
       (la variante "sélectionnée" de Larry est un pictogramme blanc sur une
        forme pleine, qui devient un pavé une fois colorée en jaune)
   ========================================================================== */
#mailboxcontainer #mailboxlist li.mailbox.selected > a,
#mailboxcontainer #mailboxlist li.mailbox > a:focus {
	background-position: 6px 3px;
}
#mailboxcontainer #mailboxlist li.mailbox.inbox.selected > a,
#mailboxcontainer #mailboxlist li.mailbox.inbox > a:focus {
	background-position: 6px -189px;
}
#mailboxcontainer #mailboxlist li.mailbox.drafts.selected > a,
#mailboxcontainer #mailboxlist li.mailbox.drafts > a:focus {
	background-position: 6px -238px;
}
#mailboxcontainer #mailboxlist li.mailbox.sent.selected > a,
#mailboxcontainer #mailboxlist li.mailbox.sent > a:focus {
	background-position: 6px -286px;
}
#mailboxcontainer #mailboxlist li.mailbox.junk.selected > a,
#mailboxcontainer #mailboxlist li.mailbox.junk > a:focus {
	background-position: 6px -334px;
}
#mailboxcontainer #mailboxlist li.mailbox.trash.selected > a,
#mailboxcontainer #mailboxlist li.mailbox.trash > a:focus {
	background-position: 6px -382px;
}
#mailboxcontainer #mailboxlist li.mailbox.trash.empty.selected > a,
#mailboxcontainer #mailboxlist li.mailbox.trash.empty > a:focus {
	background-position: 6px -1924px;
}
#mailboxcontainer #mailboxlist li.mailbox.archive.selected > a,
#mailboxcontainer #mailboxlist li.mailbox.archive > a:focus {
	background-position: 6px -1699px;
}
#mailboxcontainer #mailboxlist li.mailbox ul li.selected > a,
#mailboxcontainer #mailboxlist li.mailbox ul li > a:focus {
	background-position: 22px -93px;
}
#mailboxcontainer #mailboxlist li.mailbox ul li.drafts.selected > a,
#mailboxcontainer #mailboxlist li.mailbox ul li.drafts > a:focus {
	background-position: 23px -238px;
}
#mailboxcontainer #mailboxlist li.mailbox ul li.sent.selected > a,
#mailboxcontainer #mailboxlist li.mailbox ul li.sent > a:focus {
	background-position: 23px -286px;
}
#mailboxcontainer #mailboxlist li.mailbox ul li.junk.selected > a,
#mailboxcontainer #mailboxlist li.mailbox ul li.junk > a:focus {
	background-position: 23px -334px;
}
#mailboxcontainer #mailboxlist li.mailbox ul li.trash.selected > a,
#mailboxcontainer #mailboxlist li.mailbox ul li.trash > a:focus {
	background-position: 23px -382px;
}
#mailboxcontainer #mailboxlist li.mailbox ul li.archive.selected > a,
#mailboxcontainer #mailboxlist li.mailbox ul li.archive > a:focus {
	background-position: 23px -1699px;
}
#directorylistbox #directorylist li.addressbook.selected > a,
#directorylistbox #directorylist li.addressbook > a:focus {
	background-position: 6px -766px;
}
#directorylistbox #directorylist li.contactgroup.selected > a,
#directorylistbox #directorylist li.contactgroup > a:focus {
	background-position: 6px -1554px;
}
#compose-contacts #directorylist li.addressbook.selected > a,
#compose-contacts #directorylist li.addressbook > a:focus {
	background-position: 6px -766px;
}
#compose-contacts #directorylist li.contactgroup.selected > a,
#compose-contacts #directorylist li.contactgroup > a:focus {
	background-position: 6px -1554px;
}
#settings-sections #settings-tabs .listitem.selected > a,
#settings-sections #settings-tabs .listitem > a:focus {
	background-position: 6px -862px;
}
#settings-sections #settings-tabs .preferences.selected > a,
#settings-sections #settings-tabs .preferences > a:focus {
	background-position: 6px -431px;
}
#settings-sections #settings-tabs .folders.selected > a,
#settings-sections #settings-tabs .folders > a:focus {
	background-position: 6px 2px;
}
#settings-sections #settings-tabs .identities.selected > a,
#settings-sections #settings-tabs .identities > a:focus {
	background-position: 6px -478px;
}
#settings-sections #settings-tabs .filter.selected > a,
#settings-sections #settings-tabs .filter > a:focus {
	background-position: 6px -1746px;
}
#settings-sections #settings-tabs .password.selected > a,
#settings-sections #settings-tabs .password > a:focus {
	background-position: 6px -1795px;
}
#settings-sections #settings-tabs .responses.selected > a,
#settings-sections #settings-tabs .responses > a:focus {
	background-position: 6px -1972px;
}

/* clic à la souris : pas de surlignage gris persistant (le clavier le garde) */
#mailboxcontainer .listing li:not(.selected) > a:focus:not(:focus-visible),
#directorylistbox .listing li:not(.selected) > a:focus:not(:focus-visible),
#settings-sections .listing li:not(.selected) > a:focus:not(:focus-visible) {
	background-color: transparent;
	box-shadow: none;
	color: var(--tc-text-light);
	font-weight: 600;
}
#mailboxcontainer .listing li:not(.selected) > a:focus:not(:focus-visible):before,
#directorylistbox .listing li:not(.selected) > a:focus:not(:focus-visible):before,
#settings-sections .listing li:not(.selected) > a:focus:not(:focus-visible):before {
	filter: var(--tc-filter-light);
}