/* ============================================================
   app.css — Feuille de style principale ArboreApp
   Suit le Design System Nexus + spécificités mobile-first
   ============================================================ */

/* ── Variables de design (reprises de config) ─────────────── */
:root, [data-theme="light"] {
  --color-bg:             #f7f6f2;
  --color-surface:        #f9f8f5;
  --color-surface-2:      #fbfbf9;
  --color-border:         #d4d1ca;
  --color-text:           #28251d;
  --color-text-muted:     #7a7974;
  --color-primary:        #01696f;
  --color-primary-hover:  #0c4e54;
  --color-error:          #a12c7b;
  --color-success:        #437a22;
  --radius-sm: 0.375rem; --radius-md: 0.5rem;
  --radius-lg: 0.75rem;  --radius-full: 9999px;
  --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem;
  --space-4:1rem;    --space-6:1.5rem; --space-8:2rem;
  --text-xs:clamp(0.75rem,0.7rem + 0.25vw,0.875rem);
  --text-sm:clamp(0.875rem,0.8rem + 0.35vw,1rem);
  --text-base:clamp(1rem,0.95rem + 0.25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem + 0.75vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --shadow-md: 0 4px 12px oklch(0.2 0.01 80 / 0.08);
  --transition: 180ms cubic-bezier(0.16,1,0.3,1);
  --font-body: 'Satoshi', 'Inter', sans-serif;
  --font-display: 'Cabinet Grotesk', 'Satoshi', sans-serif;
}
[data-theme="dark"] {
  --color-bg:#171614; --color-surface:#1c1b19; --color-surface-2:#201f1d;
  --color-border:#393836; --color-text:#cdccca; --color-text-muted:#797876;
  --color-primary:#4f98a3; --color-primary-hover:#227f8b;
  --color-error:#d163a7; --color-success:#6daa45;
  --shadow-md:0 4px 12px oklch(0 0 0 / 0.3);
}
@media (prefers-color-scheme:dark) { :root:not([data-theme]) {
  --color-bg:#171614; --color-surface:#1c1b19; --color-surface-2:#201f1d;
  --color-border:#393836; --color-text:#cdccca; --color-text-muted:#797876;
  --color-primary:#4f98a3; --color-error:#d163a7; --color-success:#6daa45;
}}

/* ── Reset + Base ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:none;text-size-adjust:none;
     -webkit-font-smoothing:antialiased;height:100%}
body{font-family:var(--font-body);font-size:var(--text-base);
     color:var(--color-text);background:var(--color-bg);
     height:100%;overflow:hidden; /* L'arbre prend tout l'écran */
     display:flex;flex-direction:column}
button{cursor:pointer;background:none;border:none;font:inherit;color:inherit}
input,select,textarea{font:inherit;color:inherit;background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4);width:100%;
  transition:border-color var(--transition),box-shadow var(--transition)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--color-primary);
  box-shadow:0 0 0 3px oklch(from var(--color-primary) l c h / 0.2)}
label{display:block;font-size:var(--text-sm);font-weight:600;
      margin-bottom:var(--space-2);color:var(--color-text-muted)}
img{display:block;max-width:100%}

/* ── Layout principal ─────────────────────────────────────── */
#app{display:flex;flex-direction:column;height:100vh;height:100dvh}

/* ── Topbar ───────────────────────────────────────────────── */
#topbar{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  background:var(--color-surface);
  border-bottom:1px solid var(--color-border);
  z-index:100;flex-shrink:0;
  box-shadow:var(--shadow-md)
}
#topbar .app-logo{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--text-lg);color:var(--color-primary);
  letter-spacing:-0.03em;flex-shrink:0
}
#search-bar{
  flex:1;max-width:300px;font-size:var(--text-sm);
  padding:var(--space-2) var(--space-3)
}
.topbar-actions{display:flex;align-items:center;gap:var(--space-2);margin-left:auto}
.btn-icon{
  width:40px;height:40px;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
  color:var(--color-text-muted);transition:background var(--transition),color var(--transition)
}
.btn-icon:hover{background:var(--color-surface-2);color:var(--color-text)}
.btn-icon:active{background:var(--color-border)}

