/* ============================================================
   anthony-courtin.com v2 — Article de blog
   Structure inspirée de cafe-du-musee.com (3 colonnes, résumé IA,
   bloc auteur, avis lecteurs), habillage "vert sapin" du site v2.
   Dépend des tokens de /css/main.css (--pine-*, --lime, --cream, --ink).
   ============================================================ */

:root{
  --rail-l:236px;
  --rail-r:304px;
  --art-gap:44px;
  --art-measure:72ch;
}

/* ---------- Fil d'Ariane + en-tête ---------- */
.art-top{background:var(--pine-950);color:var(--cream);padding:132px 0 60px;position:relative;overflow:hidden}
.art-top::after{content:"";position:absolute;inset:0;background:radial-gradient(760px 420px at 12% 0%,rgba(198,247,111,.16),transparent 62%);pointer-events:none}
.art-top .wrap{position:relative;z-index:1}
.crumb{font-size:.82rem;color:rgba(244,241,232,.6);margin-bottom:22px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumb a{color:rgba(244,241,232,.78);text-decoration:none}
.crumb a:hover{color:var(--lime)}
.crumb span[aria-hidden]{opacity:.45}
.art-cat{display:inline-flex;align-items:center;gap:8px;background:rgba(198,247,111,.14);color:var(--lime);border:1px solid rgba(198,247,111,.32);padding:6px 15px;border-radius:999px;font-size:.74rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.art-title{font-family:var(--display);font-size:clamp(2.1rem,1.35rem+3.1vw,3.6rem);line-height:1.05;letter-spacing:-.03em;margin:20px 0 0;max-width:19ch}
.art-lede{font-size:1.16rem;line-height:1.6;color:rgba(244,241,232,.76);max-width:64ch;margin-top:20px}
.art-metaline{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:30px;font-size:.9rem;color:rgba(244,241,232,.66)}
.art-metaline .who{display:flex;align-items:center;gap:11px;color:var(--cream);font-weight:500}
.art-metaline .who img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:1.5px solid rgba(198,247,111,.4)}
.art-metaline .dot{opacity:.35}

/* ---------- Barre « Résumer avec » ---------- */
.ai-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:26px;padding-top:22px;border-top:1px solid rgba(244,241,232,.12)}
.ai-actions__title{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(244,241,232,.62);margin-right:4px}
.ai-actions__title svg{color:var(--lime)}
.ai-actions__list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.ai-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;background:rgba(244,241,232,.07);border:1px solid rgba(244,241,232,.16);color:rgba(244,241,232,.9);font-size:.83rem;font-weight:500;text-decoration:none;transition:transform .18s,background .18s,border-color .18s,color .18s}
.ai-btn:hover{transform:translateY(-2px);background:var(--lime);border-color:var(--lime);color:var(--pine-950)}
.ai-btn svg,.ai-btn img{width:15px;height:15px;flex:0 0 auto}

/* ---------- Grille 3 colonnes ---------- */
.art-layout{display:grid;grid-template-columns:var(--rail-l) minmax(0,1fr) var(--rail-r);gap:var(--art-gap);max-width:var(--maxw);margin:0 auto;padding:52px 24px 0;align-items:start}
.art-main{min-width:0}

.rail{position:sticky;top:96px;display:flex;flex-direction:column;gap:18px;max-height:calc(100vh - 120px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-bottom:8px}
.rail::-webkit-scrollbar{width:5px}
.rail::-webkit-scrollbar-thumb{background:var(--cream-2);border-radius:99px}
.rail-title{font-size:.72rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--pine-600);margin:0 0 12px}

/* Sommaire */
.toc-box{background:var(--white);border:1px solid var(--cream-2);border-radius:var(--r-sm);padding:18px 18px 14px}
.toc-box>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.toc-box>summary::-webkit-details-marker{display:none}
.toc-box>summary .rail-title{margin:0}
.toc-chevron{width:9px;height:9px;border-right:1.8px solid var(--pine-600);border-bottom:1.8px solid var(--pine-600);transform:rotate(45deg);transition:transform .22s;margin-bottom:3px}
.toc-box[open] .toc-chevron{transform:rotate(-135deg);margin-bottom:-2px}
.toc{display:flex;flex-direction:column;gap:1px}
.toc a{display:block;font-size:.88rem;line-height:1.4;color:var(--ink-2);padding:7px 0 7px 13px;border-left:2px solid var(--cream-2);text-decoration:none;transition:color .18s,border-color .18s}
.toc a:hover{color:var(--pine-700)}
.toc a.on{color:var(--pine-800);font-weight:600;border-left-color:var(--lime)}
.toc a.lvl3{padding-left:26px;font-size:.83rem}
.toc-empty{font-size:.85rem;color:var(--ink-2)}

