/* * theme.css — tokens de design partagés + header de navigation du site. * * Source unique de la charte (dark mode, fond bleu nuit, texte blanc), calquée * sur la home (static/index.html) qui sert de référence. Chargée par chemin * absolu (/theme.css) sur TOUTES les pages, comme /i18n/i18n.js. * * Contient : les tokens :root, la barre de navigation .site-header (liens * Accueil / CV / Chat + sélecteur de langue), les boutons CTA de la home, et la * règle d'impression qui masque le header (le header n'a pas de sens sur papier). */ :root { --bg-color: #0f172a; /* Bleu nuit très sombre */ --card-bg: #1e293b; /* Légèrement plus clair */ --text-main: #f8fafc; /* Blanc cassé */ --text-muted: #94a3b8; /* Gris bleuté */ --accent: #38bdf8; /* Bleu ciel pour hover/CTA */ --border: #334155; --site-max-width: 1180px; /* Largeur max partagée CV + chatbot (source unique) */ --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } /* --- Barre de navigation partagée (CV + chatbot) --- Liens à gauche, sélecteur de langue à droite. Markup statique dans chaque page → la nav fonctionne même sans JS. */ .site-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; background: var(--bg-color); border-bottom: 1px solid var(--border); font-family: var(--font-stack); /* line-height fixé : sinon le line-height du de chaque page (1.5 sur le CV, normal sur le chatbot) fuirait dans les liens et donnerait des hauteurs de header différentes. Le header doit être identique partout. */ line-height: 1; } .site-nav { display: flex; gap: 4px; } .site-nav a { color: var(--text-muted); text-decoration: none; font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 8px; border: 1px solid transparent; transition: color 0.15s, background-color 0.15s, border-color 0.15s; } .site-nav a:hover { color: var(--text-main); background: var(--card-bg); } /* Page courante : mise en évidence (aria-current="page" posé dans le HTML). */ .site-nav a[aria-current="page"] { color: var(--text-main); background: var(--card-bg); border-color: var(--border); } /* --- Sélecteur de langue (drapeaux). Initialement dans le chatbot, désormais partagé. i18n.js intercepte le clic (data-set-lang) pour basculer EN PLACE ; sans JS, le href="?lang=…" navigue normalement (amélioration progressive). --- */ .lang-switch { display: flex; gap: 4px; } .lang-switch a { text-decoration: none; font-size: 18px; line-height: 1; padding: 3px 5px; border-radius: 7px; border: 1px solid transparent; opacity: 0.5; transition: opacity 0.15s; } .lang-switch a:hover { opacity: 0.85; } .lang-switch a[aria-current="true"] { opacity: 1; border-color: var(--border); background: var(--card-bg); } /* --- Boutons CTA (home) : appels à l'action proéminents au-dessus des liens sociaux. Même traitement « carte sombre » que les liens sociaux, avec une typo plus appuyée pour ressortir. --- */ .cta-buttons { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; } .cta { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 1rem; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 1.05rem; background: var(--card-bg); color: var(--text-main); border: 1px solid var(--border); transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; } .cta:hover { border-color: var(--accent); transform: translateY(-2px); background: #253346; } /* --- Impression : la barre de navigation est masquée (cf. demande explicite). --- */ @media print { .site-header { display: none !important; } }