/* Tableau des affaires Maison Myel.
   Passe de design guidée par unslop de Damir Sokolovsky (https://github.com/heydamir/unslop, CC BY 4.0).
   Direction: le registre d'une galerie de design de collection. Noir sur blanc et DM Sans, comme maisonmyel.com.
   Pas de cartes ni d'ombres: des entrées séparées par des filets, comme les lots d'un catalogue.
   Signature: le numéro d'affaire en chiffres mono, placé comme un numéro de lot.
   Couleur: aucune, sauf le rouge des retards. « À nous » est marqué à l'encre (filet noir à gauche). */

@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("/fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("/fonts/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/dm-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/dm-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --papier: #ffffff; --survol: #f5f5f5;
  --encre: #000000; --second: #555555; --discret: #6f6f6f;
  --filet: #e5e5e5; --filet-fort: #000000;
  --retard: #b3261e;
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", "SF Mono", Menlo, monospace;
  --courbe: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light;
}
:root.sombre {
  --papier: #0e0e0e; --survol: #1a1a1a;
  --encre: #f2f2f2; --second: #a8a8a8; --discret: #8c8c8c;
  --filet: #2a2a2a; --filet-fort: #f2f2f2;
  --retard: #f07167;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--papier); color: var(--encre); font: 400 15px/22px var(--sans); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 1px solid var(--encre); outline-offset: 2px; }
.mono { font-family: var(--mono); font-size: 12px; line-height: 16px; letter-spacing: .01em; }

/* En-tête */
.haut { padding: 20px 16px 0; }
.marque { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 20px; font-weight: 500; }
.logo { width: 20px; height: 20px; }
h1 { margin: 24px 0 0; font-size: 28px; line-height: 32px; font-weight: 500; letter-spacing: -.01em; }
.resume { margin: 8px 0 0; color: var(--second); }
.resume b { color: var(--encre); font-weight: 500; }
.filtres { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; margin-top: 16px; padding-bottom: 12px; }
.filtres::-webkit-scrollbar { display: none; }
.filtre { flex: none; }
.filtre { white-space: nowrap; padding: 4px 0; color: var(--discret); font-size: 14px; line-height: 20px; border-bottom: 1px solid transparent; transition: color 160ms var(--courbe), border-color 160ms var(--courbe); }
.filtre:hover { color: var(--encre); }
.filtre[aria-selected="true"] { color: var(--encre); border-bottom-color: var(--encre); }
.filtre .n { margin-left: 4px; }
.filtre.retard .n { color: var(--retard); }

/* Onglets d'étape, téléphone */
.etapes { position: sticky; top: 0; z-index: 5; display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; padding: 0 16px; background: var(--papier); border-top: 1px solid var(--filet-fort); border-bottom: 1px solid var(--filet); }
.etapes::-webkit-scrollbar { display: none; }
.etape { flex: none; height: 44px; color: var(--discret); font-size: 14px; box-shadow: inset 0 -1px 0 transparent; transition: color 160ms var(--courbe); }
.etape .n { margin-left: 4px; }
.etape.active { color: var(--encre); box-shadow: inset 0 -1px 0 var(--encre); }
.etape:disabled { opacity: .35; cursor: default; }

/* Registre: étapes l'une sous l'autre au téléphone, colonnes séparées par des filets sur grand écran */
.tableau { display: flex; flex-direction: column; padding: 0 16px 48px; }
.colonne { display: flex; flex-direction: column; scroll-margin-top: 44px; padding-top: 32px; }
.colonne.vide { display: none; }
.tete-col { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--filet-fort); }
.tete-col h2 { margin: 0; font-size: 15px; line-height: 22px; font-weight: 500; }
.tete-col .mono { color: var(--discret); }
.message { color: var(--second); margin: 0; padding: 32px 0; }

