/* DESIGN GUIDE (02/10, Romain 07 h 27). The guide pages « Quel … choisir » in the art direction of the collections T1-B,
   on the structure of guide A « Dossier de magazine » (validated 01/10). Scoped by .dg on <article class="guide-q">
   (guide-choix.php). Plaster band (kicker, serif H1, chapeau on 2 lines, cover on the right, reading tools on one line),
   captioned bubbles, numbered editorial chapters, every block head as on the collections (2 px rule, serif title), the
   « Éditorial » buttons and options. No :has(), no backdrop-filter. Prefix dg-. Tokens = main.css. */
.dg { --dg-col: 78rem; --dg-gap: clamp(1.4rem, 3vw, 2.8rem); --dg-bas: clamp(3.2rem, 6.5vw, 5.4rem); }
.dg .enveloppe { max-width: var(--dg-col); }

/* ---------- The band ---------- */
.dg .guide-q__tete { padding-bottom: 0; background: var(--platre-2); box-shadow: 0 0 0 100vmax var(--platre-2); clip-path: inset(0 -100vmax); }
.dg .guide-q__tete .ariane { margin: 0; padding-top: 0.55rem; }
.dg .guide-q__une { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); grid-template-areas: "sur visuel" "titre visuel" "chapeau visuel" "suite visuel" "outils outils"; column-gap: 2.6rem; row-gap: 0; align-items: start; margin: 0; padding: 0.8rem 0 0; }
.dg .guide-q__une > div { display: contents; }
.dg .dg-surtitre { grid-area: sur; margin: 0; font: 600 0.7rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--feutre); }
.dg .dg-surtitre span { color: var(--bleu); }
.dg .guide-q__une h1 { grid-area: titre; margin: 0.55rem 0 0; max-width: 21em; font: 400 clamp(1.9rem, 2.75vw, 2.65rem)/1.04 var(--serif); letter-spacing: -0.028em; text-wrap: balance; }
.dg .guide-q__une .chapeau { grid-area: chapeau; margin: 0.5rem 0 0; padding: 0; max-width: 44rem; border: 0; }
.dg .guide-q__une .chapeau p { margin: 0; font: 400 1.02rem/1.55 var(--serif); color: #3c3e43; }
.dg .guide-q__une .chapeau:not(.est-deplie) p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dg .dg-suite { grid-area: suite; justify-self: start; margin-top: 0.2rem; padding: 0; border: 0; border-bottom: 2px solid var(--moutarde); background: none; color: var(--anthracite); font: 600 0.84rem/1.3 var(--sans); cursor: pointer; }
.dg .guide-q__visuel { grid-area: visuel; align-self: start; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: var(--platre); box-shadow: 0 18px 36px -24px rgba(0, 0, 0, 0.45); }
.dg .guide-q__visuel img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Résumer avec l'IA and Partager: one discreet line under the whole band, as on the articles */
.dg .guide-q__une .outils-lecture { grid-area: outils; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 2.4rem; margin: 1rem 0 0; padding: 0.6rem 0; border-top: 1px solid var(--trait); }
.dg .guide-q__une .outils-lecture > * { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; margin: 0; }
.dg .guide-q__une .outils-lecture :is(.resume-ia__titre, .partage__titre) { margin: 0; font: 600 0.66rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--feutre); }
.dg .guide-q__une .outils-lecture :is(.resume-ia__liste, .partage__liste) { margin: 0; }
/* Bubbles (the same as design-collection.css .dk-bulles) */
.dg .dk-bulles { display: flex; align-items: center; gap: 1rem; padding: 0.7rem 0 0.9rem; border-top: 1px solid var(--trait); }
.dg .dk-bulles__lib { flex: none; margin: 0; font: 600 0.68rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--feutre); }
.dg .dk-bulles ul { display: flex; gap: 1.3rem; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.dg .dk-bulles ul::-webkit-scrollbar { display: none; }
.dg .dk-bulles li { flex: none; }
.dg .dk-bulle { display: grid; justify-items: center; gap: 0.35rem; width: 8rem; color: var(--anthracite); text-decoration: none; }
.dg .dk-bulle__rond { display: block; width: 72px; height: 72px; overflow: hidden; border-radius: 50%; background: var(--blanc); box-shadow: 0 0 0 1px var(--trait); transition: box-shadow 0.2s ease, transform 0.2s ease; }
.dg .dk-bulle__rond img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.dg .dk-bulle:hover .dk-bulle__rond, .dg .dk-bulle:focus-visible .dk-bulle__rond { box-shadow: 0 0 0 2px var(--moutarde); transform: translateY(-2px); }
.dg .dk-bulle:focus-visible { outline: 3px solid var(--moutarde); outline-offset: 2px; }
.dg .dk-bulle__nom { max-width: 8rem; font: 600 0.78rem/1.2 var(--sans); text-align: center; }
.dg .dk-bulle__n { font: 400 0.7rem/1 var(--sans); color: var(--feutre); }
/* the old contents (when the bubbles cannot be built): square options */
.dg .guide-q__sommaire { padding: 0.7rem 0 0.9rem; border-top: 1px solid var(--trait); }
.dg .guide-q__sommaire a { min-height: 44px; border-radius: 4px; }

/* ---------- Blocks: the rhythm and heads of the collections ---------- */
.dg > .bloc, .dg > section { padding-block: var(--dg-bas) 0; background: none; }
.dg > .bloc:last-of-type { padding-bottom: var(--dg-bas); }
.dg .rubrique { padding: 1rem 0 0; border: 0; border-top: 2px solid var(--anthracite); }
.dg :is(.rubrique h2, .faq > h2, .article__corps > h2, .famille .rubrique-simple, .situations h2, .guide-avant h2, .mesure__titre) { font: 400 clamp(1.65rem, 1.15rem + 1.35vw, 2.4rem)/1.08 var(--serif); letter-spacing: -0.025em; text-wrap: balance; max-width: 26em; }
.dg :is(.faq, .article__corps, .famille .enveloppe, .situations .enveloppe, .guide-avant, .duel-options) { padding-top: 1rem; border-top: 2px solid var(--anthracite); }
.dg :is(.duel-options, .calc) > .rubrique-simple { margin: 0; font: 600 0.72rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bleu); }
.dg .rubrique > a { display: inline-flex; align-items: center; min-height: 44px; font: 600 0.88rem/1.2 var(--sans); color: var(--anthracite); text-decoration: underline; text-decoration-color: var(--moutarde); text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* Method: thin serif numerals, rules */
.dg .guide-methode li { padding-top: 0.9rem; border-top: 1px solid var(--trait); background: none; border-radius: 0; }
.dg .guide-methode__n { display: block; width: auto; height: auto; background: none; border-radius: 0; font: 300 2.6rem/0.9 var(--serif); letter-spacing: -0.04em; color: var(--bleu); }
.dg .guide-methode h3 { font: 600 1.02rem/1.3 var(--sans); }

/* ---------- The options as numbered chapters (guide A): picture 4:3 and words, alternating ---------- */
.dg .guide-q__grille { display: block; }
.dg .guide-carte { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); grid-template-areas: "n n" "photo titre" "photo chiffres" "photo texte" "photo piliers" "photo meilleur" "photo lien"; column-gap: var(--dg-gap); row-gap: 0.75rem; align-content: start; padding: clamp(2rem, 5vw, 3.4rem) 0; background: none; border: 0; border-top: 1px solid var(--anthracite); border-radius: 0; box-shadow: none; }
.dg .guide-carte:first-child { border-top-width: 2px; }
.dg .guide-carte:nth-child(even) { grid-template-areas: "n n" "titre photo" "chiffres photo" "texte photo" "piliers photo" "meilleur photo" "lien photo"; }
.dg .dg-n { grid-area: n; display: flex; align-items: baseline; gap: 0.8rem; margin: 0; font: 600 0.72rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--feutre); }
.dg .dg-n b { font: 300 clamp(2.8rem, 1.8rem + 3.4vw, 4.6rem)/0.8 var(--serif); letter-spacing: -0.05em; color: var(--anthracite); }
.dg .guide-carte__visuel { grid-area: photo; display: block; width: 100%; aspect-ratio: 4 / 3; margin: 0; overflow: hidden; border-radius: 4px; background: var(--platre-2); align-self: start; }
.dg .guide-carte__visuel img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.1, 1); }
.dg .guide-carte__visuel:hover img { transform: scale(1.03); }
.dg .guide-carte h2 { grid-area: titre; margin: 0; font: 400 clamp(1.6rem, 1.1rem + 1.5vw, 2.4rem)/1.08 var(--serif); letter-spacing: -0.02em; text-wrap: balance; }
.dg .guide-carte h2 a { color: inherit; text-decoration: none; }
.dg .guide-carte h2 a:hover { text-decoration: underline; text-decoration-color: var(--moutarde); text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
.dg .guide-carte__chiffres { grid-area: chiffres; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; border-block: 1px solid var(--trait); }
.dg .guide-carte__chiffres span { display: grid; gap: 0.15rem; padding: 0.7rem 0.8rem 0.7rem 0; font: 500 0.72rem/1.2 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--feutre); }
.dg .guide-carte__chiffres span + span { padding-left: 0.8rem; border-left: 1px solid var(--trait); }
.dg .guide-carte__chiffres strong { font: 300 1.9rem/1 var(--serif); letter-spacing: -0.02em; color: var(--anthracite); text-transform: none; }
/* Same overflow as .avis-mag__chiffres (main.css, 12/10) : .d07-releve est nowrap partout pour la légende
   courte « relevé le JJ/MM » d'un seul prix, mais ici elle porte la phrase plus longue de canape_d07b_note()
   (« prix relevés en <mois> »), qui force la 3e colonne au-delà de 1fr et déborde à droite sur mobile. */
