/* ============================================================================
   Le funnel « قيس البيع ديالك » — style Product UI / SaaS commercial premium.

   Aucune variable nouvelle : on emprunte le vocabulaire de landing.css (--paper,
   --ink, --gold, --green, rayons, ombres, transitions). Vert = progression /
   validation / action ; doré = priorité, chiffres, premium ; gris = secondaire.
   Cartes arrondies, anneaux de progression, chips, pills — jamais d'illustration
   générique, jamais de 3D, jamais de surcharge.
   ============================================================================ */

.dg, .dg-res { padding-block: 40px 72px; }

/* Le funnel a son propre parcours : la barre d'action « inscription » de
   l'accueil ne doit pas s'immiscer PENDANT le diagnostic (elle reste utile sur
   la page résultat, qui porte son propre CTA d'achat). */
body:has(.dg) #lp-dock { display: none !important; }

/* Eyebrow centré, réutilisé du langage « chapitre » de l'accueil. */
.pb-eyebrow--center { justify-content: center; }

/* ============================ wizard : ossature ============================ */

.dg-shell { display: grid; gap: 32px; }

/* Colonne latérale : cachée sur téléphone, présente sur grand écran (§37). */
.dg-aside { display: none; }

.dg-form { min-width: 0; }

/* --- barre de progression --- */
.dg-progress { margin-bottom: 26px; }
.dg-progress-track {
  height: 6px; border-radius: 99px; background: var(--soft);
  overflow: hidden; box-shadow: inset 0 0 0 1px var(--line);
}
.dg-progress-fill {
  display: block; height: 100%; width: 33%;
  background: var(--grad-gold); border-radius: 99px;
  transition: width .4s cubic-bezier(.2,.75,.3,1);
}
.dg-progress-label {
  margin-top: 10px; font-size: .82rem; font-weight: 700; color: var(--gold-d); letter-spacing: .02em;
}
[dir="rtl"] .dg-progress-label { letter-spacing: 0; }

/* --- panneaux : un seul visible --- */
.dg-panel { display: none; }
.dg-panel.is-active { display: block; animation: dg-in .35s cubic-bezier(.2,.75,.3,1) both; }
@keyframes dg-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dg-panel.is-active { animation: none; } }

.dg-head { margin-bottom: 22px; }
.dg-head-center { text-align: center; }
.dg-head h1, .dg-head h2 { font-size: 1.55rem; }
@media (min-width: 640px) { .dg-head h1, .dg-head h2 { font-size: 1.9rem; } }
.dg-sub { margin-top: 12px; color: var(--ink2); font-size: 1.02rem; line-height: 1.6; }
.dg-time {
  margin-top: 14px; display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink3); font-size: .86rem; font-weight: 600;
}
.dg-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-l); }

/* --- champs / questions --- */
.dg-field { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.dg-q {
  display: block; font-family: "Baloo Bhaijaan 2","Readex Pro",system-ui,sans-serif;
  font-weight: 800; font-size: 1.06rem; color: var(--ink); letter-spacing: -.01em; line-height: 1.4;
}
[dir="rtl"] .dg-q { letter-spacing: 0; line-height: 1.55; }
.dg-hint { margin-top: 4px; color: var(--ink3); font-size: .84rem; }

.dg-input {
  width: 100%; margin-top: 10px; padding: 13px 15px;
  border: 1.5px solid var(--line-d); border-radius: var(--r-s); background: var(--card);
  font: inherit; color: var(--ink); transition: border-color var(--t), box-shadow var(--t);
}
.dg-input::placeholder { color: var(--ink3); }
.dg-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--glow); }
.dg-grid2 { display: grid; gap: 18px; }
@media (min-width: 640px) { .dg-grid2 { grid-template-columns: 1fr 1fr; } }

/* --- les 3 situations (cartes radio) --- */
.dg-stages { margin-top: 14px; display: grid; gap: 12px; }
.dg-stage {
  position: relative; display: flex; align-items: flex-start; gap: 14px; cursor: pointer;
  padding: 18px 18px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--card);
  box-shadow: var(--sh-1); transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.dg-stage:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--sh-glow); }
