/* Mise en page de l'application ITAP — s'appuie sur les variables de charte.css (charte Orange CI). */
.noscript { padding: 24px; }
.hidden { display: none !important; }

/* --- Structure --- */
.side { display: flex; flex-direction: column; z-index: 20; }
.side .brand { font-size: 18px; font-weight: 700; padding: 8px 12px 20px; letter-spacing: .5px; }
.side .brand b { color: var(--orange); }
.side nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.side a { cursor: pointer; }
.side .who { border-top: 1px solid #333; padding-top: 12px; font-size: 13px; color: #cfcfcf; }
.side .who strong { color: #fff; display: block; }
.side .who a { padding: 6px 12px; font-size: 14px; }
.top { display: flex; align-items: center; gap: 12px; margin: -24px -24px 20px; padding: 10px 24px; background: var(--card); border-bottom: 3px solid var(--orange); position: sticky; top: 0; z-index: 10; }
.top .spacer { flex: 1; }
.top select { max-width: 220px; }
.burger { background: transparent; border: 1px solid var(--line); border-radius: 3px; padding: 6px 8px; color: var(--fg); cursor: pointer; }
@media (max-width: 800px) {
  .side { display: none; position: fixed; width: 260px; }
  body.menu-open .side { display: flex; }
  .top { margin: -16px -16px 16px; padding: 10px 16px; }
}

/* --- Éléments communs --- */
h1 { margin: 0 0 4px; font-size: 24px; }
h2 { margin: 0 0 12px; font-size: 18px; }
.sub { color: var(--muted); margin: 0 0 20px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.row.end { justify-content: flex-end; }
.grow { flex: 1; }
.stack > * + * { margin-top: 16px; }
.card h2:first-child { margin-top: 0; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.err { color: var(--bad); }

label.f { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
input, select, textarea { font: inherit; color: var(--fg); background: var(--card); border: 1px solid var(--line); border-radius: 3px; padding: 8px 10px; max-width: 100%; }
input[type=checkbox] { width: 18px; height: 18px; padding: 0; accent-color: var(--orange); }
input.wide, textarea.wide { width: 100%; }
textarea { min-height: 90px; resize: vertical; }
textarea.code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.btn.small { padding: 5px 10px; font-size: 13px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.danger { background: var(--bad); color: #fff; }
.btn.ghost.on { background: var(--orange); color: var(--on-orange); border-color: var(--orange); }
.btn .ico, .side a .ico { margin-right: 6px; vertical-align: -4px; }
.iconbtn { background: transparent; border: 1px solid var(--line); border-radius: 3px; padding: 4px 6px; cursor: pointer; color: var(--fg); }
.iconbtn:hover { border-color: var(--orange); }

.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.action { display: block; text-decoration: none; color: inherit; border-top: 4px solid var(--orange); cursor: pointer; }
.action:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, .15); }
.action h2 { margin-bottom: 6px; }
.action p { margin: 0; color: var(--muted); font-size: 14px; }
.action.off { opacity: .6; cursor: default; border-top-color: var(--neutral); }
.action.off:hover { box-shadow: none; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kpi { border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; background: var(--card); }
.kpi small { color: var(--muted); display: block; }
.kpi b { font-size: 24px; }

table.t { width: 100%; border-collapse: collapse; }
table.t th, table.t td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 14px; }
table.t th { color: var(--muted); font-weight: 600; font-size: 13px; }
table.t tr.click { cursor: pointer; }
table.t tr.click:hover { background: rgba(255, 121, 0, .08); }
.scroll { overflow-x: auto; }

.notice { border-radius: 3px; padding: 10px 12px; border: 1px solid var(--line); }
.notice.warn { background: var(--warn-bg); }
.notice.bad { background: var(--bad-bg); color: var(--bad); }
.notice.ok { background: var(--ok-bg); color: var(--ok); }
.empty { text-align: center; padding: 32px 12px; color: var(--muted); }

.toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 50; }
.toast { background: #000; color: #fff; border-left: 4px solid var(--orange); padding: 10px 14px; border-radius: 3px; max-width: 360px; }
.toast.bad { border-left-color: var(--bad); }
.toast.ok { border-left-color: var(--ok); }

/* --- Éditeur de scénario --- */
.steps { display: flex; flex-direction: column; gap: 8px; }
.step { border: 1px solid var(--line); border-radius: 4px; padding: 10px; display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: start; background: var(--card); }
.step .n { font-weight: 700; color: var(--orange); padding-top: 6px; }
.step .body { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.step .ctl { display: flex; gap: 4px; }
.step.check { border-left: 4px solid var(--ok); }
.sel { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.kv { display: flex; gap: 6px; margin-bottom: 6px; }
.apistep { border: 1px solid var(--line); border-radius: 4px; padding: 12px; background: var(--card); }
.apistep > * + * { margin-top: 10px; }
.tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }

/* --- Détail d'exécution --- */
video.proof { width: 100%; max-width: 960px; border: 1px solid var(--line); border-radius: 4px; background: #000; }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.shots img { width: 100%; border: 1px solid var(--line); border-radius: 3px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; background: var(--neutral); }
.dot.ok { background: var(--ok); } .dot.failed { background: var(--bad); } .dot.blocked { background: var(--warn); }

/* --- Enregistreur --- */
.rec { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .rec { grid-template-columns: 1fr; } }
.screen { position: relative; border: 2px solid var(--line); border-radius: 4px; overflow: hidden; background: #111; line-height: 0; outline: none; }
.screen:focus-within { border-color: var(--orange); }
.screen img { touch-action: pan-x pinch-zoom; width: 100%; height: auto; display: block; cursor: crosshair; user-select: none; -webkit-user-drag: none; }
.screen.assert { border-color: var(--ok); }
.screen.assert img { cursor: cell; }
.recbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.badge-rec { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--bad); }
.badge-rec::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--bad); animation: pulse 1.2s infinite; }
.badge-rec.paused { color: var(--warn); } .badge-rec.paused::before { background: var(--warn); animation: none; }
@keyframes pulse { 50% { opacity: .25; } }
.typebox { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.typebox input { flex: 1; min-width: 160px; }
.steplist { list-style: none; margin: 0; padding: 0; max-height: 520px; overflow: auto; }
.steplist li { padding: 6px 8px; border-bottom: 1px solid var(--line); font-size: 13px; }
.steplist li small { color: var(--muted); display: block; }
.steplist li.check::before { content: '✓ '; color: var(--ok); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .badge-rec::before { animation: none; } }

.pill.big { font-size: 18px; padding: 6px 18px; }
input.cap { width: 120px; }
details > pre { overflow: auto; max-height: 360px; background: var(--bg); padding: 10px; border-radius: 3px; }

/* =====================================================================================
   Charte ARIA / Orange CI (d'après l'interface ARIA) : menu noir à groupes repliables, pastilles de couleur,
   barre supérieure noire avec filet multicolore, cartes à bandeau bleu, tuiles colorées, boutons à bordure franche.
   ===================================================================================== */
:root { --blue: #4bb4e6; --green: #50be87; --yellow: #ffd200; --purple: #a885d8; --pink: #ffb4e6; --grey: #6e6e6e; --side-w: 268px; }

.card { border-top: 4px solid var(--blue); border-radius: 3px; }
.card.action { border-top-color: var(--orange); }
.btn { border: 2px solid var(--orange); border-radius: 3px; }
.btn.ghost { background: var(--card); color: var(--fg); border: 2px solid var(--fg); }
.btn.ghost:hover { background: var(--fg); color: var(--card); }
.btn.danger { border-color: var(--bad); }
.btn.small { border-width: 2px; }
.pill { border-radius: 3px; }

/* --- Menu --- */
.side { padding: 14px 12px; overflow-y: auto; }
.side .brand { display: flex; align-items: center; gap: 12px; padding: 4px 4px 14px; }
.side .brand .logo { width: 46px; height: 46px; background: var(--orange); color: #000; display: grid; place-items: center; flex: none; }
.side .brand .logo::after { content: none; }
.side .brand .logo svg { width: 24px; height: 24px; stroke: #fff; }
.side .brand strong { display: block; font-size: 20px; letter-spacing: .02em; color: #fff; }
.side .brand small { display: block; color: var(--orange); font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.side .fold { display: flex; align-items: center; gap: 8px; width: 100%; background: #111; color: #fff; border: 1px solid #444; border-radius: 3px; padding: 8px 10px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; margin-bottom: 8px; }
.side .fold:hover { border-color: var(--orange); }
.side .fold svg { width: 14px; height: 14px; }
.side nav { gap: 0; }
.side .grp { display: flex; justify-content: space-between; align-items: center; width: 100%; background: none; border: 0; color: var(--orange); font: 700 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; padding: 16px 12px 8px; cursor: pointer; }
.side .grp svg { width: 14px; height: 14px; transition: transform .2s; }
.side .grp[aria-expanded=false] svg { transform: rotate(-90deg); }
.side .grp:hover { color: #fff; }
.side .group { display: flex; flex-direction: column; gap: 2px; }
.side .group.hidden { display: none; }
.side a { gap: 12px; font-size: 14px; border-radius: 3px; padding: 10px 12px; }
.side a .ico { margin: 0; flex: none; }
.side a .sq { margin-left: auto; width: 8px; height: 8px; background: var(--c); flex: none; }
.side a.active { background: var(--orange); color: #000; font-weight: 700; }
.side a.active .sq { background: #000; }
.sq1 { --c: var(--orange); } .sq2 { --c: var(--blue); } .sq3 { --c: var(--green); } .sq4 { --c: var(--purple); } .sq5 { --c: var(--pink); } .sq6 { --c: var(--yellow); }
.side .who { margin-top: 16px; }

/* --- Barre supérieure --- */
.top { background: #000; color: #fff; border-bottom: 0; padding: 12px 24px 18px; flex-wrap: wrap; gap: 12px; }
.top::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--orange) 0 24%, var(--blue) 24% 44%, var(--green) 44% 62%, var(--yellow) 62% 80%, var(--purple) 80% 100%); }
.top .burger { background: transparent; color: #fff; border: 1px solid #555; }
.top .title { font-size: 20px; font-weight: 700; margin-right: 8px; }
.top .search { display: flex; align-items: center; gap: 8px; background: #fff; color: #000; border-radius: 3px; padding: 0 10px; min-width: 240px; flex: 0 1 340px; }
.top .search svg { width: 18px; height: 18px; color: #555; flex: none; }
.top .search input { border: 0; background: transparent; color: #000; outline: none; padding: 9px 0; flex: 1; min-width: 0; }
.top .search:focus-within { box-shadow: 0 0 0 3px var(--orange); }
.top .state { display: inline-flex; align-items: center; gap: 8px; border: 2px solid #fff; padding: 5px 10px; font-size: 12px; font-weight: 700; }
.top .state i { width: 10px; height: 10px; background: var(--green); flex: none; }
.top .state.off i { background: var(--neutral); }
.top .state.down i { background: var(--bad); }
.top select { background: #fff; color: #000; border: 0; border-radius: 3px; }
.top .proj { display: flex; align-items: center; gap: 8px; color: #ccc; font-size: 13px; }
.top .me { display: flex; align-items: center; gap: 10px; }
.top .me .av { width: 38px; height: 38px; border: 2px solid var(--orange); display: grid; place-items: center; color: var(--orange); flex: none; }
.top .me b { display: block; font-size: 14px; line-height: 1.1; }
.top .me small { color: #bbb; font-size: 12px; }
@media (max-width: 800px) { .top .search, .top .state, .top .me div, .top .proj > span { display: none; } .top { padding: 10px 16px 16px; } }

/* --- En-tête de page --- */
.pagehead { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 20px; }
.pagehead .ph-ico { width: 56px; height: 56px; background: var(--orange); color: #000; display: grid; place-items: center; border-radius: 3px; flex: none; }
.pagehead .ph-ico svg { width: 28px; height: 28px; }
.pagehead .ph-txt { flex: 1; min-width: 200px; }
.pagehead h1 { margin: 0; font-size: 24px; }
.pagehead .sub { margin: 4px 0 0; }
.pagehead .ph-act { display: flex; gap: 10px; flex-wrap: wrap; }
.pagehead h1 .ico { display: none; }

/* --- Contrôle de période, pastilles de filtre --- */
.seg { display: inline-flex; align-items: stretch; flex-wrap: wrap; }
.seg .seg-label { background: #000; color: #fff; font: 700 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; padding: 0 14px; display: flex; align-items: center; min-height: 38px; }
.seg button { background: var(--card); color: var(--fg); border: 2px solid var(--fg); border-left: 0; padding: 8px 14px; font: inherit; font-size: 14px; cursor: pointer; }
.seg button.on { background: var(--orange); color: #000; font-weight: 700; }
.seg button:hover:not(.on) { background: rgba(255, 121, 0, .15); }
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { display: inline-flex; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 4px; padding: 6px 14px; background: var(--card); color: var(--fg); font: inherit; font-size: 14px; cursor: pointer; }
.chip b { background: #000; color: #fff; border-radius: 4px; padding: 1px 9px; font-size: 12px; }
.chip:hover { border-color: var(--orange); }
.chip.on { border-color: var(--orange); box-shadow: inset 0 0 0 2px var(--orange); }
@media (prefers-color-scheme: dark) { .chip b { background: var(--orange); color: #000; } }

/* --- Tuiles de statistiques --- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.tile { --c: var(--grey); display: flex; align-items: center; gap: 14px; padding: 14px; border: 2px solid var(--c); border-radius: 3px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 9%, var(--card)) 0 68%, color-mix(in srgb, var(--c) 32%, var(--card)) 100%); }
.tile .tile-ico { width: 46px; height: 46px; border: 2px solid var(--fg); background: var(--card); display: grid; place-items: center; flex: none; }
.tile .tile-ico svg { width: 24px; height: 24px; }
.tile b { font-size: 30px; line-height: 1; display: block; }
.tile small { color: var(--muted); font-size: 14px; }
.tile.c-grey { --c: var(--grey); } .tile.c-blue { --c: var(--blue); } .tile.c-purple { --c: var(--purple); } .tile.c-orange { --c: var(--orange); }
.tile.c-red { --c: var(--bad); } .tile.c-yellow { --c: var(--yellow); } .tile.c-green { --c: var(--green); } .tile.c-pink { --c: var(--pink); }
.rate { text-align: right; color: var(--muted); }
.rate b { color: var(--fg); font-size: 18px; }

table.t th { text-transform: uppercase; font-size: 11px; letter-spacing: .05em; }

a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.kpi { border-radius: 3px; border-width: 2px; }

/* --- Icônes : tracé fin et moderne (1,6 px), pastilles teintées sur les tuiles --- */
svg.ico { stroke-width: 1.6; }
.pagehead .ph-ico svg { stroke-width: 1.5; width: 30px; height: 30px; }
.tile { border-width: 1px; border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 1px 2px rgba(0, 0, 0, .04); transition: box-shadow .2s, transform .2s; }
.tile:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--c) 28%, transparent); transform: translateY(-1px); }
.tile .tile-ico { width: 52px; height: 52px; border: 0; border-radius: 8px; background: color-mix(in srgb, var(--c) 18%, var(--card)); color: color-mix(in srgb, var(--c) 75%, #000); }
.tile .tile-ico svg { width: 28px; height: 28px; stroke-width: 1.5; }
.tile.c-yellow .tile-ico { color: #8a6d00; }
.tile.c-pink .tile-ico { color: #b0307f; }
.tile b { font-size: 32px; font-weight: 700; letter-spacing: -.02em; }
@media (prefers-color-scheme: dark) { .tile .tile-ico, .tile.c-yellow .tile-ico, .tile.c-pink .tile-ico { color: var(--c); } }
@media (prefers-reduced-motion: reduce) { .tile { transition: none; } .tile:hover { transform: none; } }
.action h2 svg { width: 22px; height: 22px; stroke: var(--orange); stroke-width: 1.6; margin-right: 8px; vertical-align: -4px; }
.action.off h2 svg { stroke: var(--neutral); }

/* --- Formes arrondies pour les icônes et leurs contenants --- */
svg.ico { stroke-linecap: round; stroke-linejoin: round; }
.tile .tile-ico { border-radius: 50%; }
.pagehead .ph-ico { border-radius: 8px; }
.side .brand .logo { border-radius: 6px; }
.top .me .av { border-radius: 50%; }
.side a .sq, .top .state i { border-radius: 50%; }
.side a .sq { width: 9px; height: 9px; }
.iconbtn { border-radius: 5px; }
.ph-ico svg, .tile-ico svg { stroke-linecap: round; stroke-linejoin: round; }

/* =====================================================================================
   Glisser-déposer, éditeur en langage simple, assistant guidé
   ===================================================================================== */
.sort-box { position: relative; }
.dropline { position: absolute; left: 0; right: 0; height: 4px; background: var(--orange); border-radius: 2px; box-shadow: 0 0 0 3px rgba(255, 121, 0, .25); pointer-events: none; z-index: 5; top: 0; }
.dragging { opacity: .92; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); z-index: 6; position: relative; background: var(--card); }
body.dnd-active { user-select: none; -webkit-user-select: none; cursor: grabbing; }
.grip { background: transparent; border: 0; padding: 6px 4px; cursor: grab; color: var(--muted); touch-action: none; display: grid; place-items: center; border-radius: 4px; }
.grip:hover, .grip:focus-visible { background: rgba(255, 121, 0, .15); color: var(--fg); }
.grip svg { width: 20px; height: 20px; }
.dnd-ghost { position: fixed; z-index: 60; pointer-events: none; background: var(--orange); color: #000; font-weight: 700; padding: 8px 14px; border-radius: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
.palette { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 10px; border: 2px dashed var(--line); border-radius: 6px; background: var(--bg); }
.palette .lbl { color: var(--muted); font-size: 13px; width: 100%; }
.palette-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 4px; background: var(--card); border: 2px solid var(--fg); color: var(--fg); font: inherit; font-size: 14px; font-weight: 700; cursor: grab; touch-action: none; user-select: none; }
.palette-chip:hover, .palette-chip:focus-visible { border-color: var(--orange); background: rgba(255, 121, 0, .12); }
.palette-chip.chk { border-color: var(--green); }

.step { grid-template-columns: auto 34px 1fr auto; }
.step .hint { width: 100%; color: var(--muted); font-size: 13px; margin: 0; }
.step.check .n { color: var(--green); }
.step .say { font-weight: 700; white-space: nowrap; }
.apisteps { display: flex; flex-direction: column; gap: 12px; }
.apistep .grip { margin-right: 6px; }
.modebar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* --- Frise « où en suis-je ? » --- */
.stepper { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; overflow-x: auto; }
.stepper li { flex: 1; min-width: 110px; text-align: center; position: relative; padding-top: 4px; font-size: 13px; color: var(--muted); }
.stepper li::before { content: ''; position: absolute; top: 20px; left: -50%; width: 100%; height: 3px; background: var(--line); z-index: 0; }
.stepper li:first-child::before { display: none; }
.stepper li.done::before, .stepper li.current::before { background: var(--green); }
.stepper .dot { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; margin: 0 auto 6px; display: grid; place-items: center; background: var(--card); border: 2px solid var(--line); font-weight: 700; color: var(--muted); }
.stepper .dot svg { width: 18px; height: 18px; }
.stepper li.done .dot { background: var(--green); border-color: var(--green); color: #fff; }
.stepper li.current .dot { background: var(--orange); border-color: var(--orange); color: #000; box-shadow: 0 0 0 5px rgba(255, 121, 0, .25); }
.stepper li.current { color: var(--fg); font-weight: 700; }
.nextstep { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 14px; padding: 12px 14px; border-radius: 6px; background: rgba(255, 121, 0, .12); border: 1px solid rgba(255, 121, 0, .5); }
.nextstep p { margin: 0; flex: 1; min-width: 200px; }

/* --- Coach d'enregistrement --- */
.coach { display: flex; flex-direction: column; gap: 10px; }
.coach .banner { padding: 12px 14px; border-radius: 6px; background: rgba(255, 121, 0, .12); border: 1px solid rgba(255, 121, 0, .5); }
.coach .banner b { display: block; margin-bottom: 2px; }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.checklist .box { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; flex: none; margin-top: 1px; }
.checklist .box svg { width: 14px; height: 14px; stroke-width: 2.4; }
.checklist li.ok .box { background: var(--green); border-color: var(--green); color: #fff; }
.checklist li.todo.now .box { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255, 121, 0, .3); }
.checklist .sm { color: var(--muted); font-size: 13px; display: block; }

/* --- Guide de démarrage et aide --- */
.guide-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.guide-cards .action { padding: 20px; }
.guide-cards .action h2 { display: flex; align-items: center; gap: 10px; }
.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; counter-reset: f; }
.flow > div { position: relative; padding: 14px; border-radius: 6px; background: var(--bg); border: 1px solid var(--line); }
.flow > div::before { counter-increment: f; content: counter(f); position: absolute; top: -12px; left: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--orange); color: #000; font-weight: 700; display: grid; place-items: center; }
.flow b { display: block; margin: 6px 0 4px; }
.flow p { margin: 0; color: var(--muted); font-size: 14px; }
.progress { height: 10px; border-radius: 4px; background: var(--line); overflow: hidden; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--orange), var(--yellow)); border-radius: 4px; }
details.faq { border-bottom: 1px solid var(--line); padding: 10px 0; }
details.faq summary { cursor: pointer; font-weight: 700; }
details.faq p { margin: 8px 0 0; color: var(--muted); }
.help-btn { background: transparent; color: #fff; border: 2px solid #fff; border-radius: 4px; padding: 6px 14px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.help-btn:hover { background: var(--orange); border-color: var(--orange); color: #000; }
.help { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--card); color: var(--fg); z-index: 40; box-shadow: -10px 0 40px rgba(0, 0, 0, .35); border-left: 5px solid var(--orange); display: flex; flex-direction: column; }
.help header { display: flex; align-items: center; gap: 10px; padding: 16px; background: #000; color: #fff; }
.help header h2 { margin: 0; flex: 1; font-size: 18px; }
.help header button { background: transparent; border: 1px solid #666; color: #fff; border-radius: 4px; padding: 6px; cursor: pointer; }
.help .body { padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.help h3 { margin: 0 0 6px; font-size: 15px; }
.help ul { margin: 0; padding-left: 20px; } .help li { margin-bottom: 6px; }
.help .tip { background: rgba(255, 121, 0, .12); border: 1px solid rgba(255, 121, 0, .5); border-radius: 6px; padding: 10px 12px; }
.progress i.w0 { width: 0; } .progress i.w1 { width: 20%; } .progress i.w2 { width: 40%; } .progress i.w3 { width: 60%; } .progress i.w4 { width: 80%; } .progress i.w5 { width: 100%; }
.nextstep svg { width: 26px; height: 26px; color: var(--orange); flex: none; }

.btn.waiting { opacity: .6; }
.btn.waiting:hover { box-shadow: none; }

/* --- Administration : onglets, interrupteurs, cartes d'applications --- */
.tabbar { display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 2px solid var(--line); }
.tabbar a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; margin-bottom: -2px; border-bottom: 3px solid transparent; color: var(--muted); text-decoration: none; font-weight: 700; border-radius: 5px 5px 0 0; }
.tabbar a:hover { color: var(--fg); background: rgba(255, 121, 0, .08); }
.tabbar a.on { color: var(--fg); border-bottom-color: var(--orange); background: rgba(255, 121, 0, .12); }
.tabbar a svg { width: 18px; height: 18px; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 12px; }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch .sw { position: relative; width: 44px; height: 24px; flex: none; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch .track { position: absolute; inset: 0; border-radius: 999px; background: var(--line); transition: background .2s; }
.switch .track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s; }
.switch input:checked + .track { background: var(--green); }
.switch input:checked + .track::after { transform: translateX(20px); }
.switch input:focus-visible + .track { outline: 3px solid var(--orange); outline-offset: 2px; }
.cred { display: flex; flex-direction: column; gap: 8px; }
.kvline { display: flex; gap: 12px; align-items: center; }
.kvline .k { color: var(--muted); width: 110px; flex: none; font-size: 14px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 121, 0, .18); color: var(--orange); display: inline-grid; place-items: center; font-weight: 700; font-size: 13px; }
.who-cell { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
.chipbtn { background: rgba(255, 121, 0, .12); color: var(--fg); border: 1px solid rgba(255, 121, 0, .6); border-radius: 4px; padding: 4px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.chipbtn:hover { background: var(--orange); color: #000; }
.quick { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .switch .track, .switch .track::after { transition: none; } }

/* --- Cartes d'action du tableau de bord --- */
.qa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.qa { --c1: #ff7900; --c2: #ffa347; position: relative; display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 8px; text-decoration: none; color: var(--fg);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c1) 9%, var(--card)) 0, var(--card) 62%); border: 1px solid color-mix(in srgb, var(--c1) 30%, var(--line));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05); transition: transform .2s, box-shadow .2s, border-color .2s; }
.qa:hover { transform: translateY(-3px); border-color: var(--c1); box-shadow: 0 14px 30px color-mix(in srgb, var(--c1) 28%, transparent); }
.qa:focus-visible { outline: 3px solid var(--c1); outline-offset: 3px; }
.qa .qa-ico { width: 58px; height: 58px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 8px 18px color-mix(in srgb, var(--c1) 40%, transparent); }
.qa .qa-ico svg { width: 28px; height: 28px; stroke-width: 1.6; }
.qa .qa-body { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.qa .qa-body b { font-size: 18px; }
.qa .qa-body span { color: var(--muted); font-size: 14px; line-height: 1.45; }
.qa .qa-go { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: color-mix(in srgb, var(--c1) 80%, #000); }
.qa .qa-go svg { width: 18px; height: 18px; transition: transform .2s; }
.qa:hover .qa-go svg { transform: translateX(5px); }
.qa-green { --c1: #1f9d55; --c2: #50be87; } .qa-blue { --c1: #2a8fd6; --c2: #4bb4e6; } .qa-violet { --c1: #7c4dcc; --c2: #a885d8; }
.qa.off { opacity: .6; cursor: default; box-shadow: none; filter: grayscale(.5); }
.qa.off:hover { transform: none; box-shadow: none; border-color: color-mix(in srgb, var(--c1) 30%, var(--line)); }
@media (prefers-color-scheme: dark) { .qa .qa-go { color: var(--c2); } }
@media (prefers-reduced-motion: reduce) { .qa, .qa .qa-go svg { transition: none; } .qa:hover { transform: none; } }

/* --- Import d'un mode opératoire --- */
.file-in { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 28px 16px; border: 2px dashed var(--line); border-radius: 8px; cursor: pointer; background: var(--bg); transition: border-color .2s, background .2s; }
.dropzone:hover, .dropzone.over, .dropzone:focus-within { border-color: var(--orange); background: rgba(255, 121, 0, .08); }
.dropzone .dz-ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 121, 0, .15); color: var(--orange); }
.dropzone .dz-ico svg { width: 28px; height: 28px; }
.file-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.file-info:empty { display: none; }
.readlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.readlist li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--card); }
.readlist li.warn { border-color: rgba(224, 161, 0, .6); background: var(--warn-bg); }
.readlist li.bad { border-color: rgba(214, 50, 36, .5); background: var(--bad-bg); }
.readlist .st { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--ok-bg); color: var(--ok); }
.readlist .st.warn { background: rgba(255, 210, 0, .3); color: #8a6d00; } .readlist .st.bad { background: rgba(214, 50, 36, .15); color: var(--bad); }
.readlist .st svg { width: 15px; height: 15px; stroke-width: 2.2; }
.readlist .src { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.readlist .note { font-size: 13px; color: var(--muted); }
.readlist .fix { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.readlist .fix input { flex: 1; min-width: 200px; }
.proc-title { font-weight: 700; font-size: 17px; }
.samples { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px; }
.samples code { background: var(--bg); padding: 4px 8px; border-radius: 4px; font-size: 13px; }

/* =====================================================================================
   Scénarios : en-tête « hero », tuiles-filtres, cartes colorées ; menu aux icônes colorées
   ===================================================================================== */
.pagehead.hero { position: relative; overflow: hidden; border: 0; color: #fff; background: linear-gradient(115deg, #ff7900 0%, #ff4f8b 52%, #7c4dcc 100%); box-shadow: 0 14px 34px rgba(255, 79, 139, .28); }
.pagehead.hero .ph-ico { background: rgba(255, 255, 255, .22); color: #fff; backdrop-filter: blur(4px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.pagehead.hero h1 { color: #fff; font-size: 28px; }
.pagehead.hero .sub { color: rgba(255, 255, 255, .88); }
.pagehead.hero .hero-dots { position: absolute; right: -40px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .28), transparent 65%); pointer-events: none; }
.pagehead.hero .hero-dots::after { content: ''; position: absolute; left: -150px; top: 120px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 210, 0, .45), transparent 65%); }
.btn.light { background: #fff; color: #000; border-color: #fff; }
.btn.light:hover { background: #000; color: #fff; border-color: #000; }
.btn.glass { background: rgba(255, 255, 255, .18); color: #fff; border-color: rgba(255, 255, 255, .7); }
.btn.glass:hover { background: #fff; color: #000; }
.pagehead.hero .ph-act { position: relative; z-index: 1; }

button.tile.filt { font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; }
button.tile.filt:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; }
button.tile.filt.on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 45%, transparent), 0 10px 24px color-mix(in srgb, var(--c) 25%, transparent); border-color: var(--c); }

.scard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.scard { --c: var(--grey); position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 14px 22px; border-radius: 8px; text-decoration: none; color: var(--fg); overflow: hidden;
  background: linear-gradient(165deg, color-mix(in srgb, var(--c) 8%, var(--card)) 0, var(--card) 55%); border: 1px solid color-mix(in srgb, var(--c) 28%, var(--line)); box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  transition: transform .2s, box-shadow .2s, border-color .2s; animation: rise .5s both; }
.scard::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 40%, #fff)); }
.scard:hover { transform: translateY(-3px); border-color: var(--c); box-shadow: 0 14px 30px color-mix(in srgb, var(--c) 26%, transparent); }
.scard:focus-visible { outline: 3px solid var(--c); outline-offset: 3px; }
.scard.sc-green { --c: var(--green); } .scard.sc-yellow { --c: #e0a100; } .scard.sc-grey { --c: var(--grey); }
.scard h3 { margin: 0; font-size: 17px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc-head { display: flex; align-items: center; gap: 10px; }
.sc-ico { width: 40px; height: 40px; border-radius: 6px; display: grid; place-items: center; color: #fff; flex: none; box-shadow: 0 6px 14px rgba(0, 0, 0, .18); }
.sc-ico.web { background: linear-gradient(135deg, #ff7900, #ff4f8b); } .sc-ico.api { background: linear-gradient(135deg, #2a8fd6, #4bb4e6); }
.sc-ico svg { width: 22px; height: 22px; }
.sc-type { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.sc-meta { margin: 0; color: var(--muted); font-size: 13px; }
.sc-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 6px; font-size: 13px; }
.sc-open { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: color-mix(in srgb, var(--c) 78%, #000); }
.sc-open svg { width: 16px; height: 16px; transition: transform .2s; } .scard:hover .sc-open svg { transform: translateX(4px); }
.ochip { --o: var(--orange); display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 4px; font-size: 12px; font-weight: 700; color: color-mix(in srgb, var(--o) 75%, #000); background: color-mix(in srgb, var(--o) 14%, var(--card)); }
.ochip svg { width: 14px; height: 14px; }
.ochip.o-green { --o: var(--green); } .ochip.o-violet { --o: var(--purple); } .ochip.o-blue { --o: var(--blue); }
.rchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 4px; font-size: 12px; background: var(--bg); color: var(--muted); }
.rchip i { width: 8px; height: 8px; border-radius: 50%; background: var(--neutral); }
.rchip.r-ok i { background: var(--ok); } .rchip.r-bad i { background: var(--bad); } .rchip.r-warn i { background: #e0a100; } .rchip.r-info i { background: var(--info); }
.rchip.r-ok { color: var(--ok); } .rchip.r-bad { color: var(--bad); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.scard:nth-child(2) { animation-delay: .04s; } .scard:nth-child(3) { animation-delay: .08s; } .scard:nth-child(4) { animation-delay: .12s; } .scard:nth-child(5) { animation-delay: .16s; } .scard:nth-child(6) { animation-delay: .2s; }
@media (prefers-reduced-motion: reduce) { .scard { animation: none; transition: none; } .scard:hover { transform: none; } }
@media (prefers-color-scheme: dark) { .ochip, .sc-open { color: var(--o, var(--c)); } }

/* menu : icônes aux couleurs de la charte */
.nv1 { --c: var(--orange); } .nv2 { --c: var(--blue); } .nv3 { --c: var(--green); } .nv4 { --c: var(--purple); } .nv5 { --c: var(--pink); } .nv6 { --c: var(--yellow); }
.side a.nv .ico { color: var(--c); }
.side a.nv:hover { background: color-mix(in srgb, var(--c) 18%, #000); }
.side a.nv.active .ico { color: #000; }

/* =====================================================================================
   Couleurs vives (tableau de bord) et bannières robot / IA / automatisation
   ===================================================================================== */
:root { --vivid-blue: #1e88ff; --vivid-green: #12b76a; --vivid-yellow: #ffb800; --vivid-purple: #7c4dff; --vivid-pink: #ff3d8b; --vivid-red: #f04438; --vivid-cyan: #06b6d4; --vivid-indigo: #4f46e5; }
.tile { border-width: 0; box-shadow: 0 6px 18px color-mix(in srgb, var(--c) 22%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--c) 14%, var(--card)) 0 55%, color-mix(in srgb, var(--c) 42%, var(--card)) 100%); }
.tile::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 5px; border-radius: 0 3px 3px 0; background: var(--c); }
.tile { position: relative; }
.tile .tile-ico { background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #fff)); color: #fff; box-shadow: 0 8px 16px color-mix(in srgb, var(--c) 45%, transparent); }
.tile .tile-ico svg { stroke-width: 1.7; }
.tile b { color: color-mix(in srgb, var(--c) 80%, #000); }
.tile.c-yellow .tile-ico { color: #3a2a00; }
.tile.c-grey { --c: #667085; } .tile.c-indigo { --c: var(--vivid-indigo); } .tile.c-cyan { --c: var(--vivid-cyan); }
.tile.c-blue { --c: var(--vivid-blue); } .tile.c-purple { --c: var(--vivid-purple); } .tile.c-red { --c: var(--vivid-red); }
.tile.c-yellow { --c: var(--vivid-yellow); } .tile.c-green { --c: var(--vivid-green); } .tile.c-pink { --c: var(--vivid-pink); }
.tile:hover { transform: translateY(-2px); box-shadow: 0 12px 26px color-mix(in srgb, var(--c) 36%, transparent); }
@media (prefers-color-scheme: dark) { .tile b { color: var(--c); } .tile.c-yellow .tile-ico { color: #3a2a00; } }
.qa-green { --c1: #12b76a; --c2: #34d399; } .qa-blue { --c1: #1e88ff; --c2: #06b6d4; } .qa-violet { --c1: #7c4dff; --c2: #c084fc; }
.qa { --c1: #ff7900; --c2: #ff3d8b; }

.rbanner { position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px; padding: 12px 22px 12px 14px; margin-bottom: 16px; border-radius: 8px; color: #fff; box-shadow: 0 10px 26px rgba(16, 24, 40, .22); isolation: isolate; }
.rbanner::before, .rbanner::after { content: ''; position: absolute; border-radius: 50%; z-index: -1; pointer-events: none; }
.rbanner::before { width: 220px; height: 220px; right: -50px; top: -90px; background: radial-gradient(circle, rgba(255, 255, 255, .26), transparent 68%); }
.rbanner::after { width: 160px; height: 160px; left: 35%; bottom: -100px; background: radial-gradient(circle, rgba(255, 210, 0, .3), transparent 68%); }
.rb-orange { background: linear-gradient(110deg, #1d2939 0%, #3b2a4a 45%, #ff6a00 130%); }
.rb-violet { background: linear-gradient(110deg, #2a1a5e 0%, #5b34c4 55%, #ff3d8b 140%); }
.rb-teal { background: linear-gradient(110deg, #082f49 0%, #0b6a8f 55%, #12b76a 140%); }
.rb-art { width: 92px; height: 74px; flex: none; }
.rb-art svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
.rb-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.rb-text b { font-size: 17px; letter-spacing: .005em; }
.rb-text span { color: rgba(255, 255, 255, .86); font-size: 14px; line-height: 1.4; }
.rb-tags { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.rb-tags i { font-style: normal; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 4px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .4); backdrop-filter: blur(3px); }
.rb-robot { animation: rbfloat 3.6s ease-in-out infinite; transform-origin: 65px 60px; }
.rb-eye { animation: rbblink 4.6s infinite; transform-box: fill-box; transform-origin: center; }
.rb-led { animation: rbled 1.6s ease-in-out infinite; }
.rb-sparks { animation: rbtwinkle 2.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.rb-gear { animation: rbspin 7s linear infinite; transform-origin: 112px 88px; } .rb-gear2 { animation-direction: reverse; transform-origin: 16px 92px; }
@keyframes rbfloat { 50% { transform: translateY(-4px); } }
@keyframes rbblink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.1); } }
@keyframes rbled { 50% { opacity: .35; } }
@keyframes rbtwinkle { 50% { opacity: .35; transform: scale(.85); } }
@keyframes rbspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rb-robot, .rb-eye, .rb-led, .rb-sparks, .rb-gear { animation: none; } }
@media (max-width: 800px) { .rbanner { padding: 10px 14px 10px 8px; gap: 10px; } .rb-art { width: 62px; height: 52px; } .rb-text b { font-size: 15px; } .rb-text span { font-size: 13px; } .rb-tags { display: none; } }

/* --- Corrections : lisibilité au survol du menu, couleurs des cartes d'action --- */
.side a.nv:hover { background: color-mix(in srgb, var(--c) 24%, #151515); color: #fff; }
.side a.nv:hover .ico { color: var(--c); }
.side a.nv.active:hover { background: var(--orange); color: #000; }
.side a.nv.active:hover .ico { color: #000; }
.side a.nv:hover .sq { transform: scale(1.3); }
.qa.qa-orange { --c1: #ff7900; --c2: #ff3d8b; }
.qa.qa-green { --c1: #12b76a; --c2: #34d399; }
.qa.qa-blue { --c1: #1e88ff; --c2: #06b6d4; }
.qa.qa-violet { --c1: #7c4dff; --c2: #c084fc; }
.qa-grid { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

/* =====================================================================================
   Style sobre et professionnel : un seul accent (orange de la charte), cartes blanches à fine bordure,
   couleurs réservées à la signification (statuts). Ces règles remplacent les couleurs vives précédentes.
   ===================================================================================== */
:root { --ink-2: #1d2939; --ink-3: #2b3a52; --soft-shadow: 0 1px 2px rgba(16, 24, 40, .06); --lift-shadow: 0 8px 22px rgba(16, 24, 40, .10); }

/* tuiles de statistiques */
.tile { background: var(--card); border: 1px solid var(--line); box-shadow: var(--soft-shadow); border-radius: 6px; }
.tile::before { top: 14px; bottom: 14px; width: 4px; border-radius: 0 3px 3px 0; }
.tile .tile-ico { width: 46px; height: 46px; border-radius: 6px; background: color-mix(in srgb, var(--c) 11%, var(--card)); color: color-mix(in srgb, var(--c) 85%, #000); box-shadow: none; }
.tile .tile-ico svg { width: 24px; height: 24px; }
.tile b { color: var(--fg); font-size: 28px; }
.tile small { color: var(--muted); }
.tile:hover { transform: none; box-shadow: var(--lift-shadow); }
.tile.c-yellow .tile-ico { color: #8a6400; }
button.tile.filt.on { box-shadow: 0 0 0 2px var(--orange); border-color: var(--orange); }
@media (prefers-color-scheme: dark) { .tile b { color: var(--fg); } .tile .tile-ico { color: var(--c); } }

/* cartes d'action : toutes sobres, accent orange */
.qa, .qa.qa-orange, .qa.qa-green, .qa.qa-blue, .qa.qa-violet { --c1: var(--orange); --c2: var(--orange); background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--soft-shadow); }
.qa .qa-ico { width: 50px; height: 50px; border-radius: 6px; background: color-mix(in srgb, var(--orange) 12%, var(--card)); color: var(--orange); box-shadow: none; }
.qa .qa-ico svg { width: 26px; height: 26px; }
.qa:hover { transform: translateY(-2px); border-color: var(--orange); box-shadow: var(--lift-shadow); }
.qa .qa-go { color: #b45309; }
.qa.off { filter: none; opacity: .65; }
@media (prefers-color-scheme: dark) { .qa .qa-go { color: var(--orange); } }

/* bannières : un seul thème sobre, avec le robot et un liseré orange */
.rbanner, .rb-orange, .rb-violet, .rb-teal { background: linear-gradient(100deg, var(--ink-2) 0%, var(--ink-3) 100%); border-radius: 6px; box-shadow: var(--soft-shadow); border-left: 5px solid var(--orange); padding-top: 10px; padding-bottom: 10px; }
.rbanner::before { opacity: .18; } .rbanner::after { display: none; }
.rb-art { width: 76px; height: 62px; }
.rb-art svg { filter: none; }
.rb-text b { font-size: 16px; }
.rb-tags i { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); font-weight: 600; }

/* en-têtes « hero » (scénarios…) : même sobriété */
.pagehead.hero { background: linear-gradient(100deg, var(--ink-2) 0%, var(--ink-3) 100%); box-shadow: var(--soft-shadow); border-radius: 6px; border-left: 5px solid var(--orange); }
.pagehead.hero .ph-ico { background: var(--orange); color: #000; box-shadow: none; backdrop-filter: none; }
.pagehead.hero .hero-dots { opacity: .35; }
.pagehead { border-radius: 6px; }

/* cartes de scénarios : liseré de statut, fond neutre */
.scard { background: var(--card); border-radius: 6px; box-shadow: var(--soft-shadow); border: 1px solid var(--line); }
.scard:hover { transform: translateY(-2px); box-shadow: var(--lift-shadow); border-color: color-mix(in srgb, var(--c) 55%, var(--line)); }
.sc-ico.web, .sc-ico.api { background: color-mix(in srgb, var(--orange) 12%, var(--card)); color: var(--orange); box-shadow: none; }
.sc-ico.api { background: color-mix(in srgb, var(--blue) 14%, var(--card)); color: #1c6fa8; }
.ochip { background: var(--bg); color: var(--muted); font-weight: 600; } .ochip svg { color: color-mix(in srgb, var(--o) 80%, #000); }

/* menu : icônes discrètes, couleur seulement au survol et sur l'entrée active */
.side a.nv .ico { color: #cbd2dc; }
.side a.nv:hover .ico { color: var(--c); }
.side a.nv .sq { opacity: .75; }

/* --- Connecteurs et robots --- */
.ctype { width: 46px; height: 46px; border-radius: 6px; display: inline-grid; place-items: center; flex: none; background: color-mix(in srgb, var(--blue) 14%, var(--card)); color: #1c6fa8; }
.ctype.ct-violet { background: color-mix(in srgb, var(--purple) 16%, var(--card)); color: #5b34c4; }
.ctype svg { width: 24px; height: 24px; }
.ctypes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.ctype-card { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; text-align: left; padding: 16px; border-radius: 6px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font: inherit; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.ctype-card:hover, .ctype-card:focus-visible { border-color: var(--orange); box-shadow: var(--lift-shadow); outline: none; }
.cs { overflow-wrap: anywhere; color: var(--muted); }
.fhelp { margin: 4px 0 0; font-size: 12px; }

/* --- Robots --- */
.scard.sc-red { --c: var(--bad); }
.sc-ico.bot { background: color-mix(in srgb, var(--indigo, #4f46e5) 12%, var(--card)); color: var(--vivid-indigo); box-shadow: none; }
.rlink { position: absolute; inset: 0; z-index: 1; border-radius: 6px; }
.rfoot > * { position: relative; z-index: 2; }
.rfoot .sc-open { z-index: 0; }
.rsteps { gap: 12px; }
.rstep { border: 1px solid var(--line); border-left: 5px solid var(--orange); border-radius: 6px; background: var(--card); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--soft-shadow); }
.rstep.rt-http { border-left-color: var(--blue); } .rstep.rt-notify { border-left-color: var(--purple); } .rstep.rt-delay { border-left-color: var(--grey); } .rstep.rt-set { border-left-color: var(--green); }
.rstep-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rnum { width: 26px; height: 26px; border-radius: 50%; background: var(--ink-2); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.rico { width: 34px; height: 34px; border-radius: 5px; display: inline-grid; place-items: center; background: color-mix(in srgb, var(--orange) 12%, var(--card)); color: var(--orange); flex: none; }
.rico.big { width: 44px; height: 44px; border-radius: 6px; } .rico svg { width: 20px; height: 20px; } .rico.big svg { width: 24px; height: 24px; }
.rtype { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.rname { min-width: 160px; font-weight: 700; }
.rform { margin: 0; }
.ropts summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.urlbox { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border-radius: 5px; background: var(--bg); border: 1px solid var(--line); }
.urlbox code { overflow-wrap: anywhere; font-size: 13px; flex: 1; min-width: 220px; }
.tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.tl li { display: flex; gap: 14px; padding-bottom: 16px; position: relative; }
.tl li::before { content: ''; position: absolute; left: 15px; top: 34px; bottom: 0; width: 2px; background: var(--line); }
.tl li:last-child::before { display: none; }
.tl-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--bg); color: var(--muted); border: 2px solid var(--line); }
.tl-dot svg { width: 16px; height: 16px; stroke-width: 2.2; }
.tl-REUSSI .tl-dot { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); } .tl-ECHOUE .tl-dot { background: var(--bad-bg); color: var(--bad); border-color: var(--bad); }
.tl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .tl-body p { margin: 0; overflow-wrap: anywhere; }
.tl-body pre { max-height: 260px; overflow: auto; background: var(--bg); padding: 10px; border-radius: 4px; margin: 6px 0 0; }

/* ---------- Exécution en direct ---------- */
.lv { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; border-top: 4px solid var(--orange); }
.lv-head { display: flex; align-items: center; gap: 16px; }
.lv-phase { display: block; font-size: 18px; }
.lv-head small { display: block; margin-top: 2px; overflow-wrap: anywhere; }
.lv-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-variant-numeric: tabular-nums; }
.lv-timer { font-size: 24px; font-weight: 700; }
.lv-count { color: var(--muted); font-size: 13px; }
.lv-orb { position: relative; width: 54px; height: 54px; flex: none; border-radius: 50%; background: #1f2937; color: var(--orange); display: grid; place-items: center; }
.lv-orb svg { width: 28px; height: 28px; position: relative; animation: lvbob 2.2s ease-in-out infinite; }
.lv-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--orange); opacity: 0; animation: lvring 2s ease-out infinite; }
.lv-ring.r2 { animation-delay: 1s; }
.lv-orb.idle .lv-ring, .lv-orb.idle svg { animation: none; opacity: .6; }
.lv-bar { height: 10px; border-radius: 4px; background: var(--line); overflow: hidden; }
.lv-bar i { display: block; height: 100%; width: 0; border-radius: 4px; transition: width .6s cubic-bezier(.2, .8, .2, 1);
  background: repeating-linear-gradient(115deg, var(--orange) 0 12px, #ff9a3c 12px 24px); background-size: 34px 100%; animation: lvstripes 1s linear infinite; }
.lv-body { display: grid; gap: 16px; }
.lv-body.gui { grid-template-columns: minmax(260px, 2fr) 3fr; align-items: start; }
@media (max-width: 900px) { .lv-body.gui { grid-template-columns: 1fr; } }
.lv-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-height: 460px; overflow: auto; }
.lv-step { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 9px 10px; border-radius: 5px; animation: rise .35s both; transition: background .3s; }
.lv-step:not(:last-child)::after { content: ''; position: absolute; left: 22px; top: 36px; bottom: -8px; width: 2px; background: var(--line); }
.lv-step.ok:not(:last-child)::after { background: var(--ok); }
.lv-mark { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; background: var(--card); position: relative; z-index: 1; }
.lv-mark svg { width: 15px; height: 15px; stroke-width: 3; }
.lv-label { overflow-wrap: anywhere; }
.lv-dur { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lv-err { display: block; color: var(--bad); margin-top: 2px; }
.lv-step.pending { color: var(--muted); }
.lv-step.running { background: var(--warn-bg); font-weight: 600; }
.lv-step.running .lv-mark { border-color: var(--orange) var(--orange) var(--line) var(--line); animation: lvspin .8s linear infinite; }
.lv-step.ok .lv-mark { background: var(--ok); border-color: var(--ok); color: #fff; animation: lvpop .4s; }
.lv-step.failed .lv-mark, .lv-step.blocked .lv-mark { background: var(--bad); border-color: var(--bad); color: #fff; animation: lvshake .45s; }
.lv-step.failed, .lv-step.blocked { background: var(--bad-bg); }
.lv-step.skipped { opacity: .55; }
.lv-step.check .lv-label { font-weight: 600; }
.lv-screen { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #111; box-shadow: 0 6px 22px rgba(0, 0, 0, .18); }
.lv-chrome { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #2b2f36; color: #cbd5e1; font-size: 12px; }
.lv-chrome i { width: 10px; height: 10px; border-radius: 50%; background: #64748b; }
.lv-chrome i:nth-child(1) { background: #ef4444; } .lv-chrome i:nth-child(2) { background: #f59e0b; } .lv-chrome i:nth-child(3) { background: #22c55e; }
.lv-chrome span { margin-left: 8px; padding: 2px 10px; border-radius: 4px; background: #1b1e24; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-view { position: relative; aspect-ratio: 16 / 9; background: #f4f4f4; }
.lv-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lv-img.flash { animation: lvflash .5s; }
.lv-wait { position: absolute; inset: 0; display: grid; place-items: center; color: #475569; overflow: hidden; }
.lv-scan { position: absolute; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--orange), transparent); animation: lvscan 1.8s ease-in-out infinite; }
@keyframes lvbob { 50% { transform: translateY(-3px); } }
@keyframes lvring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes lvstripes { to { background-position: 34px 0; } }
@keyframes lvspin { to { transform: rotate(360deg); } }
@keyframes lvpop { 0% { transform: scale(.4); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes lvshake { 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }
@keyframes lvflash { from { opacity: .3; filter: brightness(1.4); } to { opacity: 1; filter: none; } }
@keyframes lvscan { 0% { top: 0; } 50% { top: calc(100% - 3px); } 100% { top: 0; } }
@media (prefers-reduced-motion: reduce) { .lv-orb svg, .lv-ring, .lv-bar i, .lv-step, .lv-step .lv-mark, .lv-img.flash, .lv-scan { animation: none !important; } }
.lv-wait[hidden], .lv-img[hidden] { display: none; }

/* ---------- Fenêtre (popup) ---------- */
.modal-back { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .55); display: grid; place-items: center; padding: 16px; animation: mfade .15s; }
.modal { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--card); color: var(--fg); border-radius: 8px; border-top: 5px solid var(--orange); padding: 22px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .4); animation: mrise .2s; }
.modal h2 { margin: 0; }
.modal .form-grid { grid-template-columns: 1fr; }
@keyframes mfade { from { opacity: 0; } }
@keyframes mrise { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .modal, .modal-back { animation: none; } }

/* ---------- Éditeur de test API (sobre, avec icônes) ---------- */
.asec { border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; background: var(--card); }
.apistep .asec { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 12px 0 0; margin-top: 12px; background: transparent; }
.ahead2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ahead2 b { font-size: 15px; }
.ahead2 small { flex: 1 1 100%; margin-left: 38px; margin-top: -4px; }
.asico { width: 30px; height: 30px; border-radius: 5px; display: grid; place-items: center; background: #eef1f5; color: #3b4658; flex: none; }
.asico svg { width: 17px; height: 17px; }
.apistep { --m: #475569; border: 1px solid var(--line); border-left: 5px solid var(--m); border-radius: 6px; padding: 14px 16px; background: var(--card); box-shadow: 0 1px 2px rgba(15, 23, 42, .05); transition: box-shadow .2s; }
.apistep:hover { box-shadow: 0 6px 18px rgba(15, 23, 42, .09); }
.apistep > * + * { margin-top: 0; }
.apistep.m-GET { --m: #16a34a; } .apistep.m-POST { --m: #2563eb; } .apistep.m-PUT { --m: #d97706; } .apistep.m-PATCH { --m: #7c3aed; } .apistep.m-DELETE { --m: #dc2626; }
.ahead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ahead .grip { margin: 0; color: var(--muted); }
.anum { width: 28px; height: 28px; border-radius: 50%; background: #1f2937; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.mbadge { padding: 3px 10px; border-radius: 4px; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: #fff; background: var(--m); flex: none; }
.aname { border: 0 !important; background: transparent !important; font-weight: 700; font-size: 16px; padding: 4px 6px; min-width: 0; }
.aname:hover, .aname:focus { background: var(--bg) !important; border-radius: 4px; }
.urlbar { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--card); }
.urlbar:focus-within { border-color: var(--m); box-shadow: 0 0 0 3px color-mix(in srgb, var(--m) 22%, transparent); }
.urlbar select { border: 0; border-right: 1px solid var(--line); border-radius: 0; font-weight: 800; color: var(--m); background: color-mix(in srgb, var(--m) 8%, var(--card)); min-width: 104px; }
.urlbar input { border: 0; border-radius: 0; flex: 1; font-family: ui-monospace, Menlo, Consolas, monospace; outline: none; }
.apistep .kv { align-items: center; }
.apistep .kv select { font-weight: 600; }
.addcall { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border: 2px dashed var(--line); border-radius: 6px; background: transparent; color: var(--muted); font-weight: 700; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.addcall:hover, .addcall:focus-visible { border-color: var(--orange); color: var(--fg); background: color-mix(in srgb, var(--orange) 7%, transparent); }
.addcall svg { width: 18px; height: 18px; }
@media (prefers-color-scheme: dark) { .asico { background: #2a3140; color: #cbd5e1; } }
.apistep .kv, .asec .kv { flex-wrap: wrap; }
.apistep .kv > input, .apistep .kv > select, .asec .kv > input, .asec .kv > select { min-width: 0; flex: 1 1 140px; }
.apistep .kv > .iconbtn, .asec .kv > .iconbtn { flex: none; }
.apistep, .asec, .apisteps { min-width: 0; max-width: 100%; }
@media (max-width: 800px) { .apistep { padding: 12px; } .urlbar select { min-width: 92px; } }

/* ---------- Assistant « Mon premier robot » ---------- */
.wiz { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.wiz h2, .wiz h3 { margin: 0; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.choice { text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 2px solid var(--line); border-radius: 6px; background: var(--card); color: var(--fg); cursor: pointer; font: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
.choice:hover, .choice:focus-visible { border-color: var(--orange); transform: translateY(-2px); }
.choice.on { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255, 121, 0, .2); background: color-mix(in srgb, var(--orange) 6%, var(--card)); }
.choice small { color: var(--muted); }
.choice-ico { width: 40px; height: 40px; border-radius: 6px; display: grid; place-items: center; background: #1f2937; color: var(--orange); }
.choice-ico svg { width: 22px; height: 22px; }
.choice .row { margin-top: 6px; }
.recap { padding: 14px 16px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); }
.recap ul { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.recap.ok { display: flex; gap: 12px; align-items: center; background: var(--ok-bg); border-color: var(--ok-line); }
.recap.ok svg { width: 30px; height: 30px; color: var(--ok); flex: none; }
.recap.ok p { margin: 2px 0 0; }
@media (prefers-reduced-motion: reduce) { .choice { transition: none; } .choice:hover { transform: none; } }

/* ---------- Fichiers de données (Excel / CSV) ---------- */
.modal.wide { width: min(1000px, 100%); }
.xl-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.xl-tab { border: 1px solid var(--line); background: var(--card); color: var(--fg); border-radius: 4px; padding: 6px 14px; cursor: pointer; font: inherit; font-weight: 600; }
.xl-tab.on { background: #1f2937; color: #fff; border-color: #1f2937; }
.xl-scroll { overflow: auto; max-height: 48vh; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
table.xl { border-collapse: separate; border-spacing: 0; font-size: 13px; min-width: 100%; }
.xl th, .xl td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 5px 10px; white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.xl thead th { position: sticky; top: 0; background: #eef1f5; color: #3b4658; z-index: 2; text-align: center; }
.xl tbody th { position: sticky; left: 0; background: #eef1f5; color: #3b4658; z-index: 1; text-align: center; min-width: 44px; }
.xl .corner { left: 0; z-index: 3; }
.xl td { cursor: cell; }
.xl td:hover { background: rgba(255, 121, 0, .1); }
.xl td.on { outline: 2px solid var(--orange); outline-offset: -2px; background: rgba(255, 121, 0, .16); }
.xl-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.xl-ref { padding: 4px 10px; border-radius: 4px; background: var(--bg); border: 1px solid var(--line); overflow-wrap: anywhere; }
.howto { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
@media (prefers-color-scheme: dark) { .xl thead th, .xl tbody th { background: #2a3140; color: #cbd5e1; } }

/* ---------- Onglets de l'enregistreur ---------- */
.rtabs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.rtab { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: 6px; background: var(--card); overflow: hidden; max-width: 100%; }
.rtab.on { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255, 121, 0, .2); }
.rtab-main { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 0; background: transparent; color: var(--fg); font: inherit; cursor: pointer; min-width: 0; }
.rtab-no { width: 22px; height: 22px; flex: none; border-radius: 50%; background: #1f2937; color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.rtab.on .rtab-no { background: var(--orange); color: #000; }
.rtab-txt { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rtab-x { border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--muted); padding: 0 8px; cursor: pointer; }
.rtab-x:hover { color: var(--bad); background: var(--bad-bg); }
.rtab-x svg { width: 14px; height: 14px; }
.rtab-add { display: inline-flex; align-items: center; gap: 6px; border: 2px dashed var(--line); border-radius: 6px; background: transparent; color: var(--muted); padding: 6px 12px; font: inherit; font-weight: 600; cursor: pointer; }
.rtab-add:hover, .rtab-add:focus-visible { border-color: var(--orange); color: var(--fg); }
.rtab-add svg { width: 16px; height: 16px; }
.checks { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow: auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--card); }
.checks label { display: flex; align-items: center; gap: 6px; }

/* ---------- Contrôles qualité (visuel, accessibilité, performance) ---------- */
.qdetails { margin: 4px 0; padding-left: 18px; font-size: 13px; color: var(--muted); }
.vblock { padding: 12px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.vblock:first-of-type { border-top: 0; }
.vrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.vimg { margin: 0; }
.vimg img { width: 100%; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.vimg figcaption { text-align: center; font-weight: 600; font-size: 13px; margin-top: 4px; }

/* ---------- « Prêt à livrer ? » ---------- */
.verdict { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: 8px; color: #fff; background: #475569; }
.verdict h2 { margin: 0 0 4px; font-size: 26px; }
.verdict p { margin: 0; opacity: .95; }
.verdict-ico { width: 64px; height: 64px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .2); }
.verdict-ico svg { width: 38px; height: 38px; }
.verdict.v-pret { background: linear-gradient(120deg, #15803d, #16a34a); }
.verdict.v-bloque { background: linear-gradient(120deg, #b91c1c, #dc2626); }
.verdict.v-verif { background: linear-gradient(120deg, #b45309, #d97706); }
@media print { .side, .top, .rbanner, .toasts, .btn, button, select { display: none !important; } .verdict { color: #000; background: #fff !important; border: 3px solid #000; } }

/* ---------- Robot de transition (démarrage, connexion, chargement des pages) ---------- */
.boot { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; text-align: center; padding: 24px; color: #fff;
  background: radial-gradient(circle at 50% 35%, #1f2a44 0, #0b1220 70%); transition: opacity .35s ease, visibility .35s; }
.boot.boot-out { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-in { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 420px; }
.boot-in svg { width: 150px; height: auto; overflow: visible; }
.boot-t { margin: 8px 0 0; font-size: 30px; letter-spacing: .08em; }
.boot-s { margin: 0 0 6px; color: #cbd5e1; }
.boot-slow { margin: 18px 0 0; color: #fbbf24; font-size: 14px; opacity: 0; animation: bt-show .4s 12s forwards; }
.bt-robot { animation: bt-float 2.4s ease-in-out infinite; transform-origin: 65px 60px; }
.bt-eyes { animation: bt-blink 3.6s infinite; transform-box: fill-box; transform-origin: center; }
.bt-led { animation: bt-led 1s ease-in-out infinite; }
.bt-arm.l { transform-box: fill-box; transform-origin: 50% 10%; animation: bt-wave 1.2s ease-in-out infinite; }
.bt-arm.r { transform-box: fill-box; transform-origin: 50% 10%; animation: bt-wave 1.2s ease-in-out infinite reverse; }
.bt-gear { transform-box: fill-box; transform-origin: center; animation: bt-spin 2.4s linear infinite; }
.bt-shadow { transform-box: fill-box; transform-origin: center; animation: bt-shadow 2.4s ease-in-out infinite; }
.bt-dots { display: inline-flex; gap: 6px; margin-top: 4px; }
.bt-dots i { width: 9px; height: 9px; border-radius: 50%; background: #ff7900; animation: bt-dot 1s ease-in-out infinite; }
.bt-dots i:nth-child(2) { animation-delay: .15s; } .bt-dots i:nth-child(3) { animation-delay: .3s; }
/* chargement d'une page : robot discret au milieu du contenu (après 200 ms seulement) + fine barre en haut */
.loadbot { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 56px 0; color: var(--muted); opacity: 0; animation: bt-show .25s .2s forwards; }
.loadbot svg { width: 92px; height: auto; overflow: visible; }
.loadbot svg .bt-shadow { opacity: .12; }
.loadbot-t { font-weight: 600; }
.loadbot .bt-dots i { width: 7px; height: 7px; }
.is-loading .top::before { content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 35%; background: linear-gradient(90deg, transparent, #ff7900, transparent); animation: bt-bar 1.1s ease-in-out infinite; z-index: 5; }
@keyframes bt-float { 50% { transform: translateY(-7px); } }
@keyframes bt-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes bt-led { 50% { opacity: .3; } }
@keyframes bt-wave { 50% { transform: rotate(14deg); } }
@keyframes bt-spin { to { transform: rotate(360deg); } }
@keyframes bt-shadow { 50% { transform: scaleX(.8); opacity: .15; } }
@keyframes bt-dot { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-6px); opacity: 1; } }
@keyframes bt-show { to { opacity: 1; } }
@keyframes bt-bar { from { left: -35%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .bt-robot, .bt-eyes, .bt-led, .bt-arm, .bt-gear, .bt-shadow, .bt-dots i, .is-loading .top::before { animation: none !important; } .boot { transition: none; } }

/* ---------- Documentation pas à pas ---------- */
.docs-grid { display: grid; grid-template-columns: minmax(240px, 300px) 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .docs-grid { grid-template-columns: 1fr; } }
.docs-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.docs-nav a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 6px; color: var(--fg); text-decoration: none; border: 1px solid transparent; }
.docs-nav a b { display: block; font-size: 14px; }
.docs-nav a small { color: var(--muted); }
.docs-nav a:hover { background: var(--bg); }
.docs-nav a.on { background: rgba(255, 121, 0, .12); border-color: rgba(255, 121, 0, .55); }
.docs-ico { width: 34px; height: 34px; flex: none; border-radius: 5px; display: grid; place-items: center; background: #1f2937; color: var(--orange); }
.docs-ico svg { width: 18px; height: 18px; }
.docs-ico.big { width: 52px; height: 52px; border-radius: 6px; }
.docs-ico.big svg { width: 28px; height: 28px; }
.dglance { margin: 18px 0 4px; }
.dsteps { list-style: none; margin: 18px 0; padding: 0; display: flex; flex-direction: column; gap: 0; counter-reset: d; }
.dsteps > li { display: flex; gap: 16px; position: relative; padding-bottom: 22px; }
.dsteps > li:not(:last-child)::before { content: ''; position: absolute; left: 17px; top: 38px; bottom: 4px; width: 2px; background: var(--line); }
.dnum { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: #000; font-weight: 800; }
.dbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.dbody h3 { margin: 6px 0 0; font-size: 17px; }
.dbody p { margin: 0; line-height: 1.55; overflow-wrap: anywhere; }
.dtip, .dwarn { display: flex !important; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 6px; width: 100%; box-sizing: border-box; }
.dtip { background: var(--ok-bg); border: 1px solid var(--ok-line); }
.dwarn { background: var(--warn-bg); border: 1px solid #f2d27a; }
.dtip svg, .dwarn svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
@media print { .docs-grid { display: block; } .docs-nav, .docs input { display: none; } }
.modal > .card { border: 0; box-shadow: none; padding: 0; background: transparent; }

/* ---------- Une image par étape ---------- */
img.thumb { width: 150px; height: auto; border: 1px solid var(--line); border-radius: 4px; display: block; background: #fff; transition: transform .15s; }
a:hover > img.thumb, a:focus-visible > img.thumb { transform: scale(1.04); border-color: var(--orange); }
.step-shot { width: 100%; margin: 4px 0 0; display: flex; flex-direction: column; gap: 4px; }
.step-shot-btn { align-self: flex-start; padding: 0; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; background: #fff; cursor: zoom-in; max-width: 100%; }
.step-shot-btn img { display: block; width: 260px; max-width: 100%; height: auto; }
.step-shot-btn:hover, .step-shot-btn:focus-visible { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255, 121, 0, .2); }
.step-shot figcaption { font-size: 12px; color: var(--muted); }
.step-shot-big { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 5px; }
.dshot { margin: 4px 0 0; width: 100%; max-width: 720px; }
.dshot a { display: block; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #fff; cursor: zoom-in; box-shadow: 0 2px 10px rgba(15, 23, 42, .08); }
.dshot a:hover, .dshot a:focus-visible { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255, 121, 0, .2); }
.dshot img { display: block; width: 100%; height: auto; }
.dshot figcaption { font-size: 12px; color: var(--muted); margin-top: 4px; }
@media print { .dshot { break-inside: avoid; } }

/* ---------- Diagramme d'étapes ---------- */
.flowd { list-style: none; margin: 0; padding: 0; display: flex; --a: #475569; }
.flowd-col { flex-direction: column; align-items: center; gap: 0; }
.flowd-row { flex-direction: row; align-items: stretch; gap: 0; width: max-content; padding: 6px 2px 10px; }
.flowd-scroll { overflow-x: auto; max-width: 100%; }
.fd-node { display: flex; align-items: center; }
.flowd-col .fd-node { flex-direction: column; width: min(420px, 100%); }
.fd-node.k-nav { --a: #2563eb; } .fd-node.k-act { --a: #ea580c; } .fd-node.k-check { --a: #16a34a; } .fd-node.k-trigger { --a: #7c3aed; } .fd-node.k-end { --a: #475569; }
.fd-node.k-scenario { --a: #ea580c; } .fd-node.k-suite { --a: #db2777; } .fd-node.k-http { --a: #2563eb; } .fd-node.k-notify { --a: #7c3aed; } .fd-node.k-ticket { --a: #0891b2; } .fd-node.k-delay { --a: #64748b; } .fd-node.k-set { --a: #0d9488; }
.fd-box { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 10px 12px; text-align: left; font: inherit; color: var(--fg); background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--a); border-radius: 6px; box-shadow: 0 1px 3px rgba(15, 23, 42, .08); }
.flowd-row .fd-box { width: 190px; min-height: 70px; }
button.fd-box { cursor: pointer; transition: box-shadow .15s, transform .15s; }
button.fd-box:hover, button.fd-box:focus-visible { box-shadow: 0 6px 16px rgba(15, 23, 42, .15); transform: translateY(-1px); border-color: var(--a); }
.fd-ic { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--a) 14%, var(--card)); color: var(--a); }
.fd-ic svg { width: 19px; height: 19px; }
.fd-tx { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fd-tx b { font-size: 14px; }
.fd-tx small { color: var(--muted); overflow-wrap: anywhere; }
.fd-tx em { font-style: normal; font-size: 12px; color: var(--a); font-weight: 600; }
.fd-badge { flex: none; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 4px; background: color-mix(in srgb, var(--a) 14%, var(--card)); color: var(--a); }
.fd-thumb { width: 74px; height: auto; border-radius: 3px; border: 1px solid var(--line); flex: none; }
/* flèches entre les boîtes */
.fd-arrow { position: relative; flex: none; }
.flowd-col .fd-arrow { width: 2px; height: 22px; background: var(--a); margin: 0 auto; }
.flowd-col .fd-arrow::after { content: ''; position: absolute; left: -5px; bottom: -2px; border: 6px solid transparent; border-top: 8px solid var(--a); border-bottom: 0; }
.flowd-row .fd-arrow { width: 30px; height: 2px; background: var(--a); }
.flowd-row .fd-arrow::after { content: ''; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left: 8px solid var(--a); border-right: 0; }
/* résultat d'une exécution */
.fd-node.s-ok .fd-box { background: var(--ok-bg); border-color: var(--ok-line); border-left-color: var(--ok); }
.fd-node.s-ok { --a: var(--ok); }
.fd-node.s-failed { --a: var(--bad); } .fd-node.s-failed .fd-box { background: var(--bad-bg); border-color: var(--bad); }
.fd-node.s-skipped { --a: #94a3b8; opacity: .65; }
.fd-node.s-running .fd-box { box-shadow: 0 0 0 3px rgba(255, 121, 0, .35); }
.fd-node.k-end .fd-box { width: auto; border-radius: 4px; padding: 6px 16px; border-left-width: 1px; justify-content: center; }
@media (prefers-color-scheme: dark) { .fd-ic { background: color-mix(in srgb, var(--a) 22%, #1f2937); } }
@media print { .flowd-scroll { overflow: visible; } .flowd-row { flex-wrap: wrap; width: auto; row-gap: 8px; } }
.methods { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.methods legend { font-weight: 700; padding: 0 6px; }
.methods small { flex: 1 1 100%; }

/* ---------- Connecteurs : présentation sobre ---------- */
.cn-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.cn-bar .seg { flex: 0 1 auto; }
.cn-search { flex: 1 1 220px; min-width: 180px; max-width: 360px; }
.cn-bar > .btn { margin-left: auto; }
.cn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 16px; align-items: stretch; }
.cn-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 6px; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); transition: box-shadow .15s, border-color .15s; }
.cn-card:hover { box-shadow: 0 6px 18px rgba(15, 23, 42, .1); }
.cn-head { display: flex; align-items: center; gap: 12px; }
.cn-head .ctype { width: 42px; height: 42px; border-radius: 5px; }
.cn-title { flex: 1; min-width: 0; }
.cn-title h2 { margin: 0; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-title span { color: var(--muted); font-size: 13px; }
.cn-used { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 12px; color: var(--muted); padding: 3px 9px; border-radius: 4px; background: var(--bg); border: 1px solid var(--line); }
.cn-used i { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; }
.cn-used.on { color: var(--fg); }
.cn-used.on i { background: var(--ok); }
.cn-dl { margin: 0; display: grid; gap: 6px; font-size: 14px; }
.cn-dl > div { display: grid; grid-template-columns: 124px 1fr; gap: 10px; align-items: baseline; }
.cn-dl dt { color: var(--muted); font-size: 13px; }
.cn-dl dd { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-dl dd.mono { font-size: 13px; }
.cn-secret { display: inline-flex; align-items: center; gap: 6px; margin: 0; width: fit-content; font-size: 12px; font-weight: 600; color: var(--ok); background: var(--ok-bg); border: 1px solid var(--ok-line); border-radius: 4px; padding: 3px 10px; }
.cn-secret svg { width: 14px; height: 14px; }
.cn-test { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 10px; border-radius: 5px; font-size: 13px; }
.cn-test svg { width: 16px; height: 16px; flex: none; }
.cn-test.ok { background: var(--ok-bg); color: var(--ok); } .cn-test.bad { background: var(--bad-bg); color: var(--bad); }
.cn-actions { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.cn-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 5px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; }
.cn-icon svg { width: 17px; height: 17px; }
.cn-icon:hover, .cn-icon:focus-visible { background: var(--bg); border-color: var(--line); color: var(--fg); }
.cn-icon.danger:hover, .cn-icon.danger:focus-visible { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }
.cn-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 16px; text-align: center; border: 2px dashed var(--line); border-radius: 6px; color: var(--muted); }
.cn-empty svg { width: 36px; height: 36px; }
.cn-empty b { color: var(--fg); }
/* boutons secondaires plus discrets dans toute l'application */
.btn.ghost { border: 1px solid #cdd5df; background: var(--card); color: var(--fg); box-shadow: none; }
.btn.ghost:hover, .btn.ghost:focus-visible { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 6%, var(--card)); }
.btn.ghost.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, #cdd5df); }
.btn.ghost.danger:hover, .btn.ghost.danger:focus-visible { background: var(--bad-bg); border-color: var(--bad); }
@media (max-width: 800px) { .cn-bar > .btn { margin-left: 0; width: 100%; justify-content: center; } .cn-search { max-width: none; } .cn-dl > div { grid-template-columns: 1fr; gap: 0; } }
.cn-test[hidden], .cn-secret[hidden] { display: none; }

/* Sélecteur segmenté : version sobre (fond gris clair, pastille orange pour le choix actif) */
.seg { gap: 2px; padding: 3px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; align-items: center; }
.seg .seg-label { background: transparent; color: var(--muted); font-weight: 700; letter-spacing: .1em; padding: 0 10px; min-height: 0; }
.seg button { background: transparent; border: 0; border-radius: 5px; padding: 7px 12px; color: var(--fg); }
.seg button.on { background: var(--orange); color: #000; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.seg button:hover:not(.on) { background: rgba(255, 121, 0, .14); }
.seg button:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }

/* Boutons secondaires : le texte reste lisible au survol, au toucher et à la sélection (le texte blanc de l'ancien style noir était illisible sur fond clair) */
.btn.ghost:hover, .btn.ghost:focus-visible, .btn.ghost:active { color: var(--fg); }
.btn.ghost.on, .btn.ghost.on:hover, .btn.ghost.on:focus-visible, .btn.ghost.on:active { background: var(--orange); color: var(--on-orange); border-color: var(--orange); }
.btn.ghost.danger:hover, .btn.ghost.danger:focus-visible, .btn.ghost.danger:active { color: var(--bad); }
.btn.ghost:active { background: color-mix(in srgb, var(--orange) 14%, var(--card)); }
.btn.ghost:disabled { color: var(--muted); border-color: var(--line); background: var(--bg); cursor: not-allowed; }

/* Légende des boutons de l'enregistreur */
.recbtns { border: 1px solid var(--line); border-radius: 6px; background: var(--card); padding: 4px 14px; margin: 8px 0; }
.recbtns summary { cursor: pointer; font-weight: 700; padding: 8px 0; display: flex; align-items: center; gap: 8px; }
.recbtns summary svg { width: 18px; height: 18px; color: var(--orange); }
.rh-list { display: grid; gap: 10px; margin: 6px 0 12px; }
.rh-item { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.rh-ic { width: 34px; height: 34px; border-radius: 5px; display: grid; place-items: center; background: #1f2937; color: var(--orange); }
.rh-ic svg { width: 18px; height: 18px; }
.rh-item b { display: block; }
.rh-item span { color: var(--muted); font-size: 14px; line-height: 1.45; }
.rh-group { margin: 10px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; }

/* Choix de l'élément visé quand un repère est ambigu ou introuvable */
.cands { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cand { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.cand.amb { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 6%, var(--card)); }
.cand .cn { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: #000; font-weight: 800; }
.cand .cb { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cand .cb b { overflow-wrap: anywhere; }
.cand .cb small { color: var(--muted); overflow-wrap: anywhere; }
.cand .cb em { font-style: normal; font-size: 12px; color: var(--orange-hover, #f16e00); font-weight: 600; }
details.tech summary { cursor: pointer; color: var(--muted); font-size: 13px; }
details.tech pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; background: var(--bg); padding: 8px 10px; border-radius: 4px; }
@media (max-width: 600px) { .cand { flex-wrap: wrap; } .cand .btn { width: 100%; justify-content: center; } }

/* Mode dessin de l'enregistreur */
.screen { position: relative; }
.draw-ov { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.screen.drawing img { touch-action: none; cursor: crosshair; outline: 3px dashed var(--orange); outline-offset: -3px; }

/* Variables des déclencheurs et variables transmises aux tests */
.tvars { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; }
.tvars > summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.tvlist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tvlist li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tvlist code { font-size: 12.5px; word-break: break-all; }
.tvedit .kv { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tvedit .kv input[aria-label="Nom de la variable du test"] { min-width: 140px; flex: 0 1 180px; }
.tvedit .kv select { max-width: 200px; }

/* Exploration automatique */
.loadbar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin: 8px 0; }
.loadbar i { display: block; height: 100%; width: 35%; background: var(--orange); border-radius: 3px; animation: exload 1.4s ease-in-out infinite; }
@keyframes exload { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
@media (prefers-reduced-motion: reduce) { .loadbar i { animation: none; width: 100%; opacity: .5; } }
.ex-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.ex-shot { margin: 0; } .ex-shot img { width: 100%; border: 1px solid var(--line); border-radius: 3px; display: block; } .ex-shot figcaption { font-size: 12px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.ex-img { width: 100%; border: 1px solid var(--line); border-radius: 3px; display: block; margin: 6px 0; }
.ex-feat { margin: 6px 0; padding-left: 18px; }
.ex-cases { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.ex-case { border: 1px solid var(--line); border-radius: 4px; background: var(--card); }
.ex-case > summary { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; }
.ex-case[open] > summary { border-bottom: 1px solid var(--line); }
.ex-case-body { padding: 10px 12px; }
.ex-id { font-family: ui-monospace, monospace; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
@media print { .side, .ph-actions, .tabbar, .seg { display: none !important; } .ex-case { break-inside: avoid; } .ex-case > .ex-case-body { display: block; } }
.ex-opts label { display: flex; align-items: flex-start; gap: 8px; } .ex-opts input { margin-top: 3px; }
.ind-head { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.ind-grade { width: 96px; height: 96px; border-radius: 8px; display: grid; place-content: center; text-align: center; color: #000; flex: none; }
.ind-grade b { font-size: 44px; line-height: 1; } .ind-grade small { font-size: 12px; }
.ind-grade.g-ok { background: #d8f2e2; } .ind-grade.g-warn { background: #fff0c2; } .ind-grade.g-bad { background: #fcd9d4; } .ind-grade.g-off { background: var(--line); }
.ind-scores { display: grid; gap: 6px; margin-top: 8px; }
.ind-score { display: grid; grid-template-columns: minmax(150px, 230px) 1fr 36px; gap: 10px; align-items: center; font-size: 14px; }
.ind-bar { position: relative; height: 10px; background: var(--line); border-radius: 3px; overflow: visible; }
.ind-bar i { display: block; height: 100%; border-radius: 3px; } .ind-bar i.ok { background: #1f9d55; } .ind-bar i.warn { background: #e0a100; } .ind-bar i.bad { background: #d63224; }
.ind-bar u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--fg); opacity: .55; text-decoration: none; }
.ind-cell { min-width: 220px; } .ind-cell .ind-bar { margin-bottom: 3px; }
.ind-dot { width: 22px; } .ind-val { text-align: right; white-space: nowrap; }
.lvl { display: inline-block; width: 12px; height: 12px; border-radius: 50%; } .lvl-ok { background: #1f9d55; } .lvl-warn { background: #e0a100; } .lvl-bad { background: #d63224; } .lvl-info { background: #8592a6; }
@media (max-width: 640px) { .ind-score { grid-template-columns: 1fr 1fr 32px; } }

/* =====================================================================================
   Menu : filtre, groupes mémorisés, pastilles de compteur, mode réduit (icônes seules)
   ===================================================================================== */
.side { flex-direction: column; overflow: hidden; padding-bottom: 0; transition: width .18s ease; }
.side .navbox { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #444 transparent; padding-bottom: 8px; }
.side .navbox nav { flex: none; }
.side .mfilter-w { position: sticky; top: 0; z-index: 2; background: var(--side); padding: 2px 0 8px; display: flex; align-items: center; }
.side .mfilter-w svg { position: absolute; left: 10px; width: 15px; height: 15px; stroke: #9a9a9a; pointer-events: none; }
.side .mfilter { width: 100%; background: #111; color: #fff; border: 1px solid #444; border-radius: 3px; padding: 8px 10px 8px 32px; font: inherit; font-size: 13px; }
.side .mfilter::placeholder { color: #8d8d8d; }
.side .mfilter:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: var(--orange); }
.side .sep { border: 0; border-top: 1px solid #2a2a2a; margin: 8px 12px; }
.side a[hidden], .side .grp[hidden] { display: none; }
.side a:focus-visible, .side .grp:focus-visible, .side .fold:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.side a { position: relative; }
.side a.active::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 2px 2px 0; background: #000; }
.side a .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side a .bdg { order: 3; min-width: 20px; padding: 2px 6px; border-radius: 5px; background: var(--vivid-pink, #ff3d8b); color: #fff; font-size: 11px; font-weight: 700; line-height: 1.2; text-align: center; }
.side a .bdg[hidden] { display: none; }
.side a.active .bdg { background: #000; color: #fff; }
.side .who { position: sticky; bottom: 0; background: var(--side); margin-top: 0; padding: 12px 0 14px; }
.side .who a { display: flex; align-items: center; gap: 10px; }
.side .who a .ico { flex: none; }
.side .who .lbl { display: block; }

/* Mode réduit : barre de 76 px, icônes seules (libellés en infobulle) */
body.menu-rail { --side-w: 76px; }
body.menu-rail .side { padding: 14px 8px 0; }
body.menu-rail .side .brand { justify-content: center; padding: 4px 0 12px; }
body.menu-rail .side .brand > div:last-child, body.menu-rail .side .lbl, body.menu-rail .side .sq, body.menu-rail .side .mfilter-w, body.menu-rail .side .who strong { display: none; }
body.menu-rail .side .fold { justify-content: center; padding: 8px 0; }
body.menu-rail .side .fold svg { transform: rotate(180deg); }
body.menu-rail .side .grp { font-size: 0; height: 1px; padding: 0; margin: 10px 8px; background: #2a2a2a; pointer-events: none; }
body.menu-rail .side .grp svg { display: none; }
body.menu-rail .side .group.hidden { display: flex; }
body.menu-rail .side a { justify-content: center; padding: 11px 0; }
body.menu-rail .side a .bdg { position: absolute; top: 2px; right: 6px; min-width: 16px; padding: 1px 4px; font-size: 10px; }
body.menu-rail .side a.active::before { left: 0; }
body.menu-rail .side .who a { justify-content: center; }
body.menu-rail .side .sep { margin: 8px 10px; }
@media (max-width: 800px) { body.menu-rail { --side-w: 268px; } body.menu-rail .side .lbl, body.menu-rail .side .brand > div:last-child { display: revert; } }
@media (prefers-reduced-motion: reduce) { .side { transition: none; } }

/* Menu plus compact : toutes les entrées tiennent sur un écran de 800 px */
.side a { padding: 7px 12px; font-size: 13.5px; }
.side .grp { padding: 10px 12px 5px; }
.side .group { gap: 1px; }
.side .brand { padding-bottom: 8px; }
.side .fold { margin-bottom: 6px; padding: 6px 10px; }
.side .who { padding: 6px 0 8px; font-size: 12.5px; }
.side .who a { padding: 5px 12px; }
body.menu-rail .side a { padding: 9px 0; }

/* Formes plus carrées : pastilles d'icônes et de numéros (les petits points d'état et l'interrupteur restent ronds) */
.tile .tile-ico, .top .me .av, .avatar, .stepper .dot, .checklist .box, .readlist .st, .rnum, .tl-dot, .lv-mark, .anum, .rtab-no, .dnum, .fd-ic, .cand .cn, .flow > div::before { border-radius: 4px; }
.dropzone .dz-ico, .verdict-ico, .lv-orb { border-radius: 8px; }
.lv-ring { border-radius: 10px; }

/* Bandeau d'accès aux robots d'exemple */
.notice[role=note] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.notice[role=note] > div { flex: 1; min-width: 240px; }

/* Documentation : sections du sommaire et documents Markdown */
.docs-sec { margin: 14px 0 6px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
.md { line-height: 1.55; }
.md h2, .md h3, .md h4, .md h5 { margin: 22px 0 8px; scroll-margin-top: 80px; }
.md .md-h2 { border-bottom: 3px solid var(--orange); padding-bottom: 4px; }
.md p { margin: 8px 0; }
.md ul, .md ol { margin: 8px 0 8px 22px; padding: 0; }
.md li { margin: 3px 0; }
.md code { background: var(--bg); border: 1px solid var(--line); border-radius: 3px; padding: 0 5px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .92em; }
.md-code { background: #101828; color: #e4e7ec; border-radius: 4px; padding: 12px 14px; overflow-x: auto; margin: 10px 0; }
.md-code code { background: none; border: 0; padding: 0; color: inherit; font-size: 13px; white-space: pre; }
.md blockquote { margin: 10px 0; padding: 4px 14px; border-left: 4px solid var(--orange); background: var(--bg); }
.md-table th, .md-table td { vertical-align: top; }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
.md-toc { background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 10px 14px; margin: 0 0 14px; }
.md-toc ul { list-style: none; margin: 6px 0 0; padding: 0; columns: 2; }
.md-toc .l3 { padding-left: 14px; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--link, #c25a00); text-decoration: underline; cursor: pointer; text-align: left; }
@media (max-width: 800px) { .md-toc ul { columns: 1; } }
.docs-grid > * { min-width: 0; }
.md { min-width: 0; overflow-wrap: anywhere; }
.md-code { max-width: 100%; overflow-wrap: normal; }

/* Fil d'Ariane (retour à la liste depuis une page de détail) */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; margin: 0; }
.crumbs a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; padding: 4px 10px; border: 2px solid var(--fg); border-radius: 3px; color: var(--fg); }
.crumbs a:hover { background: var(--fg); color: var(--card); }
.crumbs .sep { color: var(--muted); }
.crumbs [aria-current] { color: var(--muted); }