/* Démo du réseau : la vue partagée, ses écrans, l'automatisation et la matrice de permissions. */
.sim{position:relative}
.sim-head{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;margin-bottom:12px}
.sim-badge{font:600 13px/1.2 var(--f-body);color:var(--demo);border:1px solid currentColor;border-radius:99px;padding:6px 13px;background:rgba(10,8,24,.6)}
.sim-tools{display:flex;gap:8px;flex-wrap:wrap}
/* ----- Le fil des étapes reste visible pendant qu'on regarde les écrans ----- */
.sim-sticky{position:sticky;top:64px;z-index:4;margin-inline:calc(var(--gut) * -.4);padding:10px calc(var(--gut) * .4) 12px;background:rgba(3,6,10,.93);backdrop-filter:blur(8px);border-radius:0 0 14px 14px}
.sim-steps{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:2px;margin-bottom:10px}
.sim-step{display:grid;justify-items:center;gap:4px;text-align:center;font-size:13px;color:var(--dim);position:relative}
.sim-step i{width:28px;height:32px;display:grid;place-items:center;clip-path:var(--hex);background:var(--steel);font:700 13px var(--f-data);font-style:normal;color:var(--muted);transition:background .4s,color .4s;z-index:1}
.sim-step::before{content:"";position:absolute;top:15px;left:-50%;width:100%;height:2px;background:var(--steel);transition:background .4s,box-shadow .4s}
.sim-step:first-child::before{display:none}
.sim-step.done i{background:var(--cyan-2);color:#02141d}
.sim-step.done::before,.sim-step.current::before{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.sim-step.done{color:var(--muted)}
.sim-step.current{color:var(--text);font-weight:600}
.sim-step.current i{background:var(--prime);color:#02141d;filter:drop-shadow(0 0 10px var(--cyan))}
.sim-title{font:700 clamp(20px,2.1vw,28px)/1.12 var(--f-display)}
.sim-story{color:var(--muted);max-width:60em;font-size:15.5px;line-height:1.4;margin-top:2px}
.sim-tabs{display:none;flex-wrap:wrap;gap:6px;margin:10px 0}
.sim-tab{border:1px solid var(--line-soft);background:rgba(7,16,26,.7);color:var(--muted);border-radius:99px;padding:8px 15px;font-size:15px;cursor:pointer;min-height:42px;transition:all .25s}
.sim-tab:hover{color:var(--text);border-color:var(--line)}
.sim-tab[aria-selected="true"]{background:var(--prime);border-color:transparent;color:#03141d;font-weight:600}
.sim-tab.expected{border-color:var(--cyan);animation:callout 1.8s ease-in-out infinite}
.sim-bandeau{display:none}
@keyframes callout{0%,100%{box-shadow:0 0 0 0 rgba(95,227,255,.5)}60%{box-shadow:0 0 0 9px rgba(95,227,255,0)}}
/* ----- Six écrans côte à côte ----- */
.panes-wrap{position:relative;margin-top:12px}
.panes{display:grid;grid-template-columns:1.42fr 1fr 1fr .78fr;grid-template-rows:352px 352px;gap:12px;grid-template-areas:"atelier fournisseur banniere client" "atelier assureur finance client"}
.pane-atelier{grid-area:atelier}.pane-fournisseur{grid-area:fournisseur}.pane-assureur{grid-area:assureur}.pane-client{grid-area:client}.pane-banniere{grid-area:banniere}.pane-finance{grid-area:finance}
.pane{display:flex;flex-direction:column;min-width:0;min-height:0;border-radius:16px;background:linear-gradient(155deg,#0e2130,#050d15);border:1px solid var(--line-soft);box-shadow:0 24px 60px rgba(0,0,0,.5);overflow:hidden;transition:border-color .45s,box-shadow .45s}
.pane.expected{border-color:var(--cyan);box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 46px rgba(20,184,216,.28)}
.pane.flash{animation:paneFlash 1.2s var(--ease)}
@keyframes paneFlash{0%{box-shadow:0 0 0 2px var(--cyan),0 0 90px rgba(95,227,255,.7)}}
.pane-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line-soft);font-size:12.5px;color:var(--dim);background:rgba(0,0,0,.25);flex:none;min-width:0}
.pane-bar i{flex:none;width:9px;height:10px;clip-path:var(--hex);background:var(--cyan)}
.pane-bar b{flex:none;color:var(--text);font:600 14px var(--f-display)}
.pane-bar span{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pane-cue{display:none;flex:none;font-style:normal;font-weight:600;font-size:12px;color:#03141d;background:var(--prime);border-radius:99px;padding:1px 8px}
.pane.expected .pane-cue{display:inline}
.pane-screen{flex:1;overflow:auto;padding:12px;min-height:0;scrollbar-width:thin;-webkit-mask-image:linear-gradient(transparent,#000 8px,#000 calc(100% - 12px),transparent);mask-image:linear-gradient(transparent,#000 8px,#000 calc(100% - 12px),transparent)}
.pane-client{border-radius:30px;border:6px solid #1b2c3a}
.pane-client.expected{border-color:var(--cyan-2)}
.sim-pulses{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.pulse{position:absolute;left:0;top:0;width:15px;height:15px;margin:-7px;border-radius:50%;background:currentColor;box-shadow:0 0 20px 5px currentColor;will-change:transform}
.imp-piece{color:var(--imp-piece)}.imp-supplement{color:var(--imp-supplement)}.imp-approbation{color:var(--imp-approbation)}.imp-client{color:var(--imp-client)}.imp-finance{color:var(--imp-finance)}
/* ----- Journal Hexterm Security ----- */
.pane-securite{margin-top:12px}
.securite-corps{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:16px;padding:12px}
.journal-securite{font:400 13.5px/1.4 var(--f-data);color:var(--muted);display:grid;gap:3px;align-content:start;min-height:140px}
.journal-securite li{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;padding:3px 8px;border-left:2px solid var(--steel);background:rgba(255,255,255,.02)}
.journal-securite li:first-child{border-left-color:var(--cyan);color:var(--text);animation:stageIn .5s var(--ease)}
.journal-securite li.ia{border-left-color:var(--imp-supplement)}
.journal-securite li.auto{border-left-color:var(--imp-approbation)}
.journal-securite li b{font-weight:600;color:var(--cyan-hi)}
.journal-securite li span:first-child{color:var(--dim)}
@keyframes stageIn{from{opacity:.35;transform:translateY(10px)}}
/* ----- Contenu des écrans ----- */
.view{display:grid;gap:8px;align-content:start;min-width:0}
.view-note{color:var(--dim);font-size:14px;line-height:1.38}
.view-hint{color:var(--muted);font-size:14px}
.view-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:2px}
.view-actions .btn{min-height:42px;padding:7px 14px;font-size:14.5px;line-height:1.15}
.sim-tag{justify-self:start;font-size:12.5px;font-weight:600;color:var(--cyan-hi);border:1px solid var(--line);border-radius:99px;padding:2px 9px}
.sim-wait{color:var(--dim);font-size:14.5px;border:1px dashed var(--line-soft);border-radius:10px;padding:14px;text-align:center}
.choice-row{display:flex;flex-wrap:wrap;gap:6px}
.chip-small{min-height:40px;padding:6px 11px;font-size:13.5px;border-radius:10px}
.first-call .chip-btn{animation:callout 1.8s ease-in-out infinite}
.kv{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;padding:5px 10px;background:rgba(95,227,255,.05);border-radius:8px;font-size:14px}
.kv span{color:var(--dim)}
.kv b{font-weight:600;text-align:right;margin-left:auto}
.ia-carte{border:1px solid rgba(143,168,255,.5);border-radius:10px;padding:9px 11px;background:rgba(143,168,255,.08);display:grid;gap:3px}
.ia-carte b{font:600 14px var(--f-display);color:#c5d2ff}
.ia-carte p{font-size:14px;line-height:1.38;color:var(--muted)}
.sup{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.sup-photo{border-radius:10px;min-height:64px;display:grid;place-items:end start;padding:6px;border:1px solid var(--line-soft);background:radial-gradient(60% 50% at 60% 40%,rgba(95,227,255,.3),transparent 70%),linear-gradient(135deg,#223647,#0a1520 60%);position:relative;overflow:hidden}
.sup-photo::after{content:"";position:absolute;left:18%;top:30%;width:66%;height:3px;background:#02060b;transform:rotate(14deg);box-shadow:18px 12px 0 -1px #02060b}
.sup-photo span{font-size:12.5px;background:rgba(0,0,0,.72);padding:1px 7px;border-radius:6px;position:relative;z-index:1}
.sup-body{display:grid;gap:5px;min-width:0;align-content:start}
.sup-why{font-size:14px;line-height:1.38;color:var(--muted);font-style:italic}
.alert-line{color:#ffe2b5;background:rgba(242,197,114,.1);border-left:3px solid var(--warn);padding:8px 11px;border-radius:0 8px 8px 0;font-size:14.5px;line-height:1.35}
.ok-line{color:#c9f6e0;background:rgba(116,224,176,.1);border-left:3px solid var(--ok);padding:8px 11px;border-radius:0 8px 8px 0;font-size:14px;line-height:1.35}
.offers{display:grid;gap:6px}
.offer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 8px;text-align:left;padding:8px 11px;border-radius:10px;border:1px solid var(--line);background:rgba(95,227,255,.05);color:var(--text);cursor:pointer;transition:all .2s}
.offer:hover{border-color:var(--cyan);transform:translateY(-1px)}
.offer b{font-size:14.5px}
.offer small{grid-column:1;color:var(--dim);font-size:12.5px}
.offer span{grid-column:1;font-size:13.5px;color:var(--cyan-hi)}
.offer-badge{grid-column:2;grid-row:1/span 2;align-self:start;font-style:normal;font-size:12px;font-weight:600;color:#c9f6e0;border:1px solid rgba(116,224,176,.5);border-radius:99px;padding:1px 8px}
.taches{display:grid;gap:3px;margin:2px 0}
.tache{position:relative;padding:3px 0 3px 18px;font-size:14px;color:var(--muted)}
.tache::before{content:"";position:absolute;left:2px;top:9px;width:9px;height:10px;clip-path:var(--hex);background:var(--steel)}
.tache.fait{color:var(--text)}.tache.fait::before{background:var(--ok)}
.tache.a-faire::before,.tache.en-cours::before{background:var(--cyan)}
.tache.en-cours{color:var(--text);font-weight:600}
.tache.bloquee{color:var(--dim)}
.phone-view{gap:7px}
.phone-view small{color:var(--dim);font-size:13px}
.phone-title{font:700 20px var(--f-display)}
.phone-date{color:var(--cyan-hi);font-size:14.5px;line-height:1.3}
.track{display:grid;gap:7px;margin:4px 0}
.track li{padding-left:22px;position:relative;font-size:14.5px;color:var(--dim)}
.track li::before{content:"";position:absolute;left:3px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--panel-2);border:1px solid var(--dim)}
.track li.done{color:var(--muted)}.track li.done::before{background:var(--cyan-2);border-color:var(--cyan-2)}
.track li.now{color:var(--text);font-weight:600}.track li.now::before{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.kpis div{background:rgba(95,227,255,.06);border:1px solid var(--line-soft);border-radius:9px;padding:7px 8px}
.kpis b{display:block;font:500 22px/1.1 var(--f-data);color:var(--cyan)}
.kpis small{color:var(--dim);font-size:12.5px;line-height:1.2;display:block}
.net-row{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr) 40px;gap:8px;align-items:center;font-size:13px}
.net-row span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.net-bar{height:8px;background:var(--steel);border-radius:99px;overflow:hidden}
.net-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan-2),var(--cyan));border-radius:99px;transform-origin:left;transition:transform .9s var(--ease)}
.net-row b{font:500 12.5px var(--f-data);color:var(--cyan-hi);text-align:right}
.controls li{position:relative;padding:4px 0 4px 16px;font-size:14px;line-height:1.35;color:var(--muted)}
.controls li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:9px;clip-path:var(--hex);background:var(--cyan)}
label.c{display:flex;gap:9px;align-items:center;font-size:14px;line-height:1.35;color:var(--muted);cursor:pointer;min-height:40px}
label.c input{width:22px;height:22px;flex:none;accent-color:var(--cyan);margin-top:1px}
.link{background:none;border:0;color:var(--muted);font-size:14px;text-decoration:underline;cursor:pointer;min-height:40px;padding:0 6px}
.link:hover{color:var(--cyan-hi)}
/* ----- Automatisation ----- */
.auto-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:14px;align-items:start}
.auto-editeur,.auto-essai{padding:clamp(14px,2vw,22px);display:grid;gap:12px}
.regle-form{display:grid;gap:9px}
label.f{display:grid;gap:3px;font-size:14.5px;color:var(--muted)}
.regle-form select{width:100%;min-height:46px;background:rgba(0,0,0,.38);border:1px solid var(--contour);border-radius:8px;padding:9px 12px;color:var(--text);font-size:15.5px}
.regle-form select:focus{border-color:var(--cyan);outline:2px solid var(--cyan-hi);outline-offset:2px}
.regle-form select option{background:#07101a}
.regle-form .btn{justify-self:start}
.regles{display:grid;gap:8px}
.regles li{border:1px solid var(--line-soft);border-radius:10px;padding:10px 12px;background:rgba(0,0,0,.2);transition:opacity .3s}
.regles li.off{opacity:.68}
.regles p{font-size:15px;line-height:1.38;margin-bottom:6px}
.validation{display:grid;gap:8px}
.auto-essai .journal-securite{min-height:96px}
.auto-essai .journal-securite li{align-items:center}
.budget{display:grid;gap:3px;font-size:14px;color:var(--muted)}
.budget progress{width:100%;height:9px;accent-color:var(--cyan)}
.budget small{color:var(--dim);font-size:13px}
.matrice-box{overflow-x:auto;border:1px solid var(--line-soft);border-radius:14px;background:rgba(7,16,26,.8)}
.matrice{width:100%;min-width:720px;border-collapse:collapse;font-size:14px}
.matrice caption{text-align:left;padding:11px 14px;color:var(--muted);font-size:14.5px}
.matrice th,.matrice td{padding:7px 9px;text-align:center;border-top:1px solid var(--line-soft)}
.matrice thead th{font:600 13.5px var(--f-display);color:var(--cyan-hi)}
.matrice tbody th{text-align:left;font-weight:500;color:var(--text)}
.matrice td.oui{background:rgba(95,227,255,.09);color:var(--cyan)}
.matrice td.non{color:var(--dim)}
.matrice td input{appearance:none;display:inline-block;width:38px;height:38px;margin:0;border:1px solid var(--contour);border-radius:9px;background:rgba(0,0,0,.3) center/16px 16px no-repeat;vertical-align:middle;cursor:pointer;transition:background-color .25s,border-color .25s}
.matrice td input:hover{border-color:var(--cyan)}
.matrice td input:checked{background-color:var(--cyan-2);background-image:radial-gradient(circle,#03141d 0 45%,transparent 50%);border-color:var(--cyan)}
.matrice td input:focus-visible{outline:2px solid var(--cyan-hi);outline-offset:2px}
.matrice td span{display:inline-block;min-width:22px}
/* ----- Tailles d'écran ----- */
@media(max-width:1099px){
  .panes{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(300px,380px);grid-template-areas:"atelier atelier" "fournisseur assureur" "client banniere" "finance finance"}
}
@media(max-width:899px){
  .sim-sticky{position:static;background:none;backdrop-filter:none;margin-inline:0;padding:0}
  .sim-tabs{display:flex}
  .sim-bandeau:not([hidden]){display:block;margin-bottom:8px;padding:7px 11px;border-radius:8px;border:1px solid var(--line);background:rgba(95,227,255,.08);font-size:14px}
  .panes{display:block}
  .pane{display:none;height:auto;min-height:320px;border-radius:16px;border-width:1px}
  .pane.active{display:flex;animation:stageIn .45s var(--ease)}
  .pane-screen{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .sim-pulses{display:none}
  .securite-corps,.auto-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
  .sim-steps{gap:0}
  .sim-step{font-size:0}
  .sim-step i{font-size:12.5px;width:26px;height:30px}
}
.pane,.pane *{scroll-margin-top:230px}