/* AXDIA Website Factory V7 — clarity / density / accessibility layer */
:root{
  --v7-sidebar:264px;
  --v7-inspector:304px;
  --v7-top:58px;
  --v7-toolbar:46px;
  --v7-focus:#f1a28a;
}

/* --- Global polish --- */
.v7-app{--top:var(--v7-top)}
.v7-app .topbar{
  grid-template-columns:minmax(205px,248px) minmax(430px,1fr) minmax(310px,auto);
  min-height:var(--v7-top);
  padding:0 12px;
  gap:10px;
  background:rgba(8,12,18,.985);
  border-bottom-color:#312b27;
}
.v7-app .brand{gap:9px}.v7-app .logo{width:32px;height:32px;border-radius:10px;font-size:13px}
.v7-app .brand strong{font-size:12px}.v7-app .brand small{font-size:9px;color:#908781}
.v7-app .top-mid,.v7-app .top-right{gap:5px;min-width:0}
.v7-app .top-mid{justify-content:flex-start;overflow:visible}
.v7-app .top-right{justify-content:flex-end}
.v7-app .btn,.v7-app .icon-btn{border-radius:9px}
.v7-app .btn.sm{padding:7px 9px;font-size:10px}
.v7-app .icon-btn{width:32px;height:32px}
.v7-app .mode-toggle{padding:2px;border-color:#3a332e;background:#14110e}
.v7-app .mode-toggle button{padding:6px 9px;font-size:9px}
.v7-app .mode-toggle button.active{background:#312b27;color:#ffffff;box-shadow:inset 0 0 0 1px #463f39}
.v7-app #v4GuidedBtn,.v7-app #v5CompletionPill,.v7-app #v4HealthMini{display:none!important}
.v7-app #v6AssistantBtn{border:1px solid #9a604f;background:#32211c;color:#fdf0ec;padding:7px 10px;font-weight:700}
.v7-app #v6AssistantBtn.active{background:#ee9174;color:#ffffff;border-color:#ee9174}
.v7-app #smartResponsiveBtn{width:32px;min-width:32px;padding:0;font-size:0}
.v7-app #smartResponsiveBtn::before{content:"⚡";font-size:13px}
.v7-app #healthBtn{min-width:48px;padding:7px 8px;font-size:9px}
.v7-app #cmdBtn,.v7-app #assistantBtn{width:32px;height:32px}
.v7-app .save{display:inline-flex;align-items:center;gap:4px;font-size:0;min-width:15px}
.v7-app .save::before{content:"●";font-size:10px;color:#4bc783}
.v7-app .save:not(.ok)::before{color:#e3ab66}
.v7-app #exportBtn{box-shadow:0 8px 24px rgba(108,99,255,.18)}
.v7-app #auditBtn{color:#dcd6d2}

/* Beginner navigation is intentionally small. */
.v7-app .workspace{grid-template-columns:var(--v7-sidebar) minmax(0,1fr) var(--v7-inspector)}
.v7-app .sidebar,.v7-app .inspector{background:#181411}
.v7-app .side-tabs{padding:5px;gap:4px;display:flex;grid-template-columns:none;background:#181411;border-bottom-color:#312b27;overflow-x:auto;scrollbar-width:none}
.v7-app .side-tabs::-webkit-scrollbar{display:none}
.v7-app .side-tabs button{flex:1 0 auto;min-width:56px;border-radius:8px;border-bottom:0;padding:7px 8px;font-size:9px;color:#989089}
.v7-app .side-tabs button.active{background:#2c2622;color:#ffffff;border:0;box-shadow:inset 0 0 0 1px #4c433c}
.v7-app .panel{padding:12px}
.v7-app .panel-title{margin-bottom:8px}
.v7-app .panel h3,.v7-app .inspector h3{font-size:9px;letter-spacing:.1em}
.v7-app .hint{font-size:9px;line-height:1.45}
.v7-app .page-row,.v7-app .layer-row,.v7-app .component-row{margin:5px 0;padding:7px;border-radius:9px}
.v7-app .block-grid{gap:6px}.v7-app .block-card{min-height:68px;padding:9px}.v7-app .block-card span{font-size:16px}
.v7-app .block-card b{font-size:9px}.v7-app .block-card small{font-size:8px}

/* Canvas toolbar: cleaner, quieter and never overlays customer content. */
.v7-app .canvas{grid-template-rows:var(--v7-toolbar) 1fr;background:#13100d}
.v7-app .canvas-toolbar{min-height:var(--v7-toolbar);height:auto;padding:6px 10px;background:#1d1815;border-bottom-color:#312b27;gap:8px}
.v7-app .canvas-left,.v7-app .canvas-right{gap:5px;min-width:0}
.v7-app .canvas-left .hint{max-width:300px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v7-app .chip,.v7-app .url-chip{font-size:8px}
.v7-app .viewport-switch,.v7-app .zoom-control{border-color:#3e3731;background:#15120f}
.v7-app .viewport-switch button{padding:5px 7px;font-size:9px}
.v7-app .zoom-control button{height:28px;min-width:29px}
.v7-app #v6ContextBar{margin-left:auto}
.v7-app .canvas-scroll{padding:18px}
.v7-app .canvas-stage{border-radius:12px}

/* V7 focus mode: one click to inspect the customer site without editor clutter. */
.v7-focus .workspace{grid-template-columns:0 minmax(0,1fr) 0!important}
.v7-focus .sidebar,.v7-focus .inspector{opacity:0;pointer-events:none;overflow:hidden;border:0}
.v7-focus .canvas-scroll{padding:14px}
.v7-focus #v7FocusBtn{background:#ee9174;color:#ffffff;border-color:#ee9174}

.v7-focus-btn{height:30px;border:1px solid #403933;background:#1f1b18;color:#c6beb8;border-radius:8px;padding:0 9px;cursor:pointer;font-size:9px;white-space:nowrap}
.v7-focus-btn:hover{color:#ffffff;border-color:#6c6158}

/* Inspector becomes visually calmer. */
.v7-app .inspector{font-size:10px}
.v7-app .inspector>.inspector-head,.v7-app .inspector .inspector-head{padding-block:10px}
.v7-app .field{margin-bottom:8px}.v7-app .field label{font-size:9px}.v7-app .field input,.v7-app .field select,.v7-app .field textarea{font-size:10px;padding:7px 8px}
.v7-app .subhead{margin:12px 0 6px;font-size:8px}

/* Single-task layering: never show multiple large editor surfaces on top of each other. */
body.v7-modal-open .v4-guide,body.v7-modal-open .v6-assistant{opacity:0!important;pointer-events:none!important;visibility:hidden!important}
body.v7-preview-open .v4-guide,body.v7-preview-open .v6-assistant{display:none!important}
.v7-app .v6-assistant{z-index:85}
.v7-app .modal-backdrop{z-index:110!important}
.v7-app .toast{z-index:130!important}

/* Modal / dialog cleanup */
.v7-app .modal,.modal{max-height:min(88vh,820px);overflow:auto;overscroll-behavior:contain}
.v7-app .modal-backdrop{padding:14px}
.v7-app .modal-card{max-width:min(760px,calc(100vw - 28px));max-height:88vh}

/* V7 UI audit dialog */
.v7-ui-score{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:13px;border:1px solid #453c35;background:#1f1a16;border-radius:13px;margin-bottom:10px}
.v7-ui-score b{font-size:28px}.v7-ui-score span{font-size:10px;color:#aea39b}
.v7-ui-list{display:grid;gap:6px;max-height:48vh;overflow:auto}.v7-ui-item{padding:8px 10px;border:1px solid #413933;border-radius:9px;background:#1c1815;font-size:10px;line-height:1.35}.v7-ui-item.bad{border-color:#6b3537}.v7-ui-item.warn{border-color:#644929}.v7-ui-item.ok{border-color:#2a573e}

/* Better keyboard / accessibility */
.v7-app button:focus-visible,.v7-app input:focus-visible,.v7-app select:focus-visible,.v7-app textarea:focus-visible,.v7-app a:focus-visible{outline:2px solid #f3b19d!important;outline-offset:2px!important}
.v7-app button{touch-action:manipulation}

/* Responsive density */
@media(max-width:1500px){
  :root{--v7-sidebar:250px;--v7-inspector:290px}
  .v7-app .topbar{grid-template-columns:205px minmax(380px,1fr) minmax(280px,auto)}
  .v7-app #projectBtn,.v7-app #auditBtn{font-size:0;width:32px;padding:0}
  .v7-app #projectBtn::before{content:"▣";font-size:12px}.v7-app #auditBtn::before{content:"◎";font-size:12px}
  .v7-app .canvas-left .hint{display:none}
}
@media(max-width:1280px){
  :root{--v7-sidebar:232px;--v7-inspector:270px}
  .v7-app .topbar{grid-template-columns:175px minmax(360px,1fr) auto}
  .v7-app .brand small{display:none}
  .v7-app #healthBtn{display:none}
  .v7-app #cmdBtn{display:none}
  .v7-app .canvas-scroll{padding:12px}
}
@media(max-width:1020px){
  .v7-app .topbar{grid-template-columns:minmax(150px,1fr) auto;grid-template-rows:auto auto;padding-block:5px}
  .v7-app .top-mid{grid-column:1/-1;order:3;overflow-x:auto;padding-bottom:1px}
  .v7-app .top-right{grid-column:2;grid-row:1}
  .v7-app .workspace{grid-template-columns:220px minmax(0,1fr) 0}
  .v7-app .inspector{opacity:0;pointer-events:none;overflow:hidden}
  .v7-app #auditBtn,.v7-app #projectBtn,.v7-app #assistantBtn{display:none}
}
@media(max-width:760px){
  :root{--v7-top:98px}
  .v7-app .topbar{grid-template-columns:1fr auto;gap:6px}
  .v7-app .brand-text strong{max-width:150px}
  .v7-app .workspace{grid-template-columns:0 minmax(0,1fr) 0}
  .v7-app .sidebar,.v7-app .inspector{opacity:0;pointer-events:none;overflow:hidden}
  .v7-app .canvas-toolbar{flex-wrap:wrap}
  .v7-app .canvas-right{width:100%;justify-content:space-between}
  .v7-app .canvas-scroll{padding:6px}
  .v7-app #smartResponsiveBtn,.v7-app #projectBtn,.v7-app #auditBtn,.v7-app #cmdBtn,.v7-app #assistantBtn{display:none}
  .v7-app #v6AssistantBtn{padding-inline:8px}
  .v7-app .mode-toggle button{padding-inline:7px}
  .v7-app #exportBtn{padding-inline:9px}
}
/* Minimum comfortable hit areas for all persistent editor chrome. */
.v7-app .mode-toggle button{min-height:28px}
.v7-app #smartResponsiveBtn,.v7-app #projectBtn,.v7-app #auditBtn{height:30px;min-height:30px}
.v7-app .viewport-switch button{min-height:28px}
/* Remove redundant status chrome. Quality remains available through “Vérifier”. */
.v7-app #healthBtn{display:none!important}
.v7-app.v7-mode-beginner #cmdBtn{display:none!important}
@media(max-width:560px){
  .v7-app #v6ContextBar{display:none!important}
  .v7-app .canvas-stage.mobile{width:calc(100vw - 12px);flex-basis:calc(100vw - 12px);border-radius:8px}
}