/* La feuille du SITE — ce que le Design System ne livre pas. * * Règle tenue d'un bout à l'autre du fichier : **aucune couleur, aucun * espacement, aucune taille de texte en dur.** Tout passe par une custom * property servie par le CDN (`--palette-*`, `--spacing-*`, `--texts-*`, * `--radius-*`, `--borders-*`, `--marques-brand-*`). C'est la contrainte que * `StarterKit/docs/05-design-system.md` impose aux projets, et c'est ce qui * rend ce site utile comme test : si une rampe change au CDN, la page entière * bouge avec, sans qu'on touche à ce fichier. * * Les seuls littéraux sont : * - les métriques de gabarit relevées dans le brandbook RAGT (largeur de la * barre flottante, hauteur 88, décalage 104, rail…) — aucune variable * Figma ne les porte ; * - l'ombre `--shadow-xl` et les durées d'animation, même raison ; * - quelques `%` et `ch` de mise en page qui ne sont pas des tokens ; * - les 448px de `.sites-card`, qui ne sont pas une décision du site : c'est * la largeur que `.ragt-pin-card` se donne, relue pour la retenir dans son * cadre. * * Ce fichier ne redéfinit AUCUNE classe `.ragt-*`. Un composant du Design * System qui ne convient pas se signale au programme Groupe Digital ; il ne se * repeint pas ici. Les rares ajustements de contexte passent par des classes * à nous posées à côté (`.filters .ragt-control`, par exemple, pour une * largeur — jamais pour une couleur). */ @import url('/assets/fonts/google-sans-flex.css'); @import url('/assets/fonts/oswald.css'); :root { /* Gabarit — littéraux du brandbook. */ --shell-width: 1408px; --header-height: 88px; --header-inset: 16px; --header-offset: 104px; --shadow-xl: 0 20px 25px -5px #0000001a, 0 10px 10px -5px #0000000a; --shadow-card: 0 1px 3px #0000000f; --ease-out: cubic-bezier(.16, 1, .3, 1); --font-core: 'Google Sans Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-display: 'Oswald', 'Google Sans Flex', 'Helvetica Neue', Arial, sans-serif; } /* `ragt-tokens.css` pose déjà `body { margin; background; color; font-size; line-height }`. On n'y ajoute que la famille : le Design System ne l'impose qu'au niveau des composants. */ body { font-family: var(--font-core); -webkit-font-smoothing: antialiased; } *, *::before, *::after { box-sizing: border-box; } /* Le repli quand le CDN ne répond pas. `site.js` pose `no-ds` sur si les tokens ne sont pas arrivés : la page reste lisible et le dit. */ html.no-ds body { margin: 0; font-family: var(--font-core); background: #f8f8f8; color: #1b2930; } /* ========================================================================== */ /* Typographie */ /* ========================================================================== */ /* Les `--texts-*` suivent l'axe viewport tout seuls (media queries dans `ragt-tokens.css`) : il n'y a donc aucune media query de typo ici. */ h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: .01em; color: var(--palette-neutral-900); } .t-display { font-size: var(--texts-display-d2-font-size); line-height: var(--texts-display-d2-line-height); } .t-h1 { font-size: var(--texts-heading-h1-font-size); line-height: var(--texts-heading-h1-line-height); } .t-h2 { font-size: var(--texts-heading-h2-font-size); line-height: var(--texts-heading-h2-line-height); } .t-h3 { font-size: var(--texts-heading-h3-font-size); line-height: var(--texts-heading-h3-line-height); } .t-h4 { font-size: var(--texts-heading-h4-font-size); line-height: var(--texts-heading-h4-line-height); } .t-h5 { font-size: var(--texts-heading-h5-font-size); line-height: var(--texts-heading-h5-line-height); } .t-lead { font-size: var(--texts-body-large-font-size); line-height: var(--texts-body-large-line-height); color: var(--palette-neutral-700); } .t-small { font-size: var(--texts-body-small-font-size); line-height: var(--texts-body-small-line-height); color: var(--palette-neutral-600); } .t-caption { font-size: var(--texts-ui-caption-font-size); line-height: var(--texts-ui-caption-line-height); color: var(--palette-neutral-600); } .t-footnote { font-size: var(--texts-body-footnote-font-size); line-height: var(--texts-body-footnote-line-height); color: var(--palette-neutral-600); } /* Le kicker du brandbook : capitales espacées, filet court, teinte de marque. Changer de marque le repeint — c'est voulu, c'est le témoin le plus visible de l'axe `marques` sur une page de contenu. */ .kicker { display: flex; align-items: center; gap: var(--spacing-12); margin: 0; font-family: var(--font-core); font-size: var(--texts-ui-small-font-size); line-height: var(--texts-ui-small-line-height); font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--marques-brand-800); } .kicker::before { content: ""; flex: none; width: 34px; height: 2px; background: var(--marques-brand-600); } .prose { max-width: 72ch; } .prose p { margin: 0 0 var(--spacing-16); } .prose p:last-child { margin-bottom: 0; } .prose strong { font-weight: 600; } .quote { margin: 0; padding-left: var(--spacing-24); border-left: var(--borders-l) solid var(--marques-brand-500); } .quote p { margin: 0 0 var(--spacing-12); font-size: var(--texts-editorial-citation-font-size); line-height: var(--texts-editorial-citation-line-height); color: var(--palette-neutral-800); } .quote figcaption { font-size: var(--texts-editorial-citation-attribution-font-size); line-height: var(--texts-editorial-citation-attribution-line-height); color: var(--palette-neutral-600); } .highlight { padding: var(--spacing-16) var(--spacing-20); border-radius: var(--radius-m); background: var(--marques-brand-100); font-size: var(--texts-editorial-highlight-font-size); line-height: var(--texts-editorial-highlight-line-height); color: var(--palette-neutral-800); } /* ========================================================================== */ /* Utilitaires de mise en page */ /* ========================================================================== */ /* `.ragt-container`, `.ragt-grid`, `.ragt-col-*`, `.ragt-section` et `.ragt-stack` viennent du CDN. Ce qui suit ne fait que les compléter. */ /* Écart signalé au Design System, et contourné ici en attendant. * * `.ragt-btn` est dessiné pour un `