/* ========================================================================= SCANDY — Chrome du thème (header, nav, menu mobile, footer, boutons…) Repris 1:1 de la V1 PHP, adapté aux menus WordPress (ul/li). Dépend des tokens définis dans scandy-design.css. ========================================================================= */ /* ---- Reset léger ---- IMPORTANT : ces resets sont scopés au CHROME du thème uniquement (topbar, nav, menu mobile, footer, sticky CTA, 404). Ils ne doivent JAMAIS s'appliquer via une classe globale sur , sinon ils écrasent le style des liens/boutons/images à l'intérieur du contenu Elementor (spécificité .scandy a (0,1,1) qui bat souvent .elementor-button à spécificité égale ou inférieure). */ .scandy { box-sizing: border-box; } .scandy *, .scandy *::before, .scandy *::after { box-sizing: inherit; } /* Zéroute les marges par défaut du navigateur sur les éléments typographiques (ex:

a un margin:1em par défaut, proportionnel à la font-size — plus le texte est gros, plus la marge grandit). Safe à appliquer partout, y compris dans le contenu Elementor : Elementor ne définit jamais lui-même de marge sur ces balises, il ne fait qu'ajouter la sienne par-dessus (Avancé → Marge), donc ce reset ne rentre jamais en conflit avec ses propres styles — contrairement au reset couleur/lien ci-dessous qui doit rester scopé. */ .scandy h1, .scandy h2, .scandy h3, .scandy h4, .scandy h5, .scandy h6, .scandy p, .scandy ul, .scandy ol, .scandy li, .scandy blockquote, .scandy figure, .scandy dl, .scandy dd { margin: 0; padding: 0; } .topbar a, .nav a, .mobile-menu a, .footer a, .sticky-cta, .scandy-404 a { color: inherit; text-decoration: none; } .topbar img, .nav img, .mobile-menu img, .footer img, .scandy-404 img { max-width: 100%; display: block; } .topbar button, .nav button, .mobile-menu button, .footer button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } html { scroll-behavior: smooth; } body.scandy { color-scheme: dark; /* renforce le :root — voir scandy-design.css */ font-family: var(--font-sans); background: var(--onyx); color: var(--onyx); -webkit-font-smoothing: antialiased; line-height: 1.5; overflow-x: hidden; margin: 0; } body.menu-open { overflow: hidden; } .scandy-content { display: block; } /* ---- Accessibilité : skip link ---- */ .screen-reader-text { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; } .scandy-skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 9999; width: auto; height: auto; clip: auto; background: var(--champagne); color: var(--onyx); padding: 10px 18px; font-size: 12px; letter-spacing: .1em; } /* ---- Utilitaires chrome ---- */ .eyebrow { font-family: var(--font-sans); font-size: 11px; letter-spacing: .36em; text-transform: uppercase; font-weight: 500; color: var(--grey); } .icon { display: inline-block; width: 14px; height: 14px; fill: currentColor; vertical-align: middle; } /* ========================================================================= TOPBAR ========================================================================= */ .topbar { background: rgba(14, 11, 9, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--grey-2); padding: 9px 32px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; letter-spacing: .06em; border-bottom: 1px solid var(--line-dark); position: relative; z-index: 101; } .topbar-left { display: flex; gap: 18px; align-items: center; } .topbar-left a { opacity: .72; transition: opacity .3s var(--ease); } .topbar-left a:hover { opacity: 1; color: var(--champagne); } .topbar-center { flex: 1; text-align: center; overflow: hidden; height: 18px; padding: 0 40px; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .topbar-center-track { display: flex; animation: scandyMarquee 36s linear infinite; white-space: nowrap; width: max-content; } .topbar-center-track span { font-style: italic; font-family: var(--font-serif); font-size: 14px; color: var(--cream); padding-right: 80px; } @keyframes scandyMarquee { to { transform: translateX(-50%); } } .topbar-right { display: flex; gap: 14px; align-items: center; font-size: 12px; } /* ========================================================================= NAV ========================================================================= */ .nav { position: sticky; top: 0; z-index: 100; padding: 18px 48px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: rgba(11, 11, 11, .72); color: var(--cream); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: all .5s var(--ease); } /* Légère opacité en plus dès que la nav devient sticky (scroll > 40px). */ .nav.scrolled { padding: 12px 48px; background: rgba(11, 11, 11, .9); border-bottom-color: var(--line-dark); } .nav-left, .nav-right { display: flex; align-items: center; font-size: 13px; } .nav-right { justify-content: flex-end; gap: 32px; } .nav .scandy-menu { display: flex; gap: 32px; align-items: center; list-style: none; margin: 0; padding: 0; } .nav .scandy-menu a { position: relative; display: inline-block; padding: 6px 0; opacity: .85; transition: opacity .3s var(--ease); letter-spacing: .06em; } .nav .scandy-menu a:hover { opacity: 1; color: var(--champagne); } .nav-left .scandy-menu a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); } .nav-left .scandy-menu a:hover::after { transform: scaleX(1); transform-origin: left; } /* Bouton Contact de la nav */ .nav-cta { display: inline-flex !important; align-items: center; gap: 10px; padding: 10px 18px !important; opacity: 1 !important; border: 1px solid currentColor; font-size: 11px; letter-spacing: .20em; text-transform: uppercase; font-weight: 500; transition: background .3s var(--ease), color .3s var(--ease); } .nav-cta::after { display: none !important; } .nav-cta:hover { background: var(--cream); color: var(--onyx); border-color: var(--cream); } .nav-cta .arr { width: 14px; height: 1px; background: currentColor; position: relative; transition: width .35s var(--ease); } .nav-cta .arr::after { content: ''; position: absolute; right: -1px; top: -3px; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); } .nav-cta:hover .arr { width: 20px; } /* Logo */ .logo { font-family: var(--font-serif); font-size: 30px; font-weight: 500; letter-spacing: .36em; padding-left: .36em; line-height: 1; } .logo-wrap { display: inline-flex; justify-content: center; } .logo-img { height: 36px; width: auto; display: block; vertical-align: middle; } /* Logo plus présent en haut de page, resserré dès que la nav devient sticky. */ .nav .logo-img { height: 38px; transition: height .35s var(--ease); } .nav.scrolled .logo-img { height: 26px; } .footer-brand .logo-img { height: 36px; margin-bottom: 4px; } /* ========================================================================= BURGER + MENU MOBILE ========================================================================= */ .burger-btn { display: none; width: 36px; height: 36px; background: none; border: none; cursor: pointer; padding: 0; position: relative; color: inherit; } .burger-btn span { display: block; position: absolute; left: 50%; width: 22px; height: 1.5px; background: currentColor; transition: top .4s var(--ease), transform .4s var(--ease); transform-origin: center; } .burger-btn span:nth-child(1) { top: 13px; transform: translateX(-50%); } .burger-btn span:nth-child(2) { top: 21px; transform: translateX(-50%); } .burger-btn.open span:nth-child(1) { top: 17px; transform: translateX(-50%) rotate(45deg); } .burger-btn.open span:nth-child(2) { top: 17px; transform: translateX(-50%) rotate(-45deg); } .mobile-menu { position: fixed; inset: 0; z-index: 200; background: rgba(14, 11, 9, .96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 80px 24px 40px; opacity: 0; pointer-events: none; transition: opacity .5s var(--ease); } .mobile-menu.open { opacity: 1; pointer-events: auto; } .mobile-menu nav .scandy-menu { display: flex; flex-direction: column; gap: 24px; text-align: center; list-style: none; margin: 0; padding: 0; } .mobile-menu nav a { font-family: var(--font-serif); font-size: 36px; font-weight: 400; color: var(--cream); text-decoration: none; opacity: 0; transform: translateY(20px); transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s var(--ease); } .mobile-menu.open nav li:nth-child(1) a { opacity: 1; transform: translateY(0); transition-delay: .10s; } .mobile-menu.open nav li:nth-child(2) a { opacity: 1; transform: translateY(0); transition-delay: .17s; } .mobile-menu.open nav li:nth-child(3) a { opacity: 1; transform: translateY(0); transition-delay: .24s; } .mobile-menu.open nav li:nth-child(4) a { opacity: 1; transform: translateY(0); transition-delay: .31s; } .mobile-menu.open nav li:nth-child(n+5) a { opacity: 1; transform: translateY(0); transition-delay: .38s; } .mobile-menu nav a:hover { color: var(--champagne); } .mobile-menu nav a em { color: var(--champagne); font-style: italic; } .mobile-menu-cta { margin-top: 56px; display: inline-flex; align-items: center; gap: 12px; padding: 16px 32px; background: var(--champagne); color: var(--onyx); font-family: var(--font-sans); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; text-decoration: none; border: 1px solid var(--champagne); transition: all .4s var(--ease); opacity: 0; transform: translateY(20px); } .mobile-menu.open .mobile-menu-cta { opacity: 1; transform: translateY(0); transition-delay: .42s; } .mobile-menu-cta:hover { background: var(--cream); border-color: var(--cream); } .mobile-menu-cta .arr { width: 14px; height: 1px; background: currentColor; position: relative; transition: width .35s var(--ease); } .mobile-menu-cta .arr::after { content: ''; position: absolute; right: -1px; top: -3px; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); } .mobile-menu-cta:hover .arr { width: 20px; } .mobile-menu-foot { position: absolute; bottom: 32px; left: 0; right: 0; text-align: center; font-size: 10px; letter-spacing: .32em; color: var(--grey); text-transform: uppercase; opacity: 0; transition: opacity .5s var(--ease) .5s; } .mobile-menu.open .mobile-menu-foot { opacity: 1; } /* ========================================================================= BOUTONS (.btn) — utilisables aussi via widget HTML Elementor ========================================================================= */ .btn { display: inline-flex; align-items: center; gap: 12px; padding: 15px 30px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; border: 1px solid var(--cream); color: var(--cream); background: transparent; transition: all .4s var(--ease); cursor: pointer; font-weight: 500; text-decoration: none; /* autonome : ne dépend plus du reset global */ } .btn:hover { background: var(--cream); color: var(--onyx); } .btn.gold { border-color: var(--champagne); color: var(--champagne); } .btn.gold:hover { background: var(--champagne); color: var(--onyx); } .btn.filled-gold { background: var(--gold-grad); color: var(--onyx); border-color: transparent; font-weight: 600; } .btn.filled-gold:hover { filter: brightness(1.08); } .btn.dark { border-color: var(--onyx); color: var(--onyx); } .btn.dark:hover { background: var(--onyx); color: var(--cream); } .btn .arrow { width: 16px; height: 1px; background: currentColor; position: relative; transition: width .35s var(--ease); } .btn .arrow::after { content: ''; position: absolute; right: -1px; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); } .btn:hover .arrow { width: 22px; } /* Regroupe plusieurs boutons .btn côte à côte (ex : les 2 CTA du hero). À poser (Avancé → Classes CSS) sur le conteneur/colonne Elementor qui enveloppe uniquement les widgets bouton — pas sur toute la section. */ .hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } @media (max-width: 600px) { .hero-cta { flex-direction: column; align-items: stretch; } /* Le bouton natif .btn est directement enfant flex de .hero-cta : il s'étire tout seul (align-items:stretch), on ne fait que recentrer son contenu. Le widget SCANDY Button ajoute un .scandy-btn-wrap intermédiaire qui absorbe l'étirement à sa place : on doit donc étirer .scandy-btn explicitement pour obtenir le même rendu (bouton pleine largeur). */ .hero-cta .btn { justify-content: center; } .hero-cta .scandy-btn { width: 100%; justify-content: center; } } /* ========================================================================= STICKY CTA flottant ========================================================================= */ .sticky-cta { position: fixed; bottom: 26px; right: 26px; z-index: 90; display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--onyx); background: var(--gold-grad); border-radius: 2px; box-shadow: 0 10px 34px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity .5s var(--ease), transform .5s var(--ease), filter .3s var(--ease); } .sticky-cta.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .sticky-cta:hover { filter: brightness(1.08); } .sticky-cta .arrow { width: 14px; height: 1px; background: currentColor; position: relative; transition: width .35s var(--ease); } .sticky-cta .arrow::after { content: ''; position: absolute; right: -1px; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); } .sticky-cta:hover .arrow { width: 20px; } /* ========================================================================= FOOTER ========================================================================= */ .footer { background: var(--onyx-2); color: var(--grey-2); padding: 80px 48px 32px; border-top: 1px solid var(--line-dark); } .footer-top { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 60px; border-bottom: 1px solid var(--line-dark); } .footer-brand .logo { color: var(--cream); } .footer-brand p { font-size: 14px; margin-top: 20px; line-height: 1.6; color: var(--grey); max-width: 340px; } .footer-col h4 { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--cream); margin-bottom: 20px; font-weight: 500; } .footer-col .scandy-menu { list-style: none; margin: 0; padding: 0; } .footer-col a { display: block; font-size: 14px; padding: 6px 0; color: var(--grey); transition: color .3s var(--ease); } .footer-col a:hover { color: var(--champagne); } .footer-bottom { max-width: 1400px; margin: 32px auto 0; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--grey); letter-spacing: .04em; } .footer-social { display: flex; gap: 18px; align-items: center; } .footer-social a { color: var(--grey); transition: color .3s var(--ease); } .footer-social a:hover { color: var(--champagne); } .footer-level1 .footerlink { color: #000; background: #fff; padding: .125rem .30rem; text-decoration: none; font-weight: 700; } .footer-level1 .dot { color: #bd1622; font-size: 1.5rem; } /* ========================================================================= REVEAL on scroll (utilitaire — ajouter .reveal sur un élément) ========================================================================= */ .reveal { opacity: 0; transform: translateY(36px); transition: opacity 1s var(--ease), transform 1s var(--ease); } .reveal.in { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: .1s; } .reveal-delay-2 { transition-delay: .2s; } .reveal-delay-3 { transition-delay: .3s; } /* ========================================================================= PROSE (pages classiques / blog) + 404 ========================================================================= */ .scandy-prose { max-width: 760px; margin: 0 auto; padding: 120px 24px 90px; background: var(--paper); color: #3a3a3a; } .scandy-prose-head { margin-bottom: 32px; } .scandy-prose h1, .scandy-prose .scandy-display { color: var(--onyx); font-size: clamp(36px, 5vw, 60px); } .scandy-prose-body { font-family: var(--font-serif); font-size: 18px; line-height: 1.7; } .scandy-prose-body a { color: var(--champagne-deep); text-decoration: underline; } .scandy-prose-body p { margin: 0 0 1.2em; } .scandy-prose-body ul, .scandy-prose-body ol { margin: 0 0 1.2em; padding-left: 1.4em; } .scandy-prose-body li { margin: 0 0 .4em; } .scandy-post-item { padding: 28px 0; border-bottom: 1px solid var(--line); } .scandy-post-title { font-family: var(--font-serif); font-size: 28px; } .scandy-post-meta { font-size: 12px; letter-spacing: .12em; color: var(--grey); margin: 6px 0 12px; text-transform: uppercase; } .scandy-404 { min-height: 80vh; display: flex; align-items: center; justify-content: center; background: var(--onyx); color: var(--cream); text-align: center; padding: 120px 24px; } .scandy-404-inner { max-width: 560px; } .scandy-404 .eyebrow { color: var(--champagne); } .scandy-404 h1 { font-size: clamp(44px, 7vw, 80px); margin: 24px 0; color: var(--cream); } .scandy-404 h1 em { color: var(--champagne); font-style: italic; } .scandy-404 p { font-family: var(--font-serif); font-size: 20px; color: var(--grey-2); margin-bottom: 36px; } .scandy-404 .btn { color: var(--onyx); } /* ========================================================================= RESPONSIVE ========================================================================= */ @media (max-width: 1024px) { .topbar { padding: 8px 20px; font-size: 11px; } .topbar-center { display: none; } .nav { padding: 16px 24px; grid-template-columns: auto 1fr auto; } .nav-left { display: none; } .nav-right { font-size: 0; } .nav-cta { display: none !important; } .burger-btn { display: block; } .footer { padding: 60px 24px 28px; } .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; } } @media (max-width: 600px) { .footer-top { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; gap: 12px; text-align: center; } } /* Respecte la préférence d'animation réduite */ @media (prefers-reduced-motion: reduce) { .topbar-center-track { animation: none; } .reveal { opacity: 1; transform: none; transition: none; } }