/* ===========================================================================
   ARTICLES DE GUIDE : presentations par variante (inc-guide-layouts.php).
   Charge seulement sur les articles. Tout passe par les variables de la palette.
   L'article est premier dans le document ; la barre laterale est placee par la grille.
   =========================================================================== */

/* ---- Mise en page : article premier dans le document, barre laterale placee par la grille ----
   Colonne de texte bornee a ~70 caracteres ; la barre (290 px) a droite ou a gauche. */
body main.qg.guide-single{max-width:1160px}
body main.qg article.qg-article{display:block;background:none;border:0;padding:0;box-shadow:none;border-radius:0}
.qg-article > *,.qg-head > *,.qg-body > *{min-width:0;max-width:100%}
.qg-body .entry-content{max-width:44em}
.qg-sheet-h{display:none}
.qg-bar,.qg-bk{display:none}
@media(min-width:1024px){
  body main.qg article.qg-article{display:grid;grid-template-columns:minmax(0,1fr) 290px;column-gap:56px;align-items:start}
  body main.qg.qg-rail-left article.qg-article{grid-template-columns:290px minmax(0,1fr)}
  .qg-head,.qg-body{grid-column:1}
  .qg-rail-left .qg-head,.qg-rail-left .qg-body{grid-column:2}
  .qg-side{grid-column:2;grid-row:1 / span 2;position:sticky;top:88px;align-self:start;max-height:calc(100vh - 108px);overflow-y:auto;scrollbar-width:thin;padding-bottom:6px}
  .qg-rail-left .qg-side{grid-column:1}
  /* En-tete magazine ou hub : pleine largeur, la barre commence dessous. */
  .qg-head-mag .qg-head,.qg-head-hub .qg-head{grid-column:1 / -1}
  .qg-head-mag .qg-side,.qg-head-hub .qg-side{grid-row:2}
  .qg-head-mag .qg-body,.qg-head-hub .qg-body{grid-row:2}
  .qg-head-mag .qg-head .guide-title,.qg-head-hub .qg-head .guide-title{max-width:24ch}
}
.qg-body{min-width:0}
/* Encadre d'article pour l'habillage "encadre" : le texte seul, pas la barre. */
body.qv-guide-boxed main.qg .qg-body{background:var(--paper);border:1px solid var(--line);border-radius:calc(20px*var(--rk,1));padding:30px 36px 34px;box-shadow:var(--shadow-sm)}
@media(max-width:640px){body.qv-guide-boxed main.qg .qg-body{padding:20px 16px 24px}}

/* ---- Barre en cartes flottantes : pas de cadre commun, chaque bloc est une carte ombree ---- */
.qg-rs-float .qg-side .qg-box{border:0;box-shadow:var(--shadow-sm);background:var(--paper)}
.qg-rs-float .qg-side .qg-box-t{font-size:12px;color:var(--ink)}

/* ---- Mobile : sans script, la barre suit l'article ; avec script, elle devient un panneau ---- */
@media(max-width:1023px){
  .qg-side{margin-top:34px}
  .qg-side .qg-w-toc{display:none}
  main.qg.qg-js .qg-side{position:fixed;left:0;right:0;bottom:0;z-index:96;margin:0;max-height:82vh;overflow-y:auto;background:var(--cream);border-radius:18px 18px 0 0;padding:0 16px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -14px 40px -14px color-mix(in srgb,var(--ink) 55%,transparent);transform:translateY(101%);visibility:hidden;transition:transform .28s ease,visibility 0s linear .28s}
  main.qg.qg-js.qg-sheet-open .qg-side{transform:none;visibility:visible;transition:transform .28s ease}
  main.qg.qg-js .qg-sheet-h{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:2;background:var(--cream);padding:14px 0 10px;font-weight:700}
  .qg-sheet-x,.qg-bar-x{width:44px;height:44px;border:0;border-radius:50%;background:var(--mint);color:var(--ink);font-size:22px;line-height:1;cursor:pointer}
  main.qg.qg-js .qg-bk{display:block;position:fixed;inset:0;z-index:95;background:color-mix(in srgb,var(--ink) 45%,transparent);opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s}
  main.qg.qg-js.qg-sheet-open .qg-bk{opacity:1;visibility:visible}
  /* Barre basse : fixe (aucun decalage de mise en page), 60 px, au-dessus de la zone systeme. */
  main.qg.qg-js .qg-bar:not([hidden]){display:flex;align-items:center;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:90;min-height:60px;max-height:64px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -8px 24px -14px color-mix(in srgb,var(--ink) 45%,transparent)}
  /* Jamais sous le bandeau de cookies. */
  body.cookies-not-set main.qg .qg-bar{display:none !important}
  .qg-bar-p{display:flex;align-items:center;gap:8px;min-width:0;flex:1;min-height:44px;color:var(--ink)}
  .qg-bar-t{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .qg-bar-cta{flex-shrink:0;min-height:44px;font-size:13px;padding:0 12px}
  .qg-bar-open{flex-shrink:0;min-height:44px;padding:0 12px;border-radius:999px;border:1px solid var(--forest);background:transparent;color:var(--forest);font-weight:700;font-size:13px;cursor:pointer}
  .qg-bar-x{flex-shrink:0;background:transparent;font-size:20px}
  main.qg.qg-js{padding-bottom:84px}
}

/* ---- Blocs ---- */
.qg-box{background:var(--paper);border:1px solid var(--line);border-radius:calc(16px*var(--rk,1));padding:16px 18px;margin:0 0 16px}
.qg-box-t{margin:0 0 10px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--forest-2)}
.qg-box p{margin:0 0 10px;font-size:14px;color:var(--ink-soft);line-height:1.55}
.qg-more{font-size:13.5px;font-weight:600;color:var(--forest)}
.qg-ph{display:grid;place-items:center;width:100%;height:100%;background:var(--mint)}
.qg-ph svg{width:55%;height:55%;opacity:.6}
.qg-score{font-size:12.5px;color:var(--ink-mute)}
.qg-score b{font-family:var(--serif);font-size:15px;color:var(--forest)}
.qg-best{display:inline-block;align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--forest);background:var(--mint);border-radius:999px;padding:2px 8px}

