/* ================================ DESIGN TOKENS ================================= */ :root { /* Palette couleur + gradients primary/accent : source canonique unique dans assets/css/charte-tokens.css (sprint d'hygiène « tokens unifiés »). home.css consomme désormais les noms canoniques `--sacem-*`. Les noms parallèles historiques (--violet, --ink, --white, --gradient-hero…) ont été supprimés. Restent ici les seuls tokens propres à home, sans équivalent dans la charte : nuances neutres --slate/--mist/--stone, le gradient doux décoratif, ombres, rayons, layout. Familles de police : noms parallèles --font-sans/--font-accent supprimés (sprint « hygiène typo ») au profit des canoniques --font-body / --font-display définis dans charte-tokens.css. */ --slate: #5A4750; --mist: #9E8C93; --stone: #E8DED5; --gradient-soft: linear-gradient(135deg, rgba(183,59,144,0.08) 0%, rgba(242,139,30,0.08) 100%); --shadow-sm: 0 2px 8px rgba(26,14,18,0.06); --shadow-md: 0 10px 30px rgba(26,14,18,0.1); --shadow-lg: 0 24px 60px rgba(26,14,18,0.18); --radius-sm: 8px; --radius-md: 16px; --radius-lg: 28px; --radius-pill: 999px; --container: 1280px; --gutter: clamp(1.25rem, 4vw, 3rem); --nav-height: 88px; } /* ================================ RESET & BASE ================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-weight: 400; color: var(--sacem-ink); background: var(--sacem-white); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; border: none; background: none; cursor: pointer; color: inherit; } ul { list-style: none; } .container { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); } /* ================================ TYPOGRAPHY UTILITIES ================================= */ .eyebrow { font-family: var(--font-body); font-size: var(--sacem-fs-micro); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sacem-magenta); display: inline-flex; align-items: center; gap: 0.75rem; } .eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; } .eyebrow--light { color: rgba(255,255,255,0.9); } .eyebrow--light::before { background: rgba(255,255,255,0.6); } h1, h2, h3, h4 { font-family: var(--font-body); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; } h1 { font-size: clamp(2.75rem, 6.5vw, 5.5rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.02; } h2 { font-size: clamp(2rem, 4.2vw, 3.5rem); font-weight: 500; letter-spacing: -0.025em; } h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 600; } h4 { font-size: var(--sacem-fs-h3); font-weight: 600; } .accent { font-family: var(--font-display); font-style: italic; font-weight: 500; font-variation-settings: "SOFT" 100, "opsz" 144; background: var(--sacem-gradient-accent); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.015em; } .lede { font-size: clamp(1.05rem, 1.35vw, 1.2rem); color: var(--slate); line-height: 1.55; max-width: 56ch; font-weight: 400; } /* ================================ BUTTONS ================================= */ .btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 1rem 1.75rem; border-radius: var(--radius-pill); font-weight: 600; font-size: var(--sacem-fs-sm); letter-spacing: 0.005em; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; white-space: nowrap; } .btn svg { width: 18px; height: 18px; transition: transform .25s ease; } .btn:hover svg { transform: translateX(3px); } .btn--primary { background: var(--sacem-gradient-accent); color: var(--sacem-white); box-shadow: 0 12px 30px -8px rgba(215,74,107,0.55); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -8px rgba(215,74,107,0.7); } .btn--secondary { background: rgba(255,255,255,0.08); color: var(--sacem-white); border: 1px solid rgba(255,255,255,0.35); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .btn--secondary:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.7); } .btn--dark { background: var(--sacem-ink); color: var(--sacem-white); } .btn--dark:hover { transform: translateY(-2px); background: var(--sacem-text); } .btn--ghost { background: transparent; color: var(--sacem-ink); border: 1.5px solid var(--sacem-ink); } .btn--ghost:hover { background: var(--sacem-ink); color: var(--sacem-white); } .btn--nav { padding: 0.7rem 1.35rem; font-size: calc(var(--sacem-fs-base) * 0.875); background: var(--sacem-gradient-accent); color: var(--sacem-white); box-shadow: 0 8px 20px -6px rgba(215,74,107,0.5); } .btn--nav:hover { transform: translateY(-1px); } /* ================================ NAVIGATION ================================= */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-height); display: flex; align-items: center; transition: all .4s ease; background: transparent; } /* Mode solid : appliqué soit au scroll > 30 px (classe .scrolled posée par home.js, comportement historique), soit AU CHARGEMENT INITIAL sur toute page sans hero photo/gradient sombre (logique d'exclusion stricte sur .home / .sacem-has-hero-photo / .sacem-page-contact — toute page non listée bascule par défaut en solid, donc les futures pages claires sont couvertes sans intervention). Évite le texte blanc sur fond cream/blanc des singles d'articles et de l'archive Actualités. */ .nav.scrolled, body:not(.home):not(.sacem-has-hero-photo):not(.sacem-page-contact) .nav { background: rgba(255,255,255,0.92); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); box-shadow: 0 1px 0 rgba(26,14,18,0.06); } .nav__inner { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .nav__logo { display: flex; align-items: center; gap: 0.6rem; position: relative; /* sprint menu — calibrage client : logo 44 → 64px (jugé trop petit). Dans le header 88px → ~12px d'air haut/bas. ratio préservé (img height:100% width:auto) → largeur ~158px ; PNG source 1975px → aucun flou. --nav-height inchangée. */ height: 64px; } .nav__logo img { height: 100%; width: auto; } .nav__logo .logo-white { display: block; } .nav__logo .logo-color { display: none; } .nav.scrolled .logo-white, body:not(.home):not(.sacem-has-hero-photo):not(.sacem-page-contact) .nav .logo-white { display: none; } .nav.scrolled .logo-color, body:not(.home):not(.sacem-has-hero-photo):not(.sacem-page-contact) .nav .logo-color { display: block; } .nav__menu { display: flex; gap: 0.25rem; align-items: center; list-style: none !important; } .nav__menu li { list-style: none !important; } .nav__menu a { padding: 0.5rem 0.95rem; /* sprint menu — calibrage client : menu principal à base × 1.25 (le 1.08 +20% a été jugé trop petit après validation visuelle). base reste non bumpée → ne touche que la nav (couvre home + pages internes). */ font-size: calc(var(--sacem-fs-base) * 1.25); font-weight: 500; color: var(--sacem-white); border-radius: var(--radius-pill); transition: all .2s ease; position: relative; } .nav.scrolled .nav__menu a, body:not(.home):not(.sacem-has-hero-photo):not(.sacem-page-contact) .nav__menu a { color: var(--sacem-ink); } .nav__menu a:hover { background: rgba(255,255,255,0.12); } .nav.scrolled .nav__menu a:hover, body:not(.home):not(.sacem-has-hero-photo):not(.sacem-page-contact) .nav__menu a:hover { background: var(--sacem-bg-soft); } .nav__mobile-toggle { display: none; } @media (max-width: 1024px) { .nav__menu { display: none; } .nav__mobile-toggle { display: flex; flex-direction: column; gap: 5px; padding: 0.5rem; } .nav__mobile-toggle span { width: 24px; height: 2px; background: var(--sacem-white); transition: transform .3s, opacity .2s, background .3s; } .nav.scrolled .nav__mobile-toggle span { background: var(--sacem-ink); } /* CTA "Déclarer une liste" masqué en mobile (présent via le drawer du menu via le lien Diffuseurs, et libère de la place pour le burger sans bondir le top bar). */ .btn--nav { display: none; } /* État OUVERT du burger : drawer plein écran (C1bis.4). ---- Quand le burger est cliqué, JS pose .nav--open sur