/* ============================================================================ POC navigation verticale — 2026-08-31 Toutes les classes sont prefixees .lfs- : aucun selecteur ne croise style.css / screen.css / customBox.css. Charger cette feuille sur une page legacy ne change donc rien a son rendu. Une exception assumee, en fin de fichier, SCOPEE sous .lfs-content : les sections existantes calculent leur hauteur a partir de la navbar horizontale (193px), calcul faux des qu'elle disparait. Palette : uniquement les tokens --brand-* deja definis dans le :root de style_v2/css/style.css (chargee avant celle-ci par header-sidebar.php). Aucun hex de marque n'est redefini ici — si la DA bouge, cette feuille suit. Un seul theme, arbitre apres cinq essais (vert fonce « trop sombre », blanc « trop blanc », vert de marque « pas beau » — deux verts a 1,4:1 de contraste —, menthe) : le rail n'a pas de fond propre, il prolonge le degrade du avec un voile uniforme. Les variantes ecartees ont ete retirees du fichier le 2026-09-01. ========================================================================= */ :root { --lfs-w: 252px; /* sidebar deployee */ --lfs-w-min: 76px; /* rail icones */ --lfs-top: 64px; /* barre haute */ /* Hauteur commune au bloc compte (bas du rail) et au pied de page : c'est ce qui met leurs deux filets sur la meme ligne, comme le bloc logo et la barre haute partagent deja --lfs-top en haut. Le trait traverse alors l'ecran d'un bord a l'autre. */ --lfs-foot: 56px; } /* ---------------------------------------------------------------- structure */ .lfs-shell { display: flex; align-items: stretch; min-height: 100vh; background: transparent; /* le degrade du traverse toute la coquille */ } .lfs-main { flex: 1 1 auto; min-width: 0; /* sans ca un tableau large pousse la sidebar hors ecran */ display: flex; flex-direction: column; } .lfs-content { flex: 1 0 auto; display: flex; flex-direction: column; /* Transparent : le degrade du traverse. Un fond clair ici recouvrirait le degrade et casserait toutes les pages ecrites en clair dessus (bulk, similars, AI Search, keywords). Les pages qui doivent paraitre claires peignent leur propre section .project-header par-dessus. */ background: transparent; } /* Contenu plus court que la fenetre (bulk sans encart sponsor, page d'erreur, etat vide...) : on le centre verticalement dans la hauteur restante plutot que de le laisser colle sous la barre haute. Deux pseudo-elements a marge auto, et non justify-content:center : une marge auto retombe a 0 des qu'il n'y a plus d'espace libre, la ou justify-content rognerait le haut du contenu des qu'il deborde (partie inatteignable au scroll). */ .lfs-content::before, .lfs-content::after { content: ""; } .lfs-content::before { margin-top: auto; } .lfs-content::after { margin-bottom: auto; } /* ------------------------------------------------------- sidebar (rail vert) */ .lfs-side { flex: 0 0 var(--lfs-w); width: var(--lfs-w); /* Voile uniforme sur le degrade du , pas un second degrade : l'ecart avec le contenu reste CONSTANT sur toute la hauteur, la colonne se lit sans que la couture n'accroche l'oeil. */ background: rgba(16, 53, 37, .16); border-right: 1px solid rgba(255, 255, 255, .16); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 60; transition: flex-basis .18s ease, width .18s ease; } .lfs-brand { display: flex; align-items: center; gap: 8px; height: var(--lfs-top); padding: 0 12px 0 20px; /* Transparent comme la barre haute : le degrade du traverse le bandeau du haut d'un bord a l'autre, seul le filet marque la separation. */ border-bottom: 1px solid rgba(216, 243, 226, .25); flex: 0 0 auto; } .lfs-brand img { display: block; } /* Replie, on ne garde que le pictogramme — mais il est vert : sur le rail vert il disparaitrait. On le pose donc sur une pastille blanche. */ .lfs-brand-mark { display: none; width: 34px; height: 34px; border-radius: 9px; background: #fff; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(16, 53, 37, .2); } .lfs-pin { margin-left: auto; width: 28px; height: 28px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px; background: transparent; color: var(--brand-0); font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, border-color .15s; } .lfs-pin:hover { background: rgba(255, 255, 255, .18); border-color: #fff; } /* --------------------------------------------------------------------- nav */ .lfs-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 10px 0 16px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .35) transparent; } .lfs-nav::-webkit-scrollbar { width: 6px; } .lfs-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .35); border-radius: 3px; } .lfs-sec { padding: 16px 20px 6px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255, 255, 255, .72); white-space: nowrap; } .lfs-item { position: relative; display: flex; align-items: center; gap: 12px; margin: 2px 10px; padding: 9px 12px; border: 1px solid transparent; border-radius: 10px; color: #fff; font-size: 15px; font-weight: 600; letter-spacing: -.02em; line-height: 20px; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; } .lfs-item:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .28); color: #fff; text-decoration: none; } /* Actif : pastille claire sur le rail vert — l'inverse du reste de la nav, c'est ce qui la rend reperable d'un coup d'oeil. */ .lfs-item.on { background: var(--brand-0); border-color: var(--brand-10); color: var(--brand-70); font-weight: 700; box-shadow: 0 1px 2px rgba(16, 53, 37, .22); } .lfs-item i { flex: 0 0 20px; width: 20px; font-size: 16px; text-align: center; color: rgba(255, 255, 255, .82); } .lfs-item:hover i { color: #fff; } .lfs-item.on i { color: var(--brand-50); } .lfs-lab { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; } /* Entree sans destination : inerte, et qui le montre. */ .lfs-item.soon { opacity: .5; cursor: default; } .lfs-item.soon:hover { background: transparent; border-color: transparent; } /* Fleche discrete sur les liens qui ouvrent un onglet. */ .lfs-ext { flex: 0 0 auto; font-size: 10px !important; opacity: .55; } .lfs-badge { flex: 0 0 auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 6px; border-radius: 999px; background: #DC3545; color: #fff; } .lfs-badge.beta { background: rgba(255, 255, 255, .9); color: var(--brand-60); } /* 'new' = mention d'attention (Lucio, 2026-09-05) : pas de pastille, pas de cercle, juste le mot en italique a cote du libelle. Remplace l'ancien 'top' a contour. */ .lfs-badge.new { background: transparent; border: 0; padding: 0; border-radius: 0; font-style: italic; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 11px; color: rgba(255, 255, 255, .85); } .lfs-item.on .lfs-badge.new { color: var(--brand-60); } .lfs-item.on .lfs-badge.beta { background: var(--brand-10); } /* ------------------------------------------------------------ pied sidebar */ .lfs-foot { flex: 0 0 var(--lfs-foot); height: var(--lfs-foot); display: flex; align-items: center; position: relative; border-top: 1px solid rgba(255, 255, 255, .16); padding: 0 10px; } .lfs-user { width: 100%; display: flex; align-items: center; gap: 9px; padding: 6px 8px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #fff; text-align: left; cursor: pointer; transition: background .15s, border-color .15s; } .lfs-user:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .28); } .lfs-ava { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-0); color: var(--brand-60); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .lfs-uinfo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .lfs-uinfo strong { font-size: 13px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lfs-uinfo small { font-size: 11px; color: rgba(255, 255, 255, .78); } .lfs-ucaret { flex: 0 0 auto; font-size: 11px; color: rgba(255, 255, 255, .78); } .lfs-umenu { position: absolute; left: 10px; right: 10px; bottom: calc(100% - 4px); background: #fff; border: 1px solid var(--brand-20); border-radius: 12px; padding: 6px; box-shadow: 0 12px 28px rgba(16, 53, 37, .22); z-index: 70; } .lfs-umenu a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--brand-70); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; } .lfs-umenu a:hover { background: var(--brand-0); } .lfs-umenu a i { width: 16px; text-align: center; color: var(--brand-40); } .lfs-umenu hr { margin: 6px 4px; border: 0; border-top: 1px solid var(--brand-10); opacity: 1; } /* ---------------------------------------------------- barre haute (claire) */ /* La barre haute et le pied reprennent le .container Bootstrap du contenu : leurs elements tombent ainsi exactement sur la grille des pages, au lieu d'etre colles a 24px du rail pendant que le contenu est centre a 1320px. */ .lfs-top-in { display: flex; align-items: center; gap: 14px; height: 100%; } /* Bloc droit : plan, support, compte. */ .lfs-top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; } .lfs-top-right a { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: var(--brand-10); font-size: 15px; text-decoration: none; transition: background .15s, color .15s; } .lfs-top-right a:hover { background: rgba(255, 255, 255, .14); color: #fff; } /* Lien avec libelle (Support) : le carre de 34px devient une pastille qui s'ajuste. */ .lfs-top-right a.lfs-with-text { width: auto; gap: 8px; padding: 0 12px; font-size: 14px; font-weight: 600; letter-spacing: -.02em; } /* Page courante : la barre haute porte maintenant des liens de navigation, ils doivent pouvoir montrer l'etat actif comme les items du rail. */ /* Page courante : la barre haute porte de la navigation, elle doit montrer l'etat actif. */ .lfs-top-right a.on { background: rgba(255, 255, 255, .18); color: #fff; } @media (max-width: 575.98px) { .lfs-top-right a.lfs-with-text span { display: none; } /* icone seule sur mobile */ .lfs-top-right a.lfs-with-text { width: 34px; padding: 0; } } .lfs-plan { font-size: 12px; font-weight: 600; color: var(--brand-10); background: rgba(255, 255, 255, .1); border: 1px solid rgba(216, 243, 226, .35); border-radius: 999px; padding: 4px 12px; white-space: nowrap; } .lfs-top { flex: 0 0 auto; height: var(--lfs-top); display: flex; align-items: stretch; padding: 0; /* Le fond du , comme le reste de la coquille. Consequence assumee : la barre n'est plus collante. Un bandeau transparent qui reste en haut laisserait le contenu defiler DERRIERE lui, texte sur texte ; c'est le fond opaque qui payait le collage. Le rail, lui, reste visible en permanence. */ background: transparent; border-bottom: 1px solid rgba(216, 243, 226, .25); } .lfs-burger { display: none; width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 9px; background: transparent; color: #fff; cursor: pointer; } .lfs-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Fil d'ariane : la section en retrait, la page en pleine valeur. */ .lfs-crumb { font-weight: 600; opacity: .62; } .lfs-crumb-sep { font-size: 9px; opacity: .45; } /* ------------------------------------------------- clavier et accessibilite */ /* Saute les 12 entrees de nav. Invisible tant qu'il n'a pas le focus. */ .lfs-skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 10px 16px; border-radius: 0 0 10px 0; background: var(--brand-70); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; } .lfs-skip:focus { left: 0; color: #fff; } /* Le focus par defaut du navigateur se perd sur le vert. Anneau explicite, et uniquement au focus CLAVIER : :focus-visible ne se declenche pas a la souris. */ .lfs-shell :focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 10px; } .lfs-content:focus-visible { outline: none; } /* cible du lien d'evitement, pas un controle */ @media (prefers-reduced-motion: reduce) { .lfs-side, .lfs-item, .lfs-user, .lfs-pin, .lfs-top-right a, .lfs-item::after { transition: none; } } /* -------------------------------------------------------------- repli 76px */ html.lfs-collapsed .lfs-side { flex-basis: var(--lfs-w-min); width: var(--lfs-w-min); } /* Replie : le pictogramme ET le chevron de reouverture tiennent dans les 76px. Le bouton restait masque et il fallait deviner qu'on rouvrait en cliquant le logo — personne ne le trouve. Les tailles sont resserrees pour que les deux entrent : 26 + 22 + 6 de gouttiere + 2 x 10 de marge = 74. */ html.lfs-collapsed .lfs-brand { padding: 0 10px; gap: 6px; justify-content: center; } html.lfs-collapsed .lfs-brand-mark { width: 26px; height: 26px; border-radius: 7px; } html.lfs-collapsed .lfs-brand-mark img { width: 20px; height: 20px; } html.lfs-collapsed .lfs-pin { margin-left: 0; width: 22px; height: 22px; } /* Meme icone, retournee : elle pointe vers l'exterieur, dans le sens de l'ouverture. */ html.lfs-collapsed .lfs-pin i { transform: rotate(180deg); } html.lfs-collapsed .lfs-brand-full, html.lfs-collapsed .lfs-sec span, html.lfs-collapsed .lfs-lab, html.lfs-collapsed .lfs-badge, html.lfs-collapsed .lfs-ext, html.lfs-collapsed .lfs-uinfo, html.lfs-collapsed .lfs-ucaret { display: none; } html.lfs-collapsed .lfs-brand-mark { display: flex; } html.lfs-collapsed .lfs-item, html.lfs-collapsed .lfs-user { justify-content: center; padding-left: 0; padding-right: 0; } html.lfs-collapsed .lfs-sec { /* l'intertitre devient un simple filet */ height: 1px; padding: 0; margin: 12px 14px 8px; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, .3); } html.lfs-collapsed .lfs-umenu { left: 8px; width: 210px; right: auto; } /* Infobulle sur le rail : sans libelle, les icones seules ne suffisent pas. */ html.lfs-collapsed .lfs-item::after { content: attr(data-lab); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: var(--brand-70); color: #fff; border-radius: 8px; padding: 6px 10px; font-size: 13px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 80; } html.lfs-collapsed .lfs-item:hover::after, html.lfs-collapsed .lfs-item:focus-visible::after { opacity: 1; } /* aussi au clavier */ /* ------------------------------------------------------------------ footer */ .lfs-footer { flex: 0 0 auto; /* pousse en bas par .lfs-content (flex:1) */ display: block; /* la mise en ligne est faite par .lfs-footer-in */ padding: 0; /* la hauteur vient de --lfs-foot, le calage du .container */ background: transparent; border-top: 1px solid rgba(216, 243, 226, .25); } .lfs-footer-in { display: flex; align-items: center; min-height: calc(var(--lfs-foot) - 1px); /* -1px : le filet du .lfs-footer */ justify-content: space-between; gap: 16px; flex-wrap: wrap; } .lfs-footer-logo { display: inline-flex; opacity: .7; transition: opacity .15s; } .lfs-footer-logo:hover { opacity: 1; } .lfs-footer-logo img { display: block; } .lfs-footer span { font-size: 13px; color: var(--brand-10); } .lfs-footer span a { color: #fff; text-decoration: underline; } /* ------------------------------------------------------------------ mobile */ .lfs-scrim { display: none; position: fixed; inset: 0; background: rgba(16, 53, 37, .35); z-index: 55; } @media (max-width: 991.98px) { .lfs-side { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(16, 53, 37, .25); } html.lfs-collapsed .lfs-side { /* en mobile le drawer est toujours deploye */ flex-basis: var(--lfs-w); width: var(--lfs-w); } html.lfs-collapsed .lfs-brand-full, html.lfs-collapsed .lfs-sec span, html.lfs-collapsed .lfs-lab, html.lfs-collapsed .lfs-badge, html.lfs-collapsed .lfs-ext, html.lfs-collapsed .lfs-uinfo, html.lfs-collapsed .lfs-ucaret { display: revert; } html.lfs-collapsed .lfs-brand-mark { display: none; } html.lfs-collapsed .lfs-item::after { content: none; } html.lfs-collapsed .lfs-sec { height: auto; border-top: 0; margin: 0; padding: 16px 20px 6px; } html.lfs-collapsed .lfs-item, html.lfs-collapsed .lfs-user { justify-content: flex-start; padding-left: 12px; padding-right: 12px; } /* Le mode 'flow' pose un simple voile translucide sur le rail : parfait quand il est accole au contenu, sale des qu'il devient un tiroir qui PASSE PAR-DESSUS la page. En mobile on le rend donc opaque, avec le vert fonce du bas du degrade. */ .lfs-side { background: #103525; } .lfs-brand { background: transparent; backdrop-filter: none; } html.lfs-open .lfs-side { transform: none; } html.lfs-open .lfs-scrim { display: block; } /* Sans ca, le doigt qui glisse sur le tiroir fait defiler la page derriere. */ html.lfs-open, html.lfs-open body { overflow: hidden; } .lfs-burger { display: flex; align-items: center; justify-content: center; } } /* ========================================================================= Rattrapage scope .lfs-content — necessaire, pas cosmetique : cette regle existante soustrait la hauteur de la navbar horizontale + du footer pleine largeur (193px). Sans navbar horizontale, le calcul laisse un bandeau mort. ====================================================================== */ .lfs-content .project-header, .lfs-content .spns-article { /* On ANNULE le calcul d'origine (100vh - 193px) au lieu de le re-parametrer : toute valeur en dur finit fausse des que la barre haute ou le pied changent d'un pixel, et le trop-plein se paie en scroll sur une page courte. */ min-height: 0; } /* C'est la section qui s'etire pour occuper la place restante, mesuree par le flex et non estimee : sur une page courte le pied de page tombe donc pile en bas de fenetre, visible sans scroller, quelle que soit sa hauteur reelle. Sur une page longue, elle depasse naturellement et la page scrolle. */ .lfs-content > .project-header, .lfs-content > .spns-article { flex: 1 0 auto; } /* --------------------------------------------- bloc « Explications » (col-lg-3) projects.php, forums, veille : quatre phrases occupent une colonne entiere a droite, soit un quart de la largeur, et leur aplat vert fonce tranche sur la section claire. Dans la coquille verticale la largeur est deja rognee de 252px par le rail, on ne peut plus se le permettre : les colonnes de la rangee passent en pleine largeur et le bloc devient une bande sous le contenu. :has() vise la rangee PARENTE sans toucher au markup des pages. Un navigateur qui ne le connait pas ignore la regle et retombe sur la mise en page d'origine. */ .lfs-content .row:has(> [class*="col-"] > .project-explanations) > [class*="col-"] { flex: 0 0 100%; max-width: 100%; } .lfs-content .project-explanations { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 22px; margin-top: 16px; padding: 10px 16px; } .lfs-content .project-explanations h6 { font-size: 13px; line-height: 18px; text-transform: uppercase; letter-spacing: .08em; margin: 0; } /* La liste passe en ligne. Un

devenu element flex perd sa puce native, d'ou le compteur CSS pour garder la numerotation d'origine (list-style-type: decimal). */ .lfs-content .project-explanations ul { flex-direction: row; flex-wrap: wrap; gap: 4px 22px; margin: 0; padding-left: 0; counter-reset: lfsx; } .lfs-content .project-explanations ul li { counter-increment: lfsx; font-size: 14px; line-height: 20px; } .lfs-content .project-explanations ul li::before { content: counter(lfsx) ". "; opacity: .65; }