:root {
  --fond: #ecefef;
  --surface: #ffffff;
  --encre: #17262d;
  --doux: #5d7078;
  --trait: #d3dbdb;
  --accent: #1f6f6b;
  --accent-clair: #e3efee;
  --alerte: #a33823;
  --ambre: #a97a11;
  --rayon: 6px;
  --ombre: 0 1px 2px rgba(23, 38, 45, .08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

a { color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.evitement {
  position: absolute; left: -9999px;
}
.evitement:focus { left: 8px; top: 8px; background: #fff; padding: 8px; z-index: 10; }

/* ---------- Bandeau ---------- */
.bandeau {
  background: var(--encre);
  color: #eef3f3;
  position: sticky; top: 0; z-index: 5;
}
.bandeau__interieur {
  max-width: 1180px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.marque {
  color: #fff; text-decoration: none; font-weight: 650; font-size: 1.05rem;
  letter-spacing: -.01em;
}
.menu { display: flex; gap: 16px; flex-wrap: wrap; margin-right: auto; }
.menu a {
  color: #b9cbcb; text-decoration: none; padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.menu a:hover { color: #fff; }
.menu a[aria-current="page"] { color: #fff; border-bottom-color: #6fb3ac; }
.bandeau__actions { display: flex; gap: 8px; }

.page { max-width: 1180px; margin: 0 auto; padding: 24px 20px 64px; }
.pied {
  max-width: 1180px; margin: 0 auto; padding: 0 20px 32px;
  color: var(--doux); font-size: .85rem;
}

/* ---------- Éléments communs ---------- */
.titre-page { font-size: 1.4rem; font-weight: 650; margin: 0 0 20px; letter-spacing: -.01em; }

.bouton {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--trait); background: var(--surface); color: var(--encre);
  border-radius: var(--rayon); padding: 7px 14px; font: inherit; font-size: .9rem;
  cursor: pointer; text-decoration: none;
}
.bouton:hover { border-color: var(--accent); color: var(--accent); }
.bouton--plein { background: var(--accent); border-color: var(--accent); color: #fff; }
.bouton--plein:hover { background: #185a56; color: #fff; }
.bouton--discret { background: transparent; }
.bandeau .bouton--discret { color: #b9cbcb; border-color: #3c525a; }
.bandeau .bouton--discret:hover { color: #fff; border-color: #6fb3ac; }
.bouton--mini { padding: 3px 9px; font-size: .82rem; }
.bouton--icone { padding: 2px 7px; font-size: .85rem; line-height: 1.4; }
.bouton--danger { color: var(--alerte); border-color: #e2c0b8; }
.bouton--danger:hover { background: var(--alerte); color: #fff; border-color: var(--alerte); }

.message {
  background: var(--accent-clair); border-left: 3px solid var(--accent);
  padding: 10px 14px; border-radius: 0 var(--rayon) var(--rayon) 0; margin: 0 0 20px;
}
.erreurs {
  background: #fbeeea; border-left: 3px solid var(--alerte);
  padding: 10px 14px 10px 32px; border-radius: 0 var(--rayon) var(--rayon) 0; margin: 0 0 20px;
}
.erreurs--une { list-style: none; padding-left: 14px; }
.vide { color: var(--doux); background: var(--surface); padding: 24px; border-radius: var(--rayon); }
.aide { color: var(--doux); font-size: .82rem; }
.decompte { color: var(--doux); font-size: .88rem; margin: 16px 0 8px; }

.champ { display: block; margin-bottom: 12px; }
.champ > span { display: block; font-size: .82rem; color: var(--doux); margin-bottom: 3px; }
input[type=text], input[type=search], input[type=url], input[type=password],
input[type=date], input[type=datetime-local], input[type=number], select, textarea {
  width: 100%; padding: 7px 9px; font: inherit; font-size: .95rem;
  border: 1px solid var(--trait); border-radius: var(--rayon); background: #fff; color: var(--encre);
}
input[type=color] { width: 44px; height: 34px; padding: 2px; border: 1px solid var(--trait); border-radius: var(--rayon); background: #fff; }
.case { display: block; font-size: .92rem; margin: 2px 0; }
.case input { margin-right: 6px; }
.puce { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: baseline; }

/* ---------- Rappels ---------- */
.alertes {
  background: #fff6e3; border: 1px solid #ecd9ad; border-radius: var(--rayon);
  padding: 12px 16px; margin-bottom: 20px;
}
.alertes__resume { margin: 0 0 6px; font-weight: 600; color: #6d4d05; }
.alertes__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.alertes__liste li { display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; font-size: .9rem; }
.alertes__quand { color: var(--ambre); }
.alertes__quand.est-retard { color: var(--alerte); }

/* ---------- Filtres ---------- */
.filtres {
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 14px 16px; box-shadow: var(--ombre);
}
.filtres__ligne { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.filtres__ligne .champ { margin-bottom: 0; flex: 0 0 170px; }
.champ--large { flex: 1 1 260px !important; }
.filtres__boutons { display: flex; gap: 8px; }
.filtres__plus { margin-top: 12px; border-top: 1px solid var(--trait); padding-top: 10px; }
.filtres__plus summary { cursor: pointer; color: var(--accent); font-size: .9rem; }
.filtres__grille {
  display: grid; gap: 16px; margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.filtres__grille fieldset { border: 1px solid var(--trait); border-radius: var(--rayon); padding: 8px 12px 12px; margin: 0; }
.filtres__grille legend { font-size: .8rem; color: var(--doux); padding: 0 4px; }
.filtres--simple { display: flex; gap: 12px; align-items: flex-end; }
.filtres--simple .champ { margin-bottom: 0; min-width: 200px; }

/* ---------- Liste des tâches ---------- */
.taches { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tache {
  background: var(--surface); border: 1px solid var(--trait); border-left: 3px solid var(--trait);
  border-radius: var(--rayon); padding: 12px 14px; box-shadow: var(--ombre);
  display: grid; gap: 6px; position: relative;
}
.tache.est-retard { border-left-color: var(--alerte); }
.tache.est-close { opacity: .68; }
.tache__haut { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; }
.tache__titre { font-weight: 600; font-size: 1.02rem; text-decoration: none; color: var(--encre); }
.tache__titre:hover { color: var(--accent); }
.tache__meta { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: .85rem; color: var(--doux); align-items: center; }
.tache__extrait { margin: 0; color: var(--doux); font-size: .9rem; }
.tache__action { display: flex; gap: 6px; }
.est-close .tache__titre { text-decoration: line-through; text-decoration-thickness: 1px; }

.echeance { white-space: nowrap; }
.est-retard .echeance { color: var(--alerte); font-weight: 600; }
.marqueur { color: var(--doux); }

.pastille {
  --teinte: var(--doux);
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 1px 10px; font-size: .8rem;
  background: color-mix(in srgb, var(--teinte) 12%, white);
  color: color-mix(in srgb, var(--teinte) 75%, black);
  border: 1px solid color-mix(in srgb, var(--teinte) 30%, white);
}
.pastille--vide { background: #f2f5f5; color: var(--doux); border-color: var(--trait); }

.statut { font-size: .78rem; padding: 1px 9px; border-radius: 999px; white-space: nowrap; }
.statut--prevision { background: #eef2f6; color: #46596b; }
.statut--encours   { background: #fdf1d8; color: #7d5a05; }
.statut--finie     { background: #e2f0e6; color: #256339; }
.statut--annulee   { background: #f0f1f1; color: #6c7777; }

.sous-compteur { display: inline-flex; align-items: center; gap: 6px; }
.sous-compteur__jauge { display: inline-block; width: 46px; height: 5px; background: var(--trait); border-radius: 3px; overflow: hidden; }
.sous-compteur__jauge i { display: block; height: 100%; background: var(--accent); }

.pagination { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 20px; }
.pagination a, .pagination span {
  padding: 4px 10px; border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--surface); text-decoration: none;
}
.pagination span[aria-current] { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---------- Fiche ---------- */
.fiche { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.fiche__principal, .fiche__cote {
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 18px; box-shadow: var(--ombre);
}
.champ--titre input { font-size: 1.15rem; font-weight: 600; }
.bloc { border: 1px solid var(--trait); border-radius: var(--rayon); padding: 10px 14px 14px; margin: 18px 0 0; }
.bloc legend { font-size: .82rem; color: var(--doux); padding: 0 4px; }
.sous-champ { display: flex; gap: 8px; align-items: center; }
.sous-champ select { flex: 1 1 auto; }
.sous-champ input[type=number] { width: 80px; flex: 0 0 auto; }
.fiche__valider { display: flex; gap: 8px; margin-top: 18px; }

.liste-modifiable { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.rang { display: flex; gap: 8px; align-items: center; }
.rang input[type=text], .rang input[type=url] { flex: 1 1 auto; }
.rang__outils { display: flex; gap: 3px; flex: 0 0 auto; }

#editeur { background: #fff; min-height: 220px; }
#editeur .ql-editor { font-size: .97rem; }

.documents { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.documents li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.documents__info { color: var(--doux); font-size: .8rem; }
.case--retirer { font-size: .8rem; color: var(--alerte); }

.suppression { display: flex; gap: 12px; align-items: center; margin-top: 20px; flex-wrap: wrap; }

/* ---------- Kanban ---------- */
.kanban { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; align-items: start; }
.colonne { background: #e3e8e8; border-radius: var(--rayon); padding: 10px; min-height: 120px; }
.colonne.survol { background: var(--accent-clair); outline: 2px dashed var(--accent); }
.colonne__titre { font-size: .95rem; margin: 0 0 10px; display: flex; justify-content: space-between; }
.colonne__nombre { color: var(--doux); font-weight: 400; }
.colonne__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-height: 40px; }
.colonne__vide { color: var(--doux); font-size: .85rem; margin: 6px 2px; }
.carte {
  background: var(--surface); border: 1px solid var(--trait); border-left: 3px solid var(--trait);
  border-radius: var(--rayon); padding: 10px; display: grid; gap: 6px; cursor: grab;
}
.carte.est-retard { border-left-color: var(--alerte); }
.carte.deplacee { opacity: .4; }
.carte__titre { text-decoration: none; color: var(--encre); font-weight: 600; font-size: .94rem; }
.carte__meta { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: .8rem; color: var(--doux); align-items: center; }
.carte__deplacer select { font-size: .8rem; padding: 3px 6px; }

/* ---------- Calendrier ---------- */
.calendrier__barre { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.calendrier__mois { font-size: 1.2rem; margin: 0 auto 0 0; font-weight: 650; }
.calendrier { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; }
.calendrier__entete, .calendrier__grille { display: grid; grid-template-columns: repeat(7, 1fr); }
.calendrier__entete div { padding: 8px; font-size: .8rem; color: var(--doux); border-bottom: 1px solid var(--trait); }
.calendrier__entete .court { display: none; }
.jour { min-height: 96px; border-right: 1px solid var(--trait); border-bottom: 1px solid var(--trait); padding: 6px; }
.jour--vide { background: #f6f8f8; }
.jour--auj { background: var(--accent-clair); }
.jour__numero { font-size: .8rem; color: var(--doux); margin-bottom: 4px; }
.jour__numero a { text-decoration: none; color: inherit; }
.jour__numero a:hover { color: var(--accent); text-decoration: underline; }
.jeton {
  --teinte: var(--accent);
  display: block; font-size: .78rem; text-decoration: none; margin-bottom: 3px;
  padding: 2px 6px; border-radius: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  background: color-mix(in srgb, var(--teinte) 14%, white);
  color: color-mix(in srgb, var(--teinte) 78%, black);
  border-left: 3px solid var(--teinte);
}
.jeton--finie, .jeton--annulee { opacity: .55; text-decoration: line-through; }

/* ---------- Catégories, paramètres ---------- */
.ajout-categorie { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; background: var(--surface);
  border: 1px solid var(--trait); border-radius: var(--rayon); padding: 14px; margin-bottom: 20px; }
.ajout-categorie .champ { margin-bottom: 0; }
.categories { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.categories li { display: flex; gap: 10px; align-items: center; background: var(--surface);
  border: 1px solid var(--trait); border-radius: var(--rayon); padding: 10px 14px; flex-wrap: wrap; }
.categorie { display: flex; gap: 10px; align-items: center; flex: 1 1 auto; flex-wrap: wrap; }
.categorie input[type=text] { flex: 1 1 160px; }
.categorie__nb { font-size: .85rem; color: var(--doux); white-space: nowrap; }

.panneau { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 18px; margin-bottom: 18px; box-shadow: var(--ombre); }
.panneau h2 { font-size: 1.02rem; margin: 0 0 12px; }
.formulaire-etroit { max-width: 420px; }
.stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .92rem; }
.stats code { font-size: .85rem; background: #f1f4f4; padding: 1px 5px; border-radius: 3px; word-break: break-all; }

.connexion { max-width: 340px; margin: 40px auto; background: var(--surface);
  border: 1px solid var(--trait); border-radius: var(--rayon); padding: 24px; box-shadow: var(--ombre); }

/* ---------- Fiche en consultation ---------- */
.fiche-vue {
  background: var(--surface); border: 1px solid var(--trait); border-left: 3px solid var(--trait);
  border-radius: var(--rayon); padding: 20px 24px 24px; box-shadow: var(--ombre);
}
.fiche-vue.est-retard { border-left-color: var(--alerte); }
.fiche-vue__entete { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.fiche-vue__titre { font-size: 1.35rem; font-weight: 650; margin: 0 0 8px; letter-spacing: -.01em; }
.fiche-vue__rappel { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0; font-size: .88rem; color: var(--doux); }
.fiche-vue__outils { display: flex; gap: 8px; }
.fiche-vue__actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

.fiches-champs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 24px; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--trait);
}
.fiches-champs dt { font-size: .78rem; color: var(--doux); }
.fiches-champs dd { margin: 1px 0 0; font-size: .95rem; }

.fiche-vue__bloc { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--trait); }
.fiche-vue__bloc h2 { font-size: .95rem; margin: 0 0 10px; display: flex; gap: 8px; align-items: baseline; }
.fiche-vue__nombre { color: var(--doux); font-weight: 400; font-size: .85rem; }

.contenu-riche { font-size: .97rem; }
.contenu-riche > :first-child { margin-top: 0; }
.contenu-riche > :last-child { margin-bottom: 0; }
.contenu-riche h1, .contenu-riche h2, .contenu-riche h3 { line-height: 1.25; margin: 1.2em 0 .4em; }
.contenu-riche h1 { font-size: 1.3rem; }
.contenu-riche h2 { font-size: 1.12rem; }
.contenu-riche h3 { font-size: 1rem; }
.contenu-riche blockquote {
  margin: 1em 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--trait); color: var(--doux);
}
.contenu-riche pre, .contenu-riche code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .88rem;
  background: #f1f4f4; border-radius: 4px;
}
.contenu-riche pre { padding: 10px 12px; overflow-x: auto; }
.contenu-riche code { padding: 1px 5px; }
.contenu-riche table { border-collapse: collapse; }
.contenu-riche td, .contenu-riche th { border: 1px solid var(--trait); padding: 4px 8px; }
.contenu-riche .ql-align-center { text-align: center; }
.contenu-riche .ql-align-right { text-align: right; }
.contenu-riche .ql-align-justify { text-align: justify; }
.contenu-riche .ql-indent-1 { padding-left: 3em; }
.contenu-riche .ql-indent-2 { padding-left: 6em; }
.contenu-riche .ql-indent-3 { padding-left: 9em; }
.contenu-riche .ql-size-small { font-size: .82em; }
.contenu-riche .ql-size-large { font-size: 1.3em; }
.contenu-riche .ql-size-huge { font-size: 1.7em; }
.contenu-riche .ql-font-monospace { font-family: ui-monospace, Menlo, Consolas, monospace; }

.cocher { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.cocher li { display: flex; gap: 9px; align-items: baseline; font-size: .95rem; }
.cocher__case {
  flex: 0 0 auto; width: 16px; height: 16px; border: 1px solid var(--trait); border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center; font-size: .75rem;
  color: var(--accent); background: #fff; transform: translateY(2px);
}
.cocher .est-faite { color: var(--doux); text-decoration: line-through; text-decoration-thickness: 1px; }
.cocher .est-faite .cocher__case { background: var(--accent-clair); border-color: var(--accent); }

.liens-vue { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: .95rem; }
.liens-vue .aide { margin-left: 8px; }

@media (max-width: 640px) {
  .fiche-vue { padding: 16px; }
  .fiche-vue__outils { width: 100%; }
}

/* ---------- Écrans étroits ---------- */
@media (max-width: 900px) {
  .fiche { grid-template-columns: 1fr; }
  .kanban { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .bandeau__interieur { gap: 12px; padding: 10px 14px; }
  .menu { gap: 12px; font-size: .92rem; order: 3; width: 100%; }
  .page { padding: 16px 14px 48px; }
  .kanban { grid-template-columns: 1fr; }
  .carte { cursor: default; }
  .filtres__ligne .champ { flex: 1 1 100%; }
  .calendrier__entete .long { display: none; }
  .calendrier__entete .court { display: inline; }
  .calendrier__entete div { text-align: center; }
  .jour { min-height: 62px; padding: 3px; }
  .jour__numero { margin-bottom: 2px; }
  .jeton { font-size: .68rem; padding: 1px 3px; }
  .tache__haut { flex-direction: column; gap: 4px; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}