/* ================================================================
   Démo — pupitre sombre mobile, famille Botin / Contact / Agenda / Play.
   Identité propre : nuit terre cuite, corail et abricot clair.
   Signature : deux écrans de présentation décalés, local et distant.
   Aucun relief par ombre ; tout passe par les fonds et les bordures.
   ================================================================ */
* { box-sizing: border-box; }
:root {
  color-scheme: dark;
  --fond: #130b09;
  --carte: #201410;
  --carte-2: #2d1c16;
  --champ: #170e0b;
  /* Les textes secondaires restent très lisibles, mais appartiennent eux
     aussi au thème : ivoire rosé puis taupe-corail, jamais gris bleuté. */
  --texte: #fff5ef;
  --texte-2: #e4cfc5;
  --muted: #b29488;
  --bord: #584036;
  --bord-soft: rgba(255, 224, 210, .12);
  --voile: rgba(255, 224, 210, .05);
  --voile-fort: rgba(255, 224, 210, .09);
  --accent: #ff8256;
  --accent-clair: #ffc9ae;
  --accent-soft: rgba(255, 130, 86, .17);
  --accent-line: rgba(255, 130, 86, .46);
  --sur-accent: #2b0c02;
  --degrade: linear-gradient(135deg, #ffc09d, #ff8256 55%, #e95a31);
  --degrade-marque: linear-gradient(135deg, #ffc09d, #ff8256);
  --sur-marque: #1c0903;
  --marque-1: #ff8256;
  --marque-2: #ffc09d;
  --glace: #67d7ff;
  --glace-soft: rgba(103, 215, 255, .16);
  --ok: #60e4a7;
  --ok-soft: rgba(96, 228, 167, .15);
  --warn: #ffd166;
  --warn-soft: rgba(255, 209, 102, .15);
  --err: #ff7894;
  --err-soft: rgba(255, 120, 148, .15);
  --teinte-1: #ff8256;
  --teinte-2: #67d7ff;
  --teinte-3: #60e4a7;
  --teinte-4: #ffd166;
  --teinte-5: #c89cff;
  --teinte-6: #ff78bd;
  --halo-1: rgba(255, 130, 86, .19);
  --halo-2: rgba(255, 192, 157, .10);
  --tabbar-base: #1a0f0c;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}
.zone-demos {
  --accent: #ff8256; --accent-clair: #ffc9ae;
  --accent-soft: rgba(255, 130, 86, .17); --accent-line: rgba(255, 130, 86, .46);
  --degrade: linear-gradient(135deg, #ffc09d, #ff8256 55%, #e95a31); --sur-accent: #2b0c02;
}
.zone-connexions {
  --accent: #67d7ff; --accent-clair: #bcecff;
  --accent-soft: rgba(103, 215, 255, .16); --accent-line: rgba(103, 215, 255, .45);
  --degrade: linear-gradient(135deg, #a4e8ff, #55cdf7 55%, #1ca5d5); --sur-accent: #03222d;
  --halo-1: rgba(103, 215, 255, .15); --halo-2: rgba(255, 130, 86, .10);
}
.zone-journal {
  --accent: #60e4a7; --accent-clair: #baf5d7;
  --accent-soft: rgba(96, 228, 167, .15); --accent-line: rgba(96, 228, 167, .43);
  --degrade: linear-gradient(135deg, #aaf0cd, #54d99c 55%, #20b87a); --sur-accent: #02291a;
  --halo-1: rgba(96, 228, 167, .13); --halo-2: rgba(103, 215, 255, .09);
}
.zone-admin {
  --accent: #c89cff; --accent-clair: #e5d2ff;
  --accent-soft: rgba(200, 156, 255, .16); --accent-line: rgba(200, 156, 255, .44);
  --degrade: linear-gradient(135deg, #dfc2ff, #bf8afa 55%, #9157da); --sur-accent: #210639;
  --halo-1: rgba(200, 156, 255, .14); --halo-2: rgba(255, 130, 86, .09);
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; }
body {
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--texte); background-color: var(--fond);
  background-image: radial-gradient(900px 460px at 8% -190px, var(--halo-1), transparent 72%),
    radial-gradient(760px 420px at 94% -170px, var(--halo-2), transparent 72%);
  background-attachment: fixed; -webkit-tap-highlight-color: var(--accent-soft);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 7px; }
::selection { background: color-mix(in srgb, var(--accent) 34%, transparent); }
svg { max-width: 100%; }
code { color: var(--accent-clair); background: var(--voile-fort); border-radius: 6px; padding: 2px 6px; overflow-wrap: anywhere; }
.lucide { width: 1.34em; height: 1.34em; vertical-align: -.27em; flex: none; }
button .lucide, .btn .lucide { margin-right: 4px; }
.layout { display: flex; min-height: 100vh; min-height: 100dvh; }

/* Navigation bureau */
.sidebar {
  width: 244px; flex: 0 0 244px; height: 100vh; height: 100dvh;
  position: sticky; top: 0; overflow-y: auto; padding: 17px 11px 22px;
  background: color-mix(in srgb, var(--fond) 94%, transparent); border-right: 1px solid var(--bord-soft);
}
.brand { display: flex; gap: 11px; align-items: center; padding: 5px 10px 14px; font-size: 21px; font-weight: 850; letter-spacing: -.5px; }
.brand-ico { width: 38px; height: 32px; display: inline-grid; place-items: center; color: var(--accent); flex: none; }
.brand-ico svg { width: 100%; height: 100%; }
.mark-back { color: var(--marque-1); }
.mark-front { color: var(--marque-2); }
.sidebar-note { margin: 0 10px 20px; color: var(--muted); font-size: 12px; }
.sidebar > a { min-height: 46px; padding: 10px 12px; margin: 3px 0; border-radius: 13px; color: var(--texte-2); display: flex; align-items: center; gap: 12px; font-weight: 680; }
.sidebar > a:hover { color: var(--texte); background: var(--voile); text-decoration: none; }
.sidebar > a.active { color: var(--accent-clair); background: var(--accent-soft); outline: 1px solid var(--accent-line); }
.sidebar .ico { width: 26px; display: grid; place-items: center; }
.logout-form { margin: 20px 9px 0; padding-top: 18px; border-top: 1px solid var(--bord-soft); }
.logout-form button { width: 100%; background: transparent; border-color: var(--bord-soft); color: var(--muted); }
.topbar, .tabbar { display: none; }

.content { width: min(1180px, calc(100% - 244px)); padding: 34px clamp(22px, 4vw, 54px) 70px; margin: 0 auto; }
h1, h2, h3 { line-height: 1.16; letter-spacing: -.035em; }
h1 { font-size: clamp(30px, 4vw, 43px); margin: 0 0 14px; }
h2 { font-size: clamp(21px, 3vw, 28px); margin: 0; }
h3 { font-size: 18px; margin: 0; }
p { color: var(--texte-2); }
.muted { color: var(--muted); }
.block { display: block; color: var(--muted); margin-top: 3px; }
.eyebrow { display: block; color: var(--accent); font-size: 11px; text-transform: uppercase; font-weight: 850; letter-spacing: .13em; margin-bottom: 5px; }
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); margin-bottom: 10px; font-weight: 700; }
.page-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.page-title h1 { margin: 0; }
.demo-heading { align-items: center; }
.section-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 15px; margin-bottom: 14px; }
.section-block { margin-top: 34px; }
.text-link { font-weight: 750; display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }

.notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin: 0 0 18px; background: linear-gradient(100deg, var(--accent-soft), transparent 68%); border: 1px solid var(--accent-line); border-left: 3px solid var(--accent); border-radius: 14px; color: var(--texte-2); font-size: 13.5px; }
.notice > .lucide { width: 22px; height: 22px; color: var(--accent); margin-top: 1px; }
.n-txt { min-width: 0; }
.succes-msg, .erreur-msg { border: 1px solid; border-radius: 13px; padding: 11px 14px; margin: 12px 0 16px; }
.succes-msg { color: var(--ok); background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 44%, transparent); }
.erreur-msg { color: var(--err); background: var(--err-soft); border-color: color-mix(in srgb, var(--err) 44%, transparent); }

/* Boutons et formulaires */
button, .btn { min-height: 44px; border: 1px solid transparent; border-radius: 12px; padding: 10px 15px; background: var(--degrade); color: var(--sur-accent); font: inherit; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.btn:hover { text-decoration: none; filter: saturate(1.08); }
button.sec, .btn.sec { color: var(--accent-clair); background: var(--accent-soft); border-color: var(--accent-line); }
button.neutre, .btn.neutre { color: var(--texte-2); background: var(--voile); border-color: var(--bord); }
button:disabled, .btn.disabled { opacity: .42; cursor: not-allowed; filter: none; }
button.loading { color: transparent; position: relative; }
button.loading::after { content: ""; width: 17px; height: 17px; border: 2px solid var(--sur-accent); border-top-color: transparent; border-radius: 50%; position: absolute; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
input, textarea, select { width: 100%; color: var(--texte); background: var(--champ); border: 1px solid var(--bord); border-radius: 11px; padding: 11px 12px; font: inherit; }
textarea { resize: vertical; min-height: 90px; }
label { color: var(--texte-2); font-weight: 700; }
.form-card { background: var(--carte); border: 1px solid var(--bord-soft); border-radius: 18px; padding: clamp(16px, 3vw, 26px); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { min-width: 0; }
.field.full, .toggle.full { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: 7px; }
.field small { display: block; color: var(--muted); margin-top: 6px; font-weight: 500; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.toggle { min-height: 52px; display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 7px 0; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle > span { grid-row: 1 / 3; width: 46px; height: 27px; border-radius: 30px; background: var(--champ); border: 1px solid var(--bord); position: relative; transition: background .2s, border-color .2s; }
.toggle > span::after { content: ""; width: 19px; height: 19px; border-radius: 50%; background: var(--muted); position: absolute; top: 3px; left: 3px; transition: transform .2s, background .2s; }
.toggle input:checked + span { background: var(--accent-soft); border-color: var(--accent); }
.toggle input:checked + span::after { transform: translateX(19px); background: var(--accent); }
.toggle small { color: var(--muted); font-weight: 500; }

/* Accueil et cartes */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stats-grid a { min-height: 116px; padding: 18px; border-radius: 17px; background: var(--carte); border: 1px solid var(--bord-soft); color: var(--texte); display: flex; flex-direction: column; justify-content: flex-end; }
.stats-grid a:hover { text-decoration: none; border-color: color-mix(in srgb, var(--puce, var(--accent)) 45%, transparent); }
.stats-grid a:nth-child(1) { --puce: var(--teinte-1); }
.stats-grid a:nth-child(2) { --puce: var(--teinte-2); }
.stats-grid a:nth-child(3) { --puce: var(--teinte-3); }
.stats-grid a:nth-child(4) { --puce: var(--teinte-5); }
.stats-grid b { color: var(--puce); font-size: 31px; line-height: 1; }
.stats-grid span { color: var(--texte-2); margin-top: 8px; font-size: 13px; }
.demo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.demo-grid.large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.demo-card { min-width: 0; padding: 19px; background: var(--carte); border: 1px solid var(--bord-soft); border-radius: 18px; color: var(--texte); position: relative; display: flex; flex-direction: column; align-items: flex-start; }
a.demo-card:hover { text-decoration: none; border-color: var(--accent-line); }
.demo-card.running { border-color: var(--accent-line); background: linear-gradient(145deg, var(--accent-soft), var(--carte) 48%); }
.demo-card.disabled { opacity: .62; }
.card-icon { width: 43px; height: 43px; border-radius: 13px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin-bottom: 14px; }
.card-icon .lucide { width: 23px; height: 23px; }
.demo-card > .badge { position: absolute; top: 18px; right: 18px; }
.card-top { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; }
.card-top .badge { position: static; }
.source { color: var(--accent); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.demo-card h2, .demo-card h3 { margin: 8px 0 7px; }
.demo-card h2 { font-size: 21px; }
.demo-card h2 a { color: var(--texte); }
.demo-card p { margin: 0 0 16px; font-size: 13.5px; flex: 1; }
.demo-card > small { color: var(--muted); margin-top: auto; }
.card-meta { width: 100%; display: flex; flex-wrap: wrap; gap: 8px 14px; padding-top: 13px; border-top: 1px solid var(--bord-soft); color: var(--muted); font-size: 12px; }
.card-actions { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.card-actions form { display: flex; }
.card-actions .btn, .card-actions button { font-size: 13px; }
.badge { display: inline-flex; align-items: center; min-height: 26px; border-radius: 999px; padding: 4px 9px; font-size: 11px; font-weight: 850; white-space: nowrap; background: var(--accent-soft); color: var(--accent-clair); border: 1px solid var(--accent-line); }
.badge.ok { color: var(--ok); background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.badge.warn { color: var(--warn); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.badge.err { color: var(--err); background: var(--err-soft); border-color: color-mix(in srgb, var(--err) 35%, transparent); }
.badge.gris { color: var(--muted); background: var(--voile); border-color: var(--bord-soft); }
.badge.big { min-height: 33px; padding: 6px 12px; font-size: 12px; }
.empty { min-height: 180px; border: 1px dashed var(--bord); border-radius: 17px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 25px; color: var(--muted); }
.empty > .lucide { width: 31px; height: 31px; color: var(--accent); margin-bottom: 10px; }
.empty b { color: var(--texte); font-size: 17px; }
.empty p { max-width: 520px; margin: 6px auto 0; color: var(--muted); }

/* Pupitre */
.control-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr); gap: 15px; }
.stage-panel, .control-panel { background: var(--carte); border: 1px solid var(--bord-soft); border-radius: 20px; padding: 18px; }
.stage-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.stage-connection { color: var(--muted); font-size: 12px; }
.scene-preview { min-height: 370px; border: 1px solid var(--bord); border-radius: 16px; background: var(--champ); overflow: hidden; display: flex; flex-direction: column; }
.scene-screen { min-height: 275px; flex: 1; position: relative; overflow: hidden; background: radial-gradient(circle at 50% 110%, var(--accent-soft), transparent 48%), linear-gradient(180deg, var(--champ), var(--fond)); }
.scene-screen::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: 14%; height: 1px; background: var(--bord); }
.scene-orb { width: 47px; height: 47px; border-radius: 50%; position: absolute; top: 43%; opacity: .11; border: 2px solid var(--puce); background: color-mix(in srgb, var(--puce) 24%, transparent); transition: opacity .3s, transform .3s; }
.scene-orb.one { left: 19%; --puce: var(--teinte-1); }
.scene-orb.two { left: calc(50% - 23px); --puce: var(--teinte-2); }
.scene-orb.three { right: 19%; --puce: var(--teinte-3); }
.scene-beam { position: absolute; height: 3px; left: 20%; right: 20%; top: calc(43% + 22px); background: linear-gradient(90deg, var(--teinte-1), var(--teinte-2), var(--teinte-3)); opacity: .08; }
.scene-step-1 .one, .scene-step-2 .one, .scene-step-2 .two, .scene-step-3 .scene-orb, .scene-step-4 .scene-orb { opacity: 1; transform: scale(1.14); }
.scene-step-2 .scene-beam, .scene-step-3 .scene-beam, .scene-step-4 .scene-beam { opacity: .75; }
.scene-step-3 .scene-screen { background: radial-gradient(circle at 50% 58%, var(--glace-soft), transparent 32%), linear-gradient(180deg, var(--champ), var(--fond)); }
.scene-step-4 .scene-screen { background: radial-gradient(circle at 50% 58%, var(--accent-soft), transparent 38%), linear-gradient(180deg, var(--champ), var(--fond)); }
.scene-preview.is-paused .scene-screen { filter: saturate(.38); }
.scene-preview.is-paused .scene-screen::after { content: "PAUSE"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--warn); font-weight: 900; letter-spacing: .18em; background: color-mix(in srgb, var(--fond) 55%, transparent); }
.scene-caption { min-height: 90px; padding: 15px 17px; border-top: 1px solid var(--bord); display: flex; flex-direction: column; justify-content: center; }
.scene-caption b { font-size: 17px; }
.scene-caption small { color: var(--muted); margin-top: 3px; }
.remote-preview { min-height: 370px; border: 1px solid var(--bord); border-radius: 16px; background: radial-gradient(circle at 50% 38%, var(--accent-soft), transparent 25%), var(--champ); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; }
.remote-icon { width: 76px; height: 76px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 24px; margin-bottom: 16px; }
.remote-icon .lucide { width: 37px; height: 37px; }
.remote-preview b { font-size: 20px; }
.remote-preview p { max-width: 470px; color: var(--muted); }
.control-panel { display: flex; flex-direction: column; }
.control-panel h2 { margin-bottom: 15px; }
.transport-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.transport-controls form { display: flex; }
.transport { width: 100%; min-height: 78px; flex-direction: column; gap: 5px; color: var(--texte-2); background: var(--voile); border-color: var(--bord); font-size: 12px; }
.transport .lucide { width: 24px; height: 24px; margin: 0; }
.transport.play { color: var(--sur-accent); background: var(--degrade); border-color: transparent; }
.transport.next { color: var(--accent-clair); background: var(--accent-soft); border-color: var(--accent-line); }
.run-message { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px; border-radius: 13px; background: var(--voile); border: 1px solid var(--bord-soft); }
.run-message > .lucide { color: var(--accent); margin-top: 2px; }
.run-message span { min-width: 0; display: flex; flex-direction: column; }
.run-message small { color: var(--muted); overflow-wrap: anywhere; }
.facts { margin: auto 0 0; padding-top: 18px; }
.facts div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid var(--bord-soft); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; text-align: right; color: var(--texte-2); font-weight: 700; overflow-wrap: anywhere; }
.steps-section { margin-top: 30px; }
.steps-list { display: grid; gap: 9px; }
.step-item button { width: 100%; min-height: 76px; padding: 10px 13px; display: grid; grid-template-columns: 46px 1fr 35px; gap: 12px; text-align: left; color: var(--texte); background: var(--carte); border-color: var(--bord-soft); }
.step-item button:hover { border-color: var(--accent-line); }
.step-number { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); font-size: 17px; }
.step-copy { display: flex; flex-direction: column; min-width: 0; }
.step-copy b { font-size: 16px; }
.step-copy small { color: var(--muted); font-weight: 500; }
.step-go { display: grid; place-items: center; color: var(--muted); }
.step-item.active button { background: linear-gradient(100deg, var(--accent-soft), var(--carte) 55%); border-color: var(--accent); }
.step-item.done .step-number { color: var(--ok); background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.detail-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }

/* Connexions */
.connection-grid { display: grid; gap: 13px; }
.connection-card { display: grid; grid-template-columns: 62px 1fr; gap: 16px; padding: 19px; border-radius: 18px; background: var(--carte); border: 1px solid var(--bord-soft); }
.connection-card.disabled { opacity: .63; }
.connection-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 17px; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.connection-icon .lucide { width: 28px; height: 28px; }
.connection-main { min-width: 0; }
.connection-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.connection-title h2 { font-size: 21px; }
.connection-main p { margin: 7px 0 10px; }
.connection-main code { display: inline-block; max-width: 100%; }
.connection-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 13px; color: var(--muted); font-size: 12px; }
.panel { background: var(--carte); border: 1px solid var(--bord-soft); border-radius: 18px; padding: 19px; }
.protocol-help { display: flex; gap: 15px; margin-top: 24px; }
.panel-icon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.protocol-help h2 { font-size: 18px; }
.protocol-help p { margin: 6px 0 0; }

/* Journal */
.table-wrap { overflow-x: auto; border: 1px solid var(--bord-soft); border-radius: 17px; background: var(--carte); }
table { width: 100%; border-collapse: collapse; }
th { padding: 12px 14px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; text-align: left; border-bottom: 1px solid var(--bord); }
td { padding: 13px 14px; border-bottom: 1px solid var(--bord-soft); color: var(--texte-2); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
.title-cell { color: var(--texte); font-weight: 750; }
.command { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-clair); font-weight: 700; }

/* Administration */
.admin-section { margin-top: 32px; }
.admin-section > h2 { margin-bottom: 14px; }
.admin-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.admin-tile { min-height: 180px; padding: 18px; border-radius: 18px; background: var(--carte); border: 1px solid var(--bord-soft); color: var(--texte); display: flex; flex-direction: column; justify-content: flex-end; }
.admin-tile:hover { text-decoration: none; border-color: color-mix(in srgb, var(--puce) 45%, transparent); }
.admin-tile:nth-child(1) { --puce: var(--teinte-1); }
.admin-tile:nth-child(2) { --puce: var(--teinte-2); }
.admin-tile:nth-child(3) { --puce: var(--teinte-3); }
.admin-tile:nth-child(4) { --puce: var(--teinte-5); }
.admin-tile > span, .form-tile button > span { width: 43px; height: 43px; display: grid; place-items: center; color: var(--puce); background: color-mix(in srgb, var(--puce) 15%, transparent); border-radius: 13px; margin-bottom: auto; }
.admin-tile b { font-size: 16px; }
.admin-tile small { color: var(--muted); margin-top: 5px; }
.form-tile { padding: 0; }
.form-tile button { width: 100%; height: 100%; min-height: 178px; padding: 18px; color: var(--texte); background: transparent; border: 0; display: flex; align-items: flex-start; flex-direction: column; text-align: left; justify-content: flex-end; }
.form-tile button b { margin-top: auto; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.panel-heading { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 15px; }
.panel-heading h3 { margin-top: 3px; }
.panel-heading p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.compact-form { display: grid; gap: 10px; }
.compact-form label { font-size: 12px; }
.compact-form input { margin-top: 4px; }

.error-page { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.error-page > span { font-size: 70px; color: var(--accent); font-weight: 900; line-height: 1; }
.error-page h1 { margin: 10px 0; }
.error-page p { color: var(--muted); }

/* Connexion */
.login-page { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 20px; background-image: radial-gradient(650px 360px at 50% 0, var(--halo-1), transparent 72%); }
.login-card { width: min(430px, 100%); padding: clamp(22px, 5vw, 34px); border-radius: 22px; background: var(--carte); border: 1px solid var(--bord); }
.login-brand { display: flex; gap: 13px; align-items: center; margin-bottom: 32px; }
.login-brand strong { display: block; font-size: 24px; line-height: 1.1; }
.login-brand small { color: var(--muted); }
.login-mark { width: 58px; height: 47px; display: grid; place-items: center; flex: none; }
.login-mark svg { width: 100%; height: 100%; }
.login-card h1 { font-size: 28px; }
.login-form { display: grid; gap: 10px; margin-top: 22px; }
.login-form button { margin-top: 8px; }

/* Mobile */
@media (max-width: 900px) {
  body { padding-top: calc(59px + var(--safe-top)); padding-bottom: calc(78px + var(--safe-bottom)); }
  body::after { content: ""; position: fixed; z-index: 79; left: 0; right: 0; bottom: 0; height: var(--safe-bottom); background: var(--tabbar-base); pointer-events: none; }
  .layout { display: block; }
  .sidebar { display: none; }
  .topbar { display: flex; align-items: center; gap: 9px; height: calc(59px + var(--safe-top)); padding: var(--safe-top) calc(13px + var(--safe-right)) 0 calc(13px + var(--safe-left)); position: fixed; z-index: 90; top: 0; left: 0; right: 0; background: var(--fond); border-bottom: 1px solid var(--bord-soft); }
  .topbar .brand-ico { width: 34px; height: 29px; }
  .topbar-title { font-size: 18px; font-weight: 850; margin-right: auto; }
  .topbar-running { min-width: 36px; height: 36px; display: grid; place-items: center; position: relative; color: var(--muted); }
  .topbar-running span { position: absolute; top: 0; right: -1px; min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; border-radius: 20px; color: var(--sur-accent); background: var(--accent); font-size: 10px; font-weight: 900; }
  .topbar-admin { min-height: 36px; display: inline-flex; align-items: center; padding: 6px 11px; color: var(--texte-2); border: 1px solid var(--bord); border-radius: 10px; font-size: 13px; font-weight: 800; }
  .topbar-admin.on { color: var(--accent-clair); background: var(--accent-soft); border-color: var(--accent-line); }
  .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; z-index: 80; left: calc(12px + var(--safe-left)); right: calc(12px + var(--safe-right)); bottom: calc(4px + var(--safe-bottom)); transform: translateY(15px); min-height: 68px; padding: 7px; border-radius: 26px; background: var(--tabbar-base); }
  .tab { min-width: 0; min-height: 54px; border-radius: 19px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--muted); }
  .tab:hover { text-decoration: none; }
  .tab.on { color: var(--accent-clair); background: var(--accent-soft); }
  .t-ico { height: 25px; display: grid; place-items: center; }
  .t-ico .lucide { width: 21px; height: 21px; }
  .t-lbl { font-size: 10px; font-weight: 750; white-space: nowrap; overflow: hidden; max-width: 100%; text-overflow: ellipsis; }
  .content { width: 100%; padding: 22px 15px 34px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .demo-grid, .demo-grid.large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 740px) {
  body { font-size: 15px; }
  input, textarea, select { font-size: 16px; }
  h1 { font-size: 30px; }
  .page-title { align-items: flex-start; flex-direction: column; }
  .page-title > .btn { width: 100%; }
  .demo-heading { flex-direction: row; align-items: center; }
  .demo-heading > .badge { flex: none; }
  .notice { font-size: 13px; }
  .demo-grid, .demo-grid.large { grid-template-columns: 1fr; }
  .control-layout { grid-template-columns: 1fr; }
  .scene-preview, .remote-preview { min-height: 320px; }
  .scene-screen { min-height: 225px; }
  .transport { min-height: 72px; }
  .connection-card { grid-template-columns: 1fr; }
  .connection-icon { width: 48px; height: 48px; }
  .connection-title { align-items: center; }
  .form-grid { grid-template-columns: 1fr; }
  .field.full, .toggle.full { grid-column: auto; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn, .form-actions button { width: 100%; }
  .settings-grid { grid-template-columns: 1fr; }
  .table-wrap { overflow: visible; border: 0; background: transparent; }
  table.cartes, table.cartes tbody, table.cartes tr, table.cartes td { display: block; width: 100%; }
  table.cartes thead { display: none; }
  table.cartes tr { margin-bottom: 11px; padding: 13px; border-radius: 15px; background: var(--carte); border: 1px solid var(--bord-soft); }
  table.cartes td { display: grid; grid-template-columns: minmax(90px, 33%) 1fr; gap: 9px; padding: 7px 0; border: 0; }
  table.cartes td::before { content: attr(data-th); color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; }
  table.cartes td.title-cell { display: block; padding-bottom: 9px; font-size: 17px; }
  table.cartes td.title-cell::before { content: none; }
}

@media (max-width: 430px) {
  .stats-grid { gap: 9px; }
  .stats-grid a { min-height: 103px; padding: 14px; }
  .admin-grid { grid-template-columns: 1fr; }
  .admin-tile, .form-tile button { min-height: 142px; }
  .card-actions { flex-direction: column; }
  .card-actions > *, .card-actions form, .card-actions .btn, .card-actions button { width: 100%; }
  .step-item button { grid-template-columns: 42px 1fr 27px; gap: 9px; }
  .step-number { width: 39px; height: 39px; }
  .protocol-help { flex-direction: column; }
}

@media print {
  :root { color-scheme: light; --fond: #fff; --carte: #fff; --carte-2: #f3f4f6; --champ: #fff; --texte: #111; --texte-2: #333; --muted: #555; --bord: #aaa; --bord-soft: #ddd; }
  body { background: #fff; color: #111; padding: 0; }
  .sidebar, .topbar, .tabbar, .card-actions, .transport-controls, .detail-actions { display: none; }
  .content { width: 100%; padding: 0; }
}