/* Meilleurs choix */
.qg-picks{list-style:none;margin:0;padding:0;counter-reset:qg}
.qg-pick{display:grid;grid-template-columns:56px 1fr;gap:6px 12px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.qg-pick:first-child{border-top:0;padding-top:2px}
.qg-pick-ph{width:56px;height:56px;border-radius:calc(10px*var(--rk,1));overflow:hidden;background:#fff;border:1px solid var(--line);display:block}
.qg-pick-ph img{width:100%;height:100%;object-fit:contain;padding:3px}
.qg-pick-b{display:flex;flex-direction:column;gap:2px;min-width:0}
.qg-pick-n{font-family:var(--serif);font-weight:600;font-size:15px;line-height:1.25;color:var(--ink)}
.qg-pick-n:hover{color:var(--forest);text-decoration:underline;text-underline-offset:3px}
.qg-pick-a{grid-column:1 / -1}
.qg-cta{width:100%;justify-content:center;font-size:13px;padding:9px 14px}
/* Variante numerotee : un rang a la place de la vignette. */
.qg-cards-num .qg-pick{grid-template-columns:32px 1fr}
.qg-cards-num .qg-pick-ph{display:none}
.qg-cards-num .qg-pick::before{counter-increment:qg;content:counter(qg);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-weight:700;background:var(--mint);color:var(--forest)}
.qg-cards-num .qg-pick:first-child::before{background:var(--forest);color:#fff}

/* Listes de liens (derniers tests, guides lies) */
.qg-links{list-style:none;margin:0;padding:0}
.qg-links li{border-top:1px solid var(--line)}
.qg-links li:first-child{border-top:0}
.qg-links a{display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;padding:9px 0;color:var(--ink)}
.qg-l-ph{width:48px;height:48px;border-radius:calc(8px*var(--rk,1));overflow:hidden;background:#fff;border:1px solid var(--line);display:block}
.qg-l-ph img{width:100%;height:100%;object-fit:cover}
.qg-w-latest .qg-l-ph img{object-fit:contain;padding:2px}
.qg-l-t{font-size:14px;font-weight:600;line-height:1.3}
.qg-links a:hover .qg-l-t{color:var(--forest);text-decoration:underline;text-underline-offset:3px}

/* Comparatifs et budgets */
.qg-duels{list-style:none;margin:0;padding:0}
.qg-duels a{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:baseline;padding:9px 0;border-top:1px solid var(--line);font-size:14px;font-weight:600;color:var(--ink)}
.qg-duels li:first-child a{border-top:0}
.qg-duels a:hover{color:var(--forest)}
.qg-vs{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--ink-mute)}
.qg-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.qg-chips a{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:var(--cream);font-size:13.5px;font-weight:600;color:var(--forest)}
.qg-chips a:hover{border-color:var(--forest);background:var(--mint)}

/* Sommaire repris dans la barre : visible sur ordinateur ; sur mobile, celui du texte (en tete). */
@media(min-width:1024px){main.qg .qg-toc-in{display:none}}
.qg-w-toc .qc-toc{margin:0;border:0;padding:0;background:none}
/* Dans la barre, les grandes parties seulement : les blocs suivants restent visibles. */
.qg-w-toc .toc-l3{display:none}

/* ---- En-tete magazine : grande couverture, chapo ---- */
.qg-head-mag .qg-head{display:flex;flex-direction:column}
.qg-head-mag .qg-head .guide-hero-img{order:-1;margin:0 0 26px;aspect-ratio:21/9;border-radius:calc(22px*var(--rk,1))}
.qg-head-mag .qg-head .guide-hero-img img{width:100%;height:100%;object-fit:cover}
.qg-head-mag .guide-title{font-size:clamp(32px,4.8vw,54px)}
.qg-lead{font-family:var(--serif);font-size:clamp(18px,2vw,21px);line-height:1.55;color:var(--ink);margin:4px 0 22px;padding-left:18px;border-left:3px solid var(--lime);max-width:44em}

/* ---- Fin d'article : les blocs passent en grilles ---- */
.qg-end{margin-top:40px;display:flex;flex-direction:column;gap:6px}
.qg-end .qg-box{padding:20px 22px}
.qg-end .qg-box-t{font-size:12.5px}
.qg-cards-grid .qg-end .qg-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.qg-cards-grid .qg-end .qg-links li{border:0}
.qg-cards-grid .qg-end .qg-links a{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:0}
.qg-cards-grid .qg-end .qg-l-ph{width:100%;height:auto;aspect-ratio:16/10}
.qg-cards-grid .qg-end .qg-picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.qg-cards-grid .qg-end .qg-pick{border:1px solid var(--line);border-radius:calc(12px*var(--rk,1));padding:12px}
.qg-end .qg-picks-list .qg-pick,.qg-cards-list .qg-end .qg-pick{grid-template-columns:72px 1fr minmax(0,210px)}
.qg-cards-list .qg-end .qg-pick-ph{width:72px;height:72px}
.qg-cards-list .qg-end .qg-pick-a{grid-column:auto}
@media(max-width:640px){.qg-cards-list .qg-end .qg-pick{grid-template-columns:56px 1fr}.qg-cards-list .qg-end .qg-pick-a{grid-column:1 / -1}.qg-cards-list .qg-end .qg-pick-ph{width:56px;height:56px}}

/* ---- Encart produit dans le texte (famille "lecture large") ---- */
.qg-inline{display:grid;grid-template-columns:84px 1fr auto;gap:8px 16px;align-items:center;margin:30px 0;padding:16px 18px;background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--forest);border-radius:calc(14px*var(--rk,1))}
.qg-inline-ph{width:84px;height:84px;display:block;border-radius:calc(10px*var(--rk,1));overflow:hidden;background:#fff}
.qg-inline-ph img{width:100%;height:100%;object-fit:contain;padding:4px}
.qg-inline-b{display:flex;flex-direction:column;gap:3px;min-width:0}
.qg-inline-a{display:flex;flex-direction:column;align-items:stretch;gap:6px;text-align:center}
@media(max-width:640px){.qg-inline{grid-template-columns:64px 1fr}.qg-inline-ph{width:64px;height:64px}.qg-inline-a{grid-column:1 / -1}}

/* ---- Sommaire en cartes + barre mobile (famille "hub") ---- */
.qg-summary{margin:6px 0 30px}
.qg-summary ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.qg-summary a{display:flex;gap:10px;align-items:flex-start;height:100%;padding:12px 14px;background:var(--paper);border:1px solid var(--line);border-radius:calc(12px*var(--rk,1));font-size:14px;font-weight:600;line-height:1.35;color:var(--ink)}
.qg-summary a:hover{border-color:var(--forest);color:var(--forest)}
.qg-sn{flex-shrink:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--mint);color:var(--forest)}
.qg-cards-num .qg-summary ol{grid-template-columns:1fr;gap:0}
.qg-cards-num .qg-summary a{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:10px 2px}
@media(max-width:560px){.qg-summary ol{grid-template-columns:1fr}}
/* ---- Encarts "A lire aussi" (trois formes) ---- */
.qg-also{display:flex;gap:14px;align-items:center;margin:28px 0;padding:14px 18px;background:var(--paper);border:1px solid var(--line);border-radius:calc(12px*var(--rk,1))}
.qg-also-b{display:flex;flex-direction:column;gap:3px;min-width:0}
.qg-also-k{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--forest-2)}
.qg-also-t{font-family:var(--serif);font-weight:600;font-size:17px;line-height:1.3;color:var(--ink);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--forest) 35%,transparent);text-underline-offset:3px}
.qg-also-t:hover{color:var(--forest)}
.qg-also-x{margin:0;font-size:14px;color:var(--ink-soft);line-height:1.45}
.qg-also-bar{border-left:4px solid var(--forest);border-radius:0 calc(12px*var(--rk,1)) calc(12px*var(--rk,1)) 0}
.qg-also-ph{flex-shrink:0;width:88px;height:88px;border-radius:calc(10px*var(--rk,1));overflow:hidden;background:var(--mint);display:block}
.qg-also-ph img{width:100%;height:100%;object-fit:cover}
.qg-also-quote{background:transparent;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;padding:16px 0}
.qg-also-quote .qg-also-t{font-size:19px;font-style:italic;text-decoration:none}
@media(max-width:560px){.qg-also-ph{width:64px;height:64px}}

