/* ===========================================================================
   Jetons de design — bone & bleu encre.
   Le thème sombre est défini au niveau des jetons uniquement : aucun composant
   ne contient de règle dans une media query.
   =========================================================================== */

:root {
  --papier: #edebe3;
  --surface: #f7f6f1;
  --creux: #e2dfd4;
  --encre: #16201e;
  --encre-2: #4a544f;
  --encre-3: #7c847d;
  --trait: #cfcbbd;
  --trait-2: #dedace;
  --accent: #2e4a7d;
  --accent-2: #e9edf5;
  --sur-accent: #f7f6f1;
  --ok: #2f6e4f;
  --ok-fond: #e1ede4;
  --alerte: #a9700f;
  --alerte-fond: #f5ead3;
  --critique: #9e3527;
  --critique-fond: #f3e0dc;

  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --r: 3px;
  --ombre: 0 1px 0 rgba(22, 32, 30, 0.05), 0 8px 24px -14px rgba(22, 32, 30, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #101615;
    --surface: #19211f;
    --creux: #131a19;
    --encre: #e6e3d8;
    --encre-2: #a7ada6;
    --encre-3: #767d76;
    --trait: #2b3432;
    --trait-2: #222b29;
    --accent: #8faee2;
    --accent-2: #1b2536;
    --sur-accent: #101615;
    --ok: #7bbe94;
    --ok-fond: #16261e;
    --alerte: #d9a94a;
    --alerte-fond: #2a2216;
    --critique: #de8878;
    --critique-fond: #2b1917;
    --ombre: 0 1px 0 rgba(0, 0, 0, 0.3), 0 8px 24px -14px rgba(0, 0, 0, 0.8);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--papier);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 600;
  text-wrap: balance;
  letter-spacing: -0.01em;
  margin: 0;
}

a {
  color: var(--accent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- structure ------------------------------------------------------------ */

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

.page.etroite {
  max-width: 640px;
}

.bandeau {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 0;
  border-bottom: 1px solid var(--trait);
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.bandeau .marque {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  text-decoration: none;
  color: var(--encre);
}

.pousse {
  flex: 1;
}

.surtitre {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-3);
}

.pile {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pile-serree {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rangee {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.rangee.centree {
  align-items: center;
}

.discret {
  color: var(--encre-3);
  font-size: 13.5px;
}

.mono {
  font-family: var(--mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.cache {
  display: none !important;
}

/* --- formulaires ---------------------------------------------------------- */

.etiquette {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-3);
  margin-bottom: 6px;
}

.champ {
  width: 100%;
  padding: 9px 11px;
  font: inherit;
  font-size: 14px;
  background: var(--papier);
  color: var(--encre);
  border: 1px solid var(--trait);
  border-radius: var(--r);
}

textarea.champ {
  min-height: 72px;
  resize: vertical;
}

.aide {
  font-size: 12px;
  color: var(--encre-3);
  margin: 5px 0 0;
}

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 550;
  background: var(--accent);
  color: var(--sur-accent);
  border: 1px solid var(--accent);
  border-radius: var(--r);
  cursor: pointer;
  text-decoration: none;
}

.bouton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bouton.discret {
  background: transparent;
  color: var(--encre-2);
  border-color: var(--trait);
  font-weight: 450;
  font-size: 14px;
}

.bouton.danger {
  background: transparent;
  color: var(--critique);
  border-color: color-mix(in srgb, var(--critique) 40%, transparent);
  font-weight: 450;
}

.bouton.petit {
  padding: 5px 11px;
  font-size: 12.5px;
}

/* --- cartes --------------------------------------------------------------- */

.carte {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r);
  padding: 20px;
}

/* --- pastilles & jauges --------------------------------------------------- */

.pastille {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.pastille.ok {
  background: var(--ok-fond);
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 30%, transparent);
}

.pastille.alerte {
  background: var(--alerte-fond);
  color: var(--alerte);
  border-color: color-mix(in srgb, var(--alerte) 30%, transparent);
}

.pastille.critique {
  background: var(--critique-fond);
  color: var(--critique);
  border-color: color-mix(in srgb, var(--critique) 30%, transparent);
}

.pastille.neutre {
  background: var(--creux);
  color: var(--encre-3);
  border-color: var(--trait);
}

.jauge {
  flex: 1;
  height: 7px;
  min-width: 56px;
  background: var(--creux);
  border: 1px solid var(--trait-2);
  border-radius: 999px;
  overflow: hidden;
}

.jauge > i {
  display: block;
  height: 100%;
  background: var(--ok);
}

.jauge.alerte > i {
  background: var(--alerte);
}

.jauge.critique > i {
  background: var(--critique);
}

/* --- encarts -------------------------------------------------------------- */

.encart {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r);
  font-size: 13.5px;
  line-height: 1.5;
  border: 1px solid;
}

.encart .signe {
  font-family: var(--mono);
  font-weight: 700;
}

.encart.info {
  background: var(--accent-2);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent);
}

.encart.alerte {
  background: var(--alerte-fond);
  border-color: color-mix(in srgb, var(--alerte) 35%, transparent);
  color: var(--alerte);
}

.encart.critique {
  background: var(--critique-fond);
  border-color: color-mix(in srgb, var(--critique) 35%, transparent);
  color: var(--critique);
}

/* --- tableaux ------------------------------------------------------------- */

.defilant {
  overflow-x: auto;
  border: 1px solid var(--trait);
  border-radius: var(--r);
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13.5px;
  min-width: 520px;
}

th,
td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--trait-2);
}

