/* Conforme.QC — lot design B (v7.26.0)
   Système visuel validé par Moun (brief `_revue/design/BRIEF-design-B.md`, thème clair).
   Cette feuille est chargée APRÈS style.css : elle redéfinit la palette pour tout le site, puis ajoute les
   composants des pages refaites (accueil, rapport, tarifs, pages d'information). Les anciens composants de
   style.css restent valides et héritent de la nouvelle palette. */

:root {
  --paper: #F6F5F1;
  --surface: #FFFFFF;
  --surface-2: #EEF1EE;
  --text: #10202F;
  --muted: #4C5A66;
  --line: #DDE2DF;
  --line-strong: #9AA7A1;
  --track: #E6EAE8;
  --band: #10202F;
  --band-2: #16314b;
  --band-fg: #FFFFFF;
  --band-muted: #C9D3DA;
  --band-accent: #3CC48C;
  --accent: #1A7A51;
  --accent-hover: #15663F;
  --accent-ink: #FFFFFF;
  --accent-soft: #E6F3EC;
  --accent-line: #B9DCC9;
  --ok: #1A7A51;
  --warn: #9A5A06;
  --warn-soft: #FBF0DD;
  --fail: #B42318;
  --fail-soft: #FBE9E6;
  --unk: #4C5A66;
  --na-soft: #EEF0F1;
  --field-bg: #FFFFFF;
  --field-fg: #10202F;
  --field-ph: #6B7A84;
  --field-line: #8C9A94;
  --shadow-card: 0 10px 28px rgba(16, 32, 47, .08);
  --shadow-lift: 0 14px 36px rgba(16, 32, 47, .10);
  --wrap-b: 1160px;
}

/* v7.26.1 : un seul thème, le clair (décision de Moun). Rien ne dépend plus de `prefers-color-scheme`. */

/* ---------------------------------------------------------------- base commune */

.wrap-b { width: 100%; max-width: var(--wrap-b); margin-inline: auto; padding-inline: 24px; }
.wrap-b.tight { max-width: 1040px; }
.sect-b { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.sect-b.top { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem); }
.eyebrow-b { margin: 0 0 .65rem; font: 500 .8rem/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); }
.h1-b { margin: 0 0 1rem; font: 800 clamp(2.1rem, 5vw, 3.375rem)/1.05 var(--f-display); letter-spacing: -.02em;
  text-wrap: balance; }
.h1-b .mark { color: var(--accent); }
.h2-b { margin: 0 0 .75rem; font: 800 clamp(1.75rem, 3.6vw, 2.375rem)/1.1 var(--f-display); letter-spacing: -.01em;
  text-wrap: balance; }
.h3-b { margin: .35rem 0 .4rem; font: 700 1.3125rem/1.2 var(--f-display); }
.lead-b { margin: 0 0 1.6rem; max-width: 36rem; font-size: 1.1875rem; color: var(--muted); }
.note-b { margin: .75rem 0 0; font-size: .875rem; color: var(--muted); }
.card-b { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1.375rem; }
.cards-b { display: grid; gap: 20px; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.icn-b { width: 44px; height: 44px; flex: none; border-radius: 10px; background: var(--accent-soft); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; }
.icn-b svg { width: 24px; height: 24px; }
.icn-b.rouge { background: var(--fail-soft); color: var(--fail); }
.btn-b { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 52px;
  padding: 0 1.375rem; border: 0; border-radius: 10px; background: var(--accent); color: var(--accent-ink);
  font: 700 1.0625rem/1 var(--f-display); text-decoration: none; cursor: pointer; }
.btn-b:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn-b.ghost { background: transparent; color: inherit; border: 1.5px solid var(--line-strong); }
.btn-b.ghost:hover { background: var(--surface-2); color: inherit; }
.btn-b.block { width: 100%; }
.btn-b.sm { min-height: 46px; font-size: 1rem; }

/* ---------------------------------------------------------------- en-tête et menu */

.site-header { position: sticky; top: 0; z-index: 30; background: var(--surface); border-bottom: 1px solid var(--line); }
.site-header .wrap { max-width: var(--wrap-b); display: flex; align-items: center; gap: 1.5rem; padding: 12px 24px; }
/* L'en-tête est clair : la marque reprend la couleur du texte (elle était blanche sur l'ancienne bande foncée). */
.site-header .brand { color: var(--text); font: 800 1.3125rem/1 var(--f-display); gap: .6rem; }
.site-header .brand .qc { color: var(--accent); }
.site-header nav { gap: 1.5rem; margin-left: auto; font: 600 .9375rem/1 var(--f-body); }
.site-header nav a { color: var(--text); text-decoration: none; }
.site-header nav a:hover { color: var(--accent); }
.site-header .btn { min-height: 44px; padding: 0 1.125rem; font-size: .9375rem; border-radius: 10px; }
.burger { display: none; margin-left: auto; width: 44px; height: 44px; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); cursor: pointer; }
.burger svg { width: 20px; height: 20px; }
.menu-m { display: none; }
.menu-m[open] summary .ouvre, .menu-m summary .ferme { display: none; }
.menu-m[open] summary .ferme { display: inline-flex; }
.menu-m > summary { list-style: none; display: inline-flex; }
.menu-m > summary::-webkit-details-marker { display: none; }
.menu-m nav { position: absolute; left: 0; right: 0; top: 100%; display: grid; gap: 2px; padding: 8px 16px 16px;
  background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-card); }
