/* ========================================================================== MEETennis — assets/layout-desktop.css ORDINATEUR — à partir de 1100 px -------------------------------------------------------------------------- À charger EN DERNIER, après layout-shell.css et layout-tablet.css. Remplace l'ancienne assets/desktop.css. CE QUI N'ALLAIT PAS DANS L'ANCIENNE VERSION 1. Le seuil était à 900 px : un iPad paysage (1024 px) recevait une barre latérale prévue pour la souris. Il est remonté à 1100 px, la tablette gardant sa navigation en bas (voir layout-tablet.css). 2. La colonne était centrée par « margin:auto », mais tout ce qui flotte au-dessus d'elle (bouton « + », feuilles, lecteur d'article, panneau d'installation) restait centré sur l'ÉCRAN. Écart réel : 132 px à 1 280 px de large. D'où les fenêtres qui ne tombaient pas en face de leur colonne. 3. Le bouton « + » était positionné en dur à 860 px du bord gauche. Entre 900 et 990 px de large, il sortait de l'écran : barre de défilement horizontale, et toute la page qui glisse d'un cran. 4. shop-desktop.css remontait la barre d'onglets en haut à partir de 1000 px, pendant que desktop.css en faisait une barre latérale de pleine hauteur depuis 900 px. Les deux règles se mélangeaient : sur les pages boutique, le menu devenait un grand rectangle blanc posé par-dessus le contenu. C'était la superposition la plus visible. LE PARTI PRIS Ni « site mobile étiré », ni « téléphone au milieu du vide » : la navigation passe à gauche, la colonne de lecture reste étroite et centrée dans l'espace restant. Toutes les mesures viennent des deux variables de layout-shell.css, donc les éléments flottants suivent la colonne sans qu'on ait à les repositionner un par un. VARIANTE MENU EN BAS Si vous préférez garder la barre d'onglets en bas sur ordinateur, il suffit de mettre data-nav="bottom" sur la balise (partials/ header.php le lit dans un cookie, voir la section 9 en fin de fichier). ========================================================================== */ @media (min-width:1100px){ /* ====================================================================== 1. Les mesures --------------------------------------------------------------------- 264 + 720 = 984 px. À 1 100 px, il reste 116 px de gouttière, soit 58 px de chaque côté de la colonne : elle ne touche jamais la barre latérale, à aucune largeur de cette tranche. ====================================================================== */ :root{ --meet-layout:desktop; --meet-hero:sticky; /* le bandeau reste dans le flux, pas besoin de réserver sa hauteur (lu par app-v2.js) */ --side-w:264px; --shell-w:720px; --brand-h:96px; /* hauteur du bloc logo, en haut du menu */ --nav-h:0px; /* plus de barre en bas : le « + » remonte */ } body{padding:0;background:var(--body-bg)} /* ====================================================================== 2. Le cadre --------------------------------------------------------------------- margin-left plutôt que padding-left : la zone utile de .app fait alors exactement « écran − barre latérale », et la colonne centrée dedans tombe pile sur le calcul de layout-shell.css. Avec du padding, il aurait fallu retrancher deux gouttières de plus dans chaque formule. ====================================================================== */ body .app{ max-width:none; width:auto; margin:0 0 0 var(--side-w); min-height:100vh; border-radius:0; overflow:visible; box-shadow:none; background:var(--app-bg); padding:0 0 96px; } /* Toute la page vit dans une colonne de lecture centrée. Les enfants directs de .app sont les sections des gabarits : on les contraint d'un coup, sans toucher un seul fichier PHP. */ body .app > *{ max-width:var(--shell-w); margin-left:auto; margin-right:auto; } /* ====================================================================== 3. Le bandeau --------------------------------------------------------------------- Ici il n'a pas besoin de sortir du flux : la colonne est étroite, le bandeau tient dans un quart de la hauteur, et un simple sticky suffit — le contenu passe quand même derrière lui. On annule donc les positionnements de layout-shell.css, prévus pour un bandeau fixe. ====================================================================== */ body .app-hero{ position:sticky; top:0; left:auto; right:auto; width:auto; max-width:var(--shell-w); margin:0 auto; border-radius:0; z-index:36; } body .app:has(.app-hero){padding-top:0} body .app-hero.compact{box-shadow:0 6px 20px rgba(30,20,12,.14)} body .app-hero .top{padding:30px 26px 22px} body .app-hero .hero-search{padding:0 26px 24px} body .hero-title{font-size:30px} body .hero-title.greet{font-size:29px} /* ====================================================================== 4. La navigation : barre latérale --------------------------------------------------------------------- Le HTML est celui de la barre du bas, à l'identique. On la couche, on l'étire, et les cinq onglets deviennent cinq entrées de menu. Rien à maintenir en double. ====================================================================== */ body .tabbar{ left:0; right:auto; top:0; bottom:0; width:var(--side-w); max-width:none; height:100vh; height:100dvh; flex-direction:column; justify-content:flex-start; align-items:stretch; gap:4px; padding:calc(var(--brand-h) + 14px) 15px 24px; overflow-y:auto; overscroll-behavior:contain; border-top:0; border-right:1px solid rgba(0,0,0,.07); border-radius:0; box-shadow:none; background:rgba(255,255,255,.98); } body .tabbar .tab{ flex:none; flex-direction:row; justify-content:flex-start; gap:14px; padding:13px 15px; border-radius:14px; font-size:14.5px; font-weight:700; transition:background .18s,color .18s; } body .tabbar .tab svg{width:21px;height:21px;flex:none} body .tabbar .tab span{line-height:1.2} body .tabbar .tab:hover{background:rgba(225,94,1,.07);color:var(--brand)} body .tabbar .tab.active{background:rgba(225,94,1,.12);color:var(--brand)} /* Le liseré du haut n'a plus de sens à la verticale : il devient un repère à gauche de l'entrée active. */ body .tabbar .tab.active::before{ top:50%;left:0;transform:translateY(-50%); width:3px;height:22px;border-radius:0 3px 3px 0; } /* Le bloc logo, en haut de la barre. Il est déjà dans le HTML (partials/footer.php) et reste masqué partout ailleurs. */ body .side-brand{ display:flex; position:fixed;top:0;left:0; width:var(--side-w);height:var(--brand-h); z-index:41; align-items:center;gap:11px;padding:0 20px; background:rgba(255,255,255,.98); border-right:1px solid rgba(0,0,0,.07); border-bottom:1px solid rgba(0,0,0,.05); } body .side-brand img{width:38px;height:38px;border-radius:11px;flex:none;object-fit:contain} body .side-brand b{font:900 17px/1 Montserrat,sans-serif;color:var(--ink);letter-spacing:-.3px} body .side-brand small{display:block;font-size:11px;color:var(--ink-soft);font-weight:600;margin-top:3px} /* ====================================================================== 5. Les panneaux deviennent des boîtes de dialogue --------------------------------------------------------------------- Une feuille qui monte du bas d'un écran de 1 400 px demande de descendre la souris jusqu'en bas pour lire, puis de remonter pour fermer. Centrée, elle est là où le regard est déjà. visibility en plus de l'opacité : une feuille invisible mais toujours posée sur la page interceptait les clics du contenu en dessous. ====================================================================== */ body .sheet, body .sheet-pub, body .inst-sheet{ left:calc(var(--side-w) + (100% - var(--side-w)) / 2); right:auto; top:50%; bottom:auto; width:min(560px,90%); max-width:none; max-height:86vh; overflow-y:auto; border-radius:24px; box-shadow:0 30px 80px rgba(0,0,0,.32); opacity:0; visibility:hidden; transform:translate(-50%,-46%) scale(.98); transition:transform .24s cubic-bezier(.22,.9,.3,1),opacity .18s,visibility .18s; } body .sheet.open, body .sheet-pub.on, body .inst-sheet.on{ opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); } body .sheet .grip, body .sheet-pub .grip{display:none} body .sheet .media{height:300px} body .sheet-pub{padding:24px 26px 26px} body .inst-sheet{padding:28px 26px 26px} /* Les voiles couvrent tout l'écran, mais ce qu'ils contiennent se centre sur la ZONE DE CONTENU et non sur la dalle : une fenêtre centrée sur l'écran entier paraît décalée vers la gauche dès qu'une barre latérale occupe 264 px à sa gauche. */ body .reader-overlay, body .auth-modal-overlay{padding-left:calc(var(--side-w) + 24px)} /* ====================================================================== 6. Le bouton flottant --------------------------------------------------------------------- Son bord droit se cale sur celui de la colonne (calcul dans layout-shell.css) : il ne peut plus ni sortir de l'écran, ni se retrouver à 40 cm du fil qu'il alimente. ====================================================================== */ body .fab{bottom:36px} /* ====================================================================== 7. Le contenu respire ====================================================================== */ body .f-list, body .lib-list, body .rs-group .rs-list, body .v-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; } body .feed{gap:20px} body .post{border-radius:20px} body .post-imgs img{max-height:560px} body .menu-row{padding:17px 18px} body .menu-row .ml{font-size:15.5px} /* Les rangées défilantes n'ont plus de marge à rattraper : la colonne n'a pas de padding latéral, leur débordement de 18 px n'a plus lieu d'être et faisait sortir les puces du cadre. */ body .chips, body .scroller, body .seg-wrap, body .d-wrap{margin-left:0;margin-right:0} body .chips, body .scroller, body .seg-wrap{padding-left:0;padding-right:0} /* ====================================================================== 8. Souris : les états de survol deviennent utiles ====================================================================== */ body .post-acts .pa, body .menu-row, body .f-card, body .pub-opt, body .gm-card, body .fo-item{transition:background .16s,box-shadow .16s} body .menu-row:hover, body .fo-item:hover, body .pub-opt:hover{background:rgba(225,94,1,.05)} body .f-card:hover{box-shadow:var(--shadow-card)} } /* ========================================================================== Très grand écran — un peu plus d'air, jamais plus de largeur de texte ========================================================================== */ @media (min-width:1500px){ :root{--side-w:288px;--shell-w:780px} body .hero-title{font-size:32px} body .app-hero .top{padding:34px 28px 24px} } /* ========================================================================== 9. VARIANTE — la navigation reste en bas sur ordinateur -------------------------------------------------------------------------- Activée par . partials/header.php lit le cookie meet_nav ; pour l'imposer à tout le monde, il suffit d'y remplacer la valeur par défaut 'side' par 'bottom'. La coquille s'élargit (900 px) puisqu'elle n'a plus à partager l'écran avec une colonne de menu, et se recentre sur l'écran entier. ========================================================================== */ @media (min-width:1100px){ html[data-nav="bottom"]{ --side-w:0px; --shell-w:min(100%,900px); --shell-pad:28px; --nav-h:74px; } html[data-nav="bottom"] body .side-brand{display:none} html[data-nav="bottom"] body .app{ margin:0 auto; max-width:var(--shell-w); padding-left:var(--shell-pad); padding-right:var(--shell-pad); padding-bottom:calc(var(--nav-h) + 40px); box-shadow:0 0 100px rgba(30,20,12,.08); } html[data-nav="bottom"] body .app > *{max-width:none;margin-left:0;margin-right:0} /* Le bandeau reprend toute la largeur de la coquille. */ html[data-nav="bottom"] body .app-hero{ max-width:none; margin-left:calc(var(--shell-pad) * -1); margin-right:calc(var(--shell-pad) * -1); } html[data-nav="bottom"] body .app-hero .top{padding-left:var(--shell-pad);padding-right:var(--shell-pad)} html[data-nav="bottom"] body .app-hero .hero-search{padding-left:var(--shell-pad);padding-right:var(--shell-pad)} /* La barre d'onglets redescend, à la largeur exacte de la coquille. Son bord gauche vient de layout-shell.css, comme tous les autres. */ html[data-nav="bottom"] body .tabbar{ left:calc((100% - var(--shell-w)) / 2); right:auto; top:auto; bottom:0; width:var(--shell-w); height:auto; flex-direction:row; justify-content:space-around; align-items:stretch; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid rgba(0,0,0,.07); border-right:0; box-shadow:0 -8px 30px rgba(30,20,12,.10); } html[data-nav="bottom"] body .tabbar .tab{ flex:1;flex-direction:column;justify-content:center; gap:6px;padding:9px 4px 5px;font-size:12px;border-radius:0; } html[data-nav="bottom"] body .tabbar .tab svg{width:24px;height:24px} html[data-nav="bottom"] body .tabbar .tab.active::before{ top:-10px;left:auto;transform:none;width:40px;height:3px;border-radius:0 0 3px 3px; } /* Deux colonnes sur 900 px, mais des cartes plus larges qu'à 720. */ html[data-nav="bottom"] body .chips, html[data-nav="bottom"] body .scroller, html[data-nav="bottom"] body .seg-wrap, html[data-nav="bottom"] body .d-wrap{ margin-left:calc(var(--shell-pad) * -1); margin-right:calc(var(--shell-pad) * -1); } html[data-nav="bottom"] body .chips, html[data-nav="bottom"] body .scroller, html[data-nav="bottom"] body .seg-wrap{ padding-left:var(--shell-pad); padding-right:var(--shell-pad); } }