thead th {
  background: var(--creux);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-3);
  font-weight: 500;
}

tbody tr:last-child td {
  border-bottom: none;
}

td.c,
th.c {
  text-align: center;
}

/* --- onglets & lignes de créneau ------------------------------------------ */

.onglets {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--trait);
  overflow-x: auto;
}

.onglet {
  font: inherit;
  font-size: 13.5px;
  padding: 9px 14px;
  cursor: pointer;
  white-space: nowrap;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  color: var(--encre-3);
  border-radius: var(--r) var(--r) 0 0;
  margin-bottom: -1px;
}

.onglet[aria-selected="true"] {
  background: var(--surface);
  border-color: var(--trait);
  color: var(--encre);
  font-weight: 600;
  border-bottom: 1px solid var(--surface);
}

.onglet .n {
  font-family: var(--mono);
  font-size: 11px;
  margin-left: 6px;
}

.onglet[aria-selected="true"] .n {
  color: var(--accent);
}

.creneaux {
  border: 1px solid var(--trait);
  border-top: none;
  border-radius: 0 0 var(--r) var(--r);
  background: var(--surface);
}

.creneau {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  padding: 12px 14px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--trait-2);
  cursor: pointer;
}

.creneau:hover {
  background: var(--creux);
}

.creneau .quand {
  font-weight: 600;
  font-size: 14px;
}

.creneau .quand small {
  display: block;
  font-weight: 400;
  font-size: 11.5px;
  color: var(--encre-3);
  font-family: var(--mono);
}

.creneau .mesure {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.creneau .chiffre {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--encre-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Sur téléphone, la jauge passe sous le libellé : à trois colonnes, la ligne
   déborderait de l'écran et forcerait un défilement horizontal du document. */
@media (max-width: 560px) {
  .creneau {
    grid-template-columns: 1fr auto;
    row-gap: 8px;
  }

  .creneau .mesure {
    grid-column: 1 / -1;
  }
}

.detail-creneau {
  padding: 4px 14px 16px;
  background: var(--creux);
  border-bottom: 1px solid var(--trait-2);
}

.creneau-ferme {
  padding: 14px;
  font-size: 13.5px;
  color: var(--encre-3);
  border-bottom: 1px solid var(--trait-2);
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 7px,
    var(--trait-2) 7px,
    var(--trait-2) 8px
  );
}

.contribution {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 9px 0;
  border-bottom: 1px dotted var(--trait);
}

.contribution:last-child {
  border-bottom: none;
}

.contribution .quoi {
  font-size: 14.5px;
}

.contribution .qui {
  font-size: 12.5px;
  color: var(--encre-3);
}

.contribution .qui b {
  color: var(--encre-2);
  font-weight: 600;
}

.contribution .cote {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.contribution .montant {
  font-family: var(--mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

/* --- boîte de dialogue ---------------------------------------------------- */

dialog {
  border: 1px solid var(--trait);
  border-radius: 5px;
  background: var(--surface);
  color: var(--encre);
  box-shadow: var(--ombre);
  padding: 20px;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
}

dialog::backdrop {
  background: rgba(10, 14, 13, 0.45);
}

/* --- cases à cocher ------------------------------------------------------- */

.coche {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--encre-2);
  cursor: pointer;
}

.coche input,
table input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  flex: none;
}

/* --- étapes de l'assistant ------------------------------------------------ */

.etapes {
  display: flex;
  border: 1px solid var(--trait);
  border-radius: var(--r);
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
}

.etapes li {
  flex: 1;
  min-width: 110px;
  padding: 8px 12px;
  font-size: 12.5px;
  background: var(--creux);
  color: var(--encre-3);
  border-right: 1px solid var(--trait);
}

.etapes li:last-child {
  border-right: none;
}

.etapes li[aria-current="step"] {
  background: var(--surface);
  color: var(--encre);
  font-weight: 600;
}

.etapes li .rang {
  font-family: var(--mono);
  font-size: 10px;
  display: block;
  color: var(--encre-3);
  letter-spacing: 0.1em;
}

/* --- impression ----------------------------------------------------------- */

@media print {
  .sans-impression {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 12px;
  }

  .carte,
  .defilant {
    box-shadow: none;
    border-color: #999;
  }

  .page {
    max-width: none;
    padding: 0;
  }
}

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