/* Mobile d'abord : l'equipe consulte depuis un telephone. Les regles larges
   n'interviennent qu'au-dela de 40rem. */
:root {
  --fond: #f6f7f9;
  --carte: #fff;
  --trait: #dfe3e8;
  --texte: #1c2128;
  --doux: #5b6675;
  --accent: #2f6feb;
  --alerte: #c8341f;
  --ok: #1f7a4d;
  --rayon: 10px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texte);
  background: var(--fond);
}
header {
  display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center;
  padding: .75rem 1rem; background: var(--carte); border-bottom: 1px solid var(--trait);
}
.marque { font-weight: 700; text-decoration: none; color: var(--texte); }
header nav { display: flex; gap: 1rem; }
header nav a { color: var(--doux); text-decoration: none; }
header nav a:hover { color: var(--accent); }
.moi { margin-left: auto; display: flex; align-items: center; gap: .75rem; color: var(--doux); font-size: .9rem; }
main { padding: 1rem; max-width: 60rem; margin: 0 auto; }
h1 { font-size: 1.4rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
.carte { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1rem; }
.etroite { max-width: 32rem; }
.barre { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.filtres { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; align-items: center; }
.case { display: flex; align-items: center; gap: .4rem; color: var(--doux); }
label { display: block; margin-bottom: .9rem; color: var(--doux); font-size: .9rem; }
input, select, textarea {
  display: block; width: 100%; margin-top: .3rem; padding: .55rem .6rem;
  font: inherit; color: var(--texte);
  border: 1px solid var(--trait); border-radius: 6px; background: #fff;
}
textarea { resize: vertical; }
button, .bouton {
  display: inline-block; padding: .55rem 1rem; font: inherit; font-weight: 600;
  color: #fff; background: var(--accent); border: 0; border-radius: 6px;
  cursor: pointer; text-decoration: none; text-align: center;
}
button:hover, .bouton:hover { filter: brightness(.93); }
button.lien, .lien { background: none; color: var(--doux); padding: 0; font-weight: 400; text-decoration: underline; }
.ligne { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-start; }
.ligne > * { flex: 1 1 8rem; margin-bottom: 0; }
.ligne button { flex: 0 0 auto; }
.tache {
  display: block; padding: .8rem 1rem; margin-bottom: .6rem; text-decoration: none; color: inherit;
  background: var(--carte); border: 1px solid var(--trait); border-left: 4px solid var(--trait);
  border-radius: var(--rayon);
}
.tache:hover { border-color: var(--accent); }
.tache .titre { font-weight: 600; }
.tache .sous { color: var(--doux); font-size: .85rem; margin-top: .2rem; display: flex; gap: .75rem; flex-wrap: wrap; }
.tache[data-statut="termine"] .titre { text-decoration: line-through; color: var(--doux); }
.tache[data-statut="annule"] { opacity: .55; }
.tache.retard { border-left-color: var(--alerte); }
.retard .echeance { color: var(--alerte); font-weight: 600; }
.etiquette { display: inline-block; padding: .1rem .5rem; border-radius: 99px; background: var(--fond); border: 1px solid var(--trait); font-size: .8rem; }
dl.meta { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: 0 0 1.2rem; font-size: .9rem; }
dl.meta dt { color: var(--doux); }
dl.meta dd { margin: 0; }
ul.liens { list-style: none; padding: 0; margin: 0 0 1rem; }
ul.liens li { padding: .4rem 0; border-bottom: 1px solid var(--trait); font-size: .9rem; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .5rem .4rem; border-bottom: 1px solid var(--trait); }
th { color: var(--doux); font-weight: 600; }
.message { padding: .7rem 1rem; border-radius: 6px; margin-bottom: 1rem; }
.message.erreur { background: #fdecea; color: var(--alerte); border: 1px solid #f5c6c0; }
.message.succes { background: #e8f5ee; color: var(--ok); border: 1px solid #b9e0ca; }
.jeton { font-family: ui-monospace, monospace; font-size: .85rem; word-break: break-all; background: var(--fond); padding: .6rem; border-radius: 6px; border: 1px solid var(--trait); }
.aide { color: var(--doux); font-size: .9rem; }
.attente { color: var(--doux); }
.vide { color: var(--doux); padding: 2rem 0; text-align: center; }
.retour { display: inline-block; margin-bottom: .8rem; color: var(--doux); text-decoration: none; font-size: .9rem; }
@media (min-width: 40rem) {
  main { padding: 2rem 1rem; }
  h1 { font-size: 1.7rem; }
}

.choix { display: block; width: 100%; text-align: left; padding: .7rem .9rem; margin-bottom: .5rem;
  background: var(--carte); color: var(--texte); border: 1px solid var(--trait); border-radius: var(--rayon);
  font-weight: 400; cursor: pointer; }
.choix:hover { border-color: var(--accent); filter: none; }
.choix[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 600; }
.choix[disabled] { cursor: default; opacity: 1; }
.choix .compte { float: right; color: var(--doux); font-weight: 400; font-size: .9rem; }
.choix .votants { display: block; color: var(--doux); font-size: .82rem; margin-top: .25rem; }
.jauge { height: 4px; background: var(--fond); border-radius: 2px; margin-top: .45rem; overflow: hidden; }
.jauge span { display: block; height: 100%; background: var(--accent); }

/* Le seul geste irreversible de l'interface : il ne doit pas ressembler aux
   autres boutons. Contour plutot que aplat, pour qu'on ne le clique pas par
   elan. */
button.danger {
  color: #b3261e; background: none;
  border: 1px solid #b3261e;
}
button.danger:hover { background: #b3261e; color: #fff; filter: none; }

/* Emailing. Le reste de l'interface est pense pour un telephone ; cette
   rubrique-ci ne l'est pas — on n'ecrit pas une campagne sur un ecran de
   poche. Elle reste donc en une colonne par defaut, comme tout le reste, et
   ne se dedouble qu'a partir d'une largeur ou l'editeur et son apercu tiennent
   cote a cote sans s'ecraser. */
.colonnes { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 60rem) {
  .colonnes { grid-template-columns: 1fr 1fr; }
}
.colonnes textarea {
  width: 100%; box-sizing: border-box; font-family: ui-monospace, monospace;
  font-size: .85rem; line-height: 1.45; resize: vertical;
}
.recap { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.2rem; margin: 0; }
.recap dt { color: var(--doux); font-size: .9rem; }
.recap dd { margin: 0; }
.apercu {
  width: 100%; height: 32rem; border: 1px solid var(--trait);
  border-radius: 6px; background: #fff;
}
/* Le statut d'une campagne se lit d'un coup d'oeil dans la liste : ce qui est
   parti ne se retouche plus, autant que cela se voie. */
.campagne .etiquette[data-statut="envoyee"] { border-color: var(--ok); color: var(--ok); }
.campagne .etiquette[data-statut="erreur"] { border-color: var(--alerte); color: var(--alerte); }
.campagne .etiquette[data-statut="envoi_en_cours"] { border-color: var(--accent); color: var(--accent); }