/* Tableau de bord du serveur — style doux et coloré : barre latérale violette, tuiles arrondies, thème clair/sombre */
:root {
  --fond: #efedfb; --cadre: #f8f7fd; --surface: #ffffff; --surface-2: #f6f5fb; --bord: #ebe8f6; --bord-fort: #d9d4ef;
  --texte: #1e1b39; --texte-2: #5b5878; --texte-3: #a19fb8;
  --violet: #7b5cfa; --violet-2: #6a4ae8; --violet-fond: #efeaff; --violet-texte: #5535d6;
  --jaune: #f5c125; --orange: #ff8a5b; --cyan: #4cc3e2; --rose: #f472b6;
  --banniere: linear-gradient(120deg, #fff1cf 0%, #ffe3ad 100%); --banniere-texte: #5c3b00;
  --vert: #22c55e; --vert-fond: #e8f9ee; --vert-texte: #15803d;
  --rouge: #f04438; --rouge-fond: #fef0ef; --rouge-texte: #c0281d;
  --ambre-fond: #fff6e0; --ambre-texte: #a15c00;
  --gris-fond: #f1f0f7; --gris-texte: #4b4868;
  --ombre: 0 2px 6px rgba(60, 40, 140, .05), 0 8px 24px rgba(60, 40, 140, .06);
  --rayon: 20px; --rayon-petit: 14px;
  --police: "Poppins", "Inter", "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --mono: "Cascadia Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0d0b1a; --cadre: #131125; --surface: #1b1832; --surface-2: #221e3d; --bord: #2c2850; --bord-fort: #3b3666;
    --texte: #f1effc; --texte-2: #b7b3d6; --texte-3: #7d79a3;
    --violet: #9b84ff; --violet-2: #8a70ff; --violet-fond: rgba(155, 132, 255, .15); --violet-texte: #c9bcff;
    --banniere: linear-gradient(120deg, #3a2d14 0%, #4a3410 100%); --banniere-texte: #ffe2a8;
    --vert-fond: rgba(34, 197, 94, .14); --vert-texte: #6ee7a0; --rouge-fond: rgba(240, 68, 56, .15); --rouge-texte: #ff9b93;
    --ambre-fond: rgba(245, 193, 37, .14); --ambre-texte: #ffd36b; --gris-fond: #26223f; --gris-texte: #cfcbe8;
    --ombre: 0 2px 8px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 400 14px/1.55 var(--police); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.titre-section { font-size: 19px; font-weight: 700; letter-spacing: -.015em; }
h3 { font-size: 15px; font-weight: 600; }
.meta { color: var(--texte-2); font-size: 13px; }
.petit-texte { color: var(--texte-3); font-size: 12px; }
.surtitre { font-weight: 700; font-size: 15px; }
.surtitre span { color: var(--texte-3); font-weight: 500; font-size: 13px; margin-left: 6px; }
.sprites { position: absolute; width: 0; height: 0; overflow: hidden; }
a { color: var(--violet-texte); }

/* ---------- cadre général : barre latérale + contenu ---------- */
.app { padding: 18px; }
/* navigation principale : barre violette large, icône + nom, sous-menu des bots dessous, recherche en bas */
.rail {
  position: fixed; top: 18px; bottom: 18px; left: 18px; width: 232px; z-index: 20; background: var(--violet);
  border-radius: 28px; display: flex; flex-direction: column; gap: 2px; padding: 26px 16px 22px;
  box-shadow: 0 14px 34px rgba(123, 92, 250, .38); overflow: visible;
}
.rail-logo { display: flex; align-items: center; gap: 12px; padding: 0 6px; margin-bottom: 16px; color: #fff; text-decoration: none; font: 700 15px/1.15 var(--police); }
.rail-logo img { width: 44px; height: 44px; border-radius: 13px; box-shadow: 0 6px 14px rgba(0, 0, 0, .18); }
.rail-logo::after { content: "Baron and Sons"; }
.rail a:not(.rail-logo), .rail button {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 14px; border-radius: 14px; color: rgba(255, 255, 255, .82);
  text-decoration: none; font: 600 13.5px var(--police); background: none; border: 0; cursor: pointer; text-align: left; transition: background .15s, color .15s;
}
.rail svg { width: 22px; height: 22px; flex: none; }
.rail a:hover, .rail button:hover { color: #fff; background: rgba(255, 255, 255, .13); }
.rail a.actif { background: #fff; color: var(--violet); box-shadow: 0 8px 18px rgba(30, 20, 90, .18); }
.rail .rail-sortie { color: rgba(255, 255, 255, .85); }
/* sous-menu des bots : la liste des bots, en retrait sous « Bots » */
.sous-menu { display: grid; gap: 2px; padding: 2px 0 6px 22px; }
.sous-menu-titre { display: none; }
.rail .sous-menu a { padding: 8px 12px; font-size: 12.5px; font-weight: 500; border-radius: 11px; color: rgba(255, 255, 255, .75); }
.rail .sous-menu a:hover { color: #fff; }
.rail .sous-menu a.actif { background: rgba(255, 255, 255, .18); color: #fff; box-shadow: none; }
.sous-menu a .point { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .4); flex: none; }
.sous-menu a .point.actif { background: #4ade80; } .sous-menu a .point.erreur { background: #fb7185; }
.sous-menu a small { margin-left: auto; font-weight: 500; font-size: 10.5px; opacity: .65; }
/* recherche, sous le logo ; les pictogrammes du menu viennent un peu plus bas */
.rail .recherche { margin: 0 0 18px; background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .75); box-shadow: none; border-radius: 14px; padding: 0 12px; max-width: none; flex: none; }
.rail .recherche input { color: #fff; padding: 11px 0; }
.rail .recherche input::placeholder { color: rgba(255, 255, 255, .6); }
.rail .resultats { left: 0; width: 300px; }
.rail .rail-sortie { margin-top: auto; }
.cartes-bots { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.carte-bot { display: grid; gap: 10px; text-decoration: none; color: var(--texte); transition: transform .15s, box-shadow .15s; }
.carte-bot:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(60, 40, 140, .14); }
.carte-bot .haut { display: flex; justify-content: space-between; align-items: center; }
.carte-bot .icone { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: var(--violet); }
.carte-bot .icone svg { width: 24px; height: 24px; }
.carte-bot.absent .icone { background: var(--gris-fond); color: var(--texte-3); }
.carte-bot h3 { font-size: 16px; }
.vide-bot { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 40px 24px; }
.carte-bot.ajout { border: 2px dashed var(--bord-fort); box-shadow: none; background: transparent; cursor: pointer; text-align: left; font: inherit; }
.carte-bot.ajout .icone { background: var(--violet-fond); color: var(--violet-texte); font-size: 22px; font-weight: 700; }
.carte-bot.ajout:hover { border-color: var(--violet); background: var(--violet-fond); }
.vide-bot .meta { max-width: 520px; }
.cadre { margin-left: 250px; background: var(--cadre); border-radius: 30px; min-height: calc(100vh - 36px); padding: 30px 40px 56px; }
.entete { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 30px; }
.entete .titre-section { font-size: 22px; }
.recherche { position: relative; display: flex; align-items: center; gap: 10px; flex: 1; max-width: 420px; background: var(--surface); border-radius: 16px; padding: 0 14px; box-shadow: var(--ombre); color: var(--texte-3); }
.recherche svg { width: 18px; height: 18px; flex: none; }
.recherche input { flex: 1; border: 0; background: none; font: 500 13px var(--police); color: var(--texte); padding: 13px 0; outline: none; min-width: 0; }
.recherche input::placeholder { color: var(--texte-3); }
.resultats { position: absolute; top: calc(100% + 8px); left: 0; right: 0; list-style: none; margin: 0; padding: 6px; background: var(--surface); border-radius: 14px; box-shadow: 0 16px 40px rgba(30, 20, 90, .18); z-index: 30; max-height: 360px; overflow: auto; }
.resultats li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; cursor: pointer; color: var(--texte); font-size: 13px; }
.resultats li:hover, .resultats li.choisi { background: var(--violet-fond); }
.resultats .type { font-size: 11px; font-weight: 600; color: var(--violet-texte); background: var(--violet-fond); padding: 2px 7px; border-radius: 99px; flex: none; }
.resultats .vide-texte { padding: 8px 10px; }
.entete-droite { display: flex; align-items: center; gap: 12px; }
.icone-rond { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--surface); color: var(--texte-2); display: grid; place-items: center; cursor: pointer; box-shadow: var(--ombre); }
.icone-rond svg { width: 20px; height: 20px; }
.icone-rond:hover { color: var(--violet); }
.cloche-nombre { position: absolute; top: 6px; right: 7px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--orange); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--cadre); }
.profil { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13px; background: var(--surface); padding: 5px 14px 5px 5px; border-radius: 99px; box-shadow: var(--ombre); }
.profil small { color: var(--texte-3); font-weight: 500; font-size: 11px; }
.avatar-profil { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--orange)); color: #fff; display: grid; place-items: center; font-weight: 700; }
.alertes { display: grid; gap: 8px; margin-bottom: 18px; }
.alertes .alerte { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.cursive { font-family: var(--police); font-weight: 700; font-size: 30px; letter-spacing: -.02em; } /* linéale, comme le reste */
.colonnes { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.principal, .cote { display: grid; gap: 28px; min-width: 0; }
.section { display: grid; gap: 22px; scroll-margin-top: 20px; }
.cote { position: sticky; top: 18px; }

/* ---------- cartes ---------- */
.carte { background: var(--surface); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 24px; min-width: 0; }
.carte-titre, .bloc-titre { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 18px; }
.bloc-titre { margin-bottom: 12px; }
.compteur { background: var(--violet-fond); color: var(--violet-texte); font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 99px; }
.titre-ligne { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; }

/* ---------- bannière d'accueil ---------- */
.banniere {
  background: var(--banniere); color: var(--banniere-texte); border-radius: var(--rayon); padding: 32px 36px; display: flex;
  align-items: center; justify-content: space-between; gap: 24px; overflow: hidden; min-height: 180px;
}
.banniere h1 { color: #c0541a; }
@media (prefers-color-scheme: dark) { .banniere h1 { color: #ffb482; } }
.banniere-texte { display: grid; gap: 6px; max-width: 480px; }
.banniere-texte p { font-size: 14px; }
.banniere-detail { display: flex; flex-wrap: wrap; gap: 6px 18px; font-weight: 600; margin-top: 4px; }
.banniere-dessin { width: 210px; flex: none; }

/* ---------- état du bot et bouton lecture/pause ---------- */
.pastille { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 7px 14px 7px 12px; border-radius: 99px; background: var(--surface); box-shadow: var(--ombre); }
.pastille .point { width: 9px; height: 9px; border-radius: 50%; background: var(--texte-3); }
.pastille.actif { color: var(--vert-texte); } .pastille.actif .point { background: var(--vert); animation: pouls 2s infinite; }
.pastille.eteint { color: var(--gris-texte); }
.pastille.erreur { color: var(--rouge-texte); } .pastille.erreur .point { background: var(--rouge); }
.pastille.attente, .pastille.neutre { color: var(--ambre-texte); } .pastille.attente .point, .pastille.neutre .point { background: var(--jaune); }
@keyframes pouls { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); } 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }

.bouton-lecture {
  display: inline-flex; align-items: center; gap: 12px; border: 0; cursor: pointer; font: 600 14px var(--police); flex: none;
  padding: 9px 20px 9px 9px; border-radius: 99px; color: #fff; background: var(--violet); min-width: 178px;
  box-shadow: 0 8px 20px rgba(123, 92, 250, .35); transition: transform .1s, filter .15s;
}
.bouton-lecture:hover { filter: brightness(1.06); }
.bouton-lecture:active { transform: scale(.98); }
.bouton-lecture:disabled { opacity: .6; cursor: default; }
.bouton-lecture.pause { background: var(--surface); color: var(--texte); box-shadow: var(--ombre); }
.icone-lecture { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .22); position: relative; flex: none; }
.bouton-lecture.pause .icone-lecture { background: var(--violet); color: #fff; }
.icone-lecture::before { content: ""; position: absolute; left: 14px; top: 11px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #fff; }
.bouton-lecture.pause .icone-lecture::before, .bouton-lecture.pause .icone-lecture::after { content: ""; position: absolute; top: 12px; width: 4px; height: 12px; border: 0; border-radius: 2px; background: #fff; left: 12px; }
.bouton-lecture.pause .icone-lecture::after { left: 20px; }

/* ---------- tuiles de chiffres (comme des appareils) ---------- */
.tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.tuile { background: var(--surface); border-radius: var(--rayon-petit); box-shadow: var(--ombre); padding: 20px; display: grid; gap: 8px; align-content: start; }
.tuile-haut { display: flex; justify-content: space-between; align-items: center; }
.tuile .libelle { color: var(--texte-2); font-size: 12px; font-weight: 600; }
.tuile .valeur { font-size: 23px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.tuile .detail { font-size: 12px; color: var(--texte-3); }
.tuile-icone { width: 32px; height: 32px; border-radius: 10px; background: var(--violet-fond); color: var(--violet-texte); display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.tuile.vedette { background: var(--violet); color: #fff; box-shadow: 0 10px 24px rgba(123, 92, 250, .35); }
.tuile.vedette .libelle, .tuile.vedette .detail { color: rgba(255, 255, 255, .8); }
.tuile.vedette .tuile-icone { background: rgba(255, 255, 255, .2); color: #fff; }
.positif { color: var(--vert-texte); } .negatif { color: var(--rouge-texte); }
.tuile.vedette .positif, .tuile.vedette .negatif { color: #fff; }
.vide-texte { color: var(--texte-3); font-size: 13px; padding: 10px 0; }

/* ---------- réglage des bougies : curseur sur une ligne du temps graduée ---------- */
.reglages { display: grid; gap: 18px; }
.reglage { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 16px 24px; }
@media (max-width: 860px) { .reglage { grid-template-columns: minmax(0, 1fr); gap: 12px; } .reglage .bouton { justify-self: end; } }
/* règles de vente : une ligne par règle, curseur ou interrupteur, valeur à droite */
.ventes { display: grid; gap: 4px; }
.ventes .carte-titre { margin-bottom: 10px; }
.regle { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) 78px; gap: 18px; align-items: center; padding: 12px 0; border-top: 1px solid var(--bord); }
.regle.option { grid-template-columns: minmax(220px, 1fr) auto; cursor: pointer; }
.regle-nom { display: flex; align-items: center; gap: 12px; }
.regle-nom b { display: block; font-size: 13.5px; }
.regle-nom small { display: block; font-size: 11.5px; color: var(--texte-3); line-height: 1.35; margin-top: 2px; }
.regle-icone { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-weight: 700; font-size: 16px; flex: none; }
.regle-icone.rouge { background: var(--rouge-fond); color: var(--rouge-texte); } .regle-icone.vert { background: var(--vert-fond); color: var(--vert-texte); }
.regle-icone.violet { background: var(--violet-fond); color: var(--violet-texte); } .regle-icone.orange { background: #fff0e8; color: #c2501f; }
.regle-icone.vide { background: transparent; }
.regle-valeur { font-weight: 700; font-size: 15px; text-align: right; letter-spacing: -.01em; }
.regle-valeur.off { color: var(--texte-3); font-weight: 600; }
.regle .timeline { padding: 4px 10px 0; }
.interrupteur-grand { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; }
.interrupteur-grand input { position: absolute; opacity: 0; width: 0; height: 0; }
.interrupteur-grand i { position: absolute; inset: 0; border-radius: 99px; background: var(--bord-fort); transition: .15s; }
.interrupteur-grand i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: .15s; }
.interrupteur-grand input:checked + i { background: var(--violet); }
.interrupteur-grand input:checked + i::after { transform: translateX(20px); }
.interrupteur-grand input:focus-visible + i { outline: 3px solid color-mix(in srgb, var(--violet) 35%, transparent); }
#objectif { --part: 33%; } #objectif::-webkit-slider-thumb { border-color: var(--vert); box-shadow: 0 4px 12px rgba(34, 197, 94, .35); } #objectif { background: linear-gradient(90deg, var(--vert) var(--part), var(--gris-fond) var(--part)); }
#suiveur { --part: 64%; }
.ventes .reglage-pied { border-top: 1px solid var(--bord); padding-top: 14px; margin-top: 4px; }
@media (max-width: 860px) { .regle { grid-template-columns: minmax(0, 1fr) 70px; } .regle .timeline { grid-column: 1 / -1; } }
.reglage-titre h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.reglage-titre p { margin-top: 3px; }
.timeline { padding: 6px 10px 0; }
.timeline input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--violet) var(--part, 80%), var(--gris-fond) var(--part, 80%)); outline: none; margin: 0; cursor: pointer; }
.timeline input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 4px solid var(--violet); box-shadow: 0 4px 12px rgba(123, 92, 250, .4); cursor: grab; }
.timeline input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--violet); box-shadow: 0 4px 12px rgba(123, 92, 250, .4); cursor: grab; }
.timeline input[type=range]:focus-visible { outline: 3px solid color-mix(in srgb, var(--violet) 35%, transparent); outline-offset: 6px; }
.graduations { display: flex; justify-content: space-between; margin-top: 6px; }
.graduations span { position: relative; font-size: 11px; font-weight: 600; color: var(--texte-3); width: 0; white-space: nowrap; display: flex; flex-direction: column; align-items: center; }
.graduations span::before { content: ""; width: 2px; height: 6px; background: var(--bord-fort); border-radius: 2px; margin-bottom: 3px; }
.graduations span.choisi { color: var(--violet-texte); } .graduations span.choisi::before { background: var(--violet); }
#stop { --part: 21%; }
#stop::-webkit-slider-thumb { border-color: var(--rouge); box-shadow: 0 4px 12px rgba(240, 68, 56, .35); }
#stop::-moz-range-thumb { border-color: var(--rouge); }
#stop { background: linear-gradient(90deg, var(--rouge) var(--part), var(--gris-fond) var(--part)); }

/* ---------- cryptos suivies : jetons avec croix, suggestion vérifiée sur Kraken ---------- */
.puces-cryptos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.jeton { display: inline-flex; align-items: center; gap: 8px; padding: 7px 8px 7px 12px; border-radius: 99px; background: var(--violet-fond); color: var(--violet-texte); font-weight: 600; font-size: 13px; }
.jeton.nouveau { background: var(--vert-fond); color: var(--vert-texte); }
.jeton.retire { background: var(--gris-fond); color: var(--texte-3); text-decoration: line-through; }
.jeton .position { font-size: 10px; font-weight: 700; background: rgba(255, 255, 255, .6); padding: 1px 6px; border-radius: 99px; }
.jeton button { width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .08); color: inherit; font-size: 13px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.jeton button:hover { background: rgba(0, 0, 0, .16); }
.suggestion { display: flex; gap: 8px; flex-wrap: wrap; }
.suggestion input { flex: 1; min-width: 220px; font: 500 13px var(--police); padding: 9px 12px; border-radius: 10px; border: 1px solid var(--bord-fort); background: var(--surface); color: var(--texte); text-transform: uppercase; }
.suggestion input:focus { border-color: var(--violet); outline: none; }

/* ---------- clés d'accès ---------- */
.cles { display: grid; gap: 14px; }
.service-cles { border: 1px solid var(--bord); border-radius: var(--rayon-petit); padding: 16px 18px; display: grid; gap: 12px; }
.service-cles .haut { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.service-cles h4 { margin: 0; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.service-cles .aide { font-size: 12px; color: var(--texte-2); margin-top: 3px; }
.service-cles .aide a { font-weight: 600; }
.cle-ligne { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.cle-ligne .libelle { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.cle-ligne .point { width: 8px; height: 8px; border-radius: 50%; background: var(--texte-3); flex: none; }
.cle-ligne .point.ok { background: var(--vert); box-shadow: 0 0 0 3px var(--vert-fond); }
.cle-ligne .point.ko { background: var(--rouge); box-shadow: 0 0 0 3px var(--rouge-fond); }
.service-cles.verifie-ok { border-color: color-mix(in srgb, var(--vert) 45%, transparent); }
.service-cles.verifie-ko { border-color: color-mix(in srgb, var(--rouge) 50%, transparent); background: color-mix(in srgb, var(--rouge-fond) 45%, transparent); }
.resultat-verif { font-size: 12.5px; font-weight: 600; margin-top: 4px; }
.actions-service { display: flex; gap: 6px; align-items: center; flex: none; }
.etiquette.erreur { background: var(--rouge-fond); color: var(--rouge-texte); }
.cle-ligne input { font: 13px var(--mono); padding: 9px 12px; border-radius: 10px; border: 1px solid var(--bord-fort); background: var(--surface); color: var(--texte); min-width: 0; }
.cle-ligne input::placeholder { font-family: var(--police); color: var(--texte-3); }
.cle-ligne input:focus { border-color: var(--violet); outline: none; }
@media (max-width: 700px) { .cle-ligne { grid-template-columns: minmax(0, 1fr); } }
.ajout-service-ligne { margin-top: 14px; }
.ajout-service-ligne select { font-weight: 600; color: var(--violet-texte); border-color: var(--violet-fond); background: var(--violet-fond); min-width: 260px; }
.service-cles h4 .petit-texte { font-weight: 500; }

/* ---------- onglets à l'intérieur d'une carte ---------- */
.onglets-carte { display: flex; gap: 4px; background: var(--gris-fond); padding: 4px; border-radius: 12px; }
.onglet-carte { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer; font: 600 13px var(--police); color: var(--texte-2); padding: 7px 12px; border-radius: 9px; }
.onglet-carte:hover { color: var(--texte); }
.onglet-carte.actif { background: var(--surface); color: var(--texte); box-shadow: var(--ombre); }
.onglet-carte .compteur { background: var(--violet-fond); }
.onglet-carte:not(.actif) .compteur { background: transparent; color: var(--texte-3); }
td.date-double { white-space: normal; line-height: 1.35; } td.date-double small { display: block; color: var(--texte-3); font-size: 11px; }

/* ---------- tableaux, opérations, journal ---------- */
.tableau-defilant { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; color: var(--texte-3); font-weight: 500; font-size: 12px; padding: 0 10px 8px; white-space: nowrap; }
td { padding: 13px 10px; border-top: 1px solid var(--bord); white-space: nowrap; }
th:first-child, td:first-child { padding-left: 0; } th:last-child, td:last-child { padding-right: 0; text-align: right; }
td.actif-nom { font-weight: 600; }
.operations { list-style: none; margin: 0; padding: 0; }
.operations li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--bord); }
.operations li:first-child { border-top: 0; padding-top: 0; }
.sens { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-weight: 700; flex: none; }
.sens.achat { background: var(--violet-fond); color: var(--violet-texte); } .sens.vente { background: #fff0e8; color: #c2501f; }
.operations .corps { flex: 1; min-width: 0; } .operations .ligne1 { font-weight: 600; } .operations .resultat { font-weight: 600; }
.journal summary { display: flex; align-items: baseline; gap: 10px; cursor: pointer; list-style: none; }
.journal summary::-webkit-details-marker { display: none; }
.journal summary::before { content: "›"; color: var(--violet); font-size: 20px; line-height: 1; transition: transform .15s; }
.journal[open] summary::before { transform: rotate(90deg); }
.lignes-journal { margin-top: 14px; max-height: 420px; overflow: auto; font: 12px/1.6 var(--mono); background: var(--surface-2); border-radius: 12px; padding: 10px 12px; }
.lignes-journal div { white-space: pre-wrap; word-break: break-word; }
.lignes-journal .heure { color: var(--texte-3); margin-right: 8px; }
.lignes-journal .WARNING { color: var(--ambre-texte); } .lignes-journal .ERROR, .lignes-journal .CRITICAL { color: var(--rouge-texte); }

/* ---------- colonne de droite ---------- */
.tuiles-couleur { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tuile-couleur { border-radius: var(--rayon-petit); padding: 16px; color: #fff; display: grid; gap: 16px; min-height: 112px; align-content: space-between; }
.tuile-couleur:nth-child(4n+1) { background: var(--violet); } .tuile-couleur:nth-child(4n+2) { background: var(--jaune); color: #4a3500; }
.tuile-couleur:nth-child(4n+3) { background: var(--orange); } .tuile-couleur:nth-child(4n) { background: var(--cyan); }
.tuile-couleur.eteinte { background: var(--surface) !important; color: var(--texte-2); box-shadow: var(--ombre); }
.tuile-couleur .haut { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.tuile-couleur .nom { font-weight: 600; font-size: 13px; line-height: 1.3; }
.interrupteur { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.interrupteur i { width: 28px; height: 16px; border-radius: 99px; background: rgba(255, 255, 255, .9); position: relative; }
.interrupteur i::after { content: ""; position: absolute; top: 3px; right: 3px; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.eteinte .interrupteur i { background: var(--gris-fond); } .eteinte .interrupteur i::after { right: auto; left: 3px; background: var(--texte-3); }

.services { list-style: none; margin: 0; padding: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 6px; background: var(--surface); border-radius: var(--rayon-petit); box-shadow: var(--ombre); }
.services li { display: grid; justify-items: center; gap: 4px; text-align: center; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff; background: var(--texte-3); position: relative; }
.services li:nth-child(6n+1) .avatar { background: var(--violet); } .services li:nth-child(6n+2) .avatar { background: var(--orange); }
.services li:nth-child(6n+3) .avatar { background: var(--cyan); } .services li:nth-child(6n+4) .avatar { background: #34c38f; }
.services li:nth-child(6n+5) .avatar { background: var(--jaune); color: #4a3500; } .services li:nth-child(6n) .avatar { background: var(--rose); }
.avatar::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--surface); background: var(--texte-3); }
.services .actif .avatar::after { background: var(--vert); } .services .erreur .avatar::after { background: var(--rouge); }
.services .nom { font-size: 12px; font-weight: 600; line-height: 1.25; }
.services .etat { font-size: 11px; color: var(--texte-3); }

.jauges { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.jauge { background: var(--surface); border-radius: var(--rayon-petit); box-shadow: var(--ombre); padding: 14px; display: grid; gap: 4px; }
.jauge .libelle { color: var(--texte-2); font-size: 12px; font-weight: 600; }
.jauge .valeur { font-size: 19px; font-weight: 700; letter-spacing: -.015em; }
.jauge .valeur small { font-size: 12px; font-weight: 500; color: var(--texte-3); }
.barre-jauge { height: 7px; border-radius: 99px; background: var(--gris-fond); overflow: hidden; margin: 4px 0 2px; }
.barre-jauge div { height: 100%; border-radius: 99px; background: var(--violet); transition: width .4s; }
.barre-jauge.orange div { background: var(--orange); } .barre-jauge.rouge div { background: var(--rouge); }

.graphe svg { display: block; width: 100%; height: auto; max-height: 260px; }
.graphe .axe { stroke: var(--bord); stroke-width: 1; }
.graphe text { fill: var(--texte-3); font-size: 10px; font-family: var(--police); }

.empile { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: var(--gris-fond); margin-bottom: 14px; }
.empile div { height: 100%; }
.legende { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.legende li { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.legende .carre { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legende .taille { margin-left: auto; color: var(--texte-2); font-weight: 600; }
.c-systeme { background: #a19fb8; } .c-bot { background: var(--violet); } .c-partages { background: var(--cyan); }
.c-journaux { background: var(--orange); } .c-tableau { background: var(--jaune); } .c-libre { background: var(--gris-fond); border: 1px solid var(--bord-fort); }
.infos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 0; }
.infos div { display: grid; gap: 1px; } .infos dt { color: var(--texte-3); font-size: 12px; } .infos dd { margin: 0; font-weight: 600; font-size: 13px; }
.alerte { padding: 12px 14px; border-radius: var(--rayon-petit); font-size: 13px; background: var(--ambre-fond); color: var(--ambre-texte); }
.alerte.rouge { background: var(--rouge-fond); color: var(--rouge-texte); }
.cloche-nombre.rouge { background: var(--rouge); }
.alertes { background: var(--surface); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 14px; }
.alertes-pied { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 4px 2px; border-top: 1px solid var(--bord); margin-top: 4px; }
.telegram-option { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.telegram-option b { display: block; font-size: 13px; }
.telegram-option small { display: block; font-size: 11.5px; color: var(--texte-3); max-width: 520px; }
.alerte.verte { background: var(--vert-fond); color: var(--vert-texte); }

/* ---------- partage ---------- */
.depot { border: 2px dashed var(--bord-fort); box-shadow: none; text-align: center; padding: 30px 20px; display: grid; justify-items: center; gap: 8px; transition: border-color .15s, background .15s; }
.depot.survol { border-color: var(--violet); background: var(--violet-fond); }
.depot-icone { width: 48px; height: 48px; border-radius: 16px; background: var(--violet-fond); position: relative; margin-bottom: 4px; }
.depot-icone::before { content: ""; position: absolute; left: 50%; top: 13px; width: 3px; height: 19px; background: var(--violet); transform: translateX(-50%); border-radius: 2px; }
.depot-icone::after { content: ""; position: absolute; left: 50%; top: 12px; width: 11px; height: 11px; border-left: 3px solid var(--violet); border-top: 3px solid var(--violet); transform: translateX(-50%) rotate(45deg); }
.depot-titre { font-size: 16px; font-weight: 600; }
.depot-boutons { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.progression { width: min(520px, 100%); margin-top: 12px; display: grid; gap: 6px; }
.progression-texte { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--texte-2); }
.progression-texte span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre-progression { height: 8px; background: var(--gris-fond); border-radius: 99px; overflow: hidden; }
.barre-progression div { height: 100%; width: 0; background: var(--violet); transition: width .2s; }
.liste-elements { list-style: none; margin: 0; padding: 0; }
.element { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--bord); }
.element:first-child { border-top: 0; padding-top: 0; }
.type-icone { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: #fff3d6; }
.type-icone.dossier::before { content: ""; width: 20px; height: 14px; border-radius: 3px; background: var(--jaune); box-shadow: -4px -4px 0 -2px var(--jaune); }
.type-icone.fichier { background: var(--violet-fond); } .type-icone.fichier::before { content: ""; width: 14px; height: 18px; border-radius: 3px; background: var(--violet); }
.element .nom { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.element .actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.lien-zone { grid-column: 2 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lien-zone input { flex: 1; min-width: 200px; font: 12px var(--mono); padding: 8px 11px; border-radius: 10px; border: 1px solid var(--bord); background: var(--surface-2); color: var(--texte); }
.lien-statut { font-size: 12px; color: var(--vert-texte); background: var(--vert-fond); padding: 3px 9px; border-radius: 99px; font-weight: 600; }
select { font: 500 13px var(--police); padding: 7px 10px; border-radius: 10px; border: 1px solid var(--bord-fort); background: var(--surface); color: var(--texte); }

/* ---------- une page par entrée du menu ---------- */
.vue { display: none; gap: 22px; }
.vue.visible { display: grid; animation: apparition .2s ease-out; }
@keyframes apparition { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#vue-serveur .jauges { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#vue-partage { max-width: 960px; }
.cadre-outil { width: 100%; height: calc(100vh - 140px); border: 0; border-radius: var(--rayon); background: var(--surface); box-shadow: var(--ombre); }
.contenu-ligne { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--bord); }
.contenu-ligne:first-of-type { border-top: 0; }
.contenu-ligne .carre { width: 34px; height: 34px; border-radius: 11px; }
.contenu-ligne .nom { font-weight: 600; }
.contenu-ligne .taille { font-weight: 700; }

/* ---------- boutons ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 600 13px var(--police); padding: 9px 16px; border-radius: 12px; border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; }
.bouton:disabled { opacity: .55; cursor: default; }
.bouton.principal { background: var(--violet); color: #fff; } .bouton.principal:hover { background: var(--violet-2); }
.bouton.secondaire { background: var(--surface); color: var(--texte); border-color: var(--bord-fort); } .bouton.secondaire:hover { background: var(--surface-2); }
.bouton.danger { background: var(--rouge); color: #fff; }
.bouton.discret-danger { background: transparent; color: var(--rouge-texte); } .bouton.discret-danger:hover { background: var(--rouge-fond); }
.bouton.petit { padding: 7px 12px; font-size: 12px; border-radius: 10px; }
.bouton.large { width: 100%; padding: 12px; font-size: 14px; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--violet) 40%, transparent); outline-offset: 2px; }

/* ---------- dialogue et notification ---------- */
.dialogue { border: 0; border-radius: 22px; padding: 26px; width: min(440px, calc(100% - 32px)); background: var(--surface); color: var(--texte); box-shadow: 0 24px 60px rgba(30, 20, 80, .3); }
.dialogue::backdrop { background: rgba(20, 14, 50, .45); backdrop-filter: blur(3px); }
.dialogue h2 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.dialogue p { color: var(--texte-2); }
.dialogue[open] { animation: dialogue-entree .18s ease-out; }
@keyframes dialogue-entree { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.dialogue-entete { display: flex; gap: 14px; align-items: flex-start; }
.dialogue-icone { width: 44px; height: 44px; border-radius: 14px; flex: none; display: grid; place-items: center; font-size: 20px; font-weight: 700; background: var(--violet-fond); color: var(--violet-texte); }
.dialogue-icone.danger { background: var(--rouge-fond); color: var(--rouge-texte); }
#saisie { width: min(480px, calc(100% - 32px)); }
.ajout-bot { width: min(560px, calc(100% - 32px)); max-height: 92vh; overflow: auto; }
.depot.mini { padding: 18px 16px; gap: 6px; border-radius: 16px; }
.depot.mini .depot-titre { font-size: 14px; }
.depot.mini.pret { border-style: solid; border-color: var(--vert); background: var(--vert-fond); }
.sous-menu .ajouter { color: rgba(255, 255, 255, .9) !important; border: 1px dashed rgba(255, 255, 255, .35); margin-top: 4px; justify-content: center; }
.sous-menu .ajouter:hover { background: rgba(255, 255, 255, .12) !important; }
.sous-menu a .point.attente { background: #fbbf24; }
.etapes { text-align: left; margin: 4px 0; padding-left: 20px; color: var(--texte-2); font-size: 13px; display: grid; gap: 4px; }
.saisie-champs { display: grid; gap: 14px; margin-top: 20px; }
.saisie-champ { display: grid; gap: 6px; }
.saisie-champ label { font-size: 13px; font-weight: 600; color: var(--texte); }
.saisie-champ small { font-size: 12px; color: var(--texte-3); }
.saisie-champ input { font: 14px var(--police); padding: 11px 13px; border-radius: 12px; border: 1px solid var(--bord-fort); background: var(--surface-2); color: var(--texte); transition: border-color .15s, box-shadow .15s; }
.saisie-champ input:focus { outline: none; border-color: var(--violet); background: var(--surface); box-shadow: 0 0 0 4px var(--violet-fond); }
#saisie .message-erreur { margin: 8px 0 0; min-height: 0; }
.dialogue-boutons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.titre-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.editeur { width: min(960px, calc(100% - 32px)); max-width: none; display: none; grid-template-rows: auto minmax(0, 1fr) auto; gap: 14px; height: min(86vh, 900px); }
.editeur[open] { display: grid; }
.editeur-haut { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.editeur-haut code { font: 12px var(--mono); background: var(--gris-fond); padding: 1px 5px; border-radius: 5px; }
#editeur-texte { width: 100%; height: 100%; resize: none; font: 12.5px/1.55 var(--mono); padding: 14px 16px; border-radius: 12px; border: 1px solid var(--bord-fort); background: var(--surface-2); color: var(--texte); tab-size: 2; }
#editeur-texte:focus { outline: none; border-color: var(--violet); }
.editeur-pied { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.editeur-pied .dialogue-boutons { margin: 0; }
.notification { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--texte); color: var(--cadre); padding: 11px 18px; border-radius: 14px; font-weight: 500; font-size: 13px; z-index: 50; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }
.notification.erreur { background: var(--rouge); color: #fff; }

/* ---------- connexion ---------- */
.ecran-connexion { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.connexion { width: min(380px, 100%); padding: 34px; display: grid; gap: 6px; text-align: center; }
.logo-grand { width: 52px; height: 52px; margin: 0 auto 10px; }
.connexion form { display: grid; gap: 8px; margin-top: 20px; text-align: left; }
.connexion label { font-size: 13px; font-weight: 600; color: var(--texte-2); }
.connexion input { font: 15px var(--police); padding: 11px 13px; border-radius: 12px; border: 1px solid var(--bord-fort); background: var(--surface); color: var(--texte); }
.message-erreur { color: var(--rouge-texte); font-size: 13px; min-height: 20px; }
.lien-oubli { margin: 6px auto 0; color: var(--texte-3); }
.aide-oubli { text-align: left; background: var(--surface-2); border-radius: 14px; padding: 14px 16px; margin-top: 10px; font-size: 13px; color: var(--texte-2); display: grid; gap: 8px; }
.aide-oubli ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.aide-oubli code { font: 11px var(--mono); background: var(--gris-fond); padding: 1px 5px; border-radius: 5px; }

/* ---------- page publique de partage ---------- */
.public { min-height: 100vh; }
.page-partage { max-width: 760px; margin: 0 auto; padding: 48px 20px; }
.entete-partage { display: grid; gap: 8px; justify-items: start; margin-bottom: 24px; }
.entete-partage h1 { word-break: break-word; } .entete-partage .bouton { margin-top: 10px; }
.page-partage .surtitre { color: var(--violet-texte); font-size: 13px; }
.liste-fichiers { list-style: none; margin: 0; padding: 0; background: var(--surface); border-radius: var(--rayon); box-shadow: var(--ombre); }
.liste-fichiers li { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--bord); }
.liste-fichiers li:first-child { border-top: 0; }
.liste-fichiers .nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste-fichiers .taille { color: var(--texte-3); font-size: 12px; }
.vide { text-align: center; display: grid; gap: 10px; margin-top: 15vh; }

/* ---------- petits écrans : la barre latérale passe en bas ---------- */
@media (max-width: 1100px) {
  .colonnes { grid-template-columns: minmax(0, 1fr); }
  .cote { position: static; }
  .tuiles, #vue-serveur .jauges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) and (min-width: 701px) { /* tablette : menu resserré, icônes + noms courts */
  .rail { width: 112px; padding: 18px 8px; }
  .rail-logo { justify-content: center; padding: 0; } .rail-logo::after { content: none; }
  .rail a:not(.rail-logo), .rail button { flex-direction: column; gap: 4px; padding: 10px 4px; font-size: 11px; text-align: center; }
  .sous-menu { padding-left: 0; } .sous-menu a small, .sous-menu a .point { display: none; }
  .rail .recherche { display: none; }
  .cadre { margin-left: 130px; }
}
@media (max-width: 700px) {
  .app { padding: 0 0 84px; }
  .rail { top: auto; bottom: 10px; left: 10px; right: 10px; width: auto; height: 68px; flex-direction: row; justify-content: space-around; padding: 0 6px; border-radius: 22px; }
  .rail-logo, .rail .recherche, .sous-menu { display: none !important; }
  .rail a:not(.rail-logo), .rail button { flex-direction: column; gap: 3px; padding: 7px 2px; font-size: 9.5px; text-align: center; width: auto; flex: 1; }
  .rail-groupe { flex: 1; display: flex; }
  .profil span:not(.avatar-profil), .profil small { display: none; } .profil { padding: 5px; }
  .cadre { margin-left: 0; border-radius: 0; padding: 18px 16px 30px; min-height: 100vh; }
  .colonnes, .principal, .cote { gap: 18px; } .carte { padding: 18px; } .tuiles { gap: 12px; } .entete { margin-bottom: 18px; }
  .banniere { padding: 20px; } .banniere-dessin { display: none; }
  h1 { font-size: 22px; } .cursive { font-size: 26px; }
  .titre-ligne { flex-direction: column; align-items: stretch; }
  .bouton-lecture { justify-content: center; }
  .tuile .valeur { font-size: 20px; }
  .element { grid-template-columns: auto minmax(0, 1fr); }
  .element .actions, .lien-zone { grid-column: 1 / -1; justify-content: flex-start; }
  .cadre-outil { height: calc(100vh - 190px); }
}

/* ---------- comptes : administrateur et invités ---------- */
.rail a[hidden] { display: none !important; }
.liste-comptes, .liste-invitations { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.compte { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--bord); border-radius: var(--rayon-petit); }
.compte.suspendu { opacity: .6; }
.compte-texte { display: grid; gap: 2px; min-width: 0; flex: 1; }
.compte-texte b { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.compte-texte small { color: var(--texte-3); font-size: 12px; }
.compte-actions { display: flex; gap: 6px; flex: none; }
.liste-invitations { margin-top: 14px; }
.liste-invitations li { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12.5px; color: var(--texte-2); background: var(--surface-2); border-radius: 12px; padding: 8px 12px; }
.carte.invitation .bouton { margin-top: 12px; }
.infos.une-colonne { grid-template-columns: 1fr; }
.etapes.installation { list-style: none; padding: 0; width: min(520px, 100%); }
.etapes.installation li { position: relative; padding-left: 22px; }
.etapes.installation li::before { content: "✓"; position: absolute; left: 0; color: var(--vert-texte); font-weight: 700; }
.etapes.installation li:last-child::before { content: "…"; color: var(--texte-3); }
.etapes.installation li.ko::before { content: "✕"; color: var(--rouge-texte); }
.sous-menu a .point.installation, .sous-menu a .point.attente { background: #fbbf24; animation: pouls 1.5s infinite; }
.sous-menu a .point.echec { background: #fb7185; }
#mdp-formulaire { max-width: 420px; margin-top: 4px; }
#ba-retirer { margin-top: 14px; }
.liste-invitations li { flex-direction: column; align-items: stretch; gap: 8px; }
.invitation-texte { display: grid; gap: 3px; min-width: 0; }
.invitation-texte code { font: 11.5px var(--mono); word-break: break-all; color: var(--texte); }
.liste-invitations .compte-actions { justify-content: flex-end; }
.liste-comptes .vide-texte, .liste-invitations .vide-texte { color: var(--texte-3); font-size: 13px; padding: 6px 0; display: block; }

/* ---------- œil afficher / masquer le mot de passe ---------- */
.champ-oeil { position: relative; display: grid; }
.champ-oeil input { padding-right: 44px !important; width: 100%; box-sizing: border-box; }
.oeil { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 9px; background: transparent; color: var(--texte-3); cursor: pointer; display: grid; place-items: center; padding: 0; }
.oeil:hover { background: var(--violet-fond); color: var(--violet-texte); }
.oeil svg { width: 20px; height: 20px; }
.bouton-raccourci { gap: 8px; box-shadow: var(--ombre); border-color: transparent; }
.bouton-raccourci svg { width: 18px; height: 18px; color: var(--violet); }
@media (max-width: 900px) { .bouton-raccourci span { display: none; } }