/* Partage */
.share-box{background:var(--white);border:1px solid var(--cream-2);border-radius:var(--r-sm);padding:18px}
.share{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.share-btn{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--cream);color:var(--pine-800);border:1px solid var(--cream-2);transition:transform .18s,background .18s,color .18s}
.share-btn:hover{transform:translateY(-2px);background:var(--pine-950);color:var(--lime);border-color:var(--pine-950)}
.share-copy.done{background:var(--lime);color:var(--pine-950);border-color:var(--lime)}

/* Résumé IA */
.ai-box{background:linear-gradient(158deg,var(--pine-800),var(--pine-950));color:var(--cream);border-radius:var(--r-sm);padding:20px;position:relative;overflow:hidden}
.ai-box::after{content:"";position:absolute;inset:0;background:radial-gradient(220px 160px at 88% 0%,rgba(198,247,111,.2),transparent 62%);pointer-events:none}
.ai-box>*{position:relative;z-index:1}
.ai-title{display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--lime);margin:0 0 10px}
.ai-text{font-size:.94rem;line-height:1.62;color:rgba(244,241,232,.9);margin:0}
.ai-note{font-size:.74rem;color:rgba(244,241,232,.48);margin:12px 0 0}
.ai-box-mobile{display:none;margin:0 0 26px}

/* Articles liés (rail) */
.rail-recent{background:var(--white);border:1px solid var(--cream-2);border-radius:var(--r-sm);padding:18px}
.mini-list{display:flex;flex-direction:column;gap:4px}
.mini{display:flex;gap:12px;align-items:flex-start;padding:9px;margin:0 -9px;border-radius:12px;text-decoration:none;transition:background .18s}
.mini:hover{background:var(--cream)}
.mini-thumb{flex:0 0 52px}
.mini-thumb img{width:52px;height:52px;border-radius:10px;object-fit:cover}
.mini-cat{display:block;font-size:.68rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--pine-600);margin-bottom:3px}
.mini-ttl{display:block;font-size:.87rem;line-height:1.35;color:var(--ink);font-weight:500}

/* ---------- Corps de l'article ---------- */
.art-body{font-size:1.06rem;line-height:1.72;color:var(--ink);max-width:var(--art-measure)}
.art-body>*+*{margin-top:1.15em}
.art-body h2{font-family:var(--display);font-size:clamp(1.6rem,1.25rem+1.3vw,2.15rem);line-height:1.14;letter-spacing:-.025em;color:var(--pine-950);margin-top:2.1em;padding-top:.85em;border-top:1px solid var(--cream-2);scroll-margin-top:96px}
.art-body h3{font-family:var(--display);font-size:1.28rem;line-height:1.24;letter-spacing:-.015em;color:var(--pine-800);margin-top:1.7em;scroll-margin-top:96px}
.art-body h4{font-size:1.02rem;font-weight:600;color:var(--pine-800);margin-top:1.4em}
.art-body p{margin:0}
.art-body a{color:var(--pine-700);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;text-decoration-color:rgba(29,107,84,.35);transition:text-decoration-color .18s,color .18s}
.art-body a:hover{color:var(--pine-950);text-decoration-color:var(--lime)}
.art-body ul,.art-body ol{padding-left:1.35em;display:flex;flex-direction:column;gap:.5em}
.art-body ul{list-style:none;padding-left:0}
.art-body ul>li{position:relative;padding-left:1.5em}
.art-body ul>li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--lime);border:1.5px solid var(--pine-600)}
.art-body ol>li::marker{color:var(--pine-600);font-weight:600}
.art-body strong{font-weight:600;color:var(--pine-950)}
.art-body blockquote{margin:1.6em 0;padding:4px 0 4px 22px;border-left:3px solid var(--lime);font-size:1.1rem;line-height:1.55;color:var(--pine-800)}
.art-body figure{margin:1.8em 0}
/* height:auto est indispensable : les images portent width/height en attributs
   (réservation de place, anti-CLS). Sans lui, width:100% réduit la largeur mais
   laisse la hauteur de l'attribut, ce qui étire l'image en hauteur. */
