/* ---------- ARCHIVE DES TÂCHES ----------
   Même ossature que .notif-page (entête fixe + contenu défilant) ; seuls les
   filtres et les lignes d'historique sont propres à cet écran. */
.archive-filters{display:flex; gap:8px; padding:12px 18px; border-bottom:1px solid var(--border); flex-shrink:0; align-items:center;}
.archive-seg{display:flex; background:var(--bg); border-radius:999px; padding:3px; flex:1; min-width:0;}
.archive-seg-btn{flex:1 1 0; min-width:0; border:none; background:none; border-radius:999px; padding:7px 6px; font-size:12px; font-weight:600; color:var(--ink-soft); font-family:'Inter',sans-serif; white-space:nowrap;}
.archive-seg-btn.active{background:var(--action); color:#fff;}
.archive-space-select{flex-shrink:0; max-width:44%; border:1px solid var(--border); background:var(--surface); border-radius:999px; padding:8px 10px; font-size:12px; font-weight:600; color:var(--ink); font-family:'Inter',sans-serif;}
.archive-space-select:focus{outline:none; border-color:var(--ink-soft);}

/* Filtres regroupés dans un seul menu : un libellé, un bouton qui résume la
   sélection, et la liste des filtres à ajouter dedans. Rien ne dépasse du
   cadre, et l'écran reste vide tant qu'on ne filtre pas. */
.archive-filter-row{display:flex; align-items:center; gap:10px; padding:11px 18px; border-bottom:1px solid var(--border); flex-shrink:0;}
.archive-filter-label{font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); flex-shrink:0;}
.archive-filter-wrap{position:relative; flex:1; min-width:0;}
.archive-filter-btn{width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; border:1px solid var(--border); background:var(--surface); border-radius:10px; padding:9px 12px; font-size:13px; font-weight:600; color:var(--ink); font-family:'Inter',sans-serif; text-align:left;}
.archive-filter-btn span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.archive-filter-btn svg{width:11px; height:11px; flex-shrink:0; color:var(--ink-soft); transition:transform .15s;}
.archive-filter-btn.open svg{transform:rotate(180deg);}
.archive-filter-btn.has-filter{border-color:var(--accent); color:var(--accent);}
.archive-filter-btn:hover{border-color:var(--ink-soft);}
.archive-filter-clear{flex-shrink:0; border:none; background:none; font-size:11.5px; color:var(--ink-soft); text-decoration:underline; padding:0;}
.archive-filter-clear:hover{color:#D6362C;}

.archive-filter-menu{display:none; position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30;
  background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:6px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.35); max-height:56vh; overflow-y:auto;}
