/* ============================================================================ * versions/premium.css — version 1 « Premium » * ---------------------------------------------------------------------------- * Chargée en dernier, après web-edition.css et web-edition-a11y.css. * C'est la version servie par défaut à l'arrivée sur le site. * * PÉRIMÈTRE * web-edition.css produit déjà l'essentiel de cette identité : fond nuit, * dégradés radiaux, verre dépoli du header, titres en Georgia. Cette feuille * n'est donc pas une refonte, elle ajoute les trois choses qui manquaient : * 1. un palier tablette — la grille passait de 3 colonnes à 1 d'un coup ; * 2. la mise en scène au défilement, en CSS pur, sans une ligne de script ; * 3. le relief au survol et l'affinage typographique. * * RÈGLE ABSOLUE * Rien de ce qui est ici ne porte d'information. Retirer ce fichier ne fait * perdre aucun contenu, aucune commande, aucun repère de navigation — le * document reste complet et utilisable. C'est la condition pour qu'une version * « riche » ne devienne pas une version « seule valable ». * * Tout ce qui bouge est conditionné à prefers-reduced-motion, tout ce qui floute * à prefers-reduced-transparency, et l'ensemble est enfermé dans @supports : * un navigateur qui ne connaît pas les timelines d'animation affiche simplement * la page finie, ce qui est le bon repli. * ==========================================================================*/ :root[data-version="premium"] { --mc-lift: 6px; --mc-ease: cubic-bezier(.2, .8, .2, 1); } /* ---------------------------------------------------------------------------- * 1. PALIER TABLETTE * web-edition.css bascule .feature-grid de 3 colonnes à 1 seule à 820px. Entre * 821 et 1100px — la fenêtre d'une tablette en paysage, d'un petit portable ou * d'une fenêtre réduite sur grand écran — trois colonnes écrasent le texte à * moins de 20 signes par ligne. Deux colonnes tiennent, une seule gaspille. * -------------------------------------------------------------------------- */ @media (min-width: 821px) and (max-width: 1100px) { :root[data-version="premium"] .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } :root[data-version="premium"] .feature-card:last-child { grid-column: 1 / -1; min-height: 0; } :root[data-version="premium"] .feature-card:last-child h3 { margin-top: 1.25rem; } } /* Tablette en portrait : le header à trois colonnes devient serré bien avant 820px sur les langues longues. On laisse la nav passer à la ligne plus tôt. */ @media (min-width: 821px) and (max-width: 960px) { :root[data-version="premium"] .primary-nav a { padding-inline: 0.6rem; } } /* ---------------------------------------------------------------------------- * 2. MISE EN SCÈNE AU DÉFILEMENT — CSS pur * `animation-timeline: view()` lie la progression d'une animation à l'entrée de * l'élément dans la fenêtre. Aucun script, aucun IntersectionObserver, aucun * coût sur le fil principal. Là où la propriété n'existe pas, le sélecteur * @supports n'est jamais appliqué et les éléments sont affichés d'emblée. * -------------------------------------------------------------------------- */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { @keyframes mc-reveal { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } } :root[data-version="premium"] .feature-card, :root[data-version="premium"] .section-heading, :root[data-version="premium"] .webgpu-callout, :root[data-version="premium"] .source-card { animation: mc-reveal linear both; animation-timeline: view(); animation-range: entry 8% cover 26%; } /* Le header se densifie une fois la page défilée : la barre reprend de la place au repos, en rend au moment de la lecture. */ @keyframes mc-header-condense { to { background: rgba(7, 11, 18, 0.94); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.34); } } :root[data-version="premium"] .site-header { animation: mc-header-condense linear both; animation-timeline: scroll(); animation-range: 0 220px; } } } /* ---------------------------------------------------------------------------- * 3. RELIEF AU SURVOL * Uniquement sur pointeur fin : sur tactile, un état de survol reste collé * après le tap et donne une carte « allumée » que rien n'éteint. * -------------------------------------------------------------------------- */ @media (hover: hover) and (pointer: fine) { :root[data-version="premium"] .feature-card, :root[data-version="premium"] .source-card { transition: transform 220ms var(--mc-ease), border-color 220ms var(--mc-ease), box-shadow 220ms var(--mc-ease); } :root[data-version="premium"] .feature-card:hover, :root[data-version="premium"] .source-card:hover { transform: translateY(calc(var(--mc-lift) * -1)); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: var(--shadow); } :root[data-version="premium"] .button { transition: transform 160ms var(--mc-ease); } :root[data-version="premium"] .button:hover { transform: translateY(-2px); } :root[data-version="premium"] .button:active { transform: none; } } /* ---------------------------------------------------------------------------- * 4. AFFINAGE TYPOGRAPHIQUE * Le dégradé sur le titre est décoratif : `color` reste déclarée en repli, donc * un navigateur sans background-clip:text affiche un titre plein, lisible. * -------------------------------------------------------------------------- */ @supports (background-clip: text) or (-webkit-background-clip: text) { :root[data-version="premium"] .hero h1 { background: linear-gradient(168deg, var(--text) 34%, var(--accent) 108%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Un dégradé sur du texte n'est pas mesurable par les outils de contraste et disparaît en couleurs forcées : on rend la couleur pleine dans ces cas. */ @media (forced-colors: active) { :root[data-version="premium"] .hero h1 { background: none; color: CanvasText; } } } :root[data-version="premium"][data-contrast="aaa"] .hero h1 { background: none; color: var(--text); } :root[data-version="premium"] .card-index { letter-spacing: 0.18em; } /* ---------------------------------------------------------------------------- * 5. GARDES * Le visiteur qui demande moins de transparence, moins de mouvement ou du * contraste renforcé obtient la version sobre du Premium — pas un basculement * vers une autre version : il garde sa mise en page et ses repères. * -------------------------------------------------------------------------- */ @media (prefers-reduced-transparency: reduce) { :root[data-version="premium"] .hero, :root[data-version="premium"] .feature-card, :root[data-version="premium"] .webgpu-callout { background-image: none; background-color: var(--surface-strong); backdrop-filter: none; } } :root[data-version="premium"][data-contrast="aaa"] .hero { background-image: none; }