.menu-m nav a { display: flex; align-items: center; min-height: 48px; padding: 0 .5rem; color: var(--text);
  text-decoration: none; font-weight: 600; border-radius: 8px; }
.menu-m nav a:hover { background: var(--surface-2); }
.menu-m nav .btn-b { margin-top: .5rem; }

@media (max-width: 900px) {
  .site-header .wrap { position: relative; gap: .75rem; }
  .site-header nav, .site-header > .wrap > .btn { display: none; }
  .burger { display: inline-flex; }
  .menu-m { display: block; margin-left: auto; }
}

/* ---------------------------------------------------------------- accueil */

.hero-b { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; }
.scanbox { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px;
  box-shadow: var(--shadow-card); }
.scanbox label { display: block; margin-bottom: 8px; font-weight: 700; font-size: .9375rem; }
.scanrow { display: flex; gap: 10px; }
.scanrow input { flex: 1; min-width: 0; height: 54px; padding: 0 16px; font: inherit; font-size: 1.125rem;
  color: var(--field-fg); background: var(--field-bg); border: 1.5px solid var(--field-line); border-radius: 10px; }
.scanrow input::placeholder { color: var(--field-ph); }
.scanrow .btn-b { height: 54px; white-space: nowrap; }
.hp-b { position: absolute; left: -9999px; width: 1px; height: 1px; }

.repcard { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-lift); }
.repcard-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: 13px 20px;
  border-bottom: 1px solid var(--line); font: 500 .8125rem/1.2 var(--f-mono); color: var(--muted); }
