/* ========================================================================== TAYEBOOKS — Jetons de design · direction « marchande » (v2) -------------------------------------------------------------------------- SOURCE DE VÉRITÉ UNIQUE. Aucun autre fichier CSS ne contient de couleur, d'espacement, de taille ou de rayon en dur. §7 à §10 PHILOSOPHIE — relevée et mesurée sur une librairie en ligne de référence, puis validée : l'interface disparaît pour que seules les COUVERTURES et les PRIX aient du poids visuel. Concrètement : · fond blanc, texte quasi noir, aucune texture · une seule famille de police, sans empattement, taille maximale 25px · couvertures à angles vifs, SANS ombre ni effet de relief · 20px entre deux couvertures — de la densité, pas de la respiration · la couleur est un SIGNAL (prix barré, promo, lien), jamais un décor · pas de hero : les livres commencent immédiatement Ce qui reste propre à TAYEBOOKS : le bleu encre et l'ocre. Le motif de mise en page est commun à tout le commerce en ligne ; l'identité ne s'emprunte pas. Points de rupture (CSS n'accepte pas de variable en media query) : 1100px · 5 → 4 couvertures par rangée 860px · 4 → 3 620px · rangées défilables, ~2,5 couvertures visibles ========================================================================== */ :root { /* ------------------------------------------------------------------------ 1. PALETTE ------------------------------------------------------------------------ */ --tb-white: #FFFFFF; /* Fond de page */ --tb-surface: #F7F8F8; /* Puces de filtre, zones neutres */ --tb-surface-2: #EAEDED; /* Sélecteur de rayon, champs */ --tb-ink: #0F1111; /* Texte principal, prix */ --tb-grey: #565959; /* Auteur, format, métadonnées */ --tb-grey-2: #767676; /* Texte tertiaire */ --tb-line: #D5D9D9; /* Filets et bordures */ --tb-line-soft: #E7E9E9; --tb-band: #16324F; /* Bandeau principal — bleu encre TAYEBOOKS */ --tb-band-2: #1E4468; /* Bandeau secondaire */ --tb-band-3: #0E2439; /* Bas de page */ --tb-on-band: #FFFFFF; --tb-on-band-2: rgba(255, 255, 255, 0.82); --tb-rule-invert: rgba(255, 255, 255, 0.16); --tb-ocre: #C8842B; /* Bouton de recherche, compteur panier */ --tb-ocre-dark: #A86A18; --tb-ocre-light: #F3B34A; /* Lien « Promotions » sur bandeau foncé */ --tb-link: #14507D; /* Titres de livres et liens */ --tb-deal: #B0341F; /* Prix promotionnel, badge promo */ --tb-success: #2F6B4F; /* En stock */ --tb-warning: #8A6318; --tb-black: #000000; /* Impression uniquement */ /* ------------------------------------------------------------------------ 2. ALIAS SÉMANTIQUES — ce que les composants utilisent ------------------------------------------------------------------------ */ --color-background: var(--tb-white); --color-surface: var(--tb-surface); --color-surface-alt: var(--tb-surface-2); --color-text: var(--tb-ink); --color-text-soft: var(--tb-grey); --color-text-muted: var(--tb-grey-2); --color-text-invert: var(--tb-on-band); --color-text-invert-muted: var(--tb-on-band-2); --color-border: var(--tb-line); --color-border-soft: var(--tb-line-soft); --color-primary: var(--tb-band); --color-primary-hover: var(--tb-band-2); --color-accent: var(--tb-ocre); --color-accent-hover: var(--tb-ocre-dark); --color-accent-on-dark: var(--tb-ocre-light); --color-link: var(--tb-link); --color-deal: var(--tb-deal); --color-success: var(--tb-success); --color-warning: var(--tb-warning); --color-error: var(--tb-deal); --color-focus: var(--tb-ocre); --color-selection: #FDF0DC; --color-backdrop: rgb(15 17 17 / 55%); --print-bg: var(--tb-white); --print-ink: var(--tb-black); /* ------------------------------------------------------------------------ 3. TYPOGRAPHIE Une seule famille, sans empattement. Le caractère de la page vient des couvertures, pas du texte. ------------------------------------------------------------------------ */ --font-ui: Arial, "Helvetica Neue", Helvetica, system-ui, -apple-system, sans-serif; --font-arabic: "IBM Plex Sans Arabic", system-ui, "Segoe UI", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* Échelle courte et basse : le plus grand texte de la page fait 25px. */ --fs-zone: 1.5625rem; /* 25px — titre de zone, le maximum */ --fs-page: 1.375rem; /* 22px — titre de page (boutique, catégorie) */ --fs-section: 1.125rem; /* 18px — titre de section isolée */ --fs-row: 0.875rem; /* 14px — titre de rangée, en gras */ --fs-body: 0.875rem; /* 14px */ --fs-title: 0.8125rem; /* 13px — titre d'un livre en rangée */ --fs-meta: 0.75rem; /* 12px — auteur, format, mentions */ --fs-price: 1rem; /* 16px — prix en rangée */ --fs-price-lg: 1.75rem; /* 28px — prix sur la fiche produit */ --fs-input: 0.9375rem; /* 15px minimum, sinon iOS zoome au focus. §52 */ --fs-button: 0.875rem; --fw-regular: 400; --fw-bold: 700; --lh-tight: 1.3; --lh-body: 1.4; --lh-relaxed: 1.6; /* ------------------------------------------------------------------------ 4. ESPACEMENT — base 4, resserrée ------------------------------------------------------------------------ */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px — l'écart entre deux couvertures */ --space-6: 1.5rem; /* 24px */ --space-7: 2rem; /* 32px */ --space-8: 2.75rem; /* 44px */ --space-9: 3.5rem; /* 56px */ --gutter: 1.125rem; /* 18px de marge latérale */ --grid-gap: 1.25rem; /* 20px — mesuré sur la référence */ --page-max: 93.75rem; /* 1500px */ --content-max: 46rem; --wide-max: 75rem; --row-gap: 0.75rem; --zone-gap: 1.375rem; --cover-height: 15rem; /* 240px — hauteur d'une rangée sur desktop */ /* Rythme des sections : court. Ce n'est pas une revue. */ --space-section: var(--space-7); /* ------------------------------------------------------------------------ 5. RAYONS — quasi nuls. Seules les puces de filtre sont arrondies. ------------------------------------------------------------------------ */ --radius-sm: 0; --radius-md: 2px; --radius-lg: 4px; /* champ de recherche, boutons */ --radius-pill: 16px; /* puces de filtre */ /* ------------------------------------------------------------------------ 6. OMBRES Presque absentes : la référence n'en met aucune sur les couvertures. Une couverture posée à plat se lit plus vite qu'un objet en relief, et la rangée reste calme. ------------------------------------------------------------------------ */ --shadow-sm: 0 1px 2px rgba(15, 17, 17, 0.08); --shadow-md: 0 2px 8px rgba(15, 17, 17, 0.12); --shadow-lg: 0 8px 24px rgba(15, 17, 17, 0.18); --shadow-up: 0 -2px 8px rgba(15, 17, 17, 0.08); /* barres collantes basses */ /* ------------------------------------------------------------------------ 7. RATIOS ------------------------------------------------------------------------ */ --ratio-cover: 2 / 3; /* ------------------------------------------------------------------------ 8. MOUVEMENT — presque rien. §71 ------------------------------------------------------------------------ */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 320ms; /* ------------------------------------------------------------------------ 9. COUCHES ------------------------------------------------------------------------ */ --z-base: 1; --z-sticky: 100; --z-header: 200; --z-dropdown: 300; --z-overlay: 400; --z-drawer: 500; --z-modal: 600; --z-toast: 700; /* ------------------------------------------------------------------------ 10. ACCESSIBILITÉ ------------------------------------------------------------------------ */ --tab-bar-h: 3.5rem; /* hauteur de la barre d'onglets mobile */ --tap-target: 44px; --focus-ring: 2px; --focus-offset: 2px; } /* ========================================================================== ARABE / RTL Seul ce qui dépend réellement de l'écriture est redéfini. §5, §70 ========================================================================== */ :root:dir(rtl), .tb--ar { --font-ui: var(--font-arabic); --font-mono: var(--font-arabic); --lh-tight: 1.45; --lh-body: 1.7; --lh-relaxed: 1.85; /* L'arabe demande un peu plus de corps à taille perçue égale. */ --fs-title: 0.875rem; --fs-meta: 0.8125rem; } /* ========================================================================== CONTRASTE RENFORCÉ Les filets sont le seul élément réellement peu contrasté du système. ========================================================================== */ @media (prefers-contrast: more) { :root { --tb-line: #8C9091; --tb-line-soft: #A9ADAE; --tb-grey-2: var(--tb-grey); } }