/* Mails RHO — charte Terranota : blanc, bleu nuit, liseré vert, icônes au trait. Clair seulement. */
:root {
  --nuit: #1e1a34; --nuit-doux: #2c2748;
  --vert: #44d62c; --vert-fonce: #2f9e1c; --vert-pale: #ecf9e8; --vert-trait: #9be58c;
  --fond: #f4f5f9; --carte: #ffffff; --texte: #1e1a34; --doux: #6b6880; --trait: #e3e5ee;
  --rouge: #d63939; --rouge-pale: #fdecec; --ambre: #8a6400; --ambre-pale: #fff5d9; --bleu: #3b74d6; --bleu-pale: #eaf1fd;
  --rayon: 14px; --ombre: 0 1px 2px rgba(30,26,52,.05), 0 4px 14px rgba(30,26,52,.05);
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--fond); color: var(--texte); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--vert-fonce); }
svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* bandeau */
.barre { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 10px 20px;
  background: #fff; border-bottom: 3px solid var(--vert); box-shadow: 0 2px 10px rgba(30,26,52,.06); }
.barre .logo { height: 30px; display: block; }
.barre .titre { display: flex; flex-direction: column; line-height: 1.15; padding-left: 12px; border-left: 1px solid var(--trait); min-width: 0; }
.barre .titre b { font-size: 15px; color: var(--nuit); letter-spacing: .3px; }
.barre .titre span { font-size: 12px; color: var(--doux); }
.barre nav { display: flex; gap: 4px; margin-left: 18px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.barre nav a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 10px; color: var(--doux); text-decoration: none; font-weight: 600; font-size: 14px; white-space: nowrap; }
.barre nav a:hover { background: var(--fond); color: var(--nuit); }
.barre nav a.actif { background: var(--nuit); color: #fff; }
.barre nav a.actif svg.i { color: var(--vert); }
.compte { background: var(--fond); color: var(--nuit); border: 0; border-radius: 99px; padding: 6px 12px; font-size: 13px; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.nb { background: var(--vert); color: var(--nuit); border-radius: 99px; font-size: 11px; font-weight: 700; padding: 1px 7px; }
.actif .nb { background: var(--vert); }

.essai { background: var(--ambre-pale); color: var(--ambre); border-bottom: 1px solid #f1dc9c; padding: 8px 20px; font-size: 13px; display: flex; gap: 8px; align-items: center; }
.alerte { background: var(--rouge-pale); color: var(--rouge); border-bottom: 1px solid #f4c4c4; padding: 8px 20px; font-size: 13px; display: flex; gap: 8px; align-items: center; }

main { padding: 18px 20px 60px; max-width: 1280px; margin: 0 auto; }

/* deux volets : liste et mail */
.volets { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 16px; align-items: start; }
.volets > *, .deux-col > * { min-width: 0; }
h1 { overflow-wrap: anywhere; }
.liste { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden; position: sticky; top: 76px; max-height: calc(100vh - 96px); display: flex; flex-direction: column; }
.liste .outils { padding: 12px; border-bottom: 1px solid var(--trait); }
.liste .defile { overflow-y: auto; }
.champ-recherche { position: relative; }
.champ-recherche svg.i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--doux); }
.recherche { width: 100%; padding: 9px 12px 9px 36px; border-radius: 10px; border: 1px solid var(--trait); background: #fbfbfd; }
a.ligne { display: block; padding: 11px 14px; border-bottom: 1px solid var(--trait); text-decoration: none; color: inherit; }
a.ligne:hover { background: #fafbfd; }
a.ligne.choisi { background: var(--vert-pale); box-shadow: inset 3px 0 0 var(--vert); }
.ligne .haut { display: flex; gap: 8px; align-items: baseline; }
.ligne .de { flex: 1; font-weight: 600; color: var(--nuit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.ligne .quand { color: var(--doux); font-size: 12px; white-space: nowrap; }
.ligne .obj { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne .ext { font-size: 12.5px; color: var(--doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne .bas { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.plus { width: 100%; background: none; border: 0; padding: 12px; color: var(--vert-fonce); font-weight: 600; }

.pastille { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--fond); color: var(--doux); white-space: nowrap; }
.pastille svg.i { width: 12px; height: 12px; }
.pastille.vert { background: var(--vert-pale); color: var(--vert-fonce); }
.pastille.nuit { background: var(--nuit); color: #fff; }
.pastille.rouge { background: var(--rouge-pale); color: var(--rouge); }
.pastille.ambre { background: var(--ambre-pale); color: var(--ambre); }
.pastille.bleu { background: var(--bleu-pale); color: var(--bleu); }

.carte { background: var(--carte); border-radius: var(--rayon); padding: 18px 20px; box-shadow: var(--ombre); margin-bottom: 14px; }
h1 { font-size: 20px; margin: 0 0 4px; color: var(--nuit); }
h2 { display: flex; align-items: center; gap: 8px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .7px; color: var(--nuit); margin: 0 0 10px; }
h2::before { content: ""; width: 4px; height: 14px; border-radius: 2px; background: var(--vert); }
h2 .droite { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--doux); font-size: 12.5px; }
.muet { color: var(--doux); font-size: 13.5px; }
.entetes { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 13.5px; margin: 10px 0 0; }
.entetes dt { color: var(--doux); }
.entetes dd { margin: 0; word-break: break-word; }
.corps-mail { white-space: pre-wrap; word-break: break-word; font-size: 14px; background: #fbfbfd; border: 1px solid var(--trait); border-radius: 10px; padding: 14px; max-height: 520px; overflow: auto; margin: 0; font-family: inherit; }
.fichiers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.fichier { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 10px; border: 1px solid var(--trait); background: #fff; color: var(--nuit); text-decoration: none; font-size: 13px; max-width: 100%; }
.fichier span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fichier small { color: var(--doux); }
.fichier svg.i { color: var(--vert-fonce); }
.fichier:hover { border-color: var(--vert); }

.barre-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px; padding: 10px 15px; font-weight: 600; background: var(--nuit); color: #fff; font-size: 14px; text-decoration: none; }
.btn svg.i { color: var(--vert); }
.btn.vert { background: var(--vert-fonce); }
.btn.vert svg.i { color: #fff; }
.btn.clair { background: #fff; color: var(--nuit); border: 1px solid var(--trait); }
.btn.clair svg.i { color: var(--vert-fonce); }
.btn.clair:hover { border-color: var(--vert); }
.btn.lien { background: none; color: var(--doux); padding: 10px 8px; }
.btn.danger { background: none; color: var(--rouge); }
.btn.danger svg.i { color: var(--rouge); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.petit { padding: 6px 10px; font-size: 13px; }

/* formulaires */
.champ { display: block; margin-top: 12px; }
.champ > span { display: block; font-size: 12px; color: var(--doux); margin-bottom: 4px; font-weight: 500; }
input[type=text], input[type=email], input[type=password], select, textarea { width: 100%; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--trait); background: #fbfbfd; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--vert-trait); border-color: var(--vert); }
textarea { min-height: 70px; resize: vertical; }
label.case { display: flex; gap: 8px; align-items: center; font-size: 14px; margin-top: 8px; cursor: pointer; }
label.case input { width: 16px; height: 16px; accent-color: var(--vert-fonce); }

.cond { display: grid; grid-template-columns: 210px 150px 1fr 34px; gap: 8px; align-items: center; margin-top: 8px; }
.cond .ou { color: var(--doux); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.retirer { background: none; border: 0; color: var(--doux); padding: 6px; border-radius: 8px; display: grid; place-items: center; }
.retirer:hover { background: var(--rouge-pale); color: var(--rouge); }
.action-bloc { border: 1px solid var(--trait); border-radius: 12px; padding: 12px 14px; margin-top: 10px; background: #fcfcfe; }
.action-bloc .tete { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--nuit); }
.action-bloc .tete .rond { width: 30px; height: 30px; border-radius: 50%; background: var(--vert-pale); color: var(--vert-fonce); display: grid; place-items: center; }
.action-bloc .tete .retirer { margin-left: auto; }
.ajouts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.puce { display: inline-flex; align-items: center; gap: 6px; border: 1px dashed var(--vert-trait); background: #fff; color: var(--vert-fonce); border-radius: 99px; padding: 6px 12px; font-size: 13px; font-weight: 600; }
.puce:hover { background: var(--vert-pale); }
.puce.pleine { border-style: solid; background: var(--vert-pale); }

.dest { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px; border: 1px solid var(--trait); border-radius: 9px; background: #fbfbfd; }
.dest .jeton { display: inline-flex; align-items: center; gap: 4px; background: var(--nuit); color: #fff; border-radius: 99px; padding: 3px 4px 3px 10px; font-size: 13px; }
.dest .jeton button { background: none; border: 0; color: #fff; opacity: .7; padding: 0 4px; }
.dest input { border: 0 !important; outline: 0 !important; background: none; flex: 1; min-width: 180px; padding: 4px; }
.equipe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.equipe button { border: 1px solid var(--trait); background: #fff; border-radius: 99px; padding: 3px 10px; font-size: 12.5px; color: var(--doux); }
.equipe button:hover { border-color: var(--vert); color: var(--nuit); }

.apercu { border-left: 3px solid var(--vert); background: var(--vert-pale); border-radius: 10px; padding: 12px 14px; }
.apercu.vide { border-color: var(--trait); background: var(--fond); }
.apercu b { color: var(--nuit); }
.apercu ul { list-style: none; margin: 10px 0 0; padding: 0; max-height: 320px; overflow: auto; }
.apercu li { padding: 6px 0; border-top: 1px solid rgba(47,158,28,.15); font-size: 13px; display: flex; gap: 8px; }
.apercu li .q { color: var(--doux); white-space: nowrap; }
.apercu li .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.deux-col { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }
.erreur { color: var(--rouge); font-size: 13.5px; margin-top: 10px; }

/* règles */
.regle { display: flex; gap: 14px; align-items: flex-start; }
.regle .ordre { display: flex; flex-direction: column; gap: 2px; }
.regle .ordre button { background: none; border: 1px solid var(--trait); border-radius: 7px; padding: 2px; color: var(--doux); display: grid; place-items: center; }
.regle .ordre button:disabled { opacity: .3; }
.regle .corps { flex: 1; min-width: 0; }
.regle .corps b { color: var(--nuit); font-size: 15px; }
.regle .phrase { font-size: 13.5px; margin: 3px 0 6px; }
.regle.pause { opacity: .6; }
.interrupteur { position: relative; width: 40px; height: 22px; border-radius: 99px; border: 0; background: var(--trait); flex: none; }
.interrupteur::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.interrupteur.oui { background: var(--vert-fonce); }
.interrupteur.oui::after { left: 21px; }

table.tab { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tab th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--doux); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--trait); }
table.tab td { padding: 8px; border-bottom: 1px solid var(--trait); vertical-align: top; }
table.tab td.q { white-space: nowrap; color: var(--doux); }

.vide-grand { text-align: center; color: var(--doux); padding: 48px 16px; }
.vide-grand .rond { width: 68px; height: 68px; margin: 0 auto 12px; border-radius: 50%; background: var(--vert-pale); color: var(--vert-fonce); display: grid; place-items: center; }
.vide-grand .rond svg.i { width: 32px; height: 32px; stroke-width: 1.5; }
.vide-grand b { display: block; color: var(--nuit); font-size: 16px; margin-bottom: 4px; }

.connexion { max-width: 380px; margin: 9vh auto 0; text-align: center; }
.connexion .logo-grand { width: 210px; margin: 0 auto 22px; display: block; }
.connexion h1 { font-size: 22px; }
.connexion p { color: var(--doux); margin: 4px 0 18px; }
.connexion .champ { text-align: left; }
.connexion .btn { width: 100%; margin-top: 16px; padding: 12px; }

#toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 10px); z-index: 30; background: var(--nuit); color: #fff; padding: 11px 18px; border-radius: 12px; opacity: 0; transition: .25s; pointer-events: none; display: flex; gap: 8px; align-items: center; max-width: calc(100vw - 32px); }
#toast.vu { opacity: 1; transform: translate(-50%, 0); }
#toast svg.i { color: var(--vert); }
.roue { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--vert-pale); border-top-color: var(--vert); animation: tourne .9s linear infinite; display: inline-block; vertical-align: middle; }
@keyframes tourne { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .volets, .deux-col { grid-template-columns: 1fr; }
  .liste { position: static; max-height: none; }
  .volets.detail-ouvert .liste { display: none; }
  .barre { flex-wrap: wrap; padding: 10px 16px; }
  .barre nav { order: 3; flex-basis: 100%; margin-left: 0; }
  main { padding: 14px 16px 60px; }
  .cond { grid-template-columns: 1fr 1fr 34px; }
  .cond input { grid-column: 1 / 3; }
}