/* ═══════════════════════════════════════════════════════ calendrier-tablet.css — Commerce Éthique Palier TABLETTE : 641px → 1024px (iPad, petits portables, grands téléphones en paysage). Vient après calendrier.css dans le et affine son rendu — ne redéfinit rien qui n'a pas besoin de changer à cette largeur. Principes de cette passe responsive : - la topbar se resserre (stats masquées, libellé raccourci) mais garde ses onglets de vue, contrairement au mobile ; - la barre de filtres peut se replier sur deux lignes plutôt que forcer un défilement horizontal peu ergonomique ; - le mur du mois passe de "photos larges fixes" à une grille fluide qui remplit réellement la largeur disponible ; - les cibles tactiles (doigt, pas souris) sont agrandies via `pointer: coarse`, indépendamment de la largeur d'écran. ═══════════════════════════════════════════════════════ */ @media (max-width: 1024px) { .topbar { margin: 8px 8px 0; padding: 0 12px; gap: 8px; } .topbar-stat { display: none; } .period-lbl { font-size: 15px; } .fb-search { max-width: 200px; } .sb-input { width: 100%; } /* Mur du mois : grille fluide plutôt que largeur fixe, pour occuper tout l'espace tablette sans laisser de vide à droite. */ .month-pele { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; padding: 18px 10px 30px; } .pm-card { width: auto; } /* Semaine : grille un peu plus compacte, toujours défilable */ .week-grid { min-width: 520px; } .wg-slot, .wg-time-label { height: 52px; } /* Jour : hero de modale et colonnes méta un peu réduits */ .modal-box { max-width: 460px; } .modal-hero { height: 190px; } .agenda-box { max-width: 320px; } } /* ── Écrans tactiles (doigt), quelle que soit la largeur ── Les cibles interactives fines pensées pour un curseur souris sont trop petites pour un doigt : on les agrandit et on retire les micro-interactions de survol qui n'ont pas de sens sur tactile (elles restent actives au clavier/souris ailleurs). */ @media (pointer: coarse) { .nav-arr, .fb-theme-btn, .sb-submit, .modal-close-x { width: var(--tap-min); height: var(--tap-min); } .nav-today, .fb-date-btn, .cat-pill, .tvtab { min-height: var(--tap-min); } .mini-d { min-height: 34px; } .cat-pill { padding: 9px 14px; } }