/* ── Canvas de l'arbre ────────────────────────────────────── */
#tree-canvas{
  flex:1;width:100%;display:block;
  touch-action:none; /* Délègue toutes les interactions tactiles à notre JS */
  cursor:grab
}
#tree-canvas:active{cursor:grabbing}

/* ── Barre d'outils flottante (bas de l'écran) ───────────── */
#tree-toolbar{
  position:fixed;bottom:var(--space-6);left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:var(--space-2);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  padding:var(--space-2) var(--space-4);
  box-shadow:var(--shadow-md);z-index:50
}
.toolbar-btn{
  padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);
  font-size:var(--text-sm);font-weight:500;
  color:var(--color-text-muted);
  transition:all var(--transition);white-space:nowrap
}
.toolbar-btn:hover{background:var(--color-surface-2);color:var(--color-text)}
.toolbar-btn.active{background:var(--color-primary);color:#fff}
.toolbar-sep{width:1px;height:20px;background:var(--color-border)}

/* ── Indicateur sync ──────────────────────────────────────── */
#sync-indicator{
  position:fixed;top:var(--space-4);right:var(--space-4);
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);
  font-size:var(--text-xs);font-weight:500;z-index:200;
  display:flex;align-items:center;gap:var(--space-2);
  transition:opacity var(--transition);pointer-events:none
}
#sync-indicator.hidden{opacity:0}
#sync-indicator.online{background:oklch(from var(--color-success) l c h / 0.15);
  color:var(--color-success)}
#sync-indicator.offline{background:oklch(from var(--color-error) l c h / 0.15);
  color:var(--color-error)}
#sync-indicator.syncing{background:oklch(from var(--color-primary) l c h / 0.15);
  color:var(--color-primary)}
.sync-dot{width:8px;height:8px;border-radius:50%;background:currentColor;
  animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}

/* ── Modal (fiche + édition + conflits) ───────────────────── */
.modal-overlay{
  position:fixed;inset:0;background:oklch(0 0 0 / 0.5);
  z-index:300;display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity var(--transition)
}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal-sheet{
  background:var(--color-surface);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  width:100%;max-width:600px;max-height:92dvh;
  overflow-y:auto;padding:var(--space-6) var(--space-4) var(--space-8);
  transform:translateY(100%);transition:transform 350ms cubic-bezier(0.16,1,0.3,1)
}
.modal-overlay.open .modal-sheet{transform:translateY(0)}
.modal-handle{
  width:40px;height:4px;border-radius:var(--radius-full);
  background:var(--color-border);margin:0 auto var(--space-6)
}
.modal-title{font-size:var(--text-lg);font-weight:700;margin-bottom:var(--space-6)}

/* ── Fiche personne ───────────────────────────────────────── */
.person-card-header{display:flex;gap:var(--space-4);align-items:flex-start;margin-bottom:var(--space-6)}
.person-card-photo{
  width:72px;height:72px;border-radius:50%;object-fit:cover;
  background:var(--color-surface-2);border:2px solid var(--color-border);
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:var(--text-xl);color:var(--color-text-muted)
}
.person-card-info{flex:1}
.person-card-name{font-size:var(--text-xl);font-weight:700;line-height:1.2;margin-bottom:var(--space-1)}
.person-card-dates{font-size:var(--text-sm);color:var(--color-text-muted)}
.person-card-section{margin-top:var(--space-4)}
.person-card-section h3{font-size:var(--text-sm);font-weight:600;
  color:var(--color-text-muted);text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:var(--space-2)}
.person-card-section p{font-size:var(--text-base);color:var(--color-text)}
.relation-chip{
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);
  background:oklch(from var(--color-primary) l c h / 0.1);
  color:var(--color-primary);font-size:var(--text-sm);
  cursor:pointer;transition:background var(--transition);margin:var(--space-1)
}
.relation-chip:hover{background:oklch(from var(--color-primary) l c h / 0.2)}