/* ---- Fin d'article : articles lies avec vignettes ---- */
.qg-more-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.qg-more-list a{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;color:var(--ink)}
.qg-more-list .qg-l-ph{width:120px;height:auto;aspect-ratio:16/10}
.qg-more-list .qg-l-ph img{object-fit:cover;padding:0}
.qg-more-b{display:flex;flex-direction:column;gap:3px;min-width:0}
.qg-more-x{font-size:13.5px;color:var(--ink-soft);line-height:1.4}
.qg-more-list a:hover .qg-l-t{color:var(--forest);text-decoration:underline;text-underline-offset:3px}
.qg-more-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.qg-more-grid a{grid-template-columns:1fr;align-items:start}
.qg-more-grid .qg-l-ph{width:100%}
.qg-more-num{counter-reset:qm}
.qg-more-num li{counter-increment:qm}
.qg-more-num a{grid-template-columns:34px 90px 1fr}
.qg-more-num a::before{content:counter(qm);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--mint);color:var(--forest)}
.qg-more-num .qg-l-ph{width:90px}
@media(max-width:560px){.qg-more-list a,.qg-more-num a{grid-template-columns:88px 1fr}.qg-more-list .qg-l-ph,.qg-more-num .qg-l-ph{width:88px}.qg-more-num a::before{display:none}.qg-more-grid a{grid-template-columns:88px 1fr}.qg-more-grid .qg-l-ph{width:88px}}

