/* ========================================================================== Briefway — feuille de style unique (toutes les pages) Les couleurs passent par des variables : le thème clair fonctionne partout. ========================================================================== */ @import url('fonts/inter.css'); /* --- Thème sombre (défaut) --- */ :root { --bg: #03031A; --text: #ffffff; --text-muted: rgba(255, 255, 255, 0.75); --text-soft: rgba(255, 255, 255, 0.65); --text-subtle: rgba(255, 255, 255, 0.45); --text-faint: rgba(255, 255, 255, 0.35); --border: rgba(255, 255, 255, 0.05); --border-strong: rgba(255, 255, 255, 0.1); --surface: rgba(255, 255, 255, 0.04); --surface-hover: rgba(255, 255, 255, 0.08); --hero-fade-mid: rgba(3, 3, 26, 0.7); --hero-fade-end: #03031A; --glow-violet: rgba(99, 85, 241, 0.10); --glow-teal: rgba(66, 204, 173, 0.08); --phone-glow-violet: rgba(99, 85, 241, 0.22); --phone-glow-teal: rgba(66, 204, 173, 0.20); --phone-shadow: rgba(10, 8, 40, 0.55); --accent: #42CCAD; --slogan-color: #42CCAD; --on-gradient: #03031A; --nav-bg: rgba(3, 3, 26, 0.82); --nav-h: 76px; } /* --- Thème clair --- */ [data-theme="light"] { --bg: #fafafb; --text: #03031A; --text-muted: rgba(3, 3, 26, 0.75); --text-soft: rgba(3, 3, 26, 0.65); --text-subtle: rgba(3, 3, 26, 0.5); --text-faint: rgba(3, 3, 26, 0.4); --border: rgba(3, 3, 26, 0.06); --border-strong: rgba(3, 3, 26, 0.12); --surface: rgba(3, 3, 26, 0.03); --surface-hover: rgba(3, 3, 26, 0.06); --hero-fade-mid: rgba(250, 250, 251, 0.7); --hero-fade-end: #fafafb; --glow-violet: rgba(99, 85, 241, 0.10); --glow-teal: rgba(66, 204, 173, 0.08); --phone-glow-violet: rgba(99, 85, 241, 0.14); --phone-glow-teal: rgba(66, 204, 173, 0.14); --phone-shadow: rgba(99, 85, 241, 0.20); --accent: #1D6D5C; --slogan-color: #1D6D5C; --on-gradient: #ffffff; --nav-bg: rgba(250, 250, 251, 0.85); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Le débordement horizontal est contenu au niveau de : le poser sur en fait un conteneur de défilement et casse la barre fixe. */ html { scroll-behavior: smooth; overflow-x: hidden; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; } /* Fondu au changement de thème. La transition n'est active que pendant la bascule : main.js pose .theme-anim sur le temps de l'animation puis la retire. Déclarée en permanence, elle fige la couleur de fond et empêche le thème de s'appliquer. */ .theme-anim, .theme-anim body, .theme-anim nav, .theme-anim .post-card, .theme-anim .source-card, .theme-anim .stat-box, .theme-anim .store-btn, .theme-anim .theme-toggle, .theme-anim .menu-toggle, .theme-anim .field input, .theme-anim .field textarea { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } body::before { content: ''; position: fixed; top: 20%; left: -10%; width: 60vw; height: 60vw; background: radial-gradient(circle, var(--glow-violet) 0%, transparent 60%); pointer-events: none; z-index: 0; } body::after { content: ''; position: fixed; bottom: -20%; right: -10%; width: 60vw; height: 60vw; background: radial-gradient(circle, var(--glow-teal) 0%, transparent 60%); pointer-events: none; z-index: 0; } main, nav, footer { position: relative; z-index: 1; } .grad-text { background: linear-gradient(90deg, #6355F1 0%, #42CCAD 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ========================================================================== Navigation ========================================================================== */ /* Barre fixe : elle reste visible pendant le défilement, sur toutes les tailles d'écran. Le contenu est décalé par le padding-top de . */ nav, nav.nav-overlay { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; height: var(--nav-h); padding: 0 6vw; z-index: 100; border-bottom: 1px solid transparent; /* Volontairement pas de transition sur background-color : déclarée en permanence, elle fige la couleur et la barre resterait transparente au défilement — le menu deviendrait illisible par-dessus le contenu. Le fond s'applique dès 8 px de défilement, le fondu ne manquerait à personne. */ transition: border-color 0.25s ease; } /* Fond translucide dès que la page défile */ nav.is-scrolled { background-color: var(--nav-bg); border-bottom-color: var(--border); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } body { padding-top: var(--nav-h); } nav .logo img { height: 32px; display: block; } .logo .logo-light { display: none; } [data-theme="light"] .logo .logo-dark { display: none; } [data-theme="light"] .logo .logo-light { display: block; } nav .menu { display: flex; gap: 36px; align-items: center; } nav .menu a { color: var(--text-muted); text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s; } nav .menu a:hover { color: var(--text); } nav .menu a.active { color: var(--accent); } nav .nav-right { display: flex; align-items: center; gap: 12px; } /* --- Bouton du menu mobile (masqué sur grand écran) --- */ .menu-toggle { display: none; width: 40px; height: 40px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .menu-toggle:hover { background: var(--surface-hover); } .menu-toggle svg { width: 20px; height: 20px; } .menu-toggle .icon-close { display: none; } .menu-toggle[aria-expanded="true"] .icon-open { display: none; } .menu-toggle[aria-expanded="true"] .icon-close { display: block; } .theme-toggle { width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s, transform 0.2s; flex-shrink: 0; } .theme-toggle:hover { background: var(--surface-hover); transform: rotate(15deg); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .sun-icon { display: block; } .theme-toggle .moon-icon { display: none; } [data-theme="light"] .theme-toggle .sun-icon { display: none; } [data-theme="light"] .theme-toggle .moon-icon { display: block; } /* ========================================================================== Boutons ========================================================================== */ .cta { background: linear-gradient(90deg, #6355F1 0%, #42CCAD 100%); color: #03031A; font-weight: 600; font-size: 14px; padding: 12px 22px; border-radius: 999px; text-decoration: none; display: inline-block; border: none; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .cta:hover { transform: translateY(-1px); box-shadow: 0 10px 40px -10px rgba(99, 85, 241, 0.5); } .cta.large { font-size: 16px; padding: 16px 32px; } .store-btn { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px; color: var(--text-subtle); text-decoration: none; cursor: not-allowed; transition: background 0.2s; min-height: 54px; } .store-btn:hover { background: var(--surface-hover); } .store-btn svg { width: 22px; height: 22px; flex-shrink: 0; } .store-btn .lines { display: flex; flex-direction: column; line-height: 1.1; text-align: left; } .store-btn .lines .small { font-size: 10px; letter-spacing: 0.03em; opacity: 0.75; text-transform: uppercase; } .store-btn .lines .big { font-size: 15px; font-weight: 600; color: var(--text-muted); } .cta-actions { position: relative; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; align-items: center; } /* ========================================================================== Accueil — hero ========================================================================== */ /* Pas de padding ici : c'est qui dégage la barre fixe (--nav-h). Le cumul des deux laissait un bandeau vide au-dessus de la bannière. */ .hero { position: relative; width: 100%; } .hero-image-wrap { position: relative; width: 100%; aspect-ratio: 4400 / 1467; margin-bottom: -40px; } .hero-image-wrap .hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; } .hero-image-wrap .hero-slide.is-active { opacity: 1; } .hero-image-wrap::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40%; background: linear-gradient(180deg, transparent 0%, var(--hero-fade-mid) 65%, var(--hero-fade-end) 100%); pointer-events: none; } .hero-content { position: relative; z-index: 2; padding: 20px 6vw 100px; max-width: 1400px; margin: 0 auto; text-align: center; } .hero-eyebrow { color: var(--accent); font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 24px; } .hero h1 { font-size: clamp(40px, 5.5vw, 76px); font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; margin: 0 auto 28px; max-width: 900px; } .hero-sub { font-size: clamp(17px, 1.4vw, 20px); color: var(--text-muted); max-width: 620px; margin: 0 auto 16px; line-height: 1.5; } .hero-slogan { color: var(--slogan-color); font-style: italic; font-size: 16px; font-weight: 500; margin-bottom: 40px; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; align-items: center; } .hero-actions .store-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } /* ========================================================================== Accueil — carrousel de sources ========================================================================== */ .press-strip { padding: 96px 0 88px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); position: relative; } /* Halo discret pour détacher la section du reste de la page */ .press-strip::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(900px, 90%); height: 320px; background: radial-gradient(ellipse, var(--phone-glow-teal) 0%, transparent 70%); pointer-events: none; opacity: 0.6; } .press-head { position: relative; text-align: center; max-width: 760px; margin: 0 auto 52px; padding: 0 6vw; } .press-head .eyebrow { color: var(--accent); font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 18px; } .press-head h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 18px; } .press-head p { font-size: 17px; color: var(--text-soft); line-height: 1.6; } .press-head .press-link { display: inline-block; margin-top: 22px; color: var(--accent); font-size: 15px; font-weight: 600; text-decoration: none; } .press-head .press-link:hover { text-decoration: underline; } .marquee { position: relative; } .marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); } .marquee-track { display: flex; align-items: center; gap: 60px; padding-right: 60px; flex-shrink: 0; animation: marquee 45s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .press-item { display: flex; align-items: center; justify-content: center; height: 44px; flex-shrink: 0; } .press-logo { height: 30px; width: auto; max-width: 170px; object-fit: contain; display: block; /* Rend n'importe quel logo en silhouette monochrome */ filter: grayscale(1) brightness(0) invert(0.82); opacity: 0.55; transition: opacity 0.2s; } [data-theme="light"] .press-logo { filter: grayscale(1) brightness(0) invert(0); opacity: 0.5; } .press-item:hover .press-logo { opacity: 1; } .press-name { color: var(--text-soft); font-size: 21px; font-weight: 600; font-family: 'Times New Roman', Georgia, serif; letter-spacing: -0.01em; white-space: nowrap; text-decoration: none; opacity: 0.6; transition: opacity 0.2s, color 0.2s; } .press-item:hover .press-name { opacity: 1; color: var(--text); } .press-disclaimer { text-align: center; padding: 28px 6vw 0; font-size: 12px; color: var(--text-faint); line-height: 1.5; } /* ========================================================================== Sections génériques ========================================================================== */ .section { padding: 120px 6vw; max-width: 1400px; margin: 0 auto; } .section-intro { text-align: center; max-width: 720px; margin: 0 auto 80px; } .section-intro .eyebrow { color: var(--accent); font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 20px; } .section-intro h2 { font-size: clamp(32px, 4vw, 56px); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 20px; } .section-intro p { font-size: 18px; color: var(--text-soft); line-height: 1.6; } /* ========================================================================== Accueil — étapes produit ========================================================================== */ .feature-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 100px; margin-bottom: 160px; } .feature-row:last-child { margin-bottom: 0; } .feature-row.reverse .feature-text { order: 2; } .feature-row.reverse .feature-visual { order: 1; } .feature-text .step-number { display: inline-block; font-size: 13px; font-weight: 500; color: var(--accent); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 20px; } .feature-text h3 { font-size: clamp(28px, 3vw, 44px); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 20px; } .feature-text p { font-size: 17px; color: var(--text-soft); line-height: 1.65; margin-bottom: 16px; } .feature-text p:last-child { margin-bottom: 0; } .feature-text .highlight { color: var(--text); font-weight: 500; } .feature-visual { display: flex; justify-content: center; align-items: center; position: relative; min-height: 480px; } .feature-visual::before { content: ''; position: absolute; width: 70%; height: 70%; background: radial-gradient(circle, var(--phone-glow-violet) 0%, transparent 70%); pointer-events: none; z-index: 0; } .feature-row:nth-child(even) .feature-visual::before { background: radial-gradient(circle, var(--phone-glow-teal) 0%, transparent 70%); } .phone { position: relative; width: 100%; max-width: 290px; transition: transform 0.4s ease; /* Le cadre de l'iPhone est intégré à l'image (fond transparent) : drop-shadow épouse sa silhouette, là où box-shadow dessinerait un carré. */ filter: drop-shadow(0 24px 38px var(--phone-shadow)); z-index: 1; } .phone img { display: block; width: 100%; height: auto; } .phone:hover { transform: translateY(-8px); } .phone-pair { display: flex; gap: 20px; align-items: center; z-index: 1; } .phone-pair .phone { max-width: 220px; } .phone-pair .phone:nth-child(1) { transform: translateY(24px) rotate(-4deg); } .phone-pair .phone:nth-child(2) { transform: translateY(-24px) rotate(4deg); } .phone-pair .phone:hover { transform: translateY(-8px) rotate(0deg); } /* ========================================================================== CTA final ========================================================================== */ .final-cta { text-align: center; padding: 160px 6vw; position: relative; } .final-cta::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 600px; background: radial-gradient(circle, var(--phone-glow-violet) 0%, transparent 60%); pointer-events: none; } .final-cta h2 { font-size: clamp(36px, 5vw, 68px); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 20px; position: relative; } .final-cta p { font-size: 18px; color: var(--text-soft); margin-bottom: 40px; position: relative; } /* ========================================================================== Page À propos ========================================================================== */ .about-hero { padding: 80px 6vw 60px; max-width: 820px; margin: 0 auto; text-align: center; } .about-hero .eyebrow { color: var(--accent); font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 24px; } .about-hero h1 { font-size: clamp(40px, 5vw, 68px); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 24px; } .about-hero .lead { font-size: 20px; color: var(--text-soft); line-height: 1.5; } .about-content { max-width: 720px; margin: 0 auto; padding: 60px 6vw 80px; } .about-content article { margin-bottom: 72px; } .about-content article:last-child { margin-bottom: 0; } .about-content h2 { font-size: clamp(26px, 2.8vw, 36px); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 24px; color: var(--text); } .about-content p { font-size: 18px; color: var(--text-muted); line-height: 1.7; margin-bottom: 20px; } .about-content p:last-child { margin-bottom: 0; } .about-content p .highlight { color: var(--text); font-weight: 500; } .about-content .divider { width: 60px; height: 2px; background: linear-gradient(90deg, #6355F1, #42CCAD); margin: 0 0 24px; border-radius: 2px; } /* Liens en corps de texte (page À propos et articles) : sans cette règle, ils s'affichent dans le bleu par défaut du navigateur. */ .about-content p a, .article-body p a { color: var(--accent); font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; } .about-content p a:hover, .article-body p a:hover { border-bottom-color: transparent; } .about-content .signature { margin-top: 40px; font-size: 18px; color: var(--accent); font-weight: 500; font-style: italic; } /* ========================================================================== Blog — liste ========================================================================== */ .blog-hero { padding: 80px 6vw 40px; max-width: 900px; margin: 0 auto; text-align: center; } .blog-hero .eyebrow { color: var(--accent); font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 24px; } .blog-hero h1 { font-size: clamp(40px, 5vw, 64px); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 24px; } .blog-hero .lead { font-size: 19px; color: var(--text-soft); line-height: 1.5; } .blog-list { max-width: 900px; margin: 0 auto; padding: 40px 6vw; } .post-card { display: block; text-decoration: none; color: inherit; padding: 32px; border: 1px solid var(--border-strong); border-radius: 24px; background: var(--surface); margin-bottom: 20px; transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease; } .post-card:hover { transform: translateY(-4px); border-color: var(--text-faint); background: var(--surface-hover); } .post-meta { display: flex; gap: 12px; align-items: center; font-size: 12.5px; color: var(--text-subtle); letter-spacing: 0.03em; margin-bottom: 14px; flex-wrap: wrap; } .post-tag { color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; font-size: 11.5px; } .post-card h2 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 12px; } .post-card p { font-size: 16px; color: var(--text-soft); line-height: 1.6; } .post-card .read-more { display: inline-block; margin-top: 18px; color: var(--accent); font-size: 14px; font-weight: 600; } /* ========================================================================== Blog — article ========================================================================== */ .article { max-width: 720px; margin: 0 auto; padding: 40px 6vw; } .back-link { color: var(--text-subtle); text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s; } .back-link:hover { color: var(--accent); } .article-header { padding: 40px 0 32px; border-bottom: 1px solid var(--border-strong); margin-bottom: 40px; } .article-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--text-subtle); margin-bottom: 20px; } .article-tag { color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; font-size: 11.5px; } .article h1 { font-size: clamp(30px, 4vw, 46px); font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; } .article-body p { font-size: 18px; color: var(--text-muted); line-height: 1.75; margin-bottom: 24px; } .article-body h2 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; margin: 48px 0 20px; } .article-body .highlight { color: var(--text); font-weight: 500; } .article-body blockquote { border-left: 2px solid; border-image: linear-gradient(180deg, #6355F1, #42CCAD) 1; padding-left: 24px; margin: 0 0 24px; font-size: 20px; color: var(--text); font-weight: 500; line-height: 1.5; } .article-body .signature { margin-top: 40px; font-size: 18px; color: var(--accent); font-weight: 500; font-style: italic; } .stat-row { display: flex; gap: 16px; flex-wrap: wrap; margin: 8px 0 32px; } .stat-box { flex: 1; min-width: 140px; padding: 24px; border: 1px solid var(--border-strong); border-radius: 18px; background: var(--surface); text-align: center; } .stat-box .n { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; } .stat-box .l { font-size: 13px; color: var(--text-subtle); margin-top: 6px; } .article-cta { max-width: 720px; margin: 40px auto 0; padding: 48px 6vw; text-align: center; border-top: 1px solid var(--border-strong); } .article-cta h3 { font-size: 24px; font-weight: 600; margin-bottom: 20px; letter-spacing: -0.01em; } /* ========================================================================== Page Contact ========================================================================== */ .contact-hero { padding: 80px 6vw 20px; max-width: 640px; margin: 0 auto; text-align: center; } .contact-hero .eyebrow { color: var(--accent); font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 24px; } .contact-hero h1 { font-size: clamp(36px, 4.5vw, 56px); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 20px; } .contact-hero .lead { font-size: 18px; color: var(--text-soft); line-height: 1.55; } .contact-hero .lead a { color: var(--accent); text-decoration: none; } .contact-hero .lead a:hover { text-decoration: underline; } .contact-form { max-width: 640px; margin: 0 auto; padding: 40px 6vw; } .field { margin-bottom: 22px; } .field label { display: block; font-size: 14px; font-weight: 500; color: var(--text-muted); margin-bottom: 8px; } .field input, .field textarea { width: 100%; font-family: inherit; font-size: 16px; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px; padding: 14px 16px; transition: border-color 0.2s, background 0.2s; } .field input::placeholder, .field textarea::placeholder { color: var(--text-faint); } .field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: var(--surface-hover); } .field textarea { resize: vertical; min-height: 150px; line-height: 1.6; } .submit-btn { background: linear-gradient(90deg, #6355F1 0%, #42CCAD 100%); color: #03031A; font-weight: 600; font-size: 16px; font-family: inherit; padding: 15px 32px; border-radius: 999px; border: none; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .submit-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 40px -10px rgba(99, 85, 241, 0.5); } .form-note { margin-top: 16px; font-size: 13px; color: var(--text-faint); line-height: 1.5; } .form-status { margin-top: 18px; font-size: 14.5px; color: var(--accent); display: none; line-height: 1.5; } .form-status.show { display: block; } /* ========================================================================== Pages légales (mentions légales, confidentialité) ========================================================================== */ .legal { max-width: 760px; margin: 0 auto; padding: 60px 6vw 40px; } .legal h1 { font-size: clamp(32px, 4vw, 48px); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 12px; } .legal .updated { color: var(--text-faint); font-size: 14px; margin-bottom: 48px; } .legal h2 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; letter-spacing: -0.01em; margin: 44px 0 16px; } .legal h3 { font-size: 17px; font-weight: 600; margin: 24px 0 10px; } .legal p, .legal li { font-size: 16.5px; color: var(--text-muted); line-height: 1.7; margin-bottom: 14px; } .legal ul { padding-left: 22px; margin-bottom: 20px; } .legal a { color: var(--accent); } /* Tableau des durées de conservation (politique de confidentialité) */ .legal table { width: 100%; border-collapse: collapse; margin: 1.5rem 0 2rem; font-size: 0.95em; } .legal table th, .legal table td { text-align: left; padding: 0.75rem 1rem 0.75rem 0; border-bottom: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 15%, transparent); vertical-align: top; } .legal table th { font-weight: 600; white-space: nowrap; } .legal table td:last-child, .legal table th:last-child { padding-right: 0; white-space: nowrap; } @media (max-width: 640px) { .legal table, .legal table tbody, .legal table tr, .legal table td { display: block; width: 100%; } .legal table thead { display: none; } .legal table tr { padding: 0.75rem 0; border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent); } .legal table td { border: 0; padding: 0; } .legal table td:first-child { font-weight: 600; } .legal table td:last-child { white-space: normal; opacity: 0.8; } } .legal .todo { display: block; background: rgba(255, 193, 7, 0.1); border-left: 3px solid #FFC107; padding: 12px 16px; border-radius: 0 8px 8px 0; color: var(--text); font-size: 15px; margin-bottom: 16px; } /* ========================================================================== Page « Nos sources » ========================================================================== */ .sources-page .back-link { display: inline-block; margin-bottom: 28px; } .source-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 32px 0 8px; } .source-group { margin-top: 56px; } .source-group-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .source-group-head h2 { margin: 0; } .source-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border-radius: 12px; font-size: 16px; font-weight: 700; flex-shrink: 0; color: var(--on-gradient); } .badge-jti { background: linear-gradient(135deg, #6355F1, #42CCAD); } .badge-charte { background: var(--surface-hover); border: 1px solid var(--accent); color: var(--accent); } .badge-reference { background: var(--surface-hover); border: 1px solid var(--border-strong); color: var(--text-muted); } .source-group-desc { font-size: 15.5px; color: var(--text-soft); line-height: 1.65; margin-bottom: 22px; } .source-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; } .source-card { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface); text-decoration: none; transition: transform 0.2s ease, border-color 0.2s ease; } .source-card:hover { transform: translateY(-2px); border-color: var(--accent); } .source-name { font-size: 15px; font-weight: 600; color: var(--text); } .source-country { font-size: 12px; color: var(--text-faint); white-space: nowrap; } @media (max-width: 640px) { .source-stats { grid-template-columns: 1fr; } .source-grid { grid-template-columns: 1fr; } } /* ========================================================================== Page 404 ========================================================================== */ .notfound { min-height: 62vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 80px 6vw; } .notfound .code { font-size: clamp(70px, 12vw, 130px); font-weight: 700; line-height: 1; letter-spacing: -0.04em; margin-bottom: 16px; } .notfound h1 { font-size: clamp(24px, 3vw, 34px); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 16px; } .notfound p { color: var(--text-soft); font-size: 17px; margin-bottom: 36px; max-width: 460px; } /* ========================================================================== Pied de page ========================================================================== */ footer { border-top: 1px solid var(--border); padding: 40px 6vw; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 40px; } footer .logo img { height: 24px; display: block; opacity: 0.7; } footer .links { display: flex; gap: 24px; flex-wrap: wrap; } footer .links a { color: var(--text-subtle); text-decoration: none; font-size: 13px; transition: color 0.2s; } footer .links a:hover { color: var(--text-muted); } footer .copyright { color: var(--text-faint); font-size: 13px; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 900px) { /* La barre laisse place à un bouton qui déploie un panneau de navigation */ .menu-toggle { display: inline-flex; } /* Ouverture pilotée par display : robuste, sans dépendre d'une transition. */ nav .menu { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 6vw 28px; background-color: var(--bg); border-bottom: 1px solid var(--border); box-shadow: 0 24px 40px -24px rgba(0, 0, 0, 0.6); max-height: calc(100vh - var(--nav-h)); overflow-y: auto; } /* Le menu ouvert est visible par défaut ; l'animation est portée par une classe que main.js retire une fois jouée. Si un moteur n'exécute pas l'animation, le menu reste donc affiché au lieu de rester invisible. */ nav .menu.is-open { display: flex; } nav .menu.is-open.menu-anim { animation: menu-in 0.26s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes menu-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } } nav .menu a { padding: 16px 4px; font-size: 17px; border-bottom: 1px solid var(--border); } nav .menu a:last-child { border-bottom: none; } /* Le libellé du bouton principal est raccourci pour tenir dans la barre */ nav .nav-right .cta { padding: 10px 16px; font-size: 13px; } .section { padding: 80px 6vw; } .feature-row { grid-template-columns: 1fr; gap: 60px; margin-bottom: 120px; } .feature-row.reverse .feature-text, .feature-row.reverse .feature-visual { order: initial; } .feature-visual { min-height: auto; padding: 40px 0; } .phone { max-width: 260px; } .phone-pair .phone { max-width: 170px; } .marquee-track { gap: 40px; padding-right: 40px; } .press-name { font-size: 18px; } .press-logo { height: 24px; } .about-content h2 { font-size: 26px; } .about-content p { font-size: 16px; } .article-body p { font-size: 17px; } .press-strip { padding: 64px 0 56px; } .press-head { margin-bottom: 36px; } .press-head p { font-size: 16px; } footer { flex-direction: column; align-items: flex-start; } } /* Très petits écrans : on laisse la priorité au bouton principal */ @media (max-width: 380px) { nav { gap: 8px; padding: 0 4vw; } nav .nav-right { gap: 8px; } nav .nav-right .cta { padding: 9px 12px; font-size: 12.5px; } .theme-toggle { width: 36px; height: 36px; } .menu-toggle { width: 36px; height: 36px; } } /* Respecte le réglage système "réduire les animations" */ @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } .hero-image-wrap .hero-slide { transition: none; } * { scroll-behavior: auto; } }