/* ═══════════════════════════════════════════════════════════
   Diagnostic de décarbonation
   Feuille séparée : le diagnostic ne charge que sur sa page.
   Utilise les tokens de style.css, n'en redéfinit aucun.
   ══════════════════════════════════════════════════════════ */
.dg-h1{
  font-size:clamp(30px,4.6vw,50px); font-weight:600; line-height:1.06;
  letter-spacing:-.032em; color:#fff; margin:16px 0 18px; max-width:26ch;
}
.dg-sub{ color:rgba(255,255,255,.78); font-size:17px; line-height:1.6; max-width:62ch; }

.dg-app{ max-width:760px; margin-inline:auto; }
.dg-card{
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
  padding:clamp(26px,4vw,44px);
}
.dg-card > *{ min-width:0; }
.dg-noscript{ color:var(--text-muted); line-height:1.65; margin:0; }

/* -- ecran d'accueil --------------------------------------------------- */
.dg-start-lead{ color:var(--text-muted); line-height:1.65; margin:0 0 22px; }
.dg-start-list{ list-style:none; margin:0 0 30px; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
@media (min-width:640px){ .dg-start-list{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 28px; } }
.dg-start-list li{ border-top:1px solid var(--border); padding-top:12px; }
.dg-start-list b{ display:block; font-size:15px; color:var(--text); margin-bottom:3px; }
.dg-start-list span{ display:block; font-size:14px; color:var(--text-muted); line-height:1.55; }
.dg-note{ margin:16px 0 0; font-size:13.5px; color:var(--text-muted); }

/* -- question ---------------------------------------------------------- */
.dg-progress{ height:3px; background:var(--border); border-radius:99px; overflow:hidden; margin-bottom:22px; }
.dg-progress-bar{ height:100%; background:var(--green); transition:width .35s var(--ease-rs); }
.dg-meta{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; flex-wrap:wrap; }
.dg-step, .dg-cat{
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
}
.dg-step{ color:var(--text-muted); }
.dg-cat{ color:var(--green); }
.dg-q{
  font-size:clamp(21px,2.7vw,28px); font-weight:600; line-height:1.22;
  letter-spacing:-.022em; color:var(--text); margin:14px 0 10px;
}
.dg-aide{ color:var(--text-muted); font-size:15px; line-height:1.6; margin:0 0 26px; }
.dg-choices{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.dg-choice{
  text-align:left; width:100%; box-sizing:border-box; padding:15px 18px; cursor:pointer;
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-md); font-family:inherit; font-size:15.5px;
  font-weight:500; color:var(--text);
  transition:border-color .2s var(--ease-rs), background-color .2s var(--ease-rs), transform .2s var(--ease-rs);
}
.dg-choice:hover{ border-color:var(--green); background:var(--green-pale); transform:translateY(-1px); }
.dg-choice:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }
.dg-choice.is-on{ border-color:var(--green); background:var(--green-light); }
.dg-nav{ display:flex; justify-content:space-between; margin-top:22px; }
.dg-back{
  background:none; border:0; padding:0; cursor:pointer; font-family:inherit;
  font-size:14px; color:var(--text-muted); text-decoration:underline; text-underline-offset:3px;
}
.dg-back:hover{ color:var(--text); }

/* -- resultat ---------------------------------------------------------- */
.dg-score-head{ display:grid; gap:24px; align-items:center; }
@media (min-width:620px){ .dg-score-head{ grid-template-columns:auto minmax(0,1fr); gap:34px; } }
/* Le cercle centre un GROUPE ; c'est le groupe qui aligne le nombre et le
   « /100 » sur la ligne de base. Avec align-items:baseline pose directement
   sur le cercle, le tout remontait vers le haut (corrige le 2026-08-27). */
.dg-score{
  display:grid; place-items:center;
  width:132px; height:132px; border-radius:50%;
  background:var(--dark); color:#fff; flex:none; margin-inline:auto;
}
.dg-score-in{ display:flex; align-items:baseline; gap:2px; line-height:1; }
.dg-score b{ font-size:44px; font-weight:600; letter-spacing:-.03em; line-height:1; }
.dg-score-in > span{ font-size:15px; color:rgba(255,255,255,.62); line-height:1; }
.dg-level{ font-size:clamp(21px,2.6vw,27px); font-weight:600; letter-spacing:-.022em;
  color:var(--text); margin:12px 0 8px; }
