/* ========================================================================== Khdemti.ma — Base : reset, typographie, éléments ========================================================================== */ /* Police self-hosted (voir assets/fonts/fonts.css, préchargée dans le ) */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { overflow-x: hidden; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; } /* Ancres : compensation du header fixe */ :target { scroll-margin-block-start: calc(var(--header-h) + 1rem); } body { overflow-x: clip; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--step-0); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, video, svg, canvas { display: block; max-width: 100%; height: auto; } canvas { height: 100%; } input, button, textarea, select { font: inherit; color: inherit; } /* L'attribut hidden doit gagner sur les display des composants (dernier recours documenté) */ [hidden] { display: none !important; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); text-wrap: balance; overflow-wrap: break-word; } h1 { font-size: var(--step-5); line-height: var(--lh-display); letter-spacing: var(--ls-display); } h2 { font-size: var(--step-4); } h3 { font-size: var(--step-1); } h4 { font-size: var(--step-0); font-weight: 600; } p { max-width: 65ch; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } ul[class], ol[class] { list-style: none; padding: 0; } /* Listes de navigation / footer : jamais de puces */ nav ul, .site-footer ul { list-style: none; padding: 0; } :where(address, figure) { font-style: normal; } ::selection { background: var(--ink); color: var(--paper); } [data-theme="dark"] ::selection { background: var(--paper); color: var(--ink); } /* Focus toujours visible (remplacé par :focus-visible partout) */ :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: var(--radius-sm); } /* ---- Utilitaires ------------------------------------------------------- */ .container { width: min(var(--container), 100% - var(--gutter) * 2); margin-inline: auto; } .container--wide { width: min(var(--container-wide), 100% - var(--gutter) * 2); } /* Aéré visuellement, présent pour les lecteurs d'écran */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* Lien d'évitement */ .skip-link { position: fixed; inset-block-start: 0.75rem; inset-inline-start: 0.75rem; z-index: calc(var(--z-overlay) + 1); padding: 0.75rem 1.25rem; background: var(--ink); color: var(--paper); font-weight: 600; text-decoration: none; transform: translateY(-200%); transition: transform var(--dur-fast) var(--ease-out-soft); } .skip-link:focus-visible { transform: none; } /* Eyebrow : petit libellé numéroté au-dessus des titres */ .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-display); font-size: var(--step--1); font-weight: 500; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--color-text-muted); } .eyebrow::before { content: ""; inline-size: 2rem; block-size: 1px; background: currentColor; } .lead { font-size: var(--step-1); line-height: 1.5; color: var(--color-text-muted); text-wrap: pretty; } /* Titre de section standard */ .section-head { display: grid; gap: var(--space-s); max-width: 46rem; margin-block-end: var(--space-l); } .section-head--center { justify-items: center; text-align: center; margin-inline: auto; } /* Mot « creux » (contour) — signature monochrome */ .hollow { color: transparent; -webkit-text-stroke: 1.5px currentColor; paint-order: stroke; } @supports not (-webkit-text-stroke: 1px black) { .hollow { color: inherit; opacity: 0.35; } } /* Séparateur filet */ .rule { border: 0; border-block-start: var(--border-hairline) solid var(--color-border); }