/* Fichier: /asset/css/app.css */
/* ============================================================
   Design system & bases
   ============================================================ */
:root{
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'Fira Code','Courier New',monospace;

  /* couleurs */
  --bg-primary:#f8fafc;
  --bg-secondary:#ffffff;
  --bg-tertiary:#f1f5f9;
  --text-primary:#0f172a;
  --text-secondary:#475569;
  --text-muted:#64748b;
  --border-color:#e2e8f0;
  --accent-color:#3b82f6;
  --accent-color-hover:#2563eb;
  --danger-color:#ef4444;
  --success-color:#22c55e;
  --shadow-color:rgba(0,0,0,.1);

  /* échelle */
  --radius-4: .25rem;
  --radius-6: .375rem;
  --radius-8: .5rem;
  --radius-12: .75rem;

  --focus-ring: 0 0 0 3px rgba(59,130,246,.35);

  /* z-index */
  --z-topbar: 40;
  --z-dropdown: 50;
  --z-modal: 100;
}

[data-theme="dark"]{
  --bg-primary:#0f172a;
  --bg-secondary:#1e293b;
  --bg-tertiary:#334155;
  --text-primary:#f1f5f9;
  --text-secondary:#cbd5e1;
  --text-muted:#94a3b8;
  --border-color:#334155;
  --accent-color:#60a5fa;
  --accent-color-hover:#3b82f6;
  --shadow-color:rgba(0,0,0,.2);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  background-color:var(--bg-primary);
  color:var(--text-primary);
  line-height:1.6;
  display:flex;
  flex-direction:column;
  min-height:100dvh;
  transition:background-color .3s,color .3s;
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
  overscroll-behavior-y:none;
  overflow-x: hidden;
}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ============================================================
   Boutons & inputs
   ============================================================ */