/* ---- "Resumer avec l'IA" : une ligne discrete aux couleurs du site, jamais plus haute que
   40 px. Teinte legere au repos (le bouton marchand garde seul l'aplat), aplat de la couleur
   du site au survol et au focus. --forest est la couleur principale de la palette : c'est elle
   qui porte le texte blanc des boutons principaux, donc un texte fonce sur fond clair. ---- */
.qg-ai{display:flex;align-items:center;gap:10px;margin:14px 0 18px;min-width:0;max-height:40px}
.qg-ai-l{flex-shrink:0;font-size:12px;font-weight:700;color:var(--forest);white-space:nowrap}
.qg-ai-list{display:flex;gap:6px;list-style:none;margin:0;padding:2px;min-width:0;flex:1;overflow-x:auto;scrollbar-width:none}
.qg-ai-list::-webkit-scrollbar{display:none}
.qg-ai-b{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--forest);background:color-mix(in srgb,var(--forest) 8%,var(--paper));border:1px solid color-mix(in srgb,var(--forest) 30%,transparent);white-space:nowrap;transition:background .15s,color .15s,border-color .15s}

.qg-ai-ic{flex-shrink:0}
.qg-ai-outline .qg-ai-b{background:transparent;border-radius:8px}
.qg-ai-text .qg-ai-b{background:transparent;border-color:transparent;padding:0 8px;border-radius:6px;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--forest) 40%,transparent);text-underline-offset:3px}
@media(max-width:560px){.qg-ai{gap:8px}.qg-ai-l{font-size:11.5px}}
/* Etat actif : fond ET texte poses ensemble, par la meme paire (couleur du site + blanc), avec
   une specificite qui passe devant les formes "contour" et "texte" et devant les habillages.
   Un texte blanc sur un fond reste transparent devenait invisible. */
main.qg .qg-ai .qg-ai-b:hover,main.qg .qg-ai .qg-ai-b:focus-visible,main.qg .qg-ai .qg-ai-b:active{background:var(--forest);background-color:var(--forest);border-color:var(--forest);color:#fff;text-decoration:none}
main.qg .qg-ai .qg-ai-b:focus-visible{outline:2px solid var(--forest);outline-offset:2px}

/* ---- Habillages ---- */
body.qv-skin-outline .qg-box,body.qv-skin-outline .qg-summary a,body.qv-skin-outline .qg-inline{border:1.5px solid var(--edge);box-shadow:none}
body.qv-skin-outline .qg-inline{border-left:4px solid var(--forest)}
body.qv-skin-soft .qg-box,body.qv-skin-soft .qg-summary a,body.qv-skin-soft .qg-inline{border-color:transparent;box-shadow:var(--shadow-sm)}
body.qv-skin-mag .qg-box{border-width:0;border-top:2px solid var(--ink);border-radius:0;background:transparent;padding-left:0;padding-right:0}
body.qv-skin-mag .qg-box-t{color:var(--ink)}
body.qv-skin-dark .qg-box-t{color:var(--ink)}
body.qv-skin-dark .qg-w-picks{border-top:4px solid var(--forest)}