/* club-theme.css — Styles de la barre/menu de navigation Club + couche de * modernisation des pages outils. Extrait de js/club-theme.js (chargé via * dans le des 17 pages outils). Le thème dynamique (couleurs du * club) reste piloté par club-theme.js via les variables CSS --rose/--navy/…. */ /* ── Polices DA AUTO-HÉBERGÉES (woff2 locaux) ──────────────────────────────── * Sert Saira Condensed / DM Sans / Space Mono depuis /assets/fonts → supprime * la requête Google Fonts BLOQUANTE des pages outils (gain render-blocking). * Mêmes familles/poids qu'avant ; font-display:swap = aucun texte invisible. */ @font-face{font-family:'Saira Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/saira-condensed-500.woff2') format('woff2')} @font-face{font-family:'Saira Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/saira-condensed-600.woff2') format('woff2')} @font-face{font-family:'Saira Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/saira-condensed-700.woff2') format('woff2')} @font-face{font-family:'Saira Condensed';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/saira-condensed-800.woff2') format('woff2')} @font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url('/assets/fonts/dm-sans-var.woff2') format('woff2')} @font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/space-mono-400.woff2') format('woff2')} @font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/space-mono-700.woff2') format('woff2')} /* ── Couche de modernisation (titres géants à point rose, kicker en pavé) ── */ main.wrap>h1,main .wrap>h1,h1{font-size:clamp(2.3rem,5.2vw,3.4rem)!important;line-height:.88!important;letter-spacing:-.015em!important;margin:14px 0 10px!important} h1::after{content:".";color:var(--rose,#D8466F)} .eyebrow{display:inline-block!important;background:var(--rose-text,#B5365B)!important;color:#fff!important;padding:3px 10px!important;font-size:.68rem!important;letter-spacing:.16em!important} .lead{font-size:1.02rem!important;max-width:60ch;line-height:1.6!important} h2{letter-spacing:-.01em!important} .mast .brand .s{letter-spacing:.08em!important} .mast{border-bottom-width:2px} /* ── Barre slim ── */ /* Bandeau club = en-tête UNIQUE des pages outils : on masque le .mast propre à chaque page (redondant) et on rend le bandeau collant pour garder la nav club accessible au scroll. (championnat garde son .mast : il y loge ses contrôles.) */ .mast{display:none} .lpct-bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;background:var(--paper,#F2EDE2);border-bottom:2px solid var(--ink,#10182E);padding:7px 12px;font-family:"Saira Condensed","Arial Narrow",sans-serif} .lpct-burger{flex:none;display:flex;align-items:center;gap:7px;font-family:"Saira Condensed",sans-serif;text-transform:uppercase;font-weight:800;font-size:.82rem;letter-spacing:.04em;color:var(--paper,#F2EDE2);background:var(--ink,#10182E);border:2px solid var(--ink,#10182E);padding:7px 11px;cursor:pointer;line-height:1} .lpct-burger:hover{background:var(--rose,#D8466F);border-color:var(--rose,#D8466F)} .lpct-burger b{font-size:1.05rem;line-height:1} .lpct-id{display:flex;align-items:center;gap:8px;flex:none;max-width:34vw;text-decoration:none} .lpct-logo{width:24px;height:24px;object-fit:contain;flex:none} .lpct-name{text-transform:uppercase;font-weight:800;font-size:.95rem;color:var(--ink,#10182E);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1} .lpct-name small{display:block;font-family:"Space Mono",monospace;font-size:.5rem;letter-spacing:.14em;color:var(--muted,#5d6374);font-weight:400} .lpct-cur{flex:1 1 auto;text-align:center;font-family:"Saira Condensed",sans-serif;text-transform:uppercase;font-weight:800;font-size:1.05rem;letter-spacing:-.01em;color:var(--rose-text,#B5365B);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .lpct-cur span{font-weight:400;margin-right:5px} .lpct-pbtn{flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:.95rem;border:1.5px solid var(--ink,#10182E);background:transparent;color:var(--ink,#10182E);text-decoration:none;padding:4px 8px;cursor:pointer;line-height:1} .lpct-pbtn:hover{background:var(--ink,#10182E)} /* ── Drawer (menu latéral off-canvas) ── */ .lpct-scrim{position:fixed;inset:0;z-index:99998;background:rgba(16,24,46,.5);opacity:0;visibility:hidden;transition:opacity .22s} .lpct-scrim.open{opacity:1;visibility:visible} .lpct-drawer{position:fixed;top:0;left:0;bottom:0;z-index:99999;width:282px;max-width:86vw;background:var(--paper,#F2EDE2);border-right:2px solid var(--ink,#10182E);transform:translateX(-102%);transition:transform .24s ease;display:flex;flex-direction:column;font-family:"DM Sans",system-ui,sans-serif;overflow-y:auto;-webkit-overflow-scrolling:touch} .lpct-drawer.open{transform:translateX(0)} .lpct-dhd{display:flex;align-items:center;gap:9px;padding:13px 14px;border-bottom:2px solid var(--ink,#10182E);position:sticky;top:0;background:var(--paper,#F2EDE2)} .lpct-dhd .lpct-logo{width:28px;height:28px} .lpct-dhd .nm{font-family:"Saira Condensed",sans-serif;text-transform:uppercase;font-weight:800;font-size:1.1rem;color:var(--ink,#10182E);line-height:1;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lpct-dhd .nm small{display:block;font-family:"Space Mono",monospace;font-size:.5rem;letter-spacing:.14em;color:var(--muted,#5d6374);font-weight:400} .lpct-dclose{flex:none;font-size:1.1rem;border:1.5px solid var(--ink,#10182E);background:transparent;width:30px;height:30px;cursor:pointer;line-height:1;color:var(--ink,#10182E)} .lpct-dclose:hover{background:var(--ink,#10182E);color:var(--paper,#F2EDE2)} .lpct-cat{font-family:"Space Mono",monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#5d6374);padding:14px 16px 5px;border-bottom:1px solid var(--line,#CFC6B2)} .lpct-link{display:flex;align-items:center;gap:11px;padding:11px 16px;text-decoration:none;color:var(--ink,#10182E);font-size:.97rem;font-weight:600;border-bottom:1px solid var(--line,#CFC6B2);line-height:1.15} .lpct-link .e{font-size:1.15rem;flex:none;width:22px;text-align:center} .lpct-link .e svg{width:20px;height:20px;display:block;margin:0 auto} .lpct-link:hover{background:var(--surface,#E9E2D2)} .lpct-link.on{background:var(--ink,#10182E);color:var(--paper,#F2EDE2)} .lpct-link.on .e{filter:none} /* Pied de menu : même typo/disposition que les liens d'outils (sans, casse normale, lignes) pour une DA cohérente — au lieu de chips monospace majuscules. */ .lpct-dfoot{margin-top:auto;border-top:2px solid var(--ink,#10182E);display:flex;flex-direction:column} .lpct-dfoot a,.lpct-dfoot button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;font-family:inherit;font-size:.95rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink,#10182E);text-decoration:none;border:0;border-bottom:1px solid var(--line,#CFC6B2);background:transparent;padding:11px 16px;cursor:pointer;line-height:1.15} .lpct-dfoot a:last-child,.lpct-dfoot button:last-child{border-bottom:0} .lpct-dfoot a:hover,.lpct-dfoot button:hover{background:var(--surface,#E9E2D2)} .lpct-dfoot a span[aria-hidden],.lpct-dfoot button span[aria-hidden]{font-size:1.15rem;flex:none;width:22px;text-align:center} /* ── Panneau « Personnaliser » ── */ .lpct-ov{position:fixed;inset:0;z-index:99997;background:rgba(16,24,46,.45);display:flex;align-items:center;justify-content:center;padding:18px} .lpct-panel{background:var(--paper,#F2EDE2);border:2px solid var(--ink,#10182E);max-width:430px;width:100%;padding:20px;font-family:"DM Sans",system-ui,sans-serif;max-height:90vh;overflow-y:auto} .lpct-panel h3{font-family:"Saira Condensed",sans-serif;text-transform:uppercase;font-weight:800;font-size:1.4rem;color:var(--ink,#10182E);margin:0 0 4px} .lpct-panel p{font-size:.82rem;color:var(--body,#2b3146);margin:0 0 12px} .lpct-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-bottom:14px} .lpct-sw{border:2px solid transparent;cursor:pointer;padding:0;background:none;text-align:center} .lpct-sw.on{border-color:var(--ink,#10182E)} .lpct-sw .c{height:30px;display:flex}.lpct-sw .c i{flex:1} .lpct-sw span{display:block;font-family:"Space Mono",monospace;font-size:.5rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted,#5d6374);padding:2px 0} .lpct-row{display:flex;align-items:center;gap:10px;margin-bottom:10px} .lpct-row label{font-family:"Space Mono",monospace;font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted,#5d6374);flex:1} .lpct-row input[type=color]{width:44px;height:30px;border:1.5px solid var(--ink,#10182E);padding:1px;background:none;cursor:pointer} .lpct-row input[type=text]{flex:2;border:1.5px solid var(--ink,#10182E);background:#fff;font-family:"DM Sans",sans-serif;font-size:.85rem;padding:6px 8px} .lpct-actions{display:flex;gap:8px;margin-top:14px} .lpct-actions button{font-family:"Saira Condensed",sans-serif;text-transform:uppercase;font-weight:700;font-size:.95rem;padding:9px 14px;cursor:pointer;border:2px solid var(--ink,#10182E)} .lpct-ok{background:var(--ink,#10182E);color:var(--paper,#F2EDE2);flex:1} .lpct-ok:hover{background:var(--rose,#D8466F);border-color:var(--rose,#D8466F)} .lpct-ghost{background:transparent;color:var(--ink,#10182E)} .lpct-amb{display:flex;gap:6px;margin-bottom:12px} .lpct-amb button{flex:1;font-family:"Space Mono",monospace;font-size:.6rem;text-transform:uppercase;letter-spacing:.06em;border:1.5px solid var(--ink,#10182E);background:transparent;color:var(--ink,#10182E);padding:7px 6px;cursor:pointer} .lpct-amb button.on{background:var(--ink,#10182E);color:var(--paper,#F2EDE2)} .lpct-logo-row{display:flex;align-items:center;gap:10px;margin-bottom:10px} .lpct-logo-prev{width:38px;height:38px;border:1.5px solid var(--line,#CFC6B2);display:flex;align-items:center;justify-content:center;background:#fff;flex:none} .lpct-logo-prev img{max-width:100%;max-height:100%;object-fit:contain} .lpct-logo-row button{font-family:"Space Mono",monospace;font-size:.58rem;text-transform:uppercase;letter-spacing:.06em;border:1.5px solid var(--ink,#10182E);background:transparent;padding:6px 9px;cursor:pointer;color:var(--ink,#10182E)} .lpct-role{flex:none;font-family:"Space Mono",monospace;font-size:.55rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#5d6374);text-decoration:none;border:1.5px solid var(--line,#CFC6B2);padding:4px 7px;white-space:nowrap} .lpct-role:hover{border-color:var(--ink,#10182E);color:var(--ink,#10182E)} /* ── Focus clavier visible ── */ .lpct-burger:focus-visible,.lpct-pbtn:focus-visible,.lpct-link:focus-visible,.lpct-dclose:focus-visible,.lpct-id:focus-visible,.lpct-dfoot a:focus-visible,.lpct-dfoot button:focus-visible{outline:3px solid var(--rose,#D8466F);outline-offset:2px} .lpct-link:focus-visible{outline-offset:-3px} /* ── Mouvement réduit ── */ @media(prefers-reduced-motion:reduce){.lpct-drawer,.lpct-scrim{transition:none}} @media(max-width:600px){.lpct-cur{display:none}.lpct-id{max-width:none;flex:1 1 auto}.lpct-burger b+span{display:none}} /* ── Grand écran : sidebar fixe, toujours visible, le contenu se décale ── */ @media(min-width:1024px){ body{padding-left:282px} .lpct-drawer{transform:none!important;transition:none} .lpct-scrim{display:none!important} .lpct-dclose{display:none} .lpct-bar{display:none} /* L'identité du club est déjà dans la sidebar → on allège le masthead de page : on masque le sous-titre redondant « Espace Club · laboping ». */ .mast .brand .s{display:none} } /* ═══════════════════════════════════════════════════════════════════════════ ADOUCISSEMENT DES PAGES OUTILS — « moins bloc, plus moderne » Couche d'override (club-theme.css est chargé APRÈS le