/* ===== AUDITION MORAND — SHARED STYLES ===== */ /* Fonts loaded via in each page's for non-blocking rendering */ :root { --navy: oklch(18% 0.06 248); --navy-mid: oklch(24% 0.07 248); --navy-light: oklch(30% 0.07 248); --teal: oklch(42% 0.12 215); --teal-light: oklch(55% 0.10 215); --ivory: oklch(97.5% 0.006 90); --white: #ffffff; --gold: oklch(76% 0.10 82); --gold-light: oklch(88% 0.07 82); --text-dark: oklch(15% 0.03 248); --text-mid: oklch(42% 0.03 248); --border: oklch(90% 0.01 248); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'DM Sans', sans-serif; background: var(--navy); color: var(--ivory); line-height: 1.7; display: flex; flex-direction: column; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } footer { margin-top: auto; } /* ===== FINITIONS (appliquées à tout le site) ===== */ /* Compense le header fixe (~76px) pour les liens d'ancrage internes */ :target, [id] { scroll-margin-top: 96px; } /* Évite les lignes orphelines disgracieuses dans les titres */ h1, h2, h3 { text-wrap: balance; } /* Sélection de texte aux couleurs de la marque */ ::selection { background: var(--gold); color: var(--navy); } /* Barre CTA mobile du bas retirée partout (redondante avec les boutons flottants) */ #mobile-cta { display: none !important; } /* ===== NAV ===== */ #main-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(15,22,42,0.85); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); border-bottom: 1px solid rgba(255,255,255,0.06); box-shadow: 0 4px 24px rgba(0,0,0,0.18); padding: 0 64px; display: flex; align-items: center; gap: 24px; height: 76px; } .nav-logo { font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 500; letter-spacing: 0.06em; color: var(--ivory); text-decoration: none; flex-shrink: 0; margin-right: auto; } .nav-logo span { color: var(--gold); } .nav-links { display: flex; align-items: center; gap: 18px; list-style: none; flex-shrink: 1; min-width: 0; } .nav-links a { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ivory); text-decoration: none; opacity: 0.78; transition: opacity 0.2s, color 0.2s; white-space: nowrap; } .nav-links a:hover { opacity: 1; color: var(--gold); } .nav-cta { background: transparent; color: var(--gold) !important; opacity: 1 !important; padding: 9px 18px; border: 1px solid var(--gold); border-radius: 2px; font-weight: 500; letter-spacing: 0.06em; font-size: 0.7rem !important; } .nav-cta:hover { background: var(--gold) !important; color: var(--navy) !important; } .nav-burger { display: none; flex-direction: column; gap: 5px; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 0; min-width: 44px; min-height: 44px; -webkit-tap-highlight-color: transparent; } .nav-burger span { display: block; width: 24px; height: 2px; background: var(--ivory); border-radius: 2px; transition: all 0.25s; } .nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-burger.open span:nth-child(2) { opacity: 0; } .nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ===== TYPOGRAPHY ===== */ h1 { font-family: 'Playfair Display', serif; font-size: clamp(2.6rem, 4vw, 4.2rem); line-height: 1.1; font-weight: 500; letter-spacing: -0.02em; } h1 em { font-style: italic; color: var(--gold); } h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.9rem, 2.8vw, 2.8rem); line-height: 1.15; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 24px; } h2 em { font-style: italic; color: var(--gold); } h3 { font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 500; margin-bottom: 12px; } h4 { font-size: 0.85rem; font-weight: 500; margin-bottom: 6px; } /* ===== LAYOUT ===== */ .container { max-width: 1200px; margin: 0 auto; padding: 0 80px; } section { padding: 100px 0; } .pt-nav { padding-top: 76px; } .section-eyebrow { font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; } .section-eyebrow::before { content: ''; display: block; width: 28px; height: 1px; background: var(--gold); } .lead { font-size: 1.0625rem; font-weight: 300; line-height: 1.8; max-width: 600px; opacity: 0.74; } /* ===== SECTION BACKGROUNDS ===== */ .section-dark { background: var(--navy); color: var(--ivory); } .section-mid { background: var(--navy-mid); color: var(--ivory); } .section-teal { background: var(--teal); color: var(--ivory); } .section-light { background: var(--ivory); color: var(--text-dark); } .section-light .section-eyebrow { color: var(--teal); } .section-light .section-eyebrow::before { background: var(--teal); } .section-light h2, .section-light h3 { color: var(--navy); } .section-light .lead { color: var(--text-mid); } /* ===== BUTTONS ===== */ .btn-primary { background: var(--gold); color: var(--navy); padding: 15px 34px; border-radius: 2px; font-weight: 500; letter-spacing: 0.08em; font-size: 0.8rem; text-transform: uppercase; text-decoration: none; display: inline-block; transition: background 0.2s, transform 0.15s; border: none; cursor: pointer; } .btn-primary:hover { background: var(--gold-light); transform: translateY(-1px); } .btn-outline { color: var(--ivory); border: 1px solid rgba(255,255,255,0.25); padding: 14px 32px; border-radius: 2px; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; display: inline-block; transition: border-color 0.2s, color 0.2s; } .btn-outline:hover { border-color: var(--gold); color: var(--gold); } .btn-ghost { color: var(--ivory); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; opacity: 0.6; display: inline-flex; align-items: center; gap: 8px; transition: opacity 0.2s; background: none; border: none; cursor: pointer; } .btn-ghost:hover { opacity: 1; } /* ===== CARDS ===== */ .card { border: 1px solid rgba(255,255,255,0.07); border-radius: 3px; padding: 40px 36px; transition: background 0.25s, border-color 0.25s; position: relative; overflow: hidden; } .card:hover { background: oklch(22% 0.07 248); } .card-accent::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.35s; } .card-accent:hover::before { transform: scaleX(1); } /* ===== TAG / BADGE ===== */ .tag { padding: 5px 13px; border: 1px solid var(--gold); color: var(--gold); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 2px; display: inline-block; } .tag-teal { border-color: var(--teal-light); color: var(--teal-light); } /* ===== DIVIDER ===== */ .gold-line { width: 48px; height: 2px; background: var(--gold); margin: 28px 0; } /* ===== PREMIUM BAND ===== */ .premium-band { background: var(--gold); padding: 13px 0; overflow: hidden; } .premium-band-inner { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; padding: 0 40px; } .premium-band-inner span { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; color: var(--navy); white-space: nowrap; } .pb-sep { opacity: 0.35; } /* ===== RESPONSIVE ===== */ @media (max-width: 1080px) { #main-nav { padding: 0 24px; z-index: 9998; } .nav-logo, .nav-burger { position: relative; z-index: 10000; } .nav-burger { display: flex; } .nav-links { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100vh; height: 100dvh; background: var(--navy); flex-direction: column; align-items: stretch; justify-content: center; gap: 2px; margin: 0; padding: 96px 32px calc(40px + env(safe-area-inset-bottom)); overflow-y: auto; z-index: 9995; } .nav-links.open { display: flex; } .nav-links a:not(.nav-cta) { font-size: 1.05rem; letter-spacing: 0.14em; padding: 17px 0; min-height: 54px; display: flex; align-items: center; justify-content: center; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.08); opacity: 1; } .nav-links li:last-child a:not(.nav-cta) { border-bottom: none; } .nav-links .nav-cta { display: block; width: 100%; box-sizing: border-box; margin-top: 28px; padding: 17px 18px; min-height: 54px; text-align: center; font-size: 0.82rem !important; letter-spacing: 0.12em; background: var(--gold) !important; color: var(--navy) !important; border: 1px solid var(--gold); border-radius: 4px; } } @media (max-width: 1080px) { .container { padding: 0 24px; } section { padding: 64px 0; } .premium-band-inner .pb-sep { display: none; } } @media (max-width: 480px) { h1 { font-size: 2rem; } h2 { font-size: 1.6rem; } } /* === Accessibilité === */ .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* Skip-link — visible uniquement au focus (accessibilité clavier WCAG 2.4.1) */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--gold); color: var(--navy); padding: 10px 18px; z-index: 9999; font-family: 'DM Sans', sans-serif; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; font-weight: 500; border-radius: 0 0 4px 0; } .skip-link:focus { left: 0; top: 0; outline: 2px solid var(--ivory); outline-offset: 2px; } /* Focus visible accessible — applique un anneau sobre sur tous les éléments interactifs */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; } /* Conserve le comportement natif pour les boutons en focus visible — pas de double anneau */ button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* Réduit les animations pour les utilisateurs qui ont prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ===== Footer (déplacé depuis shared-nav.js) ===== */ footer { background: var(--navy); color: oklch(70% 0.03 248); border-top: 1px solid rgba(255,255,255,0.06); } .footer-top { max-width: 1200px; margin: 0 auto; padding: 72px 80px 56px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; } .footer-brand .footer-logo { font-family: 'Playfair Display', serif; font-size: 1.1rem; color: var(--ivory); letter-spacing: 0.04em; margin-bottom: 12px; } .footer-brand .footer-logo span { color: var(--gold); } .footer-brand p { font-size: 0.82rem; opacity: 0.5; line-height: 1.7; } .footer-col h5 { font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; } .footer-col a { display: block; font-size: 0.82rem; color: oklch(65% 0.03 248); text-decoration: none; margin-bottom: 10px; transition: color 0.2s; } .footer-col a:hover { color: var(--ivory); } .footer-bottom { max-width: 1200px; margin: 0 auto; padding: 20px 80px 28px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,255,255,0.06); } .footer-copy { font-size: 0.7rem; opacity: 0.35; } .footer-links { display: flex; gap: 24px; } .footer-links a { font-size: 0.7rem; color: oklch(55% 0.03 248); text-decoration: none; transition: color 0.2s; } .footer-links a:hover { color: var(--gold); } @media (max-width: 1080px) { .footer-top { grid-template-columns: 1fr 1fr; padding: 48px 24px 36px; gap: 32px; } .footer-bottom { flex-direction: column; gap: 12px; padding: 16px 24px 24px; text-align: center; } .footer-links { justify-content: center; gap: 20px; } /* Cibles tactiles confortables sur mobile (WCAG 2.5.8) */ .footer-col a { padding: 7px 0; margin-bottom: 4px; } .footer-links a { padding: 8px 4px; display: inline-block; } } @media (max-width: 480px) { .footer-top { grid-template-columns: 1fr; } } /* ===== Fix mobile : liens du burger ouvert lisibles ===== */ @media (max-width: 1080px) { .nav-links.open a:not(.nav-cta) { opacity: 1 !important; } } /* ===== Finitions premium — survols soignés (tout le site) ===== Placé en fin de fichier pour primer sur les transitions de base des boutons. */ .btn-primary, .btn-outline { transition: background .3s ease, color .3s ease, border-color .3s ease, transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -12px rgba(0,0,0,.5); } .btn-outline:hover { transform: translateY(-2px); } .footer-col a, .footer-links a { transition: color .28s ease, opacity .28s ease; } /* ===== FIGURES PEDAGOGIQUES (corps d'article) ===== */ .article-figure { margin: 56px auto; max-width: 720px; background: var(--ivory); border-radius: 2px; padding: 36px 28px 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 8px 24px rgba(13,27,42,0.06); } .article-figure .article-svg { display: block; width: 100%; height: auto; max-width: 640px; margin: 0 auto; } .article-figure figcaption { margin-top: 20px; text-align: center; font-family: 'DM Sans', sans-serif; font-size: 0.82rem; color: var(--text-mid); font-style: italic; line-height: 1.55; } .article-figure figcaption strong { color: var(--text-dark); font-weight: 600; font-style: normal; } @media (max-width: 640px) { .article-figure { padding: 24px 16px 18px; margin: 40px auto; } }