/* Entrée d'une affaire */
.entree { position: relative; display: flex; flex-direction: column; width: 100%; padding: 16px 0 16px 0; border-bottom: 1px solid var(--filet); transition: background-color 160ms var(--courbe); }
.entree:hover .client { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.entree:active { opacity: .7; }
.entree.nous::before { content: ""; position: absolute; left: -16px; top: 16px; bottom: 16px; width: 2px; background: var(--encre); }
.lot { display: flex; justify-content: space-between; gap: 12px; color: var(--discret); }
.client { margin-top: 8px; font-size: 16px; line-height: 22px; font-weight: 500; }
.piece { color: var(--second); font-size: 14px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.action { margin-top: 8px; font-size: 14px; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.etat { margin-top: 8px; color: var(--discret); font-size: 13px; line-height: 20px; }
.etat .qui { color: var(--encre); }
.entree.retard .etat, .entree.retard .etat .qui { color: var(--retard); }
.etat .valider { display: inline-block; white-space: nowrap; margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--filet); color: var(--encre); }

@media (min-width: 760px) {
  .haut { padding: 24px 32px 0; display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 32px; }
  .marque, h1, .resume { grid-column: 1; }
  .filtres { grid-column: 2; grid-row: 3 / 5; align-self: end; margin: 0; padding-bottom: 12px; }
  .etapes { display: none; }
  .tableau { flex-direction: row; align-items: stretch; padding: 0 32px 64px; border-top: 1px solid var(--filet-fort); margin-top: 16px; overflow-x: auto; }
  .colonne { flex: 1 1 0; min-width: 232px; padding: 24px 20px 0; border-left: 1px solid var(--filet); }
  .colonne:first-child { padding-left: 0; border-left: 0; }
  .colonne:last-child { padding-right: 0; }
  .tete-col { border-bottom-color: var(--filet); }
  .entree.nous::before { left: -10px; }
  .colonne:first-child .entree.nous::before { left: -8px; }
}

.pied-page { padding: 0 16px 32px; color: var(--discret); font-size: 12px; line-height: 16px; }
@media (min-width: 760px) { .pied-page { padding: 0 32px 32px; } }

/* Fiche d'une affaire */
.voile { position: fixed; inset: 0; z-index: 10; background: rgba(0, 0, 0, .24); animation: fondu 240ms var(--courbe); }
.detail { position: fixed; left: 0; right: 0; bottom: 0; z-index: 11; max-height: 92vh; overflow-y: auto; background: var(--papier); border-top: 1px solid var(--filet-fort); padding: 0 16px calc(32px + env(safe-area-inset-bottom)); animation: monte 300ms var(--courbe); }
@media (min-width: 760px) { .detail { top: 0; left: auto; width: 520px; max-height: none; border-top: 0; border-left: 1px solid var(--filet-fort); padding: 0 32px 32px; } }
@keyframes fondu { from { opacity: 0; } }
@keyframes monte { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.d-haut { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; height: 56px; background: var(--papier); color: var(--discret); }
.fermer { display: grid; place-items: center; width: 40px; height: 40px; margin-right: -10px; color: var(--encre); }
.fermer svg { width: 20px; height: 20px; }
.d-client { margin: 8px 0 0; font-size: 28px; line-height: 32px; font-weight: 500; letter-spacing: -.01em; }
.d-sous { margin: 4px 0 0; color: var(--second); }
.d-etat { margin: 16px 0 0; font-size: 15px; }
.d-etat.retard { color: var(--retard); }
.parcours { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 16px 0 0; padding: 12px 0; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); font-size: 13px; line-height: 20px; color: var(--discret); }
.parcours span:not(:last-child)::after { content: "—"; margin: 0 8px; color: var(--filet); }
.parcours .fait { color: var(--second); }
.parcours .ici { color: var(--encre); font-weight: 500; }
.rubrique { display: grid; grid-template-columns: 112px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--filet); }
.rubrique h3 { margin: 0; color: var(--discret); font-size: 13px; line-height: 22px; font-weight: 400; }
.rubrique ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.rubrique.forte li { font-weight: 500; }
.rubrique.petite li { font-size: 14px; line-height: 20px; color: var(--second); }
@media (max-width: 420px) { .rubrique { grid-template-columns: 1fr; gap: 4px; } }
.lien-tg { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 4px 0; font-size: 14px; border-bottom: 1px solid var(--encre); }
.lien-tg svg { width: 14px; height: 14px; }
.d-maj { margin: 24px 0 0; color: var(--discret); font-size: 12px; line-height: 16px; }

/* Agir sur une affaire à nous */
.agir { display: flex; flex-direction: column; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--filet); }
.boutons { display: flex; gap: 8px; }
.bouton { height: 44px; padding: 0 20px; border: 1px solid var(--encre); color: var(--encre); font-size: 15px; font-weight: 500; transition: opacity 120ms var(--courbe); }
.bouton.plein { background: var(--encre); color: var(--papier); }
.bouton:active { opacity: .7; }
.bouton:disabled { opacity: .4; cursor: default; }
.champ { width: 100%; padding: 12px; border: 1px solid var(--filet-fort); border-radius: 0; background: var(--papier); color: var(--encre); font: 400 15px/22px var(--sans); resize: vertical; }
.agir-etat { margin: 0; color: var(--second); font-size: 14px; line-height: 20px; }
.agir .bouton.plein:only-of-type { align-self: flex-start; }
.rubrique.source li { font-size: 13px; line-height: 20px; color: var(--second); }