/* Polices incrustees dans le site : aucun appel a un service exterieur, ni Google Fonts ni autre. Fichiers dans polices/, sous-ensemble francais, 21 ko par graisse au lieu de 260. Licence OFL a cote des fichiers. Alegreya Sans, de Huerta Tipografica, retenue le 3 aout 2026 pour le texte courant. Son OFL ne declare aucun nom de fonte reserve, le nom d'origine peut donc rester apres sous-ensemble. Petit oeil : elle se compose un cran plus grand que la moyenne, d'ou le corps de 1.18rem sur le corps de texte. ?v=2 : les fichiers ont ete repris le 4 aout 2026 pour y ajouter le glyphe de l'espace fine insecable, U+202F, que la police d'origine n'avait pas. Le numero force le navigateur a recharger au lieu de garder l'ancien fichier en cache. A incrementer a chaque reprise des polices. */ @font-face { font-family: "Alegreya Sans"; src: url(../polices/alegreya-sans-regular.woff2?v=2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Alegreya Sans"; src: url(../polices/alegreya-sans-italic.woff2?v=2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Alegreya Sans"; src: url(../polices/alegreya-sans-bold.woff2?v=2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Alegreya Sans"; src: url(../polices/alegreya-sans-bold-italic.woff2?v=2) format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } /* Feuille de style du site refondu Editions Les Asclepiades, 3 aout 2026. Ecrite a la main. Aucune dependance, aucun framework, aucun appel a un service exterieur. Aucune carte arrondie, aucun degrade, aucune ombre posee partout, aucun violet : contrainte posee en D12. Parti pris, arrete le 3 aout 2026 : tout en Alegreya Sans, colonne de texte etroite, filets doubles, une seule couleur froide, celle du bleu de la couverture des romans. Sans le contraste serif contre sans, la hierarchie vient du corps, des vraies petites capitales et des filets. */ :root { --papier: #ffffff; --papier-creux: #f2f1ee; --encre: #14161c; --encre-douce: #4e535e; --filet: #14161c; --filet-clair: #cfd0cf; --accent: #1c3c66; --accent-clair: #e6ecf3; --sans: "Alegreya Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* Mesure unique de la page : en-tete, contenu, pied. Elle s'elargit sur grand ecran, et le corps du texte grandit avec elle : la longueur de ligne reste ainsi entre 70 et 78 caracteres, la fourchette ou l'oeil ne se perd pas en fin de ligne. Voir les deux media queries plus bas. */ --mesure: 44rem; --corps: 1.18rem; } * { box-sizing: border-box; } html { font-size: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--papier); color: var(--encre); font-family: var(--sans); font-size: var(--corps); line-height: 1.6; } /* Tout est en sans serif. La hierarchie se joue sur le corps, la graisse, un titre legerement serre, et l'italique sur le chapeau et la signature. */ h1 { letter-spacing: -0.005em; } .avant .titre, .livre h2 { letter-spacing: -0.003em; } .chapeau, .signature { font-style: italic; } /* Titres d'ouvrages et de periodiques : italique, usage francais. Dans un passage deja en italique, citation de presse ou chapeau, le titre repasse en romain, sans quoi il ne se distingue plus de rien. */ blockquote em, .chapeau em, .signature em, .auteurs em, h3 em, em em { font-style: normal; } a { color: var(--accent); text-underline-offset: 2px; } a:hover { color: var(--encre); } /* Navigation au clavier : le cadre de focus doit rester visible et lisible sur les deux fonds de la page. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .evitement { position: absolute; left: -9999px; } .evitement:focus { left: 0.5rem; top: 0.5rem; z-index: 10; background: var(--encre); color: #fff; padding: 0.5rem 0.75rem; text-decoration: none; } /* En-tete : marque centree entre deux filets */ .tete { border-bottom: 3px double var(--filet); padding: 2rem 1.5rem 0; text-align: center; } .tete-corps { max-width: var(--mesure); margin: 0 auto; } .marque { margin: 0; } .marque a { display: inline-block; color: var(--encre); text-decoration: none; } .marque a:hover { color: var(--accent); } /* Le logo est le nom compose en Lucida Handwriting, converti en courbes. Pose en masque, il prend la couleur du texte : un seul fichier pour les deux directions visuelles. */ .marque-logo { display: block; width: 23rem; max-width: 88vw; aspect-ratio: 2779 / 268; background-color: currentColor; } @supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) { .marque-logo { /* logo-debut, engendre par scripts/logo-incorporer.py */ --logo: url("data:image/svg+xml,"); /* logo-fin */ -webkit-mask: var(--logo) no-repeat center / contain; mask: var(--logo) no-repeat center / contain; } .marque-logo .repli { position: absolute; left: -9999px; } } .marque-logo .repli { font-size: 1.3rem; font-variant-caps: all-small-caps; letter-spacing: 0.2em; } .signature { margin: 0.5rem 0 0; font-size: 1.02rem; font-style: italic; color: var(--encre-douce); } .navigation { max-width: var(--mesure); margin: 1.5rem auto 0; border-top: 1px solid var(--filet-clair); } .navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.15rem; } .navigation a { display: inline-block; padding: 0.7rem 0; color: var(--encre); text-decoration: none; font-size: 1.06rem; font-variant-caps: all-small-caps; letter-spacing: 0.04em; white-space: nowrap; } .navigation a:hover { color: var(--accent); } .navigation a[aria-current="page"] { color: var(--accent); } /* Structure */ main { max-width: var(--mesure); margin: 0 auto; padding: 3rem 1.5rem 4.5rem; } h1 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.2; font-weight: 400; margin: 0 0 1rem; letter-spacing: 0.01em; } h2 { font-size: 1.4rem; font-weight: 400; font-variant-caps: all-small-caps; letter-spacing: 0.06em; margin: 3rem 0 1rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--filet-clair); } h3 { font-size: 1rem; font-style: italic; font-weight: 400; margin: 1.75rem 0 0.4rem; } p { margin: 0 0 1.1rem; } .chapeau { font-size: 1.15rem; font-style: italic; line-height: 1.6; margin-bottom: 2rem; } /* Accueil, mise en avant : liste verticale, pas de grille de cartes */ .avant { list-style: none; margin: 2rem 0 0; padding: 0; } .avant li { display: grid; grid-template-columns: 6rem 1fr; gap: 1.5rem; align-items: start; padding: 1.5rem 0; border-top: 1px solid var(--filet-clair); } .avant li:last-child { border-bottom: 1px solid var(--filet-clair); } /* Le filet du premier element doublerait celui de l'intertitre juste au-dessus. */ .avant li:first-child, .catalogue > li:first-child .livre { border-top: 0; padding-top: 0.25rem; } .avant img { width: 100%; height: auto; border: 1px solid var(--filet-clair); } .avant .titre { font-size: 1.15rem; margin: 0 0 0.2rem; } .avant .titre a { color: var(--encre); text-decoration: none; } .avant .titre a:hover { color: var(--accent); text-decoration: underline; } .avant .auteurs { margin: 0 0 0.4rem; font-size: 0.9rem; font-style: italic; color: var(--encre-douce); } .avant .prix { margin: 0; font-size: 0.9rem; color: var(--encre-douce); } .avant .fiche-courte { margin: 0 0 0.6rem; font-size: 0.95rem; color: var(--encre-douce); font-variant-numeric: lining-nums; } .avant blockquote { margin: 0; font-size: 1rem; font-style: italic; color: var(--encre); } .avant blockquote .source { display: block; font-style: normal; font-size: 0.88rem; color: var(--encre-douce); } .avant .vignette { display: block; } /* Rubriques : simple liste de renvois, sans encadre */ .rubriques { list-style: none; margin: 1.5rem 0 0; padding: 0; columns: 2; column-gap: 3rem; } .rubriques li { break-inside: avoid; padding: 0.6rem 0; border-bottom: 1px solid var(--filet-clair); } .rubriques a { text-decoration: none; display: block; } .rubriques .nom { display: block; font-size: 1.05rem; color: var(--encre); } .rubriques a:hover .nom { color: var(--accent); } .rubriques .compte { font-size: 0.82rem; font-style: italic; color: var(--encre-douce); } /* Liste de livres d'une rubrique */ .catalogue { list-style: none; margin: 2rem 0 0; padding: 0; } .livre { display: grid; grid-template-columns: 7rem 1fr; gap: 1.75rem; align-items: start; padding: 1.75rem 0; border-top: 1px solid var(--filet-clair); } .catalogue > li:last-child .livre, .catalogue > .livre:last-child { border-bottom: 1px solid var(--filet-clair); } .livre img { width: 100%; height: auto; border: 1px solid var(--filet-clair); } .livre h2 { font-size: 1.15rem; font-variant-caps: normal; text-transform: none; letter-spacing: -0.003em; border: 0; padding: 0; margin: 0 0 0.3rem; line-height: 1.3; } .livre h2 a { color: var(--encre); text-decoration: none; } .livre h2 a:hover { color: var(--accent); text-decoration: underline; } .livre .auteurs { font-size: 0.9rem; font-style: italic; color: var(--encre-douce); margin: 0 0 0.5rem; } .livre .fiche-courte { font-size: 0.95rem; color: var(--encre-douce); margin: 0; font-variant-numeric: lining-nums; } .prix { font-variant-numeric: lining-nums tabular-nums; } .indispo { display: inline-block; font-size: 0.92rem; font-variant-caps: all-small-caps; letter-spacing: 0.05em; color: var(--encre-douce); border-bottom: 1px solid var(--filet-clair); } /* Fiche de livre. Quatre blocs dans le HTML, dans l'ordre ou on veut les lire sur telephone : le titre, la couverture avec les donnees du livre, le texte, la commande. Sur telephone et sur ecran moyen, ils s'empilent dans cet ordre. Au-dela de 1 400 pixels, la page passe a deux colonnes : le texte a gauche, la couverture et la commande a droite, cette derniere restant a l'ecran pendant la lecture. Le seuil est haut exprès : plus tot, la colonne de texte tomberait sous cinquante caracteres par ligne, c'est-a-dire illisible. */ /* La fiche est une grille a une colonne sur telephone. Le bloc lateral se dissout avec display: contents, ce qui permet de placer la couverture et la commande independamment : couverture apres le titre, commande apres le texte, et non l'inverse. */ .fiche { display: grid; grid-template-columns: 1fr; } /* Les deux conteneurs se dissolvent sur les petits ecrans : la grille place alors chaque morceau ou il doit etre lu. Ils reprennent corps sur grand ecran, ou ils forment les deux vraies colonnes. */ .fiche-principal, .fiche-cote { display: contents; } /* Ordre de lecture sur telephone : le titre, la couverture pour reconnaitre le livre, le texte que la lectrice est venue lire, puis les donnees de reference et la commande. Parution, pages et ISBN ne decident de rien : les mettre avant le texte le repoussait de 200 pixels. */ .fiche-titre { grid-row: 1; } .fiche-visuel { grid-row: 2; } .fiche-corps { grid-row: 3; } .fiche-cote .technique { grid-row: 4; margin-top: 2rem; } .fiche-cote .commande { grid-row: 5; } .fiche-titre h1 { margin-bottom: 0.4rem; } /* Le complement du titre, quand la BnF en atteste un. Il se lit comme la suite du titre et non comme une accroche : meme graisse, meme couleur d'encre, une taille en dessous. Le romain lui reste, l'italique etant deja pris par la ligne des auteurs juste dessous. Sur les quatre fiches qui en portent un, le plus long fait 103 caracteres : la mesure est bornee pour qu'il ne parte pas en pave. */ .fiche-titre .sous-titre { font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.3; font-weight: 400; color: var(--encre-douce); max-width: 34rem; margin: 0 0 0.9rem; } .fiche .auteurs { font-size: 1.05rem; font-style: italic; color: var(--encre-douce); margin: 0 0 1.5rem; } /* Sur telephone, la couverture est le seul visuel de la page : elle est centree et occupe 62 pour cent de la largeur, sans jamais depasser la definition reelle de son fichier, faute de quoi elle deviendrait molle. La pleine largeur a ete essayee et ecartee : elle mange 80 pour cent du premier ecran et repousse sous le pli le texte que la lectrice est venue lire. */ .fiche-visuel { margin-bottom: 2rem; text-align: center; } .fiche-visuel img { width: min(62vw, var(--couverture-reelle, 22rem)); height: auto; border: 1px solid var(--filet-clair); } .technique { margin: 1.25rem 0 0; padding: 0; font-size: 0.95rem; border-top: 1px solid var(--filet-clair); max-width: 26rem; } .technique div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px solid var(--filet-clair); } .technique .cle { font-variant-caps: all-small-caps; letter-spacing: 0.05em; font-size: 0.92rem; color: var(--encre-douce); } .technique .valeur { font-variant-numeric: lining-nums tabular-nums; } .presse { margin: 0; padding: 0; } .presse blockquote { margin: 0 0 1.75rem; padding: 0; font-size: 1.05rem; font-style: italic; text-indent: -0.4em; } .presse .source { display: block; margin-top: 0.35rem; font-style: normal; font-size: 0.9rem; letter-spacing: 0.04em; color: var(--encre-douce); } /* Reproduction d'un article de presse, dans presse/. Ajoute le 17 aout 2026. Le filet a gauche court sur toute la longueur du texte : il dit au lecteur que ce qu'il lit est la voix d'un tiers, pas celle de la maison. Le retrait se resserre en petit ecran pour ne pas manger la mesure. */ .article-presse { border-left: 2px solid var(--filet-clair); padding-left: clamp(0.9rem, 3.5vw, 1.6rem); } .article-presse h1 { margin-top: 0; } .provenance { margin: 2.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--filet-clair); font-size: 0.9rem; color: var(--encre-douce); } /* Lien vers la reproduction integrale, sous les citations d'un titre. */ .lien-article { margin: 0.25rem 0 0; font-size: 0.95rem; } .commande { margin: 3rem 0 0; padding: 1.75rem 0 0; border-top: 3px double var(--filet); } .commande .boutons { display: flex; flex-wrap: wrap; gap: 0.6rem; } .commande h2 { margin-top: 0; border: 0; padding: 0; } .commande .tarif { font-variant-numeric: lining-nums; } .commande .tarif { font-size: 1.3rem; margin: 0 0 1rem; } /* Le prix nomme l'edition dont il est le prix, ajoute le 13 aout 2026. La precision suit le nombre sur la meme ligne, au corps du texte courant : elle doit se lire, sans disputer au nombre le premier regard. Sans elle, 16,00 euros semblait valoir aussi pour l'ePub a 3,99. */ /* L'objet du prix se detache du montant partout, et pas seulement dans le bloc de commande d'une fiche. Le selecteur portait .commande en tete : sur l'accueil, sur les quatre rubriques et sur les quinze pages d'auteur, le montant et son objet se collaient, 16,00 EURl'edition imprimee. Le proprietaire l'a signale le 20 aout 2026. */ .prix-objet { font-size: 0.98rem; color: var(--encre-douce); margin-left: 0.45rem; } .revendeurs { list-style: none; margin: 0 0 1.25rem; padding: 0; font-size: 0.98rem; } .revendeurs li { padding: 0.45rem 0; border-bottom: 1px solid var(--filet-clair); } .revendeurs li:last-child { border-bottom: 0; } /* La classe .ou est retiree le 13 aout 2026. Elle poussait les boutiques de la version numerique sous leur libelle, en petit gris, du temps ou la rangee portait un prix et une mention vague. Depuis que le prix est parti et que les trois boutiques sont nommees et cliquables, elles tiennent sur la ligne du libelle, au corps du texte : c'etaient les seuls mots cliquables du bloc, et ils en etaient les plus petits et les plus pales. */ /* Lien de suite d'un bloc lateral. Il remplace le bouton plein, qui menait a une page generale deja presente dans le menu. */ .suite-cote { margin: 1.25rem 0 0; font-size: 0.93rem; } .bouton { display: inline-block; background: var(--accent); color: #fff; padding: 0.55rem 1.5rem; text-decoration: none; font-size: 1.02rem; font-variant-caps: all-small-caps; letter-spacing: 0.06em; } .bouton:hover { background: var(--encre); } /* Marqueur de point non tranche, visible en maquette seulement */ .a-trancher { display: block; margin: 1.25rem 0; padding: 0.7rem 0.9rem; background: var(--accent-clair); border-left: 3px solid var(--accent); font-size: 0.95rem; font-style: normal; color: #16304f; } .a-trancher strong { font-variant-caps: all-small-caps; letter-spacing: 0.05em; font-size: 0.95rem; } /* Pied */ .pied { border-top: 1px solid var(--filet-clair); padding: 2.5rem 1.5rem 3.5rem; font-size: 0.95rem; } .pied-corps { max-width: var(--mesure); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 2rem 3rem; align-items: start; } .pied h2 { font-size: 0.95rem; font-variant-caps: all-small-caps; letter-spacing: 0.06em; border: 0; padding: 0; margin: 0 0 0.6rem; color: var(--encre-douce); } .pied ul { list-style: none; margin: 0; padding: 0; } .pied li { margin-bottom: 0.35rem; } .pied p { margin: 0 0 0.9rem; color: var(--encre-douce); } .pied p:last-child { margin-bottom: 0; } /* Bascule de comparaison, retiree avant mise en ligne */ .bascule { position: fixed; right: 0.75rem; bottom: 0.75rem; background: var(--accent); color: #fff; font-size: 0.78rem; padding: 0.5rem 0.7rem; line-height: 1.4; } .bascule a { color: #fff; } .bascule strong { display: block; } /* Grand ecran : la page respire, le texte grandit avec elle. */ /* Tablette : couverture et donnees du livre cote a cote, ce qui evite de pousser le texte tres bas. Le titre reste sur toute la largeur. */ @media (min-width: 34rem) and (max-width: 51.999rem) { .fiche { grid-template-columns: 10rem 1fr; column-gap: 1.75rem; align-items: start; } .fiche-visuel { text-align: left; } .fiche-visuel img { width: 100%; } .fiche-titre { grid-column: 1 / -1; grid-row: 1; } .fiche-visuel { grid-column: 1; grid-row: 2; margin-bottom: 1.5rem; } .fiche-cote .technique { grid-column: 2; grid-row: 2; margin-top: 0; } .fiche-corps { grid-column: 1 / -1; grid-row: 3; } .fiche-cote .commande { grid-column: 1 / -1; grid-row: 4; } .fiche-visuel img { max-width: 100%; } .technique div { grid-template-columns: 7.5rem 1fr; } } @media (min-width: 52rem) { /* Couverture et donnees a droite du titre seulement. Le texte passe sous les deux colonnes et garde donc toute la mesure : c'est ce qui compte, un texte a quarante-six caracteres par ligne ne se lit pas. */ .fiche { grid-template-columns: 1fr 13rem; column-gap: 2.5rem; align-items: start; } .fiche-titre { grid-column: 1; grid-row: 1; } .fiche-cote .technique { grid-column: 1; grid-row: 2; margin-top: 0; } .fiche-visuel { grid-column: 2; grid-row: 1 / span 2; margin-bottom: 0; text-align: left; } .fiche-visuel img { width: 100%; } .fiche-corps { grid-column: 1 / -1; grid-row: 3; margin-top: 2rem; } .fiche-cote .commande { grid-column: 1 / -1; grid-row: 4; } } @media (min-width: 68rem) { :root { --mesure: 50rem; --corps: 1.26rem; } h2 { font-size: 1.5rem; } .fiche-tete { grid-template-columns: 13rem 1fr; gap: 2.5rem; } .livre { grid-template-columns: 8rem 1fr; gap: 1.75rem; } .avant li { grid-template-columns: 7rem 1fr; } } @media (min-width: 84rem) { :root { --mesure: 54rem; --corps: 1.34rem; } h2 { font-size: 1.6rem; } } /* Deux colonnes sur la fiche de livre, a partir de 1 400 pixels. La page s'elargit a cette occasion, sinon la colonne de texte serait trop mince. */ @media (min-width: 88rem) { :root { --mesure: 66rem; } /* Les deux blocs de droite chevauchent les lignes de gauche : sans ce chevauchement, la premiere ligne prendrait la hauteur de la couverture et laisserait un trou sous le titre. */ /* Deux colonnes, deux conteneurs, aucune ligne de grille a partager : c'est ce qui evite le blanc entre le titre et le texte. Un element qui chevauche deux lignes gonfle la premiere, quoi qu'on lui demande. */ .fiche { grid-template-columns: 1fr 20rem; column-gap: 3.5rem; align-items: start; } .fiche-principal { display: block; grid-column: 1; } .fiche-cote { display: block; grid-column: 2; position: sticky; top: 1.5rem; font-size: 0.97rem; line-height: 1.5; } .fiche-cote .commande, .fiche-cote .technique { grid-column: auto; grid-row: auto; } .fiche-cote .technique { margin-top: 1.25rem; } .fiche-corps { margin-top: 0; } .fiche-cote .commande { margin-top: 1.75rem; } .fiche-visuel img { max-width: 100%; } .technique { max-width: none; } .technique div { grid-template-columns: 7.5rem 1fr; } .fiche-cote .commande { padding-top: 1.25rem; border-top-width: 1px; border-top-style: solid; } .fiche-cote .commande h2 { font-size: 1.3rem; } } /* Telephone */ @media (max-width: 40rem) { main { padding: 1.5rem 1.1rem 3rem; } /* En-tete resserre : sur un ecran de 700 pixels de haut, chaque dizaine de pixels gagnee ici, c'est autant de texte visible sans defiler. */ .tete { padding: 1rem 1.1rem 0; } .signature { margin-top: 0.35rem; line-height: 1.4; } .navigation { margin-top: 0.9rem; } .navigation a { padding: 0.45rem 0; } /* Quinze pixels manquaient pour que la premiere couverture passe au-dessus du pli sur un ecran de 390 par 700. Ils sont pris ici. */ h1 { margin-bottom: 0.7rem; } .chapeau { margin-bottom: 1.25rem; } .preuves { gap: 0.6rem 2rem; padding: 0.85rem 0; margin: 1rem 0 1.5rem; } .marque { letter-spacing: 0.18em; font-size: 1rem; } .fiche-tete { grid-template-columns: 1fr; gap: 1.25rem; } /* la couverture n'est plus bridee ici : c'est ce plafond qui l'empechait d'etre centree */ .avant li { grid-template-columns: 4.5rem 1fr; gap: 1rem; } .livre { grid-template-columns: 5.5rem 1fr; gap: 1rem; } .rubriques { columns: 1; } /* Deux colonnes gardees sur telephone : en une seule, les cinq lignes du tableau prenaient 120 pixels de plus, autant de texte repousse. */ .technique div { grid-template-columns: 6.5rem 1fr; gap: 0.75rem; } .navigation ul { gap: 0 1.1rem; } } /* Fil d'Ariane, en tete des fiches de livre */ .ariane { font-size: 0.9rem; font-variant-caps: all-small-caps; letter-spacing: 0.04em; color: var(--encre-douce); margin-bottom: 1.5rem; } .ariane a { color: var(--encre-douce); text-decoration: none; } .ariane a:hover { color: var(--accent); text-decoration: underline; } /* Autres titres de la meme rubrique, en pied de fiche */ .voisins { margin-top: 3rem; } .voisins ul { list-style: none; margin: 0 0 1rem; padding: 0; } .voisins li { padding: 0.6rem 0; border-bottom: 1px solid var(--filet-clair); } .voisins li a { text-decoration: none; } .voisins li a:hover { text-decoration: underline; } .voisins .auteurs { display: block; font-size: 0.9rem; font-style: italic; color: var(--encre-douce); } /* Bandeau du mode apercu. Ne s'affiche que sur la maquette de travail. */ .apercu { margin: 0; padding: 0.6rem 1.5rem; background: var(--encre); color: #fff; font-size: 0.9rem; text-align: center; } /* Impression : ni navigation ni bandeau, et les adresses des liens externes apparaissent, sinon un lien imprime ne mene nulle part. */ @media print { .navigation, .apercu, .ariane, .voisins, .bouton { display: none; } body { font-size: 11pt; line-height: 1.45; } main { max-width: none; padding: 0; } .tete { border-bottom: 1px solid #000; } a { color: #000; text-decoration: underline; } main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; } .a-trancher { border: 1px solid #000; background: none; } h2 { break-after: avoid; } .livre, .avant li, blockquote { break-inside: avoid; } } /* Liste des auteurs */ .auteurs-liste { list-style: none; margin: 2rem 0 0; padding: 0; } .auteurs-liste li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--filet-clair); } .auteurs-liste a { text-decoration: none; font-size: 1.1rem; } .auteurs-liste a:hover { text-decoration: underline; } .auteurs-liste .compte { font-size: 0.9rem; font-style: italic; color: var(--encre-douce); white-space: nowrap; } /* Notices biographiques, sur les pages d'auteur */ .notice { padding: 1rem 0 0.25rem; border-top: 1px solid var(--filet-clair); } .notice .source { font-size: 0.9rem; font-style: italic; color: var(--encre-douce); } /* Quand une fiche donne une presentation propre a son livre, cette phrase l'annonce avant les notices, pour que le lecteur sache pourquoi il en voit deux. Elle remplace le marqueur de travail retire le 24 aout 2026. */ .chapeau-notice { margin: 0 0 0.5rem; font-size: 0.95rem; color: var(--encre-douce); } /* Revue de presse */ .presse-titre { margin-bottom: 2.5rem; } .presse-titre h2 a { color: var(--encre); text-decoration: none; } .presse-titre h2 a:hover { color: var(--accent); text-decoration: underline; } /* Sommaire et extrait en PDF, sur la fiche */ .pieces { margin-bottom: 1rem; } .fiche-cote .pieces { margin: 1rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--filet-clair); } /* Mention de format sur un lien de telechargement */ .format { font-size: 0.88em; color: var(--encre-douce); white-space: nowrap; } .tarif-barre { color: var(--encre-douce); } .fiche-titre .etat { margin: -0.75rem 0 1.5rem; } /* --- Accueil : bandeau de preuves ------------------------------------------ Trois faits verifiables, la ou un visiteur qui ne connait pas la maison cherche a savoir a qui il a affaire. Aucune promesse, aucun chiffre gonfle : le nombre de titres, la qualite des auteurs, le compte des citations de presse, qui se verifie en un clic. */ /* Bandeau de preuves. Chaque cellule porte un fait sur une ligne et sa precision sur la suivante, en gris. Le fait est compose plus grand que le texte courant : c'est une affirmation, pas une mention. Aucun cadre, aucune icone, aucune ombre : la mise en valeur tient aux deux filets et au corps. Sur telephone, les trois cellules s'empilent et restent centrees. */ .preuves { list-style: none; margin: 1.25rem 0 2rem; padding: 1rem 0; border-top: 1px solid var(--filet-clair); border-bottom: 1px solid var(--filet-clair); display: grid; gap: 0.8rem 2rem; text-align: center; } .preuves li { line-height: 1.3; } .preuves strong { display: block; font-weight: 400; font-size: 1.12rem; color: var(--encre); } .preuves .detail { display: block; margin-top: 0.1rem; font-size: 0.98rem; color: var(--encre-douce); } .preuves a { text-decoration: none; color: inherit; } .preuves a strong { color: var(--accent); } .preuves a:hover strong { text-decoration: underline; } @media (min-width: 46rem) { .preuves { grid-template-columns: repeat(3, 1fr); padding: 1.5rem 0; gap: 0 2.5rem; } .preuves strong { font-size: 1.35rem; } } /* --- Accueil : rubriques illustrees --------------------------------------- */ .rubriques-illustrees { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 2rem 1.5rem; } .rubriques-illustrees a { display: block; text-decoration: none; color: var(--encre); } .rubriques-illustrees img { width: 100%; height: auto; border: 1px solid var(--filet-clair); margin-bottom: 0.6rem; } .rubriques-illustrees .nom { display: block; font-size: 1.05rem; } .rubriques-illustrees a:hover .nom { color: var(--accent); text-decoration: underline; } .rubriques-illustrees .compte { display: block; font-size: 0.9rem; font-style: italic; color: var(--encre-douce); } /* --- Accueil : vitrine de toutes les couvertures -------------------------- */ /* Trois colonnes sur telephone : a deux, les vingt couvertures faisaient dix ecrans de haut, ce qui transforme la vitrine en corvee. */ .vitrine { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr)); gap: 1.5rem 1rem; } .vitrine .detail { font-size: 0.85rem; } @media (min-width: 34rem) { .vitrine { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 2rem 1.5rem; } .vitrine .detail { font-size: 0.9rem; } } .vitrine a { display: block; text-decoration: none; color: var(--encre); } .vitrine img { width: 100%; height: auto; border: 1px solid var(--filet-clair); margin-bottom: 0.5rem; } .vitrine .titre { display: block; font-size: 1rem; line-height: 1.3; } .vitrine a:hover .titre { color: var(--accent); text-decoration: underline; } .vitrine .detail { display: block; margin-top: 0.25rem; font-size: 0.9rem; color: var(--encre-douce); } .suite { margin-top: 2.5rem; font-size: 1rem; } /* Citations de presse sur l'accueil : trois livres, trois organes differents */ .paroles blockquote { margin: 0 0 1.6rem; font-size: 1.05rem; } .paroles .source { margin-top: 0.3rem; } .paroles .source a { text-decoration: none; } .paroles .source a:hover { text-decoration: underline; } @media (min-width: 60rem) { .paroles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .paroles blockquote { margin-bottom: 0; } } /* Les deux calculateurs de la fiche de nutrition. L3.5, lot 2. Un seul endroit du site porte un formulaire : la mise en forme reste volontairement sobre, sans rien qui ressemble a un widget. */ .calculateurs { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--filet-clair); } .calculateurs-intro, .calculateurs-source { font-size: 0.95rem; color: var(--encre-douce); } .calculateurs-source { margin-top: 1.5rem; font-style: italic; } .calculateurs-sans-js { padding: 0.7rem 0.9rem; background: var(--papier-creux); border-left: 3px solid var(--filet-clair); font-size: 0.95rem; } .calculateur, .aliments-recherche, .aliments-quantite { margin: 1.75rem 0; padding: 1.25rem 1.4rem 1.4rem; background: var(--papier-creux); } .calculateur h3, .aliment-choisi h3 { margin-top: 0; font-variant-caps: all-small-caps; letter-spacing: 0.04em; } /* Un champ par ligne : le formulaire se lit de haut en bas, au clavier comme a l'oeil, et la ligne de saisie ne depend pas de la largeur de l'ecran. */ .calculateur .champ, .aliments-recherche .champ, .aliments-quantite .champ { margin: 0 0 1.1rem; padding: 0; border: 0; } .calculateur label, .calculateur legend, .aliments-recherche label, .aliments-quantite label { display: block; padding: 0; font-weight: 600; } .calculateur .unite, .aliments-recherche .unite, .aliments-quantite .unite { display: block; margin: 0.1rem 0 0.35rem; font-size: 0.9rem; color: var(--encre-douce); } .calculateur input[type="text"], .aliments-recherche input[type="text"], .aliments-quantite input[type="text"] { width: 7rem; padding: 0.4rem 0.5rem; border: 1px solid var(--encre-douce); background: var(--papier); font-family: inherit; font-size: 1.02rem; /* Chiffres tabulaires, comme les prix et les ISBN ailleurs sur le site. */ font-variant-numeric: tabular-nums lining-nums; } .calculateur input[aria-invalid="true"], .aliments-recherche input[aria-invalid="true"], .aliments-quantite input[aria-invalid="true"] { border-color: #a3231d; border-width: 2px; } .calculateur .choix { display: inline-block; margin-right: 1.2rem; font-weight: 400; } .calculateur .choix input { margin-right: 0.25rem; } /* Les boites de message et de resultat restent dans le document, vides, pour que leur region aria-live existe dans l'arbre d'accessibilite avant d'etre remplie. Masquer par hidden l'en sortirait, et l'apparition du message ne serait pas annoncee de facon fiable. Vides, elles ne prennent aucune place. */ .calculateur .erreur:empty, .calculateur .resultat:empty, .aliments-recherche .erreur:empty, .aliments-quantite .erreur:empty { display: none; } .calculateur .erreur, .aliments-recherche .erreur, .aliments-quantite .erreur { margin: 0.35rem 0 0; font-size: 0.95rem; color: #8f1e19; } .calculateur .resultat { margin: 1.1rem 0 0; padding: 0.7rem 0.9rem; background: var(--accent-clair); border-left: 3px solid var(--accent); color: #16304f; font-variant-numeric: tabular-nums lining-nums; } /* La table de composition des aliments, sur sa page. L3.5, lot 5. Les deux formulaires reprennent la mise en forme des calculateurs, plus haut : c'est le meme geste, chercher puis saisir une quantite, et deux habillages differents pour la meme chose feraient croire a deux outils. */ .aliments-provenance { font-size: 0.95rem; color: var(--encre-douce); } /* Le champ de recherche est plus large que ceux des calculateurs : on y tape un nom de plat, pas un nombre a trois chiffres. */ #aliment-saisie { width: min(100%, 22rem); font-variant-numeric: normal; } .aliments-sans-js { padding: 0.7rem 0.9rem; background: var(--papier-creux); font-size: 0.95rem; } .aliments-resultats:empty, .aliment-total:empty { display: none; } .aliments-resultats { margin: 1.25rem 0; font-size: 0.95rem; } /* La liste des trouvailles : un bouton par aliment, sur toute la largeur, pour qu'une cible reste atteignable au doigt sur un telephone. */ .aliments-liste { margin: 0.75rem 0 0; padding: 0; list-style: none; max-width: 34rem; border-top: 1px solid var(--filet-clair); } .aliments-liste li { margin: 0; } .aliment-choix { display: block; width: 100%; padding: 0.5rem 0.6rem; border: 0; border-bottom: 1px solid var(--filet-clair); background: transparent; font-family: inherit; font-size: 1rem; text-align: left; color: var(--encre); cursor: pointer; } .aliment-choix:hover { background: var(--papier-creux); } .aliment-choisi { margin: 1.75rem 0 0; padding: 1.25rem 1.4rem; background: var(--papier-creux); } .aliment-choisi h3 { margin-bottom: 0.2rem; } .aliment-unite { margin: 0 0 0.9rem; font-size: 0.95rem; color: var(--encre-douce); } /* Les quatre valeurs se lisent comme la fiche technique d'un livre, meme grille et memes petites capitales. */ .aliment-valeurs { margin: 0; padding: 0; font-size: 0.95rem; border-top: 1px solid var(--filet-clair); max-width: 26rem; } .aliment-valeurs div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px solid var(--filet-clair); } .aliment-valeurs .cle { font-variant-caps: all-small-caps; letter-spacing: 0.05em; font-size: 0.92rem; color: var(--encre-douce); } .aliment-valeurs .valeur { font-variant-numeric: lining-nums tabular-nums; } .aliment-total { margin: 1.25rem 0 0; padding: 0.9rem 1.1rem; background: var(--accent-clair); border-left: 3px solid var(--accent); color: #16304f; } .aliment-total .cle, .aliment-total .valeur { color: inherit; } .aliment-total-titre { margin: 0 0 0.6rem; font-weight: 600; } /* Les menus minceur, sur leur page depuis le 24 aout 2026. L3.5, lot 3. Chaque menu porte une ancre, cible d'une des neuf anciennes adresses conservees. Le renvoi qui les annonce reste sur la fiche du livre, et il sert aussi a la table des aliments : les deux disent la meme chose, un echantillon du livre vit sur une page a lui. */ .renvoi-echantillon { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--filet-clair); } .menus-livre { font-size: 0.95rem; color: var(--encre-douce); } .menus { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--filet-clair); } .menu { margin: 2rem 0; padding-top: 1.25rem; border-top: 1px solid var(--filet-clair); } .menu:first-of-type { border-top: 0; } .menu h2 { margin: 0 0 0.6rem; font-variant-caps: all-small-caps; letter-spacing: 0.04em; } /* Le menu du repas se lit d'un coup d'oeil : liste serree, sans puce, chaque plat sur sa ligne, comme sur la carte imprimee dont il vient. */ .menu-plats { margin: 0 0 1rem; padding: 0.7rem 0.9rem; list-style: none; background: var(--papier-creux); } .menu-plats li { margin: 0; } /* Une ancre visee depuis une redirection ne doit pas coller au bord haut de la fenetre : le titre du menu resterait sous la limite de l'ecran. */ .menu:target { scroll-margin-top: 1.5rem; }