.art-body figure img{border-radius:var(--r-sm);width:100%;height:auto;display:block}
.art-body figcaption{font-size:.83rem;color:var(--ink-2);margin-top:9px}
.art-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;background:var(--cream-2);padding:.14em .42em;border-radius:6px}
.art-body pre{background:var(--pine-950);color:var(--cream);border-radius:var(--r-sm);padding:20px;overflow-x:auto;font-size:.88rem;line-height:1.6}
.art-body pre code{background:none;padding:0;color:inherit}

/* Tableaux */
.table-wrap{overflow-x:auto;margin:1.7em 0;border:1px solid var(--cream-2);border-radius:var(--r-sm);background:var(--white)}
.art-body table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:520px}
.art-body th,.art-body td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--cream-2);vertical-align:top}
.art-body thead th{background:var(--pine-950);color:var(--cream);font-weight:600;font-size:.82rem;letter-spacing:.03em;border-bottom:none}
.art-body tbody tr:last-child td{border-bottom:none}
.art-body tbody tr:hover{background:var(--cream)}

/* Encarts */
.callout{border-radius:var(--r-sm);padding:20px 22px;margin:1.7em 0;border-left:3px solid;font-size:1rem;line-height:1.62}
.callout>*+*{margin-top:.7em}
.callout-t{display:flex;align-items:center;gap:9px;font-weight:600;font-size:.94rem;margin:0 0 .55em}
.callout--info{background:rgba(29,107,84,.07);border-left-color:var(--pine-600)}
.callout--info .callout-t{color:var(--pine-700)}
.callout--tip{background:rgba(198,247,111,.22);border-left-color:var(--lime-dark)}
.callout--tip .callout-t{color:var(--pine-800)}
.callout--warn{background:rgba(196,124,0,.09);border-left-color:#C47C00}
.callout--warn .callout-t{color:#8A5700}

/* À retenir (bloc de tête, capté par les IA) */
.takeaways{background:var(--white);border:1px solid var(--cream-2);border-left:3px solid var(--lime);border-radius:var(--r-sm);padding:22px 24px;margin:0 0 2em}
.takeaways h2{font-family:var(--display);font-size:1.05rem !important;letter-spacing:.02em;text-transform:uppercase;color:var(--pine-600) !important;margin:0 0 12px !important;padding:0 !important;border:none !important}
.takeaways ul{margin-top:0}
.takeaways li{font-size:1rem}

/* Vidéo YouTube (façade légère) */
.video-embed{margin:1.9em 0}
.yt-lite{position:relative;aspect-ratio:16/9;border-radius:var(--r-sm);overflow:hidden;background:var(--pine-950);cursor:pointer}
.yt-lite img{width:100%;height:100%;object-fit:cover;opacity:.72;transition:opacity .3s,transform .5s}
.yt-lite:hover img{opacity:.85;transform:scale(1.03)}
.yt-lite iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:70px;height:70px;border-radius:50%;background:var(--lime);color:var(--pine-950);display:flex;align-items:center;justify-content:center;font-size:1.4rem;transition:transform .22s;box-shadow:0 12px 40px rgba(6,32,26,.45)}
.yt-lite:hover .yt-play{transform:translate(-50%,-50%) scale(1.1)}
.yt-label{position:absolute;left:18px;bottom:16px;right:18px;color:var(--cream);font-family:var(--display);font-size:1.02rem;font-weight:600;text-shadow:0 2px 12px rgba(6,32,26,.7)}

/* ---------- Outil interactif ---------- */
.tool{background:var(--white);border:1px solid var(--cream-2);border-radius:var(--r-md);margin:2.2em 0;overflow:hidden;box-shadow:0 18px 50px rgba(6,32,26,.07)}
.tool-head{background:var(--pine-950);color:var(--cream);padding:18px 24px;display:flex;align-items:center;gap:14px}
.tool-ico{width:40px;height:40px;flex:0 0 auto;border-radius:12px;background:var(--lime);color:var(--pine-950);display:flex;align-items:center;justify-content:center;font-size:1.15rem}
.tool-head em{display:block;font-style:normal;font-size:.7rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--mint)}
.tool-head b{display:block;font-family:var(--display);font-size:1.08rem;font-weight:600;margin-top:2px}
.tool-body{padding:24px}
.tool-body>*+*{margin-top:16px}
.tool-foot{padding:14px 24px;background:var(--cream);border-top:1px solid var(--cream-2);font-size:.82rem;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:.83rem;font-weight:600;color:var(--pine-800)}
.field .hint{font-size:.78rem;color:var(--ink-2);font-weight:400}
.field input,.field select,.field textarea{font-family:inherit;font-size:.95rem;color:var(--ink);background:var(--cream);border:1.5px solid var(--cream-2);border-radius:12px;padding:11px 14px;transition:border-color .18s,background .18s}
.field textarea{resize:vertical;min-height:84px;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--pine-600);background:var(--white)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tool-out{background:var(--pine-950);color:var(--cream);border-radius:var(--r-sm);padding:20px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86rem;line-height:1.65;white-space:pre-wrap;word-break:break-word;min-height:80px}
.tool-out:empty::before{content:"Le résultat s'affichera ici.";color:rgba(244,241,232,.4);font-family:var(--body)}
.tool-actions{display:flex;flex-wrap:wrap;gap:10px}
.btn-sm{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;font-size:.88rem;font-weight:600;transition:transform .2s,background .2s,color .2s;cursor:pointer;border:none;font-family:inherit}
.btn-sm:hover{transform:translateY(-2px)}
.btn-sm.primary{background:var(--pine-950);color:var(--lime)}
.btn-sm.ghost{background:var(--cream);color:var(--pine-800);border:1.5px solid var(--cream-2)}
.btn-sm.ok{background:var(--lime);color:var(--pine-950)}
/* Les chips des outils sont préfixées par .tool : main.css réserve `.chip` aux
   pastilles flottantes décoratives de l'accueil (position:absolute, animation
   float, et display:none sous 960 px). Sans ce préfixe et ces remises à zéro,
   les boutons de l'outil se superposent et disparaissent sur mobile. */