.dg .guide-carte__chiffres .d07-releve { white-space: normal; }
.dg .guide-carte__texte { grid-area: texte; margin: 0; font: 400 1.06rem/1.6 var(--serif); }
.dg .guide-piliers { grid-area: piliers; display: grid; gap: 0.6rem; }
.dg .guide-piliers p { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0; }
.dg .guide-piliers__lib { flex-basis: 100%; margin: 0 0 0.1rem; font: 600 0.68rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--feutre); }
/* « Aussi » links: Éditorial options */
.dg .guide-piliers a { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; padding: 0 0.8rem; border: 1px solid var(--trait); border-radius: 4px; background: var(--blanc); color: var(--anthracite); font: 500 0.82rem/1.2 var(--sans); text-decoration: none; }
.dg .guide-piliers a .num { color: var(--feutre); font-size: 0.74rem; }
.dg .guide-piliers a:hover { border-color: var(--anthracite); box-shadow: inset 0 -3px 0 var(--moutarde); }
.dg .guide-carte__meilleur { grid-area: meilleur; margin: 0; font: 400 0.92rem/1.4 var(--serif); }
.dg .guide-carte .lien-fleche { grid-area: lien; justify-self: start; }

/* Details per option: rules, square minis */
.dg .guide-detail { padding: 1.6rem 0; border: 0; border-top: 1px solid var(--trait); border-radius: 0; background: none; }
.dg .guide-detail h3 { font: 400 clamp(1.35rem, 1.05rem + 0.9vw, 1.8rem)/1.12 var(--serif); letter-spacing: -0.015em; }
.dg .guide-detail__texte p { font: 400 1.02rem/1.6 var(--serif); }
.dg .guide-detail__repere div { border-top: 1px solid var(--trait); }
.dg .guide-detail__repere dt, .dg .guide-detail__surtitre { font: 600 0.68rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bleu); }
.dg .mini { border-radius: 4px; background: var(--blanc); }
.dg .mini img { border-radius: 2px; }