.repcard-top .ex { border: 1px solid var(--line); border-radius: 99px; padding: 2px 10px; }
.repcard-score { display: flex; gap: 20px; align-items: center; padding: 20px; }
.repcard-rows { border-top: 1px solid var(--line); font-size: .9375rem; }
.repcard-rows div { display: flex; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.repcard-rows div:last-child { border-bottom: 0; }
.repcard-foot { display: block; padding: 13px 20px; background: var(--surface-2); color: var(--accent);
  font-weight: 600; font-size: .9375rem; text-decoration: none; }
.lawtag { font: 500 .6875rem/1.4 var(--f-mono); padding: 2px 6px; border-radius: 5px; height: fit-content;
  background: var(--fail-soft); color: var(--fail); white-space: nowrap; }

.gauge-b { width: 92px; height: 92px; flex: none; border-radius: 50%; border: 9px solid var(--fail);
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gauge-b .n { font: 800 1.875rem/1 var(--f-display); }
.gauge-b .d { font-size: .75rem; color: var(--muted); }
.gauge-b.lg { width: 120px; height: 120px; border-width: 11px; }
.gauge-b.lg .n { font-size: 2.375rem; }
.gauge-b.vert { border-color: var(--ok); }
.gauge-b.orange { border-color: var(--warn); }
.gauge-b.rouge { border-color: var(--fail); }
.niveau { font: 800 1.25rem/1.2 var(--f-display); }
.niveau.vert { color: var(--ok); } .niveau.orange { color: var(--warn); } .niveau.rouge { color: var(--fail); }

.proofband { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proofband .wrap-b { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding-block: 24px; }
.proof-i { display: flex; gap: 14px; align-items: flex-start; }
.proof-i .icn-b { width: 42px; height: 42px; }
.proof-i strong { display: block; font-weight: 700; }
.proof-i span { font-size: .9375rem; color: var(--muted); }

.figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.figs .fig { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1.375rem; }
.figs .fig b { display: block; font: 800 2rem/1.1 var(--f-display); }
.figs .fig span { color: var(--muted); font-size: .9375rem; }
.src-b { margin: .875rem 0 0; font-size: .8125rem; color: var(--muted); }

.lawlist { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: .5rem 1.375rem 1rem; }
.lawlist ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 1rem; }

/* v7.29.0 (point B3) : les deux colonnes commencent EN HAUT. Avec « align-items: center », la colonne de
   gauche (titre et liste du contenu) était centrée sur la hauteur de la colonne de droite — qui porte deux
   choix de prix et deux boutons — et laissait un grand vide au-dessus du titre. Vu par Moun sur le rapport du
   22 octobre, sur ordinateur comme sur téléphone. */
.kitbox { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: start;
  background: var(--surface); border: 2px solid var(--accent); border-radius: 18px; padding: 2rem; }
.kitbox ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.kitbox .prix { font: 800 2.75rem/1 var(--f-display); }
.kitside { display: grid; gap: 10px; align-content: start; }

.plans-b { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.plan-b { display: flex; flex-direction: column; gap: 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 1.625rem; }
.plan-b.hl { border: 2px solid var(--accent); box-shadow: 0 14px 34px rgba(26, 122, 81, .14); }
.plan-b h3, .plan-b h2 { margin: 0; font: 700 1.3125rem/1.2 var(--f-display); }
.plan-b .pour { margin: 2px 0 0; font-size: .9375rem; color: var(--muted); }
.plan-b .prix { font: 800 2.5rem/1 var(--f-display); }
.plan-b .prix small { font: 400 1rem/1.4 var(--f-body); color: var(--muted); }
.plan-b ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 1rem; flex: 1; }
.plan-b ul li { display: flex; gap: 10px; }
.plan-b ul li svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--accent); }
.plan-b .fin { border-top: 1px solid var(--line); padding-top: 12px; font-size: .875rem; color: var(--muted); }
.plan-b .fin.vert { color: var(--accent); font-weight: 600; }
.reco { font: 500 .6875rem/1.4 var(--f-mono); padding: 3px 9px; border-radius: 99px; background: var(--accent);
  color: var(--accent-ink); white-space: nowrap; }
.plan-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }

.choice { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; background: var(--surface-2); border-radius: 14px; padding: 18px 22px; }
.extras2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.extras2 > div { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; }
.extras2 strong { display: block; }
.extras2 span { color: var(--muted); font-size: .9375rem; }

.faq-b { display: grid; gap: 10px; max-width: 54rem; }
.faq-b details { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; }
.faq-b summary { font-weight: 700; cursor: pointer; }
.faq-b details p, .faq-b details ul { margin: .625rem 0 0; color: var(--muted); }

.finalband { background: var(--band); color: var(--band-fg); border-radius: 20px; padding: 2.75rem 2.25rem;
  display: grid; gap: 18px; justify-items: start; }
