/* =================== v4 : personnages 3D (canvas), bureaux ouverts, classeurs, liens, raccourcis =================== */
#people{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}

/* ---- raccourcis en haut ---- */
.topnav{display:flex;gap:4px;align-items:center;padding:5px;border-radius:999px;background:rgba(8,13,28,.55);backdrop-filter:blur(8px);border:1px solid rgba(138,155,184,.22);margin:0 12px}
.topnav button{border:0;background:transparent;color:#c4d2ea;font:600 13px var(--font-body);padding:8px 12px;border-radius:999px;white-space:nowrap;transition:background .2s,color .2s}
.topnav button:hover{background:rgba(56,225,255,.14);color:#fff}
.topnav button.on{background:rgba(56,225,255,.2);color:#fff;box-shadow:inset 0 0 0 1px rgba(56,225,255,.55)}
.topnav button.cta{background:var(--grad);color:#fff;margin-left:4px}
.topnav button.cta:hover{filter:brightness(1.15)}
@media (max-width:1280px){.topnav button{padding:8px 9px;font-size:12px}.brand span{display:none}}
@media (max-width:900px){.topnav{display:none}}

/* ---- bureaux ouverts de l'équipe ---- */
.w-top{background:linear-gradient(180deg,#34477a,#1c2a52);border:1px solid rgba(56,225,255,.34);box-shadow:0 0 26px rgba(56,225,255,.1);pointer-events:none}
.w-side{background:linear-gradient(90deg,#0b1224,#22305a);border:1px solid rgba(138,155,184,.28);pointer-events:none}
.w-back{background:linear-gradient(180deg,#14203f,#0a1226);border:1px solid rgba(138,155,184,.2);pointer-events:none}
.w-kbd{border-radius:6px;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 5px,transparent 5px 8px),linear-gradient(180deg,#26335a,#162043);border:1px solid rgba(138,155,184,.4)}
.w-paper{pointer-events:none;background:linear-gradient(180deg,#e9f1ff,#bccbe6);border-radius:2px;box-shadow:0 0 14px rgba(160,200,255,.5)}
.w-chair-seat{border-radius:18px;background:linear-gradient(180deg,#34447a,#1d294d);border:1px solid rgba(138,155,184,.32);pointer-events:none}
.w-chair-back{border-radius:36px 36px 12px 12px;background:linear-gradient(180deg,#3a4c86,#1a2547);border:1px solid rgba(138,155,184,.35);pointer-events:none}
.w-chair-pole{background:linear-gradient(90deg,#222c48,#6a7898,#222c48);pointer-events:none}
.w-chair-base{border-radius:50%;pointer-events:none;background:repeating-conic-gradient(from 18deg,#2a3556 0 9deg,transparent 9deg 72deg),radial-gradient(circle,#2a3556 0 12%,transparent 13%)}

/* ---- armoire à dossiers contre le mur (là où les équipes vont chercher des documents) ---- */
.arch-front{display:flex;flex-direction:column;gap:5px;padding:10px 8px 8px;border-radius:6px;pointer-events:none;
  background:linear-gradient(180deg,#16224a,#0b1226);border:2px solid rgba(138,155,184,.4);box-shadow:inset 0 0 40px rgba(37,99,235,.18),0 0 30px rgba(56,225,255,.1)}
.arch-front i{flex:1;border-radius:3px;border-bottom:4px solid #3a4a76;
  background:
    repeating-linear-gradient(90deg,#7c3aed 0 7px,transparent 7px 9px,#38e1ff 9px 15px,transparent 15px 17px,#2563eb 17px 23px,transparent 23px 25px,#eaf2ff 25px 29px,transparent 29px 31px,#0ea5e9 31px 38px,transparent 38px 40px);
  background-position:0 0;opacity:.9}
.arch-front i:nth-child(2n){background-position:11px 0;filter:hue-rotate(40deg)}
.arch-front i:nth-child(3n){background-position:23px 0;filter:hue-rotate(-30deg)}
.arch-side{background:linear-gradient(90deg,#0b1224,#1b2745);border:1px solid rgba(138,155,184,.3);pointer-events:none}
.arch-label{position:absolute;left:0;right:0;top:-30px;text-align:center;font:600 12px var(--font-title);letter-spacing:.22em;text-transform:uppercase;color:#7f94b8}

/* ---- « Retrouvez-nous » : une étagère de petits écrans, tous cliquables ---- */
.link-front{background:linear-gradient(160deg,#16224a,#0b1226 75%);border:2px solid rgba(138,155,184,.4);border-radius:8px;padding:14px 16px 12px;display:flex;flex-direction:column;gap:8px;
  box-shadow:inset 0 0 50px rgba(37,99,235,.18),0 0 50px rgba(56,225,255,.16)}
.link-front .sh-title b{font:700 30px/1.1 var(--font-title)}
.lk-grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.lk{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:6px;padding:10px 12px;border-radius:12px;text-decoration:none;color:#eaf2ff;cursor:pointer;
  background:linear-gradient(160deg,#1a2a5a,#0d1633);border:1px solid rgba(138,155,184,.35);position:relative;overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s}
.lk::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--violet),var(--cyan))}
.lk:hover,.lk:focus-visible{border-color:var(--cyan);box-shadow:0 0 0 2px var(--cyan),0 0 36px rgba(56,225,255,.5);transform:translateY(-2px)}
.lk svg{width:34px;height:34px;flex:none}
.lk b{font:700 15px/1.1 var(--font-title)}
.lk small{font-size:11.5px;color:#9fb0cf;line-height:1.25}
.lk.cta2{background:var(--grad);border-color:transparent}
.lk.cta2 small{color:#e7eeff}

/* ---- « Pour qui ? » : exemples visuels ---- */
.pq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:1}
.pq{border-radius:10px;background:linear-gradient(160deg,#18265a,#0c1431);border:1px solid rgba(138,155,184,.28);padding:7px 8px;display:flex;flex-direction:column;gap:5px;overflow:hidden;position:relative}
.pq b{font:700 12.5px/1.1 var(--font-title)}
.pq small{font-size:9.5px;color:#9fb0cf;line-height:1.2}
.pq .mm{flex:1;min-height:44px}
.pq.wr{border-color:rgba(56,225,255,.7);box-shadow:0 0 18px rgba(56,225,255,.28)}
.pq.wr .mm{background:#091022 url(../assets/woodrock-vitrine.png) 0 0/200% auto no-repeat;border-radius:6px;border:1px solid rgba(255,255,255,.2)}
.pq .badge{position:absolute;right:6px;top:6px;font:700 8.5px var(--font-title);letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:999px;background:var(--cyan);color:#06101f}
/* petites maquettes illustrées */
.mm{border-radius:6px;background:#091022;border:1px solid rgba(138,155,184,.22);position:relative;overflow:hidden;display:flex;gap:3px;padding:5px;align-items:flex-end}
.mm.rows{flex-direction:column;align-items:stretch;justify-content:center;gap:4px}
.mm.rows i{display:block;height:7px;border-radius:4px;background:linear-gradient(90deg,var(--cyan),var(--violet))}
.mm.rows i:nth-child(1){width:84%}.mm.rows i:nth-child(2){width:62%}.mm.rows i:nth-child(3){width:74%}.mm.rows i:nth-child(4){width:48%}
.mm.bars i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--cyan),var(--blue))}
.mm.tiles{flex-wrap:wrap;align-items:stretch;align-content:stretch}
.mm.tiles i{flex:1 0 28%;border-radius:4px;background:linear-gradient(160deg,#3b2f8f,#1e4fb0)}
.mm.tiles i:nth-child(2n){background:linear-gradient(160deg,#0f7fb3,#1e4fb0)}
.mm.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:5px;align-items:stretch}
.mm.cal i{border-radius:2px;background:rgba(255,255,255,.07)}
.mm.cal i.h{background:var(--cyan)} .mm.cal i.v{background:var(--violet)}
.mm.team{align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;align-content:center}
.mm.team i{width:24px;height:24px;border-radius:50%;background:linear-gradient(160deg,var(--cyan),var(--violet));box-shadow:0 0 8px rgba(56,225,255,.5)}
.mm.team i:nth-child(2n){background:linear-gradient(160deg,var(--sky),var(--blue))}
.mm.sites{gap:6px}
.mm.sites u{flex:1;display:flex;align-items:flex-end;gap:2px;height:100%;text-decoration:none;border-right:1px dashed rgba(138,155,184,.3)}
.mm.sites u:last-child{border:0}
.mm.sites u i{flex:1;background:linear-gradient(180deg,var(--cyan),var(--blue));border-radius:2px 2px 0 0}
.mm.shop{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;align-items:stretch}
.mm.shop i{border-radius:3px;background:linear-gradient(160deg,#2a3d86,#17224d);position:relative}
.mm.shop i::after{content:"";position:absolute;left:3px;right:3px;bottom:3px;height:3px;border-radius:2px;background:var(--cyan)}
.mm.shop i:nth-child(2n)::before{content:"";position:absolute;inset:3px 3px 9px;border-radius:2px;background:rgba(124,58,237,.55)}

/* ---- Santé : à qui c'est destiné ---- */
.sa-who{display:flex;flex-direction:column;gap:7px}
.sa-who div{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(138,155,184,.22);font:600 14px var(--font-title)}
.sa-who svg{width:28px;height:28px;flex:none;color:var(--cyan)}

/* ---- panneaux : cartes visuelles ---- */
.panel-card.wide{width:min(860px,100%)}
.pc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 20px}
.pc{border-radius:14px;overflow:hidden;background:rgba(255,255,255,.04);border:1px solid rgba(138,155,184,.22);display:flex;flex-direction:column}
.pc .mm{height:96px;border-radius:0;border-width:0 0 1px}
.pc .mm.photo{background:#091022 url(../assets/woodrock-vitrine.png) 0 0/200% auto no-repeat}
.pc .tx{padding:10px 12px 12px;display:flex;flex-direction:column;gap:3px}
.pc b{font:700 16px var(--font-title);color:var(--cyan)}
.pc span{font-size:13.5px;line-height:1.4;color:#d3deef}
.pc .ex{margin-top:4px;font:600 12px var(--font-title);color:#fff}
.pc .ex a{color:var(--cyan)}
.panel-card li a,.panel-card .lnk{color:var(--cyan);font-weight:600}
@media (max-width:760px){.pc-grid{grid-template-columns:repeat(2,1fr)}}
.chip-link{display:inline-block;margin-top:4px}
.woo-note{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:rgba(56,225,255,.08);border:1px solid rgba(56,225,255,.4);margin:0 0 18px;font-size:14px;line-height:1.4}
.woo-note img{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:none}

/* ---- écrans qui montrent une vraie capture ou la démo filmée ---- */
.ui.shot,.ui.vid{padding:0;background:#0b0b0b}
.ui.shot img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.ui.vid video{width:100%;height:100%;object-fit:contain;display:block;background:#0d0d0d}