/* ── Formulaire d'édition ─────────────────────────────────── */
.form-group{margin-bottom:var(--space-4)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
@media(max-width:400px){.form-row{grid-template-columns:1fr}}
.photo-upload-zone{
  border:2px dashed var(--color-border);border-radius:var(--radius-lg);
  padding:var(--space-6);text-align:center;cursor:pointer;
  transition:border-color var(--transition),background var(--transition)
}
.photo-upload-zone:hover{border-color:var(--color-primary);
  background:oklch(from var(--color-primary) l c h / 0.05)}

/* ── Menu contextuel (long press) ────────────────────────── */
#context-menu{
  position:fixed;z-index:400;
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
  overflow:hidden;min-width:200px;
  opacity:0;pointer-events:none;transform:scale(0.95);
  transition:all var(--transition);transform-origin:top left
}
#context-menu.open{opacity:1;pointer-events:all;transform:scale(1)}
.context-item{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-4);font-size:var(--text-base);
  cursor:pointer;transition:background var(--transition)
}
.context-item:hover{background:var(--color-surface-2)}
.context-item.danger{color:var(--color-error)}
.context-item svg{width:18px;height:18px;flex-shrink:0}

/* ── Boutons principaux ───────────────────────────────────── */
.btn{padding:var(--space-3) var(--space-6);border-radius:var(--radius-md);
  font-size:var(--text-sm);font-weight:600;
  transition:all var(--transition);display:inline-flex;
  align-items:center;gap:var(--space-2)}
.btn-primary{background:var(--color-primary);color:#fff}
.btn-primary:hover{background:var(--color-primary-hover)}
.btn-secondary{background:var(--color-surface-2);color:var(--color-text);
  border:1px solid var(--color-border)}
.btn-secondary:hover{background:var(--color-surface-2)}
.btn-danger{background:var(--color-error);color:#fff}
.btn-full{width:100%;justify-content:center}
.btn-row{display:flex;gap:var(--space-3);margin-top:var(--space-6)}

/* ── Écran de connexion ───────────────────────────────────── */
#login-screen{
  position:fixed;inset:0;background:var(--color-bg);
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:var(--space-6);z-index:1000
}
#login-screen.hidden{display:none}
.login-card{
  width:100%;max-width:380px;background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:var(--space-8);box-shadow:var(--shadow-md)
}
.login-logo{text-align:center;margin-bottom:var(--space-8)}
.login-logo span{font-family:var(--font-display);font-size:var(--text-xl);
  font-weight:700;color:var(--color-primary)}

/* ── Toast de notification ────────────────────────────────── */
#toast-container{position:fixed;bottom:100px;left:50%;
  transform:translateX(-50%);z-index:500;
  display:flex;flex-direction:column;gap:var(--space-2);align-items:center}
.toast{
  padding:var(--space-3) var(--space-5);border-radius:var(--radius-full);
  font-size:var(--text-sm);font-weight:500;color:#fff;
  box-shadow:var(--shadow-md);animation:toastIn .3s ease;
  pointer-events:none
}
.toast.success{background:var(--color-success)}
.toast.error  {background:var(--color-error)}
.toast.info   {background:var(--color-primary)}
@keyframes toastIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ── Résolution de conflits ───────────────────────────────── */
.conflict-fields{display:flex;flex-direction:column;gap:var(--space-3)}
.conflict-field{
  border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden
}
.conflict-field-label{
  padding:var(--space-2) var(--space-3);background:var(--color-surface-2);
  font-size:var(--text-xs);font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;color:var(--color-text-muted)
}
.conflict-options{display:grid;grid-template-columns:1fr 1fr}
.conflict-option{
  padding:var(--space-3);cursor:pointer;font-size:var(--text-sm);
  transition:background var(--transition);border:2px solid transparent
}
.conflict-option:first-child{border-right:1px solid var(--color-border)}
.conflict-option:hover{background:oklch(from var(--color-primary) l c h / 0.08)}
.conflict-option.selected{border-color:var(--color-primary);
  background:oklch(from var(--color-primary) l c h / 0.1)}
.conflict-option-label{font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:var(--space-1)}
.conflict-option-value{font-weight:600;color:var(--color-text)}

/* ── Écran vide ───────────────────────────────────────────── */
#empty-state{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--space-4);
  pointer-events:none;text-align:center;padding:var(--space-8)
}
#empty-state.hidden{display:none}
#empty-state svg{width:64px;height:64px;color:var(--color-text-muted);opacity:.4}
#empty-state p{color:var(--color-text-muted);max-width:28ch}
#empty-state button{pointer-events:all}