/* ========================================================================== HEDGEFLOW — pages légales, gabarit « document » (plan de design §12) Servie à /vitrine/css/legal.css, chargée APRÈS /vitrine/css/vitrine.css. Se suffit à elle-même : police locale, jetons, mise en page. Toutes les règles visent des classes .lg-… portées par , pour ne pas dépendre des règles d'éléments de vitrine.css. Aucun hex hors des blocs :root (règle nº 1 du skill hedgeflow-ui). Tailles de texte en rem (plan §3.4 : elles suivent la taille de police choisie dans le navigateur). En-tête et pied : ceux de la landing (blocs ENTETE/PIED copiés de index.html, stylés par vitrine.css ; vitrine.js les anime). ========================================================================== */ /* ---------- Police : Archivo variable, sous-ensemble latin, servie par le site (OFL 1.1) */ @font-face{ font-family:"Archivo"; src:url("/vitrine/fonts/archivo-latin.e3a28eade2.woff2") format("woff2"); font-weight:400 800; font-stretch:62% 125%; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- Jetons : copie des jetons de l'application + jetons vitrine (plan §2.1) */ :root{ --bg:#000000; --bg2:#080809; --panel:#0b0c0e; --panelHead:#141519; --line:#1d1f23; --line2:#2b2e34; --txt:#e6e8ea; --mut:#8b909a; --mut2:#565b64; --blue:#3d9bd6; --green:#33c06a; --silver:#cdd6e0; --amber:#ff9e2c; --amber-dim:#c58a3e; --frame:#c85333; --frame-dim:#6e2f1d; --teal:#3fb6bf; --all:#6c63e0; --next:#33c06a; --ret:#ef4444; --px:#f4f5f7; --pos:#33c06a; --neg:#ff5a4d; --calls:#ff9e2c; --puts:#3d9bd6; --net:#6c63e0; --frame-cta:#c45031; --frame-cta-hi:#b0472a; --lvl-hvl:#5c8fe0; --lvl-gwall:#e0a44b; --on-frame:#ffffff; --f-page:"Archivo", "Segoe UI", system-ui, sans-serif; --f-chrome:"Segoe UI", system-ui, sans-serif; } /* ---------- Base */ html{ background:var(--bg); color-scheme:dark; scroll-padding-top:68px; /* en-tête collant 52 px + 16 px (même valeur que vitrine.css) */ -webkit-text-size-adjust:100%; text-size-adjust:100%; } @media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } } body.lg-doc{ display:block; margin:0; padding:0; min-height:100vh; background:var(--bg); color:var(--txt); font-family:var(--f-page); font-size:1rem; line-height:1.625rem; font-weight:400; font-stretch:100%; overflow:visible; } .lg-doc *, .lg-doc *::before, .lg-doc *::after{ box-sizing:border-box; } .lg-doc :focus-visible{ outline:2px solid var(--teal); outline-offset:2px; } .lg-doc .lg-main:focus{ outline:none; } /* Lien d'évitement */ .lg-doc .lg-saut{ position:absolute; left:8px; top:-120px; z-index:100; padding:8px 12px; background:var(--panelHead); color:var(--txt); border:1px solid var(--line2); border-radius:2px; font:500 0.8125rem/1.25rem var(--f-page); text-decoration:none; } .lg-doc .lg-saut:focus{ top:8px; } /* ========================================================================== En-tête et pied de la landing (vitrine.css) : seuls ajustements du gabarit « document » ========================================================================== */ /* le document finit déjà par 96 px de marge : pas de seconde marge au-dessus du pied */ .lg-doc .pied{ margin-top:0; } /* ========================================================================== Cadre : menu DOCUMENTS (réplique du menu de l'application) + document ========================================================================== */ .lg-doc .lg-cadre{ position:relative; display:grid; grid-template-columns:208px minmax(0, 1fr); align-items:start; margin:0; padding:0; } /* fond de la colonne du menu, sur toute la hauteur du document (comme #nav dans l'app) */ .lg-doc .lg-cadre::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:208px; background:var(--panel); border-right:1px solid var(--line2); pointer-events:none; } .lg-doc .lg-docs{ position:sticky; top:52px; z-index:1; max-height:calc(100vh - 52px); max-height:calc(100svh - 52px); overflow-y:auto; display:flex; flex-direction:column; margin:0; padding:4px 0 16px; background:transparent; border:0; } .lg-doc .lg-docs-t{ margin:0; padding:16px 14px 6px; font:700 0.6875rem/1rem var(--f-chrome); letter-spacing:1.3px; text-transform:uppercase; color:var(--amber-dim); } .lg-doc .lg-docs ul{ list-style:none; margin:0; padding:0; } .lg-doc .lg-docs li{ margin:0; padding:0; } .lg-doc .lg-docs a{ display:block; padding:8px 14px 8px 12px; border-left:2px solid transparent; color:var(--mut); text-decoration:none; font:500 0.8125rem/1.25rem var(--f-page); transition:color 140ms ease, background-color 140ms ease, border-color 160ms ease; } .lg-doc .lg-docs a:hover{ color:var(--txt); background:var(--panelHead); } .lg-doc .lg-docs a[aria-current="page"]{ color:var(--txt); background:var(--panelHead); border-left-color:var(--teal); } .lg-doc .lg-docs-retour{ margin:8px 0 0; padding:8px 0 0; border-top:1px solid var(--line2); } .lg-doc .lg-etiq{ color:var(--mut); font-weight:400; } /* Anneau de focus DANS le lien : le menu et le sommaire défilent (overflow), un anneau décalé vers l'extérieur y serait rogné (revue lecture I1 ; même règle que .nav-liste a:focus-visible de vitrine.css). */ .lg-doc .lg-docs a:focus-visible, .lg-doc .lg-toc a:focus-visible{ outline-offset:-2px; } /* ---------- Document */ .lg-doc .lg-main{ display:block; min-width:0; margin:0; padding:0; } .lg-doc .lg-article{ display:grid; grid-template-columns:minmax(0, 45rem) 14.5rem; grid-template-areas:"tete toc" "corps toc"; column-gap:64px; align-items:start; justify-content:start; margin:0; padding:40px 32px 96px; } .lg-doc .lg-tete{ grid-area:tete; min-width:0; margin:0; padding:0; background:none; border:0; position:static; } .lg-doc .lg-corps{ grid-area:corps; min-width:0; } .lg-doc .lg-tete h1{ margin:0 0 8px; font-family:var(--f-page); font-stretch:80%; font-weight:700; font-size:2rem; line-height:2.25rem; letter-spacing:0; color:var(--txt); text-wrap:balance; } .lg-doc .lg-version{ margin:0 0 24px; font-size:0.8125rem; line-height:1.25rem; color:var(--mut); } /* Bandeau provisoire : réplique d'un panneau (.panel + .panel-head), sans ombre ; largeur calée sur la mesure du texte (66 caractères, revue lecture M3) */ .lg-doc .lg-bandeau{ display:block; max-width:66ch; margin:0 0 40px; padding:0; background:var(--panel); border:1px solid var(--frame); border-radius:2px; } .lg-doc .lg-bandeau-h{ display:flex; align-items:center; min-height:32px; margin:0; padding:0 12px; background:var(--panelHead); border-bottom:1px solid var(--frame-dim); font:600 0.6875rem/1 var(--f-chrome); letter-spacing:1.2px; text-transform:uppercase; color:var(--amber); } .lg-doc .lg-bandeau-c{ margin:0; padding:12px 16px 14px; font-size:0.875rem; line-height:1.375rem; color:var(--txt); } /* Sommaire à ancres : colonne collante à droite (≥ 1024 px), en tête du texte sinon */ .lg-doc .lg-toc{ grid-area:toc; position:sticky; top:84px; max-height:calc(100vh - 108px); max-height:calc(100svh - 108px); overflow-y:auto; margin:0; padding:0; background:none; border:0; } .lg-doc .lg-toc-t{ margin:0 0 8px; font:700 0.6875rem/1rem var(--f-chrome); letter-spacing:1.3px; text-transform:uppercase; color:var(--amber-dim); } .lg-doc .lg-toc ol{ list-style:none; margin:0; padding:0; border-left:1px solid var(--line2); } .lg-doc .lg-toc li{ margin:0; padding:0; break-inside:avoid; } .lg-doc .lg-toc a{ display:block; margin-left:-1px; padding:4px 0 4px 12px; border-left:1px solid transparent; color:var(--mut); text-decoration:none; font:500 0.8125rem/1.25rem var(--f-page); transition:color 140ms ease, border-color 140ms ease; } .lg-doc .lg-toc a:hover{ color:var(--txt); border-left-color:var(--mut); } /* ---------- Texte */ .lg-doc .lg-corps section{ display:block; margin:0; padding:0; background:none; border:0; min-height:0; } .lg-doc .lg-corps h2{ margin:48px 0 12px; font-family:var(--f-page); font-stretch:87%; font-weight:650; font-size:1.1875rem; line-height:1.625rem; letter-spacing:0; text-transform:none; color:var(--txt); text-wrap:balance; } .lg-doc .lg-corps > section:first-child > h2{ margin-top:0; } .lg-doc .lg-chapeau + section > h2{ margin-top:32px; } .lg-doc .lg-corps h3{ margin:28px 0 8px; font-family:var(--f-page); font-stretch:100%; font-weight:650; font-size:1rem; line-height:1.5rem; letter-spacing:0; color:var(--txt); } .lg-doc .lg-corps p, .lg-doc .lg-corps li{ max-width:66ch; font-size:1rem; line-height:1.625rem; color:var(--txt); hyphens:auto; -webkit-hyphens:auto; hyphenate-limit-chars:10 4 4; text-wrap:pretty; } .lg-doc .lg-corps p{ margin:0 0 16px; } .lg-doc .lg-corps ul, .lg-doc .lg-corps ol{ margin:0 0 16px; padding:0 0 0 24px; } .lg-doc .lg-corps ul{ list-style:disc outside; } .lg-doc .lg-corps ol{ list-style:decimal outside; } .lg-doc .lg-corps li{ margin:0 0 8px; } .lg-doc .lg-corps li::marker{ color:var(--mut); } .lg-doc .lg-corps ol.lg-alpha{ list-style-type:lower-alpha; padding-left:28px; } .lg-doc .lg-corps ol.lg-alpha > li::marker{ content:counter(list-item, lower-alpha) ") "; } .lg-doc .lg-corps strong{ font-weight:650; color:var(--txt); } .lg-doc .lg-corps a{ color:var(--txt); text-decoration:underline; text-decoration-thickness:1px; text-decoration-color:var(--mut); text-underline-offset:3px; transition:text-decoration-color 140ms ease; } .lg-doc .lg-corps a:hover{ text-decoration-color:var(--blue); } /* Champs à compléter, choix, points à valider : visibles d'un coup d'œil, jamais inventés */ .lg-doc .todo{ color:var(--amber); font-weight:600; hyphens:manual; -webkit-hyphens:manual; border-bottom:1px dashed var(--amber-dim); -webkit-box-decoration-break:clone; box-decoration-break:clone; } /* Fiche clé / valeur (éditeur, publication, contact) : lignes 36 px, filet --line */ .lg-doc .lg-fiche{ display:grid; grid-template-columns:minmax(160px, 30%) minmax(0, 1fr); max-width:45rem; margin:0 0 16px; padding:0; border-top:1px solid var(--line); } .lg-doc .lg-fiche dt, .lg-doc .lg-fiche dd{ margin:0; padding:8px 0; min-height:36px; border-bottom:1px solid var(--line); } .lg-doc .lg-fiche dt{ padding-top:10px; padding-right:16px; font-size:0.8125rem; line-height:1.25rem; font-weight:500; color:var(--mut); } .lg-doc .lg-fiche dd{ font-size:0.9375rem; line-height:1.375rem; color:var(--txt); } /* Tableaux (plan §5). Au-dessus de 600 px, ils tiennent dans la colonne (560 px au moins, colonne ≥ 568 px) ; la boîte garde un défilement de secours, sans arrêt clavier (revue lecture M4). En dessous : blocs empilés. */ .lg-doc .lg-tablewrap{ max-width:100%; margin:0 0 24px; overflow-x:auto; scrollbar-width:thin; } .lg-doc .lg-table{ width:100%; min-width:560px; border-collapse:collapse; font-size:0.875rem; line-height:1.25rem; font-variant-numeric:tabular-nums; } .lg-doc .lg-table caption{ caption-side:top; text-align:left; padding:0 0 8px; font-size:0.8125rem; line-height:1.25rem; color:var(--mut); } .lg-doc .lg-table th, .lg-doc .lg-table td{ padding:8px 16px 8px 0; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); hyphens:manual; -webkit-hyphens:manual; } .lg-doc .lg-table th:last-child, .lg-doc .lg-table td:last-child{ padding-right:0; } .lg-doc .lg-table thead th{ font-size:0.8125rem; font-weight:500; color:var(--mut); border-bottom:1px solid var(--line2); white-space:nowrap; } .lg-doc .lg-table tbody th{ font-weight:600; color:var(--txt); } .lg-doc .lg-table .lg-sous{ display:block; margin-top:2px; font-size:0.8125rem; line-height:1.125rem; font-weight:400; color:var(--mut); } .lg-doc .lg-table td{ color:var(--txt); } /* ========================================================================== Points de rupture (plan §4.1) ========================================================================== */ /* M et en dessous : le menu DOCUMENTS devient une rangée sous l'en-tête. Elle passe à la ligne au lieu de défiler : les 6 documents et l'entrée courante restent toujours visibles (revue lecture I3). */ @media (max-width:1279.98px){ .lg-doc .lg-cadre{ display:block; } .lg-doc .lg-cadre::before{ display:none; } .lg-doc .lg-docs{ position:static; max-height:none; overflow:visible; background:var(--panel); flex-direction:row; align-items:flex-start; padding:0 8px; border-right:0; border-bottom:1px solid var(--line2); } /* centre de l'étiquette (11/16) aligné sur celui des liens de la 1re ligne (13/20) */ .lg-doc .lg-docs-t{ flex:none; padding:15px 12px 0 8px; } .lg-doc .lg-docs ul{ display:flex; flex-wrap:wrap; flex:1 1 auto; min-width:0; } .lg-doc .lg-docs a{ padding:13px 10px 11px; border-left:0; border-bottom:2px solid transparent; white-space:nowrap; } .lg-doc .lg-docs a[aria-current="page"]{ border-bottom-color:var(--teal); } .lg-doc .lg-docs-retour{ display:none; } .lg-doc .lg-article{ padding:32px 24px 80px; column-gap:48px; } } /* S et XS : une colonne, sommaire en tête du texte */ @media (max-width:1023.98px){ .lg-doc .lg-article{ display:block; padding:28px 16px 64px; } .lg-doc .lg-toc{ position:static; max-height:none; overflow:visible; margin:0 0 40px; padding:12px 0 4px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .lg-doc .lg-toc ol{ border-left:0; columns:2; column-gap:32px; } .lg-doc .lg-toc a{ margin-left:0; padding:4px 0; border-left:0; } } @media (max-width:599.98px){ /* rangée DOCUMENTS : l'étiquette (décorative, aria-hidden) laisse la place aux liens */ .lg-doc .lg-docs{ padding:4px 6px; } .lg-doc .lg-docs-t{ display:none; } .lg-doc .lg-docs a{ padding:9px 10px 7px; } html{ scroll-padding-top:64px; } .lg-doc .lg-tete h1{ font-size:1.625rem; line-height:1.875rem; } .lg-doc .lg-bandeau{ margin-bottom:32px; } .lg-doc .lg-toc ol{ columns:1; } .lg-doc .lg-corps h2{ margin-top:40px; } .lg-doc .lg-corps p, .lg-doc .lg-corps li{ line-height:1.5625rem; } .lg-doc .lg-fiche{ grid-template-columns:minmax(0, 1fr); } .lg-doc .lg-fiche dt{ min-height:0; padding:10px 0 0; border-bottom:0; } .lg-doc .lg-fiche dd{ padding:2px 0 10px; } /* tableaux : une ligne = un bloc, intitulés repris au-dessus de chaque valeur */ .lg-doc .lg-tablewrap{ overflow-x:visible; } .lg-doc .lg-table{ display:block; min-width:0; } .lg-doc .lg-table caption{ display:block; } .lg-doc .lg-table thead{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } .lg-doc .lg-table tbody, .lg-doc .lg-table tr, .lg-doc .lg-table th, .lg-doc .lg-table td{ display:block; } .lg-doc .lg-table tbody{ border-top:1px solid var(--line2); } .lg-doc .lg-table tr{ padding:12px 0 4px; border-bottom:1px solid var(--line); } .lg-doc .lg-table tbody th, .lg-doc .lg-table td{ padding:0 0 8px; border:0; font-size:0.9375rem; line-height:1.375rem; } /* intitulé visible seulement : texte de remplacement vide pour les lecteurs d'écran, qui ont déjà l'en-tête de colonne (revue lecture M5). Première déclaration = repli pour les navigateurs sans la syntaxe « / "" ». */ .lg-doc .lg-table td::before{ content:attr(data-label); content:attr(data-label) / ""; display:block; font-size:0.8125rem; line-height:1.25rem; font-weight:500; color:var(--mut); } } /* ---------- Mouvement réduit : tout devient instantané, pas de respiration */ @media (prefers-reduced-motion:reduce){ .lg-doc *, .lg-doc *::before, .lg-doc *::after{ transition-duration:0s; } } /* ---------- Couleurs forcées (contraste élevé Windows) : la pastille garde sa couleur d'état et un contour ; seule l'entrée courante du menu porte un liseré (revue lecture M1). */ @media (forced-colors:active){ .lg-doc .pastille{ forced-color-adjust:none; border:1px solid CanvasText; } .lg-doc .todo{ border-bottom-style:dashed; } .lg-doc .lg-docs a, .lg-doc .lg-toc a{ border-color:Canvas; } .lg-doc .lg-docs a[aria-current="page"]{ border-color:Highlight; } } /* ---------- Impression : fond blanc, texte noir, sans en-tête ni menus (plan §12) ; le pied garde l'avertissement, les marques et les crédits (revue lecture M7). */ @media print{ :root{ --bg:#ffffff; --panel:#ffffff; --panelHead:#ffffff; --txt:#000000; --mut:#333333; --mut2:#666666; --line:#bbbbbb; --line2:#888888; --amber:#000000; --amber-dim:#555555; --frame:#000000; --frame-dim:#888888; } body.lg-doc{ font-size:11pt; line-height:1.5; } .lg-doc .hdr, .lg-doc .lg-docs, .lg-doc .lg-toc, .lg-doc .pied-barre, .lg-doc .pied-liens, .lg-doc .lg-saut{ display:none !important; } .lg-doc .lg-cadre::before{ display:none; } .lg-doc .lg-cadre, .lg-doc .lg-article{ display:block; padding:0; } .lg-doc .lg-corps p, .lg-doc .lg-corps li{ max-width:none; font-size:11pt; line-height:1.5; } .lg-doc .lg-corps a{ text-decoration:none; } .lg-doc .lg-corps a[href^="http"]::after, .lg-doc .lg-corps a[href^="/"]::after{ content:" (" attr(href) ")"; } .lg-doc .lg-corps h2{ break-after:avoid; } .lg-doc .lg-table{ min-width:0; } .lg-doc .pied{ margin:24pt 0 0; padding:12pt 0 0; background:none; border-top:1px solid var(--line2); break-inside:avoid; } .lg-doc .pied-corps{ padding:0; } .lg-doc .pied-corps p{ font-size:9pt; line-height:1.4; } .lg-doc .pied a{ text-decoration:none; } }