/* interface/surcharges.css — surcharges ordonnées (ancienne partie B) : DOIVENT venir après les composants
   Extrait de styles.css à l'étape 8 du découpage. L'ordre de chargement (index.html) est celui
   de l'ancienne feuille : à spécificité égale, la dernière règle l'emporte (voir CARTE.md, CSS). */
/* ===== Ajustements interface actions cartes/formulaires ===== */
.list-bottom-actions{display:flex;justify-content:flex-end;gap:calc(3px * var(--ui-scale-factor));padding:0;flex-shrink:0;margin-left:auto;position:relative;z-index:5;}
/* Boutons d'action des listes : petits carrés bordés (les cartes n'ont plus de boutons). */
.list-bottom-actions .list-menu-btn{
 width:calc(19.5px * var(--ui-scale-factor));height:calc(19.5px * var(--ui-scale-factor));border:calc(1px * var(--ui-scale-factor)) solid var(--border);border-radius:calc(4.5px * var(--ui-scale-factor));
 background:var(--surface);color:var(--text-dim);display:flex;align-items:center;justify-content:center;
 padding:0;font-size:calc(10px * var(--ui-scale-factor));
}
.list-bottom-actions .list-menu-btn:hover{background:var(--surface-3);color:var(--text);border-color:var(--text-faint);}
@media (prefers-reduced-motion:reduce){
 .swatch,.theme-swatch,.background-palette-swatch{transition:none;}
}

/* ================= FENÊTRES COMPACTES ET COMPOSANTS SPÉCIFIQUES ================= */
/* La description garde sa souplesse mais reste cohérente. */
@media (max-width:900px){
 :where(.add-card-modal) .add-card-left, :where(.add-card-modal) .add-card-right{min-width:0;}
}
@media (max-width:900px){.add-card-modal .add-card-columns{grid-template-columns:1fr;}}

.card-editor-modal .modal-head{
  padding:calc(9px * var(--ui-scale-factor)) calc(10.5px * var(--ui-scale-factor)) calc(7.5px * var(--ui-scale-factor));
}
.card-editor-modal .modal-body{
  padding:calc(9px * var(--ui-scale-factor)) calc(10.5px * var(--ui-scale-factor));
  gap:calc(7.5px * var(--ui-scale-factor));
}
.card-editor-modal .add-card-columns{
  grid-template-columns:calc(225px * var(--ui-scale-factor)) minmax(calc(270px * var(--ui-scale-factor)),1fr);
  gap:calc(13.5px * var(--ui-scale-factor));
}
.card-editor-modal .field-label{
  margin-bottom:calc(3.75px * var(--ui-scale-factor));
}
.card-editor-modal .modal-foot{
  padding:calc(7.5px * var(--ui-scale-factor)) calc(10.5px * var(--ui-scale-factor)) calc(9px * var(--ui-scale-factor));
}
/* ================= ÉTAT DE LA PERSISTANCE ================= */
#saveErrorBanner{position:fixed;left:50%;bottom:calc(31.5px * var(--ui-scale-factor));z-index:12000;max-width:min(calc(465px * var(--ui-scale-factor)),calc(100vw - calc(21px * var(--ui-scale-factor))));transform:translateX(-50%);padding:calc(7.5px * var(--ui-scale-factor)) calc(10.5px * var(--ui-scale-factor));border:calc(1px * var(--ui-scale-factor)) solid rgba(255,120,110,.55);border-radius:calc(6px * var(--ui-scale-factor));background:#3a1f22;color:#fff;font:600 calc(9px * var(--ui-scale-factor))/1.4 system-ui;box-shadow:0 calc(6px * var(--ui-scale-factor)) calc(18px * var(--ui-scale-factor)) rgba(0,0,0,.38);}
/* Recherche agenda : même principe que le tableau, liseré fixe dans la couleur de la carte
 (blanc si elle n'en a pas), sans animation ni halo ; les autres cartes s'estompent. */
.agenda-chip.agenda-search-match,.agenda-day-card.agenda-search-match{
 position:relative;
 z-index:2;
 border-color:var(--agenda-ring-color,#fff);
}
/* Vue Agenda : la barre « Filtrer » et les boutons « + Étiquettes » / « + Liste »
   ne concernent que le tableau. */
body.view-agenda #filterBar,
body.view-agenda #btnLabels,
body.view-agenda #btnAddList{display:none !important;}
/* ==== Correctifs taille d'interface (compacte / standard) ==== */
/* Icône du bouton « + Liste » : suit l'échelle au lieu de rester à 17 px. */
#btnAddList .btn-add-list-icon{display:inline-block;width:calc(12px * var(--ui-scale-factor));height:calc(12px * var(--ui-scale-factor));margin:calc(-3px * var(--ui-scale-factor)) calc(4.5px * var(--ui-scale-factor)) calc(-3px * var(--ui-scale-factor)) 0;vertical-align:middle;}
/* Vue Agenda « Année » : les 12 mois occupent exactement la hauteur disponible, sans défilement.
   Chaque mois réserve 6 semaines pour que les cases gardent la même taille partout.
   Seulement sur 4 colonnes (3 rangées) : en dessous de 1181 px les mois passent sur 3 colonnes et
   4 rangées, qui ne tiennent plus en hauteur ; on garde alors des cases à taille normale et on
   défile (avant : cases écrasées, chiffres qui se chevauchaient entre 901 et 1180 px). */
@media (min-width:1181px){
 .agenda-canvas.span-12{grid-auto-rows:minmax(0,1fr);align-content:stretch;overflow:hidden;}
 .span-12 .agenda-month{min-height:0;grid-template-rows:auto auto repeat(6,minmax(0,1fr));}
 .span-12 .agenda-cell{height:auto;min-height:0;}
}
/* Contenu du tableau à l'échelle compacte (voir BOARD_MODEL_SCALE) : le zoom du tableau
   l'agrandit ensuite d'un bloc. Même règle pour la vue éclatée et les fantômes de glisser,
   qui reproduisent des listes hors de #boardRow. */
.board-model-scale,.drag-floating,.overview-scene,.overview-drag-group-ghost{
 --ui-scale-factor:1;
 --card-border-width:var(--m-card-border-width,1px);
 --card-radius:var(--m-card-radius,4.5px);
 --list-radius:var(--m-list-radius,5.25px);
 --card-font-size:var(--m-card-font-size,10px);
 --card-gap:var(--m-card-gap,5.25px);
 --list-width:var(--m-list-width,204px);
 --list-title-size:var(--m-list-title-size,12.75px);
 --swatch-size:15px;--swatch-radius:3.75px;--swatch-gap:3px;
}