/* Dashboard du guide : même direction artistique que l'application (nuit et or, Figtree), en format bureau. */
:root {
  --nuit-0: #0a1428; --nuit-1: #0f1d38; --nuit-2: #16264a; --nuit-3: #1f3159;
  --or: #f6d38d; --sur-or: #0f1d38;
  --texte: #dde3ee; --doux: #9aa6bc; --pale: #66748f; --bord: rgba(255, 255, 255, .08);
  --vert: #8fe0a6; --rouge: #f0a49b;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { display: grid; grid-template-columns: 260px 1fr; background: var(--nuit-0); color: var(--texte); font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: inherit; text-decoration: none; }
.ico { width: 18px; height: 18px; flex: none; }
[hidden] { display: none !important; }

/* menu */
.menu { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 28px; padding: 26px 18px; background: var(--nuit-1); border-right: 1px solid var(--bord); }
.marque { display: flex; align-items: center; gap: 12px; padding: 0 8px; }
.marque-logo { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--or); color: var(--sur-or); font: 800 20px var(--sans); }
.marque b { display: block; color: #fff; font-size: 1.05em; }
.marque small { color: var(--or); font-weight: 700; font-size: .72em; letter-spacing: .14em; text-transform: uppercase; }
nav { display: grid; gap: 4px; }
nav a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; color: var(--doux); font-weight: 600; transition: background .15s, color .15s; }
nav a:hover { background: rgba(255, 255, 255, .04); color: #fff; }
nav a.actif { background: var(--nuit-2); color: #fff; box-shadow: inset 0 0 0 1px var(--bord); }
nav a.actif .ico { color: var(--or); }
.menu-pied { margin-top: auto; display: grid; gap: 10px; }
.etat-base { margin: 0; padding: 10px 12px; border-radius: 12px; font-size: .8em; font-weight: 600; background: rgba(255, 255, 255, .04); }
.etat-base::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; background: var(--pale); }
.etat-base.ok::before { background: var(--vert); }
.etat-base.ko { color: var(--rouge); }
.etat-base.ko::before { background: var(--rouge); }
.lien-app { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; color: var(--doux); font-weight: 600; font-size: .9em; }
.lien-app:hover { color: #fff; }

/* contenu */
.vue { padding: 34px 40px 60px; max-width: 1240px; width: 100%; }
.tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.tete h1 { margin: 2px 0 0; font: 800 30px/1.1 var(--sans); letter-spacing: -.02em; color: #fff; }
.sur { margin: 0; color: var(--or); font: 700 11.5px var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.sous { margin: 6px 0 0; color: var(--doux); max-width: 640px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.bouton { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 14px; background: var(--or); color: var(--sur-or); font-weight: 800; white-space: nowrap; }
.bouton.secondaire { background: var(--nuit-2); color: #fff; font-weight: 600; box-shadow: inset 0 0 0 1px var(--bord); }
.bouton.secondaire:hover { box-shadow: inset 0 0 0 1px rgba(246, 211, 141, .4); }
.retour { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 14px; color: var(--doux); font-weight: 600; font-size: .9em; }
.retour:hover { color: #fff; }

.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.chiffres div { padding: 16px 18px; border-radius: 18px; background: var(--nuit-1); box-shadow: inset 0 0 0 1px var(--bord); }
.chiffres b { display: block; font: 800 26px/1.1 var(--sans); color: #fff; }
.chiffres span { color: var(--doux); font-size: .85em; }

.carte-bloc { padding: 20px 22px; border-radius: 22px; background: var(--nuit-1); box-shadow: inset 0 0 0 1px var(--bord); }
.carte-bloc h2 { margin: 0 0 14px; font: 700 1.05em var(--sans); color: #fff; }
.colonnes { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; }
.pile { display: grid; gap: 18px; }

/* tableau des étapes */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; padding: 10px 12px; color: var(--pale); font: 700 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--bord); }
.table td { padding: 12px; border-bottom: 1px solid var(--bord); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr[data-etape] { cursor: pointer; transition: background .15s; }
.table tbody tr[data-etape]:hover { background: rgba(255, 255, 255, .03); }
.table td b { display: block; color: #fff; }
.table td small { color: var(--doux); }
.table .n { width: 44px; color: var(--or); font-weight: 800; }
.table .fleche { width: 30px; color: var(--pale); }
.puce { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font: 700 12px var(--sans); }
.puce .ico { width: 13px; height: 13px; stroke-width: 3; }
.puce.oui { background: rgba(143, 224, 166, .12); color: var(--vert); }
.puce.non { background: rgba(255, 255, 255, .05); color: var(--pale); }
.puce.modif { background: rgba(246, 211, 141, .14); color: var(--or); }

/* formulaire */
.champ { display: grid; gap: 6px; margin-bottom: 14px; }
.champ span { color: var(--doux); font-size: .85em; font-weight: 600; }
.champ em { font-style: normal; color: var(--pale); font-weight: 500; }
.champ input, .champ textarea, select { width: 100%; padding: 11px 13px; border: 0; border-radius: 12px; background: var(--nuit-2); box-shadow: inset 0 0 0 1px var(--bord); outline: none; }
.champ textarea { resize: vertical; line-height: 1.55; }
.champ input:focus, .champ textarea:focus, select:focus { box-shadow: inset 0 0 0 2px var(--or); }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.note { display: flex; gap: 8px; margin: 10px 0 0; color: var(--doux); font-size: .85em; }
.note .ico { width: 16px; height: 16px; color: var(--or); margin-top: 2px; }
.vide { margin: 0; color: var(--pale); }
audio { width: 100%; }

/* langues */
.langue-nom { display: flex; align-items: center; gap: 12px; }
.code { width: 46px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--nuit-3); color: var(--or); font: 800 12px var(--sans); }
.langues select { max-width: 220px; }
.jauges { display: grid; gap: 6px; min-width: 300px; }
.jauge { display: grid; grid-template-columns: 120px 1fr 50px; align-items: center; gap: 10px; font-size: .82em; color: var(--doux); }
.jauge div { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.jauge i { display: block; height: 100%; background: var(--or); }
.jauge b { color: #fff; text-align: right; }

.message { position: fixed; right: 24px; bottom: 24px; padding: 13px 18px; border-radius: 14px; font-weight: 600; box-shadow: 0 14px 40px rgba(0, 0, 0, .45); }
.message.ok { background: var(--nuit-2); color: #fff; box-shadow: 0 14px 40px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(143, 224, 166, .4); }
.message.ko { background: #3a1d24; color: var(--rouge); }

@media (max-width: 980px) {
  body { grid-template-columns: 1fr; }
  .menu { position: static; height: auto; }
  .colonnes, .chiffres { grid-template-columns: 1fr; }
}