/* Vonkcad · proposition 01 « Noir Studio » : page « Essayez-le » (terrain de jeu de la proposition 04, au thème noir).
   Le plan et l'unifilaire restent sur fond clair, comme dans le logiciel ; tout le reste est noir, le bleu en lumière. */

[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
.page-essai { --ease: cubic-bezier(.22, .8, .2, 1); --rouge: #FF6B70; --vert: #3DDC97; --ambre: #F5A524; }

/* ---------- Héros court ---------- */
.try-hero { position: relative; text-align: center; padding: 132px var(--gout) 44px; overflow-x: clip; }
.try-glow { position: absolute; left: 50%; top: 40%; width: min(1100px, 130vw); aspect-ratio: 2.2; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(31,119,254,.42), rgba(31,119,254,.1) 50%, transparent 75%); filter: blur(30px); pointer-events: none; z-index: -1; }
.try-hero h1 {
  font-size: clamp(50px, 8.4vw, 132px); line-height: .9; letter-spacing: -.055em; font-weight: 800; margin-top: 12px; padding-top: .12em;
  background: linear-gradient(180deg, #fff 35%, #B4BED4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em;
}
.try-hero h1 em { font-style: normal; color: var(--bleu); -webkit-text-fill-color: var(--bleu); text-shadow: 0 0 40px rgba(31,119,254,.8); }
.try-hero .sec-sub { margin: 22px auto 0; }
.try-how { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.try-how li { font-size: 14px; color: var(--gris); border: 1px solid var(--ligne-2); border-radius: 999px; padding: 7px 14px; background: rgba(255,255,255,.02); }
.try-how b { color: #fff; font-weight: 600; }
.try-hero > * { animation: rise 1s var(--ease) both; }
.try-hero > :nth-child(3) { animation-delay: .08s; }
.try-hero > :nth-child(4) { animation-delay: .16s; }
.try-hero > :nth-child(5) { animation-delay: .24s; }
.terrain-wrap { animation: rise 1.1s .3s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } }

/* ---------- Terrain ---------- */
.terrain-wrap { max-width: 1360px; margin: 0 auto; padding: 0 var(--gout) 24px; }
.terrain {
  position: relative; border-radius: 30px; padding: 18px;
  background: linear-gradient(180deg, #0E1424 0%, #080B13 100%);
  border: 1px solid var(--ligne-2);
  box-shadow: 0 0 0 1px #000, 0 60px 140px -40px rgba(31,119,254,.45), 0 40px 80px -30px rgba(0,0,0,.9);
}
.terrain::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(92,157,255,.35), transparent 30%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px; }
.demo-band { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.035); border: 1px solid var(--ligne); border-radius: 14px; padding: 8px 12px; font-size: 13.5px; color: var(--gris); margin-bottom: 14px; }
.demo-tag { flex: none; background: var(--bleu); color: #fff; font-weight: 600; font-size: 11.5px; padding: 4px 10px; border-radius: 999px; font-family: var(--mono); letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 0 18px -2px rgba(31,119,254,.8); }
.terrain-grid { display: grid; grid-template-columns: 92px minmax(0, 1fr) 372px; grid-template-areas: "pal plan side" "pal uni side"; gap: 16px; align-items: start; }
.palette { grid-area: pal; }
.plan-card { grid-area: plan; }
.side { grid-area: side; }
.uni { grid-area: uni; }

/* palette : les vrais symboles du logiciel */
.palette { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 80px; }
.pal-item {
  display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px 8px; border: 1px solid var(--ligne-2); background: #0F1422; border-radius: 16px;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; color: #fff;
  transition: transform .25s var(--ease), box-shadow .25s, border-color .25s, background .25s;
}
.pal-item svg { width: 38px; height: 38px; overflow: visible; }
.pal-item span { font-size: 11px; font-weight: 500; line-height: 1.15; text-align: center; color: #AEB5C6; }
.pal-item:hover { transform: translateY(-2px); border-color: rgba(92,157,255,.45); box-shadow: 0 10px 30px -10px rgba(31,119,254,.6); }
.pal-item:active { cursor: grabbing; }
.pal-item[aria-pressed="true"] { border-color: var(--bleu); background: rgba(31,119,254,.16); box-shadow: 0 0 0 3px rgba(31,119,254,.25), 0 0 26px -4px rgba(31,119,254,.8); }
.pal-item[data-kind="prise"], .pal-item[data-kind="prise_double"] { color: var(--rouge); }
.pal-item[data-kind="interrupteur"], .pal-item[data-kind="va_et_vient"], .pal-item[data-kind="lampe"] { color: var(--bleu-2); }
.pal-item[data-kind="taque"] { color: var(--vert); }

/* plan : clair, dans un cadre sombre */
.plan-card { background: #0A0E18; border: 1px solid var(--ligne); border-radius: 22px; padding: 10px; min-width: 0; }
.plan-bar { display: flex; align-items: center; gap: 12px; padding: 4px 6px 10px; }
.plan-title { font-weight: 600; font-size: 14px; color: var(--bleu-2); border-bottom: 2px solid var(--bleu); padding-bottom: 2px; }
.plan-hint { font-size: 13px; color: var(--gris-2); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.armed .plan-hint { color: var(--bleu-2); font-weight: 600; }
.plan-tools { display: flex; gap: 6px; }
.tool { border: 1px solid var(--ligne-2); background: rgba(255,255,255,.04); color: #D9DDE6; border-radius: 10px; padding: 5px 11px; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .2s, border-color .2s, opacity .2s; }
.tool:hover:not(:disabled) { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.24); }
.tool:disabled { opacity: .4; cursor: default; }
.plan-box { position: relative; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -30px rgba(0,0,0,.9); }
#plan { display: block; width: 100%; height: auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.armed #plan { cursor: crosshair; }
.over .plan-box { box-shadow: 0 0 0 2px var(--bleu), 0 0 40px -6px rgba(31,119,254,.8); }
.floor { fill: #FBFBFD; transition: fill .5s; }
.floor.tiles { fill: #F8F9FB; }
.floor.on { fill: #FFFBF0; }
.furn > * { fill: #EEF0F4; stroke: #DDE1E8; stroke-width: 1; }
.furn .hob { fill: #E3E6EC; }
.walls > * { fill: #2A2F3A; }
.openings rect { fill: #fff; }
.openings path { fill: none; stroke: #9AA1AE; stroke-width: 1.2; }
.openings .swing { stroke-dasharray: 3 3; }
.openings .gap { stroke: #fff; stroke-width: 9; }
.labels text { font-size: 14px; font-family: var(--font); }
.labels .rn { font-weight: 700; fill: #16181D; }
.labels .ra { fill: #6E7381; font-size: 12px; }

.pt { cursor: grab; outline: none; }
.pt .hit { fill: transparent; stroke: none; }
.pt .sym { transition: transform .35s var(--ease); }
.pt:hover .sym, .pt:focus-visible .sym { transform: scale(1.15); }
.pt:focus-visible .hit { stroke: rgba(31,119,254,.55); stroke-width: 3; }
.pt.sel .hit { fill: rgba(31,119,254,.08); stroke: var(--bleu); stroke-width: 1.5; stroke-dasharray: 4 3; }
.pt.fresh .sym { animation: pop .55s var(--ease); }
@keyframes pop { 0% { transform: scale(.2); opacity: 0; } 60% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); } }
.pt .mark { font-size: 10.5px; font-weight: 700; fill: currentColor; font-family: var(--font); paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.pt-interrupteur, .pt-va_et_vient { cursor: pointer; }
.pt.bad .sym { animation: shake .5s; }
.pt.bad .hit { fill: rgba(217,48,54,.08); }
@keyframes shake { 20%, 60% { transform: translateX(-2px); } 40%, 80% { transform: translateX(2px); } }
.pt .bulb { fill: transparent; transition: fill .35s; }
.pt.lit .bulb { fill: #FFC94D; }
.pt.lit { filter: drop-shadow(0 0 6px rgba(255,190,40,.9)); }
.pt.out { opacity: .35; }
.moving .pt { cursor: grabbing; }
.hl .pt:not(.hot) { opacity: .28; }
.pt.hot .hit { fill: rgba(31,119,254,.1); }
#plan-glow circle { animation: glowin .5s var(--ease); }
@keyframes glowin { from { opacity: 0; } }
.plan-foot { font-size: 12.5px; color: var(--gris-2); margin: 10px 6px 2px; }
.key { font-family: var(--mono); font-size: 11px; color: #D9DDE6; border: 1px solid var(--ligne-2); border-radius: 6px; padding: 1px 6px; }
.terrain-toast { position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 12px); background: rgba(4,6,11,.92); color: #fff; font-size: 13.5px; font-weight: 500; padding: 9px 16px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .3s, transform .4s var(--ease); white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 0 0 1px rgba(255,255,255,.1); }
.terrain-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* panneaux */
.side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.panel { background: #0A0E18; border: 1px solid var(--ligne); border-radius: 20px; padding: 14px 14px 12px; min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.panel-head h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; margin: 0; letter-spacing: -.01em; font-weight: 600; }
.panel-head h3 svg { width: 18px; height: 18px; color: var(--bleu-2); }
.panel-head .muted { font-size: 12.5px; color: var(--gris-2); }
.pill { font-family: var(--mono); font-size: 11.5px; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.05); color: var(--gris); transition: background .3s, color .3s, box-shadow .3s; white-space: nowrap; }
.pill.ko { background: rgba(255,107,112,.12); color: var(--rouge); box-shadow: 0 0 0 1px rgba(255,107,112,.3); }
.pill.ok { background: rgba(61,220,151,.12); color: var(--vert); box-shadow: 0 0 0 1px rgba(61,220,151,.35), 0 0 20px -4px rgba(61,220,151,.6); animation: okpop .5s var(--ease); }
@keyframes okpop { 50% { transform: scale(1.12); } }

.issues { display: flex; flex-direction: column; gap: 8px; }
.issue { border-left: 3px solid var(--rouge); background: rgba(255,107,112,.07); border-radius: 4px 12px 12px 4px; padding: 10px 12px; animation: slidein .45s var(--ease); transition: opacity .25s, transform .25s; }
.issue.leaving { opacity: 0; transform: translateX(16px); }
@keyframes slidein { from { opacity: 0; transform: translateY(-6px); } }
.issue-head { display: flex; align-items: center; gap: 8px; }
.issue-head strong { font-size: 14px; flex: 1; letter-spacing: -.01em; font-weight: 600; }
.sev { width: 18px; height: 18px; border-radius: 50%; background: var(--rouge); color: #04060B; font-size: 12px; font-weight: 800; display: grid; place-items: center; flex: none; }
.issue code { font-size: 10.5px; background: rgba(255,255,255,.06); color: #AEB5C6; border-radius: 6px; padding: 2px 6px; font-family: var(--mono); }
.issue p { margin: 5px 0 0; font-size: 12.5px; color: #B9BFCD; line-height: 1.45; }
.issue p.ref { color: var(--gris-2); font-size: 12px; }
.btn-fix { margin-top: 9px; display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--bleu); color: #fff; font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 9px; cursor: pointer; box-shadow: 0 6px 20px -6px rgba(31,119,254,.8); transition: background .2s, transform .2s var(--ease); }
.btn-fix svg { width: 15px; height: 15px; }
.btn-fix:hover { background: #3787FF; transform: translateY(-1px); }
.btn-fix-all { width: 100%; margin-top: 10px; --h: 42px; font-size: 14px; border-radius: 12px; }
.all-good { display: flex; gap: 10px; align-items: center; padding: 8px 4px; animation: slidein .45s var(--ease); }
.all-good svg { width: 28px; height: 28px; flex: none; filter: drop-shadow(0 0 10px rgba(61,220,151,.6)); }
.all-good svg circle { fill: var(--vert); }
.all-good svg path { stroke: #04060B; }
.all-good strong { display: block; font-size: 14px; font-weight: 600; }
.all-good span { font-size: 12.5px; color: var(--gris); }

.circuits { display: flex; flex-direction: column; gap: 6px; }
.circ { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px; border-radius: 12px; transition: background .2s; animation: slidein .4s var(--ease); }
.circ:hover, .circ.hot { background: rgba(255,255,255,.04); }
.letter { width: 30px; height: 30px; border-radius: 9px; background: var(--c); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 15px; box-shadow: 0 0 16px -4px var(--c); }
.circ-main strong { font-size: 14px; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.circ-detail { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--gris); white-space: nowrap; }
.dots { display: inline-flex; gap: 2px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: #262C3B; }
.dots i.on { background: var(--c); }
.dots i.over { background: var(--rouge); box-shadow: 0 0 0 2px rgba(255,107,112,.25); }
.circ.bad .circ-main strong { color: var(--rouge); }
.circ-spec { text-align: right; font-size: 12.5px; color: var(--gris); white-space: nowrap; }
.circ-spec b { color: #fff; }
.rcd { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--gris-2); margin-top: 2px; }
.rcd.warn { color: var(--ambre); }
.circuits .empty { font-size: 13px; color: var(--gris); padding: 6px; }

/* unifilaire : une feuille blanche, tracé noir comme le schéma du logiciel */
.uni { margin: 0; }
.uni-scroll { overflow-x: auto; overflow-y: hidden; border-radius: 12px; background: #fff; display: flex; padding: 6px 0; scrollbar-width: thin; box-shadow: inset 4px 0 0 var(--bleu); }
.uni-scroll svg { display: block; margin: 0 auto; flex: none; max-width: 100%; height: auto; }
.u-ink { stroke: #111; fill: none; stroke-linecap: round; }
.u-ink text { fill: #111; stroke: none; font-family: Arial, Helvetica, sans-serif; }
.u-ink .u-cable, .u-ink .u-n { fill: #555; }
.u-node { fill: #111; stroke: none; }
.u-kwh { color: #111; }
.u-letter { fill: var(--c) !important; }
.u-col.gen .u-letter { fill: #C2410C !important; }
.u-col { animation: colin .5s var(--ease); transition: opacity .25s; }
@keyframes colin { from { opacity: 0; transform: translateY(6px); } }
.u-sym { color: var(--c); }
.u-flow { fill: none; stroke: #FFB020; stroke-width: 2.4; stroke-dasharray: 5 9; opacity: 0; }
.u-col.live .u-flow { opacity: 1; animation: flow .8s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -14; } }
.u-glow { fill: #FFC94D; stroke: none; opacity: .75; filter: blur(3px); }
.hl .u-col:not(.hot) { opacity: .25; }

/* glisser */
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; opacity: 0; color: var(--bleu); filter: drop-shadow(0 8px 18px rgba(31,119,254,.55)); transition: opacity .15s; background: #fff; border-radius: 50%; }
.drag-ghost.on { opacity: 1; }
.ghost-hand { position: fixed; left: 0; top: 0; z-index: 95; pointer-events: none; opacity: 0; transition: opacity .3s; margin: -2px 0 0 -9px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); }
.ghost-hand.on { opacity: 1; }
.ghost-hand svg { transition: transform .15s; transform-origin: 10px 4px; }
.ghost-hand.press svg { transform: scale(.86); }

.terrain-after { text-align: center; font-size: 14px; color: var(--gris-2); margin: 20px auto 0; max-width: 780px; padding: 0 var(--gout); }
.terrain-after b { color: #D9DDE6; font-weight: 600; }

/* ---------- Le logiciel complet ---------- */
.more { padding: clamp(110px, 16vh, 190px) 0 20px; }
.more h2 { font-size: clamp(40px, 5.6vw, 88px); }
.more-list { max-width: var(--max); margin: 54px auto 0; padding: 0 var(--gout); display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.more-list li { border: 1px solid var(--ligne); border-radius: 26px; padding: 28px; background: linear-gradient(180deg, #0D1220, #090C15); transition: border-color .4s, transform .5s var(--ease); }
.more-list li:hover { border-color: rgba(92,157,255,.35); transform: translateY(-4px); }
.more-n { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--bleu-2); }
.more-list h3 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.05; letter-spacing: -.035em; font-weight: 700; margin-top: 14px; }
.more-list p { color: var(--gris); font-size: 15.5px; margin-top: 12px; }
.more-back { max-width: var(--max); margin: 30px auto 0; padding: 0 var(--gout); }

/* ---------- Écrans moyens (tablette) ---------- */
@media (max-width: 1180px) {
  .terrain-grid { grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "pal plan" "pal uni" "side side"; }
  .side { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (max-width: 860px) {
  .side { grid-template-columns: 1fr; }
  .more-list { grid-template-columns: 1fr; }
}

/* ---------- Téléphone : palette en bas, tapoter pour poser ---------- */
@media (max-width: 640px) {
  .try-hero { padding: 104px var(--gout) 30px; }
  .try-hero h1 { font-size: clamp(46px, 14vw, 72px); }
  .try-how li { font-size: 13px; }
  .long { display: none; }
  .pt .sym { scale: 1.4; }
  .pt .hit { r: 26px; }
  .pt .mark { font-size: 15px; }
  .labels text { font-size: 19px; }
  .labels .ra { font-size: 15px; }
  .circ-detail { white-space: normal; flex-wrap: wrap; row-gap: 2px; }
  .uni .panel-head .muted { display: none; }
  .terrain-wrap { padding: 0 10px 20px; }
  .terrain { padding: 10px; border-radius: 24px; }
  .demo-band { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 13px; }
  .terrain-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "plan" "pal" "side" "uni"; gap: 12px; }
  .palette {
    position: sticky; top: auto; bottom: 10px; z-index: 20; flex-direction: row; gap: 4px; padding: 6px;
    background: rgba(10,14,24,.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 18px; border: 1px solid var(--ligne-2);
    box-shadow: 0 20px 40px -10px rgba(0,0,0,.8);
  }
  .plan-card { padding: 6px; border-radius: 18px; }
  .pal-item { flex: 1; min-width: 0; padding: 6px 2px 5px; border-radius: 12px; gap: 2px; }
  .pal-item svg { width: 28px; height: 28px; }
  .pal-item span { font-size: 9.5px; }
  .plan-bar { flex-wrap: wrap; gap: 6px 10px; }
  .plan-hint { order: 3; flex-basis: 100%; }
  .plan-foot { font-size: 12px; }
  .more-list li { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .try-hero > *, .terrain-wrap { animation: none; }
  .u-col.live .u-flow { opacity: 1; animation: none; }
}

/* ---------- Site Odoo : textes traduits (nl, de, en) plus longs que le français ---------- */
.circ-main { min-width: 0; }
.circ-detail { flex-wrap: wrap; white-space: normal; row-gap: 2px; }
.pal-item span { max-width: 100%; overflow-wrap: anywhere; hyphens: manual; }
/* message du terrain : sur deux lignes plutôt que coupé (« … ») */
.terrain-toast { white-space: normal; text-align: center; width: max-content; line-height: 1.35; }
@media (max-width: 640px) { .terrain-toast { border-radius: 16px; font-size: 12.5px; } }
@media (max-width: 640px) { .pal-item span { font-size: 9px; } }