/* ═══════════════════════════════════════════════════════════════════════════ Fair4B — habillage commun du site : bandeau événement, navigation, menu mobile, sélecteur de langue. 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 { --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 } }