.dg-stage input { position: absolute; opacity: 0; pointer-events: none; }
.dg-stage-body { flex: 1; min-width: 0; }
.dg-stage-body b { display: block; font-size: 1.02rem; color: var(--ink); }
[dir="rtl"] .dg-stage-body b { line-height: 1.5; }
.dg-stage-body small { display: block; margin-top: 5px; color: var(--ink2); font-size: .9rem; line-height: 1.6; }
.dg-check {
  flex: none; width: 24px; height: 24px; border-radius: 50%; margin-top: 2px;
  border: 2px solid var(--line-d); transition: border-color var(--t), background var(--t);
}
.dg-stage:has(input:checked) {
  border-color: var(--gold); background: linear-gradient(135deg, var(--gold-l), #FFFDF8); box-shadow: var(--sh-glow);
}
.dg-stage:has(input:checked) .dg-check {
  border-color: var(--gold); background: var(--gold)
    radial-gradient(circle, #fff 34%, transparent 38%);
}
.dg-stage:has(input:focus-visible) { outline: 2.5px solid var(--gold); outline-offset: 2px; }

/* --- chips multi-choix (activité, canaux) --- */
.dg-chips { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; }
.dg-chip { cursor: pointer; }
.dg-chip input { position: absolute; opacity: 0; pointer-events: none; }
.dg-chip span {
  display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 99px;
  border: 1.5px solid var(--line-d); background: var(--card); color: var(--ink2);
  font-size: .9rem; font-weight: 600; transition: all var(--t);
}
.dg-chip:hover span { border-color: var(--gold); color: var(--ink); }
.dg-chip:has(input:checked) span {
  border-color: var(--gold); background: var(--gold-l); color: var(--gold-d);
  box-shadow: inset 0 0 0 1px var(--gold-l), var(--sh-1);
}
.dg-chip:has(input:checked) span::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  margin-inline-end: 8px; flex: none;
}
.dg-chip:has(input:focus-visible) span { outline: 2.5px solid var(--gold); outline-offset: 2px; }

/* --- questions adaptatives à choix simple --- */
.dg-opts { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; }
.dg-opt { cursor: pointer; }
.dg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.dg-opt span {
  display: inline-flex; padding: 10px 16px; border-radius: var(--r-s);
  border: 1.5px solid var(--line-d); background: var(--card); color: var(--ink2);
  font-size: .9rem; font-weight: 600; transition: all var(--t);
}
.dg-opt:hover span { border-color: var(--gold); color: var(--ink); }
.dg-opt:has(input:checked) span {
  border-color: var(--gold); background: var(--gold-l); color: var(--gold-d); box-shadow: var(--sh-1);
}
.dg-opt:has(input:focus-visible) span { outline: 2.5px solid var(--gold); outline-offset: 2px; }

/* --- auto-évaluation : sélecteur à 4 états + « pas essayé » --- */
.dg-skills { display: grid; gap: 16px; }
.dg-skill {
  border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px;
  background: var(--card); box-shadow: var(--sh-1); min-width: 0;
}
.dg-skill legend {
  font-family: "Baloo Bhaijaan 2","Readex Pro",system-ui,sans-serif; font-weight: 800;
  font-size: .98rem; color: var(--ink); padding: 0;
}
[dir="rtl"] .dg-skill legend { line-height: 1.5; }
.dg-scale { margin-top: 12px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dg-scale-opt { cursor: pointer; }
.dg-scale-opt input { position: absolute; opacity: 0; pointer-events: none; }
.dg-scale-opt span {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 10px 6px; border-radius: var(--r-s); border: 1.5px solid var(--line-d);
  background: var(--card); color: var(--ink2); font-size: .82rem; font-weight: 700;
  transition: all var(--t); min-height: 42px; line-height: 1.25;
}
.dg-scale-opt:hover span { border-color: var(--gold); color: var(--ink); }
/* La note choisie vire au vert (progression / validation). */
.dg-scale-opt:has(input:checked) span {
  border-color: var(--green); background: var(--green-l); color: var(--green-d);
  box-shadow: inset 0 0 0 1px var(--green-l), var(--sh-1);
}
.dg-scale-opt:has(input:focus-visible) span { outline: 2.5px solid var(--gold); outline-offset: 2px; }
.dg-untried { display: inline-flex; align-items: center; gap: 9px; margin-top: 12px; cursor: pointer; }
.dg-untried input { position: absolute; opacity: 0; pointer-events: none; }
.dg-untried span {
  display: inline-flex; align-items: center; gap: 9px; color: var(--ink3);
  font-size: .84rem; font-weight: 600; transition: color var(--t);
}
.dg-untried span::before {
  content: ""; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--line-d);
  transition: all var(--t); flex: none;
}
.dg-untried:has(input:checked) span { color: var(--ink); }
.dg-untried:has(input:checked) span::before {
  border-color: var(--ink3); background: var(--ink3)
    radial-gradient(circle, #fff 30%, transparent 34%);
}

/* --- navigation entre étapes --- */
.dg-nav { margin-top: 28px; display: flex; gap: 12px; }
.dg-nav .lp-btn { flex: 1; }
.dg-nav-center { justify-content: center; }
.dg-next { margin-inline-start: auto; }
@media (min-width: 640px) {
  .dg-nav { justify-content: flex-end; }
  .dg-nav .lp-btn { flex: none; min-width: 160px; }
}

/* --- écran de calcul --- */
.dg-loading {
  position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; justify-items: center; gap: 22px;
  background: radial-gradient(120% 90% at 50% 30%, var(--paper), var(--soft));
}
/* L'attribut hidden doit l'emporter sur le display:grid ci-dessus. */
.dg-loading[hidden] { display: none; }
.dg-loading-ring { width: 58px; height: 58px; border-radius: 50%;
  border: 4px solid var(--gold-l); border-top-color: var(--gold); animation: dg-spin .8s linear infinite; }
@keyframes dg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dg-loading-ring { animation: none; } }
.dg-loading-txt { font-family: "Baloo Bhaijaan 2",sans-serif; font-weight: 700; color: var(--ink); font-size: 1.1rem; }

/* wizard — ordinateur : formulaire + colonne de contexte (§37). */
@media (min-width: 960px) {
  .dg-shell { grid-template-columns: 260px minmax(0, 1fr); gap: 56px; align-items: start; }
  .dg-aside {
    display: block; position: sticky; top: 96px;
    padding: 24px; border: 1px solid var(--line); border-radius: var(--r-l);
    background: var(--card); box-shadow: var(--sh-1);
  }
  .dg-aside-steps { margin: 18px 0 0; display: grid; gap: 14px; list-style: none; padding: 0; }
  .dg-aside-steps li { display: flex; align-items: center; gap: 12px; color: var(--ink3); font-weight: 600; font-size: .92rem; transition: color var(--t); }
  .dg-aside-steps li b {
    flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
    background: var(--soft); color: var(--ink3); font-family: "Baloo Bhaijaan 2",sans-serif; font-size: .9rem;
    border: 1px solid var(--line);
  }
  .dg-aside-steps li.on { color: var(--ink); }
  .dg-aside-steps li.on b { background: var(--gold-l); color: var(--gold-d); border-color: #EFE2C4; }
  .dg-aside-steps li.done b { background: var(--green-l); color: var(--green-d); border-color: var(--green-l); }
  .dg-aside-note { margin-top: 20px; color: var(--ink3); font-size: .82rem; line-height: 1.6; }
}

/* ============================ page résultat ============================ */

.dg-res-head { text-align: center; }

/* --- l'anneau de score --- */
.dg-score { position: relative; width: 200px; height: 200px; margin: 18px auto 0; }
.dg-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.dg-ring circle { fill: none; stroke-width: 11; stroke-linecap: round; }
.dg-ring-bg { stroke: var(--soft); }
.dg-ring-fg {
  stroke: url(#dg-grad); stroke: var(--gold);
  stroke-dasharray: 326.726;
  stroke-dashoffset: calc(326.726 * (1 - var(--pct, 0) / 100));
  transition: stroke-dashoffset 1s cubic-bezier(.2,.75,.3,1);
}
.dg-score-num {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2px;
}
.dg-score-num b {
  font-family: "Baloo Bhaijaan 2",sans-serif; font-weight: 800; font-size: 3.4rem; line-height: 1;
  color: var(--ink); letter-spacing: -.03em;
}
.dg-score-num span { color: var(--ink3); font-size: .8rem; font-weight: 700; }
.dg-score-label { margin-top: 8px; color: var(--ink2); font-weight: 700; font-size: 1.02rem; }

.dg-stage-pill {
  margin: 18px auto 0; display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px; border-radius: 99px; background: var(--gold-l); border: 1px solid #EFE2C4;
}
.dg-stage-pill span { color: var(--gold-d); font-size: .82rem; font-weight: 700; }
.dg-stage-pill b { color: var(--ink); font-size: .92rem; }
.dg-situation { margin: 16px auto 0; max-width: 46ch; color: var(--ink2); font-size: 1.04rem; line-height: 1.7; }

/* --- les 4 cartes --- */
.dg-res-cards { margin-top: 34px; display: grid; gap: 12px; }
@media (min-width: 640px) { .dg-res-cards { grid-template-columns: 1fr 1fr; } }
.dg-card {
  border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px;
  background: var(--card); box-shadow: var(--sh-1);
}
.dg-card-k {
  display: block; color: var(--ink3); font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px;
}
[dir="rtl"] .dg-card-k { text-transform: none; letter-spacing: 0; }
.dg-card b { color: var(--ink); font-size: 1.06rem; font-weight: 700; line-height: 1.5; }
.dg-card-strong { border-color: var(--green-l); }
.dg-card-strong .dg-card-k { color: var(--green-d); }
.dg-card-priority { background: linear-gradient(135deg, var(--gold-l), #FFFDF8); border-color: #EFE2C4; }
.dg-card-priority .dg-card-k { color: var(--gold-d); }
.dg-card-next { grid-column: 1 / -1; }
.dg-card-next b { font-weight: 600; color: var(--ink); }

/* --- la recommandation gratuite --- */
.dg-reco {
  margin-top: 22px; padding: 24px; border-radius: var(--r-l);
  background: linear-gradient(135deg, var(--gold-l), #FFFDF8); border: 1px solid #EFE2C4; box-shadow: var(--sh-1);
}
.dg-reco-k {
  display: inline-flex; color: var(--gold-d); font-weight: 800; font-size: .92rem; margin-bottom: 10px;
}
.dg-reco-txt { color: var(--ink); font-size: 1.06rem; line-height: 1.75; font-weight: 500; }
.dg-reco-why { margin-top: 10px; color: var(--ink2); font-size: .94rem; line-height: 1.6; }
.dg-reco.is-loading .dg-reco-txt { opacity: .5; }

/* --- le pont --- */
.dg-bridge { margin-top: 40px; text-align: center; }
.dg-bridge-title { font-size: 1.5rem; margin-top: 4px; }
@media (min-width: 640px) { .dg-bridge-title { font-size: 1.9rem; } }
.dg-bridge-title-2 { display: block; color: var(--gold-d); margin-top: 4px; }
.dg-bridge-copy { margin-top: 14px; color: var(--ink2); font-size: 1.05rem; line-height: 1.7; }
.dg-here { color: var(--gold-d); font-weight: 800; }
.dg-do { color: var(--green-d); font-weight: 800; }
.dg-engine { margin-top: 26px; color: var(--ink2); font-size: 1rem; line-height: 1.7; max-width: 52ch; margin-inline: auto; }
.dg-engine-strong { margin-top: 8px; color: var(--ink); font-weight: 800; font-size: 1.14rem; }

/* --- les 3 sorties --- */
.dg-outputs { margin-top: 44px; }
.dg-outputs-title { font-size: 1.4rem; text-align: center; margin-bottom: 24px; }
.dg-out-grid { display: grid; gap: 16px; }
@media (min-width: 960px) { .dg-out-grid { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.dg-out {
  border: 1px solid var(--line); border-radius: var(--r-l); padding: 22px;
  background: var(--card); box-shadow: var(--sh-1);
}
/* Playbook + plan 90 jours : traités en tête, dorés (priment sur le « 58 »). */
.dg-out-hero { border-color: #EFE2C4; box-shadow: var(--sh-glow); }
.dg-out-tag {
  display: inline-flex; font-family: "Baloo Bhaijaan 2",sans-serif; font-weight: 800;
  font-size: 1.06rem; color: var(--ink); line-height: 1.4;
}
.dg-out-hero .dg-out-tag { color: var(--gold-d); }
.dg-out-sub { margin-top: 8px; color: var(--ink2); font-size: .92rem; line-height: 1.6; }
.dg-out-list { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 7px; list-style: none; padding: 0; }
.dg-out-list li {
  font-size: .78rem; font-weight: 600; color: var(--gold-d);
  background: var(--gold-l); border: 1px solid #EFE2C4; border-radius: 99px; padding: 4px 10px;
}
.dg-out-hi { margin-top: 16px; line-height: 1.5; }
.dg-out-hi span { display: block; color: var(--ink3); font-size: .9rem; }
.dg-out-hi strong { display: block; color: var(--ink); font-size: 1.02rem; }
.dg-out-timeline { margin: 16px 0 0; display: grid; gap: 8px; list-style: none; padding: 0; }
.dg-out-timeline li {
  position: relative; padding-inline-start: 18px; color: var(--ink); font-size: .95rem; font-weight: 600;
}
.dg-out-timeline li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 7px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-l);
}
.dg-out-badge {
  display: inline-flex; margin-top: 16px; padding: 6px 13px; border-radius: 99px;
  background: var(--green-l); color: var(--green-d); font-weight: 700; font-size: .82rem;
}
.dg-out-ugc { margin: 16px 0 0; display: grid; gap: 12px; list-style: none; padding: 0; }
.dg-out-ugc li b { display: block; color: var(--ink); font-size: .96rem; }
.dg-out-ugc li small { display: block; margin-top: 3px; color: var(--ink2); font-size: .85rem; line-height: 1.55; }

/* --- le passage à l'achat --- */
.dg-buy { margin-top: 46px; text-align: center; }
.dg-buy-title { font-size: 1.4rem; }
.dg-buy-title span { display: block; color: var(--gold-d); margin-top: 4px; }
.dg-buy-box {
  margin: 24px auto 0; max-width: 460px; padding: 28px 24px; border-radius: var(--r-xl);
  background: radial-gradient(120% 90% at 50% 0, var(--panel-2), var(--panel)); color: var(--panel-ink);
  box-shadow: var(--sh-2);
}
.dg-buy-price { color: #fff; }
.dg-buy-price s { color: var(--panel-ink2); font-size: 1rem; margin-inline-end: 8px; }
.dg-buy-price b { font-family: "Baloo Bhaijaan 2",sans-serif; font-size: 2.4rem; font-weight: 800; }
.dg-buy-price span { color: var(--panel-ink2); font-weight: 600; }
.dg-buy-cta {
  width: 100%; margin-top: 18px;
  background: var(--grad-gold); color: #211802;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 12px 30px -12px var(--glow-strong);
}
.dg-buy-cta:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 16px 38px -12px var(--glow-strong); }
.dg-incl { margin: 20px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; padding: 0; }
.dg-incl li {
  color: var(--panel-ink2); font-size: .82rem; font-weight: 600;
  padding: 6px 12px; border-radius: 99px; border: 1px solid var(--panel-line);
}
/* Playbook + plan 90 jours plus gros que le reste (§28). */
.dg-incl-hero {
  color: #211802 !important; background: var(--gold-hi); border-color: var(--gold-hi) !important;
  font-weight: 800 !important; font-size: .92rem !important;
}

/* --- garder le résultat (optionnel) --- */
.dg-keep { margin-top: 22px; }
.dg-keep-toggle {
  border: 0; background: none; cursor: pointer; color: var(--ink2);
  font: inherit; font-weight: 600; font-size: .92rem; text-decoration: underline; text-underline-offset: 3px;
}
.dg-keep-toggle:hover { color: var(--ink); }
.dg-keep-form { margin: 14px auto 0; max-width: 460px; }
.dg-keep-row { display: grid; gap: 10px; }
@media (min-width: 480px) { .dg-keep-row { grid-template-columns: 1fr 1fr; } }
.dg-keep-form .lp-btn { margin-top: 12px; width: 100%; }
.dg-keep-ok { margin-top: 10px; color: var(--green-d); font-weight: 700; font-size: .9rem; }