/* Tables, comparator, dimensions, pitfalls, articles, situations, FAQ, other guides */
.dg :is(.guide-tableau table, .comparaison, .duel-options__table) { background: none; border-radius: 0; border-top: 1px solid var(--anthracite); }
.dg :is(.guide-tableau, .duel-options__table) thead th { background: none; font: 600 0.7rem/1.2 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--feutre); }
.dg .duel-options__choix select { min-height: 44px; border-radius: 4px; border-color: var(--anthracite); }
.dg .duel-options { padding: 1rem 0 0; background: none; border: 0; border-top: 2px solid var(--anthracite); border-radius: 0; gap: 1.1rem; }
.dg .duel-options td.est-mieux { background: var(--moutarde-voile, #f5ecd3); }
.dg .guide-tableau { border: 0; border-radius: 0; background: none; }
.dg .guide-avant h2 { font-size: clamp(1.45rem, 1.05rem + 1.1vw, 2rem); }
.dg .guide-avant__liste { padding: 1rem 0 0; border-radius: 0; background: none; border-top: 1px solid var(--anthracite); }
.dg .guide-avant__pieges ol { font-size: 1rem; }
.dg .guide-avant__liste li { padding-top: 0.4rem; border-top: 1px solid var(--trait); }
.dg .guide-mag__article { border-radius: 4px; }
.dg .guide-mag__article img { border-radius: 3px; }
.dg .faq details { border-top: 1px solid var(--trait); }
.dg .faq summary { min-height: 44px; font: 600 1rem/1.35 var(--sans); }
.dg .guide-q__autres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--dg-gap); margin-top: 0.4rem; }
.dg .guide-q__autres .lien-fleche { border-bottom: 1px solid var(--trait); padding-block: 0.35rem; }

