/* Police Space Grotesk hébergée localement (licence OFL, fichier fonts/OFL.txt), sous-ensemble latin */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url("../fonts/SpaceGrotesk-latin.woff") format("woff"),url("../fonts/SpaceGrotesk-latin.ttf") format("truetype")}
/* Duplex.video v15 : palette « nuit chaude » de la v6 (fond brun-gris, violet et ambre), sombre uniquement */
:root{
  --bg:#141216;--bg2:#1b181f;--bg3:#221e28;--sf:#2a2531;
  --bd:rgba(255,255,255,.09);--bd2:rgba(255,255,255,.16);
  --tx:#f6f2ee;--tx2:#c9c1bb;--tx3:#8f867f;
  --pur:#a78bfa;--blu:#f59e0b;
  --grad:linear-gradient(135deg,#a78bfa,#f59e0b);
}
/* marges (v13) */
#hero{padding-top:calc(var(--nav) + 90px)}
#hero .hbadge{margin-bottom:26px}
.h1{font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.12;letter-spacing:-.02em;margin-bottom:26px}
.stitle{letter-spacing:-.02em}
section.sp{padding-top:104px;padding-bottom:104px}
/* titres sans dégradé : mots clés en bleu clair uni */
.gt{background:none;-webkit-background-clip:initial;background-clip:initial;-webkit-text-fill-color:currentColor;color:#8ab8ff}
/* menu déroulant Fonctions */
.dx-dd .dropdown-toggle::after{font-size:.7em;vertical-align:middle;margin-left:.35em;opacity:.6}
.dx-menu{background:var(--sf);border:1px solid var(--bd2);border-radius:12px;padding:8px;min-width:280px;box-shadow:0 18px 40px rgba(0,0,0,.45);margin-top:10px}
.dx-menu .dropdown-item{color:var(--tx2);font-size:.9rem;padding:9px 12px;border-radius:8px}
.dx-menu .dropdown-item:hover,.dx-menu .dropdown-item:focus{background:rgba(255,255,255,.06);color:var(--tx)}
.dx-menu .dropdown-divider{border-color:var(--bd)}
@media (min-width:992px){.dx-dd:hover .dx-menu{display:block}.dx-dd .dx-menu{margin-top:0;padding-top:8px}}
.dx-dd{position:relative}

/* v16 : visuels d'interface simulés (HTML pur) */
.mk{background:#17141b;border:1px solid var(--bd2);border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45);font-size:12px;color:var(--tx)}
.mk-bar{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--bd);background:#1e1a23;color:var(--tx3);font-size:11px}
.mk-bar .dots{display:flex;gap:5px}.mk-bar .dots i{width:9px;height:9px;border-radius:50%;background:#3a333f}.mk-bar .dots i:nth-child(1){background:#ff5f57}.mk-bar .dots i:nth-child(2){background:#febc2e}.mk-bar .dots i:nth-child(3){background:#28c840}
.mk-body{padding:14px}
.mk .tg{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:6px;background:#2a2531;color:var(--tx2);font-size:11px;white-space:nowrap}
.mk .tg.live{background:#c8352e;color:#fff;font-weight:700}.mk .tg.ok{background:rgba(52,211,153,.15);color:#6ee7b7}.mk .tg.warn{background:rgba(251,191,36,.15);color:#fcd34d}.mk .tg.acc{background:rgba(167,139,250,.18);color:#c4b5fd}.mk .tg.timer{font-family:ui-monospace,monospace;color:#fcd34d}
.mk .vid{background:linear-gradient(160deg,#2b2633,#1a1720);border-radius:10px;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:8px;color:var(--tx3);font-size:11px}
.mk .vid.big{aspect-ratio:16/9}.mk .vid.sm{aspect-ratio:16/9}
.mk .sil{position:absolute;left:50%;top:18%;transform:translateX(-50%);width:26%;aspect-ratio:1;border-radius:50%;background:#4a4352}.mk .sil:after{content:"";position:absolute;left:50%;top:84%;transform:translateX(-50%);width:210%;height:120%;border-radius:120px 120px 0 0;background:#4a4352}
.mk .guide{position:absolute;inset:8% 22%;border:2px dashed rgba(138,184,255,.7);border-radius:50% 50% 30% 30%/60% 60% 30% 30%}
.mk .low{position:absolute;left:8px;bottom:8px;background:var(--tx);color:#17141b;padding:4px 8px;border-radius:4px;font-size:10px;font-weight:700;line-height:1.2}.mk .low span{display:block;font-weight:400;font-size:9px}
.mk .grid2{display:grid;grid-template-columns:1.7fr 1fr;gap:8px}.mk .col{display:flex;flex-direction:column;gap:8px}
.mk .card{background:#221e28;border:1px solid var(--bd);border-radius:10px;padding:10px}.mk .card h6{font-size:11px;margin:0 0 6px;color:var(--tx3);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.mk .slides{display:flex;gap:6px}.mk .slide{flex:1;aspect-ratio:16/9;background:#f6f2ee;color:#17141b;border-radius:6px;padding:6px;font-size:9px;font-weight:700;display:flex;flex-direction:column;justify-content:space-between}.mk .slide.next{opacity:.55}.mk .slide i{display:block;height:4px;background:#c9c1bb;border-radius:2px;margin-top:3px}
.mk .lang{display:flex;gap:4px}.mk .lang span{padding:3px 8px;border-radius:5px;background:#2a2531;color:var(--tx2)}.mk .lang span.on{background:#8ab8ff;color:#17141b;font-weight:700}
.mk .btns{display:flex;gap:6px;flex-wrap:wrap}.mk .b{padding:6px 10px;border-radius:7px;background:#2a2531;color:var(--tx);font-size:11px;font-weight:600}.mk .b.pri{background:linear-gradient(135deg,#a78bfa,#f59e0b);color:#17141b}.mk .b.red{background:#c8352e;color:#fff}.mk .b.ghost{border:1px solid var(--bd2);background:transparent}
.mk .vu{height:8px;border-radius:4px;background:#2a2531;overflow:hidden}.mk .vu i{display:block;height:100%;width:62%;background:linear-gradient(90deg,#34d399,#fbbf24 80%,#ef4444)}
.mk .row{display:grid;grid-template-columns:34px 1.4fr 1fr .8fr auto;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;background:#221e28;border:1px solid var(--bd)}
.mk .row .av{width:34px;height:34px;border-radius:8px;background:#4a4352}.mk .row .nm{font-weight:600}.mk .row .nm small{display:block;color:var(--tx3);font-weight:400}
.mk .row .ic{display:flex;gap:5px}.mk .row .ic span{width:26px;height:26px;border-radius:6px;background:#2a2531;display:flex;align-items:center;justify-content:center;color:var(--tx2);font-size:11px}.mk .row .ic span.on{background:#8ab8ff;color:#17141b}.mk .row .ic span.mute{background:#c8352e;color:#fff}
.mk .check{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--bd);color:var(--tx2)}.mk .check b{width:18px;height:18px;border-radius:50%;background:#34d399;color:#17141b;display:flex;align-items:center;justify-content:center;font-size:10px}.mk .check b.p{background:#2a2531;color:var(--tx3)}
.mk .fader{display:flex;align-items:center;gap:10px;padding:6px 0}.mk .fader .lb{width:110px;color:var(--tx3)}.mk .fader .tr{flex:1;height:6px;border-radius:3px;background:#2a2531;position:relative}.mk .fader .tr i{position:absolute;left:0;top:0;height:100%;border-radius:3px;background:#a78bfa}.mk .fader .tr b{position:absolute;top:-5px;width:16px;height:16px;border-radius:50%;background:#f6f2ee;transform:translateX(-50%)}.mk .fader .pc{width:40px;text-align:right;font-family:ui-monospace,monospace}
.mk .sub{background:rgba(0,0,0,.55);color:#fff;padding:5px 8px;border-radius:5px;font-size:11px;position:absolute;left:8px;right:8px;bottom:8px;text-align:center}
.mk .trans{font-family:ui-monospace,monospace;font-size:10.5px;color:var(--tx2);line-height:1.5}.mk .trans em{color:#8ab8ff;font-style:normal}
.mk .vmix{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.mk .vmix .in{background:#0d0c10;border:1px solid #2a2531;border-radius:4px;padding:4px}.mk .vmix .in.pgm{border-color:#c8352e;box-shadow:0 0 0 1px #c8352e}.mk .vmix .in.pvw{border-color:#28c840}.mk .vmix .thumb{aspect-ratio:16/9;background:#2b2633;border-radius:2px;margin-bottom:4px;position:relative}.mk .vmix .thumb:after{content:"";position:absolute;left:50%;top:22%;transform:translateX(-50%);width:26%;aspect-ratio:1;border-radius:50%;background:#4a4352}.mk .vmix .lbl{font-size:9px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk table{width:100%;border-collapse:collapse;font-size:11px}.mk th{text-align:left;color:var(--tx3);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--bd2)}.mk td{padding:6px 8px;border-bottom:1px solid var(--bd);color:var(--tx2)}
.mk-cap{font-size:.8rem;color:var(--tx3);margin-top:12px;text-align:center}
/* schéma de branchement */
.schema{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:10px;align-items:center}
.schema .node{background:#221e28;border:1px solid var(--bd2);border-radius:12px;padding:14px;text-align:center}.schema .node b{display:block;font-size:.95rem;margin-bottom:4px}.schema .node span{font-size:.78rem;color:var(--tx3)}.schema .node.st{border-color:rgba(167,139,250,.6);background:rgba(167,139,250,.08)}
.schema .lnk{text-align:center;color:var(--tx3);font-size:.72rem;line-height:1.2}.schema .lnk i{display:block;height:2px;background:linear-gradient(90deg,#a78bfa,#f59e0b);margin:6px 0;border-radius:1px}
@media (max-width:767px){.schema{grid-template-columns:1fr}.schema .lnk i{width:2px;height:22px;margin:4px auto}.mk .row{grid-template-columns:34px 1fr auto}.mk .row .st,.mk .row .net{display:none}}
/* v16 : aucun débordement horizontal (halos décoratifs et bandeau défilant) */
html,body{overflow-x:hidden}
section.sp.position-relative{overflow:hidden}

/* v17 : séparation entre les sections */
/* 1. un filet dégradé en haut de chaque section, plus lumineux au centre */
section.sp{position:relative}
section.sp::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.14) 30%,rgba(138,184,255,.55) 50%,rgba(255,255,255,.14) 70%,transparent 100%)}
#hero + section.sp::before,.sp:first-of-type::before{display:none}
/* 2. les sections alternées reçoivent une nappe de lumière très douce en haut, qui matérialise le changement de plan */
section.sp[style*="--bg2"]{background:linear-gradient(180deg,rgba(255,255,255,.035) 0%,transparent 180px),var(--bg2)!important}
section.sp[style*="--bg3"]{background:linear-gradient(180deg,rgba(255,255,255,.035) 0%,transparent 180px),var(--bg3)!important}
/* 3. la pastille de rubrique se pose sur le filet : petit marqueur centré */
section.sp .slbl{position:relative}
/* 4. les en-têtes de pages intérieures respirent moins en bas, la section suivante commence plus tôt */
section.sp[style*="padding-bottom:56px"]{padding-bottom:40px!important}
/* 5. un léger quadrillage de régie sur les sections à visuel, pour que le fond ne soit jamais un aplat */
section.sp:has(.mk){background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);background-size:22px 22px}

/* v25 : formulaire de contact */
.dx-in,.dx-in:focus{background:#1b181f;border:1px solid var(--bd2);color:var(--tx);border-radius:10px;padding:10px 12px;box-shadow:none}
.dx-in:focus{border-color:var(--pur)}
.dx-in::placeholder{color:var(--tx3)}
#dxform .form-label{font-size:.85rem;color:var(--tx2)}
.form-select.dx-in{background-repeat:no-repeat;background-position:right 12px center;background-size:14px 14px;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23c9c1bb' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E")}
.was-validated .dx-in:invalid{border-color:#f87171}

/* v26 : page courante dans le menu */
#nbar .nav-link.active{color:var(--tx);position:relative}
#nbar .nav-link.active::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;border-radius:1px;background:linear-gradient(90deg,#a78bfa,#f59e0b)}
#nbar .dropdown-toggle.active{color:var(--tx)}
#nbar .dropdown-toggle.active::before{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;border-radius:1px;background:linear-gradient(90deg,#a78bfa,#f59e0b)}
#nbar .dropdown-toggle.active::after{background:none;position:static;height:auto;width:auto}
.dx-menu .dropdown-item.active{background:rgba(167,139,250,.16);color:var(--tx);font-weight:600}
.dx-menu .dropdown-item.active::before{content:"›";margin-right:6px;color:var(--pur)}
#mbmenu a.active{color:var(--pur)!important;font-weight:600}

/* v26 : logo Duplex.video */
.dx-logo{height:32px;width:auto;display:block}
@media (max-width:575px){.dx-logo{height:26px}}
.dx-logo-f{height:34px}

/* v32 : tableau comparatif */
.dx-cmp{color:var(--tx2);font-size:.9rem;border-color:var(--bd)}
.dx-cmp th,.dx-cmp td{background:transparent;border-color:var(--bd);padding:12px 14px;vertical-align:top;color:var(--tx2)}
.dx-cmp thead th{color:var(--tx);font-weight:600;border-bottom:1px solid var(--bd2)}
.dx-cmp thead th:last-child{color:var(--pur)}
.dx-cmp tbody th{color:var(--tx);font-weight:600;width:24%}
.dx-cmp tbody td:last-child{color:var(--tx)}

/* v33 : comparatifs */
.dx-cmp3 tbody th{width:17%}.dx-cmp3 td{width:27.6%}.dx-cmp3{min-width:860px}
.dx-cmp2 th,.dx-cmp2 td{width:50%}.dx-cmp2 thead th:first-child{color:var(--tx3)}.dx-cmp2 tbody td:first-child{color:var(--tx3)}