.archive-filter-menu.open{display:block;}
.archive-menu-group{font-family:'IBM Plex Mono',monospace; font-size:9px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); padding:8px 10px 4px;}
.archive-menu-item{width:100%; display:flex; align-items:center; gap:9px; border:none; background:none; border-radius:8px; padding:9px 10px; font-size:13px; color:var(--ink); font-family:'Inter',sans-serif; text-align:left;}
.archive-menu-item:hover{background:var(--bg);}
.archive-menu-item.active{color:var(--accent); font-weight:600;}
.archive-menu-check{width:13px; height:13px; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.archive-menu-check svg{width:11px; height:11px;}
.archive-menu-label{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.archive-menu-count{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-soft); flex-shrink:0;}

.archive-stats{display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; padding:14px 18px; border-bottom:1px solid var(--border); flex-shrink:0;}
.archive-stat{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:11px 10px; min-width:0;}
.archive-stat-value{font-family:'Fraunces',serif; font-size:22px; font-weight:600; color:var(--ink); line-height:1;}
.archive-stat.muted .archive-stat-value{color:var(--ink-soft);}
.archive-stat-label{font-family:'IBM Plex Mono',monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-top:6px; line-height:1.4;}

.archive-content{flex:1; min-height:0; overflow-y:auto; padding:8px 18px 20px;}
.archive-day{margin-top:14px;}
.archive-day-head{display:flex; align-items:center; justify-content:space-between; font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); padding:6px 0;}
.archive-day-head span{background:var(--bg); border-radius:999px; padding:2px 8px;}
.archive-entry{border-bottom:1px solid var(--border);}
.archive-entry:last-child{border-bottom:none;}
.archive-row{display:flex; align-items:center; gap:11px; padding:10px 0;}
.archive-row.expandable{cursor:pointer;}
.archive-row.expandable:hover{background:var(--bg);}
.archive-chevron{width:14px; flex-shrink:0; color:var(--ink-soft); display:flex; align-items:center; justify-content:center; transition:transform .15s;}
.archive-chevron svg{width:11px; height:11px;}
.archive-chevron.flip{transform:rotate(180deg);}
/* Contenu d'une liste archivée : décalé sous la ligne, en retrait du crochet. */
.archive-details{margin:0 0 10px 33px; padding:9px 12px; background:var(--bg); border-radius:10px;}
.archive-details-head{font-family:'IBM Plex Mono',monospace; font-size:9px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:6px;}
.archive-details-item{display:flex; align-items:center; gap:8px; padding:3px 0; font-size:12.5px; color:var(--ink);}
.archive-details-mark{width:13px; height:13px; flex-shrink:0; border-radius:50%; border:1.5px solid var(--border-soft); display:flex; align-items:center; justify-content:center; color:transparent;}
.archive-details-mark svg{width:8px; height:8px;}
.archive-details-item.checked .archive-details-mark{background:var(--action); border-color:var(--action); color:#fff;}
.archive-details-item:not(.checked) span:last-child{color:var(--ink-soft);}
.archive-mark{width:22px; height:22px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--accent-bg); color:var(--accent);}
.archive-mark svg{width:11px; height:11px;}
/* Une tâche annulée n'est pas un échec : elle est simplement mise en retrait. */
.archive-row.cancelled .archive-mark{background:var(--bg); color:var(--ink-soft);}
.archive-row.cancelled .archive-title{color:var(--ink-soft); text-decoration:line-through; text-decoration-color:var(--border-soft);}
.archive-body{flex:1; min-width:0;}
.archive-title{font-size:13.5px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.archive-meta{font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--ink-soft); margin-top:2px;}
.archive-tags{display:flex; gap:4px; margin-top:4px;}
.archive-tag{font-family:'IBM Plex Mono',monospace; font-size:8.5px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; padding:2px 7px; border-radius:999px;}
.archive-tag.urgent{background:#F3DAD7; color:#8B4A3F;}
.archive-tag.late{background:#F3E4C6; color:#8A6416;}
/* .icon-badge n'a pas de taille propre : elle la tient de son contexte
   (.rrow, .arow…). Ici il faut la donner, sinon la pastille s'écrase à 0px. */
.archive-row .icon-badge{width:26px; height:26px; border-radius:50%; background:var(--bg); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.archive-row .icon-badge svg{width:15px; height:15px;}
.archive-content .empty{font-size:12.5px; color:var(--ink-soft); font-style:italic; padding:26px 2px; text-align:center;}

/* Deux boutons dans l'entête du menu des espaces (archive + réglages). */
.space-dropdown-actions{display:flex; align-items:center; gap:2px;}

@media (min-width:900px){
  #archivePage{max-width:560px;}
}

/* ---------- MIROIR DE LA CHARGE ----------
   Bloc de lecture, pas de tableau de bord : une phrase qui dit quelque chose,
   puis trois chiffres. Volontairement sur fond sombre pour se distinguer des
   compteurs bruts au-dessus. */
.archive-mirror{margin:14px 18px 0; background:var(--action); border-radius:16px; padding:16px 16px 14px; flex-shrink:0;}
/* L’entête est le bouton de repli : pleine largeur pour rester facile à
   viser au pouce, et le chevron pivote pour dire dans quel sens ça va. */
.mirror-head{width:100%; display:flex; align-items:center; gap:10px; border:none; background:none; padding:0; cursor:pointer;
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.5); margin-bottom:12px; text-align:left;}
.mirror-head:hover{color:rgba(255,255,255,.8);}
.mirror-head-title{flex:1; min-width:0;}
/* Replié, le pourcentage reste : c’est la seule chose qui dit si ça vaut la
   peine de rouvrir. */
.mirror-head-pct{font-family:'Fraunces',serif; font-size:15px; font-weight:600; color:#fff; letter-spacing:0; text-transform:none;}
.mirror-chevron{width:11px; height:11px; flex-shrink:0; transition:transform .15s;}
.archive-mirror.collapsed{padding-bottom:16px;}
.archive-mirror.collapsed .mirror-head{margin-bottom:0;}
.archive-mirror.collapsed .mirror-chevron{transform:rotate(-90deg);}
.mirror-bar-row{display:flex; align-items:center; gap:10px;}
.mirror-bar{flex:1; height:8px; border-radius:999px; background:rgba(255,255,255,.14); overflow:hidden;}
.mirror-bar span{display:block; height:100%; border-radius:999px; background:var(--accent-fill);}
.mirror-bar-value{font-family:'Fraunces',serif; font-size:19px; font-weight:600; color:#fff; flex-shrink:0; line-height:1;}
.mirror-lead{font-size:12.5px; line-height:1.55; color:rgba(255,255,255,.78); margin-top:9px;}
.mirror-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:14px; padding-top:13px; border-top:1px solid rgba(255,255,255,.12);}
.mirror-cell{min-width:0;}
.mirror-cell-value{font-family:'Fraunces',serif; font-size:20px; font-weight:600; color:#fff; line-height:1;}
.mirror-cell-value small{font-size:12px; font-weight:400; color:rgba(255,255,255,.55);}
.mirror-cell-label{font-family:'IBM Plex Mono',monospace; font-size:8.5px; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.5); margin-top:5px; line-height:1.4;}
.mirror-empty{font-size:12px; color:rgba(255,255,255,.6); font-style:italic; line-height:1.5;}