/* ========================================================================== MEETennis — assets/layout-tablet.css TABLETTE ET PETIT PORTABLE — de 700 à 1099 px -------------------------------------------------------------------------- À charger APRÈS layout-shell.css et AVANT layout-desktop.css. Concerne : iPad portrait (768 px) et paysage (1024 px), iPad mini, tablettes Android, fenêtre de navigateur réduite à moitié d'écran, Surface, Chromebook 11 pouces. CE QUI N'ALLAIT PAS 1. Entre 700 et 899 px, l'app restait une bande de 460 px au milieu de l'écran : deux tiers de la dalle en fond gris. Sur un iPad tenu en main, ça se lit comme un site mobile mal affiché. 2. À partir de 900 px, l'ancienne desktop.css basculait déjà en barre latérale. Un iPad paysage fait 1024 px : il recevait donc une mise en page pensée pour la souris, avec des cibles de 21 px, alors qu'on y navigue au doigt. C'est là que le menu se superposait au contenu, la colonne étant calculée pour 1 280 px. LE PARTI PRIS La tablette, c'est du tactile : la navigation RESTE en bas, à portée de pouce, comme sur téléphone. On ne change que deux choses : la coquille s'élargit à 880 px et les listes passent à deux colonnes. Le bandeau et la barre d'onglets s'élargissent avec elle, automatiquement, puisqu'ils se raccrochent aux mesures définies dans layout-shell.css. ========================================================================== */ @media (min-width:700px) and (max-width:1099px){ /* ---- 1. Les mesures -------------------------------------------------- 880 px : au-delà, une carte de formation étirée sur toute la largeur donne des titres perdus au milieu du vide. La coquille garde donc des marges sur un iPad paysage, et occupe tout l'écran en portrait. */ :root{ --meet-layout:tablet; --meet-hero:fixed; /* bandeau hors flux, comme sur téléphone */ --side-w:0px; --shell-w:min(100%,880px); --shell-pad:26px; --nav-h:72px; } /* ---- 2. Le cadre ----------------------------------------------------- app.css arrondissait la coquille et la posait sur un fond, à partir de 480 px : la « carte téléphone » posée au milieu de l'écran. Sur une tablette, l'app doit occuper sa hauteur, pas flotter dans un cadre. */ body{padding:0;background:var(--body-bg)} body .app{ width:100%; max-width:var(--shell-w); margin:0 auto; min-height:100vh; min-height:100dvh; border-radius:0; overflow:visible; box-shadow:0 0 90px rgba(30,20,12,.08); padding-left:var(--shell-pad); padding-right:var(--shell-pad); padding-bottom:calc(var(--nav-h) + 34px + env(safe-area-inset-bottom)); } /* ---- 3. Le bandeau --------------------------------------------------- Il reste hors du flux (position:fixed) pour que le contenu glisse derrière lui plutôt que de s'arrêter dessous. Sa place est rendue par --hero-h : PHP en pose une estimation, app-v2.js la corrige au pixel une fois les polices chargées. Sa largeur et son bord gauche viennent de layout-shell.css. */ body .app-hero{ position:fixed; top:0; margin:0; z-index:36; transition:box-shadow .2s ease; } body .app:has(.app-hero){padding-top:var(--hero-h,196px)} /* Les marges intérieures du bandeau suivent celles de la colonne, sinon le titre du bandeau et les cartes en dessous ne sont plus alignés. */ body .app-hero .top{ padding:calc(20px + env(safe-area-inset-top)) var(--shell-pad) 30px; } body .app-hero .hero-search{padding:0 var(--shell-pad) 24px} /* Bandeau replié au défilement. Ces règles existaient dans app-v2.css mais s'arrêtaient à 899 px : au-delà, le bandeau restait déplié et figeait 200 px de photo en haut de l'écran. */ body .app-hero.compact .hero-eyebrow, body .app-hero.compact .hero-sub, body .app-hero.compact .hero-search{display:none} body .app-hero.compact .top{ padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:12px} body .app-hero.compact .hero-title, body .app-hero.compact .hero-title.sm, body .app-hero.compact .hero-title.greet{ font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body .app-hero.compact .avatar{width:38px;height:38px;font-size:13px} body .app-hero.compact .hero-back{width:38px;height:38px;margin-right:9px} body .app-hero.compact .hero-back svg{width:18px;height:18px} body .app-hero.compact{box-shadow:0 5px 18px rgba(30,20,12,.18)} /* Le bandeau est plus large : le titre peut respirer. */ body .hero-title{font-size:27px} body .hero-title.greet{font-size:26px} body .hero-sub{font-size:14.5px} /* La carte du profil débordait sur le bandeau : elle passerait derrière lui, donc hors de l'écran. */ body .pf-card{margin-top:14px} /* ---- 4. La barre d'onglets ------------------------------------------ En bas, sur toute la largeur de la coquille, avec des cibles plus généreuses qu'au téléphone : sur une tablette le doigt est le même, mais l'appareil est tenu à deux mains. */ body .tabbar{ bottom:0; top:auto; height:auto; flex-direction:row; align-items:stretch; border-radius:0; border-top:1px solid rgba(0,0,0,.07); border-right:0; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); box-shadow:0 -8px 30px rgba(30,20,12,.10); } body .tabbar .tab{ flex:1;flex-direction:column;justify-content:center; gap:6px;padding:9px 4px 5px;font-size:12px;border-radius:0; } body .tabbar .tab svg{width:24px;height:24px} body .tabbar .tab.active::before{top:-10px;width:40px;height:3px} /* La barre d'identité n'appartient qu'à l'ordinateur. */ body .side-brand{display:none} /* ---- 5. Débordements volontaires ------------------------------------ Les rangées défilantes (filtres, carrousels) sont dessinées pour déborder de 18 px, la marge du téléphone. Ici la colonne en a 26 : sans ce rattrapage, les puces s'arrêtaient 8 px avant le bord et le défilement semblait buter sur un mur invisible. */ body .chips, body .scroller, body .seg-wrap, body .d-wrap{ margin-left:calc(var(--shell-pad) * -1); margin-right:calc(var(--shell-pad) * -1); } body .chips, body .scroller, body .seg-wrap{ padding-left:var(--shell-pad); padding-right:var(--shell-pad); } /* ---- 6. Les listes passent à deux colonnes --------------------------- Une carte de formation seule sur 830 px de large, c'est 70 % de vide à droite du titre. Deux colonnes rendent la page lisible d'un coup d'œil sans toucher au HTML. */ body .f-list, body .lib-list, body .v-list, body .rs-group .rs-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; } /* Le fil, lui, reste sur une colonne : ce sont des publications, elles se lisent l'une après l'autre. On leur donne seulement de l'air. */ body .feed{gap:18px} body .post{border-radius:20px} body .post-imgs img{max-height:520px;object-fit:cover} /* Listes de réglages et de rubriques : cibles plus hautes. */ body .menu-row{padding:16px 18px} body .menu-row .ml{font-size:15.5px} body .fo-item{padding:16px 18px} /* ---- 7. Les panneaux ------------------------------------------------- Ils restent des feuilles qui montent du bas — le geste tactile — mais à la largeur de la coquille, et non plus 460 px centrés sur l'écran pendant que la colonne, elle, est ailleurs. */ body .sheet{max-height:88vh} body .sheet .media{height:300px} body .inst-sheet{max-height:86vh} /* La feuille « Créer une publication » est définie dans feed.css, qui se charge après ce fichier : le préfixe body lui passe devant. */ body .sheet-pub{ padding-left:var(--shell-pad); padding-right:var(--shell-pad); } /* ---- 8. Survol ------------------------------------------------------ Une tablette peut être branchée à un clavier et à une souris. */ @media (hover:hover) and (pointer:fine){ body .menu-row:hover, body .fo-item:hover{background:rgba(225,94,1,.05)} body .f-card:hover{box-shadow:var(--shadow-card)} } }