/* ========================================================= Site de Thomas Lepeltier — feuille de style Révision : septembre 2026 (adaptation aux téléphones) Plan du fichier : 1. Base 2. Liens 3. En-tête, menu, pied de page 4. Page d'accueil : livres, comptes rendus, articles 5. Page « Qui suis-je » 6. Listes de classement 7. Pages de comptes rendus 8. Pages d'articles 9. PETITS ÉCRANS ← toute l'adaptation mobile est regroupée ici 10. Tablettes et mode paysage 11. Téléphones étroits 12. Pages de livres 13. Pages de livres sur petits écrans 14. Pages de texte suivi (débats, mises au point) 15. Recherche (loupe du menu, page de résultats) 16. Liste des publications 17. Résumés des articles d'astrophysique Principe : les sections 1 à 8 valent pour tous les écrans ; les sections 9 à 11 ne s'activent qu'en dessous de 760 px. Révision de septembre 2026, deuxième passe — modernisation. Ce qui a changé par rapport à la feuille d'origine, et comment revenir en arrière point par point si l'un d'eux vous déplaît : • police Times New Roman -> Charter / Georgia (section 1) • interligne 18 pt (= 1,33) -> 1,65 (section 1) • corps 18 px -> 19 px (section 1) • titres h1 24 px -> 28 px (section 1) • ombres 4px 4px 4px noir -> diffuses, 22 % (sections 3, 4) • arrondis 25 px -> 14 px (sections 3 à 8) • cadres orange #ffae15 -> jaune #FFF8D9 (sections 4, 5) • bandeaux silver -> beige #ece6d4 (section 6) • liens #061DF9 -> #1449c4 (section 2) • bandes orange #ffae15 -> sable #EBD79B (section 3) • vignettes étirées -> recadrées (section 1) • fond blanc -> papier #F4EEE0 (section 1) • couverture d'un compte rendu : recadrée -> entière (section 7) L'orange #ffae15 a d'abord été conservé sur le nom du site et sur la bande de navigation ; il tranchait trop avec le jaune des cadres et a cédé la place à un sable de la même famille (section 3). ========================================================= */ /* ========================================================= 1. BASE ========================================================= */ /* ------- Le fond de page ------- Le blanc d'origine rendait l'ensemble froid. Le fond est désormais un papier chaud, légèrement plus soutenu que le jaune des cadres, ce qui fait ressortir ceux-ci comme des feuilles posées dessus. Le grain est une petite image de 64 px, écrite directement dans cette feuille (« data:image/png;base64 ») : AUCUN fichier à téléverser, aucune requête réseau de plus, rien qui puisse manquer un jour sur le serveur. Il se devine plus qu'il ne se voit — c'est voulu. Pour revenir au blanc : supprimer les deux lignes « background- » ci-dessous, et rendre à header et footer leur image d'en-tête (section 3). */ body { background-color: #F4EEE0; background-image: url("data:image/png;base64,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"); text-align: left; line-height: 1.65; font-family: Charter, Georgia, "Times New Roman", serif; font-size: 19px; margin: 0px; width: 100%; } h1 { font-size: 28px; letter-spacing: -0.01em; padding: 0px; margin: 0px; } p { padding-left: 0px; padding-right: 0px; margin: 0px; } img { width: 100%; height: 100%; } /* ------- Les vignettes ------- « img { width:100%; height:100% } » ci-dessus étire chaque image aux dimensions exactes de son cadre. Les deux règles qui suivent lui rendent ses proportions : « aspect-ratio » impose le format du cadre et « object-fit: cover » recadre l'image au lieu de l'écraser. Pour retrouver l'ancien comportement, remplacer « cover » par « fill » aux quatre endroits (ici et section 5 pour le portrait). « display: block » supprime le liseré sous l'image : une image est par défaut un élément EN LIGNE, donc posée sur la ligne de base du texte, sous laquelle le navigateur réserve la place des jambages. */ #bloc_couverture img, figure img { aspect-ratio: 180 / 280; object-fit: cover; height: auto; display: block; } figure_conf img { aspect-ratio: 270 / 203; object-fit: cover; height: auto; display: block; } /* Le lien qui entoure l'image doit suivre, sinon il conserve sa hauteur de ligne et le liseré réapparaît. */ #bloc_couverture a, #bloc_couverture_cr a, .bloc_couverture_cr a, figure > a, figure_conf a { display: block; } /* ========================================================= 2. LES LIENS ========================================================= */ a:link { text-decoration: none; color: #1449c4; } a:visited { text-decoration: none; color: #1449c4; } a:hover { text-decoration: underline; text-underline-offset: 3px; } a { transition: color 0.15s ease; } a:active { text-decoration: none; } /* ========================================================= 3. EN-TÊTE, MENU, PIED DE PAGE ========================================================= */ header { /* l'image en-tete2.jpg s'affichait en blanc et coupait le papier en deux ; le fond de page court maintenant du haut jusqu'en bas */ background-image: none; margin: 0px; height: 200px; width: 100%; } footer { background-image: none; margin: 0px; height: 75px; width: 100%; } /* ------- Nom du site ------- */ #bloc_nom { border-radius: 14px; background-color: #EBD79B; width: 350px; max-width: calc(100% - 20px); /* AJOUT : ne déborde plus sur un écran étroit */ text-align: center; font-size: 35px; font-weight: bold; line-height: 32pt; margin-left: auto; margin-right: auto; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); padding: 10px; border: 0px solid black; } /* ------- Menu général ------- */ nav { display: inline-block; text-align: center; font-weight: bold; border: 0px solid black; background-color: #EBD79B; width: 100%; margin-top: 0px; margin-right: 0px; margin-bottom: 30px; font-size: 18px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); } nav ul { list-style-type: none; } /* La barre de menu répartit ses entrées elle-même. Les marges fixes de 57 px d'origine tenaient tant qu'il y avait six entrées ; la loupe, septième, débordait et repassait à la ligne. L'écart est désormais élastique : il vaut 57 px de part et d'autre sur un grand écran et se resserre tout seul quand la place manque. */ nav ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: clamp(16px, 8.9vw, 114px); row-gap: 2px; } nav li { display: inline-block; margin: 0; } /* ========================================================= 4. PAGE D'ACCUEIL : LES GRANDS CADRES ========================================================= */ /* Ces cadres étaient orange (#ffae15) comme le bandeau du menu ; ils portent désormais le jaune des comptes rendus. L'orange a disparu du site : les deux bandes de la section 3 sont passées au sable. */ #bloc_livres, #bloc_comptes_rendus, #bloc_textes { border-radius: 14px; background-color: #FFF8D9; /* jaune des comptes rendus (était #ffae15) */ width: auto; max-width: 1050px; box-sizing: border-box; margin: 0 auto 30px; padding: 30px 25px 40px; /* 25 px : il faut 1000 px utiles pour que 4 couvertures tiennent par ligne */ text-align: left; border: 0px solid black; } /* ------- Couverture seule (accueil, présentations) ------- */ #bloc_couverture { width: 180px; height: 280px; display: inline-block; margin-top: 20px; margin-right: 65px; margin-left: 0px; border: 0px solid black; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22); } /* ------- Couverture avec légende ------- */ figure { display: inline-block; width: 180px; height: 280px; margin-top: 20px; margin-bottom: 120px; margin-right: 65px; margin-left: 0px; border: 0px solid black; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22); } figcaption { display: block; border-bottom: 1px solid black; width: 180px; height: 100px; overflow: auto; font-size: 14px; text-align: left; margin-top: 20px; } /* ------- Photos de conférences ------- */ figure_conf { display: inline-block; width: 270px; height: 203px; margin-top: 20px; margin-bottom: 25px; margin-right: 50px; margin-left: 0px; border: 0px solid black; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22); } /* ========================================================= 5. PAGE « QUI SUIS-JE » ========================================================= */ #qui_suis_je { border-radius: 14px; background-color: #FFF8D9; /* même jaune que les autres cadres */ margin: auto; padding-top: 30px; padding-bottom: 50px; padding-left: 65px; padding-right: 65px; text-align: left; width: auto; /* MODIFIÉ : était 950px, se rétrécit maintenant au besoin */ max-width: 950px; /* AJOUT : rendu identique sur grand écran */ border: 0px solid black; } #bloc_description_thomas { width: 400px; height: 280px; margin-top: 20px; margin-left: 5px; margin-right: 20px; display: inline-block; text-align: justify; border: 0px solid black; } #bloc_photo_thomas { width: 420px; height: 280px; display: inline-block; border: 0px solid black; } /* Sur la page « Qui suis-je », ce cadre de 400 px enfermait un tableau de 922 px qui en débordait largement — cela fonctionnait, mais toute largeur maximale donnée au tableau se calculait alors sur 400 px et l'écrasait. Le cadre prend donc ici la largeur disponible. La règle ci-dessus reste intacte pour les autres pages qui l'utiliseraient. */ #qui_suis_je #bloc_description_thomas { width: auto; height: auto; display: block; } /* ------- Tableau de présentation (texte à gauche, photo à droite) ------- Ces valeurs reprennent exactement les largeurs qui étaient écrites en dur dans qui-suis-je.html : le rendu sur ordinateur est identique, mais la section 9 peut maintenant les défaire. */ #qui_suis_je table { width: 922px; max-width: 100%; } #qui_suis_je td { vertical-align: top; } #qui_suis_je td:first-child { width: 525px; /* valeurs déclarées dans votre page ; le navigateur */ } /* les élargit ensuite pour remplir les 922 px */ #qui_suis_je td.photo { width: 255px; } #qui_suis_je td.photo { text-align: right; } #qui_suis_je td.photo img { width: 327px; /* comme dans votre page : c'est l'image */ height: auto; /* qui élargit sa colonne au-delà des */ aspect-ratio: 327 / 287; /* 255 px déclarés juste au-dessus */ object-fit: cover; } /* ========================================================= 6. LISTES DE CLASSEMENT ========================================================= */ .list_cr-auteur { display: inline-block; text-align: left; border: 0px solid black; background-color: #ece6d4; width: 93%; margin-top: 0px; margin-bottom: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); } .list_cr-auteur ul { list-style-type: none; } .list_cr-auteur li { display: inline-block; margin-right: 8.5px; margin-left: 8.5px; } .list_cr_theme { display: inline-block; text-align: left; font-size: 16px; border: 0px solid black; background-color: #ece6d4; width: 93%; margin-top: 0px; margin-bottom: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); } .list_cr_theme ul { list-style-type: none; } .list_cr_theme li { display: inline-block; margin-right: 10px; margin-left: 0px; } .list_article { display: inline-block; text-align: left; border: 0px solid black; background-color: #ece6d4; width: 93%; margin-top: 0px; margin-bottom: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); } .list_article ul { list-style-type: none; } .list_article li { display: inline-block; margin-right: 19px; margin-left: 19px; } /* ========================================================= 7. PAGES DE COMPTES RENDUS ATTENTION AU NOM. Ces pages emploient « bloc_compte_rendu » AU SINGULIER ; la page d'accueil et les pages de livres emploient « bloc_comptes_rendus » AU PLURIEL (section 4). Ce sont deux identifiants distincts, et le singulier n'avait jamais reçu la moindre règle : les comptes rendus s'affichaient donc sans cadre, étalés sur toute la largeur de la fenêtre. D'où la règle qui suit. ========================================================= */ #bloc_compte_rendu { border-radius: 14px; background-color: #FFF8D9; width: auto; max-width: 880px; /* et non 1050 comme les autres cadres : ici il n'y a qu'une colonne de texte de 38 em à loger, le reste ne serait que du vide à droite */ box-sizing: border-box; margin: 0 auto 30px; padding: 30px 40px 40px; text-align: left; overflow: hidden; /* contient le flottant de la couverture : sans cela le cadre se referme au-dessus d'elle */ border: 0px solid black; } /* La mention « Publié dans [logo de la revue] » que portent les comptes rendus repris de l'ancienne maquette. Le logo doit garder sa taille : la règle img { width: 100% } de la section 1 l'étirerait sinon sur toute la largeur du cadre. */ .cr-publie-dans { text-align: right; font-size: 0.85em; margin-bottom: 12px; } .cr-publie-dans img { width: 180px; max-width: 55%; height: auto; display: inline-block; vertical-align: middle; } /* ------- L'ouvrage : annonce, couverture, référence ------- Disposition demandée en septembre 2026 : la ligne « Compte rendu du livre : » passe AU-DESSUS de la couverture, la référence passe DESSOUS, titre en gras. Les trois éléments forment une colonne ; c'est elle qui flotte à gauche, le texte du compte rendu l'habille. Auparavant la couverture flottait seule et la référence occupait, centrée, toute la largeur restante — d'où beaucoup de blanc. Une page peut aligner plusieurs ouvrages : « clear: left » leur donne à chacun sa rangée. */ .cr-ouvrage { display: grid; grid-template-columns: 180px minmax(0, 1fr); /* Quatre rangées : deux vides qui se partagent le reste de la hauteur, et entre elles l'annonce puis la référence. C'est ce qui centre le bloc de droite en face de la couverture. Si le texte est plus haut que l'image, les rangées vides se réduisent à rien et tout s'allonge normalement. */ grid-template-rows: 1fr auto auto 1fr; column-gap: 30px; margin: 10px 0 24px; } .cr-annonce { grid-column: 2; grid-row: 2; font-size: 0.95em; text-align: center; margin: 0 0 16px; } /* Dans la colonne, la couverture ne flotte plus : elle se centre. L'ombre passe de la boîte à l'image : une page peut réunir deux ou trois couvertures dans la même boîte, et l'ombre les enveloppait toutes ensemble comme s'il s'agissait d'une seule image. */ .cr-ouvrage .bloc_couverture_cr { grid-column: 1; grid-row: 1 / span 4; /* la couverture tient toute la hauteur */ float: none; clear: none; display: block; width: 180px; margin: 0; box-shadow: none; } .cr-ouvrage .bloc_couverture_cr > a, .cr-ouvrage .bloc_couverture_cr > img { display: block; margin-bottom: 18px; /* l'espace entre deux couvertures empilées */ } .cr-ouvrage .bloc_couverture_cr > a:last-child, .cr-ouvrage .bloc_couverture_cr > img:last-child { margin-bottom: 0; } .cr-ouvrage .bloc_couverture_cr img { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22); } .cr-ouvrage .bloc_nom-du-livre { grid-column: 2; grid-row: 3; margin: 0; min-height: 0; padding: 0; line-height: 1.5; text-align: center; } #bloc_couverture_cr, .bloc_couverture_cr { width: 180px; clear: left; /* une page peut aligner plusieurs couples couverture + titre : chacun sa rangée */ display: inline-block; float: left; margin: 10px 30px 20px 0; border: 0px solid black; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22); } /* La couverture d'un compte rendu n'est PAS recadrée : c'est la seule image de la page, et la recadrer coupait le titre du livre. Les vignettes des grilles (accueil, listes) restent recadrées, elles, pour que les rangées s'alignent. */ #bloc_couverture_cr img, .bloc_couverture_cr img { width: 100%; height: auto; aspect-ratio: auto; object-fit: fill; display: block; } #bloc_nom-du-livre, .bloc_nom-du-livre { margin: 10px 0 0 210px; /* 180 de couverture + 30 de gouttière */ min-height: 230px; /* MIN-height, et non height : un titre long s'étend vers le bas au lieu d'être coupé */ padding: 45px 10px 0; text-align: center; border: 0px solid black; } #bloc_texte-de-cr { clear: both; /* le texte commence SOUS la couverture, il ne vient pas s'enrouler autour d'elle */ max-width: 38em; /* ~72 signes par ligne : confort de lecture */ hyphens: auto; /* la justification sans césure crée des lézardes */ margin-top: 30px; padding-bottom: 10px; text-align: justify; text-indent: 40px; border: 0px solid black; } /* Dans ces pages, chaque paragraphe est un

: il faut lui rendre l'espacement que la règle p { margin: 0 } de la section 1 supprime. */ #bloc_texte-de-cr p { margin-bottom: 1em; } /* ------- Comptes rendus sans couverture ------- 247 des anciens comptes rendus n'ont aucune image. Le décalage de 210 px prévu pour la couverture laisserait alors un vide à gauche : le titre reprend toute la largeur. */ #bloc_compte_rendu.cr-sans-couverture #bloc_nom-du-livre, #bloc_compte_rendu.cr-sans-couverture .bloc_nom-du-livre { margin-left: 0; min-height: 0; padding-top: 10px; } #bloc_compte_rendu.cr-sans-couverture #bloc_texte-de-cr { margin-top: 22px; } /* ------- La ligne « Pour acheter ce livre » ------- L'ancienne feuille la mettait en rouge (classe « style2 ») ; on garde l'intention, mais la couleur est ici, modifiable en un seul endroit. */ .cr-achat { color: #E03B27; font-weight: bold; } .cr-achat-ligne { text-indent: 0; text-align: left; margin-top: 1.2em; } /* La signature : « Thomas Lepeltier, Sciences Humaines, 263, oct. 2014 » */ .cr-signature { text-indent: 0; text-align: right; margin-top: 1.4em; } /* La mention « Ce site s'inspire de… », reléguée au pied de page */ .cr-credit { text-align: right; font-size: 0.8em; color: #6b6455; max-width: 880px; margin: 0 auto; padding: 0 40px 12px; } /* ========================================================= 8. PAGES D'ARTICLES ========================================================= */ #bloc_article { width: 673px; max-width: calc(100% - 130px); /* AJOUT : tient compte des 65px de padding */ border-radius: 14px; background-color: #FFF8D9; text-align: center; margin: auto; margin-bottom: 30px; padding: 65px; border: 0px solid black; } /* ========================================================= 9. PETITS ÉCRANS (moins de 760 px) Rien de ce qui suit ne s'applique sur un écran d'ordinateur. C'est ici, et seulement ici, qu'il faut intervenir si un détail ne vous convient pas sur téléphone. ========================================================= */ @media (max-width: 760px) { body { font-size: 17px; line-height: 1.6; overflow-wrap: break-word; /* les URL trop longues ne débordent plus */ } /* Les vignettes sont déjà traitées en section 1, pour tous les écrans : format imposé, recadrage, pas de liseré. Rien à ajouter ici, sinon pour les images qui n'appartiennent à aucun cadre. */ img { height: auto; } /* --- En-tête et nom du site --- */ header { height: 130px; background-size: cover; background-position: center; } #bloc_nom { width: auto; font-size: 24px; line-height: 1.25; } /* --- Menu --- */ nav { font-size: 16px; margin-bottom: 20px; } nav ul { padding-left: 0; margin: 8px 0; column-gap: 18px; /* l'écart élastique de la section 3 est trop large ici : le menu y gagnerait une ligne de plus */ row-gap: 0; } nav li { margin: 4px 0; } /* --- Grands cadres : marges intérieures réduites --- */ #bloc_livres, #bloc_comptes_rendus, #bloc_textes, #qui_suis_je { border-radius: 15px; padding: 20px 15px 30px; margin-bottom: 25px; } /* --- Couvertures : deux par ligne, hauteur libre --- La marge droite s'applique aux DEUX blocs de la ligne : il faut donc 2 x (44 % + 4 %) = 96 %, ce qui laisse la place de l'espace typographique qui sépare deux « inline-block ». À 45 % + 5 % on atteint 100 % : cet espace fait alors déborder la paire et tout retombe en colonne unique. */ #bloc_couverture { width: 44%; height: auto; margin: 15px 4% 15px 0; vertical-align: top; } /* --- Figures avec légende : deux par ligne, légende dessous --- */ figure { width: 44%; height: auto; margin: 15px 4% 25px 0; vertical-align: top; box-shadow: none; /* l'ombre passe sur l'image (voir ci-dessous) */ } /* Sur ordinateur la légende déborde hors du cadre et l'ombre n'entoure que l'image. Sur téléphone la légende est DANS le cadre : sans cela l'ombre ferait le tour de la légende aussi. */ figure img { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22); } /* Le trait sous la légende doit tomber au MÊME NIVEAU d'une vignette à l'autre. Il faut donc une hauteur fixe, et non « auto » : sinon elle suit la longueur du texte et le trait monte ou descend. 6 em = 4 lignes de 1,5 em. Mesuré sur les 783 légendes du site (accueil, articles, 25 pages de comptes rendus) : au-dessus de 390 px, aucune n'excède 4 lignes. */ figcaption { width: 100%; font-size: 13px; line-height: 1.5; height: 6em; overflow: auto; margin-top: 10px; } /* --- Conférences : une photo par ligne --- */ figure_conf { display: block; width: 100%; height: auto; margin: 15px 0; } /* --- Qui suis-je : texte et photo l'un sous l'autre --- */ #bloc_description_thomas, #bloc_photo_thomas { display: block; width: 100%; height: auto; margin: 15px 0 0 0; } /* Le tableau de présentation sert de mise en page, pas de données : on le déplie en blocs pour que la photo passe sous le texte. */ #qui_suis_je table, #qui_suis_je tbody, #qui_suis_je tr, #qui_suis_je td, #qui_suis_je td:first-child, /* il faut reprendre ces deux sélecteurs : */ #qui_suis_je td.photo { /* sans eux, les largeurs de 525 px et de */ /* 255 px de la section 5 continuent de */ /* s'appliquer, « td:first-child » et */ /* « td.photo » étant plus spécifiques */ /* que le simple « td » */ display: block; width: auto; } #qui_suis_je td.photo { text-align: center; margin-top: 20px; } #qui_suis_je td.photo img { display: block; width: 100%; max-width: 327px; margin: 0 auto; } #qui_suis_je ul { padding-left: 22px; } /* --- Listes de classement --- */ .list_cr-auteur, .list_cr_theme, .list_article { width: 100%; font-size: 15px; } .list_cr-auteur ul, .list_cr_theme ul, .list_article ul { padding-left: 10px; } .list_cr-auteur li, .list_cr_theme li, .list_article li { margin: 3px 8px 3px 0; } /* --- Comptes rendus : couverture centrée, titre dessous --- */ #bloc_compte_rendu { border-radius: 15px; padding: 25px 18px 30px; } /* ------- Sur téléphone, l'ouvrage s'empile ------- C'est ici la seule différence avec l'ordinateur : on abandonne la grille à deux colonnes, et les trois éléments reprennent l'ordre du fichier — annonce, couverture, référence. Une couverture de 180 px et un pavé de texte côte à côte sur 360 px, cela ne tient pas. */ .cr-ouvrage { display: block; width: auto; margin: 0 auto 26px; text-align: center; } .cr-annonce { margin: 0 0 12px; } .cr-ouvrage .bloc_couverture_cr { width: 150px; margin: 0 auto; } .cr-ouvrage .bloc_nom-du-livre { margin: 16px 0 0; } #bloc_couverture_cr, .bloc_couverture_cr { float: none; display: block; width: 150px; height: auto; margin: 15px auto 0; } #bloc_nom-du-livre, .bloc_nom-du-livre { width: auto; min-height: 0; margin-left: 0; padding: 15px 0 0; } #bloc_texte-de-cr { text-indent: 20px; padding-bottom: 20px; text-align: left; /* justifier sur une colonne étroite creuse le texte, comme aux sections 9, 13 et 14 bis */ } .cr-achat-ligne, .cr-signature { text-indent: 0; } .cr-credit { padding: 0 18px 12px; } /* --- Articles --- */ #bloc_article { width: auto; max-width: 100%; border-radius: 15px; padding: 25px 15px; } } /* ========================================================= 10. TABLETTES ET TÉLÉPHONES EN MODE PAYSAGE (500 à 760 px) À cette largeur, deux vignettes par ligne les rendrait énormes (plus de 500 px de haut). On passe donc à trois par ligne. ========================================================= */ @media (min-width: 500px) and (max-width: 760px) { #bloc_couverture, figure { width: 29%; margin-right: 3%; } /* Trois par ligne, donc des colonnes plus étroites : les légendes les plus longues y demandent jusqu'à six lignes (mesuré au plus serré, vers 520 px). Le cadre est donc plus haut que les 4 lignes de la section 9 — sans quoi le texte serait tronqué juste dans cette bande de largeurs. */ figcaption { height: 9em; /* 6 lignes de 1,5 em */ } /* Les photos de conférences, en format paysage, vont par deux. */ figure_conf { display: inline-block; vertical-align: top; width: 44%; margin-right: 4%; } } /* ========================================================= 11. TÉLÉPHONES ÉTROITS (moins de 430 px) ========================================================= */ @media (max-width: 430px) { /* Couvertures et figures restent à deux par ligne, comme sur ordinateur : en colonne unique la page « Articles » et ses 160 vignettes deviendraient interminables. Seule la légende est resserrée, faute de place. */ figcaption { font-size: 12px; line-height: 1.35; height: 5.4em; /* toujours 4 lignes, à 1,35 em la ligne */ } } /* ========================================================= 11 bis. TÉLÉPHONES TRÈS ÉTROITS (moins de 390 px) En dessous de 390 px, les légendes les plus longues des comptes rendus demandent jusqu'à six lignes. Le cadre passe donc à six lignes : le trait reste aligné d'une vignette à l'autre, et aucun texte n'est tronqué. ========================================================= */ @media (max-width: 389px) { figcaption { height: 8.1em; /* 6 lignes de 1,35 em */ } } /* ========================================================= 12. PAGES DE LIVRES Remplace le tableau de mise en page à sept colonnes (dont quatre n'étaient que des espaceurs) par trois blocs souples : la couverture, la présentation, la revue de presse. Ils se replient d'eux-mêmes quand la largeur manque, sans qu'aucune règle de repli ne soit nécessaire. ========================================================= */ .livre { display: flex; flex-wrap: wrap; gap: 34px; align-items: flex-start; margin-top: 26px; } /* ------- Colonne de gauche : la couverture ------- */ .livre-couverture { flex: 0 0 240px; max-width: 100%; text-align: center; } .livre-couverture a { display: block; } /* Chaque couverture garde ses propres proportions : contrairement aux vignettes de l'accueil, il n'y en a qu'une par page, donc rien à uniformiser. Les attributs width et height de la balise réservent la place exacte avant même que l'image ne soit chargée, ce qui évite que la page ne sursaute pendant le chargement. */ .livre-couverture img { width: 100%; height: auto; aspect-ratio: auto; object-fit: fill; display: block; border-radius: 4px; box-shadow: 0 3px 14px rgba(0, 0, 0, 0.25); } .livre-parution { font-weight: bold; color: #b3121d; /* était #dd1522, un rouge saturé */ margin-bottom: 14px; font-size: 0.9em; } .livre-achat { margin-top: 16px; font-size: 0.9em; line-height: 1.5; } .livre-achat b { color: #b3121d; } /* ------- Colonne centrale : la présentation ------- */ .livre-presentation { flex: 1 1 300px; min-width: 0; /* sans quoi un mot long empêche le repli */ max-width: 34em; /* ~70 signes par ligne, même sans encadré de presse pour borner la colonne */ } .livre-presentation p { text-align: justify; hyphens: auto; /* la justification sans césure crée des lézardes */ margin-bottom: 1em; } .livre-editeur { text-align: right !important; font-size: 0.92em; } /* ------- Colonne de droite : la revue de presse ------- */ .livre-presse { flex: 0 0 240px; max-width: 100%; box-sizing: border-box; background-color: #f7e6e4; /* était « pink » (#FFC0CB) */ border-radius: 14px; padding: 20px 22px 24px; font-size: 0.85em; line-height: 1.5; } .livre-presse h2 { font-size: 1.05em; text-align: center; margin: 0 0 14px; } .livre-presse blockquote { margin: 0 0 15px; } .livre-presse blockquote:last-child { margin-bottom: 0; } .livre-presse cite { display: block; font-style: italic; margin-top: 3px; } /* ------- Accroche placée sous le titre ------- */ .livre-accroche { text-align: center; font-size: 0.95em; font-style: italic; margin-top: 18px; } /* ------- Bloc placé sous les trois colonnes ------- Extrait de préface, mentions de traduction, etc. */ .livre-complement { max-width: 42em; margin: 34px auto 0; } .livre-complement h2 { font-size: 1em; text-align: center; margin: 0 0 12px; } /* Paragraphes de texte courant dans ce bloc : l'argumentaire de « L'imposture intellectuelle », par exemple. Le sélecteur ne vise que les paragraphes SANS classe, afin de laisser intacts les utilitaires du bloc (.livre-traductions, centré, notamment). La règle p { margin: 0 } de la section 1 s'applique à tout le site : il faut donc rendre ici l'espace entre paragraphes, comme le fait déjà .livre-presentation p. */ .livre-complement p:not([class]) { text-align: justify; hyphens: auto; margin-bottom: 1em; } .livre-complement blockquote { margin: 0; padding: 18px 24px; background-color: #fffdf4; border-left: 3px solid #e3d5a8; border-radius: 6px; font-size: 0.93em; text-align: justify; hyphens: auto; } .livre-traductions { text-align: center; font-size: 0.85em; margin-top: 18px; } /* ------- Couverture accompagnée de sa tranche ------- Certaines pages font suivre la couverture d'une fine bande qui figure la tranche du livre. Les deux images restent côte à côte et se réduisent ensemble, dans la proportion de leurs largeurs d'origine. Pour supprimer cet effet, retirer la seconde image de la page : le reste continue de fonctionner. */ .livre-couverture-tranche { display: flex; align-items: stretch; border-radius: 4px; overflow: hidden; box-shadow: 0 3px 14px rgba(0, 0, 0, 0.25); } .livre-couverture-tranche img { border-radius: 0; box-shadow: none; } /* Les deux règles ci-dessous ne valent que s'il y a BIEN DEUX images : le « :not(:last-child) » et le « :not(:first-child) » l'imposent. Sans cette précaution, une image restée seule serait à la fois la première et la dernière, les deux règles s'appliqueraient, et la seconde l'emporterait : la couverture se retrouverait réduite à 6,2 % de la colonne. Seule ou accompagnée, elle occupe désormais la largeur qu'il faut. */ .livre-couverture-tranche img:first-child:not(:last-child) { width: 93.8%; /* 381 px sur 406 */ } .livre-couverture-tranche img:last-child:not(:first-child) { width: 6.2%; /* 25 px sur 406 */ } /* ------- Notices d'auteurs, sous la présentation ------- */ .livre-auteurs { margin-top: 22px; padding-top: 18px; border-top: 1px solid #e3d5a8; font-size: 0.92em; } .livre-auteurs p + p { margin-top: 10px; } /* ------- Ornement de bas de page ------- */ .livre-ornement { display: block; width: auto; max-width: 100%; height: auto; margin: 26px auto 0; } /* ========================================================= 13. PAGES DE LIVRES SUR PETITS ÉCRANS (moins de 760 px) ========================================================= */ @media (max-width: 760px) { .livre { gap: 24px; margin-top: 20px; } /* La couverture se centre et ne dépasse pas une taille lisible. */ .livre-couverture { flex-basis: 100%; max-width: 260px; margin: 0 auto; } .livre-presentation, .livre-presse { flex-basis: 100%; } .livre-presentation p { text-align: left; /* justifier sur une colonne étroite creuse le texte */ } .livre-complement { margin-top: 26px; } .livre-complement blockquote, .livre-complement p:not([class]) { text-align: left; /* même raison qu'au-dessus */ } .livre-complement blockquote { padding: 15px 16px; } } /* ========================================================= 14. PAGES DE TEXTE SUIVI (débats, mises au point) Pour les pages qui ne sont ni un livre ni un compte rendu, mais un texte argumenté d'un seul tenant : autre-cosmos/debats.html, par exemple. La largeur est bornée à 42 em (~75 signes par ligne), au-delà l'œil perd la ligne suivante. ========================================================= */ .page-texte { max-width: 42em; margin: 26px auto 0; } .page-texte p { text-align: justify; hyphens: auto; /* sans césure, la justification creuse des lézardes */ margin-bottom: 1em; } /* Les citations un peu longues détachées du texte : la lettre à « La Recherche », par exemple. */ .page-texte blockquote { margin: 22px 0; padding: 18px 24px; background-color: #fffdf4; border-left: 3px solid #e3d5a8; border-radius: 6px; font-size: 0.93em; } /* Les passages cités à l'intérieur d'un paragraphe. La couleur est celle de la page d'origine ; elle distingue d'un coup d'œil ce qui est cité de ce qui est répondu. */ .texte-cite { color: #E03B27; } .page-texte .signature { text-align: right; font-size: 0.95em; } .page-texte .achat { text-align: center; margin-top: 30px; font-size: 0.92em; } /* Intertitres : discrets, centrés, comme dans les pages d'origine. */ .page-texte h2 { font-size: 1.12em; text-align: center; margin: 32px 0 14px; } /* ------- Une suite de questions ou de points ------- Dans les pages d'origine, chaque point était introduit par un « • » suivi de six espaces insécables, le tout dans un unique paragraphe coupé par des
. Chaque point est maintenant un paragraphe ; le retrait négatif fait que les lignes suivantes s'alignent APRÈS le point, au lieu de revenir à la marge. Pas de justification : sur des phrases courtes elle creuserait des blancs. */ .page-texte .question { text-align: left; margin-bottom: 0.7em; padding-left: 0.6em; /* mesure exacte de « • » suivi d'une espace dans la police de la page : les lignes suivantes s'alignent pile sous le premier mot, et non deux crans plus à droite */ text-indent: -0.6em; } .page-texte .question + .question { margin-top: -0.2em; } /* Petit sommaire en tête de page : la liste des textes voisins. */ .page-texte .sommaire { text-align: center; font-size: 0.92em; margin-bottom: 26px; } /* ------- Page de commentaires ------- Trois sections annoncées par un petit sommaire, chacune ouverte par un intertitre que suit, au fer à droite et sur la même ligne, un lien de retour en haut de page. Dans la source, le filet horizontal et l'intertitre étaient deux éléments séparés ; ici le filet est le bord supérieur de l'intertitre. */ ul.comm-sommaire { list-style: none; margin: 0 0 6px; padding: 0; text-align: center; font-weight: bold; } ul.comm-sommaire li { margin: 4px 0; } h2.comm-section { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 18px; row-gap: 2px; text-align: left; /* et non centré comme les autres h2 */ font-size: 1.1em; margin: 34px 0 6px; padding-top: 16px; border-top: 1px solid #000; scroll-margin-top: 14px; } .comm-haut { font-size: 0.76em; font-weight: normal; white-space: nowrap; } /* La mention qui précède une lettre reproduite : « Mise en ligne avec l'autorisation de son auteur ». Discrète et centrée, comme dans la page d'origine. */ .page-texte .lettre-mention { text-align: center; font-size: 0.9em; color: #5a5344; margin-bottom: 4px; } /* Une lettre reproduite : l'encadré détaché de blockquote suffit, mais la signature y est déjà au fer à droite et n'a pas besoin du retrait de première ligne des paragraphes voisins. */ .page-texte blockquote.lettre p + p { margin-top: 1em; } /* Notes de bas de page, détachées du texte par un filet. */ .page-texte .note { font-size: 0.9em; margin-top: 28px; padding-top: 14px; border-top: 1px solid #e3d5a8; } /* ------- Tables des matières ------- Une entrée trop longue passe à la ligne EN RETRAIT du numéro de chapitre, au lieu de revenir à la marge : c'est l'effet conjoint du padding positif et du text-indent négatif. Pas de justification : sur des lignes courtes elle creuserait des blancs. */ .page-texte .tdm, .livre-presentation .tdm { /* une table des matières posée à côté de la couverture, comme « Plaidoyer pour une viande sans animal » : le second sélecteur l'emporte alors sur la justification de .livre-presentation p */ text-align: left; margin-bottom: 0.5em; padding-left: 1.6em; text-indent: -1.6em; } .page-texte .retour { text-align: center; margin-top: 32px; } /* Listes des tables des matières. L'espace entre les entrées n'est pas décoratif : sur un téléphone, la plupart passent sur deux lignes et, sans lui, on ne voit plus où l'une finit et où la suivante commence. Le retrait est réduit (1,3 em au lieu des 40 px du navigateur) pour ne pas manger la largeur d'un écran étroit. */ .page-texte ul { margin: 0 0 20px; padding-left: 1.3em; } .page-texte li { margin-bottom: 0.4em; } /* ========================================================= 14 bis. Pages de texte suivi sur petits écrans ========================================================= */ @media (max-width: 760px) { .page-texte p, .page-texte blockquote { text-align: left; /* même raison qu'aux sections 9 et 13 */ } .page-texte blockquote { padding: 15px 16px; } } /* ========================================================= 15. RECHERCHE La loupe se loge dans la barre de navigation ; la page de résultats reprend le cadre crème des autres pages. ========================================================= */ /* ------- La loupe dans le menu ------- Une icône seule, et rien d'autre : un champ de saisie logé ici passait à la ligne et faisait enfler le bandeau. Le champ est sur la page de recherche, où il a la place. */ nav li.nav-recherche a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: #1449c4; vertical-align: middle; transition: background-color 0.15s ease; } nav li.nav-recherche a:hover { background-color: #DFC983; text-decoration: none; } nav li.nav-recherche svg { display: block; } /* ------- La page de résultats ------- */ #bloc_recherche { border-radius: 14px; background-color: #FFF8D9; width: auto; max-width: 880px; box-sizing: border-box; margin: 0 auto 30px; padding: 30px 40px 40px; text-align: left; box-shadow: 0 3px 14px rgba(0, 0, 0, 0.12); } #bloc_recherche h1 { margin-bottom: 6px; } #retour { margin: 14px 0 18px; } #form_recherche { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; } #form_recherche input { flex: 1 1 auto; min-width: 0; font-family: inherit; font-size: 19px; padding: 9px 14px; border: 1px solid #c8b98c; border-radius: 18px; background-color: #FFFDF4; color: #2b2b2b; } #form_recherche input:focus { outline: 2px solid #8a7a5c; outline-offset: 1px; } #form_recherche button { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background-color: #EBD79B; color: #2b2b2b; cursor: pointer; } #form_recherche button:hover { background-color: #DFC983; } .recherche-compte { font-size: 0.92em; color: #6b6455; margin-bottom: 4px; } .recherche-genre { font-size: 1.1em; margin: 26px 0 8px; padding-bottom: 5px; border-bottom: 1px solid #ddd0a8; } ul.recherche-liste { list-style: none; margin: 0; padding: 0; } ul.recherche-liste li { margin-bottom: 11px; line-height: 1.45; } .recherche-auteur { color: #5a5344; } .recherche-annee { color: #8a8270; font-size: 0.88em; white-space: nowrap; } #bloc_recherche mark { background-color: #F6E39B; color: inherit; padding: 0 1px; border-radius: 2px; } /* Un libellé utile aux lecteurs d'écran, invisible à l'oeil */ .visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ------- Recherche sur petits écrans ------- La barre de navigation y tient déjà sur deux lignes : le champ de saisie y ferait déborder. Seule la loupe reste, et elle ouvre la page de recherche, qui a, elle, un champ à sa taille. */ @media (max-width: 760px) { nav form.nav-loupe input { display: none; } #bloc_recherche { border-radius: 15px; padding: 25px 18px 30px; } #form_recherche input { font-size: 17px; } .recherche-genre { font-size: 1.05em; } } /* ========================================================= 16. LISTE DES PUBLICATIONS La page d'origine était une mise en page par tableaux, large de 1100 px fixes. Le contenu est désormais dans des titres et des listes ordinaires, qui se replient d'eux-mêmes. ========================================================= */ #bloc_publications { border-radius: 14px; background-color: #FFF8D9; width: auto; max-width: 940px; box-sizing: border-box; margin: 0 auto 30px; padding: 30px 40px 40px; text-align: left; box-shadow: 0 3px 14px rgba(0, 0, 0, 0.12); } /* ------- L'en-tête : portrait, titre, qualités, sommaire ------- */ .pub-entete { overflow: hidden; /* contient le portrait flottant */ margin-bottom: 30px; } .pub-portrait { float: right; width: 280px; max-width: 42%; height: auto; margin: 4px 0 18px 26px; border-radius: 6px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22); } #bloc_publications h1 { margin-bottom: 10px; } .pub-qualites { font-size: 0.92em; color: #5a5344; margin-bottom: 18px; } ul.pub-sommaire { list-style: none; margin: 0; padding: 0; font-weight: bold; } ul.pub-sommaire li { margin-bottom: 5px; } .pub-compte { font-weight: normal; color: #6b6455; } /* ------- Les titres de section (ex-bandeaux orange) ------- */ /* Le bandeau de section porte son titre et, pour « Articles », les rubriques qu'il contient : elles se rangent à sa suite, sur la même ligne tant qu'il y a la place, et passent dessous quand l'écran se resserre — sans jamais sortir du cadre. */ h2.pub-section { clear: both; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 20px; row-gap: 6px; font-size: 1.22em; margin: 34px 0 2px; padding: 10px 18px; background-color: #EBD79B; border-radius: 10px; scroll-margin-top: 14px; /* le bandeau visé ne colle pas au bord */ } .pub-titre { flex: 0 0 auto; } /* Mesuré : à cette taille et avec cet écart, les cinq rubriques tiennent à la suite du titre sur un écran d'ordinateur (il reste 28 px de marge à 1024 px de large). En dessous, elles passent à la ligne suivante, toujours à l'intérieur du bandeau. */ span.pub-rubriques { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; row-gap: 2px; font-size: 0.68em; font-weight: normal; } /* Un point médian discret entre deux rubriques. Il est accroché à la rubrique qui PRÉCÈDE (::after) et non à celle qui suit : sinon, au repli sur téléphone, il se retrouvait orphelin en début de ligne. « inline-block » l'empêche d'être souligné avec le lien. */ span.pub-rubriques a:not(:last-child)::after { content: "·"; display: inline-block; color: #8a7a5c; margin-left: 14px; text-decoration: none; } /* ------- Le retour vers le haut de la rubrique ------- */ h3.pub-rubrique { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 18px; row-gap: 2px; } .pub-retour { font-size: 0.78em; font-weight: normal; white-space: nowrap; } h3.pub-annee { font-size: 1.02em; margin: 24px 0 8px; padding-bottom: 4px; border-bottom: 1px solid #ddd0a8; scroll-margin-top: 14px; /* le titre visé ne colle pas au bord */ } /* Le chapô d'une section (la liste des rubriques d'« Articles », les deux renvois de « Comptes rendus ») : une ligne, pas une puce. */ ul.pub-rubriques { list-style: none; margin: 0 0 4px; padding: 0; } ul.pub-rubriques li { margin-bottom: 4px; line-height: 1.5; } .pub-haut { text-align: right; font-size: 0.82em; margin-bottom: 14px; } /* ------- Les listes de publications ------- */ ul.pub-liste { margin: 0 0 18px; padding-left: 1.4em; } ul.pub-liste li { margin-bottom: 9px; line-height: 1.45; } /* « À propos de (éditeur, année). » : dans la page d'origine, cette ligne était mise en retrait par des