/* interface/petits-ecrans.css — adaptation aux petits écrans
   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). */
 /* ==================== ADAPTATION AUX PETITS ÉCRANS ==================== */
 @media (max-width:680px){
 .topbar{padding:calc(6.75px * var(--ui-scale-factor)) calc(7.5px * var(--ui-scale-factor)); gap:calc(6px * var(--ui-scale-factor));}
 .board-title-input{font-size:calc(11px * var(--ui-scale-factor)); max-width:34vw;}
 .topbar-actions .btn-ghost span.long, .btn-primary span.long{display:none;}
 .board{padding:calc(7.5px * var(--ui-scale-factor)) calc(7.5px * var(--ui-scale-factor)) calc(9px * var(--ui-scale-factor));}
 /* Les listes gardent leur largeur réglée (Paramètres › Largeur des listes) : sur ce
    tableau à positions libres, une largeur en vw les agrandissait sur petit écran. */
 .board-wrap{scroll-snap-type:none;}
 .modal{max-width:none; margin:0 calc(3px * var(--ui-scale-factor));}
 }