/* Le style de l'appli (core/Style/StyleBase.h) : fond sombre, bordures grises 1 px, coins doux, police Inter, vert de la marque */

@font-face { font-family: Inter; src: url(polices/Inter-Light.ttf); font-weight: 300; font-display: swap; }
@font-face { font-family: Inter; src: url(polices/Inter-Regular.ttf); font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url(polices/Inter-Bold.ttf); font-weight: 700; font-display: swap; }

:root {
  --fond: #252525;          /* FondZone */
  --fond-entete: #3a3a3a;   /* FondEntete */
  --fond-carte: #2a2a2a;    /* FondFenetre */
  --fond-ligne: #3d3d3d;    /* FondLigne */
  --fond-survol: #4d4d4d;   /* FondLigneSurvol */
  --fond-champ: #2d2d2d;    /* FondChamp */
  --fond-enfonce: #1d1d1d;  /* FondEnfonce */
  --bordure: #777777;       /* Bordure */
  --bordure-champ: #555555; /* BordureChamp */
  --texte: #ffffff;
  --discret: #aaaaaa;
  --vert: #00865e;          /* VertMarque */
  --vert-survol: #009b6d;
  --attente: #8a5a00;       /* ActionDeplacer */
  --rouge: #ac2424;         /* ActionSupprimer */
  --rouge-survol: #d32f2f;  /* Danger */
  --rayon-fenetre: 8px;
  --rayon-tuile: 6px;
  --rayon-element: 4px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: dark; }
body { margin: 0; min-height: 100vh; background: var(--fond); color: var(--texte); font: 400 14px/1.45 Inter, system-ui, sans-serif; }
p { margin: 0; }
.discret { color: var(--discret); }

/* En-tête, comme la fenêtre principale */
.entete { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 16px; background: var(--fond-entete); border-bottom: 1px solid var(--bordure-champ); }
.entete .espace { flex: 1; }
.entete form { margin: 0; }
.marque { display: flex; align-items: center; gap: 10px; color: var(--texte); text-decoration: none; font-size: 19px; font-weight: 300; }
.marque img { width: 30px; height: 30px; }
.marque b, .accueil h1 b { color: var(--vert); font-weight: 700; }
.qui { color: var(--discret); text-decoration: none; }
.qui:hover { color: var(--texte); }

main { max-width: 860px; margin: 28px auto; padding: 0 16px; display: flex; flex-direction: column; gap: 16px; }
main.etroit { max-width: 440px; }
main.large { max-width: 1180px; }

.accueil { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.accueil img { width: 72px; height: 72px; }
.accueil h1 { margin: 6px 0 4px; font-size: 28px; font-weight: 300; }

/* Une carte = une sous-fenêtre : en-tête puis corps */
.carte { background: var(--fond-carte); border: 1px solid var(--bordure-champ); border-radius: var(--rayon-fenetre); overflow: hidden; }
.carte > h2 { margin: 0; padding: 9px 16px; background: var(--fond-ligne); border-bottom: 1px solid var(--bordure-champ); font-size: 14px; font-weight: 700; }
.corps { padding: 16px; display: flex; flex-direction: column; gap: 12px; margin: 0; }

/* Champs */
label { display: flex; flex-direction: column; gap: 5px; color: var(--discret); font-size: 13px; }
input, textarea, select { font: inherit; color: var(--texte); background: var(--fond-champ); border: 1px solid var(--bordure-champ); border-radius: var(--rayon-element); padding: 8px 10px; min-height: 38px; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--vert); }
textarea { resize: vertical; min-height: 84px; }
select { min-height: 30px; padding: 4px 8px; }

/* Boutons */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 16px; font: inherit; font-weight: 700; color: var(--texte); background: var(--fond-ligne); border: 1px solid var(--bordure); border-radius: var(--rayon-element); cursor: pointer; text-decoration: none; }
.bouton:hover { background: var(--fond-survol); }
.bouton.principal { background: var(--vert); border-color: var(--vert); }
.bouton.principal:hover { background: var(--vert-survol); }
.bouton.danger:hover { background: var(--rouge-survol); border-color: var(--rouge-survol); }
.bouton.petit { min-height: 30px; padding: 0 12px; font-size: 13px; }
.bouton.actif { background: var(--fond-survol); border-color: var(--texte); }
.pastille { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--attente); font-size: 12px; text-align: center; }

.message { padding: 10px 14px; border-radius: var(--rayon-element); background: var(--fond-ligne); border-left: 4px solid var(--vert); }
.message.erreur { border-left-color: var(--rouge-survol); }

/* État de la licence */
.statut { display: inline-block; padding: 3px 10px; border-radius: var(--rayon-element); font-size: 13px; font-weight: 700; }
.statut.active { background: var(--vert); }
.statut.attente, .statut.programmee { background: var(--attente); }
.statut.refusee, .statut.desactivee { background: var(--rouge); }

/* Téléchargements */
.recommande { display: flex; align-items: center; gap: 16px; padding: 14px 16px; background: var(--fond-enfonce); border: 1px solid var(--vert); border-radius: var(--rayon-tuile); }
.recommande .texte { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.systemes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.systeme { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--bordure-champ); border-radius: var(--rayon-tuile); }
.systeme h3 { margin: 0 0 2px; font-size: 14px; }
.variante { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; background: var(--fond-ligne); border: 1px solid transparent; border-radius: var(--rayon-element); color: var(--texte); text-decoration: none; font-size: 13px; }
.variante > :last-child { white-space: nowrap; }
a.variante:hover { background: var(--fond-survol); }
.variante.choisie { border-color: var(--vert); }
.variante.absente { opacity: .45; }

/* Lignes (machines, comptes), comme les cartes des listes */
.lignes { display: flex; flex-direction: column; gap: 6px; }
.ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 8px 12px; background: var(--fond-ligne); border-radius: var(--rayon-element); margin: 0; }
.onglets { display: flex; gap: 8px; }
.rangee { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.rangee input { min-height: 30px; padding: 4px 8px; width: 160px; }
.ligne-compte { display: grid; grid-template-columns: 240px 1fr 220px 250px; gap: 8px 16px; align-items: start; padding: 12px 14px; background: var(--fond-carte); border: 1px solid var(--bordure-champ); border-radius: var(--rayon-tuile); }
.qui-compte, .etat { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; overflow-wrap: anywhere; }
.demande { white-space: normal; overflow-wrap: anywhere; }
.actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin: 0; }
.plus { grid-column: 1 / -1; }
.plus summary { cursor: pointer; color: var(--discret); font-size: 13px; }
.plus[open] { display: flex; flex-direction: column; gap: 6px; }
.plus .ligne .bouton { margin-left: auto; }

@media (max-width: 900px) {
  .ligne-compte { grid-template-columns: 1fr; }
  .actions { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .qui, .marque span { display: none; }
  .recommande { flex-direction: column; align-items: stretch; }
}