/* * md3-base.css — Styles de base Material Design 3 * ================================================= * Dépend de : md3-tokens.css (à charger en premier) * * Ce fichier couvre : * 1. Reset & base * 2. Typographie HTML native (h1-h6, p, listes, code…) * 3. Classes utilitaires de l'échelle typographique MD3 * 4. Classes utilitaires de couleurs MD3 * 5. Élévation & surfaces * 6. Accessibilité (focus, reduced-motion, skip link) * 7. Mise en page de base (conteneur, grilles) * * CHARGEMENT dans functions.php : * wp_enqueue_style('md3-tokens', LSAJ_URI . '/assets/css/md3-tokens.css', [], LSAJ_VERSION); * wp_enqueue_style('md3-base', LSAJ_URI . '/assets/css/md3-base.css', ['md3-tokens'], LSAJ_VERSION); */ /* ============================================================================= 1. RESET & BASE ============================================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { /* Empêche le zoom auto sur les inputs en iOS */ -webkit-text-size-adjust: 100%; /* Scroll fluide sauf si l'utilisateur préfère les mouvements réduits */ scroll-behavior: smooth; /* Hauteur pour que le footer reste en bas */ height: 100%; font-size: 100%; /* = 16px. Ne pas changer, les rem en dépendent. */ color-scheme: light dark; /* Indique au navigateur qu'on gère le dark mode */ } body { /* Évite les lignes trop étirées sur grand écran */ min-height: 100%; /* Rendu des polices optimisé */ -webkit-font-smoothing: antialiased; text-rendering: optimizeSpeed; font-family: var(--md-sys-typescale-body-font); font-size: var(--md-sys-typescale-body-large-size); line-height: var(--md-sys-typescale-body-large-line-height); letter-spacing: var(--md-sys-typescale-body-large-tracking); font-weight: var(--md-sys-typescale-body-large-weight); color: var(--md-sys-color-on-background); background-color: var(--md-sys-color-background); /* Transition douce lors du changement light/dark */ transition: background-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard), color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard); } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } /* Évite les dépassements de texte dans les conteneurs */ p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* Évite les reflows en isolant le rendu des composants lourds */ #root, #__next { isolation: isolate; } /* ============================================================================= 2. TYPOGRAPHIE HTML NATIVE Applique l'échelle MD3 aux éléments HTML sémantiques. ============================================================================= */ /* ── Titres ──────────────────────────────────────────────────────────────────── */ h1 { font-family: var(--md-sys-typescale-headline-font); font-size: var(--md-sys-typescale-headline-large-size); line-height: var(--md-sys-typescale-headline-large-line-height); letter-spacing: var(--md-sys-typescale-headline-large-tracking); font-weight: var(--md-sys-typescale-headline-large-weight); color: var(--md-sys-color-on-surface); margin-bottom: var(--md-spacing-3); } h2 { font-family: var(--md-sys-typescale-headline-font); font-size: var(--md-sys-typescale-headline-medium-size); line-height: var(--md-sys-typescale-headline-medium-line-height); letter-spacing: var(--md-sys-typescale-headline-medium-tracking); font-weight: var(--md-sys-typescale-headline-medium-weight); color: var(--md-sys-color-on-surface); margin-bottom: var(--md-spacing-3); } h3 { font-family: var(--md-sys-typescale-headline-font); font-size: var(--md-sys-typescale-headline-small-size); line-height: var(--md-sys-typescale-headline-small-line-height); letter-spacing: var(--md-sys-typescale-headline-small-tracking); font-weight: var(--md-sys-typescale-headline-small-weight); color: var(--md-sys-color-on-surface); margin-bottom: var(--md-spacing-3); } h4 { font-family: var(--md-sys-typescale-title-font); font-size: var(--md-sys-typescale-title-large-size); line-height: var(--md-sys-typescale-title-large-line-height); letter-spacing: var(--md-sys-typescale-title-large-tracking); font-weight: var(--md-sys-typescale-title-large-weight); color: var(--md-sys-color-on-surface); margin-bottom: var(--md-spacing-2); } h5 { font-family: var(--md-sys-typescale-title-font); font-size: var(--md-sys-typescale-title-medium-size); line-height: var(--md-sys-typescale-title-medium-line-height); letter-spacing: var(--md-sys-typescale-title-medium-tracking); font-weight: var(--md-sys-typescale-title-medium-weight); color: var(--md-sys-color-on-surface); margin-bottom: var(--md-spacing-2); } h6 { font-family: var(--md-sys-typescale-title-font); font-size: var(--md-sys-typescale-title-small-size); line-height: var(--md-sys-typescale-title-small-line-height); letter-spacing: var(--md-sys-typescale-title-small-tracking); font-weight: var(--md-sys-typescale-title-small-weight); color: var(--md-sys-color-on-surface); margin-bottom: var(--md-spacing-2); } /* ── Corps de texte ───────────────────────────────────────────────────────────── */ p { font-size: var(--md-sys-typescale-body-large-size); line-height: var(--md-sys-typescale-body-large-line-height); letter-spacing: var(--md-sys-typescale-body-large-tracking); color: var(--md-sys-color-on-surface); margin-bottom: var(--md-spacing-4); max-width: 72ch; /* Longueur de ligne optimale pour la lisibilité */ } /* ── Liens ────────────────────────────────────────────────────────────────────── */ a { color: var(--md-sys-color-primary); text-decoration: 1px underline; text-underline-offset: 3px; transition: color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard), text-decoration var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard); } a:hover, a:hover:visited { color: var(--md-sys-color-error); filter: saturate(1.2) brightness(.9); } a:visited { color: var(--md-sys-color-secondary); } a:has(> button) { text-decoration: none; } /* ── Listes ───────────────────────────────────────────────────────────────────── */ ul, ol { padding-left: var(--md-spacing-6); margin-bottom: var(--md-spacing-4); } li { font-size: var(--md-sys-typescale-body-large-size); line-height: var(--md-sys-typescale-body-large-line-height); letter-spacing: var(--md-sys-typescale-body-large-tracking); color: var(--md-sys-color-on-surface); margin-bottom: var(--md-spacing-1); } /* Liste sans style (utilitaire) */ ul.list-none { list-style: none; padding-left: 0; } /* ── Citation ─────────────────────────────────────────────────────────────────── */ blockquote { margin: var(--md-spacing-6) 0; padding: var(--md-spacing-4) var(--md-spacing-6); border-left: 4px solid var(--md-sys-color-primary); background-color: var(--md-sys-color-surface-container-low); border-radius: 0 var(--md-sys-shape-corner-small) var(--md-sys-shape-corner-small) 0; color: var(--md-sys-color-on-surface-variant); } blockquote p { font-size: var(--md-sys-typescale-title-medium-size); line-height: var(--md-sys-typescale-title-medium-line-height); font-style: italic; max-width: none; margin-bottom: 0; } blockquote cite { display: block; margin-top: var(--md-spacing-2); font-size: var(--md-sys-typescale-label-large-size); font-weight: var(--md-sys-typescale-label-large-weight); color: var(--md-sys-color-on-surface-variant); font-style: normal; } /* ── Code ─────────────────────────────────────────────────────────────────────── */ code, kbd, samp { font-family: "Roboto Mono", "SFMono-Regular", Consolas, monospace; font-size: 0.875em; background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); padding: 0.1em 0.4em; border-radius: var(--md-sys-shape-corner-extra-small); } pre { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); padding: var(--md-spacing-6); border-radius: var(--md-sys-shape-corner-medium); overflow-x: auto; margin-bottom: var(--md-spacing-6); tab-size: 2; box-shadow: var(--md-sys-elevation-level1); } pre code { background: transparent; padding: 0; font-size: var(--md-sys-typescale-body-medium-size); line-height: 1.7; } /* ── Ligne horizontale ────────────────────────────────────────────────────────── */ hr { border: none; border-top: 1px solid var(--md-sys-color-outline-variant); margin: var(--md-spacing-8) 0; } /* ── Tableau ──────────────────────────────────────────────────────────────────── */ table { width: 100%; border-collapse: collapse; margin-bottom: var(--md-spacing-6); font-size: var(--md-sys-typescale-body-medium-size); line-height: var(--md-sys-typescale-body-medium-line-height); } thead { background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface); } th { font-weight: var(--md-sys-typescale-label-large-weight); font-size: var(--md-sys-typescale-label-large-size); letter-spacing: var(--md-sys-typescale-label-large-tracking); text-align: left; padding: var(--md-spacing-3) var(--md-spacing-4); border-bottom: 1px solid var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface-variant); } td { padding: var(--md-spacing-3) var(--md-spacing-4); border-bottom: 1px solid var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface); vertical-align: top; } tbody tr:hover td { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); } /* ── Images ───────────────────────────────────────────────────────────────────── */ img { max-width: 100%; height: auto; border-radius: var(--md-sys-shape-corner-small); } figure { margin: var(--md-spacing-6) 0; } figcaption { margin-top: var(--md-spacing-2); font-size: var(--md-sys-typescale-body-small-size); line-height: var(--md-sys-typescale-body-small-line-height); letter-spacing: var(--md-sys-typescale-body-small-tracking); color: var(--md-sys-color-on-surface-variant); text-align: center; } /* ============================================================================= 3. CLASSES UTILITAIRES — ÉCHELLE TYPOGRAPHIQUE MD3 Usage :

