/* Charte Agence 1400 : fond gris chaud, encre noire, accent bronze/doré. */
:root {
  --fond: #DEDCD8;
  --surface: #F4F3F0;
  --surface-2: #EAE8E3;
  --encre: #000000;
  --encre-douce: rgba(0, 0, 0, 0.58);
  --encre-faible: rgba(0, 0, 0, 0.38);
  --accent: #A28E6F;
  --accent-doux: rgba(162, 142, 111, 0.16);
  --ligne: rgba(0, 0, 0, 0.1);
  --sauge: #748159;
  --sauge-doux: rgba(116, 129, 89, 0.16);
  --ocre: #B4823C;
  --ocre-doux: rgba(180, 130, 60, 0.16);
  --terracotta: #A85340;
  --terracotta-doux: rgba(168, 83, 64, 0.14);
  --bleu: #3E6E96;
  --bleu-doux: rgba(62, 110, 150, 0.14);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: 'Lato', -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: 'Cinzel', serif;
  font-weight: 500;
  margin: 0;
}

.enveloppe { max-width: 960px; margin: 0 auto; padding: 1.5rem; }

.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.logo { display: flex; align-items: center; gap: 12px; }
.logo img { height: 80px; width: auto; display: block; }
.logo-texte { font-family: 'Cinzel', serif; font-size: 17px; }

.carte {
  background: var(--surface);
  border-radius: 0px;
  padding: 1rem;
  margin-bottom: 12px;
  margin-top: 30px;
}

.grille-taches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.badge {
  display: inline-block;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 0;
  font-weight: 500;
  background: var(--surface-2);
  color: var(--encre-douce);
}

/* Couleurs d'état parlantes, harmonisées entre tâches et sous-tâches
   (décision Laeti) : gris = pas commencé / en pause, orange = en cours de
   travail ou de retouche (chez Laeti ou chez le client), bleu = en attente
   d'une validation, vert = validé. Indépendantes de la charte graphique de
   la marque. */
.badge-a-faire { background: var(--surface-2); color: var(--encre-douce); }
.badge-en-pause { background: var(--surface-2); color: var(--encre-faible); font-style: italic; }
.badge-en-cours, .badge-modifs-en-cours, .badge-demande-modif, .badge-modif { background: var(--ocre-doux); color: var(--ocre); }
.badge-en-attente-client { background: var(--bleu-doux); color: var(--bleu); }
.badge-validee { background: var(--sauge-doux); color: var(--sauge); font-weight: 600; }

.panneau-notifs {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  width: 320px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--surface);
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  z-index: 60;
}
.panneau-notifs.visible { display: block; }
.notif-ligne {
  display: block;
  padding: 10px 14px;
  border-bottom: 1px solid var(--surface-2);
  text-decoration: none;
  color: var(--encre);
}
.notif-ligne:last-child { border-bottom: none; }
.notif-ligne:hover { background: var(--surface-2); }
.notif-ligne.notif-non-lue { background: var(--bleu-doux); }
.notif-ligne.notif-non-lue:hover { background: var(--bleu-doux); filter: brightness(0.97); }

.bouton {
  display: inline-block;
  font-family: inherit;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 0;
  border: 1px solid var(--encre-faible);
  background: transparent;
  color: var(--encre);
  cursor: pointer;
  text-decoration: none;
}
.bouton:hover { background: rgba(0, 0, 0, 0.05); }
.bouton-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.bouton-danger {
  border-color: var(--terracotta);
  color: var(--terracotta);
}

input[type=text], input[type=number], input[type=date], input[type=email], input[type=password], select, textarea {
  font-family: inherit;
  font-size: 13px;
  padding: 7px 10px;
  border-radius: 0;
  border: 1px solid var(--ligne);
  background: #fff;
  color: var(--encre);
}

.champ-groupe { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.champ-groupe label { font-size: 11px; color: var(--encre-douce); }

.alerte {
  border-radius: 0;
  padding: 10px 12px;
  font-size: 12px;
  margin-bottom: 12px;
}
.alerte-danger { background: rgba(168, 83, 64, 0.12); color: var(--terracotta); }
.alerte-ok { background: rgba(116, 129, 89, 0.14); color: var(--sauge); }

.muted { color: var(--encre-douce); }
.faible { color: var(--encre-faible); }

.lien-discret { color: var(--encre-douce); font-size: 12px; text-decoration: underline; }

table.simple { width: 100%; border-collapse: collapse; font-size: 13px; }
table.simple th, table.simple td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--ligne); }

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal-overlay.visible { display: flex; }
.modal-panel {
  background: var(--surface);
  padding: 24px;
  max-width: 420px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 0;
}

/* Jauge d'avancement : verte si dans les temps, rouge si retard, grise si
   pas encore éligible / pas de données. */
.jauge {
  height: 6px;
  background: var(--surface-2);
  width: 100%;
  margin-top: 8px;
  overflow: hidden;
}
.jauge-remplissage { height: 100%; transition: width 0.3s ease; }

/* Barre persistante du chronomètre, affichée sur toutes les pages admin
   tant qu'un chrono tourne. */
.chrono-barre {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface);
  border-left: 3px solid var(--sauge);
  padding: 10px 16px;
  margin-bottom: 20px;
  font-size: 13px;
  flex-wrap: wrap;
  gap: 10px;
}
.chrono-point {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sauge);
  margin-right: 8px;
  animation: chrono-clignote 1.6s ease-in-out infinite;
}
@keyframes chrono-clignote {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}