/**************************************************** /* Thème & modernisation du CV /* Chargé après reset.css / cv.css / mobile.css afin /* de surcharger les couleurs codées en dur. /* Bascule clair / sombre via [data-theme] sur . ****************************************************/ /* ---------- Variables : thème clair (défaut) ---------- */ :root { --bg: #eef1f6; --bg-grad-1: #eef1f6; --bg-grad-2: #e3e9f2; --surface: #ffffff; --surface-alt: #f3f5f9; --text: #2b2f36; --text-muted: #6b7280; --heading: #1f2933; --accent: #33a4c9; --accent-strong: #147393; --accent-contrast: #ffffff; --border: #e3e8ee; --bar-bg: #e6eaf0; --shadow: 0 12px 30px rgba(20, 40, 80, .08); --shadow-sm: 0 4px 12px rgba(20, 40, 80, .06); --radius: 16px; --radius-sm: 10px; } /* ---------- Variables : thème sombre ---------- */ [data-theme="dark"] { --bg: #0e131b; --bg-grad-1: #0e131b; --bg-grad-2: #131a25; --surface: #1a212c; --surface-alt: #222b38; --text: #d7dee7; --text-muted: #94a1b2; --heading: #f0f4f8; --accent: #4cc4e6; --accent-strong: #8adcf2; --accent-contrast: #0e131b; --border: #2b3543; --bar-bg: #2b3543; --shadow: 0 14px 34px rgba(0, 0, 0, .45); --shadow-sm: 0 4px 14px rgba(0, 0, 0, .4); --radius: 16px; --radius-sm: 10px; } /* ---------- Base ---------- */ html { scroll-behavior: smooth; } body { background: var(--bg); background-image: radial-gradient(1200px 600px at 100% -10%, var(--bg-grad-2), transparent 60%), linear-gradient(180deg, var(--bg-grad-1), var(--bg-grad-2)); background-attachment: fixed; color: var(--text); font-family: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color .35s ease, color .35s ease; } ::selection { background: var(--accent); color: var(--accent-contrast); } ::-moz-selection { background: var(--accent); color: var(--accent-contrast); } /* ---------- Liens ---------- */ a { color: var(--accent); transition: color .2s ease; } a:hover, a:focus { color: var(--accent-strong); } /* ---------- Header ---------- */ header[role=banner] { background: var(--surface); border-bottom: none; box-shadow: var(--shadow-sm); padding: 26px 0; position: sticky; top: 0; z-index: 20; transition: background-color .35s ease, box-shadow .35s ease; } header[role=banner] .container_16 { display: flex; align-items: center; gap: 24px; position: relative; } header .header-info { margin-right: auto; } header hgroup { float: none; padding: 0; margin: 0; } header hgroup h1 { color: var(--heading); font-weight: 700; letter-spacing: -.5px; margin: 0; } header hgroup h2 { color: var(--accent); font-style: normal; font-weight: 500; font-size: 20px; text-shadow: none; margin: 4px 0 0; } .header-tagline { color: var(--text-muted); font-size: 14px; line-height: 21px; max-width: 520px; margin: 12px 0 0; } /* ---------- Coordonnées dans l'entête ---------- */ .header-coords { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; } .header-coords li { display: inline-flex; align-items: center; gap: 7px; color: var(--text-muted); } .header-coords i { color: var(--accent); width: 16px; text-align: center; } .header-coords a { color: var(--text); } .header-coords a:hover, .header-coords a:focus { color: var(--accent); } /* ---------- Bloc avatar (logos sociaux + localisation) ---------- */ .header-aside { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; } .avatar-block { display: flex; align-items: center; gap: 16px; } .header-social { display: flex; flex-direction: column; gap: 12px; } .social-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-alt); border: 1px solid var(--border); color: var(--text); font-size: 22px; line-height: 1; transition: background-color .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease; } .social-link:hover, .social-link:focus { background: var(--accent); color: var(--accent-contrast); transform: translateY(-2px); box-shadow: var(--shadow-sm); text-decoration: none; } .header-aside .lieu { display: inline-flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: 14px; margin: 0; } .header-aside .lieu i { color: var(--accent); } header figure { float: none; flex: 0 0 auto; border: 3px solid var(--surface-alt); box-shadow: 0 0 0 3px var(--accent); height: 84px; width: 84px; border-radius: 50%; overflow: hidden; } header figure img { height: 84px; width: 84px; border-radius: 50%; object-fit: cover; } /* ---------- Bouton bascule de thème ---------- */ .theme-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 116px; background: var(--surface-alt); color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 9px 16px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .25s ease, color .25s ease, transform .15s ease, box-shadow .25s ease; } .theme-toggle:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); } .theme-toggle:active { transform: translateY(0); } .theme-toggle i { font-size: 16px; color: var(--accent); } .theme-toggle__label { line-height: 1; } /* ---------- Corps ---------- */ section[role=main] { padding: 10px 0 50px; } section[role=main] > div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px 28px 24px; margin-top: 26px; transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease, transform .2s ease; } section[role=main] > div:hover { box-shadow: var(--shadow); transform: translateY(-2px); } /* Titres de section : on retire les anciens pictos image (cassés) au profit des icônes Font Awesome déjà présentes dans le HTML. */ section[role=main] h3 { color: var(--heading); border-bottom: 1px solid var(--border); padding: 0 0 16px 0; display: flex; align-items: center; gap: 12px; } section[role=main] h3:after, section[role=main] h3:before { display: none !important; content: none !important; } section[role=main] h3 i { color: var(--accent); } section[role=main] h4 strong { color: var(--accent-strong); font-weight: 600; } section[role=main] h5 { color: var(--heading); font-weight: 600; font-size: 16px; margin: 10px 0 0; } /* Les listes expériences/formations gardent leur indentation, on l'allège */ .experiences ul, .formations ul { margin-left: 20px; } .experiences li, .formations li { margin-bottom: 34px; } .experiences li p, .formations li p { margin-left: 0; color: var(--text-muted); } /* ---------- Compétences (barres) ---------- */ .competences .barres li:after { background: var(--bar-bg); border-radius: 999px; height: 7px; bottom: -5px; } .competences .barres li span { background: linear-gradient(90deg, var(--accent), var(--accent-strong)); border-radius: 999px; height: 7px; bottom: -5px; } .competences .tags li { background: var(--accent); border-color: var(--accent-strong); color: var(--accent-contrast); } /* ---------- Pictos texte (lieu, dates, contact) ---------- Les anciennes sprites image ../img/pictos-gris.png n'existent plus : on neutralise le fond et on s'appuie sur Font Awesome. */ .lieu, .dates, .phone, .mail, .site, .form, .twitter, .facebook, .dribbble, .skype { background: none; padding-left: 0; } .lieu, .dates { color: var(--text-muted); display: inline-block; } .lieu i, .dates i, .contact i { color: var(--accent); } .contact ul li { margin: 8px 10px 8px 0; } /* ---------- Loisirs / contact ---------- */ .loisirs p strong, .contact p strong { color: var(--heading); } /* ---------- Accessibilité focus ---------- */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* ---------- Mobile ---------- */ @media screen and (max-width: 480px) { header[role=banner] .container_16 { flex-wrap: wrap; justify-content: center; text-align: center; } header .header-info { margin-right: 0; order: 2; flex: 1 1 100%; } header .header-aside { order: 1; } .theme-toggle { order: 3; flex: 1 1 100%; } .header-coords { justify-content: center; } section[role=main] > div { padding: 6px 18px 18px; } }