ou

============================================================================= */ .md-display-large { font-family: var(--md-sys-typescale-display-font); font-size: var(--md-sys-typescale-display-large-size); line-height: var(--md-sys-typescale-display-large-line-height); letter-spacing: var(--md-sys-typescale-display-large-tracking); font-weight: var(--md-sys-typescale-display-large-weight); } .md-display-medium { font-family: var(--md-sys-typescale-display-font); font-size: var(--md-sys-typescale-display-medium-size); line-height: var(--md-sys-typescale-display-medium-line-height); letter-spacing: var(--md-sys-typescale-display-medium-tracking); font-weight: var(--md-sys-typescale-display-medium-weight); } .md-display-small { font-family: var(--md-sys-typescale-display-font); font-size: var(--md-sys-typescale-display-small-size); line-height: var(--md-sys-typescale-display-small-line-height); letter-spacing: var(--md-sys-typescale-display-small-tracking); font-weight: var(--md-sys-typescale-display-small-weight); } .md-headline-large { font-family: var(--md-sys-typescale-headline-font); font-size: var(--md-sys-typescale-headline-large-size); line-height: var(--md-sys-typescale-headline-large-line-height); letter-spacing: var(--md-sys-typescale-headline-large-tracking); font-weight: var(--md-sys-typescale-headline-large-weight); } .md-headline-medium { font-family: var(--md-sys-typescale-headline-font); font-size: var(--md-sys-typescale-headline-medium-size); line-height: var(--md-sys-typescale-headline-medium-line-height); letter-spacing: var(--md-sys-typescale-headline-medium-tracking); font-weight: var(--md-sys-typescale-headline-medium-weight); } .md-headline-small { font-family: var(--md-sys-typescale-headline-font); font-size: var(--md-sys-typescale-headline-small-size); line-height: var(--md-sys-typescale-headline-small-line-height); letter-spacing: var(--md-sys-typescale-headline-small-tracking); font-weight: var(--md-sys-typescale-headline-small-weight); } .md-title-large { font-family: var(--md-sys-typescale-title-font); font-size: var(--md-sys-typescale-title-large-size); line-height: var(--md-sys-typescale-title-large-line-height); letter-spacing: var(--md-sys-typescale-title-large-tracking); font-weight: var(--md-sys-typescale-title-large-weight); } .md-title-medium { font-family: var(--md-sys-typescale-title-font); font-size: var(--md-sys-typescale-title-medium-size); line-height: var(--md-sys-typescale-title-medium-line-height); letter-spacing: var(--md-sys-typescale-title-medium-tracking); font-weight: var(--md-sys-typescale-title-medium-weight); } .md-title-small { font-family: var(--md-sys-typescale-title-font); font-size: var(--md-sys-typescale-title-small-size); line-height: var(--md-sys-typescale-title-small-line-height); letter-spacing: var(--md-sys-typescale-title-small-tracking); font-weight: var(--md-sys-typescale-title-small-weight); } .md-body-large { font-family: var(--md-sys-typescale-body-font); font-size: var(--md-sys-typescale-body-large-size); line-height: var(--md-sys-typescale-body-large-line-height); letter-spacing: var(--md-sys-typescale-body-large-tracking); font-weight: var(--md-sys-typescale-body-large-weight); } .md-body-medium { font-family: var(--md-sys-typescale-body-font); font-size: var(--md-sys-typescale-body-medium-size); line-height: var(--md-sys-typescale-body-medium-line-height); letter-spacing: var(--md-sys-typescale-body-medium-tracking); font-weight: var(--md-sys-typescale-body-medium-weight); } .md-body-small { font-family: var(--md-sys-typescale-body-font); font-size: var(--md-sys-typescale-body-small-size); line-height: var(--md-sys-typescale-body-small-line-height); letter-spacing: var(--md-sys-typescale-body-small-tracking); font-weight: var(--md-sys-typescale-body-small-weight); } .md-label-large { font-family: var(--md-sys-typescale-label-font); font-size: var(--md-sys-typescale-label-large-size); line-height: var(--md-sys-typescale-label-large-line-height); letter-spacing: var(--md-sys-typescale-label-large-tracking); font-weight: var(--md-sys-typescale-label-large-weight); } .md-label-medium { font-family: var(--md-sys-typescale-label-font); font-size: var(--md-sys-typescale-label-medium-size); line-height: var(--md-sys-typescale-label-medium-line-height); letter-spacing: var(--md-sys-typescale-label-medium-tracking); font-weight: var(--md-sys-typescale-label-medium-weight); } .md-label-small { font-family: var(--md-sys-typescale-label-font); font-size: var(--md-sys-typescale-label-small-size); line-height: var(--md-sys-typescale-label-small-line-height); letter-spacing: var(--md-sys-typescale-label-small-tracking); font-weight: var(--md-sys-typescale-label-small-weight); } /* ============================================================================= 4. CLASSES UTILITAIRES — COULEURS MD3 Usage :

============================================================================= */ /* Couleurs de texte */ .md-primary { color: var(--md-sys-color-primary); } .md-on-primary { color: var(--md-sys-color-on-primary); } .md-secondary { color: var(--md-sys-color-secondary); } .md-tertiary { color: var(--md-sys-color-tertiary); } .md-error { color: var(--md-sys-color-error); } .md-on-surface { color: var(--md-sys-color-on-surface); } .md-on-surface-variant{ color: var(--md-sys-color-on-surface-variant); } .md-outline { color: var(--md-sys-color-outline); } /* Couleurs de fond */ .md-bg-primary { background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); } .md-bg-primary-container { background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); } .md-bg-secondary { background-color: var(--md-sys-color-secondary); color: var(--md-sys-color-on-secondary); } .md-bg-secondary-container{ background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } .md-bg-tertiary { background-color: var(--md-sys-color-tertiary); color: var(--md-sys-color-on-tertiary); } .md-bg-tertiary-container { background-color: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); } .md-bg-error { background-color: var(--md-sys-color-error); color: var(--md-sys-color-on-error); } .md-bg-error-container { background-color: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); } .md-bg-surface { background-color: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); } .md-bg-surface-variant { background-color: var(--md-sys-color-surface-variant); color: var(--md-sys-color-on-surface-variant); } .md-bg-surface-container-lowest { background-color: var(--md-sys-color-surface-container-lowest); } .md-bg-surface-container-low { background-color: var(--md-sys-color-surface-container-low); } .md-bg-surface-container { background-color: var(--md-sys-color-surface-container); } .md-bg-surface-container-high { background-color: var(--md-sys-color-surface-container-high); } .md-bg-surface-container-highest { background-color: var(--md-sys-color-surface-container-highest); } .md-bg-inverse-surface { background-color: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); } /* ============================================================================= 5. ÉLÉVATION & SURFACES Les surfaces MD3 combinent ombre + teinte de couleur primaire. ============================================================================= */ /* Ombres seules */ .md-elevation-0 { box-shadow: var(--md-sys-elevation-level0); } .md-elevation-1 { box-shadow: var(--md-sys-elevation-level1); } .md-elevation-2 { box-shadow: var(--md-sys-elevation-level2); } .md-elevation-3 { box-shadow: var(--md-sys-elevation-level3); } .md-elevation-4 { box-shadow: var(--md-sys-elevation-level4); } .md-elevation-5 { box-shadow: var(--md-sys-elevation-level5); } /* * Surfaces avec tonal elevation (teinte primaire sur fond de surface). * MD3 applique une opacité croissante de la couleur primaire pour indiquer * les niveaux d'élévation en dark mode et les hiérarchies en light mode. */ .md-surface-level0 { background-color: var(--md-sys-color-surface); box-shadow: var(--md-sys-elevation-level0); } .md-surface-level1 { background-color: color-mix( in srgb, var(--md-sys-color-surface-tint) 5%, var(--md-sys-color-surface) ); box-shadow: var(--md-sys-elevation-level1); } .md-surface-level2 { background-color: color-mix( in srgb, var(--md-sys-color-surface-tint) 8%, var(--md-sys-color-surface) ); box-shadow: var(--md-sys-elevation-level2); } .md-surface-level3 { background-color: color-mix( in srgb, var(--md-sys-color-surface-tint) 11%, var(--md-sys-color-surface) ); box-shadow: var(--md-sys-elevation-level3); } .md-surface-level4 { background-color: color-mix( in srgb, var(--md-sys-color-surface-tint) 12%, var(--md-sys-color-surface) ); box-shadow: var(--md-sys-elevation-level4); } .md-surface-level5 { background-color: color-mix( in srgb, var(--md-sys-color-surface-tint) 14%, var(--md-sys-color-surface) ); box-shadow: var(--md-sys-elevation-level5); } /* Formes */ .md-shape-none { border-radius: var(--md-sys-shape-corner-none); } .md-shape-xs { border-radius: var(--md-sys-shape-corner-extra-small); } .md-shape-sm { border-radius: var(--md-sys-shape-corner-small); } .md-shape-md { border-radius: var(--md-sys-shape-corner-medium); } .md-shape-lg { border-radius: var(--md-sys-shape-corner-large); } .md-shape-xl { border-radius: var(--md-sys-shape-corner-extra-large); } .md-shape-full { border-radius: var(--md-sys-shape-corner-full); } /* ============================================================================= 6. ACCESSIBILITÉ ============================================================================= */ /* ── Focus visible ────────────────────────────────────────────────────────────── */ /* * MD3 spécifie un indicateur de focus de 3dp avec la couleur secondaire. * On utilise :focus-visible pour ne l'afficher qu'en navigation clavier, * pas sur les clics souris. */ :focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; border-radius: var(--md-sys-shape-corner-extra-small); } /* Supprimer l'outline par défaut sur les éléments qui ont leur propre style de focus */ :focus:not(:focus-visible) { outline: none; } /* ── Skip link (lien d'évitement) ────────────────────────────────────────────── */ .skip-link { position: absolute; top: -100%; left: var(--md-spacing-4); z-index: 9999; padding: var(--md-spacing-2) var(--md-spacing-4); background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border-radius: var(--md-sys-shape-corner-small); font-size: var(--md-sys-typescale-label-large-size); font-weight: var(--md-sys-typescale-label-large-weight); text-decoration: none; transition: top var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard); } .skip-link:focus { top: var(--md-spacing-4); } /* ── Masquage accessible (screen reader only) ─────────────────────────────────── */ .sr-only, .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Réduction des mouvements ─────────────────────────────────────────────────── */ /* * Respecte le paramètre système "Réduire les animations". * On supprime toutes les transitions et animations superflues. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── Contraste élevé ──────────────────────────────────────────────────────────── */ @media (forced-colors: active) { /* En mode Contraste élevé Windows, laisser le système gérer les couleurs */ * { border-color: ButtonText; } a { color: LinkText; } } /* ============================================================================= 7. MISE EN PAGE DE BASE ============================================================================= */ /* ── Conteneur principal ──────────────────────────────────────────────────────── */ .container { width: 100%; max-width: 1400px; margin-inline: auto; padding-inline: var(--md-spacing-6); } .container--narrow { max-width: 800px; } .container--wide { max-width: 1440px; } /* ── Grille de mise en page ───────────────────────────────────────────────────── */ /* * MD3 recommande une grille à 12 colonnes sur desktop, * 4 colonnes sur mobile, avec des gouttières de 16dp (mobile) / 24dp (desktop). */ .md-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--md-spacing-6); } @media (max-width: 599px) { .md-grid { grid-template-columns: repeat(4, 1fr); gap: var(--md-spacing-4); } } @media (min-width: 600px) and (max-width: 904px) { .md-grid { grid-template-columns: repeat(8, 1fr); gap: var(--md-spacing-5); } } /* Spans de colonnes utilitaires */ .md-col-1 { grid-column: span 1; } .md-col-2 { grid-column: span 2; } .md-col-3 { grid-column: span 3; } .md-col-4 { grid-column: span 4; } .md-col-6 { grid-column: span 6; } .md-col-8 { grid-column: span 8; } .md-col-12 { grid-column: span 12; } @media (max-width: 599px) { .md-col-1, .md-col-2, .md-col-3, .md-col-4, .md-col-6, .md-col-8, .md-col-12 { grid-column: span 4; } } /* ── Flexbox utilitaires ──────────────────────────────────────────────────────── */ .md-flex { display: flex; } .md-flex-col { display: flex; flex-direction: column; } .md-flex-center { display: flex; align-items: center; justify-content: center; } .md-flex-between { display: flex; align-items: center; justify-content: space-between; } .md-flex-wrap { flex-wrap: wrap; } .md-gap-1 { gap: var(--md-spacing-1); } .md-gap-2 { gap: var(--md-spacing-2); } .md-gap-3 { gap: var(--md-spacing-3); } .md-gap-4 { gap: var(--md-spacing-4); } .md-gap-6 { gap: var(--md-spacing-6); } .md-gap-8 { gap: var(--md-spacing-8); } /* ── Espacements utilitaires ──────────────────────────────────────────────────── */ .md-mt-4 { margin-top: var(--md-spacing-4); } .md-mb-4 { margin-bottom: var(--md-spacing-4); } .md-mt-6 { margin-top: var(--md-spacing-6); } .md-mb-6 { margin-bottom: var(--md-spacing-6); } .md-mt-8 { margin-top: var(--md-spacing-8); } .md-mb-8 { margin-bottom: var(--md-spacing-8); } .md-p-4 { padding: var(--md-spacing-4); } .md-p-6 { padding: var(--md-spacing-6); } .md-px-6 { padding-inline: var(--md-spacing-6); } .md-py-6 { padding-block: var(--md-spacing-6); } /* ── Divider ──────────────────────────────────────────────────────────────────── */ .md-divider { border: none; border-top: 1px solid var(--md-sys-color-outline-variant); margin: 0; } .md-divider--vertical { border-top: none; border-left: 1px solid var(--md-sys-color-outline-variant); align-self: stretch; width: 1px; } /* ── Scrim (fond semi-transparent pour modals/drawers) ────────────────────────── */ .md-scrim { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.32); z-index: 100; opacity: 0; pointer-events: none; transition: opacity var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard); } .md-scrim.is-visible { opacity: 1; pointer-events: auto; }