/* * Articles et pages piliers, repris du modèle d'article Elementor 603 et du CSS additionnel * du Personnalisateur (« Mon Lopin, styles corps d'article »), relevés le 22/10/2026 : * audit/reference-css/wp-custom-css.css, relecture/reference/valeurs-elementor.json. * * Le CSS additionnel du Personnalisateur appartient au thème actif : il disparaît à la * bascule. Il est repris ici en entier, préfixé par « .monlopin-article .art-corps » au * lieu du widget Elementor, avec les jetons --ml-* au lieu des couleurs écrites en dur. * Écart voulu (décision d'Olivia du 22/10/2026) : petits textes dans les variantes « -texte » * (contraste 4,5:1) ; fonds, boutons et grands chiffres dans les teintes d'origine. * Hauteurs de ligne toutes sans unité, plus aucun !important. * * Chargé uniquement sur les articles et les piliers, voir functions.php. * Le balisage visé est celui que Gutenberg PRODUIT (blocs natifs + classe additionnelle). * Contrat de chaque bloc : PATTERNS.md. * * Structure posée par template-parts/content/single-post.php : * * .monlopin-article * .art-fil fil d'Ariane, largeur du site (1 140 px) * .art-colonne colonne de lecture (760 px) * header.art-tete .art-surtitre, h1, .art-chapo, .art-une, .art-infos * .art-sommaire sommaire repliable (details) * .art-corps le contenu Gutenberg (the_content) * .art-auteur encadré auteur * .related « À lire aussi » (piliers seulement) * * Ruptures : 767 px (mobile, comme Elementor) et 600 px (encarts, comme le CSS additionnel). * Contrôles à 390 et 1 280 px. */ /* ========================================================================== 1. Fil d'Ariane et colonne ========================================================================== */ .monlopin-article .art-fil{max-width:var(--ml-largeur-site);margin:0 auto;padding:16px 0 0} .monlopin-article .art-colonne{max-width:var(--ml-largeur-lecture);margin:0 auto;padding:0 0 70px} @media (max-width:1187px){ .monlopin-article .art-fil{padding:22px 24px 0} } @media (max-width:767px){ .monlopin-article .art-fil{padding:16px 24px 0} .monlopin-article .art-fil :is(.rank-math-breadcrumb,.crumbs){line-height:1.31} .monlopin-article .art-tete{margin-top:30px;padding:0 3px} /* en-tête de 312 px, corps de 318 px, comme le modèle 603 */ .monlopin-article .art-colonne{width:calc((100% - 20px) * .86);padding:0 0 70px} /* 86 % de (largeur - 20 px), comme le modèle 603 : 318,1875 px à 390 px (au 1/64 de px près, d'où une largeur et non un retrait) ; 70 px sous l'encadré auteur */ } /* ========================================================================== 2. En-tête de l'article ========================================================================== */ .monlopin-article .art-tete{margin:31px 0 0} .monlopin-article .art-surtitre{margin:0;font-family:var(--ml-texte);font-size:11px;font-weight:800;line-height:1;letter-spacing:1.2px;text-transform:uppercase;color:var(--ml-terracotta-texte)} .monlopin-article .art-tete h1{margin:12px 0 0;font-size:44px;line-height:1.14;color:var(--ml-terre)} .monlopin-article .art-chapo{margin:20px 0 0;font-size:16px;line-height:1.5625;letter-spacing:.5px;color:var(--ml-terre)} .monlopin-article .art-une{margin:24px 0 0} .monlopin-article .art-une img{display:block;width:100%;height:auto;aspect-ratio:760/428;object-fit:cover;border-radius:var(--ml-rayon-encart)} .monlopin-article .art-infos{display:flex;flex-wrap:wrap;gap:0 16px;margin:23px 0 0;font-size:12px;line-height:2.55;color:var(--ml-sauge-texte)} .monlopin-article .art-info{display:inline-flex;align-items:center;gap:6px} @media (max-width:767px){.monlopin-article .art-infos{line-height:2.4083}} /* 28,9 px, comme le modèle 603 sur mobile */ .monlopin-article .art-info svg{width:13px;height:13px;flex:none} @media (max-width:767px){ .monlopin-article .art-surtitre{font-size:10px} .monlopin-article .art-tete h1{font-size:22px;line-height:1.1} .monlopin-article .art-chapo{font-size:14px;line-height:1.5} } /* ========================================================================== 3. Sommaire repliable (inc/article.php, monlopin_sommaire_repliable) ========================================================================== */ .monlopin-article .art-sommaire{width:85%;margin:12px auto 0;background:#fff;border:3px solid var(--ml-creme);border-radius:var(--ml-rayon-encart);overflow:hidden} .monlopin-article .art-sommaire summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px;border-bottom:1px solid var(--ml-creme-fonce);list-style:none;cursor:pointer} /* filet sous l'en-tête, même replié, comme Elementor */ .monlopin-article .art-sommaire summary::-webkit-details-marker{display:none} .monlopin-article .sommaire-titre{font-family:var(--ml-titres);font-weight:600;font-size:17.6px;line-height:1.2;color:var(--ml-terre)} @media (max-width:767px){.monlopin-article .sommaire-titre{line-height:1.35}} .monlopin-article .sommaire-chevron{width:16px;height:16px;flex:none;color:var(--ml-terracotta);transform:rotate(180deg);transition:transform .2s ease} .monlopin-article .art-sommaire:not([open]) .sommaire-chevron{transform:none} .monlopin-article .art-sommaire summary:focus-visible{outline:2px solid var(--ml-terracotta-texte);outline-offset:-4px} .monlopin-article .sommaire-liste{list-style:none;margin:0;padding:15px} .monlopin-article .sommaire-liste li{margin:0;padding:5px 0;font-size:14.4px;line-height:1.4} .monlopin-article .sommaire-liste a{display:flex;align-items:baseline;gap:14px;color:var(--ml-terre);text-decoration:none} .monlopin-article .sommaire-liste a:hover{color:var(--ml-sauge-texte);text-decoration:underline} .monlopin-article .sommaire-num{flex:none;min-width:16px;font-family:var(--ml-titres);font-style:italic;font-weight:600;font-size:14px;line-height:1;color:var(--ml-terracotta-texte)} /* n'agrandit pas la ligne (20,16 px) */ @media (prefers-reduced-motion:reduce){.monlopin-article .sommaire-chevron{transition:none}} /* ========================================================================== 4. Corps de texte (CSS additionnel, « Texte courant » et « Titres de section ») ========================================================================== */ .monlopin-article .art-corps{margin:49px 0 0;font-size:16px;line-height:1.7} .monlopin-article .art-corps p{margin:0 0 1.3em} .monlopin-article .art-corps :is(h2,h3,h4){font-family:var(--ml-titres);font-weight:600;color:var(--ml-sauge);line-height:1.25;scroll-margin-top:140px} /* 20 px et plus : grand texte, la sauge de charte suffit (4,01:1) */ .monlopin-article .art-corps h2{font-size:1.6rem;margin:1.8em 0 .5em} .monlopin-article .art-corps h3{font-size:1.3rem;margin:1.5em 0 .4em} .monlopin-article .art-corps h4{font-size:1.1rem;margin:1.3em 0 .4em;color:var(--ml-sauge-texte)} .monlopin-article .art-corps a{color:var(--ml-terracotta-texte);text-decoration:none} /* comme le modèle 603 : liens en italique, sans soulignement */ .monlopin-article .art-corps a:hover{color:var(--ml-terre);text-decoration:underline} .monlopin-article .art-corps img{max-width:100%;height:auto} @media (max-width:767px){ .monlopin-article .art-corps :is(h2,h3,h4){scroll-margin-top:250px} /* en-tête collant de 230 px sur mobile, comme Elementor */ } /* ========================================================================== 5. Listes à puces (puce terracotta), sauf carte TL;DR et étapes ========================================================================== */ .monlopin-article .art-corps ul:not(.lopin-tldr ul){list-style:none;margin:0 0 1.3em;padding:0} .monlopin-article .art-corps ul:not(.lopin-tldr ul) li{position:relative;padding-left:22px;margin-bottom:.6em;line-height:1.6} .monlopin-article .art-corps ul:not(.lopin-tldr ul) li::before{content:"";position:absolute;left:2px;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--ml-terracotta)} /* ========================================================================== 6. Carte « À retenir » (lopin-tldr) ========================================================================== */ .monlopin-article .lopin-tldr{background:#fff;border:1px solid var(--ml-creme-fonce);border-left:4px solid var(--ml-sauge);border-radius:0 16px 16px 0;padding:22px 28px;margin:28px 0} .monlopin-article .art-corps .lopin-tldr h2{font-family:var(--ml-titres);font-weight:600;font-size:1.2rem;line-height:1.25;color:var(--ml-terre);margin:0 0 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap} .monlopin-article .lopin-tldr h2 strong{font-family:var(--ml-texte);font-size:.6rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ml-sauge-texte);background:rgba(107,122,82,.12);padding:.3em .7em;border-radius:999px} .monlopin-article .lopin-tldr ul{list-style:none;margin:0;padding:0} .monlopin-article .lopin-tldr li{position:relative;padding-left:26px;margin:0 0 12px;font-family:var(--ml-texte);font-size:.95rem;color:var(--ml-terre);line-height:1.6} .monlopin-article .lopin-tldr li::before{content:"✓";content:"✓" / "";position:absolute;left:0;top:0;color:var(--ml-terracotta);font-weight:800} .monlopin-article .lopin-tldr li:last-child{margin-bottom:0} /* ========================================================================== 7. « En bref » : accroche de section (lopin-enbref) ========================================================================== */ .monlopin-article .art-corps .lopin-enbref{font-style:italic;font-weight:600;color:var(--ml-terre);font-size:.9rem;line-height:1.7;background:rgba(201,123,74,.06);border-left:3px solid var(--ml-terracotta);padding:10px 16px;margin:.6em 0 1.3em;border-radius:0 8px 8px 0} /* 1,3 em : la règle des paragraphes du modèle 603 l'emporte en ligne */ /* ========================================================================== 8. Bloc statistique (lopin-stat, lopin-stat-num, lopin-stat-source) ========================================================================== */ .monlopin-article .lopin-stat{position:relative;background:var(--ml-creme-fonce);border-radius:var(--ml-rayon-encart);padding:22px 26px 22px 150px;margin:1.6em 0} .monlopin-article .art-corps .lopin-stat p{margin:0 0 .5em} .monlopin-article .art-corps .lopin-stat p:last-child{margin-bottom:0} /* comme en ligne, avec ou sans source */ .monlopin-article .art-corps .lopin-stat .lopin-stat-num{position:absolute;left:26px;top:20px;width:110px;margin:0;font-family:var(--ml-titres);font-weight:600;font-size:2.1rem;line-height:1.05;color:var(--ml-terracotta);white-space:nowrap} /* grand chiffre : teinte d'origine */ .monlopin-article .art-corps .lopin-stat .lopin-stat-source{font-size:.82rem;color:var(--ml-sauge-clair-texte);margin:0} @media (max-width:600px){ .monlopin-article .lopin-stat{padding:20px 22px} .monlopin-article .art-corps .lopin-stat .lopin-stat-num{position:static;width:auto;margin:0 0 8px} } /* Images et légendes : comme Hello Elementor en ligne. Sans theme.json, WordPress enveloppe une image alignée dans un div.wp-block-image (balisage classique) : la marge passe de la figure au div. */ .monlopin-article .art-corps div.wp-block-image{margin:0 0 1em} .monlopin-article .art-corps .wp-block-image .wp-element-caption{margin:8px 0 16px;font-size:1rem;line-height:1.4;font-style:italic;color:#333} /* ========================================================================== 9. Tableaux comparatifs ========================================================================== */ .monlopin-article .art-corps .wp-block-table{margin:1.8em 0} .monlopin-article .art-corps .wp-block-table table{width:100%;border-collapse:collapse;font-family:var(--ml-texte);font-size:.92rem;line-height:1.5;border:1px solid #C9B79A;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(62,52,43,.06);margin:0 0 15px} /* 15 px sous le tableau, comme Hello Elementor (Kadence : 1,5 em) */ .monlopin-article .art-corps .wp-block-table th{background:var(--ml-sauge);color:#fff;font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;text-align:left;padding:14px 16px} /* blanc sur sauge : 4,63:1 */ .monlopin-article .art-corps .wp-block-table td{padding:13px 16px;color:var(--ml-terre);border-bottom:1px solid var(--ml-creme-fonce)} .monlopin-article .art-corps .wp-block-table td:first-child{font-weight:700;color:var(--ml-terre)} .monlopin-article .art-corps .wp-block-table tbody tr:nth-child(odd) td{background:#fff} .monlopin-article .art-corps .wp-block-table tbody tr:nth-child(even) td{background:var(--ml-creme)} .monlopin-article .art-corps .wp-block-table tbody tr:last-child td{border-bottom:none} @media (max-width:600px){ .monlopin-article .art-corps .wp-block-table table{font-size:.85rem} .monlopin-article .art-corps .wp-block-table :is(th,td){padding:10px 11px} } /* ========================================================================== 10. Étapes pas à pas (ol.lopin-steps, cartes blanches numérotées) ========================================================================== */ .monlopin-article .art-corps ol.lopin-steps{list-style:none;counter-reset:lopin-step;margin:1.4em 0;padding:0} .monlopin-article .art-corps ol.lopin-steps li{counter-increment:lopin-step;position:relative;padding:14px 18px 14px 56px;margin:0 0 .9em;line-height:1.6;min-height:32px;list-style:none;background:#fff;border:1px solid var(--ml-creme-fonce);border-radius:12px;box-shadow:0 1px 3px rgba(62,52,43,.05)} .monlopin-article .art-corps ol.lopin-steps li::marker{content:none} .monlopin-article .art-corps ol.lopin-steps li::before{content:counter(lopin-step);position:absolute;left:14px;top:14px;width:30px;height:30px;background:var(--ml-sauge);color:#fff;font-family:var(--ml-titres);font-weight:600;font-size:.95rem;line-height:1;border-radius:50%;display:flex;align-items:center;justify-content:center} /* ========================================================================== 11. Encart « Côté terrier » (lopin-terrier, lopin-terrier-label) : mot de la mascotte ========================================================================== */ .monlopin-article .lopin-terrier{background-color:var(--ml-terre);background-image:url("data:image/svg+xml,");background-repeat:no-repeat;background-position:left 24px center;background-size:auto 56%;color:var(--ml-creme);border-radius:16px;padding:24px 28px 24px 124px;margin:2em 0;font-family:var(--ml-texte)} .monlopin-article .art-corps .lopin-terrier p{margin:0;font-style:italic;line-height:1.6} .monlopin-article .art-corps .lopin-terrier .lopin-terrier-label{font-style:normal;font-family:var(--ml-titres);font-weight:600;font-size:.7rem;line-height:1.6;letter-spacing:.12em;text-transform:uppercase;color:var(--ml-terracotta-sur-terre);margin:0 0 4px} @media (max-width:600px){ .monlopin-article .lopin-terrier{padding:92px 22px 22px;background-position:center 20px;background-size:auto 58px} } /* ========================================================================== 11 bis. « Testé chez nous » (lopin-teste, lopin-teste-label) : preuve de terrain, photo facultative. Module créé le 22/10/2026 (voile d'hivernage, paillage) : à valider par Olivia. Deux colonnes sur ordinateur : la photo flotte à gauche (40 %), le texte qui la suit est un contexte de mise en forme (flow-root) et ne passe jamais dessous ; pas de grille, Kadence glisse un conteneur intérieur dans les groupes. Sur mobile, la photo passe au-dessus du texte. ========================================================================== */ .monlopin-article .art-corps .lopin-teste{display:flow-root;background:#fff;border:1px solid var(--ml-creme-fonce);border-radius:var(--ml-rayon-encart);padding:22px 26px;margin:2em 0;color:var(--ml-terre)} .monlopin-article .art-corps .lopin-teste p{margin:0;font-size:.95rem;line-height:1.65} .monlopin-article .art-corps .lopin-teste .lopin-teste-label{display:flex;width:fit-content;align-items:center;gap:7px;margin:0 0 14px;padding:.35em .85em;border-radius:999px;background:rgba(107,122,82,.12);color:var(--ml-sauge-texte);font-size:.68rem;font-weight:800;line-height:1.4;letter-spacing:.12em;text-transform:uppercase} /* sauge-texte sur ce fond : 5,08:1 */ .monlopin-article .art-corps .lopin-teste .lopin-teste-label::before{content:"✓";content:"✓" / "";color:var(--ml-terracotta-texte);font-size:.9rem;letter-spacing:0} .monlopin-article .art-corps .lopin-teste .wp-block-image{float:left;width:40%;margin:4px 22px 10px 0} .monlopin-article .art-corps .lopin-teste .wp-block-image img{display:block;width:100%;height:auto;border-radius:10px} .monlopin-article .art-corps .lopin-teste .wp-block-image ~ p{display:flow-root} /* deux colonnes : le texte reste dans la sienne, jamais sous la photo */ @media (max-width:600px){ .monlopin-article .art-corps .lopin-teste{padding:20px 22px} .monlopin-article .art-corps .lopin-teste .wp-block-image{float:none;width:100%;margin:0 0 16px} } /* ========================================================================== 11 ter. Grille de cartes (ul.lopin-cartes) : une carte par élément, nom en gras puis une ligne. Module créé le 22/10/2026 (hub aromatiques, 9 cartes) : à valider par Olivia. Liste native : pas de conteneur intérieur de Kadence, la grille porte sur la liste elle-même. ========================================================================== */ .monlopin-article .art-corps ul.lopin-cartes.wp-block-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:1.6em 0} .monlopin-article .art-corps ul.lopin-cartes.wp-block-list li{margin:0;padding:14px 16px;background:#fff;border:1px solid var(--ml-creme-fonce);border-top:3px solid var(--ml-sauge);border-radius:var(--ml-rayon-encart);font-size:.88rem;line-height:1.5;color:var(--ml-terre)} .monlopin-article .art-corps ul.lopin-cartes.wp-block-list li::before,.monlopin-article .art-corps ul.lopin-cartes.wp-block-list li br{display:none} .monlopin-article .art-corps ul.lopin-cartes.wp-block-list li strong{display:block;margin-bottom:2px;font-family:var(--ml-titres);font-size:1.05rem;font-weight:600} @media (max-width:600px){ .monlopin-article .art-corps ul.lopin-cartes.wp-block-list{grid-template-columns:repeat(2,minmax(0,1fr))} } /* ========================================================================== 12. FAQ (blocs Détails sans classe, contrat figé le 22/10/2026) ========================================================================== */ .monlopin-article .art-corps .wp-block-details{background:#fff;border:1px solid var(--ml-creme-fonce);border-radius:12px;margin:0 0 12px;overflow:hidden} .monlopin-article .art-corps .wp-block-details summary{list-style:none;cursor:pointer;position:relative;padding:16px 50px 16px 20px;font-family:var(--ml-titres);font-weight:600;font-size:1.05rem;color:var(--ml-terre);line-height:1.35} .monlopin-article .art-corps .wp-block-details summary::-webkit-details-marker{display:none} .monlopin-article .art-corps .wp-block-details summary::after{content:"+";content:"+" / "";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-family:var(--ml-texte);font-size:1.5rem;font-weight:400;line-height:1;color:var(--ml-terracotta)} .monlopin-article .art-corps .wp-block-details[open] summary::after{content:"\2212";content:"\2212" / ""} .monlopin-article .art-corps .wp-block-details summary:hover{color:var(--ml-sauge-texte)} .monlopin-article .art-corps .wp-block-details summary:focus-visible{outline:2px solid var(--ml-terracotta-texte);outline-offset:-4px} .monlopin-article .art-corps .wp-block-details p{margin:0;padding:0 20px 18px;color:var(--ml-terre);line-height:1.6} /* ========================================================================== 13. Calendrier de fiche (table.cal, CSS additionnel « Calendrier fiche ») ========================================================================== */ .monlopin-article .cal-wrap{margin:18px 0;border:1px solid var(--ml-creme-fonce);border-radius:var(--ml-rayon-encart);overflow:hidden;background:#fff} .monlopin-article table.cal{width:100%;border-collapse:collapse;font-size:.8rem;line-height:1.4;text-align:center;margin-bottom:-1px} .monlopin-article table.cal th{background:var(--ml-creme-fonce);color:var(--ml-terre);padding:9px 4px;font-weight:700;font-size:.72rem;border:none} .monlopin-article table.cal th:first-child{text-align:left;padding-left:16px;width:128px} .monlopin-article table.cal td{background:#fff;border:none;border-top:1px solid var(--ml-creme-fonce);padding:8px 4px;color:transparent} .monlopin-article table.cal td:first-child{text-align:left;padding-left:16px;font-weight:700;color:var(--ml-terre)} .monlopin-article table.cal td.semis{background:rgba(142,156,115,.55)} .monlopin-article table.cal td.plant{background:rgba(201,123,74,.55)} .monlopin-article table.cal td.recolte{background:rgba(107,122,82,.85)} .monlopin-article .cal-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:.78rem;margin-top:10px;color:var(--ml-terre)} .monlopin-article .cal-legend span{display:inline-flex;align-items:center;gap:7px;font-weight:700} .monlopin-article .cal-legend .lg{width:16px;height:16px;border-radius:4px;display:inline-block} /* Même calendrier en bloc Tableau natif (classe « cal » sur la figure, cellules marquées au rendu par inc/tableaux.php) : mêmes valeurs, plus spécifiques que les tableaux comparatifs (section 9). */ .monlopin-article .art-corps .wp-block-table.cal{margin:18px 0;border:1px solid var(--ml-creme-fonce);border-radius:var(--ml-rayon-encart);overflow:hidden;background:#fff} .monlopin-article .art-corps .wp-block-table.cal table{margin:0;border:none;border-radius:0;box-shadow:none;font-size:.8rem;line-height:1.4;text-align:center} .monlopin-article .art-corps .wp-block-table.cal thead{border-bottom:none} /* filet de 3 px du bloc Tableau de WordPress : absent du calendrier d'origine */ .monlopin-article .art-corps .wp-block-table.cal thead th{background:var(--ml-creme-fonce);color:var(--ml-terre);padding:9px 2px;font-weight:700;font-size:.72rem;letter-spacing:0;text-transform:none;text-align:center;border:none} .monlopin-article .art-corps .wp-block-table.cal thead th:first-child{text-align:left;padding-left:16px;width:128px} .monlopin-article .art-corps .wp-block-table.cal tbody tr td{background:#fff;border:none;border-top:1px solid var(--ml-creme-fonce);padding:8px 2px;color:transparent;font-size:0;font-weight:400} /* mot de la cellule : lu, pas affiché, sans élargir la ligne */ .monlopin-article .art-corps .wp-block-table.cal tbody tr td:first-child{text-align:left;padding-left:16px;font-size:.8rem;font-weight:700;color:var(--ml-terre)} .monlopin-article .art-corps .wp-block-table.cal td.semis{background:rgba(142,156,115,.55)} .monlopin-article .art-corps .wp-block-table.cal td.plant{background:rgba(201,123,74,.55)} .monlopin-article .art-corps .wp-block-table.cal td.recolte{background:rgba(107,122,82,.85)} .monlopin-article .art-corps .wp-block-table.cal td.fleur{background:rgba(201,123,74,.22)} /* floraison : ajout pour la fiche persil */ @media (max-width:600px){ .monlopin-article .art-corps .wp-block-table.cal thead th:first-child,.monlopin-article .art-corps .wp-block-table.cal tbody tr td:first-child{width:84px;padding-left:10px} .monlopin-article .art-corps .wp-block-table.cal tbody tr td:first-child{font-size:.72rem} .monlopin-article .art-corps .wp-block-table.cal thead th{padding:8px 0;font-size:.5rem;white-space:nowrap} } /* ========================================================================== 14. Encadré auteur (inc/article.php, monlopin_encadre_auteur) ========================================================================== */ .monlopin-article .art-auteur{display:flex;align-items:flex-start;gap:20px;margin:42px 0 0;padding:9px 10px 10px;background:var(--ml-creme-fonce);border-radius:var(--ml-rayon-carte)} .monlopin-article .auteur-photo{flex:none;width:62px;height:62px;border-radius:50%;object-fit:cover} .monlopin-article .auteur-texte{min-width:0} .monlopin-article .auteur-nom{margin:8px 0 5px;font-family:var(--ml-titres);font-weight:600;font-size:16px;line-height:1.75;color:var(--ml-sauge-texte)} .monlopin-article .auteur-bio{margin:0 0 11px;font-size:14px;line-height:1.85;color:var(--ml-terre)} .monlopin-article .auteur-bouton{display:inline-block;padding:7px;border:2px solid var(--ml-sauge);border-radius:18px;font-size:12px;font-weight:600;line-height:1;letter-spacing:.5px;color:var(--ml-sauge);text-decoration:none} .monlopin-article .auteur-bouton:hover{background:var(--ml-sauge);color:var(--ml-creme)} @media (max-width:767px){ .monlopin-article .auteur-nom{font-size:15px} .monlopin-article .art-auteur{margin:42px -36px 0} /* pleine largeur, comme le modèle 603 sur mobile */ } /* ========================================================================== 15. « À lire aussi » (pages piliers) ========================================================================== */ .monlopin-article .related{margin:48px 0 0} .monlopin-article .related-title{font-family:var(--ml-titres);font-weight:600;font-size:24px;line-height:1.25;margin:0 0 16px} .monlopin-article .related-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))} .monlopin-article .rel-card{display:block;background:#fff;border:1px solid var(--ml-creme-fonce);border-radius:var(--ml-rayon-carte);overflow:hidden;color:var(--ml-terre);text-decoration:none} .monlopin-article .rel-thumb img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover} .monlopin-article .rel-body{padding:12px 16px 16px} .monlopin-article .rel-cat{min-height:1.5em;font-size:12px;font-weight:700;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--ml-sauge-texte);margin:0 0 4px} .monlopin-article .rel-title{font-family:var(--ml-titres);font-weight:600;font-size:18px;line-height:1.3;margin:0} /* ========================================================================== 16. Tableaux en cartes sous 640 px (classe « tableau-cartes », rôles ARIA et data-label posés par inc/tableaux.php) : une carte par ligne, 1re cellule en titre, puis « Libellé : valeur ». L'en-tête reste lu par les lecteurs d'écran. ========================================================================== */ @media (max-width:640px){ .monlopin-article .art-corps .wp-block-table.tableau-cartes{border:0;overflow:visible} .monlopin-article .art-corps .wp-block-table.tableau-cartes :is(table,tbody,tr,td){display:block;min-width:0;width:auto} .monlopin-article .art-corps .wp-block-table.tableau-cartes table{border:0;box-shadow:none} .monlopin-article .art-corps .wp-block-table.tableau-cartes thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .monlopin-article .art-corps .wp-block-table.tableau-cartes tr{background:#fff;border:1px solid var(--ml-sauge-clair);border-radius:6px;padding:14px 18px;margin:0 0 12px} .monlopin-article .art-corps .wp-block-table.tableau-cartes td{padding:4px 0;border:0;font-size:15px;line-height:1.55;background:none} .monlopin-article .art-corps .wp-block-table.tableau-cartes td:first-child{font-family:var(--ml-titres);font-weight:600;font-size:19px;line-height:1.3;padding:0 0 10px;margin:0 0 6px;border-bottom:1px solid var(--ml-sauge-clair)} .monlopin-article .art-corps .wp-block-table.tableau-cartes td:first-child[data-label]::before{content:attr(data-label);content:attr(data-label) / "";display:block;font-family:var(--ml-texte);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ml-sauge-texte);margin:0 0 4px} .monlopin-article .art-corps .wp-block-table.tableau-cartes td:not(:first-child)[data-label]::before{content:attr(data-label) "\00a0: ";content:attr(data-label) "\00a0: " / "";font-weight:700;color:var(--ml-sauge-texte)} .monlopin-article .art-corps .wp-block-table.tableau-cartes td:empty{display:none} }