.btn,.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.5rem 1rem; border-radius:var(--radius-8);
  border:1px solid var(--border-color);
  background-color:var(--bg-secondary);
  color:var(--text-primary); font-weight:600; cursor:pointer;
  transition:background-color .2s, box-shadow .2s, transform .02s ease-in;
  box-shadow:0 1px 2px var(--shadow-color);
}
.btn:hover{background-color:var(--bg-tertiary)}
.btn:active{transform:translateY(1px)}
.btn:disabled,.icon-btn:disabled{opacity:.5;cursor:not-allowed}
.btn--small{padding:.25rem .75rem; font-size:.875rem}
.btn--danger{background-color:var(--danger-color); color:#fff; border-color:var(--danger-color)}
.btn--danger:hover{background-color:#dc2626}
.icon-btn{padding:.5rem; width:2.75rem; height:2.75rem; min-width:44px; min-height:44px}
.icon-btn svg{width:1.5rem; height:1.5rem; fill:currentColor}
.btn:focus-visible,.icon-btn:focus-visible,
select:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:none; box-shadow:var(--focus-ring);
}
.field{display:flex; flex-direction:column; gap:.25rem}
.field span,.field label{font-size:.875rem; font-weight:500; color:var(--text-secondary); text-align:left; margin-bottom:.25rem}
select,input[type="email"],input[type="password"]{
  padding:.45rem .8rem; border-radius:var(--radius-8);
  border:1px solid var(--border-color);
  background-color:var(--bg-secondary); color:var(--text-primary);
  font-family:inherit; font-size:.9rem; min-width:150px; width:100%;
}
.badge{
  padding:.25rem .75rem; border-radius:9999px; font-size:.75rem; font-weight:600;
  background-color:var(--bg-tertiary); color:var(--text-secondary);
  display:flex; align-items:center; gap:.5rem
}
.badge[data-status="saved"]::before{content:'✓'; color:var(--success-color)}
.badge[data-status="editing"]::before{content:'●'; color:var(--danger-color)}
.badge[data-status="saving"]::before{content:'…'; color:var(--accent-color)}
.badge[data-status="error"]::before{content:'!'; color:var(--danger-color)}
.badge[data-status="paused"]::before{content:'⏸'; color:var(--text-muted)}

/* ============================================================
   Cartes & modules
   ============================================================ */
.card{
  background-color:var(--bg-secondary); border:1px solid var(--border-color);
  border-radius:var(--radius-12); box-shadow:0 2px 4px var(--shadow-color); overflow:hidden
}
.card__header{padding:.75rem 1rem; border-bottom:1px solid var(--border-color); font-weight:600; text-align:center}
.card__body{padding:1.25rem}

/* ============================================================
   Layout & éditeur
   ============================================================ */
.editor-container{
  background-color:var(--bg-secondary); border-radius:var(--radius-12);
  padding:1rem; display:flex; flex-direction:column; height:100%;
  border:1px solid var(--border-color);
}
.editor-meta{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font-size:.8rem; color:var(--text-muted);
  padding:.5rem 1rem; border-bottom:1px solid var(--border-color)
}
.editor-meta__center{display:flex; gap:1rem}
.editor{
  flex:1; width:100%; padding:1.25rem; border:none; background:none;
  color:var(--text-primary); font-family:var(--font-sans);
  font-size: clamp(1rem, 1vw + .8rem, 1.1rem); line-height:1.7;
  resize:none; outline:none; overscroll-behavior:contain;
}
#storyboard-editor{padding:1.25rem}
#storyboard-gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:1rem}
.storyboard-item{
  border:1px solid var(--border-color); border-radius:var(--radius-8);
  background-color:var(--bg-tertiary); height:120px; display:flex;
  align-items:center; justify-content:center; color:var(--text-muted); font-size:.8rem
}
.storyboard-item img{width:100%; height:100%; object-fit:cover; border-radius:var(--radius-8)}

.options{
  width:100%; border-left:none;
  background-color:var(--bg-primary); display:flex; flex-direction:column;
}
.tabs{
  display:flex; border-bottom:1px solid var(--border-color);
  padding:0 1rem; position:sticky; top:0; background-color:var(--bg-primary); z-index:1
}
.tab{
  padding:.75rem 1rem; border:none; background:none; color:var(--text-secondary);
  cursor:pointer; border-bottom:2px solid transparent; transition:color .2s,border-color .2s
}
.tab:hover{color:var(--text-primary)}
.tab.is-active{color:var(--accent-color); border-bottom-color:var(--accent-color); font-weight:600}
.op-panel{display:none; padding:1.5rem; flex-direction:column; gap:1.5rem}
.op-panel.is-active{display:flex}
.panel__header{display:flex; justify-content:space-between; align-items:center}
.panel__title{font-size:1.125rem; font-weight:600}
.panel__actions{display:flex; gap:.5rem}
.grid{display:grid; gap:.75rem}
.grid--2{grid-template-columns:repeat(2,1fr)}
textarea{
  width:100%; padding:.5rem; border-radius:var(--radius-8);
  border:1px solid var(--border-color); background-color:var(--bg-tertiary);
  color:var(--text-primary); font-family:inherit; resize:vertical
}

/* ============================================================
   Modales
   ============================================================ */
.modal{
  position:fixed; inset:0; z-index:var(--z-modal);
  background-color:rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .2s
}
.modal.is-active{opacity:1; pointer-events:auto}
.modal__dialog{
  background-color:var(--bg-secondary);
  border-radius:var(--radius-12);
  padding:1.5rem; width:92vw; max-width:var(--max-width, 420px);
  box-shadow:0 5px 15px var(--shadow-color);
  transform:scale(.95); transition:transform .2s;
  max-height:90dvh; overflow:auto;
}
.modal.is-active .modal__dialog{transform:scale(1)}
.modal__header{display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem}
.modal__title{font-size:1.125rem; font-weight:600}
.modal__body{margin-bottom:1.25rem; color:var(--text-secondary)}
.modal__footer{display:flex; justify-content:flex-end; gap:.5rem}

/* ============================================================
   Menu utilisateur
   ============================================================ */
.user-menu{position:relative}
.user-menu__button{
  display:flex; align-items:center; background-color:var(--bg-tertiary);
  border:none; padding:.5rem 1rem; border-radius:var(--radius-8); cursor:pointer;
  color:var(--text-primary); font-weight:600; min-height:44px
}
.user-menu__button:hover{background-color:var(--border-color)}
.user-menu__dropdown{
  display:none; position:absolute; top:100%; right:0; margin-top:.5rem;
  background-color:var(--bg-secondary); border:1px solid var(--border-color);
  border-radius:var(--radius-8); box-shadow:0 4px 6px var(--shadow-color);
  z-index:var(--z-dropdown); min-width:170px; overflow:hidden
}
.user-menu__dropdown.is-open{display:block}
.user-menu__dropdown a{display:block; padding:.75rem 1rem; color:var(--text-primary); text-decoration:none; font-size:.9rem}
.user-menu__dropdown a:hover{background-color:var(--bg-tertiary)}

/* ============================================================
   Layout & Panneaux épinglés
   ============================================================ */

/*
/* —————————————————————————————————————————————
   Layout en mode volet droit épinglé
   ————————————————————————————————————————————— */
body.right-pinned .layout {
    display: grid;
    height: 100vh;      /* fallback */
    height: 100dvh;     /* corrige les barres d'adresse mobiles */
    grid-template-columns: 1fr minmax(320px, 25%);
    grid-template-rows: auto auto 1fr; /* header, menu, contenu (qui remplit) */
    grid-template-areas:
        "header header"
        "menu   menu"
        "main   aside";
    overflow: hidden;   /* on désactive le scroll global : chaque zone scrolle */
}

/* Zones du grid */
body.right-pinned .topbar    { grid-area: header; }
body.right-pinned #menuPanel { grid-area: menu; }

/* ⚠️ Important avec Grid/Flex : permettre la contraction pour que le scroll interne fonctionne */
body.right-pinned .workspace,
body.right-pinned #toolsDrawer {
    min-height: 0;  /* indispensable pour que l'overflow interne prenne effet */
}

