/* webmail-timeup-v1 : direction B (barre navy comme l'application Time-Up), surcharge d'Elastic */
@font-face{font-family:Gilroy;src:url(../fonts/gilroy-bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"DM Sans";src:url(../fonts/dmsans.woff2) format("woff2");font-weight:100 1000;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans";src:url(../fonts/dmsans-ext.woff2) format("woff2");font-weight:100 1000;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--navy:#002A4B;--navy2:#0A3A5E;--turq:#1F9D8F;--turqlis:#178273;--turqlogo:#6BC9C8;--brume:#F4F8FA;--bord:#E3EAEF;--gris:#5B6F7F;--lib:#A9C0D0;--sec:#6E8A9C;--doux:#E8F5F3}
html,body,input,select,textarea,button,.form-control,.btn{font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
.tu-mot,.tu-gau h2,.tu-carte h1,#rcmloginsubmit,h2.subject,#taskmenu a.compose{font-synthesis:none}
body{color:var(--navy)}
.tu-mot{display:inline-flex;align-items:center;gap:10px;font:700 24px/1 Gilroy,"DM Sans",sans-serif;color:#fff}
.tu-mot i{font-style:normal;color:var(--turqlogo);margin:0 .28em}
.tu-mot svg{width:34px;height:34px;display:block;flex:none}
a:not(.button):not(.btn){color:var(--turqlis)}
.btn-primary,.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy2);border-color:var(--navy2)}
.form-control:focus,input:focus,select:focus,textarea:focus{border-color:var(--turq)!important;box-shadow:0 0 0 3px var(--doux)!important}

/* ---------- Connexion : écran coupé en deux ---------- */
body.task-login{background:#fff}
body.task-login #layout{display:block;height:auto;min-height:100vh;overflow:auto}
body.task-login #layout-content{display:flex;min-height:100vh;height:auto;width:100%;padding:0;background:#fff;overflow:visible;flex-direction:row;max-width:none}
.tu-gau{flex:1 1 52%;background:var(--navy);color:#fff;padding:56px 64px;display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.tu-gau .tu-mot{font-size:30px}.tu-gau .tu-mot svg{width:44px;height:44px}
.tu-fil{width:56px;height:4px;background:var(--turqlogo);border-radius:2px;margin-bottom:26px}
.tu-gau h2{font:700 42px/1.15 Gilroy,"DM Sans",sans-serif;color:#fff;margin:0 0 16px;max-width:480px;padding:0;border:0}
.tu-gau p{color:var(--lib);font-size:17px;line-height:1.5;margin:0;max-width:440px}
.tu-pied{color:var(--lib);font-size:14px}
.tu-dro{flex:1 1 48%;display:flex;align-items:center;justify-content:center;padding:48px 32px;min-width:0}
.tu-carte{width:100%;max-width:400px}
.tu-carte h1{font:700 28px/1.2 Gilroy,"DM Sans",sans-serif;color:var(--navy);margin:0 0 8px;position:static;width:auto;height:auto;clip:auto}
.tu-intro{color:var(--gris);font-size:15px;margin:0 0 30px}
body.task-login #login-form{width:100%;max-width:none;margin:0;padding:0;position:static}
body.task-login #login-form table,body.task-login #login-form tbody,body.task-login #login-form tr,body.task-login #login-form td{display:block;width:100%;padding:0;border:0}
body.task-login #login-form tr{margin-bottom:20px}
body.task-login #login-form td.title{display:block;height:auto;font-size:14px;font-weight:600;color:var(--navy);margin:0 0 7px}
body.task-login #login-form .input-group-prepend{display:none}
body.task-login #login-form .input-group{display:block}
body.task-login #login-form input.form-control{width:100%;height:auto;padding:13px 15px;font-size:15px;color:var(--navy);border:1px solid #CBD7DF;border-radius:10px!important;background:#fff}
body.task-login #login-form input::placeholder{color:var(--gris);opacity:1}
body.task-login #login-form .formbuttons{margin:0;padding:0;text-align:left}
body.task-login #rcmloginsubmit{width:100%;padding:14px;font:700 16px/1.3 Gilroy,"DM Sans",sans-serif;border-radius:10px;background:var(--navy);border:0;color:#fff;margin:0}
body.task-login #rcmloginsubmit:hover{background:var(--navy2)}
.tu-lien{margin-top:24px;font-size:14px;text-align:center}.tu-lien a{font-weight:600}
body.task-login #login-footer{display:none}
#message.statusbar,#messagestack{z-index:1000}
@media (max-width:800px){
 body.task-login #layout-content{flex-direction:column;height:auto}
 .tu-gau{flex:none;padding:28px 20px}.tu-gau h2,.tu-gau p,.tu-fil,.tu-pied{display:none}
 .tu-dro{flex:1;padding:32px 16px;align-items:flex-start}
}

/* ---------- Barre navy : au-delà de 1200 px seulement ; en dessous, le menu d'Elastic aux couleurs ---------- */
#layout-menu{background:var(--navy)}
html.layout-large #layout-menu{position:relative;flex:none;width:264px;display:flex;flex-direction:column;padding:22px 14px 56px;color:var(--lib);overflow:hidden}
html.layout-large #layout-menu .popover-header{display:block;padding:0 8px 22px;height:auto;background:none;border:0}
html.layout-large #layout-menu .popover-header>a{display:none}
html.layout-large #taskmenu{flex:1;display:flex;flex-direction:column;width:100%;height:auto;min-height:0;position:static;overflow:hidden;background:none}
html.layout-large #taskmenu .action-buttons,html.layout-large #taskmenu .special-buttons{display:block;position:static;width:100%;height:auto}
html.layout-large #taskmenu a{display:flex;align-items:center;gap:12px;width:100%;height:auto;min-height:46px;padding:12px 14px;margin:0;border:0;border-radius:10px;color:var(--lib);background:none;font-size:15px;font-weight:500;line-height:1.3;text-align:left;text-decoration:none;white-space:nowrap}
html.layout-large #taskmenu a:before{position:static;width:20px;margin:0;font-size:17px;line-height:1;flex:none;float:none;display:block;height:auto;text-align:center;color:inherit}
html.layout-large #taskmenu a .inner{display:inline;position:static;font-size:15px;line-height:1.3;height:auto;width:auto;overflow:visible;padding:0;margin:0}
html.layout-large #taskmenu a:hover{background:rgba(255,255,255,.06);color:#fff}
html.layout-large #taskmenu a.selected{background:rgba(107,201,200,.16);color:#fff;box-shadow:inset 3px 0 0 var(--turqlogo);border-radius:0 10px 10px 0}
html.layout-large #taskmenu a.compose{justify-content:center;gap:8px;margin-bottom:0;background:var(--turqlogo);color:var(--navy);font:700 15px/1.3 Gilroy,"DM Sans",sans-serif}
html.layout-large #taskmenu a.compose .inner{font:inherit}
html.layout-large #taskmenu a.compose:hover{background:#8AD6D5;color:var(--navy)}
html.layout-large #taskmenu a.compose.disabled{opacity:.55}
html.layout-large #taskmenu a.about,html.layout-large #taskmenu a.theme{display:none}
/* Le premier lien du bas pousse le groupe vers le pied de la barre */
html.layout-large body:not(.tu-sans-courriel) #taskmenu a.mail{margin-top:auto}
html.layout-large body.tu-sans-courriel #taskmenu a.mail{display:none}
html.layout-large body.tu-sans-courriel #taskmenu a.contacts{margin-top:auto;border-top:0}

/* Boîte de réception : les dossiers se posent dans la barre navy */
html.layout-large body.task-mail.action-none #layout-sidebar{position:absolute;left:0;top:142px;bottom:206px;width:264px;min-width:0;max-width:none;flex:none;padding:0 14px;background:transparent;border:0;z-index:2;color:var(--lib)}
body.task-mail.action-none #layout-sidebar .footer{display:none}
html.layout-large body.task-mail.action-none #layout-sidebar .header{position:fixed;left:0;bottom:12px;width:264px;height:36px;padding:0 28px;background:none;border:0;display:flex;align-items:center;justify-content:space-between;z-index:3;color:var(--sec)}
html.layout-large body.task-mail.action-none #layout-sidebar .header .header-title{display:block;font-size:13px;color:var(--sec);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0;padding:0;line-height:1.3}
html.layout-large body.task-mail.action-none #layout-sidebar .header a.button{color:var(--sec);background:none;padding:0;width:24px;min-width:24px;height:24px;line-height:24px;margin:0;flex:none}
html.layout-large body.task-mail.action-none #layout-sidebar .header a.button .inner{display:none}
html.layout-large body.task-mail.action-none #layout-sidebar .header a.button:before{font-size:14px;margin:0;line-height:24px;float:none;width:24px;position:static}
html.layout-large body.task-mail.action-none #folderlist-content{background:transparent;padding:0;overflow:auto}
html.layout-large body.task-mail.action-none #mailboxlist,html.layout-large body.task-mail.action-none #mailboxlist li{background:transparent;border:0}
html.layout-large body.task-mail.action-none #mailboxlist li>a{display:block;height:auto;min-height:46px;padding:12px 14px 12px 46px;margin:0;border:0;border-radius:10px;color:var(--lib);font-size:15px;font-weight:500;line-height:22px;background:none}
html.layout-large body.task-mail.action-none #mailboxlist li>a:before{left:14px;top:12px;width:20px;height:22px;line-height:22px;font-size:16px;color:inherit;position:absolute;margin:0}
html.layout-large body.task-mail.action-none #mailboxlist li>a:hover{background:rgba(255,255,255,.06);color:#fff}
html.layout-large body.task-mail.action-none #mailboxlist li.selected>a{background:rgba(107,201,200,.16);color:#fff;box-shadow:inset 3px 0 0 var(--turqlogo);border-radius:0 10px 10px 0}
html.layout-large body.task-mail.action-none #mailboxlist li .unreadcount{background:none;color:var(--turqlogo);font-size:13px;font-weight:600;right:14px;top:12px;line-height:22px;padding:0}
html.layout-large body.task-mail.action-none #mailboxlist li.unread>a{font-weight:600}

/* Liste des messages : lignes aérées */
html.layout-large body.task-mail.action-none #layout-list{flex:none;width:400px;max-width:none;border-right:1px solid var(--bord)}
#messagelist-header,#layout-content>.header,#layout-sidebar>.header,#layout-list>.header{background:#fff;border-bottom:1px solid var(--bord)}
table.messagelist tr td{border-top:1px solid #EEF3F6;background:#fff}
table.messagelist.widescreen tr td.subject{padding:15px 22px 15px 22px;line-height:1.5}
table.messagelist td.subject span.fromto,table.messagelist td.subject span.fromto a,table.messagelist td span.date{font-size:14px}
table.messagelist span.fromto{color:var(--navy);font-weight:500}
table.messagelist td.subject span.subject,table.messagelist td.subject span.subject a{color:var(--gris);font-size:14px}
table.messagelist span.date{color:var(--gris)}
table.messagelist tr.unread span.fromto,table.messagelist tr.unread span.fromto a{font-weight:600;color:var(--navy)}
table.messagelist tr.unread td.subject span.subject,table.messagelist tr.unread td.subject span.subject a{color:var(--navy);font-weight:500}
table.messagelist tr.selected td,table.messagelist tr.focused td{background:var(--doux)!important;color:var(--navy)}
table.messagelist tr.selected td:first-child,table.messagelist tr.selected td.subject{box-shadow:inset 3px 0 0 var(--turq)}
table.messagelist tr:hover td{background:var(--brume)}

/* Barre d'actions du message : icône à côté du libellé, comme la maquette */
html.layout-large #layout-content>.header>.toolbar a.button,html.layout-large #layout-content>.header .toolbar>a.button{color:var(--navy)}
#layout-content>.header .toolbar a.button:hover{background:var(--brume);color:var(--navy)}
#layout-content>.header .toolbar a.button.disabled{color:#9FB0BC}
.pagenav a.button,.footer a{color:var(--navy)}
ul.listing li.selected>a,ul.listing li.selected{background:var(--doux);color:var(--navy)}
table.listing tr.selected td,table.listing tr.focused td{background:var(--doux)!important;color:var(--navy)}
.task-menu-button,.back-sidebar-button,.back-list-button,.back-content-button{color:var(--navy)}

/* Écarts relevés sur le vrai rendu, comparé à la maquette B */
body.task-login #layout-content,body.task-login .tu-gau,body.task-login .tu-carte,body.task-login #login-form,body.task-login #login-form td{text-align:left}
body.task-login .tu-lien{text-align:center}
body.task-login #rcmloginsubmit{text-transform:none;letter-spacing:0}
html.layout-large #layout-menu .popover-header,html.layout-large #layout-menu .popover-header *{background:transparent!important}
html.layout-large #taskmenu a,html.layout-large #taskmenu .action-buttons a{width:100%!important;max-width:none!important;min-width:0}
html.layout-large #taskmenu .action-buttons{margin:0;padding:0}
html.layout-large #taskmenu a.logout{color:var(--lib)!important;background:none}
html.layout-large #taskmenu a.logout:hover{background:rgba(255,255,255,.06)!important;color:#fff!important}
html.layout-large #taskmenu a .inner{overflow:visible!important;text-overflow:clip!important;max-width:none!important}
html.layout-large body.task-mail.action-none #mailboxlist li .unreadcount{top:12px!important;margin:0!important;height:22px;line-height:22px!important;transform:none}
#messagelist-header,#layout-content>.header,#layout-list>.header,body:not(.action-none) #layout-sidebar>.header,body:not(.task-mail) #layout-sidebar>.header{background:#fff!important}
html.layout-large #taskmenu .special-buttons,html.layout-large #taskmenu .action-buttons{background:transparent!important}
body.task-login #rcmloginsubmit,body.task-login #login-form .formbuttons button{text-transform:none!important}
#messagelist tbody tr td.subject{padding-top:14px!important;padding-bottom:14px!important}
#messagelist tbody tr span.msgicon.status.unread:before,#messagelist tbody tr.unread span.msgicon.status:before{color:var(--turq)!important}
ul.listing li a,ul.listing li,table.listing td,table.listing td a,#settings-sections a,#sections-table a{color:var(--navy)}
a.extwin,.formbuttons a.extwin,#layout-content a.extwin{color:var(--turqlis)!important}
.floating-action-buttons a,.floating-action-buttons a.button,a.button.floating,.fab{background:var(--navy)!important;color:#fff!important}
a.button.compose:not(#x){border-color:transparent}
.btn-secondary{background:var(--navy);border-color:var(--navy);color:#fff}
html.layout-large #messagetoolbar a.button,html.layout-large #layout-content>.header .toolbar a.button{color:var(--navy)}
#messagelistfooter,#layout-list .pagenav{background:#fff}
#mailsearchlist,.searchbar{background:#fff}
table.messagelist.widescreen tr td.subject{padding:18px 22px!important}
.message-part div.pre,div.message-part div.pre{font-family:"DM Sans",system-ui,sans-serif;font-size:15px;line-height:1.55}
.message-partheaders,#message-header{color:var(--navy)}
#message-header h2.subject,h2.subject{font:700 24px/1.25 Gilroy,"DM Sans",sans-serif;color:var(--navy)}

/* Relecture contradictoire du 02/11 */
html:not(.layout-large) #layout-menu .tu-mot{font-size:0;gap:0;justify-content:center;width:100%}
html:not(.layout-large) #layout-menu .tu-mot svg{width:30px;height:30px}
#layout-content .toolbar a,#layout-list .toolbar a,#messagetoolbar a,#messagelist-header a.button{color:var(--navy)!important}
#layout-content .toolbar a.disabled,#layout-list .toolbar a.disabled{color:#9FB0BC!important}
#taskmenu a.about{display:none!important}
html:not(.layout-large) #layout-menu .popover-header,html:not(.layout-large) #layout-menu #logo{background:transparent!important}
html:not(.layout-large) #taskmenu a{color:var(--lib)}
html:not(.layout-large) #taskmenu a.selected{background:rgba(107,201,200,.16);color:#fff}
html:not(.layout-large) #taskmenu a.logout{color:var(--lib)}
html:not(.layout-large) #taskmenu .special-buttons{background:transparent}