@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans+Condensed:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500&display=swap');

:root {
  --papier: #e8e7e1;
  --surface: #f4f3ef;
  --encre: #17171b;
  --filet: #c4c3bc;
  --sourdine: #75747c;
  --c: #0e6e9e;   /* production */
  --m: #b02f68;   /* service */
  --j: #c9911a;   /* initiative */
  /* Encres du volley : même famille d'encres de labeur, teintes franchement
     ailleurs dans le cercle pour qu'un coup d'œil suffise à situer le domaine. */
  --v1: #2f7d5a;  /* séance — retour structuré */
  --v2: #6a4c9c;  /* libre  — tout le reste */
  --titre: 'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif;
  --texte: 'IBM Plex Sans', system-ui, sans-serif;
  --data: 'IBM Plex Mono', ui-monospace, monospace;
}

/* Le papier lui-même change de bain selon le domaine : signal périphérique,
   perçu avant même d'avoir lu le sélecteur. Volontairement discret — c'est un
   repère, pas un thème. */
body[data-domaine="volley"] {
  --papier: #e3e7e6;
  --surface: #eff3f2;
  --filet: #bfc5c3;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 15px/1.55 var(--texte);
  -webkit-font-smoothing: antialiased;
}

.page { max-width: 680px; margin: 0 auto; padding: 28px 20px 80px; }

