/*
 * Les couleurs de la maison : #DAFB57, #090909, #FFFFFF.
 *
 * Les ecrans sont ecrits en variables : il suffit de les redefinir ici, charge
 * en dernier, pour habiller tout l'outil sans toucher une seule page. Les
 * parties ajoutees plus tard heriteront de la meme palette sans rien faire.
 *
 * Qui porte quoi :
 *   #FFFFFF  le fond, partout. Un outil de service client se lit toute la
 *            journee sur un ecran de bureau : le blanc reste le plus lisible.
 *   #090909  le texte, les bordures et les traits. Les gris ne sont pas des
 *            couleurs a part : ce sont ce noir a differentes opacites, ce qui
 *            garde l'ensemble d'une seule piece.
 *   #DAFB57  l'action et l'etat. Il ne sert QUE la : bouton principal, onglet
 *            ouvert, colis a l'heure, anneau de focus, mail selectionne. Une
 *            couleur rare est une couleur qui se voit.
 *
 * Le vert clair est lumineux (L ~ 93 %) : lisible sur noir, illisible sur
 * blanc. Il ne porte donc jamais de texte sur fond clair, jamais un trait fin
 * tout seul, et jamais une information qu'un mot ne dit pas a cote.
 *
 * Le rouge des erreurs reste : une alerte qui ressemble au reste n'alerte plus.
 */

:root {
  --paper: #FFFFFF;
  --panel: #FFFFFF;
  /* Un fond souleve a peine teinte de vert : la palette tient jusque dans les gris. */
  --raise: #F5F7EF;

  --line: rgba(9, 9, 9, .10);
  --line-2: rgba(9, 9, 9, .22);
  --mute: rgba(9, 9, 9, .56);
  --soft: rgba(9, 9, 9, .78);
  --ink: #090909;

  --lime: #DAFB57;
  --lime-fonce: #C6E842;
  --lime-voile: rgba(218, 251, 87, .45);

  /* « vert » servait aux etats positifs : en texte il devient l'encre (lisible),
     en pastille il devient le vert clair (visible). */
  --vert: #090909;

  --ombre: 0 1px 2px rgba(9, 9, 9, .05), 0 10px 28px -14px rgba(9, 9, 9, .16);
}

/* ---------- l'action ---------- */

.btn--plein {
  background: var(--lime);
  color: var(--ink);
  border-color: var(--lime);
}

.btn--plein:hover:not(:disabled) {
  background: var(--ink);
  color: var(--lime);
  border-color: var(--ink);
}

.btn:hover:not(:disabled) { border-color: var(--ink); }

/* ---------- la navigation ---------- */

.rail__i.is-on,
.rail__i.is-on:hover {
  background: var(--lime);
  color: var(--ink);
  font-weight: 600;
}

.note-p.is-on {
  background: var(--lime);
  color: var(--ink);
  border-color: var(--lime);
}

/* ---------- les etats ---------- */

/* La pastille verte sur blanc manquerait de force : un halo la pose. */
.etat.ok .pt,
.pt-l.ok .rond {
  background: var(--lime);
  box-shadow: 0 0 0 3px var(--lime-voile);
}

/* ---------- le focus ---------- */

/* Le trait noir donne le contraste, le halo vert dit que c'est nous. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--lime-voile);
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus,
.item__e:focus,
.style input:focus,
.style textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--lime-voile);
}

/* ---------- le mail ouvert ---------- */

.ticket.is-on {
  border-color: var(--ink);
  border-left-color: var(--lime);
  background: var(--raise);
}

/* ---------- ce qui ne peut pas attendre ---------- */

/*
 * Un compteur qui clignote sur un onglet : assez pour attirer l oeil depuis
 * l autre bout de l ecran, assez lent pour ne pas fatiguer. Il s arrete de
 * lui-meme quand la file est vide, puisque la pastille disparait.
 */
