/* ========================================================================= base.css — jetons de design, reset, primitives "liquid glass" Theme : trois etats. Sans attribut sur , on suit le systeme ; data-theme="light" ou "dark" force le choix de l'utilisateur. Toutes les couleurs vivent ici, en jetons — les autres feuilles n'ont aucune regle @media (prefers-color-scheme). ========================================================================= */ :root { /* --- marque ------------------------------------------------------- */ --green-50: #eef7f0; --green-100: #dcefe0; --green-200: #b9dcc2; --green-300: #8bc79a; --green-400: #58ad70; --green-500: #328f52; --green-600: #257141; --green-700: #1b5732; --green-800: #143f24; --green-900: #0d2a19; --lime: #7fc45f; --sun: #c98a1e; --sky: #3782c4; --berry:#c43f74; --rust: #c74d2a; /* --- fond & texte (clair) ------------------------------------------ */ --bg: #f4f5f5; --bg-deep: #e7eaea; --ink: #16201b; --ink-soft: #48544d; --ink-mute: #77837c; --ink-invert:#ffffff; /* Couleur d'accent pour les pictogrammes et les etats actifs. C'est elle qui bascule en theme sombre, pas chaque composant. */ --accent: var(--green-600); --accent-soft: color-mix(in srgb, var(--green-500) 16%, transparent); /* --- verre --------------------------------------------------------- */ --glass-bg: rgba(255, 255, 255, 0.62); --glass-bg-hi: rgba(255, 255, 255, 0.8); --glass-bg-lo: rgba(255, 255, 255, 0.38); --glass-stroke: rgba(255, 255, 255, 0.72); --glass-stroke-2:rgba(22, 32, 27, 0.08); --glass-blur: 22px; --glass-sat: 165%; --glass-shadow: 0 10px 30px -14px rgba(20, 32, 26, 0.3), 0 2px 6px -3px rgba(20, 32, 26, 0.14); --glass-inner: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(255, 255, 255, 0.22); --specular: 0.85; /* Fond : quasi neutre, juste assez teinte pour que le verre ait quelque chose a refracter. */ --blob-1: rgba(88, 173, 112, 0.16); --blob-2: rgba(127, 196, 95, 0.12); --blob-3: rgba(90, 160, 165, 0.10); --grain: 0.03; /* --- etats --------------------------------------------------------- */ --ok: #257141; --ok-bg: rgba(50, 143, 82, 0.13); --warn: #a06a15; --warn-bg: rgba(201, 138, 30, 0.15); --danger: #b53c22; --danger-bg: rgba(199, 77, 42, 0.13); --info: #2a6699; --info-bg: rgba(55, 130, 196, 0.13); /* --- geometrie ------------------------------------------------------ */ --r-xs: 10px; --r-sm: 14px; --r-md: 20px; --r-lg: 26px; --r-xl: 34px; --r-pill: 999px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --topbar-h: 58px; --tabbar-h: 62px; --gutter: 16px; --maxw: 620px; /* --- encoches ------------------------------------------------------- */ --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); /* --- mouvement ------------------------------------------------------ */ --ease-spring: cubic-bezier(0.32, 0.72, 0, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --t-fast: 140ms; --t-med: 260ms; --t-slow: 420ms; --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-num: ui-rounded, -apple-system, "SF Pro Rounded", "Segoe UI Variable Display", var(--font); color-scheme: light; } /* --- jetons du theme sombre, definis une seule fois ------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #121614; --bg-deep: #0a0d0c; --ink: #e9eeeb; --ink-soft: #b0bcb5; --ink-mute: #7d8a83; --ink-invert:#0a0d0c; --accent: var(--green-300); --accent-soft: color-mix(in srgb, var(--green-400) 20%, transparent); --glass-bg: rgba(38, 46, 42, 0.58); --glass-bg-hi: rgba(50, 60, 55, 0.76); --glass-bg-lo: rgba(26, 32, 29, 0.46); --glass-stroke: rgba(255, 255, 255, 0.12); --glass-stroke-2:rgba(0, 0, 0, 0.4); --glass-shadow: 0 14px 36px -16px rgba(0, 0, 0, 0.8), 0 2px 8px -3px rgba(0, 0, 0, 0.55); --glass-inner: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.22); --specular: 0.32; --blob-1: rgba(88, 173, 112, 0.14); --blob-2: rgba(127, 196, 95, 0.08); --blob-3: rgba(90, 160, 165, 0.09); --grain: 0.05; --ok: #6cc487; --ok-bg: rgba(88, 173, 112, 0.18); --warn: #dfb15f; --warn-bg: rgba(201, 138, 30, 0.2); --danger: #ef8b71; --danger-bg: rgba(199, 77, 42, 0.22); --info: #79b6e6; --info-bg: rgba(55, 130, 196, 0.2); color-scheme: dark; } } :root[data-theme="dark"] { --bg: #121614; --bg-deep: #0a0d0c; --ink: #e9eeeb; --ink-soft: #b0bcb5; --ink-mute: #7d8a83; --ink-invert:#0a0d0c; --accent: var(--green-300); --accent-soft: color-mix(in srgb, var(--green-400) 20%, transparent); --glass-bg: rgba(38, 46, 42, 0.58); --glass-bg-hi: rgba(50, 60, 55, 0.76); --glass-bg-lo: rgba(26, 32, 29, 0.46); --glass-stroke: rgba(255, 255, 255, 0.12); --glass-stroke-2:rgba(0, 0, 0, 0.4); --glass-shadow: 0 14px 36px -16px rgba(0, 0, 0, 0.8), 0 2px 8px -3px rgba(0, 0, 0, 0.55); --glass-inner: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.22); --specular: 0.32; --blob-1: rgba(88, 173, 112, 0.14); --blob-2: rgba(127, 196, 95, 0.08); --blob-3: rgba(90, 160, 165, 0.09); --grain: 0.05; --ok: #6cc487; --ok-bg: rgba(88, 173, 112, 0.18); --warn: #dfb15f; --warn-bg: rgba(201, 138, 30, 0.2); --danger: #ef8b71; --danger-bg: rgba(199, 77, 42, 0.22); --info: #79b6e6; --info-bg: rgba(55, 130, 196, 0.2); color-scheme: dark; } /* ========================================================================= Reset ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* pas de reflow au changement d'orientation */ text-size-adjust: 100%; height: 100%; } body { margin: 0; min-height: 100%; font-family: var(--font); font-size: 16px; line-height: 1.45; color: var(--ink); background: var(--bg); overflow-x: hidden; overscroll-behavior-y: none; /* pas de rebond de page facon navigateur */ -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; touch-action: manipulation; /* coupe le double-tap-zoom */ } /* Logique application : rien n'est selectionnable sauf le contenu utile. */ body { -webkit-user-select: none; user-select: none; } input, textarea, select, [data-selectable] { -webkit-user-select: text; user-select: text; } h1, h2, h3, h4, p, figure { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } [hidden] { display: none !important; } /* Taille par defaut des pictogrammes. Sans cela, un sans width/height s'etale a 300x150 des qu'aucune regle de composant ne le contraint — d'ou les chevrons geants. */ svg { display: block; width: 20px; height: 20px; flex: none; } .chev { width: 18px; height: 18px; color: var(--ink-mute); } :focus-visible { outline: 2px solid var(--green-400); outline-offset: 2px; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================= Fond — neutre, juste anime ce qu'il faut pour donner de la matiere au verre ========================================================================= */ .backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%); } .blob { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; } .blob-a { width: 62vw; height: 62vw; max-width: 460px; max-height: 460px; top: -14vh; left: -18vw; background: radial-gradient(circle, var(--blob-1), transparent 70%); animation: drift-a 30s var(--ease-spring) infinite alternate; } .blob-b { width: 74vw; height: 74vw; max-width: 520px; max-height: 520px; top: 36vh; right: -26vw; background: radial-gradient(circle, var(--blob-2), transparent 70%); animation: drift-b 36s var(--ease-spring) infinite alternate; } .blob-c { width: 56vw; height: 56vw; max-width: 400px; max-height: 400px; bottom: -16vh; left: 6vw; background: radial-gradient(circle, var(--blob-3), transparent 72%); animation: drift-c 42s var(--ease-spring) infinite alternate; } @keyframes drift-a { to { transform: translate3d(12vw, 8vh, 0) scale(1.14); } } @keyframes drift-b { to { transform: translate3d(-14vw, -10vh, 0) scale(1.08); } } @keyframes drift-c { to { transform: translate3d(10vw, -6vh, 0) scale(1.18); } } /* Grain tres leger : evite l'aspect "degrade plastique". */ .grain { position: absolute; inset: -50%; opacity: var(--grain); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); pointer-events: none; } /* ========================================================================= Primitives verre ========================================================================= */ .glass { position: relative; background: var(--glass-bg); border: 1px solid var(--glass-stroke); border-radius: var(--r-lg); box-shadow: var(--glass-shadow), var(--glass-inner); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); isolation: isolate; } /* Reflet specular : la fine lueur qui court sur le haut du verre iOS. */ .glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient( 150deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.06) 22%, transparent 46%, rgba(255, 255, 255, 0.08) 82%, rgba(255, 255, 255, 0.28) 100% ); mix-blend-mode: overlay; opacity: var(--specular); } .glass-thin { --glass-blur: 14px; background: var(--glass-bg-lo); } .glass-thick { --glass-blur: 34px; background: var(--glass-bg-hi); } /* Repli si backdrop-filter absent (vieux Android WebView) : on opacifie. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: color-mix(in srgb, var(--bg) 86%, var(--ink) 3%); } } /* ========================================================================= Typographie utilitaire ========================================================================= */ .t-title { font-size: 27px; line-height: 1.14; font-weight: 700; letter-spacing: -0.02em; } .t-section { font-size: 19px; line-height: 1.2; font-weight: 650; letter-spacing: -0.01em; } .t-body { font-size: 15px; line-height: 1.45; } .t-small { font-size: 13px; line-height: 1.35; color: var(--ink-soft); } .t-micro { font-size: 11.5px; line-height: 1.25; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; } .t-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 700; } .t-mute { color: var(--ink-mute); } .stack { display: flex; flex-direction: column; } .row { display: flex; align-items: center; } .row-btw { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); } .wrap { flex-wrap: wrap; } .grow { flex: 1 1 auto; min-width: 0; } .gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); } .gap-5 { gap: var(--sp-5); } .gap-6 { gap: var(--sp-6); } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }