/* ═══ ARTICLES DU BLOG — HABILLAGE (05/10/2026), chargé APRÈS article.css : les couleurs des métiers selon la charte (plus de
   violet pour les aides : sable neutre, comme sur la page du blog), la typographie de lecture, et l'habillage des composants que
   portent les articles (l'essentiel, les encadrés, les calculateurs, les tableaux, les questions, les appels). Seul l'habillage change :
   les scripts des calculateurs ne sont pas touchés. Sélecteurs plus forts que les <style> écrits dans les articles (html body …). ═══ */
html body main.rhart[data-metier]{--m:#E46627;--md:#8E3A0B;--mp:#FBE6DA;--mg:linear-gradient(135deg,#E8502F,#FF8C42)}
html body main.rhart[data-metier="pv"]{--m:#7BAF34;--md:#3E6412;--mp:#EAF3DD;--mg:linear-gradient(135deg,#5FB033,#356E15)}
html body main.rhart[data-metier="elec"]{--m:#EFCB33;--md:#7A5D00;--mp:#FCF4D3;--mg:linear-gradient(135deg,#E4B42E,#B88A06)}
html body main.rhart[data-metier="plomb"]{--m:#44A0D4;--md:#175A85;--mp:#DFF0FA;--mg:linear-gradient(135deg,#4A8FD4,#1F5F9E)}
html body main.rhart[data-metier="aides"]{--m:#A08A74;--md:#5A4A3C;--mp:#F3EEE8;--mg:linear-gradient(135deg,#C44A1F,#E85D2F)}
html body main.rhart{--encre:#1A1410;--texte:#3A322C;--gris:#6B6157;--filet:rgba(26,20,16,.09)}
/* la lecture */
html body main.rhart .art-body{font-family:'Manrope',sans-serif;color:var(--texte)}
html body main.rhart .art-body > p,html body main.rhart .art-body > ul li,html body main.rhart .art-body > ol li{font-size:18px !important;line-height:1.75 !important;color:var(--texte) !important}
html body main.rhart .art-body h2{font:800 clamp(26px,2.6vw,32px)/1.15 'Sora',sans-serif !important;letter-spacing:-.03em !important;color:var(--encre) !important;margin:64px 0 18px !important}
html body main.rhart .art-body h3{font:800 21px/1.25 'Sora',sans-serif !important;letter-spacing:-.02em !important;color:var(--encre) !important}
html body main.rhart .art-body h2 .h2num{display:flex;width:max-content;margin:0 0 12px;padding:6px 11px;border-radius:999px;background:var(--mp) !important;color:var(--md) !important;
  font:700 12px/1 'Sora',sans-serif !important;letter-spacing:.08em;-webkit-text-fill-color:currentColor !important}
/* le surligneur aux couleurs du métier, sous les mots en gras (Vicenté, 30/09 : « beaucoup plus joli » qu'un soulignement) */
html body main.rhart .art-body > p strong,html body main.rhart .art-body > ul li strong{color:var(--encre) !important;background:linear-gradient(180deg,transparent 60%,var(--mp) 60%,var(--mp) 92%,transparent 92%);padding:0 2px}
html body main.rhart .art-body > p a,html body main.rhart .art-body > ul li a{color:var(--md) !important;text-decoration:none !important;border-bottom:2px solid var(--m);font-weight:700}
html body main.rhart .art-body > ul{list-style:none !important;padding-left:0 !important}
html body main.rhart .art-body > ul > li{position:relative;padding-left:26px !important;margin:10px 0 !important}
html body main.rhart .art-body > ul > li::before{content:"";position:absolute;left:4px;top:.72em;width:9px;height:9px;border-radius:50%;background:var(--m);box-shadow:0 0 0 4px var(--mp)}
/* L'ESSENTIEL : une carte blanche, ses points cochés */
html body main.rhart .art-body .art-key{position:relative;margin:34px 0 !important;padding:28px 30px 24px !important;border-radius:26px !important;background:#fff !important;border:0 !important;
  box-shadow:0 30px 70px -48px rgba(20,24,31,.55),0 0 0 1px var(--filet) !important}
html body main.rhart .art-body .art-key::before{content:"";display:block;width:120px;height:6px;margin:0 0 16px;border-radius:4px;background:linear-gradient(90deg,#EFCB33 0 22%,transparent 22% 26%,#7BAF34 26% 60%,transparent 60% 64%,#44A0D4 64% 82%,transparent 82% 86%,#E46627 86%)}
html body main.rhart .art-body .art-key-t{font:800 13px/1 'Sora',sans-serif !important;letter-spacing:.12em !important;text-transform:uppercase;color:var(--md) !important;margin:0 0 14px !important}
html body main.rhart .art-body .art-key ul{list-style:none !important;margin:0 !important;padding:0 !important;display:grid;gap:10px}
html body main.rhart .art-body .art-key li{position:relative;padding:0 0 0 34px !important;margin:0 !important;font-size:16.5px !important;line-height:1.6 !important;color:var(--texte) !important}
html body main.rhart .art-body .art-key li::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:8px;background:var(--mp) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1410' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center/13px no-repeat !important;box-shadow:none !important}
/* les encadrés (conseil, attention, exemple, à lire aussi) */
html body main.rhart .art-body .art-callout,html body main.rhart .art-body .art-ex{border:0 !important;border-radius:22px !important;background:var(--mp) !important;padding:22px 24px !important;box-shadow:none !important;margin:30px 0 !important}
html body main.rhart .art-body .art-callout.warn{background:#FFF3DF !important}
html body main.rhart .art-body .art-callout-ic,html body main.rhart .art-body .art-ex-ic{width:42px !important;height:42px !important;border-radius:14px !important;background:#fff !important;box-shadow:0 10px 24px -14px rgba(20,24,31,.5) !important;font-size:20px !important}
html body main.rhart .art-body .art-readalso{border:0 !important;border-radius:20px !important;background:#fff !important;box-shadow:0 22px 50px -40px rgba(20,24,31,.6),0 0 0 1px var(--filet) !important;transition:transform .3s}
html body main.rhart .art-body .art-readalso:hover{transform:translateY(-3px)}
/* LES CALCULATEURS : un « instrument » — curseurs, choix et résultats aux couleurs du métier */
html body main.rhart .art-body .art-calc input[type=range]{-webkit-appearance:none;appearance:none;height:8px !important;border-radius:999px !important;background:#EFE9E2 !important;accent-color:var(--m);outline:0}
html body main.rhart .art-body .art-calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 6px var(--m),0 8px 18px -6px rgba(0,0,0,.45);cursor:grab}
html body main.rhart .art-body .art-calc input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:6px solid var(--m);box-shadow:0 8px 18px -6px rgba(0,0,0,.45)}
html body main.rhart .art-body .art-calc input[type=range]::-moz-range-progress{height:8px;border-radius:999px;background:var(--m)}
html body main.rhart .art-body .art-calc .rhseg{display:flex !important;flex-wrap:wrap;gap:4px !important;padding:5px !important;border-radius:16px !important;background:#F3EEE8 !important;border:0 !important}
html body main.rhart .art-body .art-calc .rhseg button{flex:1 1 auto;border:0 !important;border-radius:12px !important;background:transparent !important;color:var(--gris) !important;font:700 14px/1 'Sora',sans-serif !important;padding:13px 14px !important;box-shadow:none !important;transition:background .2s,color .2s,box-shadow .2s}
html body main.rhart .art-body .art-calc .rhseg button.on{background:#fff !important;color:var(--md) !important;box-shadow:0 10px 22px -12px rgba(20,24,31,.55),inset 0 0 0 1.5px var(--m) !important}
html body main.rhart .art-body .art-calc .rhlab b,html body main.rhart .art-body .art-calc .art-calc-tval{font:800 22px/1 'Sora',sans-serif !important;color:var(--encre) !important}
html body main.rhart .art-body .art-calc .art-calc-badge{background:var(--mp) !important;color:var(--md) !important;border:0 !important;border-radius:999px !important;font:700 11px/1 'Sora',sans-serif !important;letter-spacing:.12em !important;text-transform:uppercase;padding:8px 12px !important}
html body main.rhart .art-body .art-calc h3{font:800 clamp(22px,2.2vw,28px)/1.15 'Sora',sans-serif !important;letter-spacing:-.03em !important}
/* les tableaux */
html body main.rhart .art-body .art-tablewrap{border-radius:20px !important;overflow:auto;box-shadow:0 22px 50px -40px rgba(20,24,31,.6),0 0 0 1px var(--filet) !important;background:#fff !important;border:0 !important}
html body main.rhart .art-body .art-table th{background:var(--mp) !important;color:var(--md) !important;font:700 13px/1.3 'Sora',sans-serif !important;letter-spacing:.02em;border:0 !important;padding:14px 16px !important}
html body main.rhart .art-body .art-table td{border:0 !important;border-top:1px solid var(--filet) !important;padding:13px 16px !important;font-size:15.5px !important;color:var(--texte) !important;background:#fff !important}
html body main.rhart .art-body .art-table td:first-child{font-weight:700;color:var(--encre) !important}
/* les questions : les accordéons de la page du blog */
html body main.rhart .art-body .art-faq{display:grid;gap:10px;border:0 !important;background:none !important;padding:0 !important}
html body main.rhart .art-body .art-faq details{border:0 !important;border-radius:22px !important;background:#fff !important;box-shadow:0 20px 44px -36px rgba(20,24,31,.5),inset 0 0 0 1px var(--filet) !important;padding:0 !important;margin:0 !important}
html body main.rhart .art-body .art-faq details[open]{box-shadow:0 30px 60px -36px rgba(20,24,31,.55),inset 0 0 0 1.5px var(--m) !important}
html body main.rhart .art-body .art-faq summary{list-style:none;cursor:pointer;padding:20px 64px 20px 22px !important;font:800 16.5px/1.35 'Sora',sans-serif !important;color:var(--encre) !important;position:relative}
html body main.rhart .art-body .art-faq summary::-webkit-details-marker{display:none}
html body main.rhart .art-body .art-faq summary::after{content:"+";position:absolute;right:18px;top:50%;width:34px;height:34px;margin-top:-17px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--mp);color:var(--md);font:700 20px/1 'Sora',sans-serif;transition:transform .3s}
html body main.rhart .art-body .art-faq details[open] summary::after{transform:rotate(45deg);background:var(--mg);color:#fff}
html body main.rhart .art-body .art-faq-a{padding:0 22px 20px !important;font-size:15.5px !important;line-height:1.65 !important}
/* l'appel dans l'article : une carte claire, le bouton aux couleurs du métier (la seule carte sombre reste celle de fin de page) */
html body main.rhart .art-body .rh-cta{border-radius:28px !important;background:#fff !important;color:var(--texte) !important;border:0 !important;padding:30px 30px 26px !important;
  box-shadow:0 40px 80px -50px rgba(20,24,31,.55),0 0 0 1px var(--filet) !important;background-image:radial-gradient(420px 220px at 100% 0%,var(--mp),transparent 70%) !important}
html body main.rhart .art-body .rh-cta h3{color:var(--encre) !important}
html body main.rhart .art-body .rh-cta .k{color:var(--md) !important;font:700 12px/1 'Sora',sans-serif !important;letter-spacing:.1em;text-transform:uppercase}
html body main.rhart .art-body .rh-cta .sub,html body main.rhart .art-body .rh-cta .tel{color:var(--gris) !important}
html body main.rhart .art-body .rh-cta-btn.primary{background:var(--mg) !important;color:#fff !important;border:0 !important;border-radius:14px !important;box-shadow:0 18px 34px -18px rgba(20,14,4,.6) !important}
html body main.rhart .art-body .rh-cta-btn.ghost{background:#fff !important;color:var(--encre) !important;border:0 !important;border-radius:14px !important;box-shadow:inset 0 0 0 1.5px var(--filet) !important}
/* l'auteur, comme « Qui écrit ? » sur la page du blog */
html body main.rhart .art-authorbox{border:0 !important;border-radius:26px !important;background:#fff !important;box-shadow:0 30px 70px -50px rgba(20,24,31,.6),0 0 0 1px var(--filet) !important;padding:26px !important}
html body main.rhart .art-progress{background:var(--mg) !important;height:3px !important}
@media(max-width:900px){
  html body main.rhart .art-body > p,html body main.rhart .art-body > ul li{font-size:17px !important}
  html body main.rhart .art-body h2{margin-top:48px !important}
  html body main.rhart .art-body .art-key{padding:22px 20px !important}
}
/* le sommaire suit la lecture : la ligne active passe en pastel du métier (au lieu du dégradé plein, texte blanc) */
html body main.rhart .art-toc a::before{color:var(--md) !important}
html body main.rhart .art-toc a:hover{background:var(--mp) !important;color:var(--md) !important}

/* ═══ L'ARTICLE « FENÊTRE » (proposition 1 retenue le 05/10/2026) : le haut de l'article reprend la grande fenêtre du blog (sa photo nette à droite, floutée sous le
   titre, voile brun chaud) ; dessous, la colonne de lecture et, à droite, le sommaire en carte claire qui suit la lecture. ═══ */
html body main.rhart .art-hero,html body main.rhart .art-cover{display:none !important}
.rha-h{position:relative;margin:0 auto;padding:16px 16px 0}
.rha-hf{position:relative;border-radius:36px;overflow:hidden;isolation:isolate;background:#3A2A1C;box-shadow:0 60px 120px -60px rgba(20,14,4,.8);color:#fff;min-height:min(560px,70vh);display:flex;align-items:flex-end}
.rha-ph{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover}
/* CONTRASTE MESURÉ SUR LES 99 ARTICLES (05/10/2026) : chaque article a sa propre photo, souvent très claire (ciel, murs blancs,
   visuels sur fond clair) ; avec le voile du blog, le titre tombait à 2,5 et le chapeau à 2,6 sur une vingtaine d'articles. Copie floue
   plus sombre, voile plus dense et plus large, texte limité aux 62 % de gauche de la fenêtre. */
.rha-fl{position:absolute;inset:-30px;z-index:-2;width:calc(100% + 60px);height:calc(100% + 60px);object-fit:cover;filter:blur(20px) saturate(1.1) brightness(.62);
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 50%,rgba(0,0,0,.6) 62%,transparent 76%);mask-image:linear-gradient(90deg,#000 0,#000 50%,rgba(0,0,0,.6) 62%,transparent 76%)}
.rha-hf::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(48,30,16,.76) 0,rgba(48,30,16,.68) 44%,rgba(48,30,16,.36) 62%,rgba(48,30,16,0) 78%),linear-gradient(180deg,rgba(18,12,4,.6) 0,rgba(18,12,4,0) 170px)}
.rha-logo{position:absolute;left:clamp(24px,5vw,72px);top:48px;width:140px}.rha-logo img{width:100%;height:auto;display:block}
.rha-ht{position:relative;max-width:min(860px,62%);padding:180px clamp(24px,5vw,72px) 48px}
.rha-bc{font:600 13px/1 'Manrope',sans-serif;color:rgba(255,255,255,.82);margin-bottom:18px}.rha-bc a{color:#fff !important;text-decoration:none}.rha-bc span{margin:0 8px;opacity:.6}
.rha-k{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(20,14,4,.62);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);font:700 11px/1 'Sora',sans-serif;letter-spacing:.12em;text-transform:uppercase}
.rha-k::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--m)}
.rha-ht h1{font:800 clamp(32px,3.2vw,46px)/1.07 'Sora',sans-serif !important;letter-spacing:-.035em !important;margin:16px 0 14px !important;color:#fff !important;text-shadow:0 2px 18px rgba(0,0,0,.3)}
.rha-ht p{font:400 17.5px/1.6 'Manrope',sans-serif !important;color:#F2EADA !important;margin:0 0 22px;max-width:640px}
.rha-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;font:600 14px/1 'Manrope',sans-serif;color:#F2EADA}
.rha-meta img{width:36px;height:36px;border-radius:50%;box-shadow:0 0 0 3px rgba(255,255,255,.35)}
.rha-meta b,.rha-meta span{color:#fff !important}.rha-meta span:not(.c){opacity:.86}.rha-meta .c{padding:7px 11px;border-radius:999px;background:#fff;color:var(--md) !important;opacity:1 !important;font:700 12px/1 'Sora',sans-serif}
@media(min-width:1101px) and (hover:hover){
  body.single-post #header:not(.scrolled) .nav-bar{right:48px;top:70px}
  body.single-post #header .topbar-secondary{top:34px;right:48px}
  body.single-post #header .topbar-secondary a{color:#fff !important;text-shadow:0 1px 10px rgba(10,8,6,.55) !important}
}
@media(max-width:1100px){ .rha-logo{display:none} }
/* la colonne et le sommaire */
html body main.rhart .art-main{padding-top:56px !important}
html body main.rhart .art-toc{border:0 !important;border-radius:24px !important;background:#fff !important;box-shadow:0 30px 70px -50px rgba(20,24,31,.55),0 0 0 1px var(--filet) !important}
html body main.rhart .art-toc li a,html body main.rhart .art-toc li{border-radius:12px !important}
html body main.rhart .art-toc a.active,html body main.rhart .art-toc a.active::before{background:var(--mp) !important;color:var(--md) !important;box-shadow:none !important}
html body main.rhart .art-sidecta{background:#fff !important;color:var(--texte) !important;border:0 !important;border-radius:24px !important;box-shadow:0 30px 70px -50px rgba(20,24,31,.55),0 0 0 1px var(--filet) !important;
  background-image:radial-gradient(260px 160px at 100% 0%,var(--mp),transparent 70%) !important}
html body main.rhart .art-sidecta strong{color:var(--encre) !important}html body main.rhart .art-sidecta p{color:var(--gris) !important}
html body main.rhart .art-sidecta-b .p{background:var(--mg) !important;color:#fff !important;border:0 !important}
html body main.rhart .art-sidecta-b .s{background:#fff !important;color:var(--encre) !important;box-shadow:inset 0 0 0 1.5px var(--filet) !important;border:0 !important}
/* le calculateur : un instrument posé dans la colonne */
html body main.rhart .art-body .art-calc{border:0 !important;border-radius:30px !important;background:#fff !important;padding:32px !important;
  box-shadow:0 50px 100px -60px rgba(20,24,31,.6),0 0 0 1px var(--filet) !important;background-image:radial-gradient(520px 260px at 100% 0%,var(--mp),transparent 70%) !important}
@media(max-width:900px){
  body.single-post #header:not(.scrolled){top:10px !important;left:14px !important;right:14px !important;width:auto !important}
  body.single-post #header:not(.scrolled) .logo img,body.single-post #header:not(.scrolled) img.logo-img{content:url(/wp-content/themes/roy-habitat/assets/img/logo-roy-blanc.webp);width:84px !important;height:auto !important;max-width:none !important}
  body.single-post #header:not(.scrolled) .burger-label{color:#fff !important;font-size:12px !important}
  body.single-post #header:not(.scrolled) .burger-ico span{background:#fff !important}
  .rha-h{padding:10px 10px 0}.rha-hf{border-radius:26px;min-height:0}
  .rha-ph{height:300px;-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent);mask-image:linear-gradient(180deg,#000 60%,transparent)}
  .rha-fl{-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 200px,#000 300px);mask-image:linear-gradient(180deg,transparent 0,transparent 200px,#000 300px)}
  .rha-hf::after{background:linear-gradient(180deg,rgba(40,24,12,.5) 0,rgba(40,24,12,0) 160px,rgba(48,30,16,.45) 270px,rgba(48,30,16,.58) 100%)}
  .rha-ht{padding:250px 18px 24px;max-width:none}.rha-ht h1{font-size:clamp(27px,7.6vw,32px)}.rha-ht p{font-size:15.5px}
  html body main.rhart .art-body .art-calc{padding:22px 16px !important;border-radius:24px !important}
}

/* ═══ LES MÉLANGES DÉCIDÉS (Vicenté : « n'hésite pas à faire des mélanges ») ═══ */
/* les pastilles d'icône des encadrés : un pictogramme dessiné à la couleur du métier remplace l'émoji (rendu différent selon l'appareil) */
html body main.rhart .art-body .art-ex-ic,html body main.rhart .art-body .art-callout-ic{position:relative;font-size:0 !important;color:transparent !important;flex:none}
html body main.rhart .art-body .art-ex-ic::before,html body main.rhart .art-body .art-callout-ic::before{content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;background:var(--md);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.6.5 1 1.2 1.1 2h5c.1-.8.5-1.5 1.1-2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.6.5 1 1.2 1.1 2h5c.1-.8.5-1.5 1.1-2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E") center/contain no-repeat}
html body main.rhart .art-body .art-callout.warn .art-callout-ic::before{background:#B4650A;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01'/%3E%3C/svg%3E")}
/* la fin de l'article : partage, « continuer à lire » avec de vraies vignettes, « pour aller plus loin » en cartes du blog */
html body main.rhart .art-share a,html body main.rhart .art-share button{border-radius:999px !important;border:0 !important;background:#fff !important;box-shadow:inset 0 0 0 1.5px var(--filet) !important;color:var(--encre) !important}
html body main.rhart .art-next{border:0 !important;border-radius:24px !important;background:#fff !important;box-shadow:0 30px 70px -50px rgba(20,24,31,.55),0 0 0 1px var(--filet) !important}
html body main.rhart .art-next-th{width:56px !important;height:56px !important;border-radius:14px !important;overflow:hidden;flex:none;background:var(--mp) !important;font-size:0 !important}
html body main.rhart .art-next-th img{width:100%;height:100%;object-fit:cover;display:block}
html body main.rhart .art-relcard{border:0 !important;border-radius:22px !important;overflow:hidden;background:#fff !important;box-shadow:0 30px 60px -44px rgba(20,24,31,.55),0 0 0 1px var(--filet) !important;transition:transform .35s,box-shadow .35s}
html body main.rhart .art-relcard:hover{transform:translateY(-4px);box-shadow:0 40px 70px -40px rgba(20,24,31,.6),0 0 0 1px var(--filet) !important}
html body main.rhart .art-relcard .tg{background:rgba(255,255,255,.94) !important;color:var(--md) !important;border-radius:999px !important;font:700 11px/1 'Sora',sans-serif !important}
html body main.rhart .art-rel-h h2{font:800 clamp(28px,3vw,40px)/1.1 'Sora',sans-serif !important;letter-spacing:-.035em !important;color:var(--encre) !important}
html body main.rhart .art-rel-h h2 em{font-style:normal;color:var(--m)}
html body main.rhart .art-ctamob{display:none}
html body main.rhart .art-totop{background:var(--mg) !important}
/* AU TÉLÉPHONE : le sommaire devient une barre de chapitres qui reste en haut pendant la lecture (proposition 2), le calculateur sort de
   la colonne et devient une bande pleine largeur qui naît et s'efface en dégradé — plus de place pour ses cartes de résultats */
@media(max-width:900px){
  html body main.rhart .art-grid{display:flex !important;flex-direction:column}
  html body main.rhart .art-side{order:-1;position:sticky !important;top:76px;z-index:20;margin:-6px 0 22px !important;width:100% !important}
  html body main.rhart .art-side > :not(.art-toc){display:none !important}
  html body main.rhart .art-toc{border-radius:999px !important;padding:5px !important;background:rgba(255,255,255,.88) !important;-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
    box-shadow:0 18px 40px -24px rgba(20,24,31,.5),0 0 0 1px var(--filet) !important}
  html body main.rhart .art-toc-t{display:none !important}
  html body main.rhart .art-toc ol{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;gap:4px !important;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth}
  html body main.rhart .art-toc ol::-webkit-scrollbar{display:none}
  html body main.rhart .art-toc li{flex:none}
  html body main.rhart .art-toc a{white-space:nowrap;padding:10px 13px !important;border-radius:999px !important;font:700 13px/1 'Sora',sans-serif !important}
  html body main.rhart .art-toc a::before{display:none !important}
  html body main.rhart .art-ctamob{display:block;margin:34px 0 0;padding:24px 20px;border-radius:24px;background:#fff;box-shadow:0 30px 70px -50px rgba(20,24,31,.55),0 0 0 1px var(--filet);
    background-image:radial-gradient(260px 160px at 100% 0%,var(--mp),transparent 70%)}
  html body main.rhart .art-ctamob strong{display:block;font:800 19px/1.2 'Sora',sans-serif;color:var(--encre)}
  html body main.rhart .art-ctamob p{margin:8px 0 16px !important;font-size:15px !important;color:var(--gris) !important}
  html body main.rhart .art-ctamob div{display:flex;flex-wrap:wrap;gap:10px}
  html body main.rhart .art-ctamob a{flex:1 1 auto;text-align:center;padding:14px 16px;border-radius:14px;font:700 15px/1 'Sora',sans-serif;text-decoration:none}
  html body main.rhart .art-ctamob a.p{background:var(--mg);color:#fff}
  html body main.rhart .art-ctamob a.s{background:#fff;color:var(--encre);box-shadow:inset 0 0 0 1.5px var(--filet)}
  html body main.rhart .art-body .art-calc{width:100vw !important;max-width:none !important;margin:44px 0 44px calc(50% - 50vw) !important;border-radius:0 !important;box-shadow:none !important;
    padding:56px 16px !important;background:linear-gradient(180deg,rgba(255,255,255,0) 0,color-mix(in srgb,var(--m) 14%,#fff) 9%,color-mix(in srgb,var(--m) 14%,#fff) 91%,rgba(255,255,255,0) 100%) !important}
  html body main.rhart .art-body .art-calc .rhseg{background:rgba(255,255,255,.75) !important}
}
html,body{overflow-x:clip}
/* au téléphone, la barre des chapitres (une ligne qui ne passe pas à la ligne) imposait sa largeur à toute la colonne : les questions et la
   carte de l'auteur sortaient de l'écran à droite, masquées par overflow-x:clip (vu sur les captures le 05/10, invisible pour un test de
   débordement classique). Les éléments de la colonne peuvent rétrécir ; la barre fait défiler ses chapitres à l'intérieur. */
html body main.rhart .art-grid > *{min-width:0 !important;max-width:100% !important}
html body main.rhart .art-toc{max-width:100% !important;overflow:hidden !important}
html body main.rhart .art-rel-h h2 em{color:var(--m) !important;-webkit-text-fill-color:var(--m) !important}
/* au téléphone : la carte de l'auteur se range en colonne (la photo au-dessus, le texte sur toute la largeur), et un titre atteint depuis
   la barre des chapitres s'arrête sous elle au lieu de passer dessous */
@media(max-width:600px){
  html body main.rhart .art-authorbox{display:flex !important;flex-direction:column !important;align-items:flex-start !important;gap:14px !important}
  html body main.rhart .art-body h2{scroll-margin-top:150px}
}