/* ========================================================================== TAYEBOOKS — Socle -------------------------------------------------------------------------- Reset, typographie de base, accessibilité, utilitaires. Aucune valeur brute : tout vient de variables.css. Toute la mise en page utilise des PROPRIÉTÉS LOGIQUES (margin-inline, padding-block, inset-inline, border-inline-start…). C'est ce qui permet à l'arabe de fonctionner sans feuille rtl.css. §5, §70 ========================================================================== */ /* -------------------------------------------------------------------------- 1. Reset -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; /* Compense la hauteur de l'en-tête collant lors d'un saut d'ancre. */ scroll-padding-block-start: var(--space-8); } body { background-color: var(--color-background); color: var(--color-text); font-family: var(--font-ui); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-synthesis-weight: none; /* Filet de sécurité contre le défilement horizontal. §52 `clip` et NON `hidden` : `overflow-x: hidden` transforme en conteneur de défilement, et tout `position: sticky` à l'intérieur se cale alors sur ce conteneur — qui, lui, ne défile pas. Résultat : l'en-tête collant part avec la page. `clip` rogne sans créer de conteneur de défilement, donc sticky continue de fonctionner. Bug reproduit puis corrigé : voir le test « barre collée en haut ». */ overflow-x: clip; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } /* L'usage de `hyphens` casse mal les termes médicaux : on ne coupe pas. */ p, li, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; hyphens: manual; } table { border-collapse: collapse; width: 100%; } ::selection { background-color: var(--color-selection); color: var(--color-text); } /* -------------------------------------------------------------------------- 2. Typographie -------------------------------------------------------------------------- */ /* Hiérarchie courte et basse. Le plus grand texte de tout le site fait 25px, et c'est un titre de zone. Dans une librairie en ligne, la hiérarchie est portée par les couvertures : un titre à 100px volerait l'attention aux livres, qui sont la marchandise. */ h1, h2, h3, h4 { font-family: var(--font-ui); font-weight: var(--fw-bold); line-height: var(--lh-tight); } h1 { font-size: var(--fs-page); } h2 { font-size: var(--fs-zone); } h3 { font-size: var(--fs-row); } h4 { font-size: var(--fs-body); } a { color: inherit; text-decoration: none; } /* Les liens de contenu sont bleus et se soulignent au survol : convention universelle du commerce en ligne, immédiatement comprise. Un lien discret fait joli et coûte des clics. */ p a:not([class]) { color: var(--color-link); } p a:not([class]):hover { text-decoration: underline; } strong, b { font-weight: var(--fw-bold); } small { font-size: var(--fs-meta); } code, kbd, pre { font-family: var(--font-mono); font-size: 0.9em; } /* Chiffres tabulaires pour tout ce qui est prix, pagination, quantité, ISBN. Sans cela les montants « dansent » d'une ligne à l'autre dans une grille. */ .tb-num, .price, .woocommerce-Price-amount, .tb-qty input { font-variant-numeric: tabular-nums; } /* Isolation bidirectionnelle. En arabe, « 2 400,00 دج » se décompose si le nombre n'est pas isolé : le navigateur réordonne les groupes de chiffres. Bug réel, corrigé ici. */ bdi { unicode-bidi: isolate; } /* -------------------------------------------------------------------------- 3. Libellés mono Le vocabulaire visuel des index d'édition scientifique : petites capitales espacées pour les catégories, ISBN, pagination, métadonnées. -------------------------------------------------------------------------- */ /* Métadonnée : format, nombre de pages, mentions. Du texte gris ordinaire, pas des petites capitales espacées — on lit un catalogue, pas une affiche. */ .tb-label { font-size: var(--fs-meta); color: var(--color-text-soft); line-height: var(--lh-body); } /* -------------------------------------------------------------------------- 4. Mise en page -------------------------------------------------------------------------- */ .tb-container { padding-inline: var(--gutter); margin-inline: auto; width: 100%; max-width: var(--page-max); } .tb-section { padding-block: var(--space-section); } .tb-prose { max-width: var(--content-max); } /* Zone de contenu éditable — §93 « le thème ne combat pas Gutenberg ». Une grille à colonnes nommées plutôt qu'un conteneur à largeur fixe : le texte courant reste à une largeur de lecture confortable, tandis qu'un bloc « aligné large » ou « pleine largeur » s'étend réellement. Pourquoi une grille et pas `width: 100vw; margin-inline: calc(50% - 50vw)` : `100vw` inclut la barre de défilement, ce qui provoque un débordement horizontal de ~15 px sur desktop. La grille n'a pas ce défaut, et elle fonctionne telle quelle en RTL. Défaut constaté en recette : sans ces règles, une page d'accueil composée de 20 blocs pleine largeur s'affichait dans une colonne de 736 px. */ .tb-content { display: grid; grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [wide-start] minmax(0, calc((var(--wide-max) - var(--content-max)) / 2)) [content-start] min(var(--content-max), 100% - var(--gutter) * 2) [content-end] minmax(0, calc((var(--wide-max) - var(--content-max)) / 2)) [wide-end] minmax(var(--gutter), 1fr) [full-end]; } .tb-content > * { grid-column: content; min-width: 0; } .tb-content > .alignwide { grid-column: wide; } .tb-content > .alignfull { grid-column: full; } /* Un bloc pleine largeur va bord à bord : sa gouttière est à lui. */ .tb-content > .alignfull:not(.has-background) > :where(p, h1, h2, h3, h4, ul, ol) { padding-inline: var(--gutter); } .tb-content > .alignleft { grid-column: content; float: inline-start; margin-inline-end: var(--space-5); } .tb-content > .alignright { grid-column: content; float: inline-end; margin-inline-start: var(--space-5); } /* Rythme vertical du contenu éditorial. */ .tb-content > * + * { margin-block-start: var(--space-5); } .tb-content > .alignfull + .alignfull { margin-block-start: 0; } .tb-content > :where(h2, h3) { margin-block-start: var(--space-7); } .tb-content figure, .tb-content img { max-inline-size: 100%; } .tb-rule { border: 0; border-block-start: 1px solid var(--color-border); } /* -------------------------------------------------------------------------- 5. Couverture -------------------------------------------------------------------------- Posée à plat : angles vifs, aucune ombre, aucun dos en relief. C'est un changement de direction assumé. Une couverture traitée comme un objet en volume attire l'œil une par une ; une rangée de huit couvertures à plat se balaie d'un seul regard. Quand on vend, c'est le balayage qui compte. -------------------------------------------------------------------------- */ .tb-cover { display: flex; align-items: flex-end; justify-content: flex-start; block-size: var(--cover-height); } .tb-cover img { max-block-size: 100%; max-inline-size: 100%; inline-size: auto; /* `contain` : une couverture n'est jamais rognée ni déformée. §11 */ object-fit: contain; object-position: bottom; } /* Sans couverture : un gabarit lisible plutôt qu'une image générique. */ .tb-cover__blank { display: flex; align-items: center; justify-content: center; aspect-ratio: var(--ratio-cover); block-size: 100%; padding: var(--space-3); background-color: var(--color-surface); border: 1px solid var(--color-border); text-align: center; font-size: var(--fs-meta); color: var(--color-text-soft); } /* -------------------------------------------------------------------------- 6. Accessibilité. §53 -------------------------------------------------------------------------- */ /* Classe attendue par WordPress — ne pas renommer. */ .screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; } .screen-reader-text:focus { clip-path: none; height: auto; width: auto; margin: 0; padding: var(--space-3) var(--space-4); position: fixed; inset-block-start: var(--space-3); inset-inline-start: var(--space-3); z-index: var(--z-toast); background-color: var(--color-primary); color: var(--color-text-invert); font-size: var(--fs-body); font-weight: var(--fw-bold); } /* Focus clavier visible et cohérent. :focus-visible et non :focus — l'anneau n'apparaît pas au clic souris, mais toujours à la navigation au clavier. */ :focus-visible { outline: var(--focus-ring) solid var(--color-focus); outline-offset: var(--focus-offset); } :focus:not(:focus-visible) { outline: none; } /* Agrandissement des zones cliquables sans toucher à la mise en page. Un lien de 16px de haut devient une cible de 42px. §52 Mesuré et vérifié : 42–49px selon le composant. */ .tb-hit { position: relative; } .tb-hit::after { content: ""; position: absolute; inset: -13px -8px; } /* Sur tactile, on donne en plus une hauteur réelle. */ @media (hover: none) and (pointer: coarse) { .tb-hit { display: inline-block; min-block-size: var(--tap-target); display: inline-flex; align-items: center; } } /* Mouvement réduit : on coupe tout, sans casser l'accès au contenu. §71 */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- 7. Utilitaires Volontairement peu nombreux : ce n'est pas un framework utilitaire. -------------------------------------------------------------------------- */ .tb-invert { background-color: var(--color-primary); color: var(--color-text-invert); } .tb-invert .tb-label, .tb-invert .tb-muted { color: var(--color-text-invert-muted); } .tb-muted { color: var(--color-text-muted); } .tb-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } [hidden] { display: none !important; } /* -------------------------------------------------------------------------- 8. Impression Une fiche produit doit pouvoir être imprimée proprement par un libraire. -------------------------------------------------------------------------- */ @media print { .tb-no-print, .tb-header, .tb-footer, .tb-chips { display: none !important; } body { background: var(--print-bg); color: var(--print-ink); font-size: 11pt; } .tb-cover { block-size: auto; } }