.tool .chips{display:flex;flex-wrap:wrap;gap:8px}
.tool .chip{
  position:static;z-index:auto;box-shadow:none;animation:none;white-space:normal;
  display:inline-flex;align-items:center;
  padding:8px 14px;border-radius:999px;background:var(--cream);
  border:1.5px solid var(--cream-2);font-family:inherit;font-size:.85rem;
  font-weight:500;color:var(--pine-800);cursor:pointer;transition:all .18s
}
.tool .chip:hover{border-color:var(--pine-600)}
.tool .chip.on{background:var(--pine-950);color:var(--lime);border-color:var(--pine-950)}
.tool .chip:focus-visible{outline:2px solid var(--pine-600);outline-offset:2px}
@media(max-width:960px){.tool .chip{display:inline-flex}}
/* Checklist cochable des outils (audit GEO et suivants). Préfixée par .tool
   pour ne pas hériter des puces de liste du corps d'article. */
.tool .geo-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.tool .geo-check li{margin:0;padding:0}
.tool .geo-check li::before{content:none}
.tool .geo-check label{
  display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  padding:9px 10px;border-radius:10px;font-size:.93rem;line-height:1.45;
  color:var(--pine-900);transition:background .16s
}
.tool .geo-check label:hover{background:var(--cream)}
.tool .geo-check input{
  flex:0 0 auto;width:18px;height:18px;margin:2px 0 0;accent-color:var(--pine-700);cursor:pointer
}
.tool .geo-check input:focus-visible{outline:2px solid var(--pine-600);outline-offset:2px}
.tool .geo-check input:checked+*,
.tool .geo-check label:has(input:checked){color:var(--pine-600)}

.score{display:flex;align-items:baseline;gap:10px}
.score b{font-family:var(--display);font-size:2.6rem;line-height:1;color:var(--pine-950)}
.score span{font-size:.9rem;color:var(--ink-2)}
.meter{height:9px;border-radius:99px;background:var(--cream-2);overflow:hidden}
.meter i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--pine-600),var(--lime));transition:width .5s cubic-bezier(.2,.8,.2,1)}

