/* ========================================================================== Pro Re Nata — Feuille de style principale Style : Apple Health (clean, minimal, généreux en blanc) Palette : alignée sur le gradient du logo (navy → teal → aqua → emerald) Mode : light + dark via [data-theme="dark"] sur ========================================================================== */ /* ========================================================================== Polices auto-hébergées (Inter + Lora, variables, sous-ensemble latin) -------------------------------------------------------------------------- Inter porte tout l'UI (corps, libellés, données, boutons) ; Lora signe les titres de section et l'ordonnance (contraste sérif/sans-sérif). Fichiers locaux → aucun appel réseau, fonctionne hors-ligne (PWA). font-display:swap affiche d'abord la pile système puis substitue sans bloquer le rendu. ========================================================================== */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/inter-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/inter-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../assets/fonts/lora-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Lora"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("../assets/fonts/lora-latin-wght-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root, [data-theme="light"] { /* ── Palette logo (référence, ne change pas selon le thème) ── */ --logo-navy: #0f2d4e; --logo-teal: #0e6d8a; --logo-aqua: #0ea5a4; --logo-emerald: #15806e; /* ── Couleurs sémantiques (light mode — défaut) ── */ --prn-navy: #0f2d4e; --prn-blue: #0e6d8a; /* aligné teal logo */ --prn-blue-2: #0ea5a4; /* aligné aqua logo */ --prn-blue-light: #e6f4f6; --prn-teal: #0ea5a4; --prn-teal-strong: #086c6b; /* WCAG AA : 4.5:1 sur fond teal-light (Sprint 6 M5 R1) */ --prn-teal-light: #ddf5f1; --prn-accent: #15806e; /* emerald logo (CTA secondaire) */ /* Texte */ --prn-ink: #0a1628; --prn-ink-soft: #44505f; --prn-muted: #5d6877; /* WCAG AA : 4.5:1 sur fond blanc/surface (Sprint 6 M5 R1) */ /* Surfaces (Apple Health style — beaucoup de blanc, peu de gris) */ --prn-bg: #f5f7f9; --prn-bg-alt: #ffffff; --prn-surface: #ffffff; --prn-surface-2: #fafbfc; --prn-line: #e5e9ee; --prn-line-soft: #eef1f4; /* Statuts */ --prn-warning: #b45309; --prn-warning-bg: #fef3c7; --prn-danger: #b91c1c; --prn-danger-bg: #fee2e2; --prn-danger-bg-soft: #fff5f5; --prn-success: #0f6b5c; /* WCAG AA : 5.0:1 sur --prn-success-bg (Sprint 6 M5 R1) — était #15806e (4.23:1) */ --prn-success-bg: #ddf5f1; /* ── Tokens d'interaction (hover/selected) ── unifie tout le module voyage/nv/oxyures/perinatal pour adaptation auto au thème. */ --prn-int-hover-bg: #eef6f3; /* fond légèrement teal sur hover */ --prn-int-hover-border: #238c74; /* bordure teal medium sur hover */ --prn-int-selected-bg: #eef6f3; /* identique hover-bg en light */ --prn-int-selected-border: #1a6b5a; /* bordure teal foncé sur sélection */ --prn-int-strong: #1a6b5a; /* checkbox/radio rempli, accent teal */ --prn-int-strong-on: #ffffff; /* texte/icône sur fond strong */ --prn-int-text: #1a6b5a; /* texte d'un état sélectionné */ /* Risques (utilisés voyage) */ --prn-risk-high: #b91c1c; --prn-risk-mod: #b45309; --prn-risk-low: #a16207; --prn-risk-none: #15806e; /* ── Typographie (Inter + Lora auto-hébergés, fallback système Apple-first) ── */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-serif: 'Lora', 'New York', Georgia, 'Times New Roman', serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; /* ── Géométrie (radius plus généreux, façon Apple) ── */ --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-xl: 22px; /* ── Ombres (très subtiles, layered depth) ── */ --shadow-xs: 0 1px 2px rgba(15, 45, 78, 0.04); --shadow-sm: 0 2px 6px rgba(15, 45, 78, 0.06), 0 1px 2px rgba(15, 45, 78, 0.04); --shadow: 0 6px 16px rgba(15, 45, 78, 0.08), 0 2px 4px rgba(15, 45, 78, 0.04); --shadow-lg: 0 18px 40px rgba(15, 45, 78, 0.12), 0 4px 8px rgba(15, 45, 78, 0.06); --shadow-xl: 0 32px 64px rgba(15, 45, 78, 0.16); /* Glow (utilisé sur focus / hover discret) */ --glow-teal: 0 0 0 4px rgba(14, 165, 164, 0.14); /* ── Animation (Apple ease-out cubic) ── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --t-fast: 120ms; --t-base: 200ms; --t-slow: 360ms; /* Gradient signature (logo capsule) — réutilisable pour CTA, badges, headers */ --grad-logo: linear-gradient(135deg, var(--logo-navy) 0%, var(--logo-teal) 45%, var(--logo-aqua) 75%, var(--logo-emerald) 100%); --grad-soft: linear-gradient(135deg, rgba(14,109,138,0.06) 0%, rgba(14,165,164,0.06) 100%); color-scheme: light; } /* ── Dark mode (active via [data-theme="dark"] ou prefers-color-scheme) Palette adoucie : tons bleu-ardoise chauds (au lieu de noir pur), contraste WCAG AA (14:1 pour le texte principal sur le fond), accents teal lumineux mais pas saturés à fond. ── */ [data-theme="dark"] { --prn-navy: #e2e8f0; /* titres : off-white doux, plus reposant */ --prn-blue: #6ee0de; --prn-blue-2: #95eceb; --prn-blue-light: rgba(110, 224, 222, 0.10); --prn-teal: #6ee0de; --prn-teal-strong: #6ee0de; /* déjà clair en dark mode — pas besoin de variante */ --prn-teal-light: rgba(110, 224, 222, 0.14); --prn-accent: #7dd4ba; /* Texte : tons écru/perle, JAMAIS blanc pur (style Apple Reader Mode) */ --prn-ink: #d4dae3; /* corps de texte, ~12:1 (AAA) sans agresser */ --prn-ink-soft: #aab3c0; /* secondaire, ~7.5:1 */ --prn-muted: #939fb1; /* WCAG AA Sprint 6 M5 R2 — était #828c9c (4.23:1 sur #232a38) */ /* tertiaire (légendes, sources) */ /* Surfaces : bleu-ardoise chaud, layered depth (chaque niveau ~6% plus clair) */ --prn-bg: #131822; /* fond global, pas de noir pur */ --prn-bg-alt: #181e29; --prn-surface: #1d2330; /* cartes, headers */ --prn-surface-2: #232a38; /* surfaces secondaires (search input, etc.) */ --prn-line: #2a3242; /* bordures normales */ --prn-line-soft: #232a38; /* bordures discrètes */ --prn-warning: #fcd34d; --prn-warning-bg: rgba(252, 211, 77, 0.12); --prn-danger: #fca5a5; --prn-danger-bg: rgba(252, 165, 165, 0.10); --prn-danger-bg-soft: rgba(252, 165, 165, 0.06); --prn-success: #6cc8ad; --prn-success-bg: rgba(108, 200, 173, 0.12); /* Tokens interaction : fond hover/selected = teal très désaturé, contraste suffisant pour démarquer sans agresser */ --prn-int-hover-bg: rgba(95, 212, 210, 0.08); --prn-int-hover-border: rgba(95, 212, 210, 0.45); --prn-int-selected-bg: rgba(95, 212, 210, 0.13); --prn-int-selected-border: var(--prn-teal); --prn-int-strong: var(--prn-teal); --prn-int-strong-on: #0d1219; --prn-int-text: var(--prn-blue-2); --prn-risk-high: #fca5a5; --prn-risk-mod: #fcd34d; --prn-risk-low: #fde68a; --prn-risk-none: #6cc8ad; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.18); --shadow: 0 6px 16px rgba(0, 0, 0, 0.36), 0 2px 4px rgba(0, 0, 0, 0.18); --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.44); --shadow-xl: 0 32px 64px rgba(0, 0, 0, 0.52); --glow-teal: 0 0 0 4px rgba(95, 212, 210, 0.20); --grad-soft: linear-gradient(135deg, rgba(95,212,210,0.07) 0%, rgba(108,200,173,0.07) 100%); color-scheme: dark; } /* Auto dark mode si pas de préférence explicite (mêmes valeurs que [data-theme=dark]) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --prn-navy: #e2e8f0; --prn-blue: #6ee0de; --prn-blue-2: #95eceb; --prn-blue-light: rgba(110, 224, 222, 0.10); --prn-teal: #6ee0de; --prn-teal-strong: #6ee0de; --prn-teal-light: rgba(110, 224, 222, 0.14); --prn-accent: #7dd4ba; --prn-ink: #d4dae3; --prn-ink-soft: #aab3c0; --prn-muted: #939fb1; /* WCAG AA Sprint 6 M5 R2 — était #828c9c (4.23:1 sur #232a38) */ --prn-bg: #131822; --prn-bg-alt: #181e29; --prn-surface: #1d2330; --prn-surface-2: #232a38; --prn-line: #2a3242; --prn-line-soft: #232a38; --prn-warning: #fcd34d; --prn-warning-bg: rgba(252, 211, 77, 0.12); --prn-danger: #fca5a5; --prn-danger-bg: rgba(252, 165, 165, 0.10); --prn-danger-bg-soft: rgba(252, 165, 165, 0.06); --prn-success: #6cc8ad; --prn-success-bg: rgba(108, 200, 173, 0.12); --prn-int-hover-bg: rgba(95, 212, 210, 0.08); --prn-int-hover-border: rgba(95, 212, 210, 0.45); --prn-int-selected-bg: rgba(95, 212, 210, 0.13); --prn-int-selected-border: var(--prn-teal); --prn-int-strong: var(--prn-teal); --prn-int-strong-on: #0d1219; --prn-int-text: var(--prn-blue-2); --prn-risk-high: #fca5a5; --prn-risk-mod: #fcd34d; --prn-risk-low: #fde68a; --prn-risk-none: #6cc8ad; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.18); --shadow: 0 6px 16px rgba(0, 0, 0, 0.36), 0 2px 4px rgba(0, 0, 0, 0.18); --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.44); --glow-teal: 0 0 0 4px rgba(95, 212, 210, 0.20); color-scheme: dark; } } /* ── Aliases génériques (consommés par triage.css et suivi.css) ── Ces fichiers utilisent un vocabulaire générique (--border, --surface, --text, --brand…) jamais défini jusqu'ici : leurs fallbacks CLAIRS s'appliquaient donc aussi en mode sombre. On mappe ces noms sur les tokens prn-* (qui suivent le thème) ; --accent/--brand gardent le bleu d'origine en light et passent à un bleu clair lisible en dark. */ :root { --border: var(--prn-line); --surface: var(--prn-surface); --surface-2: var(--prn-surface-2); --text: var(--prn-ink); --muted: var(--prn-muted); --accent: #2563eb; --brand: var(--accent); /* Tokens prn-* consommés avec fallback mais jamais définis jusqu'ici (hta/hypothyroidie/menopause/dermato) : on les ancre sur le système. */ --prn-bg-elev: var(--prn-surface-2); --prn-text: var(--prn-ink); --prn-text-muted: var(--prn-muted); --prn-teal-dark: #0d8a78; } [data-theme="dark"] { --accent: #93c5fd; --prn-teal-dark: #95eceb; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent: #93c5fd; --prn-teal-dark: #95eceb; } } /* Transition globale douce sur les changements de thème (limité aux propriétés visuelles). .btn exclu : il a sa propre transition courte sans box-shadow pour éviter l'effet de glow qui s'étire au hover. */ html, body, .site-header, .voyage-shell, .feature-card, .prn-step, .prn-mc, .prn-checkbox, .prn-region-opt, .prn-vacc-card, .prn-pat-card, .prn-pat-section, .badge, .prn-pill, .prn-chk, input, select, textarea { transition: background-color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out); } /* Reset léger */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); color: var(--prn-ink); background: var(--prn-bg); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Inter : a à un étage (cv11) + l à empattement (cv05) → plus net, l≠1≠I */ font-feature-settings: "cv05" 1, "cv11" 1; } a { color: var(--prn-blue); text-decoration: none; transition: color var(--t-fast) var(--ease-out); } a:hover { color: var(--prn-accent); text-decoration: none; } img { max-width: 100%; display: block; } ::selection { background: var(--prn-teal-light); color: var(--prn-ink); } h1, h2, h3, h4 { font-family: var(--font-sans); color: var(--prn-navy); line-height: 1.18; margin-top: 0; letter-spacing: -0.02em; font-weight: 700; } h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); letter-spacing: -0.03em; } h2 { font-size: clamp(1.5rem, 3vw, 1.95rem); margin-bottom: 1rem; } h3 { font-size: 1.18rem; font-weight: 650; letter-spacing: -0.015em; } h4 { font-size: 1rem; font-weight: 600; } p { margin: 0 0 1rem; color: var(--prn-ink-soft); } /* Focus visible, style Apple : ring teal + offset */ :focus-visible { outline: 2px solid var(--prn-teal); outline-offset: 2px; border-radius: 4px; } .container { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; } /* ========================================================================== Header — verre dépoli style Apple ========================================================================== */ .site-header { background: color-mix(in srgb, var(--prn-surface) 85%, transparent); border-bottom: 1px solid var(--prn-line); position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); } @supports not (backdrop-filter: blur(20px)) { .site-header { background: var(--prn-surface); } } /* Compense le header sticky pour les scrollIntoView des wizards. Sans ça, le scroll laisse l'élément cible derrière le header. */ :root { --prn-header-h: 80px; } .voyage-shell, .page-header, .voyage-page > .container > * { scroll-margin-top: calc(var(--prn-header-h) + 16px); } html { scroll-padding-top: calc(var(--prn-header-h) + 16px); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: 0.85rem; padding-bottom: 0.85rem; } .brand { display: flex; align-items: center; gap: 0.75rem; color: var(--prn-navy); /* Empêche le brand de rétrécir (sinon le brand-tag s'écrase contre la nav). */ flex-shrink: 0; } .brand:hover { text-decoration: none; } .brand-mark { height: 36px; width: auto; display: inline-block; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-sm); flex-shrink: 0; } /* Conserve un fallback texte si jamais l'image manque (span avec texte) */ span.brand-mark { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--prn-blue) 0%, var(--prn-teal) 100%); color: #fff; border-radius: 10px; font-size: 1.4rem; font-weight: 700; } .brand-text { display: flex; flex-direction: column; line-height: 1.1; white-space: nowrap; } .brand-name { font-weight: 700; font-size: 1.18rem; letter-spacing: -0.02em; color: var(--prn-navy); } .brand-tag { font-size: 0.74rem; color: var(--prn-muted); letter-spacing: 0.01em; } /* Sous 1100 px : on cache la baseline marketing pour libérer de l'espace pour la nav + actions. */ @media (max-width: 1100px) { .brand-tag { display: none; } } .main-nav { display: flex; gap: 1.75rem; } .main-nav a { color: var(--prn-ink-soft); font-weight: 500; font-size: 0.95rem; padding: 0.35rem 0; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; } .main-nav a:hover { color: var(--prn-blue); text-decoration: none; } .main-nav a.active { color: var(--prn-navy); border-bottom-color: var(--prn-teal); } .header-actions { display: inline-flex; align-items: center; gap: 0.75rem; /* Empêche les actions (recherche, FR/EN, thème, avatar) d'être compressées. */ flex-shrink: 0; } .lang-switch { display: inline-flex; background: var(--prn-surface-2); border: 1px solid var(--prn-line); border-radius: 999px; padding: 3px; } .lang-switch button { border: 0; background: transparent; color: var(--prn-muted); font-weight: 600; font-size: 0.78rem; padding: 0.3rem 0.85rem; border-radius: 999px; cursor: pointer; font-family: inherit; transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } .lang-switch button:hover { color: var(--prn-ink); } .lang-switch button.active { background: var(--logo-teal); color: #ffffff; box-shadow: none; } /* Theme toggle (sun/moon) */ .theme-toggle { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--prn-line); background: var(--prn-surface-2); color: var(--prn-ink-soft); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-family: inherit; transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); padding: 0; position: relative; overflow: hidden; } .theme-toggle:hover { border-color: var(--prn-teal); color: var(--prn-teal); transform: scale(1.05); } .theme-toggle:active { transform: scale(0.96); } .theme-toggle svg { width: 16px; height: 16px; transition: transform var(--t-base) var(--ease-spring); } .theme-toggle .icon-sun { display: inline-block; } .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-moon { display: inline-block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; } :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: inline-block; } } /* ========================================================================== Boutons (Apple Health : épurés, professionnels, sans glow coloré) ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.7rem 1.4rem; border-radius: 999px; font-weight: 600; font-size: 0.94rem; letter-spacing: -0.01em; border: 1px solid transparent; cursor: pointer; transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out); font-family: inherit; user-select: none; -webkit-tap-highlight-color: transparent; white-space: nowrap; line-height: 1.2; /* Pas de transform au hover : evite le decalage et les ombres qui depassent */ } .btn:hover { text-decoration: none; } .btn:active { opacity: 0.85; } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; } /* Primary : couleur unie teal logo (pas de gradient, pas de glow), look pro */ .btn-primary { background: var(--logo-teal); color: #ffffff; box-shadow: none; } .btn-primary:hover { background: var(--logo-aqua); } /* Variante CTA fort (bandeau hero/cta-band) : gradient subtle reserve aux gros CTA */ .btn-primary.btn-lg { background: var(--grad-logo); } .btn-primary.btn-lg:hover { filter: brightness(1.06); } /* Ghost : fond transparent, texte teal, hover background discret */ .btn-ghost { background: transparent; color: var(--prn-blue); border-color: transparent; } .btn-ghost:hover { background: var(--prn-teal-light); } /* Outline : bordure nette, fond surface */ .btn-outline { background: var(--prn-surface); color: var(--prn-ink); border-color: var(--prn-line); } .btn-outline:hover { border-color: var(--prn-teal); color: var(--prn-teal); background: var(--prn-surface); /* pas de leak couleur */ } .btn-lg { padding: 0.85rem 1.85rem; font-size: 1rem; } .btn-sm { padding: 0.5rem 1rem; font-size: 0.85rem; } /* Focus visible : outline teal autour du bouton (pas de box-shadow color spill) */ .btn:focus-visible { outline: 2px solid var(--prn-teal); outline-offset: 3px; } /* ========================================================================== Hero (Apple Health : générous, lumineux, halo subtil aligné logo) ========================================================================== */ .hero { position: relative; background: radial-gradient(1200px 600px at 85% -15%, color-mix(in srgb, var(--logo-aqua) 14%, transparent), transparent 60%), radial-gradient(900px 500px at 5% 10%, color-mix(in srgb, var(--logo-teal) 12%, transparent), transparent 60%), radial-gradient(700px 300px at 50% 100%, color-mix(in srgb, var(--logo-emerald) 8%, transparent), transparent 70%), linear-gradient(180deg, var(--prn-surface) 0%, var(--prn-bg) 100%); padding: 6rem 0 5rem; border-bottom: 1px solid var(--prn-line-soft); overflow: hidden; } .hero-inner { max-width: 860px; position: relative; z-index: 1; } .eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; font-weight: 700; color: var(--prn-teal-strong); background: var(--prn-teal-light); padding: 0.4rem 0.95rem; border-radius: 999px; margin-bottom: 1.25rem; animation: fadeUp var(--t-slow) var(--ease-out) both; } .hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -0.035em; font-weight: 700; background: var(--grad-logo); -webkit-background-clip: text; background-clip: text; color: transparent; animation: fadeUp var(--t-slow) var(--ease-out) 60ms both; } /* En dark, --grad-logo démarre au navy #0f2d4e : quasi invisible sur #131822 (ratio ~1.2:1). Variante éclaircie des mêmes teintes pour le titre héro. */ [data-theme="dark"] .hero h1 { background: linear-gradient(135deg, #8fb8dd 0%, #6ee0de 45%, #95eceb 75%, #7dd4ba 100%); -webkit-background-clip: text; background-clip: text; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero h1 { background: linear-gradient(135deg, #8fb8dd 0%, #6ee0de 45%, #95eceb 75%, #7dd4ba 100%); -webkit-background-clip: text; background-clip: text; } } .hero .lead { font-size: clamp(1.05rem, 1.8vw, 1.22rem); color: var(--prn-ink-soft); max-width: 700px; margin-top: 1.1rem; line-height: 1.5; animation: fadeUp var(--t-slow) var(--ease-out) 120ms both; } .hero-ctas { display: flex; gap: 0.75rem; margin: 2.25rem 0 1.75rem; flex-wrap: wrap; animation: fadeUp var(--t-slow) var(--ease-out) 200ms both; } .hero-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; animation: fadeUp var(--t-slow) var(--ease-out) 280ms both; } .badge { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--prn-surface); border: 1px solid var(--prn-line); padding: 0.4rem 0.9rem; border-radius: 999px; font-size: 0.78rem; color: var(--prn-ink-soft); font-weight: 500; } .badge .dot { width: 7px; height: 7px; background: var(--prn-teal); border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, var(--prn-teal) 20%, transparent); } @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================================== Features (Apple Health : cartes généreuses, hover discret) ========================================================================== */ .features { padding: 5rem 0; } .features h2 { text-align: center; margin-bottom: 2.75rem; font-size: clamp(1.6rem, 3vw, 2.2rem); } .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; } .feature-card { background: var(--prn-surface); border: 1px solid var(--prn-line-soft); border-radius: var(--radius-lg); padding: 1.85rem 1.6rem; transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out); position: relative; overflow: hidden; } .feature-card::before { content: ""; position: absolute; inset: 0; background: var(--grad-soft); opacity: 0; transition: opacity var(--t-base) var(--ease-out); pointer-events: none; border-radius: inherit; } .feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--prn-teal) 25%, transparent); } .feature-card:hover::before { opacity: 1; } .feature-card > * { position: relative; z-index: 1; } .feature-icon { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--grad-soft); color: var(--prn-teal); margin-bottom: 1.1rem; transition: transform var(--t-base) var(--ease-spring); } /* Icône feature card : pas de rotation/scale au hover — uniquement un fond plus dense */ .feature-card:hover .feature-icon { background: color-mix(in srgb, var(--prn-teal) 18%, transparent); } .feature-icon svg { width: 24px; height: 24px; stroke-linecap: round; stroke-linejoin: round; } .feature-card h3 { margin: 0 0 0.45rem; color: var(--prn-navy); } .feature-card p { color: var(--prn-ink-soft); font-size: 0.93rem; margin: 0; } /* ========================================================================== CTA band — bandeau gradient logo ========================================================================== */ .cta-band { background: var(--grad-logo); color: #fff; padding: 3.5rem 0; position: relative; overflow: hidden; } .cta-band::after { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 300px at 80% 50%, rgba(255,255,255,0.12), transparent 60%); pointer-events: none; } .cta-band h2 { color: #fff; margin-bottom: 0.4rem; } .cta-band p { color: rgba(255,255,255,0.88); margin: 0; } .cta-band .container { position: relative; z-index: 1; } .cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .cta-band .btn-primary { background: #ffffff; color: var(--logo-navy); box-shadow: none; } .cta-band .btn-primary:hover { background: rgba(255,255,255,0.94); } .cta-band .btn-primary.btn-lg { background: #ffffff; } .cta-band .btn-primary.btn-lg:hover { background: rgba(255,255,255,0.94); filter: none; } /* ========================================================================== Footer ========================================================================== */ .site-footer { background: var(--prn-surface); border-top: 1px solid var(--prn-line); padding: 2rem 0 2.5rem; margin-top: 3rem; } .footer-inner { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; } .footer-inner p { color: var(--prn-muted); font-size: 0.85rem; max-width: 560px; margin: 0.5rem 0 0; } .footer-links { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; font-size: 0.9rem; } .footer-links .muted { color: var(--prn-muted); font-size: 0.8rem; margin-top: 0.75rem; } /* ========================================================================== Page générique ========================================================================== */ .page { padding: 3rem 0 4rem; } .page-header { max-width: 820px; margin-bottom: 2.5rem; } .page-header .eyebrow { margin-bottom: 0.75rem; } .page-header p.lead { color: var(--prn-ink-soft); font-size: 1.1rem; margin-top: 0.5rem; } .search { flex: 1 1 260px; position: relative; } .search input { width: 100%; padding: 0.8rem 1rem 0.8rem 2.6rem; border-radius: var(--radius); border: 1px solid var(--prn-line); font-size: 0.95rem; font-family: inherit; background: var(--prn-surface); transition: border-color .15s, box-shadow .15s; } .search input:focus { outline: none; border-color: var(--prn-blue-2); box-shadow: 0 0 0 3px rgba(46,125,193,0.15); } .search svg { position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--prn-muted); } .filters { display: flex; gap: 0.4rem; flex-wrap: wrap; } .chip { border: 1px solid var(--prn-line); background: var(--prn-surface); padding: 0.45rem 0.9rem; border-radius: 999px; font-size: 0.85rem; cursor: pointer; color: var(--prn-ink-soft); font-family: inherit; transition: background .15s, border-color .15s, color .15s; } .chip:hover { border-color: var(--prn-blue-2); } .chip.active { background: var(--prn-blue); border-color: var(--prn-blue); color: #fff; } .algo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.25rem; } .algo-card { background: var(--prn-surface); border: 1px solid var(--prn-line); border-radius: var(--radius-lg); padding: 1.5rem; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s, border-color .2s; position: relative; } .algo-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; text-decoration: none; } .algo-card .tag { display: inline-block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--prn-teal-strong); /* WCAG AA Sprint 6 M5 R1 — était var(--prn-teal) (3.02:1) */ margin-bottom: 0.5rem; } .algo-card h3 { color: var(--prn-navy); margin-bottom: 0.45rem; } .algo-card p { color: var(--prn-ink-soft); font-size: 0.92rem; flex-grow: 1; margin: 0 0 1rem; } .algo-card .footer-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; color: var(--prn-muted); } .status { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; font-size: 0.75rem; padding: 0.25rem 0.6rem; border-radius: 999px; } .status.ready { background: var(--prn-success-bg); color: var(--prn-success); } .status.wip { background: var(--prn-warning-bg); color: var(--prn-warning); } /* Catalogue regroupé par thème (Sprint 40) */ .algo-catalogue { display: flex; flex-direction: column; gap: 2.5rem; } .algo-theme-title { color: var(--prn-navy); font-size: 1.15rem; margin: 0 0 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--prn-line); } @media (max-width: 900px) { .algo-layout { grid-template-columns: 1fr; } } .stepper { background: var(--prn-surface); border: 1px solid var(--prn-line); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-sm); min-height: 420px; position: relative; } .step { display: none; animation: fadeIn .25s ease; } .step.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .step .step-label { display: inline-block; background: var(--prn-blue-light); color: var(--prn-blue); font-size: 0.75rem; font-weight: 600; padding: 0.3rem 0.75rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.9rem; } .step h3 { font-family: var(--font-serif); font-size: 1.55rem; color: var(--prn-navy); margin-bottom: 0.35rem; font-weight: 600; } .step .step-sub { color: var(--prn-muted); font-size: 0.95rem; margin-bottom: 1.5rem; } .choices { display: flex; flex-direction: column; gap: 0.6rem; } .choice { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; border: 1px solid var(--prn-line); border-radius: var(--radius); background: var(--prn-surface); cursor: pointer; font-family: inherit; font-size: 0.96rem; color: var(--prn-ink); transition: border-color .15s, background .15s, transform .1s; text-align: left; font-weight: 500; } .choice:hover { border-color: var(--prn-blue-2); background: var(--prn-blue-light); transform: translateX(2px); } .choice .arrow { color: var(--prn-blue); font-size: 1.2rem; } /* Version compacte pour l'étape 3 (contre-indications par médicament) */ .checkbox-group.compact label { padding: 0.55rem 0.8rem; } .checkbox-group.compact .cb-text { font-size: 0.88rem; } .result-card.info { background: var(--prn-blue-light); border-color: var(--prn-blue); } .result-card.warn { background: var(--prn-warning-bg); border-color: var(--prn-warning); } .result-card.danger { background: var(--prn-danger-bg); border-color: var(--prn-danger); } .source-note { font-size: 0.8rem; color: var(--prn-muted); margin-top: 0.6rem; font-style: italic; } /* Progress bar */ .progress { height: 4px; background: var(--prn-line); border-radius: 999px; overflow: hidden; margin-bottom: 1.75rem; } .progress-bar { height: 100%; background: linear-gradient(90deg, var(--prn-blue) 0%, var(--prn-teal) 100%); width: 20%; transition: width .35s ease; } /* ========================================================================== Références ========================================================================== */ .ref-section { margin-bottom: 2.5rem; } .ref-section h2 { display: flex; align-items: center; gap: 0.75rem; padding-bottom: 0.6rem; border-bottom: 2px solid var(--prn-line); margin-bottom: 1rem; } .ref-section h2 .pill { font-family: var(--font-sans); font-size: 0.7rem; background: var(--prn-blue); color: #fff; padding: 0.25rem 0.7rem; border-radius: 999px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } /* En dark, --prn-blue = #6ee0de (clair) : compteur sombre dessus */ [data-theme="dark"] .ref-section h2 .pill { color: #0d1219; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ref-section h2 .pill { color: #0d1219; } } .ref-list { list-style: none; padding: 0; margin: 0; } .ref-list li { padding: 1rem 0; border-bottom: 1px solid var(--prn-line); display: flex; gap: 1rem; } .ref-list li:last-child { border-bottom: 0; } .ref-list .ref-title { font-weight: 600; color: var(--prn-navy); margin: 0 0 0.15rem; } .ref-list .ref-meta { font-size: 0.85rem; color: var(--prn-muted); margin: 0; } /* WCAG : les liens dans .ref-meta doivent être distinguables du texte sans se reposer uniquement sur la couleur (link-in-text-block, Sprint 6 M5 R1). Sélecteur générique — couvre aussi les .ref-meta hors .ref-list. */ .ref-meta a { text-decoration: underline; } .ref-list .ref-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px; background: var(--prn-blue-light); color: var(--prn-blue); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; } /* ========================================================================== Anti-flash pendant la vérification d'authentification ========================================================================== */ html.prn-auth-checking body { visibility: hidden; } /* ========================================================================== Page de connexion ========================================================================== */ .login-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(900px 500px at 15% 0%, color-mix(in srgb, var(--logo-aqua) 15%, transparent), transparent 60%), radial-gradient(1100px 600px at 85% 100%, color-mix(in srgb, var(--logo-teal) 16%, transparent), transparent 60%), linear-gradient(180deg, var(--prn-surface) 0%, var(--prn-bg) 100%); padding: 2rem 1rem; } .login-wrap { width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; } .login-card { background: var(--prn-surface); border: 1px solid var(--prn-line); border-radius: var(--radius-lg); padding: 2.25rem 2rem 1.75rem; box-shadow: var(--shadow-lg); width: 100%; } .login-brand { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.75rem; } .login-brand .brand-mark { height: 44px; width: auto; display: inline-block; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-sm); flex-shrink: 0; } .login-brand span.brand-mark { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--prn-blue) 0%, var(--prn-teal) 100%); color: #fff; border-radius: 12px; font-size: 1.6rem; font-weight: 700; } .login-brand .brand-name { font-family: var(--font-serif); font-weight: 600; font-size: 1.35rem; color: var(--prn-navy); line-height: 1.1; } .login-brand .brand-tag { font-size: 0.78rem; color: var(--prn-muted); letter-spacing: 0.02em; } .login-card h1 { font-size: 1.65rem; margin: 0 0 0.35rem; } .login-sub { color: var(--prn-ink-soft); font-size: 0.92rem; margin: 0 0 1.5rem; } .field { display: block; margin-bottom: 1rem; } .field > span { display: block; font-size: 0.82rem; font-weight: 600; color: var(--prn-ink-soft); margin-bottom: 0.35rem; text-transform: uppercase; letter-spacing: 0.04em; } .field input { width: 100%; padding: 0.8rem 1rem; border-radius: var(--radius); border: 1px solid var(--prn-line); background: var(--prn-surface); font-size: 1rem; font-family: inherit; color: var(--prn-ink); transition: border-color .15s, box-shadow .15s; } .field input:focus { outline: none; border-color: var(--prn-blue-2); box-shadow: 0 0 0 3px rgba(46,125,193,0.15); } .btn-block { width: 100%; justify-content: center; } .btn.loading { opacity: 0.7; cursor: progress; } .login-error { background: var(--prn-danger-bg); color: var(--prn-danger); border: 1px solid color-mix(in srgb, var(--prn-danger) 35%, transparent); padding: 0.7rem 0.9rem; border-radius: var(--radius); font-size: 0.88rem; margin-bottom: 1rem; } .login-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--prn-line); } .mode-indicator { font-size: 0.75rem; font-weight: 600; padding: 0.3rem 0.7rem; border-radius: 999px; } .mode-indicator.prod { background: var(--prn-success-bg); color: var(--prn-success); } .mode-indicator.demo { background: var(--prn-warning-bg); color: #92400e; } .login-disclaimer { font-size: 0.78rem; color: var(--prn-muted); text-align: center; max-width: 380px; margin: 0; } .login-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.5rem 0 1.25rem; color: var(--prn-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; } .login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--prn-line); } .login-contact { background: var(--prn-bg); border: 1px solid var(--prn-line); border-radius: var(--radius); padding: 1.1rem 1.1rem 1rem; text-align: center; } .login-contact-title { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 600; color: var(--prn-navy); margin: 0 0 0.4rem; } .login-contact-text { font-size: 0.85rem; color: var(--prn-ink-soft); margin: 0 0 0.85rem; line-height: 1.45; } .login-contact-mail { font-size: 0.78rem; color: var(--prn-muted); margin: 0.65rem 0 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; word-break: break-all; } /* ========================================================================== Menu utilisateur (header après connexion) ========================================================================== */ .user-menu { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; margin-left: 0.5rem; } .user-menu .avatar { width: 32px; height: 32px; border-radius: 50%; /* Dégradé de marque garanti contrasté en clair comme en sombre : constantes logo (non thématisées) → blanc ≥ 4.5:1 dans les deux thèmes */ background: linear-gradient(135deg, var(--logo-navy) 0%, var(--logo-teal) 100%); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; cursor: pointer; border: 1px solid var(--prn-blue); transition: filter .15s, border-color .15s; } .user-menu .avatar:hover { filter: brightness(1.05); border-color: var(--prn-navy); } .user-menu .user-email { font-size: 0.82rem; color: var(--prn-muted); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-menu .dropdown { position: absolute; top: calc(100% + 8px); right: 0; background: var(--prn-surface); border: 1px solid var(--prn-line); border-radius: var(--radius); box-shadow: var(--shadow-lg); min-width: 200px; padding: 0.4rem; display: none; z-index: 60; } .user-menu.open .dropdown { display: block; } .user-menu .dropdown a, .user-menu .dropdown button { display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: 0.6rem 0.8rem; border-radius: 6px; color: var(--prn-ink); font-size: 0.9rem; font-family: inherit; cursor: pointer; } .user-menu .dropdown a:hover, .user-menu .dropdown button:hover { background: var(--prn-blue-light); text-decoration: none; } .user-menu .dropdown .email-label { padding: 0.5rem 0.8rem; font-size: 0.75rem; color: var(--prn-muted); border-bottom: 1px solid var(--prn-line); margin-bottom: 0.3rem; overflow: hidden; text-overflow: ellipsis; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 820px) { h1 { font-size: 2rem; } .main-nav { display: none; } .header-inner { gap: 0.75rem; } .hero { padding: 3rem 0 2.5rem; } .footer-inner { grid-template-columns: 1fr; } .footer-links { align-items: flex-start; } .cta-inner { flex-direction: column; align-items: flex-start; } } /* ============================================================================ Safety net DARK MODE — formulaires natifs ---------------------------------------------------------------------------- Certains inputs/selects/textareas dans les consultations n'héritent pas de couleurs explicites (notamment dans les modaux ou les blocs imbriqués sans classe .p-field). Le défaut de l'agent utilisateur reste blanc/noir, ce qui crée des « zones blanches » illisibles en mode sombre. On force donc surface + ink + line en mode sombre pour TOUT input/select/textarea ne précisant pas son fond. Les classes spécifiques (qui mettent leur propre fond via une variable) ne sont pas affectées car leurs règles ont une spécificité plus élevée. ============================================================================ */ [data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), :root:not([data-theme="light"]) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), [data-theme="dark"] select, :root:not([data-theme="light"]) select, [data-theme="dark"] textarea, :root:not([data-theme="light"]) textarea { background-color: var(--prn-surface); color: var(--prn-ink); border-color: var(--prn-line); /* Force le rendu sombre pour les date pickers/spinners natifs */ color-scheme: dark; } [data-theme="dark"] input::placeholder, :root:not([data-theme="light"]) input::placeholder, [data-theme="dark"] textarea::placeholder, :root:not([data-theme="light"]) textarea::placeholder { color: var(--prn-muted); opacity: 1; } /* Options de