/* ========================================================================== Base & reset — apphamza.com ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } body { font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--text); background-color: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; /* Texture subtile : léger halo doré en haut */ background-image: radial-gradient(120% 60% at 50% -10%, rgba(201, 162, 75, 0.08), transparent 60%); background-repeat: no-repeat; background-attachment: fixed; } /* Langue arabe : police dédiée */ html[lang="ar"] body { font-family: var(--font-ar); } html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4, html[lang="ar"] .font-serif { font-family: var(--font-ar); } img, picture, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; transition: color var(--t-fast); } button, input, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } ul, ol { list-style: none; padding: 0; } /* ---- Titres ---- */ h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 480; line-height: var(--lh-tight); letter-spacing: -0.01em; color: var(--text); font-optical-sizing: auto; text-wrap: balance; } h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-2xl); } h3 { font-size: var(--fs-lg); } h4 { font-size: var(--fs-md); } p { text-wrap: pretty; } ::selection { background: var(--accent); color: var(--bg); } :focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; border-radius: 2px; } /* Scrollbar discrète */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--bg-2); } ::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 999px; border: 3px solid var(--bg-2); } ::-webkit-scrollbar-thumb:hover { background: var(--accent-deep); } /* ---- Accessibilité ---- */ .skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: var(--z-top); background: var(--accent); color: var(--bg); padding: 0.6rem 1.1rem; border-radius: var(--radius-sm); font-weight: 600; transition: top var(--t); } .skip-link:focus { top: var(--space-4); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } [hidden] { display: none !important; } /* ---- Anti-FOUC pour les animations JS ---- Le contenu reste visible sans JS. On ne masque les éléments à animer QUE lorsque la classe .js est présente sur (ajoutée par main.js). AOS gère ensuite ses propres états. */ .no-js [data-aos] { opacity: 1 !important; transform: none !important; }