/* ── Entête ─────────────────────────────────────────────────────────── */
.tete { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.tete h1 {
  font: 700 27px/1 var(--titre);
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0;
}
.tete .meta { font: 400 11px/1.4 var(--data); color: var(--sourdine); text-align: right; }

/* ── Sélecteur de domaine ───────────────────────────────────────────────
   Même grammaire que le sélecteur de type, mais en tête de page et en
   contraste inversé : c'est lui qui commande tout le reste de l'écran. */
.domaines {
  display: flex; margin: 16px 0 0;
  border: 1px solid var(--encre);
}
.domaines button {
  flex: 1; background: transparent; border: 0;
  border-right: 1px solid var(--encre); padding: 8px 6px; cursor: pointer;
  font: 700 12px/1 var(--titre); text-transform: uppercase; letter-spacing: .12em;
  color: var(--sourdine);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.domaines button:last-child { border-right: 0; }
.domaines button[aria-pressed="true"] { background: var(--encre); color: var(--papier); }
.domaines button b {
  width: 8px; height: 8px; display: block; background: currentColor; opacity: .45;
}
.domaines button[aria-pressed="true"] b { opacity: 1; }
.domaines button[data-d="pro"] b { color: var(--m); }
.domaines button[data-d="volley"] b { color: var(--v1); }
.domaines button[aria-pressed="true"][data-d="pro"] b { color: var(--m); }
.domaines button[aria-pressed="true"][data-d="volley"] b { color: var(--v1); }

/* ── Bande de contrôle : un carré par entrée, dans son encre ─────────── */
.bande {
  display: flex; flex-wrap: wrap; gap: 2px;
  margin: 18px 0 6px; padding: 7px 8px;
  background: var(--surface); border: 1px solid var(--filet);
  min-height: 34px;
}
.bande i { width: 12px; height: 18px; display: block; }
.bande i[data-t="production"] { background: var(--c); }
.bande i[data-t="service"] { background: var(--m); }
.bande i[data-t="initiative"] { background: var(--j); }
.bande i[data-t="seance"] { background: var(--v1); }
.bande i[data-t="libre"] { background: var(--v2); }
.bande .vide { font: 400 11px/18px var(--data); color: var(--sourdine); }

.legende {
  display: flex; gap: 18px; flex-wrap: wrap;
  font: 400 11px/1 var(--data); color: var(--sourdine);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 26px;
}
.legende span { display: flex; align-items: center; gap: 6px; }
.legende b { width: 9px; height: 9px; display: block; }

/* ── Saisie ─────────────────────────────────────────────────────────── */
.bloc { background: var(--surface); border: 1px solid var(--filet); padding: 16px; margin-bottom: 26px; }
.bloc h2, .liste h2 {
  font: 600 11px/1 var(--data); text-transform: uppercase; letter-spacing: .1em;
  color: var(--sourdine); margin: 0 0 12px;
}

.types { display: flex; gap: 0; margin-bottom: 12px; border: 1px solid var(--filet); }
.types button {
  flex: 1; background: transparent; border: 0; border-right: 1px solid var(--filet);
  padding: 9px 6px; cursor: pointer;
  font: 600 12px/1 var(--titre); text-transform: uppercase; letter-spacing: .05em;
  color: var(--sourdine);
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.types button:last-child { border-right: 0; }
.types button i { width: 9px; height: 9px; display: block; background: currentColor; opacity: .35; }
.types button[aria-pressed="true"] { background: var(--papier); color: var(--encre); }
.types button[aria-pressed="true"] i { opacity: 1; }
.types button[data-t="production"] i { color: var(--c); }
.types button[data-t="service"] i { color: var(--m); }
.types button[data-t="initiative"] i { color: var(--j); }
.types button[data-t="seance"] i { color: var(--v1); }
.types button[data-t="libre"] i { color: var(--v2); }

input, textarea, select {
  width: 100%; background: var(--papier); color: var(--encre);
  border: 1px solid var(--filet); padding: 9px 10px; margin-bottom: 8px;
  font: 400 14px/1.4 var(--texte); border-radius: 0;
}
textarea { resize: vertical; min-height: 62px; }
input:focus, textarea:focus, select:focus, button:focus-visible {
  outline: 2px solid var(--encre); outline-offset: 1px;
}
.duo { display: flex; gap: 8px; }
.duo > * { flex: 1; }
.champ-effort { font: 400 12px/1.4 var(--data); }
/* La durée est facultative : une case étroite, qui ne prend pas la place du
   bénéficiaire et ne se donne pas l'air d'être attendue. */
.champ-heures { flex: 0 0 78px; font: 400 12px/1.4 var(--data); text-align: right; }

.erreur-saisie {
  font: 400 12px/1.5 var(--data); color: var(--encre);
  border-left: 2px solid var(--encre); padding-left: 8px; margin-top: 8px;
}

.envoyer {
  background: var(--encre); color: var(--papier); border: 0; cursor: pointer;
  padding: 11px 20px; font: 600 12px/1 var(--titre);
  text-transform: uppercase; letter-spacing: .09em; width: 100%;
}
.envoyer:disabled { opacity: .4; cursor: default; }

/* ── Focus volley ───────────────────────────────────────────────────
   Les deux objectifs en cours, lus d'un coup d'œil avant de saisir. */
.bloc.focus { padding-bottom: 12px; }
.axe-focus {
  display: grid; grid-template-columns: 9px 62px 1fr auto auto;
  gap: 10px; align-items: baseline;
  padding: 8px 0; border-top: 1px solid var(--filet);
}
.axe-focus:first-child { border-top: 0; }
.axe-focus b { width: 9px; height: 9px; display: block; align-self: center; }
.axe-nom {
  font: 600 11px/1.4 var(--data); text-transform: uppercase;
  letter-spacing: .08em; color: var(--sourdine);
}
.axe-libelle { font: 400 14px/1.4 var(--texte); }
.axe-depuis { font: 400 11px/1.4 var(--data); color: var(--sourdine); white-space: nowrap; }
/* Passé six semaines, l'objectif a fait son temps : il doit se voir. */
.axe-focus[data-revoir="1"] .axe-depuis { color: var(--m); }
.axe-focus[data-revoir="1"] b { box-shadow: 0 0 0 2px var(--m); }
/* Boutons de commande, partagés par l'édition d'objectif et celle d'apport. */
.axe-bouton {
  background: none; border: 1px solid var(--filet); cursor: pointer;
  font: 400 10px/1 var(--data); text-transform: uppercase; letter-spacing: .06em;
  color: var(--sourdine); padding: 5px 7px;
}
.axe-bouton:hover { border-color: var(--encre); color: var(--encre); }
.axe-bouton.primaire { background: var(--encre); border-color: var(--encre); color: var(--papier); }
.axe-bouton:disabled { opacity: .4; cursor: default; }

/* ── Édition en ligne ─────────────────────────────────────────────────
   La saisie se fait là où la valeur s'affiche : pas de boîte du navigateur
   à ouvrir puis refermer, et l'erreur revient au même endroit. */
.axe-edition {
  grid-template-columns: 9px 62px 1fr;
  row-gap: 8px; padding-bottom: 12px;
}
.axe-edition .axe-champ { margin: 0; }
.axe-edition .axe-actions { grid-column: 3; display: flex; gap: 6px; flex-wrap: wrap; }
.axe-aide {
  grid-column: 1 / -1; margin: 0;
  font: 400 11px/1.5 var(--texte); color: var(--sourdine);
}
.axe-erreur {
  grid-column: 1 / -1; margin: 0;
  font: 400 11px/1.5 var(--data); color: var(--m);
}

.apport-edition { display: block; margin-top: 8px; }
.apport-edition .apport-champ { margin-bottom: 6px; font-size: 13px; }
.apport-edition .apport-actions { display: flex; gap: 6px; margin-bottom: 6px; }

@media (max-width: 480px) {
  .axe-focus { grid-template-columns: 9px 1fr auto; }
  .axe-focus .axe-nom { grid-area: 1 / 2; }
  .axe-focus .axe-libelle { grid-area: 2 / 1 / 3 / 3; }
  .axe-focus .axe-depuis { grid-area: 3 / 1 / 4 / 3; }
  .axe-focus .axe-bouton { grid-area: 1 / 3 / 3 / 4; align-self: center; }
  /* En édition, la grille compacte ne convient pas : on repasse en colonnes. */
  .axe-edition { grid-template-columns: 9px 1fr; }
  .axe-edition .axe-nom { grid-area: 1 / 2; }
  .axe-edition .axe-champ { grid-area: 2 / 1 / 3 / 3; }
  .axe-edition .axe-actions { grid-area: 3 / 1 / 4 / 3; grid-column: 1 / -1; }
}

/* ── Liste ──────────────────────────────────────────────────────────── */
.liste ol { list-style: none; margin: 0; padding: 0; }
.liste li {
  display: grid; grid-template-columns: 14px 74px 1fr auto auto;
  gap: 12px; align-items: baseline;
  padding: 11px 0; border-top: 1px solid var(--filet);
}
.liste li .puce { width: 10px; height: 10px; align-self: center; }
.liste li[data-t="production"] .puce { background: var(--c); }
.liste li[data-t="service"] .puce { background: var(--m); }
.liste li[data-t="initiative"] .puce { background: var(--j); }
.liste li[data-t="seance"] .puce { background: var(--v1); }
.liste li[data-t="libre"] .puce { background: var(--v2); }
.liste .jour { font: 400 12px/1.5 var(--data); color: var(--sourdine); }
.liste .titre { font: 400 15px/1.45 var(--texte); }
.liste .benef {
  display: inline-block; font: 400 11px/1 var(--data);
  border: 1px solid var(--filet); padding: 3px 6px; margin-left: 8px;
  color: var(--sourdine); white-space: nowrap;
}
/* Les deux axes d'une séance : même vocabulaire que l'étiquette bénéficiaire,
   mais filetés dans l'encre du domaine pour se lire comme une paire. */
.liste .axe {
  display: inline-block; font: 400 11px/1 var(--data);
  border: 1px solid var(--v1); padding: 3px 6px; margin: 4px 6px 0 0;
  color: var(--sourdine); white-space: nowrap;
}
.liste .axe-def { border-color: var(--v2); }
/* La durée se lit en passant, sans filet : c'est un appoint au titre, pas une
   étiquette de même rang que le bénéficiaire. */
.liste .heures {
  font: 400 11px/1 var(--data); color: var(--sourdine);
  margin-left: 8px; white-space: nowrap;
}
.axes input { font: 400 13px/1.4 var(--texte); }

/* ── Mise en exergue ─────────────────────────────────────────────────
   Un fait marquant se repère avant d'être lu : filet à gauche dans l'encre
   pleine, et repère de calage dans la bande de contrôle. */
.liste li[data-marquant="1"] {
  box-shadow: inset 2px 0 0 var(--encre);
  padding-left: 10px;
}
.liste li[data-marquant="1"] .titre { font-weight: 500; }
.liste .apport {
  display: block; font: 400 12px/1.5 var(--texte);
  color: var(--encre); margin-top: 4px;
  border-left: 2px solid var(--encre); padding-left: 8px;
}
.liste .exergue {
  background: none; border: 0; cursor: pointer; color: var(--filet);
  font: 400 12px/1 var(--data); padding: 2px 4px; align-self: center;
}
.liste .exergue[aria-pressed="true"] { color: var(--encre); }
.liste .exergue:hover { color: var(--sourdine); }

/* Repère de calage : le carré marqué déborde, comme un trait de coupe. */
.bande i[data-marquant="1"] {
  outline: 2px solid var(--encre);
  outline-offset: -1px;
  height: 22px;
  margin-top: -2px;
}

.liste .notes { display: block; font-size: 13px; color: var(--sourdine); margin-top: 3px; }
.liste .sup {
  background: none; border: 0; cursor: pointer; color: var(--sourdine);
  font: 400 15px/1 var(--data); padding: 2px 4px;
}
.liste .sup:hover { color: var(--m); }
.vide-liste { font-size: 14px; color: var(--sourdine); padding: 18px 0; border-top: 1px solid var(--filet); }

/* ── Login ──────────────────────────────────────────────────────────── */
.porte { min-height: 100dvh; display: grid; place-items: center; padding: 20px; }
.porte form { width: 100%; max-width: 300px; text-align: center; }
.porte h1 { font: 700 24px/1 var(--titre); text-transform: uppercase; letter-spacing: -.01em; margin: 0 0 4px; }
.porte p.sous { font: 400 11px/1.5 var(--data); color: var(--sourdine); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 26px; }
.porte .barre { display: flex; gap: 2px; justify-content: center; margin-bottom: 26px; }
.porte .barre i { width: 22px; height: 12px; display: block; background: var(--filet); }
.porte .barre i:nth-child(1) { background: var(--c); }
.porte .barre i:nth-child(2) { background: var(--m); }
.porte .barre i:nth-child(3) { background: var(--j); }
#pin {
  text-align: center; font: 500 26px/1 var(--data);
  letter-spacing: .5em; text-indent: .5em; padding: 14px 0; margin-bottom: 12px;
}
.etat { font: 400 12px/1.5 var(--data); color: var(--sourdine); min-height: 34px; margin-top: 12px; }
.etat.erreur { color: var(--m); }

@media (prefers-reduced-motion: no-preference) {
  .liste li, .bande i { animation: apparait .18s ease-out both; }
  @keyframes apparait { from { opacity: 0; } to { opacity: 1; } }
}
@media (max-width: 480px) {
  .liste li { grid-template-columns: 12px 1fr auto auto; }
  .liste li .puce { grid-area: 1 / 1; }
  .liste li .jour { grid-area: 1 / 2; font-size: 11px; }
  .liste li .corps { grid-area: 2 / 1 / 3 / 5; }
  .liste li .exergue { grid-area: 1 / 3; }
  .liste li .sup { grid-area: 1 / 4; }
  .duo { flex-direction: column; gap: 0; }
}