@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');

:root {
  --wood-dark:  #173E54;
  --wood-mid:   #6F6457;
  --wood-warm:  #9C8A76;
  --wood-light: #BBAE9D;
  --wood-pale:  #F1ECE5;
  --wood-bg:    #F6F4F1;
  --accent:     #235873;
  --accent-soft:#E9F0F4;
  --green:      #2D7A4F;
  --green-soft: #E8F5EE;
  --red:        #C0392B;
  --orange:     #D4860A;
  --blue:       #173E54;
  --blue-soft:  #E9F0F4;
  --border:     #E5E0D8;
  --text:       #26323B;
  --text-muted: #857B70;
  --white:      #FFFFFF;
  --sidebar-w:  260px;
  --header-h:   54px;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:'DM Sans', 'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', sans-serif; background:var(--wood-bg); color:var(--text); overflow:hidden; height:100vh; }

/* Sélection de texte vers la gauche = « page précédente » (trackpad PC) :
   quand un glissement horizontal déborde d'un conteneur, le navigateur le
   prenait pour le geste de navigation arrière et faisait perdre l'écran.
   overscroll-behavior-x:none coupe cette interprétation, sans toucher au
   défilement interne ni à la sélection. (Correctif 2026-07-20)

   ÉTENDU À TOUS LES ÉLÉMENTS (recette du 20/07) : la règle sur html/body ne
   suffisait pas — quand le geste part de l'INTÉRIEUR d'une zone à défilement
   horizontal (tableau kanban .kanban-board, tableaux larges…), le débordement
   naît au bord de CETTE zone et le navigateur déclenche la navigation sans
   consulter la racine. La propriété n'a d'effet que sur les conteneurs
   défilants : aucun impact sur le reste. */
*, html, body { overscroll-behavior-x: none; }

.btn { padding:8px 16px; border-radius:8px; border:none; font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; transition:all 0.15s; display:inline-flex; align-items:center; gap:6px; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:#D4860A; }
.btn-secondary { background:var(--white); color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover { background:var(--wood-pale); }
.btn-danger { background:var(--red); color:#fff; }
.btn-sm { padding:5px 10px; font-size:11px; }
.btn-ghost { background:transparent; color:var(--text-muted); border:1px solid var(--border); }

.tag { display:inline-flex; align-items:center; font-size:11px; font-weight:700; padding:2px 7px; border-radius:6px; }
.tag-red { background:#FBEAE8; color:var(--red); }
.tag-orange { background:#FAEEDA; color:var(--orange); }
.tag-green { background:var(--green-soft); color:var(--green); }
.tag-blue { background:var(--blue-soft); color:var(--blue); }
.tag-wood { background:var(--wood-pale); color:var(--wood-warm); }

.prio-dot { display:inline-block; width:10px; height:10px; border-radius:50%; flex-shrink:0; vertical-align:middle; }
.prio-0 { background:var(--red); }
.prio-1 { background:var(--orange); }
.prio-2 { background:var(--wood-light); }
.prio-3 { background:#BBAE9D; }

.loading-state { padding:60px; text-align:center; color:var(--text-muted); font-size:13px; }
.empty-state { padding:40px; text-align:center; color:var(--text-muted); font-size:13px; }

input, select, textarea { font-family:inherit; }

.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); display:none; align-items:center; justify-content:center; z-index:9000; }
.modal-overlay.open { display:flex; }
.modal-box { background:#fff; border-radius:12px; padding:28px; width:100%; max-width:560px; max-height:90vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.modal-title { font-size:15px; font-weight:700; color:var(--wood-dark); margin-bottom:20px; display:flex; justify-content:space-between; align-items:center; }
.modal-close { background:none; border:none; font-size:22px; cursor:pointer; color:var(--text-muted); }
.form-group { margin-bottom:14px; }
.form-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); display:block; margin-bottom:5px; }
.form-input { width:100%; padding:9px 12px; border:1.5px solid var(--border); border-radius:8px; font-size:13px; outline:none; transition:border-color 0.15s; }
.form-input:focus { border-color:var(--accent); }
.form-select { width:100%; padding:9px 12px; border:1.5px solid var(--border); border-radius:8px; font-size:13px; background:#fff; outline:none; }
.form-textarea { width:100%; padding:9px 12px; border:1.5px solid var(--border); border-radius:8px; font-size:13px; outline:none; min-height:120px; resize:vertical; }