/* ═══════════════════════════════════════════════════════════════════════════ Fair4B — habillage commun du site : bandeau événement, navigation, menu mobile, sélecteur de langue, pied de page. Ce fichier existe pour une raison précise : le balisage du header était écrit quatre fois (index.html, rse.html, faq.html + equipe.html, et BlogHtmlRenderer.cs), avec quatre résultats différents. Le balisage est désormais produit par Services/SiteChrome.cs et injecté au moment de servir ; ces styles en sont la contrepartie. Trois précautions, apprises sur l'habillage Fair4Pitch : 1. cette feuille est chargée APRÈS le CSS de chaque page, donc elle gagne à spécificité égale — la page RSE déclare son propre #nav ; 2. les variables sont portées par les éléments de l'habillage et NON par :root : la page RSE déclare ses propres --teal, --ink et --gutter, qui seraient sinon écrasés ; 3. reset local sur le sous-arbre de l'habillage, pour ne rien hériter du de la page. ═══════════════════════════════════════════════════════════════════════════ */ /* ─── Variables, portées par l'habillage seul ─────────────────────────────── */ .skip-link, #event-banner, #nav, .mobile-menu, #footer { --bg: #1A1A18; --bg-soft: #222220; --border: rgba(255,255,255,.1); --border-s: rgba(255,255,255,.06); --gold: #C8A96E; --gutter: clamp(1.25rem,4vw,3rem); --ink: #1A1A18; --nav-bg: rgba(26,26,24,.92); --sans: 'DM Sans', system-ui, sans-serif; --shadow: rgba(0,0,0,.4); --chrome-bg: #111110; /* couleur commune au bandeau, à la navigation et au pied de page */ --teal: #7AC4B8; --teal-d: #4EA89C; --text: #FAFAF8; --text-mute: rgba(250,250,248,.55); --text-sub: rgba(250,250,248,.72); } /* ─── Reset local ─────────────────────────────────────────────────────────── :where() est indispensable ici : il ramène la spécificité du sélecteur à zéro. Écrit directement, « #nav * » vaut 100 et écraserait « .nav-logo » ou « .nav-cta » (10) quel que soit l'ordre du fichier — le reset annulerait donc les marges, paddings et bordures de l'habillage lui-même. */ :where(.skip-link, #event-banner, #event-banner *, #nav, #nav *, .mobile-menu, .mobile-menu *) { box-sizing: border-box; margin: 0; padding: 0; font-family: var(--sans); font-style: normal; line-height: 1.4; text-transform: none; text-decoration: none; list-style: none; border: 0; background: none; cursor: revert; float: none; text-align: left; box-shadow: none; } :where(#nav button, #event-banner button, .mobile-menu button) { cursor: pointer; color: inherit; font: inherit; } @keyframes f4bBannerPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.9); } } /* ─── Boutons du menu mobile (dépendaient de styles.css, absent sur la RSE) ── */ .mobile-menu .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: 1rem 1.6rem; border-radius: 4px; font-weight: 600; border: 1px solid transparent; transition: background .2s, border-color .2s, color .2s; } .mobile-menu .btn-primary { background: var(--teal); color: var(--ink); } .mobile-menu .btn-primary:hover { background: var(--teal-d); } .mobile-menu .btn-secondary { background: transparent; color: var(--text); border-color: var(--border); } .mobile-menu .btn-secondary:hover { border-color: var(--gold); color: var(--gold); } /* ─── Rubrique active ─────────────────────────────────────────────────────── */ .nav-links a[aria-current="page"] { color: var(--teal); } .nav-links a[aria-current="page"]::after { transform: scaleX(1); } .mobile-menu a[aria-current="page"] { color: var(--teal); } /* ─── Accessibilité ───────────────────────────────────────────────────────── */ #nav a:focus-visible, #nav button:focus-visible, #event-banner a:focus-visible, #event-banner button:focus-visible, .mobile-menu a:focus-visible, .mobile-menu button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { #event-banner .eb-dot { animation: none; } #nav, #event-banner, .nav-links a::after, .hamburger span { transition: none; } } /* ═══ Styles repris de styles.css — source unique désormais ici ═══════════ */ .skip-link { position: absolute; top: -100px; left: 1rem; background: var(--teal); color: var(--ink); padding: .75rem 1.25rem; border-radius: 0 0 4px 4px; font-weight: 700; font-size: .85rem; z-index: 9999; transition: top .2s } .skip-link:focus { top: 0; outline: none } /* ═══ EVENT BANNER ═══ */ #event-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 200; background: var(--chrome-bg); border-bottom: 1px solid rgba(122,196,184,.18); height: 38px; display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 0 1rem; font-size: .82rem; color: rgba(250,250,248,.85); transition: transform .3s } .banner-hidden #event-banner { transform: translateY(-100%) } #event-banner .eb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); animation: f4bBannerPulse 2s ease-in-out infinite; flex-shrink: 0 } #event-banner strong { color: var(--teal); font-weight: 700 } .eb-cta { color: var(--teal); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap } .eb-cta:hover { color: var(--text) } .eb-close { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: rgba(250,250,248,.5); transition: background .2s,color .2s } .eb-close:hover { background: rgba(255,255,255,.08); color: var(--text) } /* ═══ NAVIGATION ═══ */ /* Le contenu de la navigation est aligné sur celui des pages : même largeur maximale (1280 px, la valeur de --max-w partagée par styles.css, blog.css et la page RSE) et même gouttière que leur conteneur .inner. La barre, elle, reste pleine largeur pour que son fond couvre l'écran au défilement. */ .nav-in { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); width: 100%; height: 100%; display: flex; align-items: center; } #nav { /* Le bandeau, la navigation et le pied de page partagent la même couleur. Elle est déclarée ici — et pas seulement dans l'état .scrolled — parce que la navigation était transparente au repos : elle prenait donc le fond de la page (#1A1A18, un gris très sombre) au lieu du noir de l'habillage. La page RSE, elle, imposait son propre fond opaque. */ background: var(--chrome-bg); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; position: fixed; top: 38px; left: 0; right: 0; z-index: 150; height: 68px; display: block; padding: 0; transition: background .35s,box-shadow .35s,top .3s } #nav.scrolled { /* Même couleur qu'au repos : la navigation est déjà opaque. Seule l'ombre apparaît, pour détacher la barre du contenu qui défile dessous. */ background: var(--chrome-bg); box-shadow: 0 1px 24px var(--shadow) } .banner-hidden #nav { top: 0 } .nav-logo { display: flex; align-items: center; margin-right: 1.5rem; height: 32px; transition: opacity .2s } .nav-logo:hover { opacity: .85 } .nav-logo-img { height: 32px; width: auto; display: block; border-radius: 3px } .nav-links { display: flex; gap: clamp(1rem,2.5vw,2rem); margin: 0 auto } .nav-links a { font-size: .82rem; font-weight: 600; color: var(--text-sub); padding: .5rem 0; position: relative; transition: color .2s } .nav-links a::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 1.5px; background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform .25s } .nav-links a:hover { color: var(--text) } .nav-links a:hover::after { transform: scaleX(1) } .nav-right { display: flex; align-items: center; gap: .6rem } .lang-toggle { display: flex; border: 1px solid var(--border); border-radius: 4px; overflow: hidden } .lang-btn { padding: .4rem .7rem; font-size: .68rem; font-weight: 700; letter-spacing: .1em; color: var(--text-mute); transition: background .2s,color .2s; min-height: 32px; display: flex; align-items: center } .lang-btn[aria-pressed="true"] { background: var(--teal); color: var(--ink) } .lang-btn:hover:not([aria-pressed="true"]) { background: var(--bg-soft); color: var(--text) } .nav-cta { padding: .5rem 1rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: 4px; min-height: 38px; display: inline-flex; align-items: center; transition: background .2s,border-color .2s } .nav-cta-solid { background: var(--teal); color: var(--ink) } .nav-cta-solid:hover { background: var(--teal-d) } .nav-cta-ghost { border: 1px solid var(--border); color: var(--text) } .nav-cta-ghost:hover { border-color: var(--gold); color: var(--gold) } .hamburger { display: none; width: 38px; height: 38px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--border); border-radius: 4px } .hamburger span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 1px; transition: transform .3s,opacity .2s } .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg) } .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0 } .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) } .mobile-menu { display: none; position: fixed; top: calc(38px + 68px); left: 0; right: 0; bottom: 0; background: var(--bg); z-index: 140; padding: 2rem var(--gutter); overflow-y: auto; flex-direction: column } .mobile-menu.open { display: flex } .mobile-menu a { font-family: var(--sans); font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; padding: 1.1rem 0; border-bottom: 1px solid var(--border-s); color: var(--text) } .mobile-menu a:hover { color: var(--teal) } .mob-ctas { display: flex; flex-direction: column; gap: .75rem; margin-top: 2rem } .mob-ctas .btn { font-family: var(--sans); font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; text-transform: none; padding: 1rem 1.6rem; min-height: 54px } body.mode-rdv #event-banner { display: none } body.mode-rdv #nav { top: 0 } @media (max-width:640px) { #event-banner { font-size: .72rem; padding: 0 .5rem; gap: .5rem } .eb-text-long { display: none } } @media (max-width:1024px) { .nav-links { gap: 1rem; margin: 0 auto } .nav-links a { font-size: .76rem } } @media (max-width:900px) { .nav-links, .nav-cta-ghost, .nav-cta-solid { display: none } .hamburger { display: flex } } /* ═══ FOOTER ═══ Ported from styles.css, the only page that had the full footer before R1 (see the recette plan). --chrome-bg, --gutter and --teal come from the scoped block above, now that #footer is part of it. --quote has no home there (it is page-typography, not chrome), hence the inline fallback; 1280px is hardcoded rather than a variable, matching .nav-in above. Two rules from the original are intentionally left out: .footer-logo (no element in the shipped markup carries that class, the logo is an ) and .footer-sig (the line it styled was dropped, see render_footer()). */ /* Local reset, scoped to the footer only: same :where() technique as the nav/banner/mobile-menu reset near the top of this file, kept as its own rule rather than folded into that one, so this section stays readable on its own and nothing here depends on a change made to that other selector list later. Why it exists: on every historical page, the browser's own default list bullets and link underline never show, but not because anything here removes them, because styles.css's global `a { color: inherit; text-decoration: none }` and `ul { list-style: none }` quietly do, and every one of those pages happens to load styles.css. The blog loads neither styles.css nor anything else with those rules, so #footer's markup fell back to browser defaults there: bulleted lists, underlined, blue links. Same footer, same render_footer(), two different renders, only because one dependency was never written down. This block is that dependency, written down, so the footer needs nothing from any other stylesheet to render correctly. */ :where(#footer, #footer *) { box-sizing: border-box; margin: 0; padding: 0; font-family: var(--sans); font-style: normal; line-height: 1.4; text-transform: none; text-decoration: none; list-style: none; border: 0; background: none; color: inherit; cursor: revert; float: none; text-align: left; box-shadow: none; } #footer { background: var(--chrome-bg); border-top: 1px solid rgba(255,255,255,.05); padding: clamp(3rem,6vw,4.5rem) 0 0; color: rgba(250,250,248,.6) } .footer-top { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1.4fr 2fr; gap: clamp(2.5rem,6vw,5rem); margin-bottom: 3rem } .footer-tagline { font-family: var(--quote, 'Cormorant Garamond',Georgia,serif); font-style: italic; font-size: 1rem; color: rgba(250,250,248,.45); margin-bottom: 1rem } .footer-addr { font-size: .82rem; color: rgba(250,250,248,.4); line-height: 1.7; margin-bottom: 1.5rem } .footer-social { display: flex; gap: .6rem } .footer-social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; color: rgba(250,250,248,.5); transition: background .2s,border-color .2s,color .2s } .footer-social a:hover { background: rgba(122,196,184,.12); border-color: rgba(122,196,184,.3); color: var(--teal) } .footer-links { display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem } .footer-col-title { font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(250,250,248,.35); margin-bottom: 1rem; display: block } .footer-col ul { display: flex; flex-direction: column; gap: .55rem } .footer-col a { font-size: .85rem; color: rgba(250,250,248,.55); transition: color .2s; display: inline-block; padding: .15rem 0 } .footer-col a:hover { color: var(--teal) } .footer-bottom { max-width: 1280px; margin: 0 auto; padding: 1.5rem var(--gutter); border-top: 1px solid rgba(255,255,255,.05); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem } .footer-copy { font-size: .8rem; color: rgba(250,250,248,.35) } @media (max-width:900px) { .footer-top { grid-template-columns: 1fr } } @media (max-width:600px) { .footer-links { grid-template-columns: 1fr 1fr; gap: 1.5rem } }