/* STUDIO REVO — V57 « Réaménagement » (couche additive) */
:root{--r-ink:#17161A;--r-mu:#5F5C63;--r-ln:rgba(17,17,19,.1);--r-acc:#671032;--r-soft:#F5F4F6}

/* ---------- HERO : démonstration à trois facettes ---------- */
.hx11 .hx-grid,.hx11 .hx-inner{align-items:center}
.x57-stage{background:#F7F6F4;border-radius:18px;box-shadow:0 40px 80px -40px rgba(0,0,0,.6);overflow:hidden;color:var(--r-ink);width:100%;max-width:640px;justify-self:end}
.x57-stage .x55-tabs{background:#EDEBE8;border-bottom:1px solid var(--r-ln)}
.x57-stage .x55-tabs button{padding:13px 14px;font-size:.88rem;min-width:0}
.x57-stage .x55-tabs button[aria-selected=true]{background:#F7F6F4}
.x57-face{padding:18px}
.x57-face[hidden]{display:none}
.x57-ctx{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--r-ln)}
.x57-ctx div{font-size:.8rem;line-height:1.4;color:var(--r-mu)}
.x57-ctx b{display:block;font-size:.7rem;letter-spacing:.02em;color:var(--r-acc);margin-bottom:2px}
.x57-note{margin:0;padding:8px 18px 12px;font-size:.72rem;color:#7A7680}
@media (max-width:900px){.x57-stage{justify-self:stretch;margin-top:28px;max-width:none}}
@media (max-width:520px){.x57-ctx{grid-template-columns:1fr}.x57-stage .x55-tabs button{flex:1 1 33%;min-width:33%;font-size:.8rem;padding:11px 6px;border-bottom-width:3px}}

/* Interface : vue de décision */
.x57-dash{background:#fff;border:1px solid var(--r-ln);border-radius:12px;padding:14px}
.x57-dash h4{margin:0 0 2px;font-size:.98rem}
.x57-dash .q{font-size:.8rem;color:var(--r-mu);margin:0 0 12px}
.x57-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.x57-kpis div{background:var(--r-soft);border-radius:8px;padding:9px 10px}
.x57-kpis span{display:block;font-size:.7rem;color:var(--r-mu)}
.x57-kpis b{font-size:1.15rem}
.x57-kpis i{font-style:normal;font-size:.72rem;color:#2E5E45}.x57-kpis i.up{color:var(--r-acc)}
.x57-bars{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:end;height:96px;padding:0 4px;border-bottom:1px solid #CFCBD3}
.x57-bars span{display:block;background:#D9D6DC;border-radius:4px 4px 0 0;position:relative}
.x57-bars span.hot{background:var(--r-acc)}
.x57-bl{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;font-size:.72rem;color:var(--r-mu);text-align:center;margin-top:4px}
.x57-insight{margin-top:10px;padding:9px 11px;border-radius:8px;background:#F7EBF0;font-size:.8rem;color:var(--r-acc)}
.x57-src{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.x57-src span{font-size:.7rem;padding:3px 8px;border-radius:999px;border:1px solid var(--r-ln);color:var(--r-mu);background:#fff}

/* Interface : application terrain (téléphone + synchronisation) */
.x57-app{display:grid;grid-template-columns:190px 1fr;gap:16px;align-items:center}
.x57-phone{background:#17161A;border-radius:26px;padding:10px;box-shadow:0 18px 30px -18px rgba(0,0,0,.5)}
.x57-screen{background:#fff;border-radius:18px;padding:12px 11px;min-height:300px;font-size:.76rem}
.x57-screen .t{font-size:.66rem;color:var(--r-mu)}
.x57-screen h4{margin:2px 0 8px;font-size:.92rem}
.x57-screen ul{list-style:none;margin:0 0 10px;padding:0}
.x57-screen li{display:flex;gap:7px;align-items:center;padding:6px 0;border-bottom:1px solid #EEE}
.x57-screen li i{width:14px;height:14px;border-radius:4px;border:1.5px solid #BDB8C2;flex:none}
.x57-screen li.ok i{background:#3A7657;border-color:#3A7657}
.x57-screen .ph{height:46px;border-radius:8px;background:repeating-linear-gradient(45deg,#F1EFF2,#F1EFF2 6px,#E7E4EA 6px,#E7E4EA 12px);display:grid;place-items:center;color:var(--r-mu);font-size:.68rem;margin-bottom:10px}
.x57-screen .go{display:block;text-align:center;background:var(--r-acc);color:#fff;border-radius:8px;padding:8px;font-weight:600}
.x57-sync{list-style:none;margin:0;padding:0}
.x57-sync li{display:flex;justify-content:space-between;gap:8px;padding:10px 0;border-bottom:1px solid var(--r-ln);font-size:.82rem}
.x57-sync li b{font-weight:600}
.x57-sync li span{color:#2E5E45;font-size:.76rem}
@media (max-width:520px){.x57-app{grid-template-columns:1fr}.x57-phone{max-width:230px}}

/* ---------- Enjeux et solutions (onglets verticaux) ---------- */
.x57-cases{display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px;margin-top:32px;align-items:start}
.x57-cases .x55-tabs{flex-direction:column;background:transparent;border:0;gap:8px}
.x57-cases .x55-tabs button{border:1px solid var(--r-ln);border-radius:12px;background:#fff;padding:16px 18px;text-align:left;border-left:4px solid transparent;font-weight:600;line-height:1.35;color:var(--r-ink);min-width:0}
.x57-cases .x55-tabs button small{display:block;font-weight:500;color:var(--r-mu);font-size:.8rem;margin-top:4px}
.x57-cases .x55-tabs button[aria-selected=true]{border-left-color:var(--r-acc);box-shadow:0 10px 24px -18px rgba(0,0,0,.4)}
.x57-case{background:#fff;border:1px solid var(--r-ln);border-radius:16px;padding:clamp(18px,2.4vw,28px)}
.x57-case[hidden]{display:none}
.x57-case h3{margin:0 0 14px;font-size:1.3rem}
.x57-case .x57-ctx{margin-top:18px}
.x57-case .x57-ctx div{font-size:.88rem}
@media (max-width:960px){.x57-cases{grid-template-columns:1fr}.x57-cases .x55-tabs{flex-direction:row;overflow-x:auto}.x57-cases .x55-tabs button{flex:0 0 78%}}

/* Interface : dossier partagé multi-équipes */
.x57-rec{border:1px solid var(--r-ln);border-radius:12px;overflow:hidden}
.x57-rec-h{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--r-soft);font-size:.86rem}
.x57-rec-h b{font-size:1rem}
.x57-rec table{width:100%;border-collapse:collapse;font-size:.86rem}
.x57-rec th,.x57-rec td{text-align:left;padding:10px 16px;border-top:1px solid var(--r-ln)}
.x57-rec th{font-weight:600;width:28%}
.x57-rec td.s{color:#2E5E45;font-weight:600;white-space:nowrap}
.x57-rec td.w{color:var(--r-acc);font-weight:600;white-space:nowrap}
.x57-rec-f{padding:10px 16px;border-top:1px solid var(--r-ln);font-size:.8rem;color:var(--r-mu)}

/* Interface : feuille de route */
.x57-road{display:grid;gap:10px}
.x57-lot{display:grid;grid-template-columns:110px 1fr auto;gap:14px;align-items:center;padding:12px 14px;border:1px solid var(--r-ln);border-radius:10px}
.x57-lot b{font-size:.92rem}
.x57-lot span{font-size:.84rem;color:var(--r-mu)}
.x57-lot em{font-style:normal;font-size:.74rem;font-weight:600;padding:4px 9px;border-radius:999px;white-space:nowrap}
.x57-lot.d em{background:#EAF3ED;color:#2E5E45}.x57-lot.c em{background:#F7EBF0;color:var(--r-acc)}.x57-lot.n em{background:var(--r-soft);color:var(--r-mu)}
.x57-gate{font-size:.8rem;color:var(--r-acc);padding-left:14px;border-left:2px dashed var(--r-acc)}
@media (max-width:560px){.x57-lot{grid-template-columns:1fr}}

/* ---------- Explorateur spatial interactif ---------- */
.x57-sp{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px}
.x57-bldg{display:flex;flex-direction:column-reverse;gap:6px;justify-content:flex-start}
.x57-bldg button{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--r-ln);background:#fff;border-radius:8px;padding:11px 14px;font:600 .88rem Inter,system-ui,sans-serif;color:var(--r-ink);cursor:pointer;transform:skewX(-8deg)}
.x57-bldg button span{transform:skewX(8deg)}
.x57-bldg button small{font-weight:500;color:var(--r-mu);transform:skewX(8deg)}
.x57-bldg button[aria-pressed=true]{background:var(--r-ink);color:#fff;border-color:var(--r-ink)}
.x57-bldg button[aria-pressed=true] small{color:#D7D3DA}
.x57-bldg button:focus-visible{outline:2px solid var(--r-acc);outline-offset:2px}
.x57-plan{border:1px solid var(--r-ln);border-radius:12px;padding:12px;background:#fff}
.x57-plan h4{margin:0 0 8px;font-size:.92rem}
.x57-units{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:64px;gap:4px;padding:6px;background:#E9E6EC;border-radius:6px}
.x57-units span{background:#fff;border-radius:3px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:.74rem;line-height:1.2;color:var(--r-ink)}
.x57-units span.wide{grid-column:span 2}
.x57-units span.av{box-shadow:inset 0 0 0 2px #3A7657}
.x57-units span.sel{background:var(--r-acc);color:#fff}
.x57-units small{font-size:.66rem;opacity:.75}
.x57-view{margin-top:10px;height:92px;border-radius:8px;position:relative;overflow:hidden;background:linear-gradient(#DDE8EF 0 58%,#CFC6BB 58% 100%)}
.x57-view::before{content:"";position:absolute;left:18%;right:18%;top:14%;height:40%;background:#F3F1EE;border:3px solid #fff;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.05)}
.x57-view span{position:absolute;left:10px;bottom:8px;background:#fff;border-radius:6px;padding:4px 8px;font-size:.72rem}
@media (max-width:640px){.x57-sp{grid-template-columns:1fr}}
@media (prefers-reduced-motion:no-preference){.x57-units span{transition:background .25s ease}}

/* ---------- Expertises : index éditorial ---------- */
.x57-xp{display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px;margin-top:30px;border-top:1px solid var(--r-ln)}
.x57-xp article{display:grid;grid-template-columns:44px 1fr;gap:6px 14px;padding:24px 0;border-bottom:1px solid var(--r-ln)}
.x57-xp .n{font:600 .82rem ui-monospace,Menlo,monospace;color:var(--r-acc);padding-top:6px}
.x57-xp h3{margin:0;font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.25}
.x57-xp p{grid-column:2;margin:0;font-size:.97rem;line-height:1.55;color:var(--r-mu)}
.x57-xp p.ex{color:var(--r-ink);font-size:.9rem}
.x57-xp p.ex::before{content:"Par exemple · ";color:var(--r-acc);font-weight:600}
.x57-xp a{grid-column:2;font-weight:600;color:var(--r-acc);font-size:.92rem;margin-top:4px}
@media (max-width:800px){.x57-xp{grid-template-columns:1fr}}

/* ---------- Méthode + confiance ---------- */
.x57-mt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);margin-top:30px;align-items:start}
.x57-tl{list-style:none;margin:0;padding:0;border-left:2px solid var(--r-ln)}
.x57-tl li{position:relative;padding:0 0 22px 24px}
.x57-tl li::before{content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--r-ink)}
.x57-tl li:last-child::before{background:var(--r-acc);border-color:var(--r-acc)}
.x57-tl b{display:block;font-size:1.02rem}
.x57-tl span{font-size:.92rem;color:var(--r-mu)}
.x57-deliv{border:1px solid var(--r-ln);border-radius:14px;background:#fff;overflow:hidden}
.x57-deliv-h{padding:12px 16px;background:var(--r-soft);display:flex;justify-content:space-between;font-size:.82rem;color:var(--r-mu)}
.x57-deliv-h b{color:var(--r-ink);font-size:.95rem}
.x57-lanes{display:grid;grid-template-columns:96px repeat(4,1fr);font-size:.76rem}
.x57-lanes>div{padding:9px 8px;border-top:1px solid var(--r-ln);border-left:1px solid var(--r-ln);min-height:44px}
.x57-lanes>div.l{border-left:0;font-weight:600;background:#FBFAFB}
.x57-lanes>div.hd{font-weight:600;color:var(--r-mu);background:#FBFAFB}
.x57-lanes .st{display:inline-block;padding:4px 7px;border-radius:6px;background:var(--r-soft)}
.x57-lanes .st.v{background:#F7EBF0;color:var(--r-acc);font-weight:600}
.x57-lanes .st.x{background:#FFF4DE;color:#7A5410}
.x57-deliv-f{padding:12px 16px;border-top:1px solid var(--r-ln);font-size:.84rem;color:var(--r-mu)}
.x57-deliv-f a{color:var(--r-acc);font-weight:600}
@media (max-width:900px){.x57-mt{grid-template-columns:1fr}}
@media (max-width:560px){.x57-deliv{overflow-x:auto}.x57-lanes{min-width:520px}}

/* ---------- Formation : trois formats sur une ligne de temps ---------- */
.x57-fmt{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.x57-fmt article{background:#fff;border:1px solid var(--r-ln);border-radius:14px;padding:20px}
.x57-fmt .when{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:0 0 14px}
.x57-fmt .when span{height:6px;border-radius:3px;background:#E3E0E6}
.x57-fmt .when span.on{background:var(--r-acc)}
.x57-fmt .lab{display:flex;justify-content:space-between;font-size:.7rem;color:var(--r-mu);margin:-8px 0 12px}
.x57-fmt h3{margin:0 0 6px;font-size:1.1rem}
.x57-fmt p{margin:0 0 10px;font-size:.92rem;color:var(--r-mu)}
.x57-fmt ul{margin:0;padding-left:18px;font-size:.9rem}
@media (max-width:860px){.x57-fmt{grid-template-columns:1fr}}

/* ---------- Données : vue de décision en grand ---------- */
.x57-dash.big{padding:20px}
.x57-dash.big .x57-bars{height:150px}

/* ---------- IA : onglets des trois types ---------- */
.x57-iatabs .x55-panel{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.x57-iatabs .x55-panel p{font-size:.95rem;color:var(--r-mu)}
.x57-iatabs .x55-panel h3{font-size:1.25rem}
@media (max-width:900px){.x57-iatabs .x55-panel{grid-template-columns:1fr}}
.x57-compact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start}
@media (max-width:900px){.x57-compact{grid-template-columns:1fr}}
.x57-runbox .x55-run li[hidden]{display:none}
.x57-runbox .x55-run-out[hidden]{display:none}
.x57-runctl{display:flex;gap:10px;align-items:center;margin-top:14px;flex-wrap:wrap}
.x57-runctl button[disabled]{opacity:.6;cursor:default}
.x57-runbox .x55-run li{animation:none}
@media (prefers-reduced-motion:no-preference){.x57-runbox .x55-run li:not([hidden]){animation:x55in .35s both}}
.x57-cases>*{min-width:0}
@media (max-width:960px){.x57-cases .x55-tabs{flex-wrap:nowrap;scroll-snap-type:x mandatory}.x57-cases .x55-tabs button{scroll-snap-align:start}}
.x57-rec{overflow-x:auto}.x57-rec table{min-width:420px}
.x57-bldg{justify-content:flex-end}
.x57-bldg::after{content:"Unités disponibles encadrées en vert";order:-1;font-size:.74rem;color:var(--r-mu);margin-top:8px}
@media (min-width:901px){.x57-face{min-height:438px}}