/* ---------- FAQ ---------- */
.faq{margin:2.2em 0 0}
.faq details{background:var(--white);border:1px solid var(--cream-2);border-radius:var(--r-sm);margin-bottom:10px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:16px 20px;font-weight:600;font-size:1rem;color:var(--pine-900);display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;font-weight:400;color:var(--pine-600);flex:0 0 auto;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details[open] summary{border-bottom:1px solid var(--cream-2)}
/* max-height:none et overflow:visible sont obligatoires : main.css réserve
   `.faq-a` à l'accordéon JavaScript des pages services, où la classe est
   repliée par max-height:0. Le blog utilise des <details> natifs, qui restent
   sinon écrasés à la hauteur de leurs seuls paddings. */
.faq details .faq-a{
  max-height:none;overflow:visible;
  padding:16px 20px;font-size:.98rem;line-height:1.68;color:var(--ink-2)
}
.faq details .faq-a>p{padding:0;font-size:inherit;color:inherit}
.faq details .faq-a>*+*{margin-top:.7em}

/* ---------- Bandeau CTA ---------- */
.cta-band{background:linear-gradient(150deg,var(--pine-800),var(--pine-950));color:var(--cream);border-radius:var(--r-md);padding:34px 36px;margin:2.6em 0 0;display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;inset:0;background:radial-gradient(340px 240px at 88% 10%,rgba(198,247,111,.2),transparent 62%);pointer-events:none}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{font-family:var(--display);font-size:1.5rem;line-height:1.2;margin:0 0 8px;color:var(--cream);border:none;padding:0}
.cta-band p{color:rgba(244,241,232,.72);font-size:.98rem;margin:0;max-width:52ch}

/* ---------- Bloc auteur ---------- */
.author-box{background:var(--white);border:1px solid var(--cream-2);border-radius:var(--r-md);padding:26px 28px;margin:2.2em 0 0;display:grid;grid-template-columns:88px 1fr;gap:22px;align-items:start}
.author-box img{width:88px;height:88px;border-radius:16px;object-fit:cover}
.author-box .eyebrow{color:var(--pine-600);margin-bottom:6px;font-size:.72rem}
.author-box h3{font-family:var(--display);font-size:1.24rem;margin:0 0 3px;color:var(--pine-950)}
.author-role{font-size:.86rem;color:var(--pine-600);font-weight:600;margin:0 0 10px}
.author-bio{font-size:.95rem;line-height:1.65;color:var(--ink-2);margin:0}
.author-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.author-links a{display:inline-flex;align-items:center;gap:8px;font-size:.86rem;font-weight:600;padding:9px 16px;border-radius:999px;text-decoration:none;transition:transform .2s,background .2s,color .2s}
.author-links .li{background:#0A66C2;color:#fff}
.author-links .li:hover{transform:translateY(-2px);background:#08528f}
.author-links .yt{background:var(--cream);color:var(--pine-800);border:1.5px solid var(--cream-2)}
.author-links .yt:hover{transform:translateY(-2px);background:var(--pine-950);color:var(--lime);border-color:var(--pine-950)}

/* ---------- Avis lecteurs ---------- */
.reviews{margin:2.6em 0 0;background:var(--white);border:1px solid var(--cream-2);border-radius:var(--r-md);padding:28px}
.reviews h2{font-family:var(--display);font-size:1.4rem;margin:0 0 4px;color:var(--pine-950);border:none;padding:0}
.rv-sub{font-size:.9rem;color:var(--ink-2);margin:0 0 20px}
.rv-summary{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:16px 18px;background:var(--cream);border-radius:var(--r-sm);margin-bottom:22px}
.rv-avg{font-family:var(--display);font-size:2.1rem;line-height:1;color:var(--pine-950)}
.stars{display:inline-flex;gap:2px;color:var(--cream-2)}
.stars .fill{color:#E8A33D}
.stars svg{width:17px;height:17px}
.rv-count{font-size:.88rem;color:var(--ink-2)}
.rv-list{display:flex;flex-direction:column;gap:14px;margin-bottom:24px}
.rv-item{border:1px solid var(--cream-2);border-radius:var(--r-sm);padding:16px 18px}
.rv-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:8px}
.rv-name{font-weight:600;color:var(--pine-900);font-size:.94rem}
.rv-date{font-size:.8rem;color:var(--ink-2)}
.rv-text{font-size:.95rem;line-height:1.62;color:var(--ink-2);margin:0}
.rv-empty{font-size:.94rem;color:var(--ink-2);margin:0}
/* Le formulaire vient en premier (on note, puis on lit les avis) : la ligne de
   séparation est donc portée par le bloc des avis publiés, pas par le formulaire. */
.rv-form{display:flex;flex-direction:column;gap:15px;margin-top:20px}
.rv-published{border-top:1px solid var(--cream-2);margin-top:26px;padding-top:22px}
.rv-published-title{font-family:var(--display);font-size:1.08rem;margin:0 0 14px;color:var(--pine-900)}
.rv-form h3{font-family:var(--display);font-size:1.08rem;margin:0;color:var(--pine-900)}
.rating-field{border:none;padding:0;margin:0}
.rating-field legend{font-size:.83rem;font-weight:600;color:var(--pine-800);padding:0;margin-bottom:7px}
.rating{display:inline-flex;flex-direction:row-reverse;gap:4px}
.rating input{position:absolute;opacity:0;width:0;height:0}
.rating label{cursor:pointer;color:var(--cream-2);transition:color .15s,transform .15s;line-height:0}
.rating label svg{width:30px;height:30px}
.rating input:checked~label,.rating label:hover,.rating label:hover~label{color:#E8A33D}
.rating label:hover{transform:scale(1.12)}
.rating input:focus-visible+label{outline:2px solid var(--pine-600);outline-offset:3px;border-radius:4px}
.rv-hp{position:absolute;left:-9999px}
.rv-msg{font-size:.9rem;padding:12px 16px;border-radius:12px;display:none}
.rv-msg.ok{display:block;background:rgba(198,247,111,.28);color:var(--pine-800)}
.rv-msg.ko{display:block;background:rgba(163,34,24,.09);color:#8C1D14}

/* ---------- Articles liés (bas de page) ---------- */
.related{background:var(--pine-950);color:var(--cream);padding:72px 0;margin-top:76px}
.related h2{font-family:var(--display);font-size:clamp(1.7rem,1.3rem+1.5vw,2.4rem);margin:0 0 8px;letter-spacing:-.025em}
.related .sub{color:rgba(244,241,232,.6);margin:0 0 34px}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(266px,1fr));gap:20px}
.rel-card{background:rgba(244,241,232,.05);border:1px solid rgba(244,241,232,.11);border-radius:var(--r-md);overflow:hidden;text-decoration:none;color:inherit;transition:transform .25s,border-color .25s,background .25s;display:flex;flex-direction:column}
.rel-card:hover{transform:translateY(-5px);border-color:rgba(198,247,111,.42);background:rgba(244,241,232,.08)}
.rel-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.rel-body{padding:20px}
.rel-cat{font-size:.68rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--lime)}
.rel-card h3{font-family:var(--display);font-size:1.06rem;line-height:1.3;margin:9px 0 8px}
.rel-card p{font-size:.88rem;color:rgba(244,241,232,.6);line-height:1.55;margin:0}

/* ---------- Barre de progression de lecture ---------- */
#read-progress{position:fixed;top:0;left:0;height:3px;background:var(--lime);width:0;z-index:200;border-radius:0 3px 3px 0;transition:width .1s linear}

/* ---------- Responsive ---------- */
@media(max-width:1180px){
  :root{--rail-l:210px;--rail-r:268px;--art-gap:32px}
}
@media(max-width:1040px){
  .art-layout{grid-template-columns:minmax(0,1fr);padding-top:38px}
  .rail-right{display:none}
  .rail-left{position:static;max-height:none;overflow:visible;flex-direction:column}
  .ai-box-mobile{display:block}
  .art-body{max-width:none}
  .toc-box{background:var(--white)}
}
@media(max-width:720px){
  .art-top{padding:110px 0 42px}
  .cta-band{grid-template-columns:1fr;padding:28px}
  .author-box{grid-template-columns:1fr;gap:16px}
  .author-box img{width:72px;height:72px}
  .field-row{grid-template-columns:1fr}
  .reviews{padding:22px 18px}
  .art-metaline{gap:8px 14px;font-size:.85rem}
}
@media(prefers-reduced-motion:reduce){
  .ai-btn,.share-btn,.btn-sm,.rel-card,.yt-lite img,.yt-play{transition:none}
  .ai-btn:hover,.share-btn:hover,.btn-sm:hover,.rel-card:hover{transform:none}
}

/* ---------- Verdict ----------
   Bloc de tête des articles de test et de comparatif : la conclusion AVANT
   l'argumentaire. C'est le bloc que les moteurs de réponse reprennent en
   premier, il doit donc être autoportant et rendu côté serveur. */
.verdict{
  margin:0 0 34px;padding:26px 28px;border-radius:var(--r-md);
  background:var(--pine-900);color:var(--cream);
  border:1px solid rgba(198,247,111,.22);
  display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start
}
.verdict-note{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:104px;padding:16px 10px;border-radius:var(--r-sm);
  background:linear-gradient(160deg,rgba(198,247,111,.16),rgba(155,235,195,.06))
}
.verdict-note b{font-family:var(--display);font-size:2.4rem;line-height:1;color:var(--lime)}
.verdict-note span{font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--mint);margin-top:6px}
.art-body .verdict-body h2{
  font-family:var(--display);font-size:1.35rem;line-height:1.2;margin:0 0 6px;
  color:var(--cream);border:0;padding:0
}
.art-body .verdict-body>p{margin:0 0 14px;color:var(--cream);opacity:.92;font-size:.98rem}
/* auto-fit : deux colonnes quand la largeur le permet, une seule dans la
   colonne d'article standard (environ 560 px), sans dépendre du viewport. */
.verdict-lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px 24px}
/* Les sélecteurs sont préfixés par .art-body : sans cela, les règles
   génériques de liste et de paragraphe du corps d'article l'emportent. */