/* Zone éditeur (gauche) : scrolle en interne */
body.right-pinned .workspace {
    grid-area: main;
    height: auto;                /* pas de 100% qui bloque parfois le scroll */
    overflow-y: auto;            /* ascenseur interne */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;    /* évite le saut de mise en page */
}

/* Volet d’outils épinglé (droite) : scrolle en interne */
body.right-pinned #toolsDrawer {
    grid-area: aside;
    position: static;
    width: auto;
    height: auto;                /* la cellule Grid limite déjà la hauteur */
    min-height: 0;               /* autorise la zone à scroller */
    overflow-y: auto;            /* ✅ ascenseur interne restauré */
    display: flex;               /* structure verticale éventuelle */
    flex-direction: column;
    transform: none !important;
    box-shadow: none;
    border-left: 1px solid var(--border-color);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

/* Masque le bouton "Outils" quand le volet est épinglé */
body.right-pinned #btnTools { display: none; }

/* —————————————————————————————————————————————
   Styles du drawer en mode non épinglé (overlay)
   ————————————————————————————————————————————— */
#toolsDrawer {
  position: fixed;
  top: 3.2rem;
  right: 0;
  width: min(380px, 92vw);
  height: calc(100% - 3.2rem);
  background: var(--bg-primary);
  border-left: 1px solid var(--border-color);
  box-shadow: -10px 0 30px var(--shadow-color);
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 50;
  display: flex;
  flex-direction: column;
}
#toolsDrawer.open { transform: translateX(0); }
#toolsDrawer[aria-hidden="true"]:not(.open) { display: none; }
#toolsDrawer[aria-hidden="false"] { display: flex; }

/* S'assure que le curseur change uniquement si désactivé */
.icon-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none; /* Empêche tout clic */
}

/* Style pour vos nouveaux boutons de sélection quand ils sont actifs */
.icon-btn.active {
    background-color: rgba(0, 123, 255, 0.2);
    border: 1px solid #007bff;
}
/* Style pour le menu user spécifiquement en mode lecture */
.reader-user-actions {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
}

/* On change éventuellement la couleur si le mode lecture est sombre */
.reader-overlay .user-menu-name {
    color: var(--text-color);
    background: rgba(0,0,0,0.1);
    padding: 5px 10px;
    border-radius: 20px;
}