@keyframes urgence {
  0%, 100% { background: var(--rouge, #FF4B4B); box-shadow: 0 0 0 0 rgba(255, 75, 75, .55); }
  50% { background: var(--rouge, #FF4B4B); box-shadow: 0 0 0 6px rgba(255, 75, 75, 0); }
}

.rail__c.clignote {
  background: var(--rouge, #FF4B4B);
  color: #fff;
  animation: urgence 1.6s ease-out infinite;
}

/* Certains ne supportent pas le mouvement : la couleur suffit alors a alerter. */
@media (prefers-reduced-motion: reduce) {
  .rail__c.clignote { animation: none; box-shadow: 0 0 0 3px rgba(255, 75, 75, .35); }
}
/* ---------- la barre d onglets : les volets a gauche, le reste a droite ---------- */

/* Le ressort pousse tout ce qui le suit contre le bord droit. */
.rail__pousse { flex: 1 1 auto; min-width: 12px; }
.rail__trait { flex: none; width: 1px; height: 20px; background: var(--line-2); margin: 0 6px; }
.rail .btn { flex: none; padding: 6px 12px; }
.rail .mini { flex: none; white-space: nowrap; }

/* Toutes les pastilles de compteur en rouge, comme les alertes : une seule couleur pour « il y a du travail ». */
.rail__c { background: var(--rouge, #FF4B4B); color: #fff; }

/* ---------- commande en plusieurs colis : un etage de cartes par colis ---------- */
.liv-note { margin: 0 0 6px; font-size: 13px; color: var(--soft); }
.liv-note b { background: var(--lime); color: var(--ink); padding: 1px 6px; border-radius: 5px; }
.liv + .liv { margin-top: 8px; }

/* ---------- le resume du mail : ce qu'on lit en premier ---------- */
.detail__resume {
  background: var(--lime);
  color: var(--ink);
  border: 0;
  border-left: 4px solid var(--ink);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

/* =====================================================================
 * L'ecran d'un mail se lit de haut en bas, dans l'ordre ou l'on decide :
 *   1. ce qu'il veut (le resume, en vert)
 *   2. ce qu'il faut verifier avant de repondre
 *   3. les faits : la commande, les colis
 *   4. son mail a gauche, ta reponse a droite — qui reste a l'ecran
 * ===================================================================== */

/* 2 — a verifier avant d'envoyer : sous le resume, pas au fond de la carte de reponse */
.avant { border: 1px solid rgba(9, 9, 9, .16); border-left: 4px solid #E8890C; background: #FFF8EE; border-radius: 8px;
  padding: 9px 14px; margin-bottom: 12px; font-size: 13.5px; color: var(--ink); }
.avant b { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: #8A4B00; }
.avant ul { margin: 4px 0 0 18px; }
.avant li { margin: 2px 0; line-height: 1.45; }
.avant--grave { border-left-color: #FF4B4B; background: #FFF1F1; }
.avant--grave b { color: #B01818; }

/* 3 — les faits, en bandeau serre : trois etages de colis tiennent la ou un seul tenait */
.liv { gap: 8px; margin-bottom: 8px; }
.liv__c { padding: 8px 12px; flex-basis: 170px; }
.liv__c span { font-size: 10.5px; }
.liv__c b { font-size: 17px; margin-top: 1px; }
.liv__c b i { font-size: 12.5px; }
.liv__c.est-second b { font-size: 15px; }
.liv__c em { font-size: 11.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.liv__a { gap: 4px; }
.liv__a .btn { padding: 4px 10px; font-size: 12px; }
.liv-note { margin-top: 2px; }
.liv:last-of-type { margin-bottom: 14px; }

/* 4 — la reponse suit le defilement : on lit le mail et les commandes sans la perdre de vue */
.detail__cols > .reponse { position: sticky; top: 10px; }
.reponse textarea { min-height: 260px; }

/* le fil cite, replie sous le mail */
.cite { margin-top: 8px; }
.cite summary { cursor: pointer; font-size: 12.5px; color: var(--mute); }
.cite summary:hover { color: var(--ink); }
.cite .courrier { margin-top: 6px; opacity: .75; max-height: 220px; }

/* le mail ouvert dans la liste : un trait vert franc, pas seulement un fond */
.ticket.is-on { border-left-width: 5px; }

/* l'action principale se reconnait ; les deux autres restent discretes jusqu'au survol */
.actions .btn--plein { padding: 9px 22px; font-size: 14px; font-weight: 650; }
.actions .btn:not(.btn--plein) { opacity: .75; }
.actions .btn:not(.btn--plein):hover { opacity: 1; }

/* ---------- la fenetre du message au fournisseur ---------- */
.voile { position: fixed; inset: 0; background: rgba(9, 9, 9, .45); display: grid; place-items: center; z-index: 50; padding: 24px; }
.voile__boite { background: var(--paper); border-radius: 12px; padding: 18px 20px; width: min(760px, 100%); max-height: 90vh; overflow: auto; box-shadow: var(--ombre); }
.wa { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-top: 12px; }
.wa__h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.wa textarea { width: 100%; min-height: 210px; font-size: 13.5px; line-height: 1.5; margin-bottom: 10px; }
/* le vert de WhatsApp, pour que le bouton se reconnaisse sans le lire */
.btn--wa { border-color: #1FA855; color: #0B6B33; }
.btn--wa:hover:not(:disabled) { background: #1FA855; color: #fff; border-color: #1FA855; }

/* la chronologie, dans le bloc vert : ecrit avant ou apres la livraison ? */
.detail__resume .chrono { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid rgba(9, 9, 9, .22); font-size: 13px; font-weight: 500; }
.detail__resume .chrono li { margin: 2px 0; }
.detail__resume .chrono b { font-weight: 700; }

/* ce que le gerant doit faire de ses mains (rembourser, renvoyer) : en gras, avec une case a cocher mentale */
.avant li.afaire { font-weight: 700; list-style: '☐  '; }

/* ---------- le client mis en attente du fournisseur ---------- */
.wa--client { border-left: 4px solid var(--lime); background: var(--raise); }
.wa--client textarea { min-height: 170px; }
.etiquette--attente { background: var(--ink); color: var(--lime); }

/* ---------- le renvoi fournisseur ---------- */
.renvoi-fournisseur { margin: 8px 0 4px; }
.btn--renvoi { border-color: var(--ink); background: var(--ink); color: var(--lime); font-weight: 650; }
.btn--renvoi:hover:not(:disabled) { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.renvoi__l { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-top: 8px; cursor: pointer; }
.renvoi__l:has(input[type=checkbox]:checked) { border-color: var(--ink); background: var(--raise); box-shadow: inset 4px 0 0 var(--lime); }
.renvoi__l img, .renvoi__sansimage { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); flex: none; background: var(--raise); }
.renvoi__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.renvoi__t i { font-style: normal; font-size: 12.5px; color: var(--soft); }
.renvoi__q { flex: none; font-size: 12px; color: var(--mute); }
.renvoi__q input { width: 56px; margin-left: 4px; }
.renvoi__photos { display: flex; flex-wrap: wrap; gap: 8px; }
.renvoi__photos label { position: relative; cursor: pointer; }
.renvoi__photos img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; }
.renvoi__photos input { position: absolute; top: 6px; left: 6px; }
.renvoi__client { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: var(--raise); font-size: 13px; line-height: 1.5; }
.renvoi__mail { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 13px; cursor: pointer; }

/* la version francaise d'un texte ecrit pour le fournisseur : pour relire, jamais envoyee */
.enfr { margin: 6px 0 10px; }
.enfr summary { cursor: pointer; font-size: 12.5px; color: var(--mute); }
.enfr .courrier { margin: 6px 0; max-height: 220px; font-size: 13px; background: var(--raise); border-left: 3px solid var(--lime); }

/* dans la fenetre du renvoi : la reponse au client qui partira avec */
.renvoi__reponse { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--ink); border-radius: 10px; box-shadow: inset 4px 0 0 var(--lime); }
.renvoi__reponse .courrier { margin-top: 6px; max-height: 200px; font-size: 13px; }

/* ---------- la fiche commande et sa frise : une ligne par colis, cinq etapes ---------- */
.fiche { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 12px 14px; margin: 0 0 14px; }
.fiche__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; }
.fiche__h > b { font-size: 15px; }
.fiche__h > span { font-size: 12.5px; color: var(--soft); }
.fiche__r { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px; }
.repere { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--soft); white-space: nowrap; }
.repere.est-depasse { background: var(--rouge, #FF4B4B); border-color: transparent; color: #fff; font-weight: 600; }
.frise { padding: 8px 0 4px; border-top: 1px solid var(--line); }
.frise__t { font-size: 12.5px; color: var(--soft); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frise__t b { color: var(--ink); }
.frise__t code { font-size: 11.5px; background: var(--raise); padding: 1px 5px; border-radius: 4px; }
.frise__e { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.frise__s { margin: 6px 0 0; font-size: 12px; color: var(--mute); }
.pas { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.pas__b { display: block; width: 100%; height: 6px; border-radius: 3px; background: var(--line); margin-bottom: 5px; }
.pas.est-fait .pas__b { background: var(--ink); }
.pas.est-encours .pas__b { background: var(--lime-fonce); box-shadow: inset 0 0 0 1px rgba(9, 9, 9, .25); }
.pas.est-probleme .pas__b { background: var(--rouge, #FF4B4B); }
.pas > span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); }
.pas > b { font-size: 13.5px; line-height: 1.25; }
.pas.est-probleme > b { color: #c22; }
.pas.est-avenir > span { color: var(--line-2); }
.pas > em { font-style: normal; font-size: 12px; color: var(--soft); }
.pas.est-encours > em, .pas.est-probleme > em { font-weight: 600; color: var(--ink); }
.pas > small { font-size: 11.5px; color: var(--mute); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pas > u { text-decoration: none; font-size: 11px; font-weight: 600; background: var(--lime); color: var(--ink); padding: 1px 6px; border-radius: 5px; margin-top: 3px; }
.pas > .btn { margin-top: 4px; padding: 2px 8px; font-size: 11.5px; }
.hors { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; font-size: 12.5px; padding: 7px 10px; margin-top: 6px; border-radius: 8px; border-left: 3px solid var(--line-2); background: var(--raise); }
.hors.est-probleme { border-left-color: var(--rouge, #FF4B4B); background: #fffafa; }
.hors.est-probleme b { color: #c22; }
.hors.est-encours { border-left-color: var(--lime-fonce); }
.hors.est-fait { border-left-color: var(--ink); }
.hors em { font-style: normal; color: var(--mute); flex-basis: 100%; }
.fiche__a { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.fiche__a .btn { padding: 4px 10px; font-size: 12px; }
@media (max-width: 900px) { .frise__e { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- plusieurs mails du meme client sous une seule ligne ---------- */
.ticket__n { font-style: normal; font-size: 11px; font-weight: 600; background: var(--lime); color: var(--ink); padding: 1px 6px; border-radius: 999px; margin-left: 4px; }

/* ---------- « Aujourd'hui » ---------- */
.accueil { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; align-items: start; }
.tuile { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 14px 16px; }
.tuile.est-vide { opacity: .55; }
.tuile__h { display: flex; align-items: center; gap: 12px; }
.tuile__h > b { font-size: 30px; line-height: 1; min-width: 44px; text-align: center; padding: 8px 6px; border-radius: 10px; background: var(--lime); color: var(--ink); }
.tuile.est-vide .tuile__h > b { background: var(--raise); color: var(--mute); }
.tuile.est-rouge .tuile__h > b { background: var(--rouge, #FF4B4B); color: #fff; }
.tuile__h > div { flex: 1; min-width: 0; }
.tuile__h h2 { font-size: 14.5px; margin: 0; }
.tuile__h p { margin: 2px 0 0; font-size: 12px; color: var(--mute); }
.tuile ul { list-style: none; margin: 10px 0 0; padding: 8px 0 0; border-top: 1px solid var(--line); }
.tuile li { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12.5px; }
.tuile li > span { flex: 1 1 40%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tuile li > em { flex: 0 1 auto; min-width: 0; font-style: normal; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tuile li .btn { flex: none; }
.tuile li .btn { padding: 2px 8px; font-size: 11.5px; }

/* ---------- le journal d'une commande ---------- */
.journal { list-style: none; margin: 8px 0 0; padding: 0; max-height: 60vh; overflow: auto; }
.journal li { display: grid; grid-template-columns: 96px 104px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; align-items: start; }
.journal__q { color: var(--mute); font-size: 12px; }
.journal__t { font-size: 11px; font-weight: 600; text-align: center; padding: 2px 6px; border-radius: 999px; background: var(--raise); border: 1px solid var(--line); }
.journal li.est-mail .journal__t { background: var(--lime); border-color: transparent; }
.journal li.est-reponse .journal__t { background: var(--ink); color: #fff; border-color: transparent; }
.journal li.est-remboursement .journal__t, .journal li.est-renvoi .journal__t { background: var(--rouge, #FF4B4B); color: #fff; border-color: transparent; }
.journal p { margin: 2px 0 4px; color: var(--soft); font-size: 12.5px; }