.dg-level-d{ color:var(--text-muted); line-height:1.6; margin:0 0 12px; }
.dg-delai{ margin:0; font-size:14.5px; color:var(--text); }
.dg-delai b{ display:block; font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); margin-bottom:3px; }

.dg-bars{ display:grid; grid-template-columns:minmax(0,1fr); gap:13px; margin:32px 0 0; }
.dg-bar-l{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:6px; }
.dg-bar-l span{ font-size:14.5px; color:var(--text); }
.dg-bar-l b{ font-size:13.5px; color:var(--text-muted); font-weight:600; }
.dg-bar-t{ height:6px; background:var(--bg); border-radius:99px; overflow:hidden; }
.dg-bar-t i{ display:block; height:100%; border-radius:99px; }
.dg-bar-t i.is-bas{ background:#C2410C; }
.dg-bar-t i.is-moyen{ background:#B45309; }
.dg-bar-t i.is-haut{ background:var(--green); }
.dg-focus{ margin:22px 0 0; font-size:15px; color:var(--text); line-height:1.6; }

.dg-gate{ margin-top:30px; padding-top:28px; border-top:1px solid var(--border); }
.dg-gate h2{ font-size:20px; font-weight:600; letter-spacing:-.02em; color:var(--text); margin:0 0 6px; }
.dg-formwrap{ margin-top:34px; padding-top:30px; border-top:1px solid var(--border); }
.dg-formwrap h3{ font-size:20px; font-weight:600; letter-spacing:-.02em; color:var(--text); margin:0 0 6px; }
.dg-form-sub{ color:var(--text-muted); font-size:15px; line-height:1.6; margin:0 0 22px; }
.dg-form{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
@media (min-width:620px){ .dg-form{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dg-form > button, .dg-form > .dg-rgpd, .dg-form > .dg-err{ grid-column:1/-1; } }
.dg-form label{ display:block; font-size:13.5px; font-weight:500; color:var(--text); }
.dg-opt{ color:var(--text-muted); font-weight:400; }
.dg-form input{
  display:block; width:100%; box-sizing:border-box; margin-top:6px; padding:12px 14px;
  border:1px solid var(--border); border-radius:var(--radius-md);
  font-family:inherit; font-size:15px; color:var(--text); background:var(--white);
}
.dg-form input:focus{ outline:2px solid var(--green); outline-offset:1px; border-color:var(--green); }
.dg-form button{
  justify-self:start; max-width:100%; white-space:normal;
  padding-inline:clamp(16px,5vw,32px);
}
.dg-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.dg-rgpd{ font-size:13px; color:var(--text-muted); line-height:1.55; margin:2px 0 0; }
.dg-rgpd a{ color:var(--green); text-decoration:underline; text-underline-offset:2px; }
.dg-err{ margin:0; font-size:14px; color:#B42318; }
.dg-merci{ margin-top:32px; padding-top:28px; border-top:1px solid var(--border); }
.dg-merci h3{ font-size:20px; font-weight:600; color:var(--text); margin:0 0 8px; }
.dg-merci p{ color:var(--text-muted); line-height:1.65; margin:0; }
.dg-result > .dg-back{ margin-top:26px; }


/* Garde-fous de largeur : rien ne doit imposer sa largeur intrinseque. */
.dg-card, .dg-form, .dg-form label, .dg-bars, .dg-bar, .dg-score-head{ min-width:0; }
.dg-form label, .dg-bar, .dg-bar-t{ max-width:100%; }
.dg-score{ max-width:100%; }


/* Contexte retenu, rappele dans le resultat : c'est ce que RMA lira en premier. */
.dg-qualif{
  margin-top:28px; padding:18px 20px; background:var(--bg);
  border-radius:var(--radius-md); border-left:3px solid var(--green);
}
.dg-qualif-t{
  display:block; font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase; color:var(--text-muted); margin-bottom:10px;
}
.dg-qualif ul{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.dg-qualif li{ font-size:14.5px; color:var(--text); line-height:1.5; }
.dg-qualif li b{ display:block; font-size:12.5px; font-weight:500; color:var(--text-muted); }
@media (min-width:560px){
  .dg-qualif ul{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 24px; }
}