/* =====================================================================
   CV STUDIO  LAYOUT (écran uniquement)
   Coque « maquette » : en-tête épuré · zone 3 colonnes
   [ carte des sections · section active · aperçu ].
   ===================================================================== */
.studio{display:grid;grid-template-rows:auto 1fr;height:100vh;overflow:hidden;background:var(--surface)}

/* ---------- Zone de travail : 3 colonnes ---------- */
.work{display:grid;grid-template-columns:264px minmax(320px,1fr) minmax(0,1.05fr);min-height:0;position:relative}

/* Colonne 1 : carte des sections */
.smap{overflow-y:auto;min-height:0;border-right:1px solid var(--cl);background:var(--surface);padding:16px 12px 40px}
.smap::-webkit-scrollbar{width:9px}
.smap::-webkit-scrollbar-thumb{background:var(--cl2);border-radius:9px;border:3px solid var(--surface)}

/* Colonne 2 : section active (édition) */
.edit{overflow-y:auto;min-height:0;border-right:1px solid var(--cl);background:var(--surface);padding:0 0 90px}
.edit::-webkit-scrollbar{width:9px}
.edit::-webkit-scrollbar-thumb{background:var(--cl2);border-radius:9px;border:3px solid var(--surface)}

/* Colonne 3 : scène d'aperçu */
.stage{overflow:auto;min-height:0;padding:0 30px 60px;background:var(--paper)}
.zoomwrap{display:flex;flex-direction:column;align-items:center;gap:0;width:max-content;max-width:100%;margin:0 auto}

/* ---------- Barre d'action mobile (hub) ---------- */
.mbar{display:none}

/* ---------- Responsive (mobile-first : v1 web) ---------- */
/* Mobile = hub-and-spoke : on montre la CARTE (hub) OU la SECTION active, pas les deux.
   body.m-section = on est dans une section ; sinon on est sur le hub. */
@media (max-width:900px){
  .studio{height:100vh}
  .work{grid-template-columns:1fr;grid-template-rows:1fr;min-height:0;position:relative;overflow:hidden}
  /* Hub (carte) et section : superposés, on glisse de l'un à l'autre */
  .smap,.edit{position:absolute;inset:0;display:block;border:none;overflow-y:auto;background:var(--surface);
    transition:transform .28s ease, opacity .28s ease;will-change:transform;-webkit-overflow-scrolling:touch}
  .smap{padding:18px 14px 96px;transform:translateX(0);opacity:1;z-index:1}
  .edit{padding:8px 0 96px;transform:translateX(100%);opacity:0;z-index:2;pointer-events:none}
  body.m-section .smap{transform:translateX(-12%);opacity:.3;pointer-events:none}
  body.m-section .edit{transform:translateX(0);opacity:1;pointer-events:auto}

  /* Barre d'action fixe en bas, visible seulement sur le hub */
  .mbar{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:46;padding:10px 14px;
    background:linear-gradient(to top,var(--surface) 82%,transparent 100%);border-top:1px solid var(--cl)}
  .mbar .btn{flex:1;justify-content:center;padding:13px}
  body.m-section .mbar{display:none}

  /* Aperçu : glisse depuis le bas */
  .stage{display:block;position:fixed;inset:54px 0 0;z-index:50;padding:0 16px 30px;background:var(--paper);
    transform:translateY(100%);opacity:0;pointer-events:none;transition:transform .3s ease, opacity .3s ease}
  body.show-preview .stage{transform:translateY(0);opacity:1;pointer-events:auto}
  body.show-preview .mbar{display:none}
}