/* =====================================================================
   Artistes En Scène — Habillage Roundcube (skin Elastic)
   THÈME DORÉ — calé sur le DOM réel d'Elastic 1.6/1.7.
     login doré (carte + titre calligraphié)
     interface claire dorée + interface SOMBRE dorée (unité avec l'admin)
   Chargé APRÈS styles.min.css → gagne à spécificité égale.
   ===================================================================== */

:root{
  --aes-fond:#16120a; --aes-fond2:#1c150a; --aes-fond3:#120d06;
  --aes-or:#e0a93f; --aes-or-clair:#f0c46a; --aes-or-fonce:#c8841f;
  --aes-or-spot3:#9c6b1a; --aes-or-spot4:#b5701a;
  --aes-or-rgb:224,169,63;
  --aes-txt:#f7efe0; --aes-txt-doux:#d4c4a0;
}

/* =====================================================================
   1) PAGE DE CONNEXION — carte Backstage en doré
   ===================================================================== */
body.task-login{ background:var(--aes-fond) !important; overflow:hidden !important; color:var(--aes-txt) !important; }

.task-login #layout,
.task-login #layout-content,
.task-login #layout-content > .scroller,
.task-login #layout-content .scroller,
.task-login #layout-content .content{ background:transparent !important; box-shadow:none !important; border:none !important; }
.task-login #layout{ min-height:100dvh !important; }
.task-login #layout-content{ height:auto !important; min-height:100dvh !important; width:auto !important; max-width:100% !important; }
/* C'est le .scroller qui porte le contenu : on le met pleine hauteur et on
   centre le formulaire dedans (vertical + horizontal). */
.task-login #layout-content > .scroller,
.task-login #layout-content .scroller,
.task-login #layout-content .content{
  min-height:100dvh !important;
  display:flex !important; flex-direction:column !important;
  align-items:center !important; justify-content:center !important;
  overflow:auto !important; padding:24px !important; box-sizing:border-box !important;
}

body.task-login::before{
  content:""; position:fixed; inset:-12%; z-index:0; pointer-events:none;
  filter:blur(80px); opacity:.5;
  background:
    radial-gradient(520px 520px at 8% 2%,   var(--aes-or) 0%, transparent 60%),
    radial-gradient(460px 460px at 100% 14%, var(--aes-or-fonce) 0%, transparent 60%),
    radial-gradient(420px 420px at 34% 100%, var(--aes-or-spot3) 0%, transparent 60%),
    radial-gradient(300px 300px at 86% 88%,  var(--aes-or-spot4) 0%, transparent 60%);
  animation:aes-flotte 14s ease-in-out infinite;
}
@keyframes aes-flotte{ 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(40px,-30px) scale(1.06)} 66%{transform:translate(-30px,20px) scale(.96)} }

