/* La charpente : les deux colonnes, la poignée de largeur, le menu replié et le tiroir. */ /* ============================ LAYOUT ============================ */ /* `dvh` ET NON `vh` : sur Android, « 100vh » vaut la hauteur SANS la barre du navigateur, si bien que le pied de la colonne — compte, préférences, déconnexion — passait DESSOUS, hors d'atteinte (capture du 17 septembre 2026). `100vh` reste écrit avant, comme repli pour les navigateurs sans `dvh`. */ #layout{display:flex;min-height:100vh;min-height:100dvh} /* La largeur vient d'un JETON, posé par les réglages : la poignée #grip l'écrit, `settings.js` l'enregistre, et la valeur en dur ci-dessous n'est plus qu'un repli — celui du tout premier affichage, avant que le premier module ait tourné. */ /* UNE COLONNE FLEX, et c'est ce qui pousse le pied en bas. « margin-top:auto » sur `.side-foot` n'a d'effet que dans un conteneur flex — UI.md, règle 18 : ce qui se règle une fois se range au pied du rail. Le remplissage du bas (40 px) reste : « en bas » n'est pas « collé au bord ». */ #sidebar{ width:var(--menu-w,380px);flex:0 0 var(--menu-w,380px); background:var(--bg2);border-right:1px solid var(--line); height:100vh;height:100dvh;position:sticky;top:0;overflow-y:auto; padding:0 0 calc(40px + env(safe-area-inset-bottom)); display:flex;flex-direction:column; } /* ═══════════ LA POIGNÉE DE LARGEUR ═══════════ Une case de la rangée, entre le menu et la page — pas un enfant du menu posé en absolu : #sidebar défile, et une poignée dedans serait partie avec le sommaire au premier coup de molette. Cinq pixels pour l'attraper, un filet d'un pixel pour la voir. */ #grip{flex:0 0 5px;cursor:col-resize;position:relative;z-index:6; background:none;border:none;padding:0;align-self:stretch} #grip::after{content:'';position:absolute;top:0;bottom:0;left:2px;width:1px; background:transparent;transition:background .15s,width .15s,left .15s} #grip:hover::after,#grip:focus-visible::after,#grip.dragging::after{ background:var(--blue);width:3px;left:1px} #grip:focus-visible{outline:none} /* Rien à redimensionner quand il n'y a pas de colonne : menu replié, menu en haut, ou tiroir sous 1000 px. */ html[data-collapsed] #grip{display:none} /* Colonne de lecture resserrée et centrée : à 1500px de large, collée au menu, le texte filait tout à gauche avec un grand vide à droite — et un gros titre centré là-dedans aurait semblé perdu, sans rapport avec le texte sous lui. */ /* UN QUART DE PLUS (21 septembre 2026) : « ça prend trop peu de place ». 1280 laissait deux marges vides sur un écran large, alors que les tableaux de « ::: what » et les aide-mémoire réclament la ligne entière. */ /* ~75 % DE LA LARGEUR DE L'ÉCRAN (23 septembre 2026, « augmente encore un peu la largeur du corps ») : 1600px cédait deux marges vides sur un écran large, pendant que les tableaux de « ::: what », l'aide-mémoire et le catalogue à onglets réclament la ligne entière. */ #content{flex:1;min-width:0;padding:0 clamp(20px,3.5vw,64px) 140px;max-width:min(1800px,75vw);margin:0 auto} /* Menu replié : on retire la largeur au lieu de masquer, sinon la colonne resterait réservée et le contenu ne gagnerait rien. L'état vit sur , pas sur #layout. Il y a une raison précise : la règle d'affichage du bouton « rouvrir » s'écrivait « #layout.sansmenu~#expand », or #expand est écrit AVANT #layout dans la coquille — et « ~ » ne regarde que les frères SUIVANTS. Elle ne s'appliquait donc jamais : on repliait le menu et plus rien ne permettait de le rouvrir. Un attribut sur la racine est un ancêtre de tout : l'ordre du document ne peut plus le casser. */ html[data-collapsed] #sidebar{width:0;flex:0 0 0;overflow:hidden;border-right:none} html[data-collapsed] #content{max-width:min(2150px,80vw);margin:0 auto} /* … ET LA BARRE D'ACTIONS LUI LAISSE LA PLACE. « ☰ » est posé en fixe à 14 px du bord, la barre commence à 45 : les deux se chevauchaient déjà avant que le bouton passe à 48 px — mesuré le 9 septembre 2026, bord droit du bouton 62, premier bouton de la barre 45 — et « Tout valider » se cliquait à moitié. La place se RÉSERVE, elle ne se négocie pas. */ html[data-collapsed] #content > .page-head > .crumbs{margin-left:62px} #expand{display:none;position:fixed;top:14px;left:14px;z-index:300;background:var(--bg2); color:var(--fg);border:1px solid var(--line);border-radius:9px;width:48px;height:48px; align-items:center;justify-content:center;cursor:pointer;font-size:1.1875rem} #expand:hover{border-color:var(--blue)} html[data-collapsed] #expand{display:flex} @media(max-width:1000px){ html[data-collapsed] #sidebar{width:min(88vw,355px);flex:0 0 auto} html[data-collapsed] #expand{display:none} /* Le tiroir prend la largeur de l'écran, pas celle qu'on a réglée à la souris : un menu de 620 px sur un téléphone couvrirait la page entière. */ #grip{display:none} } /* ═══════════════════ LE TIROIR, SOUS 1000 PX ═══════════════════ Le menu sort par-dessus la page. Trois choses qui manquaient : · Le ☰ était posé en `left:14px` SANS CONDITION, et le tiroir s'ouvrait dessous : le bouton restait planté sur l'en-tête du menu, exactement au-dessus du nom du site. On ne voyait donc plus ni l'un ni l'autre. Ouvert, le tiroir montre son propre ⇤ ; le ☰ s'efface. · Rien ne fermait le tiroir en dehors de ce même bouton. Un voile derrière lui le referme au premier appui à côté. · L'état vit sur comme celui du menu replié, et pour la même raison : #burger et #backdrop sont écrits AVANT #layout, donc hors de portée de tout sélecteur de frère depuis #sidebar. */ @media(max-width:1000px){ #layout{flex-direction:column} #sidebar{position:fixed;left:0;top:0;z-index:200;transform:translateX(-100%); transition:transform .25s; width:min(88vw,355px);flex:0 0 auto} /* L'ombre suit le tiroir OUVERT : fermé, ses 40 px de flou grisaient le bord gauche de chaque page. */ html[data-drawer] #sidebar{transform:translateX(0);box-shadow:0 0 40px rgba(0,0,0,.55)} /* En colonne, #content n'est plus bridé par le menu : sans ce rappel il garde son max-width de bureau (1600 px) et déborde de l'écran. */ #content{padding-top:70px;max-width:100%} #burger{display:flex!important} html[data-drawer] #burger{display:none!important} /* Le ⇤ du menu, caché sur mobile tant qu'il n'y a rien à replier, devient le bouton « fermer » du tiroir — à sa place habituelle, dans le menu. */ html[data-drawer] #collapse{display:flex} html[data-drawer] #backdrop{display:block} /* LE TIROIR REND LA PLACE À LA BARRE DU POUCE. Mesuré à 390 px le 18 septembre 2026 : la barre occupe les 123 derniers pixels de l'écran, et « ⚙️ Préférences » — le dernier bouton de la colonne, déroulé jusqu'en bas — tenait de 754 à 804, entièrement dessous. Réglages et déconnexion étaient donc hors d'atteinte au doigt (UI.md, règles 18, 19 et 39). La réserve est celle que la page prend déjà pour la même barre, dans css/read/nav.css. */ html:has(.toolbar.foot) #sidebar{padding-bottom:calc(148px + env(safe-area-inset-bottom))} } /* LA GOUTTIÈRE D'UN TÉLÉPHONE. `clamp` rend 20 px de chaque côté à 390, soit 350 px de colonne : à 15 px la ligne gagne dix caractères, et un chapitre long perd les lignes de débordement que ces dix caractères provoquaient. */ @media(max-width:560px){ #content{padding-left:15px;padding-right:15px} }