/* ═══════════════════════════════════════════════════ GuitarMaster — base.css Système de design complet et personnalisable. SOMMAIRE ──────── 1. Custom Properties — thème clair + sombre + thèmes alternatifs 2. Reset & Box Model 3. Typography — échelle, poids, espacement 4. Couleurs sémantiques (status, feedback, brand) 5. Layout shell — flex column, sidebar, main, panels 6. Topbar — navigation bureau 7. Mobile header — navigation mobile 8. Sidebar — nav latérale bureau 9. Bottom nav — navigation mobile basse 10. Panels — conteneurs de sections 11. Animations — transitions, keyframes 12. Scrollbars — custom scrollbar 13. Utilities — helpers CSS rapides 14. Print — styles d'impression PERSONNALISATION RAPIDE ──────────────────────── • Changer l'accent couleur → modifier --accent dans :root • Passer en thème clair → retirer [data-theme="dark"] du HTML • Thème alternatif "Ocean"→ ajouter data-theme="ocean" sur • Thème "Desert" → ajouter data-theme="desert" sur • Ajuster l'espacement → modifier --space-* tokens • Changer la typo → modifier --font-* tokens ═══════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════ 1. CUSTOM PROPERTIES ══════════════════════════════════════════════════ */ /* ── Thème par défaut : Dark Purple (GuitarMaster) ── */ :root { /* ── Palette de base ── */ --bg: #0d0d14; /* fond principal */ --bg2: #13131f; /* fond sidebar, cards dark */ --bg3: #1c1c2e; /* fond éléments interactifs */ --bg4: #252540; /* fond hover, input */ --bg5: #2e2e52; /* fond sélection */ /* ── Couleur d'accent (marque) ── */ --accent: #7c5af8; /* primary action */ --a2: #a07cf8; /* accent clair */ --a3: #c8b0ff; /* accent très clair */ --a4: #e8dcff; /* accent pâle */ --accent-rgb: 124, 90, 248; /* pour rgba() */ /* ── Couleurs sémantiques ── */ --green: #00d68f; --green-dk: #00a870; --green-bg: #0a2a18; --red: #ff4d6d; --red-dk: #cc2244; --red-bg: #2a0a10; --gold: #f5a623; --gold-dk: #c07800; --gold-bg: #2a1a00; --blue: #4da6ff; --blue-dk: #1a7acc; --blue-bg: #0a1a2e; --teal: #00c8ab; --teal-dk: #009980; --teal-bg: #001a16; /* ── Texte ── */ --text: #f2f0ff; /* texte principal */ --t2: #9898c0; /* texte secondaire */ --t3: #55558a; /* texte tertiaire / placeholders */ --t4: #33335a; /* texte très atténué */ /* ── Bordures ── */ --border: #2a2a4a; --border2: #3a3a5a; /* hover / focus */ --border3: #4a4a6a; /* actif */ /* ── Composants ── */ --card: #17172a; --card-hover: #1e1e38; --modal-bg: rgba(0, 0, 0, .75); /* ── Typographie ── */ --font-sans: 'Segoe UI', system-ui, -apple-system, sans-serif; --font-mono: 'Courier New', 'Cascadia Code', monospace; --font-display:'Segoe UI', system-ui, sans-serif; /* pour les titres */ /* ── Échelle typographique (Minor Third — 1.2) ── */ --text-xs: 10px; --text-sm: 11px; --text-base: 13px; --text-md: 15px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 36px; --text-hero: clamp(22px, 4.5vw, 46px); /* ── Poids ── */ --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 900; /* ── Espacement (8-point grid) ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* ── Rayons ── */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-2xl: 24px; --r-full: 9999px; /* ── Ombres ── */ --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow-md: 0 4px 12px rgba(0,0,0,.5); --shadow-lg: 0 8px 28px rgba(0,0,0,.6); --shadow-glow: 0 6px 28px rgba(var(--accent-rgb), .4); --shadow-card: 0 2px 8px rgba(0,0,0,.35); /* ── Transitions ── */ --dur-fast: 100ms; --dur-base: 180ms; --dur-slow: 320ms; --ease: cubic-bezier(.25,.46,.45,.94); --ease-spring: cubic-bezier(.34,1.56,.64,1); /* ── Layout ── */ --sidebar-w: 200px; --topbar-h: 52px; --mob-hdr-h: 50px; --botnav-h: 62px; --content-max: 900px; /* ── Z-index ── */ --z-base: 1; --z-sticky: 10; --z-nav: 50; --z-overlay: 100; --z-modal: 200; --z-toast: 9000; --z-auth: 9500; --z-top: 9999; } /* ── Thème clair (Light) ── */ [data-theme="light"] { --bg: #f8f7ff; --bg2: #f0eeff; --bg3: #e8e5ff; --bg4: #ddd9ff; --bg5: #cec9f5; --text: #1a1530; --t2: #4a4270; --t3: #8a82b0; --t4: #b0a8d0; --border: #d5d0f0; --border2: #b8b0e0; --border3: #9a90d0; --card: #ffffff; --card-hover: #f5f3ff; --shadow-sm: 0 1px 3px rgba(100,80,220,.12); --shadow-md: 0 4px 12px rgba(100,80,220,.18); --shadow-lg: 0 8px 28px rgba(100,80,220,.22); } /* ── Thème Ocean (bleu-teal) ── */ [data-theme="ocean"] { --bg: #070d14; --bg2: #0d1520; --bg3: #131f2e; --bg4: #1a2840; --bg5: #203050; --accent: #0ea5e9; --a2: #38bdf8; --a3: #7dd3fc; --a4: #bae6fd; --accent-rgb: 14, 165, 233; --teal: #14b8a6; --green: #10b981; --green-dk: #059669; --border: #1e3a5a; --border2: #2a4a6e; --card: #0f1f32; --card-hover: #152840; } /* ── Thème Desert (ambré-chaud) ── */ [data-theme="desert"] { --bg: #12100a; --bg2: #1c180f; --bg3: #28221a; --bg4: #362d22; --bg5: #453a2c; --accent: #d97706; --a2: #f59e0b; --a3: #fbbf24; --a4: #fde68a; --accent-rgb: 217, 119, 6; --teal: #d97706; --green: #84cc16; --green-dk: #65a30d; --blue: #38bdf8; --border: #3d3020; --border2: #54422c; --card: #1a1510; --card-hover: #241d14; --text: #fef3c7; --t2: #c9a96e; --t3: #8a7040; } /* ── Thème Forest (vert sombre) ── */ [data-theme="forest"] { --bg: #080f0a; --bg2: #0e180f; --bg3: #162018; --bg4: #1e2c20; --bg5: #28382a; --accent: #16a34a; --a2: #22c55e; --a3: #4ade80; --a4: #86efac; --accent-rgb: 22, 163, 74; --teal: #14b8a6; --gold: #ca8a04; --border: #1e3020; --border2: #2a4030; --card: #0f1a11; --card-hover: #152018; --text: #f0fdf4; --t2: #86c897; --t3: #4a8050; } /* ══════════════════════════════════════════════════ 2. RESET & BOX MODEL ══════════════════════════════════════════════════ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html { height: 100%; font-size: 16px; text-size-adjust: 100%; scroll-behavior: smooth; } body { height: 100%; overflow: hidden; /* l'overflow est géré par .main */ background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--fw-normal); line-height: 1.6; display: flex; flex-direction: column; min-height: 100dvh; /* dynamic viewport height */ } /* Sélection texte */ ::selection { background: rgba(var(--accent-rgb), .35); color: var(--text); } /* ══════════════════════════════════════════════════ 3. TYPOGRAPHIE ══════════════════════════════════════════════════ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--fw-bold); line-height: 1.2; color: var(--text); letter-spacing: -.3px; } h1 { font-size: var(--text-2xl); } h2 { font-size: var(--text-xl); } h3 { font-size: var(--text-lg); } h4 { font-size: var(--text-md); } p { line-height: 1.7; color: var(--t2); } strong { font-weight: var(--fw-bold); color: var(--text); } em { font-style: italic; } code, kbd, pre { font-family: var(--font-mono); font-size: var(--text-sm); background: var(--bg4); color: var(--a2); } code { padding: 2px 5px; border-radius: var(--r-sm); } a { color: var(--a2); text-decoration: none; transition: color var(--dur-base) var(--ease); } a:hover { color: var(--a3); } /* ── Classes texte utilitaires ── */ .text-xs { font-size: var(--text-xs); } .text-sm { font-size: var(--text-sm); } .text-base { font-size: var(--text-base); } .text-md { font-size: var(--text-md); } .text-lg { font-size: var(--text-lg); } .text-xl { font-size: var(--text-xl); } .text-muted { color: var(--t2); } .text-faint { color: var(--t3); } .text-accent { color: var(--a2); } .text-green { color: var(--green); } .text-red { color: var(--red); } .text-gold { color: var(--gold); } .fw-normal { font-weight: var(--fw-normal); } .fw-bold { font-weight: var(--fw-bold); } .fw-black { font-weight: var(--fw-black); } .mono { font-family: var(--font-mono); } .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-width:0; } /* ── Gradients de texte réutilisables ── */ .grad-brand { background: linear-gradient(90deg, var(--a2), var(--teal)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .grad-fire { background: linear-gradient(90deg, var(--gold), var(--red)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .grad-green { background: linear-gradient(90deg, var(--green), var(--teal)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ══════════════════════════════════════════════════ 4. COULEURS SÉMANTIQUES ══════════════════════════════════════════════════ */ /* ── Info boxes ── */ .info-box { background: rgba(var(--accent-rgb), .07); border: 1px solid rgba(var(--accent-rgb), .2); border-left: 3px solid var(--a2); border-radius:0 var(--r-md) var(--r-md) 0; padding: var(--space-3) var(--space-4); font-size: var(--text-sm); color: var(--t2); line-height: 1.65; } .info-box.tip { border-left-color: var(--gold); background: rgba(245, 166, 35, .06); } .info-box.ok { border-left-color: var(--green); background: rgba(0, 214, 143, .06); } .info-box.err { border-left-color: var(--red); background: rgba(255, 77, 109, .06); } .info-box.info { border-left-color: var(--blue); background: rgba(77, 166, 255, .06); } /* ── Tags / Badges ── */ .tag { display: inline-flex; align-items: center; gap: 3px; font-size: var(--text-xs); padding: 2px 7px; border-radius: var(--r-full); font-weight: var(--fw-semi); letter-spacing:.3px; white-space: nowrap; } .tag.b { background: var(--green-bg); color: var(--green); border: 1px solid rgba(0,214,143,.2); } .tag.i { background: var(--gold-bg); color: var(--gold); border: 1px solid rgba(245,166,35,.2);} .tag.a { background: var(--red-bg); color: var(--red); border: 1px solid rgba(255,77,109,.2);} .tag.neu { background: var(--bg4); color: var(--t2); border: 1px solid var(--border); } /* ── Pills d'accord ── */ .cp { display: inline-flex; align-items: center; background: rgba(var(--accent-rgb), .12); border: 1px solid rgba(var(--accent-rgb), .25); border-radius: var(--r-md); padding: 4px 10px; font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--a2); } .cp-arrow { color: var(--t3); font-size: var(--text-sm); align-self: center; } /* ── Sidebar badges ── */ .sbb { margin-left: auto; font-size: var(--text-xs); padding: 2px 6px; border-radius: var(--r-full); background: var(--bg4); color: var(--t3); flex-shrink: 0; } .sbb.glow { background: #1a1a40; color: var(--a2); } .sbb.ok { background: var(--green-bg); color: var(--green); } /* ══════════════════════════════════════════════════ 5. LAYOUT SHELL ══════════════════════════════════════════════════ */ .shell { display: flex; flex: 1; overflow: hidden; position: relative; } .main { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scroll-behavior: smooth; } /* ── Sections ── */ .sec { padding: var(--space-5) var(--space-5); } @media (max-width: 640px) { .sec { padding: var(--space-4); } } .sec-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); } .sec-title { font-size: var(--text-md); font-weight: var(--fw-bold); color: var(--text); } .sec-link { font-size: var(--text-sm); color: var(--a2); background: none; border: none; cursor: pointer; transition: color var(--dur-base); } .sec-link:hover { color: var(--a3); } /* ══════════════════════════════════════════════════ 6. TOPBAR (bureau) ══════════════════════════════════════════════════ */ .topbar { height: var(--topbar-h); background: rgba(13, 13, 20, .96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 var(--space-5); gap: var(--space-2); flex-shrink: 0; z-index: var(--z-nav); position: relative; } .logo { font-size: 17px; font-weight: var(--fw-black); letter-spacing:-.5px; margin-right: auto; white-space: nowrap; flex-shrink: 0; } /* Navigation tabs bureau */ .tnav { background: none; border: none; color: var(--t2); font-size: var(--text-sm); font-family: inherit; padding: 5px var(--space-3); border-radius: var(--r-md); cursor: pointer; white-space: nowrap; touch-action: manipulation; transition: background var(--dur-base), color var(--dur-base); flex-shrink: 0; } .tnav:hover, .tnav.on { background: var(--bg4); color: var(--text); } .tnav.on { font-weight: var(--fw-semi); } /* Pills de stats dans la topbar */ .pill { display: flex; align-items: center; gap: 5px; border-radius: var(--r-full); padding: 4px 10px; font-size: var(--text-sm); font-weight: var(--fw-semi); white-space: nowrap; flex-shrink: 0; } .pill-gold { background: linear-gradient(135deg, #2a1a00, #3a2500); border: 1px solid rgba(245,166,35, .35); color: var(--gold); } .pill-purple { background: linear-gradient(135deg, #1a0a3a, #250a4a); border: 1px solid rgba(var(--accent-rgb), .3); color: var(--a3); } /* ══════════════════════════════════════════════════ 7. MOBILE HEADER ══════════════════════════════════════════════════ */ .mob-hdr { display: none; /* affiché via responsive */ height: var(--mob-hdr-h); background: rgba(13, 13, 20, .97); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); align-items: center; justify-content: space-between; padding: 0 var(--space-4); flex-shrink: 0; z-index: var(--z-nav); } .mob-logo { font-size: 16px; font-weight: var(--fw-black); letter-spacing:-.5px; } .mob-pills { display: flex; gap: var(--space-2); align-items:center; } .mob-pills .pill { font-size: var(--text-xs); padding: 3px 8px; } /* ══════════════════════════════════════════════════ 8. SIDEBAR (bureau) ══════════════════════════════════════════════════ */ .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--bg2); border-right:1px solid var(--border); overflow-y: auto; overflow-x: hidden; padding: var(--space-2) 0 var(--space-4); scrollbar-width: thin; scrollbar-color: var(--bg4) transparent; } /* Séparateur de groupe sidebar */ .sb-hd { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--t4); text-transform: uppercase; letter-spacing: 1.2px; margin-top: var(--space-2); user-select: none; } /* Items sidebar */ .sb-it { display: flex; align-items: center; gap: var(--space-2); padding: 8px var(--space-4); cursor: pointer; border-left: 3px solid transparent; font-size: var(--text-sm); color: var(--t2); transition: background var(--dur-base), color var(--dur-base), border-color var(--dur-base); user-select: none; } .sb-it:hover { background: var(--bg3); color: var(--text); } .sb-it.on { background: var(--bg3); color: var(--a2); border-left-color: var(--accent); font-weight: var(--fw-semi); } .sb-it .ic { width: 20px; text-align: center; font-size: 14px; flex-shrink: 0; } /* ══════════════════════════════════════════════════ 9. BOTTOM NAV (mobile) ══════════════════════════════════════════════════ */ .botnav { display: none; /* affiché via responsive */ height: var(--botnav-h); background: rgba(13, 13, 20, .97); backdrop-filter: blur(18px); border-top: 1px solid var(--border); align-items: stretch; flex-shrink: 0; z-index: var(--z-nav); /* Safe area bottom pour iPhone X+ */ padding-bottom: env(safe-area-inset-bottom); } .bn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content:center; gap: 2px; background: none; border: none; color: var(--t3); font-size: var(--text-xs); font-family: inherit; cursor: pointer; touch-action: manipulation; transition: color var(--dur-base); padding: var(--space-2) 0; position: relative; } .bn::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%) scaleX(0); width: 28px; height: 2px; border-radius: var(--r-full); background: var(--a2); transition: transform var(--dur-base) var(--ease-spring); } .bn.on { color: var(--a2); } .bn.on::before { transform: translateX(-50%) scaleX(1); } .bn .ico { font-size: 22px; line-height: 1; } /* ══════════════════════════════════════════════════ 10. PANELS ══════════════════════════════════════════════════ */ .panel { display: none; min-height: 100%; } .panel.on { display: block; animation: panelIn var(--dur-slow) var(--ease) both; } @keyframes panelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ══════════════════════════════════════════════════ 11. ANIMATIONS & KEYFRAMES ══════════════════════════════════════════════════ */ @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @keyframes slideIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } } @keyframes slideUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes scaleIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } } @keyframes xpPop { 0% { opacity: 1; transform: translateY(0) scale(1); } 60% { opacity: 1; transform: translateY(-40px) scale(1.3); } 100% { opacity: 0; transform: translateY(-70px) scale(1.1); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } @keyframes glow { from { box-shadow: 0 0 0 0 transparent; } to { box-shadow: 0 0 12px 3px rgba(var(--accent-rgb), .55); } } @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes beatPulse { 0% { transform: scale(1); background: var(--border); } 20% { transform: scale(1.45); background: var(--a2); } 100% { transform: scale(1); background: var(--border); } } /* Classes d'animation */ .anim-fade { animation: fadeIn var(--dur-slow) var(--ease) both; } .anim-slide { animation: slideIn var(--dur-slow) var(--ease) both; } .anim-scale { animation: scaleIn var(--dur-slow) var(--ease-spring) both; } .anim-pulse { animation: pulse 2s infinite; } .anim-blink { animation: blink 1s infinite; } .anim-spin { animation: spin 1s linear infinite; } .anim-glow { animation: glow .7s ease-in-out infinite alternate; } /* Délais d'animation utilitaires */ .delay-1 { animation-delay: 50ms; } .delay-2 { animation-delay: 100ms; } .delay-3 { animation-delay: 150ms; } .delay-4 { animation-delay: 200ms; } /* Skeleton loading */ .skeleton { background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%); background-size: 200% auto; animation: shimmer 1.4s linear infinite; border-radius: var(--r-md); } /* ══════════════════════════════════════════════════ 12. SCROLLBARS ══════════════════════════════════════════════════ */ /* Webkit */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: var(--r-full); } ::-webkit-scrollbar-thumb:hover { background: var(--bg5); } ::-webkit-scrollbar-corner { background: transparent; } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--bg4) transparent; } /* Scroll horizontal (course scroll, tabs) */ .scroll-x { display: flex; overflow-x: auto; -webkit-overflow-scrolling:touch; scrollbar-width: none; overscroll-behavior-x: contain; gap: var(--space-3); padding-bottom: var(--space-2); } .scroll-x::-webkit-scrollbar { display: none; } /* ══════════════════════════════════════════════════ 13. UTILITIES ══════════════════════════════════════════════════ */ /* Flex */ .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .flex-1 { flex: 1; } .shrink-0 { flex-shrink: 0; } .flex-wrap { flex-wrap: wrap; } .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } /* Spacing */ .mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } .p-3 { padding: var(--space-3); } .p-4 { padding: var(--space-4); } /* Display */ .hidden { display: none !important; } .relative { position: relative; } .w-full { width: 100%; } .text-center { text-align: center; } .text-right { text-align: right; } .cursor-pointer { cursor: pointer; } .no-select { user-select: none; } .overflow-hidden { overflow: hidden; } /* Interactifs */ .hover-lift { transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); } .hover-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .hover-accent { transition: border-color var(--dur-base); } .hover-accent:hover { border-color: var(--accent) !important; } /* Diviseur */ .divider { border: none; border-top: 1px solid var(--border); margin: var(--space-4) 0; } /* Grilles */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); } /* ══════════════════════════════════════════════════ 14. FOCUS & ACCESSIBILITÉ ══════════════════════════════════════════════════ */ /* Focus visible uniquement au clavier */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); } :focus:not(:focus-visible) { outline: none; } /* Préférence de mouvement réduit */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } } /* Contraste élevé */ @media (prefers-contrast: high) { :root { --border: #6060a0; --border2: #8080c0; --t2: #c0c0e0; --t3: #8080b0; } } /* ══════════════════════════════════════════════════ 15. PRINT ══════════════════════════════════════════════════ */ @media print { .topbar, .mob-hdr, .sidebar, .botnav, .lf, .sv, #auth-overlay, #gm-toast, .btn, .cta-btn, .hero-cta { display: none !important; } body { background: #fff; color: #000; overflow: auto; } .main { overflow: visible; } .shell { display: block; } .panel { display: block !important; } .sec { padding: 1rem; } .card { border: 1px solid #ccc; break-inside: avoid; } .tab-box{ background: #f5f5f5; color: #000; font-size: 11px; } h1, h2, h3 { color: #000; } a { color: #000; text-decoration: underline; } }