.task-login #login-form,
.task-login form[name="form"],
.task-login .box.formcontainer,
.task-login .content > form{
  position:relative !important; z-index:2 !important;
  width:100% !important; max-width:410px !important; margin:0 auto !important; box-sizing:border-box !important;
  padding:34px 32px 28px !important;
  background:rgba(28,21,10,.74) !important;
  backdrop-filter:blur(18px) saturate(130%); -webkit-backdrop-filter:blur(18px) saturate(130%);
  border:1px solid rgba(var(--aes-or-rgb),.30) !important; border-radius:22px !important;
  box-shadow:0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.task-login #login-form::before,
.task-login form[name="form"]::before{
  content:""; position:absolute; inset:0; border-radius:22px; padding:1px;
  background:linear-gradient(135deg, rgba(240,196,106,.55), rgba(200,132,31,.35), transparent 60%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.task-login label, .task-login legend, .task-login .formcontent{ color:var(--aes-txt-doux) !important; }

.task-login .logo, .task-login #layout-content .logo{ text-align:center !important; }
.task-login .logo img, .task-login img.logo, .task-login #logo{
  display:block !important; width:auto !important; height:auto !important;
  max-height:56px !important; max-width:78% !important; margin:0 auto 18px !important;
  filter:drop-shadow(0 4px 16px rgba(var(--aes-or-rgb),.45));
}

/* Titre calligraphié doré injecté par le plugin */
.task-login .aes-login-titre{
  font-family:'Kaushan Script', cursive; font-size:34px; line-height:1.05; text-align:center;
  margin:2px 0 4px; padding-bottom:4px;
  background:linear-gradient(135deg, var(--aes-or-clair), var(--aes-or-fonce));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.task-login .aes-login-accroche{ text-align:center; font-size:13.5px; line-height:1.5; color:var(--aes-txt-doux); margin:0 0 20px; }

/* Groupe champ = icône + input fusionnés */
.task-login .input-group{
  border-radius:12px !important; overflow:hidden !important;
  border:1px solid rgba(var(--aes-or-rgb),.24) !important; background:rgba(255,255,255,.06) !important;
  margin-bottom:14px !important;
}
.task-login .input-group:focus-within{ border-color:var(--aes-or) !important; box-shadow:0 0 0 3px rgba(var(--aes-or-rgb),.28) !important; }
.task-login input, .task-login .form-control,
.task-login input[type=text], .task-login input[type=password]{
  height:50px !important; border-radius:12px !important;
  background:transparent !important; border:none !important; color:#fff !important; box-shadow:none !important;
}
.task-login input::placeholder{ color:var(--aes-txt-doux) !important; }
.task-login .input-group-text{
  background:transparent !important; border:none !important;
  border-right:1px solid rgba(var(--aes-or-rgb),.20) !important; color:var(--aes-or-clair) !important;
}
.task-login input:focus, .task-login .form-control:focus{ background:transparent !important; box-shadow:none !important; border:none !important; }

.task-login input:-webkit-autofill,
.task-login input:-webkit-autofill:hover,
.task-login input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff !important;
  -webkit-box-shadow:0 0 0 1000px #241a0d inset !important; box-shadow:0 0 0 1000px #241a0d inset !important;
  caret-color:#fff !important; transition:background-color 9999s ease-in-out 0s !important;
}

.task-login .formbuttons{ margin-top:8px !important; padding:0 !important; text-align:center !important; background:transparent !important; border:none !important; box-shadow:none !important; }
.task-login .formbuttons .btn,
.task-login .formbuttons button,
.task-login button.btn.btn-primary,
.task-login .btn.btn-primary,
.task-login #rcmloginsubmit, #rcmloginsubmit{
  display:block !important; width:100% !important; height:50px !important;
  border:none !important; border-radius:12px !important;
  background:linear-gradient(135deg, var(--aes-or-fonce), var(--aes-or)) !important;
  box-shadow:0 8px 24px rgba(var(--aes-or-rgb),.4) !important;
  color:#241b0a !important; font-weight:700 !important; font-size:15px !important; letter-spacing:.3px !important;
}
.task-login .formbuttons .btn:hover, .task-login #rcmloginsubmit:hover{ filter:brightness(1.08); }
.task-login a{ color:var(--aes-or-clair) !important; }
.task-login a:hover{ color:var(--aes-or) !important; }


/* =====================================================================
   2) BARRE DES TÂCHES (rail gauche) — sombre doré, dans les 2 modes
   ===================================================================== */
#layout-menu, #taskmenu{ background-color:var(--aes-fond2) !important; }
#layout-menu .popover-header{ background-color:var(--aes-fond2) !important; }
#layout-menu #logo, .popover-header #logo{ max-height:34px !important; width:auto !important; }

/* Boutons du rail : texte/icône doux, actif en or */
#taskmenu a{ color:var(--aes-txt-doux) !important; }
#taskmenu a:hover{ color:#fff !important; }
#taskmenu a.selected{ color:var(--aes-or-clair) !important; box-shadow:inset 3px 0 0 var(--aes-or) !important; background-color:rgba(var(--aes-or-rgb),.10) !important; }

/* Bouton « Rédiger » (FAB compose) : pastille dorée */
#taskmenu a.compose{
  background:linear-gradient(135deg, var(--aes-or-fonce), var(--aes-or)) !important;
  color:#241b0a !important; border-radius:12px !important;
  box-shadow:0 6px 16px rgba(var(--aes-or-rgb),.35) !important;
}
#taskmenu a.compose:hover{ filter:brightness(1.08); color:#241b0a !important; }
/* Déconnexion en bas : léger accent chaud au survol */
#taskmenu a.logout:hover{ color:var(--aes-or-clair) !important; }


/* =====================================================================
   3) INTERFACE — MODE CLAIR
   ===================================================================== */
/* En-têtes de colonnes + barres d'outils : blanc chaud + filet doré */
html:not(.dark-mode) #layout-sidebar > .header,
html:not(.dark-mode) #layout-list > .header,
html:not(.dark-mode) #messagelist-header.header,
html:not(.dark-mode) #layout-content > .header,
html:not(.dark-mode) .searchbar.menu,
html:not(.dark-mode) .pagenav.footer,
html:not(.dark-mode) #layout-sidebar .footer{
  background-color:#fbf7ef !important;
  border-bottom:1px solid rgba(var(--aes-or-rgb),.30) !important; box-shadow:none !important;
}

/* Boutons principaux (Recherche, etc.) : dégradé doré */
.btn.btn-primary, button.btn.btn-primary{
  background:linear-gradient(135deg, var(--aes-or-fonce), var(--aes-or)) !important;
  border-color:transparent !important; color:#241b0a !important; font-weight:600 !important;
}
.btn.btn-primary:hover, .btn.btn-primary:focus{ filter:brightness(1.06); }

/* Dossier sélectionné (arbre) — recolore le bleu Elastic */
#mailboxlist li.selected > a,
.folderlist li.selected > a{
  background-color:rgba(var(--aes-or-rgb),.14) !important;
  color:#5a3d0a !important; box-shadow:inset 3px 0 0 var(--aes-or) !important;
}
#mailboxlist li > a:hover{ background-color:rgba(var(--aes-or-rgb),.08) !important; }
/* Pastille compteur non-lus (Corbeille 41…) */
.unreadcount, .folderlist .unreadcount{ background-color:var(--aes-or-fonce) !important; color:#fff !important; }

/* Message sélectionné / focus dans la liste */
#messagelist tbody tr.selected td,
#messagelist tbody tr.selected.focused td,
table.listing tbody tr.selected td{
  background-color:rgba(var(--aes-or-rgb),.16) !important; box-shadow:inset 3px 0 0 var(--aes-or) !important;
}
#messagelist tbody tr:hover td{ background-color:rgba(var(--aes-or-rgb),.06) !important; }
#messagelist tbody tr.unread td.subject{ color:#8a5a0a !important; }

/* Barre de quota */
.quota-widget .bar .value, .quota .bar .value{ background-color:var(--aes-or) !important; }

/* Liens & accents */
a{ color:#b5701a; }
a:hover{ color:var(--aes-or-fonce); }
.pagenav-text, #rcmcountdisplay{ color:#8a5a0a !important; }
input[type=checkbox]:checked, input[type=radio]:checked,
.custom-control-input:checked ~ .custom-control-label::before{ accent-color:var(--aes-or-fonce); background-color:var(--aes-or-fonce) !important; border-color:var(--aes-or-fonce) !important; }
::selection{ background:rgba(var(--aes-or-rgb),.32); color:#241b0a; }


/* =====================================================================
   4) INTERFACE — MODE SOMBRE (décliné en DORÉ, unité avec l'admin)
   ===================================================================== */
html.dark-mode,
html.dark-mode body,
html.dark-mode #layout,
html.dark-mode #layout-list,
html.dark-mode #layout-content,
html.dark-mode #layout-content .content{ background-color:var(--aes-fond) !important; }
html.dark-mode #layout-sidebar{ background-color:var(--aes-fond3) !important; }

/* En-têtes + barres : noir doré + filet or */
html.dark-mode #layout-sidebar > .header,
html.dark-mode #layout-list > .header,
html.dark-mode #messagelist-header.header,
html.dark-mode #layout-content > .header,
html.dark-mode .searchbar.menu,
html.dark-mode .pagenav.footer,
html.dark-mode #layout-sidebar .footer{
  background-color:var(--aes-fond2) !important;
  border-bottom:1px solid rgba(var(--aes-or-rgb),.30) !important; box-shadow:none !important; color:var(--aes-txt-doux) !important;
}
html.dark-mode .header-title{ color:var(--aes-txt) !important; }

/* Arbre des dossiers */
html.dark-mode #mailboxlist a, html.dark-mode .folderlist a{ color:var(--aes-txt-doux) !important; }
html.dark-mode #mailboxlist li.selected > a,
html.dark-mode .folderlist li.selected > a{
  background-color:rgba(var(--aes-or-rgb),.16) !important; color:#fff !important;
  box-shadow:inset 3px 0 0 var(--aes-or) !important;
}
html.dark-mode #mailboxlist li > a:hover{ background-color:rgba(var(--aes-or-rgb),.08) !important; }
html.dark-mode .unreadcount{ background-color:var(--aes-or-fonce) !important; color:#241b0a !important; }
/* Chevron d'ouverture des dossiers (treetoggle) : bleu Elastic → or.
   Selon la version c'est une police-icône (color) ou un SVG en currentColor. */
html.dark-mode .treelist .treetoggle,
html.dark-mode .folderlist .treetoggle,
html.dark-mode #mailboxlist .treetoggle,
html.dark-mode .treelist .treetoggle::before,
html.dark-mode #mailboxlist li > .treetoggle::before{ color:var(--aes-or-clair) !important; }
/* Filet de secours si le chevron est une image de fond bleue : teinte dorée */
html.dark-mode #mailboxlist .treetoggle{ filter:sepia(1) saturate(3) hue-rotate(4deg) brightness(1.05); }
/* Même chose en clair */
html:not(.dark-mode) #mailboxlist .treetoggle,
html:not(.dark-mode) .treelist .treetoggle::before{ color:var(--aes-or-fonce) !important; }
html:not(.dark-mode) #mailboxlist .treetoggle{ filter:sepia(1) saturate(3) hue-rotate(4deg); }

/* Liste des messages */
html.dark-mode #messagelist{ color:var(--aes-txt-doux) !important; }
html.dark-mode #messagelist tbody td{ border-color:rgba(var(--aes-or-rgb),.10) !important; }
html.dark-mode #messagelist thead th{ background-color:var(--aes-fond2) !important; color:var(--aes-txt-doux) !important; }
html.dark-mode #messagelist tbody tr.selected td,
html.dark-mode #messagelist tbody tr.selected.focused td{
  background-color:rgba(var(--aes-or-rgb),.18) !important; color:#fff !important;
  box-shadow:inset 3px 0 0 var(--aes-or) !important;
}
html.dark-mode #messagelist tbody tr:hover td{ background-color:rgba(var(--aes-or-rgb),.07) !important; }
html.dark-mode #messagelist tbody tr.unread td.subject{ color:var(--aes-or-clair) !important; font-weight:700 !important; }

/* Barre d'outils icônes lisibles */
html.dark-mode .toolbar a.button, html.dark-mode #toolbar-menu a{ color:var(--aes-txt-doux) !important; }
html.dark-mode .toolbar a.button:hover{ color:#fff !important; }

/* Recherche / formulaires sombres dorés */
html.dark-mode input, html.dark-mode .form-control, html.dark-mode textarea,
html.dark-mode select, html.dark-mode .pretty-select{
  background-color:rgba(255,255,255,.05) !important; border-color:rgba(var(--aes-or-rgb),.22) !important; color:#fff !important;
}
html.dark-mode input:focus, html.dark-mode .form-control:focus{ border-color:var(--aes-or) !important; box-shadow:0 0 0 2px rgba(var(--aes-or-rgb),.25) !important; }

/* Liens, compteurs, quota, boutons.
   PAS de !important sur les liens : sinon le doré écrase les couleurs propres
   des emails (liens + texte blanc des boutons dans le corps des messages).
   aes.css étant chargé APRÈS Elastic, il gagne déjà à spécificité égale pour
   l'interface, tout en laissant les styles inline des mails prioritaires. */
html.dark-mode a, html.dark-mode a:visited{ color:var(--aes-or-clair); }
html.dark-mode a:hover{ color:var(--aes-or); }
html.dark-mode .pagenav-text, html.dark-mode #rcmcountdisplay{ color:var(--aes-txt-doux) !important; }
html.dark-mode .quota-widget .bar .value{ background-color:var(--aes-or) !important; }
html.dark-mode .quota-widget .bar{ background-color:rgba(255,255,255,.10) !important; }
html.dark-mode .btn.btn-primary, html.dark-mode button.btn.btn-primary{
  background:linear-gradient(135deg, var(--aes-or-fonce), var(--aes-or)) !important; color:#241b0a !important; border-color:transparent !important;
}
html.dark-mode .custom-control-input:checked ~ .custom-control-label::before{ background-color:var(--aes-or-fonce) !important; border-color:var(--aes-or-fonce) !important; }
html.dark-mode ::selection{ background:rgba(var(--aes-or-rgb),.32); color:#241b0a; }

/* Menus contextuels (popupmenu) sombres dorés */
html.dark-mode .popupmenu, html.dark-mode .toolbarmenu, html.dark-mode ul.menu.listing{
  background-color:var(--aes-fond2) !important; border:1px solid rgba(var(--aes-or-rgb),.20) !important;
}
html.dark-mode .popupmenu a:hover, html.dark-mode .toolbarmenu a:hover{ background-color:rgba(var(--aes-or-rgb),.12) !important; color:#fff !important; }

/* Listes génériques (Paramètres, Contacts…) : sélection + ICÔNE en or,
   fini le bleu Elastic sur « Vue de la boîte de courriel » & co. */
html.dark-mode .listing li.selected > a,
html.dark-mode .listing tr.selected > td,
html.dark-mode ul.listing li.selected > a,
html.dark-mode #sections-table tr.selected td,
html.dark-mode #settings-menu li.selected > a{
  background-color:rgba(var(--aes-or-rgb),.16) !important; color:#fff !important;
  box-shadow:inset 3px 0 0 var(--aes-or) !important;
}
/* Icône de l'élément sélectionné (le bleu résiduel) */
html.dark-mode .listing li.selected > a::before,
html.dark-mode .listing li.selected > a .icon::before,
html.dark-mode #settings-menu li.selected > a::before,
html.dark-mode .listing li.selected > a span::before{ color:var(--aes-or-clair) !important; }

/* Même chose en mode clair */
html:not(.dark-mode) .listing li.selected > a,
html:not(.dark-mode) #settings-menu li.selected > a,
html:not(.dark-mode) #sections-table tr.selected td{
  background-color:rgba(var(--aes-or-rgb),.14) !important; color:#5a3d0a !important;
  box-shadow:inset 3px 0 0 var(--aes-or) !important;
}
html:not(.dark-mode) .listing li.selected > a::before,
html:not(.dark-mode) #settings-menu li.selected > a::before,
html:not(.dark-mode) .listing li.selected > a span::before{ color:var(--aes-or-fonce) !important; }

/* Note : le « cube gris » du volet de lecture est une IFRAME
   (skins/elastic/watermark.html) → non atteignable en CSS.
   Il se remplace par le logo AES via config skin_logo 'elastic:watermark'
   (voir BRANDING-LOGO-NOTIF-WATERMARK.md). */


/* =====================================================================
   5) CORRECTIFS MODE SOMBRE
   ===================================================================== */

/* 5a) Les couleurs propres des emails sont préservées grâce au retrait du
   !important sur « html.dark-mode a » (voir section 4). Rien à ajouter ici :
   les liens et le texte blanc des boutons des mails restent intacts. */

/* 5b) ICÔNES DE STATUT DE LA LISTE (non lu ●, répondu ↩, transféré ↪, marqué) :
   le bleu Elastic résiduel passe au doré, en mode sombre. */
html.dark-mode #messagelist span.unread,
html.dark-mode #messagelist span.unreadchildren,
html.dark-mode #messagelist span.replied,
html.dark-mode #messagelist span.forwarded,
html.dark-mode #messagelist span.status,
html.dark-mode #messagelist span.msgicon,
html.dark-mode #messagelist td.flag > span,
html.dark-mode #messagelist td.status > span{ color: var(--aes-or-clair) !important; }
/* Cas où la pastille « non lu » est une couleur de fond (et non une police-icône) */
html.dark-mode #messagelist span.unread.dot,
html.dark-mode #messagelist .unreaddot,
html.dark-mode #messagelist tr.unread span.unread{ background-color: var(--aes-or) !important; border-color: var(--aes-or) !important; }

/* 5c) SUJET DES MESSAGES DANS LA LISTE — le sujet est un lien <a> ; depuis le
   retrait du !important (section 4), Elastic le repeignait en BLEU, surtout à la
   sélection. Ici (uniquement dans la liste, jamais dans le corps des mails), le
   lien du sujet suit la couleur de sa ligne : doré si non lu, blanc si sélectionné. */
html.dark-mode #messagelist td.subject a{ color: inherit !important; }
html.dark-mode #messagelist tbody tr.unread td.subject,
html.dark-mode #messagelist tbody tr.unread td.subject a{ color: var(--aes-or-clair) !important; }
html.dark-mode #messagelist tbody tr.selected td.subject,
html.dark-mode #messagelist tbody tr.selected td.subject a,
html.dark-mode #messagelist tbody tr.selected.focused td.subject,
html.dark-mode #messagelist tbody tr.selected.focused td.subject a{ color:#fff !important; }