.art-body .verdict-lists ul{list-style:none;margin:0;padding:0;gap:0}
.art-body .verdict-lists li{
  position:relative;padding-left:22px;margin-bottom:7px;
  font-size:.93rem;line-height:1.5;color:var(--cream);opacity:.9
}
.art-body .verdict-lists li::before{
  content:"";position:absolute;left:0;top:0;
  width:auto;height:auto;border:0;border-radius:0;background:none;
  font-weight:700;font-size:.95em;line-height:1.5
}
.art-body .verdict-pros li::before{content:"\2714";color:var(--lime)}
.art-body .verdict-cons li::before{content:"\2718";color:#F2A65A}
.art-body .verdict-foot{
  grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;
  padding-top:16px;margin-top:2px;border-top:1px solid rgba(244,241,232,.12);
  font-size:.9rem;color:var(--mint)
}
.art-body .verdict-foot .verdict-price{
  color:var(--cream);font-weight:600;font-size:.9rem;font-family:var(--body)
}
@media(max-width:720px){
  .verdict{grid-template-columns:1fr;gap:18px;padding:22px 20px}
  .verdict-note{flex-direction:row;gap:10px;min-width:0}
  .verdict-note span{margin-top:0}
  .verdict-lists{grid-template-columns:1fr}
}

/* ---------- Impression ---------- */
@media print{
  .rail,.ai-actions,.cta-band,.reviews,.related,#read-progress,header.site,footer.site{display:none !important}
  .art-layout{display:block;padding:0}
  .art-top{background:none;color:#000;padding:0}
  .art-title,.art-lede,.art-metaline{color:#000}
}

/* Étiquettes de verdict des tableaux filtrables (tâches SEO, comparatifs). */
.art-body .tag-ia,.art-body .tag-mixte,.art-body .tag-humain{
  display:inline-block;padding:3px 10px;border-radius:999px;
  font-size:.78rem;font-weight:600;white-space:nowrap
}
.art-body .tag-ia{background:rgba(198,247,111,.34);color:var(--pine-900)}
.art-body .tag-mixte{background:rgba(155,235,195,.38);color:var(--pine-900)}
.art-body .tag-humain{background:var(--cream-2);color:var(--pine-800)}