/* Console des licences Mosaic — charte B2M (encre, papier, bleu de la tuile). */
:root {
  --encre: #101420;
  --papier: #f4f3ef;
  --carte: #ffffff;
  --bleu: #3d5afe;
  --bleu-fonce: #2a43d4;
  --trait: #dcdad3;
  --secondaire: #5c6170;
  --vert: #1f8a4c;
  --orange: #b4600a;
  --rouge: #c0362c;
  --police: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--papier); color: var(--encre); font: 15px/1.5 var(--police); }
a { color: var(--bleu); }
h1 { font-size: 1.6rem; margin: 0; letter-spacing: -0.02em; }
h2 { font-size: 1rem; margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--mono); font-weight: 600; }
main { max-width: 1100px; margin: 0 auto; padding: 24px 16px 64px; display: flex; flex-direction: column; gap: 20px; }
main.etroit { max-width: 560px; }
.barre { background: var(--encre); color: var(--papier); padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.barre a { color: var(--papier); text-decoration: none; }
.barre nav { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.marque { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.tuile { display: inline-block; width: 14px; height: 14px; background: var(--bleu); }
.connexion { max-width: 380px; min-height: 100vh; justify-content: center; }
.connexion h1 { display: flex; align-items: center; gap: 10px; }
.entete { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.carte { background: var(--carte); border: 1px solid var(--trait); padding: 20px; display: flex; flex-direction: column; gap: 12px; overflow-x: auto; }
form { margin: 0; }
.pile, .connexion form { display: flex; flex-direction: column; gap: 14px; }
.ligne { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.recherche { display: flex; gap: 10px; }
.recherche input { flex: 1; }
label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 0.9rem; }
label small { font-weight: 400; color: var(--secondaire); }
label.choix { flex-direction: row; align-items: center; font-weight: 400; }
fieldset { border: 1px solid var(--trait); padding: 12px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
input[type=text], input[type=password], input[type=email], input[type=number], input[type=date], input[type=search] {
  font: inherit; padding: 10px 12px; border: 1px solid var(--trait); background: #fff; color: var(--encre); border-radius: 0; min-width: 0;
}
input:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
button, .bouton { font: inherit; font-weight: 600; padding: 10px 16px; border: 1px solid var(--encre); background: transparent; color: var(--encre); cursor: pointer; text-decoration: none; display: inline-block; }
button.principal, .bouton.principal { background: var(--bleu); border-color: var(--bleu); color: #fff; }
button.principal:hover, .bouton.principal:hover { background: var(--bleu-fonce); }
button.danger { background: var(--rouge); border-color: var(--rouge); color: #fff; }
button.lien { border: 0; padding: 0; color: var(--papier); font-weight: 400; text-decoration: underline; }
table { width: 100%; border-collapse: collapse; background: var(--carte); }
th { text-align: left; font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--secondaire); padding: 8px; border-bottom: 1px solid var(--encre); }
td { padding: 10px 8px; border-bottom: 1px solid var(--trait); vertical-align: top; }
.mono, .cle { font-family: var(--mono); }
.quand { white-space: nowrap; width: 1%; }
.cle { font-size: 1.05rem; word-break: break-all; background: var(--papier); padding: 10px; user-select: all; margin: 0; }
dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; }
dt { color: var(--secondaire); }
dd { margin: 0; min-width: 0; }
.secondaire { color: var(--secondaire); margin: 0; }
.etiquette { font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; color: var(--secondaire); }
.pastille { font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; padding: 2px 8px; border: 1px solid currentColor; white-space: nowrap; }
.pastille.vert { color: var(--vert); }
.pastille.orange { color: var(--orange); }
.pastille.rouge { color: var(--rouge); }
.pastille.gris { color: var(--secondaire); }
.alerte { border-left: 4px solid var(--rouge); background: #fbecea; padding: 10px 14px; margin: 0; }
.succes { border-left: 4px solid var(--vert); background: #e8f4ec; padding: 10px 14px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
details.danger summary { color: var(--rouge); cursor: pointer; }
details.danger form { margin-top: 12px; }
summary { cursor: pointer; }
@media (max-width: 640px) {
  table thead { display: none; }
  table tr { display: block; border-bottom: 1px solid var(--trait); padding: 8px 0; }
  table td { display: block; border: 0; padding: 2px 8px; }
  .quand { width: auto; }
}