/* ========================================================================== MEETennis — assets/layout-shell.css SOCLE DE MISE EN PAGE — commun à tous les appareils -------------------------------------------------------------------------- À charger APRÈS app.css / app-v2.css / links.css, et AVANT layout-tablet.css puis layout-desktop.css. POURQUOI CE FICHIER L'app était dessinée pour une colonne de 460 px. Tout ce qui flotte au-dessus du contenu — le bandeau, la barre d'onglets, le bouton « + », les feuilles qui montent du bas, le lecteur d'articles — était centré « à la main », chacun avec sa propre recette : .tabbar left:50% + translateX(-50%) + width:min(460px,100%) .app-hero left:50% + translateX(-50%) + width:min(460px,100%) .fab right:max(22px, calc(50% - 208px)) .sheet left:50% + translateX(-50%) .sheet-pub left:0;right:0;margin:0 auto;max-width:460px .inst-sheet left:0;right:0;margin:0 auto;max-width:460px .reader-panel margin:0 auto;max-width:460px Tant que la colonne fait 460 px et qu'elle est centrée sur l'écran, ces sept recettes tombent au même endroit. Dès que la colonne bouge — parce qu'une barre latérale la décale à droite sur ordinateur, ou parce qu'on l'élargit sur tablette — elles ne tombent plus au même endroit : c'est très exactement le « non-alignement des fenêtres et des cartes ». LE PRINCIPE On ne centre plus rien à la main. On déclare UNE coquille (la zone de lecture) avec deux mesures, et tout le monde s'y raccroche : --side-w largeur de la barre latérale (0 partout sauf ordinateur) --shell-w largeur de la colonne de lecture Le bord gauche de la coquille se calcule alors toujours pareil : --side-w + (largeur écran − --side-w − --shell-w) / 2 Changer la mise en page d'un appareil = changer ces deux valeurs. Le bandeau, le menu, le bouton « + » et les panneaux suivent tout seuls. Aucun gabarit PHP n'est dupliqué : le HTML reste strictement le même. POURQUOI DES % ET PAS DES vw 100vw inclut la barre de défilement, pas 100%. Sur ordinateur l'écart est de 15 px : assez pour décaler visiblement une feuille par rapport à la colonne. On n'utilise donc que des pourcentages. POURQUOI « body » DEVANT LES SÉLECTEURS Les CSS de page (feed.css, shop.css, formation.css…) sont chargées APRÈS celles du , dans le corps du document : à égalité de poids, c'est la dernière qui gagne. Le préfixe body suffit à faire pencher la balance du bon côté sans avoir à recourir à !important. ========================================================================== */ /* ========================================================================== 1. LES MESURES DE LA COQUILLE -------------------------------------------------------------------------- Valeurs par défaut = téléphone. layout-tablet.css et layout-desktop.css ne font que redéfinir ces quelques lignes. --meet-hero est lu par app-v2.js : il lui dit si le bandeau est sorti du flux (« fixed », il faut donc réserver sa hauteur) ou s'il y reste (« sticky », rien à réserver). Une seule source de vérité, dans le CSS. ========================================================================== */ :root{ --meet-layout:mobile; --meet-hero:fixed; --side-w:0px; /* barre latérale : ordinateur uniquement */ --shell-w:min(460px,100%); /* largeur de la colonne de lecture */ --shell-pad:18px; /* marge intérieure gauche/droite */ --nav-h:66px; /* hauteur de la barre d'onglets du bas */ } /* ========================================================================== 2. TÉLÉPHONE — on ne touche à rien -------------------------------------------------------------------------- Sous 700 px l'affichage actuel convient : il n'est volontairement pas modifié. Une seule exception ci-dessous, le paysage. ========================================================================== */ /* ---- Le bloc d'identité de la barre latérale --------------------------- .side-brand (partials/footer.php) n'a de sens qu'à partir de 1 100 px, où il coiffe la barre latérale. Il n'avait aucune règle par défaut : layout-tablet.css le masquait entre 700 et 1 099 px, layout-desktop.css le montrait au-delà — et EN DESSOUS DE 700 px, personne ne s'en occupait. Le navigateur affichait donc un simple
avec le logo à sa taille d'origine, soit un rond de plusieurs centaines de pixels posé en bas de chaque page, sous la barre d'onglets. On le masque donc par défaut, pour tout le monde ; seul l'ordinateur le rallume (display:flex dans layout-desktop.css, chargé après celui-ci). La taille de l'image est bornée dans la foulée : si un futur écran décide de l'afficher, il ne pourra plus repartir en géant. */ body .side-brand{display:none} body .side-brand img{width:38px;height:38px;object-fit:contain;flex:none} /* Téléphone couché (390 px de haut) : le bandeau déplié mange la moitié de l'écran utile. Il démarre donc replié, et n'occupe qu'une barre de titre. */ @media (max-height:520px) and (orientation:landscape) and (max-width:1099px){ body .app-hero .hero-eyebrow, body .app-hero .hero-sub{display:none} body .app-hero .top{padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:12px} body .app-hero .hero-title, body .app-hero .hero-title.sm, body .app-hero .hero-title.greet{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body .app-hero .avatar{width:38px;height:38px;font-size:13px} body .tabbar{padding-top:5px;padding-bottom:calc(5px + env(safe-area-inset-bottom))} body .tabbar .tab{padding:5px 2px 3px;gap:2px;font-size:10px} body .tabbar .tab svg{width:19px;height:19px} body .sheet,body .inst-sheet,body .sheet-pub{max-height:96vh;overflow-y:auto} } /* ========================================================================== 3. TABLETTE ET ORDINATEUR — tout se raccroche à la coquille -------------------------------------------------------------------------- Au-delà de 700 px, les sept éléments flottants abandonnent leur recette personnelle et prennent la même : bord gauche de la coquille, largeur de la coquille. Les translateX(-50%) hérités disparaissent — d'où la remise à plat des transformations, sans quoi les panneaux s'ouvriraient décalés d'une demi-largeur. ========================================================================== */ @media (min-width:700px){ /* ---- Bandeau, barre d'onglets, panneaux : même gouttière -------------- */ body .app-hero, body .tabbar, body .sheet, body .sheet-pub, body .inst-sheet{ left:calc(var(--side-w) + (100% - var(--side-w) - var(--shell-w)) / 2); right:auto; width:var(--shell-w); max-width:none; margin-left:0; margin-right:0; } /* Le centrage se faisait par translateX(-50%) : maintenant que « left » vise déjà le bon bord, garder la translation décalerait tout d'une demi-largeur vers la gauche. */ body .app-hero, body .tabbar{transform:none} /* .sheet cumulait les deux : on ne garde que le mouvement d'ouverture. */ body .sheet{transform:translateY(100%)} body .sheet.open{transform:translateY(0)} /* ---- Bouton flottant « + » ------------------------------------------- Il se cale sur le bord DROIT de la coquille, jamais sur celui de l'écran : à 1 400 px, un bouton collé au bord droit se retrouve à 50 cm de la colonne qu'il commande. */ body .fab{ left:auto; right:calc((100% - var(--side-w) - var(--shell-w)) / 2 + 16px); bottom:calc(var(--nav-h) + 30px + env(safe-area-inset-bottom)); } /* ---- Lecteur d'article ----------------------------------------------- Une colonne de 460 px pour lire un article sur un écran de 27 pouces n'a aucun intérêt : le panneau devient une vraie fenêtre centrée. */ body .reader-overlay{align-items:center;justify-content:center;padding:24px} body .reader-panel{ width:100%;max-width:min(900px,100%);height:min(100%,900px); border-radius:22px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.34)} body .reader-bar{padding-top:11px} /* ---- Modale de connexion ---------------------------------------------- */ body .auth-modal{max-width:400px} } /* ========================================================================== 4. GARDE-FOUS ========================================================================== */ /* Un seul pixel de débordement horizontal crée une barre de défilement, qui rétrécit la fenêtre, qui décale d'un coup TOUS les éléments fixes : c'est l'origine des « superpositions » qui n'apparaissent que sur certaines largeurs d'écran. overflow-x:clip et non hidden : hidden transforme l'élément en zone de défilement, ce qui casserait position:sticky (le bandeau de l'ordinateur, la barre de l'article). clip découpe sans rien de tout ça, et les navigateurs qui ne le connaissent pas ignorent la ligne. */ body{overflow-x:clip} /* Une image ou une vidéo intégrée ne déborde jamais de sa colonne, quelle que soit sa taille d'origine. */ body .res-body img, body .res-body iframe, body .post-imgs img, body .art-read img, body .post-video iframe{max-width:100%} /* À l'impression, ni menu ni panneaux. */ @media print{ body .tabbar,body .side-brand,body .fab,body .app-hero, body .sheet,body .sheet-overlay,body .inst-sheet,body .inst-overlay, body .sheet-pub,body .sheet-pub-ov,body .reader-overlay{display:none !important} body .app{margin:0;padding:0;box-shadow:none;max-width:none} }