/* ========================================================= TechAide — feuille de style Direction: "Le phare" — un repère calme et fiable dans le brouillard numérique. Palette port/marine, grande lisibilité. ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&family=Fraunces:opsz,wght@9..144,500;9..144,600&display=swap'); :root{ --bg: #F6FAFC; --bg-elevated: #FFFFFF; --bg-soft: #EAF3F6; --text: #142430; --text-muted: #46606B; --harbor: #1D6B96; --harbor-deep: #0F3A52; --amber: #E8963F; --amber-deep: #B96F22; --success: #3C8A5C; --danger: #B4432F; --border: #D3E3E8; --focus-ring: #1D6B96; --shadow: 0 8px 24px rgba(15, 58, 82, 0.08); --shadow-lg: 0 16px 40px rgba(15, 58, 82, 0.14); --radius: 16px; --radius-lg: 24px; --font-display: 'Fraunces', Georgia, serif; --font-body: 'Atkinson Hyperlegible', system-ui, -apple-system, Segoe UI, sans-serif; --step: 1; color-scheme: light; } [data-theme="dark"]{ --bg: #0D1E28; --bg-elevated: #142F3D; --bg-soft: #1A3948; --text: #EAF3F6; --text-muted: #A9C2CC; --harbor: #59B3E0; --harbor-deep: #BEE3F5; --amber: #F2A65A; --amber-deep: #FFC98A; --border: #24485A; --focus-ring: #F2A65A; --shadow: 0 8px 24px rgba(0,0,0,0.35); --shadow-lg: 0 16px 44px rgba(0,0,0,0.45); color-scheme: dark; } /* Accessible font-size control: text-step attribute on */ html[data-text="large"] { font-size: 20px; } html[data-text="xlarge"] { font-size: 23px; } *, *::before, *::after { box-sizing: border-box; } html { font-size: 18px; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } body{ margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.55; min-height: 100vh; } a { color: var(--harbor); } [data-theme="dark"] a { color: var(--harbor); } img { max-width: 100%; display: block; } button, input, textarea { font-family: inherit; font-size: inherit; color: inherit; } :focus-visible{ outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: 4px; } .container{ max-width: 1120px; margin: 0 auto; padding: 0 24px; } .skip-link{ position: absolute; left: -999px; top: 0; background: var(--harbor); color: #fff; padding: 12px 20px; border-radius: 0 0 10px 0; z-index: 999; } .skip-link:focus{ left: 0; } /* ---------- Header ---------- */ .site-header{ position: sticky; top: 0; z-index: 50; background: var(--bg-elevated); border-bottom: 1px solid var(--border); } .site-header .bar{ display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; } .brand{ display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; text-decoration: none; color: var(--text); } .brand .beacon{ width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--amber), var(--amber-deep)); box-shadow: 0 0 0 4px var(--bg-soft); flex-shrink: 0; } .main-nav{ display: flex; gap: 4px; align-items: center; flex-wrap: wrap; } .main-nav a{ text-decoration: none; color: var(--text); font-weight: 700; padding: 10px 14px; border-radius: 999px; } .main-nav a:hover, .main-nav a[aria-current="page"]{ background: var(--bg-soft); } .header-tools{ display: flex; align-items: center; gap: 8px; } .icon-btn{ background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1rem; } .icon-btn:hover{ background: var(--border); } @media (max-width: 860px){ .main-nav{ display: none; } } /* ---------- Hero / Beacon search ---------- */ .hero{ padding: 56px 0 48px; background: linear-gradient(180deg, var(--bg-soft), var(--bg) 70%); border-bottom: 1px solid var(--border); position: relative; overflow: hidden; } .hero::after{ content: ""; position: absolute; inset: auto -10% -60% -10%; height: 220px; background: radial-gradient(ellipse at center, rgba(29,107,150,0.10), transparent 70%); pointer-events: none; } .hero h1{ font-family: var(--font-display); font-size: clamp(2.1rem, 5vw, 3.2rem); margin: 0 0 12px; font-weight: 600; max-width: 16ch; } .hero p.subtitle{ font-size: 1.25rem; color: var(--text-muted); max-width: 46ch; margin: 0 0 32px; } .beacon-search{ position: relative; max-width: 640px; } .beacon-search input[type="search"]{ width: 100%; padding: 20px 60px 20px 24px; border-radius: 999px; border: 2px solid var(--border); background: var(--bg-elevated); font-size: 1.15rem; color: var(--text); box-shadow: var(--shadow); } .beacon-search input[type="search"]:focus{ border-color: var(--harbor); animation: pulse-beacon 1.8s ease-out 1; } @keyframes pulse-beacon{ 0% { box-shadow: 0 0 0 0 rgba(29,107,150,0.35), var(--shadow); } 100% { box-shadow: 0 0 0 14px rgba(29,107,150,0), var(--shadow); } } .beacon-search button.go{ position: absolute; right: 6px; top: 6px; bottom: 6px; border: none; background: var(--harbor); color: #fff; border-radius: 999px; width: 52px; cursor: pointer; font-size: 1.2rem; } .beacon-search button.go:hover{ background: var(--harbor-deep); } .search-suggestions{ list-style: none; margin: 10px 0 0; padding: 0; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; max-width: 640px; } .search-suggestions:empty{ display: none; } .search-suggestions li a{ display: block; padding: 14px 20px; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--border); } .search-suggestions li:last-child a{ border-bottom: none; } .search-suggestions li a:hover, .search-suggestions li a:focus{ background: var(--bg-soft); } .search-suggestions .cat-tag{ color: var(--text-muted); font-size: 0.9rem; } .hero-cta{ margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; } /* ---------- Buttons ---------- */ .btn{ display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; font-weight: 700; text-decoration: none; border: 2px solid transparent; cursor: pointer; font-size: 1.05rem; } .btn-primary{ background: var(--amber); color: #23140A; } .btn-primary:hover{ background: var(--amber-deep); } .btn-outline{ background: transparent; border-color: var(--border); color: var(--text); } .btn-outline:hover{ background: var(--bg-soft); } /* ---------- Sections ---------- */ section.block{ padding: 48px 0; } section.block h2{ font-family: var(--font-display); font-size: 1.8rem; margin: 0 0 6px; font-weight: 600; } .section-lead{ color: var(--text-muted); margin: 0 0 28px; max-width: 60ch; } /* Category grid */ .category-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; } .category-card{ background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; text-decoration: none; color: var(--text); display: flex; flex-direction: column; gap: 10px; transition: transform .15s ease, box-shadow .15s ease; } .category-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow); } .category-card .emoji{ font-size: 2.2rem; } .category-card h3{ margin: 0; font-size: 1.15rem; } .category-card p{ margin: 0; color: var(--text-muted); font-size: 0.95rem; } /* Popular questions list */ .qa-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .qa-list a{ display: flex; justify-content: space-between; gap: 14px; align-items: center; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px; padding: 16px 20px; text-decoration: none; color: var(--text); font-weight: 700; } .qa-list a:hover{ background: var(--bg-soft); } .qa-list a .arrow{ color: var(--harbor); flex-shrink: 0; } /* Guides / tutorial cards */ .guide-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; } .guide-card{ background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; text-decoration: none; color: var(--text); display: flex; flex-direction: column; gap: 8px; } .guide-card:hover{ box-shadow: var(--shadow); } .badge{ display: inline-block; font-size: 0.8rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--bg-soft); color: var(--text-muted); width: fit-content; } .guide-card h3{ margin: 4px 0 0; font-size: 1.1rem; } .guide-meta{ font-size: 0.85rem; color: var(--text-muted); } /* Steps */ .step-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; counter-reset: step; } .step{ background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 22px 22px 70px; position: relative; } .step::before{ counter-increment: step; content: counter(step); position: absolute; left: 18px; top: 20px; width: 38px; height: 38px; border-radius: 50%; background: var(--harbor); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; } .step h3{ margin: 0 0 8px; font-size: 1.15rem; } .step p{ margin: 0; } .step .tip, .step .warning{ margin-top: 12px; padding: 12px 16px; border-radius: 10px; font-size: 0.95rem; } .step .tip{ background: rgba(60,138,92,0.12); color: var(--success); } [data-theme="dark"] .step .tip{ color: #8CD9A8; } .step .warning{ background: rgba(180,67,47,0.10); color: var(--danger); } [data-theme="dark"] .step .warning{ color: #F0958A; } /* Guide feedback */ .guide-feedback{ margin-top: 32px; padding: 24px; background: var(--bg-soft); border-radius: var(--radius); text-align: center; } .guide-feedback .choices{ display: flex; gap: 12px; justify-content: center; margin-top: 14px; flex-wrap: wrap; } .guide-actions{ display: flex; gap: 10px; flex-wrap: wrap; margin: 24px 0; } /* Assistant chat */ .chat-shell{ max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; height: calc(100vh - 180px); min-height: 480px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); } .chat-log{ flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 16px; } .msg{ max-width: 84%; padding: 14px 18px; border-radius: 18px; line-height: 1.5; } .msg.assistant{ background: var(--bg-soft); align-self: flex-start; border-bottom-left-radius: 4px; } .msg.user{ background: var(--harbor); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; } .msg a{ color: inherit; text-decoration: underline; } [data-theme="dark"] .msg.user{ color: #062430; } .chat-suggestions{ display: flex; gap: 8px; flex-wrap: wrap; padding: 0 24px 16px; } .chip{ background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; font-size: 0.9rem; cursor: pointer; } .chip:hover{ background: var(--border); } .chat-input-row{ display: flex; gap: 10px; padding: 16px; border-top: 1px solid var(--border); } .chat-input-row textarea{ flex: 1; resize: none; border: 2px solid var(--border); border-radius: 14px; padding: 12px 16px; background: var(--bg); max-height: 140px; } .chat-input-row button{ border: none; background: var(--harbor); color: #fff; border-radius: 14px; width: 56px; cursor: pointer; font-size: 1.3rem; } .chat-input-row button:hover{ background: var(--harbor-deep); } .chat-input-row button:disabled{ opacity: .5; cursor: not-allowed; } .typing-dots span{ display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); margin-right: 4px; animation: blink 1.2s infinite; } .typing-dots span:nth-child(2){ animation-delay: .2s; } .typing-dots span:nth-child(3){ animation-delay: .4s; } @keyframes blink{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } } /* Filters (popular questions page) */ .filter-bar{ display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; } .filter-chip{ border: 1px solid var(--border); background: var(--bg-elevated); border-radius: 999px; padding: 10px 18px; cursor: pointer; font-weight: 700; } .filter-chip[aria-pressed="true"]{ background: var(--harbor); color: #fff; border-color: var(--harbor); } /* Footer */ .site-footer{ border-top: 1px solid var(--border); padding: 40px 0; color: var(--text-muted); background: var(--bg-soft); } .site-footer .container{ display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; } .site-footer a{ color: var(--text-muted); } .empty-state{ text-align: center; padding: 60px 20px; color: var(--text-muted); } .empty-state .emoji{ font-size: 3rem; display: block; margin-bottom: 12px; } .breadcrumb{ font-size: 0.9rem; color: var(--text-muted); margin-bottom: 18px; } .breadcrumb a{ color: var(--text-muted); } .print-btn, .pdf-btn { background: none; border: 1px solid var(--border); } @media print { .site-header, .site-footer, .guide-actions, .guide-feedback, .skip-link { display: none !important; } }