.finalband h2 { color: var(--band-fg); }
.finalband p { color: var(--band-muted); font-size: .9375rem; }
.finalband form { width: 100%; max-width: 40rem; }
.finalband .scanrow input { border: 0; }
.finalband .scanrow .btn-b { background: var(--band-accent); color: #06231A; }
.finalband .scanrow .btn-b:hover { background: #2FB97E; color: #06231A; }

.ctafixed { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: none;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--surface);
  border-top: 1px solid var(--line); box-shadow: 0 -8px 20px rgba(16, 32, 47, .08); }
.ctafixed .btn-b { width: 100%; min-height: 50px; }

/* Pied de page : un titre qui suit une liste respire (« Nous joindre » collait aux liens au-dessus). */
.site-footer ul + h4 { margin-top: 1.5rem; }

/* Bouton secondaire du rapport : jamais coupé sur deux lignes, même à 390 px. */
.kitside .btn-b.sm { white-space: nowrap; font-size: .9375rem; padding: 0 .875rem; }

/* ---------------------------------------------------------------- rapport */

.rep-head { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.rep-score { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 1.5rem;
  display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.rep-score > div:last-child { flex: 1; min-width: 14rem; }
.bars-b { display: grid; grid-template-columns: 70px minmax(0, 1fr) 62px; gap: 8px 12px; align-items: center;
  font-size: .9375rem; }
.bars-b .t { height: 8px; border-radius: 99px; background: var(--track); }
.bars-b .t i { display: block; height: 8px; border-radius: 99px; background: var(--accent); }
.bars-b .v { font: 500 .8125rem/1.4 var(--f-mono); text-align: right; }
/* v7.30.0 (G2) : la ligne d'économie des offres groupées. Discrète : c'est un fait, pas une accroche. */
.choix-eco, .plan-eco { margin: .375rem 0 0; font-size: .9375rem; font-weight: 600; color: var(--accent); }
.offerbox { background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 16px; padding: 1.375rem; }
.offerbox h2, .offerbox h3 { margin: 0 0 .375rem; font: 700 1.1875rem/1.25 var(--f-display); }
.offerbox p { margin: 0 0 .875rem; font-size: .9375rem; color: var(--muted); }
.obs { display: grid; gap: 14px; }
.obs article { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; }
.obs .ttl { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.obs h3 { margin: 0; font: 700 1.25rem/1.25 var(--f-display); }
.obs p { margin: .625rem 0 .5rem; }
.obs .fix { margin: 0; font-size: .9375rem; color: var(--muted); }
.obs .fix strong { color: var(--text); }
.obs ul { margin: .25rem 0 .5rem; padding-left: 20px; display: grid; gap: 4px; font-size: .9375rem; color: var(--muted); }
/* Les constats nomment des pages : une adresse longue ne doit jamais faire défiler la page sur le côté. */
.obs p, .obs ul, .obs ul li, .detail-b .r, .scope-b, .repcard-rows div, .prose-b p { overflow-wrap: anywhere; }
.statut { font: 500 .75rem/1.5 var(--f-mono); padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.statut.fail { background: var(--fail-soft); color: var(--fail); }
.statut.warn { background: var(--warn-soft); color: var(--warn); }
.statut.ok { background: var(--accent-soft); color: var(--accent); }
.statut.na, .statut.unk { background: var(--na-soft); color: var(--muted); }
.detail-b { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.detail-b .r { display: grid; grid-template-columns: 124px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 12px 20px; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.detail-b .r:last-child { border-bottom: 0; }
.detail-b .r .statut { text-align: center; }
/* v7.27.2 : la colonne des points etait figee a 104 px. « rapport complet » avec son cadenas n y tenait pas
   et retombait sur DEUX lignes (mesure du 2026-10-22 : 36 px de haut contre 18 pour les autres lignes), ce
   qui donnait l impression d un chiffre seul au-dessus du texte. La colonne prend desormais la largeur
   qu il faut, et son contenu ne se coupe jamais. */
.detail-b .r .pts { font: 500 .8125rem/1.4 var(--f-mono); text-align: right; color: var(--muted);
  white-space: nowrap; }
.detail-b .r .pts .lock { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.detail-b .r .pts .lock svg { width: 14px; height: 14px; flex: none; }
.detail-b .r small { display: block; color: var(--muted); }
.scope-b { border-top: 1px solid var(--line); padding-top: 20px; display: grid; gap: 8px; font-size: .875rem;
  color: var(--muted); }
.scope-b strong { color: var(--text); font-size: .9375rem; }
.mailbox { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 1.375rem; display: grid; gap: 12px; }
.mailbox label.l { font-weight: 700; font-size: .9375rem; }
.mailbox input[type=email] { height: 50px; padding: 0 16px; font: inherit; color: var(--field-fg);
  background: var(--field-bg); border: 1.5px solid var(--field-line); border-radius: 10px; }
.mailbox .consent { display: flex; gap: .625rem; align-items: flex-start; font-size: .9375rem; color: var(--muted); }
.mailbox .consent input { width: 22px; height: 22px; margin-top: 2px; flex: none; }

/* « Garder ce rapport » (v7.26.2) : le lien et deux actions locales, aucune adresse demandée. */
.garder { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 1.375rem; display: grid; gap: 12px; }
.garder label.l { font-weight: 700; font-size: .9375rem; }
.lien-rapport { width: 100%; height: 50px; padding: 0 16px; font: 500 .9375rem/1 var(--f-mono); color: var(--text);
  background: var(--surface-2); border: 1.5px solid var(--line); border-radius: 10px; }
.garder-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------------------------------------------------------------- pages d'information */

.prose-b { max-width: 48rem; }
.prose-b h2 { margin: 2.25rem 0 .75rem; font: 800 1.625rem/1.2 var(--f-display); }
.prose-b h3 { margin: 1.5rem 0 .5rem; font: 700 1.1875rem/1.25 var(--f-display); }
.prose-b p, .prose-b ul, .prose-b ol { margin: 0 0 1rem; }
.prose-b ul, .prose-b ol { padding-left: 1.375rem; display: grid; gap: .5rem; }
.prose-b .src-b { margin-bottom: 1rem; }
.prose-b .encadre { background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 1rem 1.25rem; margin: 0 0 1rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 1.5rem 0 2rem; }
.cta-row .note-b { margin: 0; }

/* ------------------------------------------------- boutons flottants (v7.26.0)
   Sur ordinateur, le lanceur du clavardage passe à DROITE : à gauche, il couvrait le début des titres de section
   (la colonne de contenu commence à 84 px sur un écran de 1280). Le bouton « retour en haut » monte au-dessus de
   lui. Sur téléphone, le lanceur reste à gauche et remonte au-dessus du bouton d'analyse fixé en bas. */
/* v7.26.1 : la pastille du clavardage est RONDE et à DROITE partout. À gauche, elle couvrait le début des titres
   sur ordinateur et la carte d'exemple sur téléphone. Son libellé reste lu par les lecteurs d'écran : il est caché
   à l'œil, pas au clavier ni à la synthèse vocale. */
.cqc-launch, .cqc-panel { left: auto; right: calc(16px + env(safe-area-inset-right, 0px)); }
.cqc-launch { width: 56px; height: 56px; padding: 0; justify-content: center; border-radius: 50%; }
.cqc-launch span { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cqc-panel { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
.to-top { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

/* ---------------------------------------------------------------- téléphone */

@media (max-width: 900px) {
  .hero-b, .kitbox, .cards-b, .plans-b, .figs, .extras2, .rep-head { grid-template-columns: minmax(0, 1fr); }
  .proofband .wrap-b { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scanrow { flex-direction: column; }
  /* En colonne, « flex: 1 » s'applique à la HAUTEUR : le champ tombait à ~28 px. Il reprend ses 54 px. */
  .scanrow input { flex: none; width: 100%; height: 54px; }
  .scanrow .btn-b { width: 100%; }
  .kitbox { padding: 1.5rem; gap: 1.5rem; }
  .finalband { padding: 1.75rem 1.25rem; }
  .detail-b .r { grid-template-columns: minmax(0, 1fr) auto; }
  .detail-b .r .statut { grid-column: 1 / -1; justify-self: start; }
  body.cta-fixe .ctafixed { display: block; }
  body.cta-fixe { padding-bottom: 86px; }
  body.cta-fixe .cqc-launch { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  body.cta-fixe .cqc-panel { bottom: calc(160px + env(safe-area-inset-bottom, 0px));
    height: calc(100dvh - 180px - env(safe-area-inset-bottom, 0px)); }
  body.cta-fixe .to-top { bottom: calc(160px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 560px) {
  .proofband .wrap-b { grid-template-columns: minmax(0, 1fr); }
  .wrap-b { padding-inline: 16px; }
  .repcard-score { gap: 14px; padding: 14px 16px; }
  .rep-score { padding: 1.125rem; gap: 1rem; }
}


/* ------------------------------------------------- impression du rapport (v7.26.2)
   Le visiteur imprime, ou enregistre en PDF, depuis son navigateur. On retire tout ce qui n'a pas de sens sur
   papier (en-tête fixe, menu, clavardage, boutons, encadrés d'offre) et on garde le rapport lui-même, en noir
   sur blanc, sans couper une carte en deux. */
@media print {
  .site-header, .site-footer, .ctafixed, .cqc-launch, .cqc-panel, .to-top, .menu-m,
  .garder, .offerbox, .kitbox, .choice { display: none !important; }
  body { background: #fff; color: #000; }
  .sect-b { padding-block: .5rem; }
  .wrap-b { max-width: none; padding-inline: 0; }
  .card-b, .rep-score, .obs article, .detail-b, .scope-b { border-color: #999; box-shadow: none; break-inside: avoid; }
  .obs article, .detail-b .r { break-inside: avoid; }
  a[href]::after { content: ""; }
  .h1-b { font-size: 24pt; }
  .h2-b { font-size: 16pt; }
}

/* ------------------------------------------------------------------ anti-robot Turnstile (v7.27.1)
   Le widget est rendu dans un cadre par challenges.cloudflare.com (seul script tiers autorisé, CSP stricte).
   On ne touche NI à son contenu NI à ses couleurs : on ne fait que lui donner sa place dans la page, et on
   l'empêche de déborder sur téléphone (il demande 300 px au minimum ; en dessous, il se met à l'échelle). */
.cf-turnstile, .cqc-ts { margin-top: .75rem; min-height: 65px; }
.cf-turnstile iframe, .cqc-ts iframe { max-width: 100%; }
@media (max-width: 340px) {
  .cf-turnstile, .cqc-ts { transform: scale(.92); transform-origin: left top; }
}
@media print { .cf-turnstile, .cqc-ts { display: none; } }

/* v7.27.2 : `.btn-b` impose display:inline-flex, ce qui ÉCRASE l'attribut `hidden` du navigateur. Résultat
   mesuré le 2026-10-22 : quand app.js ne tournait pas (fichier périmé servi par un cache), les deux boutons
   « Copier le lien » et « Imprimer » restaient VISIBLES et ne faisaient rien. Un bouton visible doit être un
   bouton vivant : on rend l'attribut `hidden` plus fort que toute règle de display. */
[hidden] { display: none !important; }

/* v7.27.2 — carte de la trousse dans le rapport : DEUX choix explicites.
   Avant, la colonne de droite montrait « 249 $ » puis un bouton « 299 $/an » : deux prix, aucune explication
   de la différence. Chaque choix porte maintenant son nom, son prix, sa modalité et ce qu'il contient. */
.kitside .choix { background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px;
  padding: 1rem 1.125rem; display: grid; gap: 8px; }
.kitside .choix.reco-on { border-color: var(--accent); box-shadow: var(--shadow-card); }
.kitside .choix-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kitside .choix-tete h3 { margin: 0; font: 700 1.0625rem/1.3 var(--f-display); }
.kitside .choix-prix { margin: 0; }
.kitside .choix .prix { font: 800 2rem/1 var(--f-display); }
.kitside .choix-quoi { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--muted); }
@media (max-width: 760px) {
  .kitside .choix .prix { font-size: 1.75rem; }
}

/* v7.29.1 (point 2) : verdict « Évaluation partielle ». Couleur NEUTRE, jamais verte : un verdict que les
   preuves ne portent pas ne doit pas ressembler à une bonne nouvelle. */
.gauge-b.partiel, .niveau.partiel { --accent: var(--muted); }
.niveau.partiel { color: var(--muted); }
.gauge-b.partiel { border-color: var(--line); color: var(--muted); }
.partiel { margin: .75rem 0 0; padding: .875rem 1rem; border: 1px solid var(--line); border-left: 4px solid var(--muted);
  border-radius: 8px; background: var(--surface-2); }
.partiel p { margin: 0 0 .5rem; }
.partiel ul { margin: 0 0 .5rem; padding-left: 1.2rem; }
.partiel .rescan { margin-top: .75rem; }
/* v7.29.2 (point 2) : barres par loi d'un rapport partiel. Le chiffre dit « 53/53 points vérifiés » : la
   colonne de droite s'élargit et le texte passe à la ligne au besoin, la barre elle-même se resserre. */
.bars-b.partiel-bars { grid-template-columns: 70px minmax(0, 1fr) minmax(5.5rem, auto); }
.bars-b.partiel-bars .v { white-space: normal; color: var(--muted); }