, jamais d'image, jamais
de PDF. C'est le seul format qu'un moteur génératif sait relire ligne à ligne.
Le style s'applique aussi bien à `.tbl-prix` posé à la main qu'à la variation
« Tableau de prix » d'un bloc Tableau. */
.tbl-prix,.is-style-mjrt-prix{margin:clamp(24px,2.6vw,34px) 0}
.tbl-prix table,.is-style-mjrt-prix table,.entry-content .tbl-prix table,.entry-content .is-style-mjrt-prix table{
width:100%;min-width:460px;border-collapse:collapse;background:var(--blanc);border:1px solid var(--ligne);
border-radius:var(--r-card);overflow:hidden;font-size:15px;margin:0}
.tbl-prix th,.is-style-mjrt-prix th,.entry-content .tbl-prix th,.entry-content .is-style-mjrt-prix th{
background:var(--graphite);color:#fff;font-family:var(--ttl);font-weight:700;font-size:13px;
letter-spacing:.03em;text-transform:uppercase;padding:13px 16px;border-bottom:0;vertical-align:bottom}
/* Unité de l'en-tête (« € TTC / m² ») : saisie en italique dans l'éditeur,
rendue en seconde ligne discrète. La cliente n'a aucune classe à poser. */
.tbl-prix th em,.is-style-mjrt-prix th em{display:block;font-style:normal;font-family:var(--txt);font-weight:500;
font-size:12px;letter-spacing:0;text-transform:none;color:#C4BDB7;margin-top:3px}
.tbl-prix td,.is-style-mjrt-prix td,.entry-content .tbl-prix td,.entry-content .is-style-mjrt-prix td{
padding:13px 16px;border-bottom:1px solid var(--ligne);vertical-align:top;line-height:1.5}
.tbl-prix tbody tr:nth-child(even),.is-style-mjrt-prix tbody tr:nth-child(even){background:var(--ivoire)}
.tbl-prix tbody tr:last-child td,.is-style-mjrt-prix tbody tr:last-child td{border-bottom:0}
/* Colonne de prix : dernière colonne par convention, alignée à droite et en
police de titre pour que les montants se comparent d'un coup d'œil. */
.tbl-prix th:last-child,.is-style-mjrt-prix th:last-child,
.tbl-prix td:last-child,.is-style-mjrt-prix td:last-child{text-align:right}
.tbl-prix td:last-child,.is-style-mjrt-prix td:last-child,
.entry-content .tbl-prix td:last-child,.entry-content .is-style-mjrt-prix td:last-child{
font-family:var(--ttl);font-weight:800;letter-spacing:-.02em;font-size:16px;white-space:nowrap;
font-variant-numeric:tabular-nums}
.tbl-prix figcaption,.is-style-mjrt-prix figcaption{margin-top:10px}
/* Défilement horizontal sous 620 px — sur le wrapper quand il y en a un
(figure.wp-block-table, .tbl-w, .tbl-prix), sur le tableau lui-même sinon.
Le
reste un dans le DOM : la sémantique n'est jamais sacrifiée
à la mise en page. */
@media (max-width:620px){
.tbl-prix,.is-style-mjrt-prix,.entry-content .wp-block-table,.entry-content .tbl-w{
overflow-x:auto;-webkit-overflow-scrolling:touch}
.entry-content > table{display:block;overflow-x:auto;max-width:100%}
.tbl-prix th,.is-style-mjrt-prix th,.tbl-prix td,.is-style-mjrt-prix td{padding:11px 13px}
/* Sélecteurs alignés sur ceux de la règle de base : une requête média
n'ajoute aucune spécificité, il faut donc reprendre `.entry-content …`
sous peine de ne rien surcharger du tout. */
/* `overflow:hidden` sur le (posé pour arrondir ses coins) en ferait
un conteneur de défilement à lui seul, ce qui casse le collage de la
colonne de prix. L'arrondi et le cadre passent donc sur l'enveloppe. */
.tbl-prix,.is-style-mjrt-prix{border:1px solid var(--ligne);border-radius:var(--r-card)}
/* `border-collapse:collapse` empêche Chrome de coller une cellule : on passe
en `separate` sans espacement, le rendu est identique et la colonne colle. */
.tbl-prix table,.is-style-mjrt-prix table,
.entry-content .tbl-prix table,.entry-content .is-style-mjrt-prix table{
min-width:520px;overflow:visible;border:0;border-radius:0;border-collapse:separate;border-spacing:0}
/* La colonne de prix reste figée à droite pendant que la description défile :
un prix qu'il faut aller chercher hors écran ne sert à personne, et c'est
la seule colonne que le lecteur compare vraiment d'une ligne à l'autre. */
.tbl-prix th:last-child,.is-style-mjrt-prix th:last-child,
.tbl-prix td:last-child,.is-style-mjrt-prix td:last-child,
.entry-content .tbl-prix td:last-child,.entry-content .is-style-mjrt-prix td:last-child{
position:sticky;right:0;background:var(--blanc);box-shadow:-9px 0 12px -8px rgba(23,24,26,.30)}
.tbl-prix thead th:last-child,.is-style-mjrt-prix thead th:last-child{background:var(--graphite)}
.tbl-prix tbody tr:nth-child(even) td:last-child,
.is-style-mjrt-prix tbody tr:nth-child(even) td:last-child,
.entry-content .tbl-prix tbody tr:nth-child(even) td:last-child,
.entry-content .is-style-mjrt-prix tbody tr:nth-child(even) td:last-child{background:var(--ivoire)}
}
/* ---------- LISTE À COCHER ----------
Items validés. La coche est une image de fond en data: URI — aucun appel
réseau, aucun caractère typographique dont la présence dépend de la police
système, et un qui reste un pour les lecteurs d'écran. */
.li-check,.is-style-mjrt-check,
.entry-content .li-check,.entry-content .is-style-mjrt-check{list-style:none;padding-left:0;margin:0 0 18px}
.li-check li,.is-style-mjrt-check li,.entry-content .li-check li,.entry-content .is-style-mjrt-check li{
position:relative;padding-left:32px;margin:0 0 10px;line-height:1.55}
.li-check li::before,.is-style-mjrt-check li::before{content:"";position:absolute;left:0;top:2px;
width:21px;height:21px;border-radius:50%;background-color:var(--rouge-pale);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B03720' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
background-size:13px 13px;background-position:center;background-repeat:no-repeat}
/* ---------- ÉTAPES NUMÉROTÉES ----------
Une liste ordonnée mise en avant : le numéro sort du texte, chaque étape est
un fragment autonome. Reste une : l'ordre est porté par le balisage. */
.ol-etapes,.is-style-mjrt-etapes,
.entry-content .ol-etapes,.entry-content .is-style-mjrt-etapes{list-style:none;padding-left:0;
margin:clamp(22px,2.4vw,30px) 0;counter-reset:mjrt-etape}
.ol-etapes li,.is-style-mjrt-etapes li,.entry-content .ol-etapes li,.entry-content .is-style-mjrt-etapes li{
counter-increment:mjrt-etape;position:relative;padding:2px 0 2px 54px;margin:0 0 18px;min-height:38px;
line-height:1.6}
.ol-etapes li::before,.is-style-mjrt-etapes li::before{content:counter(mjrt-etape);
position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;background:var(--rouge-cta);color:#fff;
font-family:var(--ttl);font-weight:800;font-size:17px;display:grid;place-items:center;
box-shadow:var(--sh-red)}
.ol-etapes li strong,.is-style-mjrt-etapes li strong{display:block;font-family:var(--ttl);font-size:17px;
letter-spacing:-.02em;margin-bottom:2px}
.ol-etapes li::marker,.is-style-mjrt-etapes li::marker{content:none}
/* Titres rendus par un bloc à l'intérieur de la colonne d'article — FAQ,
articles liés, signature. Ils suivent l'échelle du corps d'article et non
celle des titres de section pleine largeur : dans une colonne de 70ch, un h2
à 44 px écrase tout ce qui l'entoure. */
.art .sec-head{margin-bottom:16px}
.art .sec-head h2{font-size:clamp(22px,2.2vw,29px);margin:clamp(30px,3vw,44px) 0 0}
/* ---------- ANCRES ----------
Les titres du contenu portent une ancre slugifiée. Sans marge de défilement,
l'en-tête collant recouvre le titre visé quand on arrive par un lien partagé. */
.entry-content h2[id],.entry-content h3[id],.entry-content h4[id]{scroll-margin-top:calc(var(--pv) + 96px)}
/* ================================================================
============ INDEX DU BLOG ET COCON ==========================
================================================================ */
/* ---------- SOMMAIRE DES SIX RUBRIQUES ----------
De vrais liens d'ancre, pas des pastilles JavaScript : c'est la carte du blog,
et elle doit exister pour un crawler qui n'exécute rien. */
.silo-nav{margin-top:clamp(22px,2.6vw,34px);background:var(--ivoire);border:1px solid var(--ligne);
border-radius:var(--r-card);padding:20px 22px}
.silo-nav-t{font-family:var(--ttl);font-weight:800;font-size:12px;letter-spacing:.11em;text-transform:uppercase;
color:var(--gris);margin:0 0 12px}
.silo-nav ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 14px}
.silo-nav li{margin:0;min-width:0}
.silo-nav a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;
padding:8px 14px;border-radius:var(--r-pill);background:var(--blanc);border:1.5px solid var(--ligne);
text-decoration:none;font-weight:600;font-size:14.5px;line-height:1.3;transition:.16s}
.silo-nav a:hover{border-color:var(--rouge);color:var(--rouge-fonce)}
.silo-nav a span{flex:none;font-family:var(--ttl);font-size:12.5px;font-weight:800;color:var(--rouge-fonce);
background:var(--rouge-pale);border-radius:var(--r-pill);padding:2px 9px}
@media (max-width:900px){ .silo-nav ul{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .silo-nav ul{grid-template-columns:1fr} }
/* ---------- UNE BRANCHE DU COCON ---------- */
.silos{display:grid;gap:clamp(30px,3.6vw,52px)}
.silo{scroll-margin-top:calc(var(--pv) + 96px);padding-top:clamp(6px,1vw,12px);border-top:3px solid var(--rouge-pale)}
.silo-hd{margin-bottom:clamp(16px,1.8vw,24px)}
.silo-t{font-size:clamp(24px,2.6vw,34px);margin:12px 0 8px}
.silo-t a{text-decoration:none}
.silo-t a:hover{color:var(--rouge-fonce)}
.silo-d{margin:0;color:var(--gris);font-size:16px;line-height:1.6;max-width:78ch}
/* Tête de silo : la carte la plus visible de la rubrique, c'est elle qui porte
l'autorité thématique et vers laquelle pointent tous les clusters. */
.silo-tete{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:0;background:var(--blanc);
border:1px solid var(--ligne);border-radius:var(--r-card);box-shadow:var(--sh-1);overflow:hidden;
text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease}
.silo-tete:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.silo-ph{display:block}
.silo-ph img{width:100%;height:100%;min-height:150px;object-fit:cover}
.silo-tb{display:block;padding:20px 22px}
.silo-tb h3{font-size:clamp(18px,1.8vw,22px);margin:0 0 8px}
.silo-tete:hover h3{color:var(--rouge-fonce)}
.silo-tb .gal-x{display:block;margin:0 0 4px}
@media (max-width:720px){ .silo-tete{grid-template-columns:1fr} .silo-ph img{aspect-ratio:16/9;min-height:0} }
/* Les clusters en liste et non en vignettes : six rubriques de cinq articles
feraient trente cartes. Chaque item porte titre + résumé, donc se tient seul
s'il est cité hors de son contexte. */
.silo-l{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:2px}
.silo-l li{margin:0;border-top:1px solid var(--ligne);padding:12px 2px}
.silo-l li:first-child{border-top:0}
.silo-l a{display:inline-flex;align-items:center;min-height:32px;font-family:var(--ttl);font-weight:700;
font-size:16.5px;letter-spacing:-.02em;line-height:1.3;text-decoration:none}
.silo-l a:hover{color:var(--rouge-fonce);text-decoration:underline;text-underline-offset:3px}
.silo-l span{display:block;font-size:14.5px;color:var(--gris);line-height:1.5;margin-top:3px}
.silo-plus{margin:16px 0 0}
/* ---------- « DANS LA MÊME SÉRIE » ----------
Encart de fin d'article : la tête de silo, les frères, et la position du
lecteur. Entièrement servi en HTML, y compris la position. */
.serie{background:var(--ivoire);border:1px solid var(--ligne);border-radius:var(--r-lg);
padding:clamp(20px,2.4vw,30px);margin:clamp(28px,3vw,40px) 0 0}
.serie-k{display:inline-flex;align-items:center;gap:8px;font-family:var(--ttl);font-size:11.5px;font-weight:800;
letter-spacing:.11em;text-transform:uppercase;color:var(--rouge-fonce);margin:0 0 10px}
.serie-k svg{width:15px;height:15px}
.serie-t{font-size:clamp(20px,2vw,26px);margin:0 0 8px}
.serie-t a{text-decoration:none}
.serie-t a:hover{color:var(--rouge-fonce)}
.serie-d{margin:0 0 12px;font-size:14.5px;color:var(--gris);line-height:1.55}
.serie-pos{margin:0 0 16px;font-size:14.5px;color:#3B3D40}
.serie-pos b{font-family:var(--ttl);color:var(--rouge-fonce)}
.serie-l{list-style:none;margin:0;padding:0;counter-reset:s}
.serie-l li{counter-increment:s;margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
padding:9px 0 9px 34px;border-top:1px solid var(--ligne);position:relative;line-height:1.45}
.serie-l li:first-child{border-top:0}
.serie-l li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:11px;
font-family:var(--ttl);font-size:11.5px;font-weight:800;color:var(--gris);letter-spacing:.06em}
.serie-l a{font-weight:600;font-size:15.5px;text-decoration:none;min-height:32px;display:inline-flex;
align-items:center}
.serie-l a:hover{color:var(--rouge-fonce);text-decoration:underline;text-underline-offset:3px}
.serie-l .is-tete a{font-family:var(--ttl);font-weight:800;letter-spacing:-.02em;font-size:16.5px}
.serie-l .is-ici{background:var(--rouge-pale);border-radius:10px;margin-left:-8px;
padding-left:42px;padding-right:10px}
.serie-l .is-ici::before{left:8px;color:var(--rouge-fonce)}
.serie-n{font-family:var(--ttl);font-weight:800;letter-spacing:-.02em;font-size:16px;color:#5C2314}
.serie-b{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gris);
background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-pill);padding:2px 9px;
white-space:nowrap}
.serie-b--tete{color:var(--rouge-fonce);background:var(--rouge-pale);border-color:#F2D6CB}
.serie-l .is-ici .serie-b{color:var(--rouge-fonce);border-color:#F2D6CB}
/* ---------- DESCRIPTION D'ARCHIVE DE CATÉGORIE ----------
Contenu indexable et très souvent cité tel quel : il est rendu en HTML
complet, liens et paragraphes conservés, immédiatement sous le H1. */
.cat-intro{max-width:78ch}
.cat-intro > *:last-child{margin-bottom:0}
/* La description et l'article de référence qui la suit sont sur le même fond :
deux gouttières pleines à la suite creusaient un trou au milieu de la page. */
section.sec-intro{padding-bottom:0}
/* ---------- CARTE DE L'ARTICLE COURANT ---------- */
.gal-i--ici{border-color:var(--rouge);box-shadow:none}
.gal-ici{display:inline-block;margin-left:8px;font-size:11.5px;font-weight:700;letter-spacing:.04em;
text-transform:uppercase;color:var(--rouge-fonce)}
/* ================================================================
IMPRESSION
================================================================ */
@media print{
.topbar,.hdr,.mbar,.ft-social,.skip,.skip-link,.rprog,.est,.quiz,.frm{display:none!important}
body{padding:0;background:#fff;color:#000;font-size:12pt}
.wrap{width:auto}
/* Un bloc jamais révélé est un bloc jamais imprimé. */
[data-reveal]{opacity:1!important;transform:none!important;animation:none!important}
a[href^="http"]::after{content:" (" attr(href) ")";font-size:10pt;color:#555}
section{padding-block:12pt;break-inside:avoid}
/* Les composants éditoriaux à l'impression : plus d'ombre ni d'aplat sombre —
ils coûtent de l'encre et ressortent gris sur une imprimante noir et blanc —
mais un filet net, et jamais de coupure au milieu d'un encadré. */
.enc,.is-style-mjrt-retenir,.is-style-mjrt-definition,.is-style-mjrt-alerte,
.is-style-mjrt-chiffre,.is-style-mjrt-terrain,.serie,.silo-tete,.silo-nav,.author,.toc{
box-shadow:none!important;background:#fff!important;color:#000!important;
border:1px solid #999!important;border-left:4px solid #333!important;break-inside:avoid}
.enc-l,.serie-k{color:#000!important}
.enc-chiffre p,.is-style-mjrt-chiffre p,.enc-src{color:#333!important}
.enc-n{color:#000!important}
.enc-alerte::before,.is-style-mjrt-alerte::before{display:none}
.ol-etapes li::before,.is-style-mjrt-etapes li::before{background:#000!important;box-shadow:none!important}
/* Un tableau de prix qui déborde sur deux pages doit reporter ses en-têtes. */
.tbl-prix,.is-style-mjrt-prix,.entry-content .wp-block-table,.entry-content .tbl-w{overflow:visible!important}
.tbl-prix thead,.is-style-mjrt-prix thead,.entry-content thead{display:table-header-group}
.tbl-prix th,.is-style-mjrt-prix th{background:#fff!important;color:#000!important;border-bottom:2px solid #000!important}
.tbl-prix tbody tr:nth-child(even),.is-style-mjrt-prix tbody tr:nth-child(even){background:#F2F2F2!important}
.tbl-prix tr,.is-style-mjrt-prix tr{break-inside:avoid}
.tbl-prix th em,.is-style-mjrt-prix th em{color:#333!important}
/* Le sommaire ancré n'a aucun usage sur papier : il ne resterait qu'une
colonne de gauche vide sur toute la hauteur de l'article. */
.lay-toc{display:block}
.toc{display:none!important}
/* Les ancres internes ne servent à rien sur papier. */
.art a[href^="#"]::after{content:""}
}
/* ---------- MESSAGE D'ERREUR GLOBAL DE L'ESTIMATEUR ---------- */
.est-err{display:flex;align-items:flex-start;gap:8px;margin:2px 0 0;font-size:13.5px;
color:#93301A;font-weight:600;line-height:1.45}
.est-err[hidden]{display:none}
[data-mjrt-form-status]{margin:0;font-size:14.5px;font-weight:600;color:#93301A;line-height:1.5}
[data-mjrt-form-status]:empty{display:none}