/* ================================================================== article.css — page d'article de landrucimetieres.fr Trois mesures commandent cette feuille : 250 px de large en moyenne pour les 58 000 images, en 2026 comme en 2017 ; 87 % des fiches placent leurs images dans le texte par un raccourci, donc leur emplacement ne se redistribue pas ; et 82 % des fiches font moins de 3 000 caractères. Ce site n'est pas un site de texte illustré mais un site de photographies légendées. La feuille accueille les images là où elles sont, sans jamais les agrandir. Les règles de flottement vivent dans style.css et sont conservées : 6 149 fiches sur 7 059 emploient |left ou |right, les supprimer changerait l'aspect de tout le site. À charger après style.css. ================================================================== */ .page-article{ --pierre:#f4f2ed;--pierre2:#e6e2da;--pierre3:#d9d3c8; --encre:#1c1a17;--encre2:#4a4540;--sourd:#8c857c; --bronze:#8b7355;--bronzef:#6b5745; --lecture:44rem; background:var(--pierre);color:var(--encre2); font-family:'Montserrat',system-ui,sans-serif; font-size:18px;line-height:1.75;-webkit-font-smoothing:antialiased; } .page-article h1,.page-article h2,.page-article h3{ font-family:'Playfair Display',Georgia,serif;font-weight:500; color:var(--encre);line-height:1.2} .page-article a{color:inherit;text-decoration:none} .ar-wrap{max-width:1120px;margin:0 auto;padding:0 1.5rem 4rem} .ar-fil{padding:1.2rem 0 0;font-size:.8rem;color:var(--sourd)} .ar-fil a{border-bottom:1px solid var(--pierre2)} .ar-fil a:hover{border-bottom-color:var(--bronze)} /* ---------- En-tête ---------- */ .ar-tete{padding:1.7rem 0 1.5rem;border-bottom:1px solid var(--encre); max-width:var(--lecture)} .ar-sur{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase; color:var(--bronze);margin:0 0 .55rem} .ar-tete h1{font-size:clamp(1.55rem,3.2vw,2.1rem);letter-spacing:-.008em} .ar-meta{display:flex;flex-wrap:wrap;gap:1.3rem;margin:.9rem 0 0; font-size:.79rem;color:var(--sourd)} .ar-meta b{font-family:'Playfair Display',Georgia,serif;font-weight:500;color:var(--encre2)} .ar-chapo{margin-top:1.1rem;font-size:1.06rem;color:var(--encre2)} .ar-chapo p{margin-bottom:.7rem} /* ---------- Corps ---------- */ .ar-corps{max-width:var(--lecture);padding:1.8rem 0 0;font-size:1.02rem} .ar-corps p{margin-bottom:1.05rem} .ar-corps strong{font-weight:600;color:var(--encre)} .ar-corps a{color:var(--bronzef);border-bottom:1px solid var(--pierre2)} .ar-corps a:hover{border-bottom-color:var(--bronze)} .ar-corps ul,.ar-corps ol{margin:0 0 1.05rem 1.3rem} .ar-corps li{margin-bottom:.35rem} .ar-corps blockquote{margin:1.3rem 0;padding-left:1.2rem; border-left:1px solid var(--pierre3);color:var(--sourd)} /* Les intertitres dégagent les flottants : avec sept images dans mille caractères, la cascade déborde et la suite viendrait s'y encastrer. */ .ar-corps h2,.ar-corps h3{clear:both;font-size:1.24rem;margin:2rem 0 .7rem} .ar-corps h3{font-size:1.08rem} .ar-ps{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--pierre2); clear:both;font-size:.95rem} .ar-ps h2{font-size:1.05rem;margin-top:0} .ar-notes{margin-top:1.6rem;padding-top:1.1rem;border-top:1px solid var(--pierre2); font-size:.86rem;color:var(--sourd);clear:both} .ar-sans-image{max-width:var(--lecture);margin-top:1.6rem;padding-top:1.1rem; border-top:1px solid var(--pierre2);clear:both; font-size:.9rem;color:var(--sourd);font-style:italic} .ar-sans-image a{color:var(--bronzef);border-bottom:1px solid var(--pierre2)} /* ---------- Légendes des images ---------- Sur un site de photographies légendées, la légende porte souvent l'information : le nom sur la pierre, la date, la division. */ .page-article .spip_doc_legende,.page-article figcaption{ font-size:.79rem;color:var(--sourd);line-height:1.55; margin-top:.4rem;text-align:left} .page-article .spip_doc_titre{font-weight:500;color:var(--encre2)} /* ---------- Pied d'article ---------- */ .ar-pied{max-width:var(--lecture);margin-top:2.8rem;clear:both} .ar-voisines h2{font-size:1.05rem;padding-bottom:.6rem; border-bottom:1px solid var(--encre)} .ar-voisines-liste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;background:var(--pierre2);border-bottom:1px solid var(--pierre2)} .ar-voisines-liste a{background:var(--pierre);padding:.8rem;display:block} .ar-voisines-liste a:hover{background:#efece5} .ar-voisines-liste .vig{display:block;aspect-ratio:4/3;overflow:hidden; margin-bottom:.5rem; background:repeating-linear-gradient(45deg,#e9e5dc,#e9e5dc 4px,#e3ded4 4px,#e3ded4 8px)} .ar-voisines-liste .vig img{width:100%;height:100%;object-fit:cover; display:block;filter:grayscale(1)} .ar-voisines-liste a:hover .vig img{filter:none} .ar-voisines-liste .t{font-size:.85rem;color:var(--encre2);line-height:1.4} .ar-voisines-liste a:hover .t{color:var(--bronzef)} /* ---------- Échanges ---------- */ .ar-echanges{margin-top:2.6rem} .ar-echanges h2{font-size:1.1rem;padding-bottom:.6rem; border-bottom:1px solid var(--encre);display:flex;align-items:baseline;gap:.7rem} .ar-echanges h2 .n{font-family:'Montserrat',sans-serif;font-size:.72rem; letter-spacing:.1em;color:var(--sourd)} .ar-msg{padding:1rem .2rem;border-bottom:1px solid var(--pierre2)} .ar-msg .qui{font-size:.87rem;color:var(--encre);font-weight:500;margin-bottom:.35rem} .ar-msg .role{font-family:'Montserrat',sans-serif;font-size:.63rem; letter-spacing:.09em;text-transform:uppercase;color:var(--bronzef); font-weight:400;margin-left:.6rem} .ar-msg .quand{font-size:.73rem;color:var(--sourd);font-weight:400;margin-left:.6rem} .ar-msg p{font-size:.93rem;margin-bottom:.5rem} .ar-msg p:last-child{margin-bottom:0} .ar-msg-auteur .qui{color:var(--bronzef)} .ar-msg-reponse{margin-left:1.6rem;padding-left:1rem; border-left:1px solid var(--pierre2)} /* Pagination des échanges : balisage bootstrap2spip (ul > li.page-item > .page-link, .active, .disabled, libellé .pagination-label), dans un