/* Calculator (same as the collections) */
.dg .calc { padding: 1.2rem 0 0; background: none; border: 0; border-top: 2px solid var(--anthracite); border-radius: 0; gap: 1.3rem; }
.dg :is(.calc__modes legend, .calc__lib, .calc__cote legend) { font: 600 0.72rem/1.2 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--feutre); }
.dg .calc__mode > span { min-height: 56px; border: 1px solid var(--trait); border-radius: 4px; background: var(--blanc); box-shadow: none; }
.dg .calc__mode input:checked + span { border-color: var(--anthracite); background: var(--anthracite); color: var(--blanc); box-shadow: inset 0 -3px 0 var(--moutarde); }
.dg .calc__mode input:checked + span small { color: #c3c1bb; }
.dg .calc__mode input:checked + span .calc__picto { stroke: var(--blanc); }
.dg .calc__mode input:focus-visible + span { outline: 3px solid var(--moutarde); outline-offset: 2px; }
.dg :is(.calc__saisie input, .calc__filtre select) { border-radius: 4px; border-color: var(--anthracite); }
.dg .calc__conv { min-height: 44px; border-radius: 4px; background: var(--blanc); }
.dg .calc__plan { border-radius: 0; background: var(--platre-2); }
.dg .calc__total .num { font: 300 2.4rem/1 var(--serif); letter-spacing: -0.03em; }
.dg .calc__carte { border-radius: 4px; }
.dg .calc .bouton { max-width: 100%; white-space: normal; text-align: center; padding-block: 0.6rem; line-height: 1.25; }

/* ---------- Buttons and arrow links: the « Éditorial » system ---------- */
.dg .bouton { min-height: 44px; max-width: 100%; border-radius: 4px; box-shadow: none; text-transform: none; letter-spacing: 0.005em; font: 600 0.92rem/1.15 var(--sans); }
.dg .bouton:focus-visible, .dg .lien-fleche:focus-visible, .dg .guide-piliers a:focus-visible { outline: 3px solid var(--moutarde); outline-offset: 2px; }
.dg :is(.bouton--discret, .bouton--guide) { border: 1px solid var(--anthracite); background: var(--blanc); color: var(--anthracite); }
.dg :is(.bouton--discret, .bouton--guide):hover { box-shadow: inset 0 -3px 0 var(--moutarde); }
.dg .bouton--marchand, .dg .calc .bouton:not(.bouton--discret) { border: 0; background: var(--anthracite); color: var(--blanc); }
.dg .bouton--marchand:hover, .dg .calc .bouton:not(.bouton--discret):hover { background: #000; color: var(--blanc); }
.dg .lien-fleche { display: inline-flex; align-items: center; min-height: 44px; color: var(--anthracite); font: 600 0.92rem/1.2 var(--sans); text-decoration: underline; text-decoration-color: var(--moutarde); text-decoration-thickness: 2px; text-underline-offset: 5px; }

@media (max-width: 1100px) { .dg .guide-q__une { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); column-gap: 1.6rem; } }
@media (max-width: 900px) {
  .dg .guide-q__tete .ariane { display: none; }
  .dg .guide-q__une { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sur" "titre" "chapeau" "suite" "visuel" "outils"; padding-top: 0.7rem; }
  .dg .dg-surtitre { font-size: 0.6rem; }
  .dg .guide-q__une h1 { font-size: 1.55rem; margin-top: 0.35rem; line-height: 1.08; }
  .dg .guide-q__une .chapeau p { font-size: 0.92rem; }
  .dg .dg-suite { font-size: 0.78rem; }
  .dg .guide-q__visuel { margin-top: 0.8rem; aspect-ratio: 21 / 9; }
  .dg .guide-q__une .outils-lecture { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; min-width: 0; max-width: 100%; }
  .dg .guide-q__une .outils-lecture > * { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.4rem; min-width: 0; max-width: 100%; }
  .dg .guide-q__une .outils-lecture :is(.resume-ia__liste, .partage__liste) { position: relative; display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; max-width: 100%; margin-inline: 0; padding-inline: 0; }
  .dg .guide-q__une .outils-lecture :is(.resume-ia__liste, .partage__liste)::-webkit-scrollbar { display: none; }
  .dg .guide-q__une .outils-lecture :is(.resume-ia__liste, .partage__liste) > * { flex: none; }
  .dg .dk-bulles { margin-inline: calc(-1 * var(--gutter)); padding: 0.6rem var(--gutter) 0.7rem; gap: 0.7rem; }
  .dg .dk-bulles__lib { display: none; }
  .dg .dk-bulles ul { gap: 0.75rem; }
  .dg .dk-bulle { width: 5.6rem; }
  .dg .dk-bulle__rond { width: 54px; height: 54px; }
  .dg .dk-bulle__nom { max-width: 5.6rem; font-size: 0.68rem; }
  .dg .dk-bulle__n { font-size: 0.62rem; }
  .dg .guide-carte, .dg .guide-carte:nth-child(even) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "n" "photo" "titre" "chiffres" "texte" "piliers" "meilleur" "lien"; }
  .dg .guide-carte__chiffres strong { font-size: 1.5rem; }
  .dg .guide-q__autres { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .dg .dk-bulle__rond, .dg .guide-carte__visuel img { transition: none; } }