/* ============================================================
   DiagOtO — Frontend Styles v1.1
   ============================================================ */

/* ── Reset & Variables ─────────────────────────────────────── */
.diagoto-wrapper {
    --dg-primary:     #0073aa;
    --dg-primary-dk:  #005177;
    --dg-accent:      #f59e0b;
    --dg-pro:         #7c3aed;
    --dg-pro-dk:      #5b21b6;
    --dg-success:     #10b981;
    --dg-success-lt:  #d1fae5;
    --dg-danger:      #ef4444;
    --dg-warning:     #f59e0b;
    --dg-warning-lt:  #fff3cd;
    --dg-dark:        #0f172a;
    --dg-dark2:       #1e293b;
    --dg-mid:         #475569;
    --dg-light:       #f1f5f9;
    --dg-white:       #ffffff;
    --dg-border:      #e2e8f0;
    --dg-radius:      12px;
    --dg-radius-lg:   20px;
    --dg-shadow:      0 2px 16px rgba(0,0,0,0.07);
    --dg-shadow-lg:   0 8px 48px rgba(0,0,0,0.13);
    --dg-font:        'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    font-family:      var(--dg-font);
    color:            var(--dg-dark);
    box-sizing:       border-box;
    line-height:      1.6;
}
.diagoto-wrapper *, .diagoto-wrapper *::before, .diagoto-wrapper *::after {
    box-sizing: inherit;
}
.diagoto-wrapper img { max-width: 100%; height: auto; }
.diagoto-wrapper a   { color: var(--dg-primary); }

/* ── Container ─────────────────────────────────────────────── */
.dg-container {
    max-width: 1100px;
    margin:    0 auto;
    padding:   0 24px;
}

/* ── Section layout helpers ────────────────────────────────── */
.dg-section-header  { text-align: center; margin-bottom: 48px; }
.dg-section-badge   { display: inline-block; background: var(--dg-light); color: var(--dg-primary); border: 1px solid var(--dg-border); padding: 5px 16px; border-radius: 100px; font-size: 13px; font-weight: 700; margin-bottom: 12px; letter-spacing: .3px; }
.dg-section-title   { font-size: clamp(22px, 4vw, 34px); font-weight: 900; color: var(--dg-dark); margin: 0 0 10px; line-height: 1.2; }
.dg-section-sub     { font-size: 16px; color: var(--dg-mid); max-width: 580px; margin: 0 auto; }

/* ── Buttons ───────────────────────────────────────────────── */
.dg-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    flex-direction:  column;
    gap:             3px;
    padding:         12px 28px;
    border-radius:   var(--dg-radius);
    font-size:       15px;
    font-weight:     700;
    font-family:     var(--dg-font);
    cursor:          pointer;
    border:          2px solid transparent;
    text-decoration: none;
    transition:      all .2s ease;
    line-height:     1.25;
    white-space:     nowrap;
}
.dg-btn-hero  { padding: 20px 48px; font-size: 19px; border-radius: 16px; }
.dg-btn-xl    { padding: 16px 36px; font-size: 17px; }
.dg-btn-lg    { padding: 13px 30px; font-size: 16px; }
.dg-btn-block { width: 100%; }
.dg-btn-sub   { font-size: 12px; font-weight: 400; opacity: .85; }

.dg-btn-primary { background: linear-gradient(135deg, var(--dg-primary), var(--dg-primary-dk)); color: #fff; box-shadow: 0 4px 14px rgba(0,115,170,.25); }
.dg-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,115,170,.4); color: #fff; }
.dg-btn-pro     { background: linear-gradient(135deg, var(--dg-pro), var(--dg-pro-dk)); color: #fff; box-shadow: 0 4px 14px rgba(124,58,237,.25); }
.dg-btn-pro:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(124,58,237,.4); color: #fff; }
.dg-btn-outline { background: transparent; color: var(--dg-primary); border-color: var(--dg-primary); }
.dg-btn-outline:hover { background: var(--dg-primary); color: #fff; }
.dg-btn-ghost   { background: transparent; color: var(--dg-mid); border-color: var(--dg-border); }
.dg-btn-ghost:hover { background: var(--dg-light); color: var(--dg-dark); }
.dg-btn-outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.dg-btn-outline-white:hover { background: rgba(255,255,255,.15); color: #fff; }
.dg-btn-white { background: #fff; color: var(--dg-primary); border-color: #fff; }
.dg-btn-white:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.2); }

/* ────────────────────────────────────────────────────────────
   HERO
   ──────────────────────────────────────────────────────────── */
.dg-hero {
    position:   relative;
    background: linear-gradient(145deg, #0a1628 0%, #0f2744 45%, #0a1628 100%);
    padding:    90px 0 70px;
    overflow:   hidden;
    text-align: center;
}
.dg-hero-bg {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 25% 60%, rgba(0,115,170,.3) 0%, transparent 55%),
                radial-gradient(ellipse at 80% 20%, rgba(245,158,11,.18) 0%, transparent 50%),
                radial-gradient(ellipse at 60% 90%, rgba(124,58,237,.12) 0%, transparent 50%);
}
.dg-hero .dg-container { position: relative; z-index: 1; }

.dg-hero-trust-top { display: flex; align-items: center; justify-content: center; gap: 10px; color: #94a3b8; font-size: 13px; margin-bottom: 24px; flex-wrap: wrap; }

.dg-hero-title { font-size: clamp(28px, 5.5vw, 58px); font-weight: 900; color: #fff; line-height: 1.1; margin: 0 0 20px; }
.dg-highlight  { background: linear-gradient(90deg, var(--dg-accent) 0%, #fb923c 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.dg-hero-subtitle { font-size: clamp(15px, 2vw, 18px); color: #94a3b8; max-width: 600px; margin: 0 auto 40px; line-height: 1.7; }

.dg-hero-cta-main { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 48px; }
.dg-hero-cta-sub  { font-size: 13px; color: #64748b; margin: 0; }
.dg-hero-expert-link { background: none; border: none; color: #64748b; font-size: 14px; cursor: pointer; font-family: var(--dg-font); text-decoration: underline; padding: 4px 8px; transition: color .2s; }
.dg-hero-expert-link:hover { color: #94a3b8; }

.dg-hero-proof { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 20px 32px; max-width: 560px; margin: 0 auto; }
.dg-hero-proof-item { text-align: center; padding: 0 28px; }
.dg-hero-proof-sep  { width: 1px; height: 40px; background: rgba(255,255,255,.12); }
.dg-proof-num   { display: block; font-size: 26px; font-weight: 900; color: var(--dg-accent); line-height: 1; }
.dg-proof-label { display: block; font-size: 12px; color: #64748b; margin-top: 4px; }

.dg-hero-scroll { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #475569; font-size: 18px; animation: dg-bounce 2s infinite; }
@keyframes dg-bounce { 0%,100%{ transform: translateX(-50%) translateY(0); } 50%{ transform: translateX(-50%) translateY(-8px); } }

/* ────────────────────────────────────────────────────────────
   STATS BAR
   ──────────────────────────────────────────────────────────── */
.dg-stats { padding: 40px 0; background: #fff; border-bottom: 1px solid var(--dg-border); }
.dg-stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; text-align: center; }
.dg-stat-card  { padding: 20px 12px; }
.dg-stat-num   { font-size: 36px; font-weight: 900; color: var(--dg-primary); line-height: 1; }
.dg-stat-label { font-size: 13px; color: var(--dg-mid); margin-top: 6px; }

/* ────────────────────────────────────────────────────────────
   PROBLEM SECTION (avant / après)
   ──────────────────────────────────────────────────────────── */
.dg-problem { padding: 80px 0; background: var(--dg-light); }
.dg-problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 40px; }
.dg-problem-card { border-radius: var(--dg-radius-lg); padding: 36px 32px; }
.dg-problem-bad  { background: #fff1f2; border: 2px solid #fecdd3; }
.dg-problem-good { background: #f0fdf4; border: 2px solid #bbf7d0; }
.dg-problem-icon { font-size: 48px; margin-bottom: 14px; }
.dg-problem-card h3 { font-size: 20px; font-weight: 800; margin: 0 0 16px; }
.dg-problem-bad h3  { color: #991b1b; }
.dg-problem-good h3 { color: #166534; }
.dg-problem-card ul { list-style: none; padding: 0; margin: 0; }
.dg-problem-card li { padding: 7px 0; font-size: 15px; border-bottom: 1px solid rgba(0,0,0,.06); }
.dg-problem-card li:last-child { border-bottom: none; }
.dg-problem-cta { text-align: center; }

/* ────────────────────────────────────────────────────────────
   HOW IT WORKS
   ──────────────────────────────────────────────────────────── */
.dg-how { padding: 80px 0; background: #fff; }
.dg-steps-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-bottom: 44px; }
.dg-step-card {
    background: var(--dg-white); border-radius: var(--dg-radius); padding: 28px 20px;
    text-align: center; border: 1px solid var(--dg-border); box-shadow: var(--dg-shadow);
    position: relative; transition: transform .2s, box-shadow .2s;
}
.dg-step-card:hover { transform: translateY(-5px); box-shadow: var(--dg-shadow-lg); }
.dg-step-num  { position: absolute; top: 14px; right: 16px; font-size: 12px; font-weight: 800; color: var(--dg-border); }
.dg-step-icon { font-size: 38px; margin-bottom: 14px; display: block; }
.dg-step-title { font-size: 16px; font-weight: 800; margin-bottom: 8px; color: var(--dg-dark); }
.dg-step-text  { font-size: 13px; color: var(--dg-mid); line-height: 1.6; margin: 0; }
.dg-how-cta { text-align: center; }

/* ────────────────────────────────────────────────────────────
   MODES
   ──────────────────────────────────────────────────────────── */
.dg-modes { padding: 80px 0; background: var(--dg-light); }
.dg-modes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.dg-mode-card {
    background: #fff; border-radius: 18px; padding: 40px 32px;
    border: 2px solid var(--dg-border); box-shadow: var(--dg-shadow);
    transition: transform .3s, box-shadow .3s; position: relative;
}
.dg-mode-card:hover { transform: translateY(-5px); box-shadow: var(--dg-shadow-lg); }
.dg-mode-simple { border-top: 5px solid var(--dg-primary); }
.dg-mode-pro    { border-top: 5px solid var(--dg-pro); }
.dg-mode-badge-recommended { position: absolute; top: 16px; right: 16px; background: var(--dg-success); color: #fff; padding: 3px 10px; border-radius: 100px; font-size: 12px; font-weight: 700; }
.dg-mode-icon     { font-size: 52px; margin-bottom: 14px; display: block; }
.dg-mode-title    { font-size: 22px; font-weight: 900; margin-bottom: 6px; }
.dg-mode-subtitle { color: var(--dg-mid); font-size: 14px; margin-bottom: 22px; }
.dg-mode-features { list-style: none; padding: 0; margin: 0 0 28px; }
.dg-mode-features li { padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--dg-light); }
.dg-mode-features li:last-child { border-bottom: none; }

/* ────────────────────────────────────────────────────────────
   TESTIMONIALS
   ──────────────────────────────────────────────────────────── */
.dg-testimonials { padding: 80px 0; background: #fff; }
.dg-testimonials-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-bottom: 40px; }
.dg-testimonial-card {
    background: var(--dg-white); border-radius: var(--dg-radius); padding: 26px;
    box-shadow: var(--dg-shadow); border: 1px solid var(--dg-border);
    display: flex; flex-direction: column; gap: 14px;
}
.dg-testimonial-top   { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.dg-testimonial-stars { font-size: 14px; }
.dg-testimonial-saving { background: #d1fae5; color: #065f46; padding: 3px 10px; border-radius: 100px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.dg-testimonial-tag    { background: var(--dg-light); color: var(--dg-mid); padding: 3px 10px; border-radius: 100px; font-size: 12px; font-weight: 600; }
.dg-testimonial-text   { font-size: 14px; line-height: 1.7; color: var(--dg-mid); font-style: italic; margin: 0; flex: 1; }
.dg-testimonial-author { display: flex; align-items: center; gap: 10px; }
.dg-testimonial-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--dg-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; flex-shrink: 0; }
.dg-testimonial-name   { font-weight: 700; font-size: 14px; }
.dg-testimonial-car    { font-size: 12px; color: var(--dg-mid); }
.dg-testimonials-cta   { text-align: center; }

/* ────────────────────────────────────────────────────────────
   TRUST SIGNALS
   ──────────────────────────────────────────────────────────── */
.dg-trust { padding: 80px 0; background: var(--dg-light); }
.dg-trust-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.dg-trust-card {
    background: #fff; border-radius: var(--dg-radius); padding: 28px 24px;
    border: 1px solid var(--dg-border); box-shadow: var(--dg-shadow);
    transition: transform .2s;
}
.dg-trust-card:hover { transform: translateY(-3px); }
.dg-trust-icon { font-size: 36px; margin-bottom: 12px; display: block; }
.dg-trust-card h3 { font-size: 16px; font-weight: 800; margin-bottom: 8px; }
.dg-trust-card p  { font-size: 14px; color: var(--dg-mid); line-height: 1.6; margin: 0; }

/* ────────────────────────────────────────────────────────────
   CTA BANNER
   ──────────────────────────────────────────────────────────── */
.dg-cta-banner {
    padding:    64px 0;
    background: linear-gradient(135deg, var(--dg-primary) 0%, #003d66 100%);
}
.dg-cta-banner-content { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; justify-content: space-between; }
.dg-cta-banner-text h2 { font-size: clamp(20px, 3vw, 28px); font-weight: 900; color: #fff; margin: 0 0 8px; }
.dg-cta-banner-text p  { color: rgba(255,255,255,.8); margin: 0 0 4px; font-size: 15px; }
.dg-cta-banner-price   { font-size: 14px; color: rgba(255,255,255,.6); }
.dg-cta-banner-actions { flex-shrink: 0; }

/* ────────────────────────────────────────────────────────────
   FAQ
   ──────────────────────────────────────────────────────────── */
.dg-faq { padding: 80px 0; background: #fff; }
.dg-faq-list { max-width: 780px; margin: 0 auto; }
.dg-faq-item { border: 1px solid var(--dg-border); border-radius: var(--dg-radius); margin-bottom: 10px; overflow: hidden; }
.dg-faq-question {
    width: 100%; text-align: left; background: none; border: none;
    padding: 18px 22px; font-size: 15px; font-weight: 700; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    font-family: var(--dg-font); color: var(--dg-dark); transition: background .2s;
}
.dg-faq-question:hover { background: var(--dg-light); }
.dg-faq-icon { font-size: 20px; font-weight: 400; flex-shrink: 0; transition: transform .3s; }
.dg-faq-item.open .dg-faq-icon { transform: rotate(45deg); }
.dg-faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.dg-faq-item.open .dg-faq-answer { max-height: 250px; }
.dg-faq-answer p { padding: 0 22px 18px; margin: 0; font-size: 14px; color: var(--dg-mid); line-height: 1.7; }

/* ────────────────────────────────────────────────────────────
   FINAL CTA
   ──────────────────────────────────────────────────────────── */
.dg-final-cta { padding: 80px 0; background: linear-gradient(145deg, #0a1628, #0f2744); text-align: center; }
.dg-final-cta-icon { font-size: 56px; margin-bottom: 16px; }
.dg-final-cta h2   { font-size: clamp(22px,4vw,38px); font-weight: 900; color: #fff; margin-bottom: 14px; }
.dg-final-cta p    { font-size: 17px; color: #94a3b8; margin-bottom: 36px; }
.dg-final-cta-buttons { margin-bottom: 16px; }
.dg-final-note { font-size: 13px; color: #475569; margin-top: 20px; }

/* ────────────────────────────────────────────────────────────
   MODAL
   ──────────────────────────────────────────────────────────── */
.dg-modal-overlay {
    position: fixed; inset: 0; background: rgba(10,22,40,.88);
    z-index: 99999; display: none; align-items: center; justify-content: center;
    padding: 16px; backdrop-filter: blur(6px);
    box-sizing: border-box;
}
.dg-modal-overlay *, .dg-modal-overlay *::before, .dg-modal-overlay *::after {
    box-sizing: border-box;
}
.dg-modal-overlay.active { display: flex; }

.dg-modal-box {
    background: #fff; border-radius: var(--dg-radius-lg); width: 100%;
    max-width: 680px; max-height: 93vh; overflow-y: auto; overflow-x: hidden;
    box-shadow: var(--dg-shadow-lg); position: relative;
    animation: dg-modal-in .3s ease;
}
@keyframes dg-modal-in { from{ opacity:0; transform:translateY(30px) scale(.98); } to{ opacity:1; transform:none; } }

.dg-modal-header {
    display: flex; align-items: center; gap: 10px; padding: 18px 22px 14px;
    border-bottom: 1px solid var(--dg-border); position: sticky; top: 0;
    background: #fff; z-index: 10; border-radius: var(--dg-radius-lg) var(--dg-radius-lg) 0 0;
}
.dg-modal-logo      { font-size: 17px; font-weight: 900; color: var(--dg-primary); flex: 1; }
.dg-modal-mode-badge { background: var(--dg-light); color: var(--dg-mid); padding: 3px 12px; border-radius: 100px; font-size: 12px; font-weight: 700; }
.dg-modal-mode-badge.pro { background: rgba(124,58,237,.1); color: var(--dg-pro); }
.dg-modal-close { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--dg-mid); padding: 6px 9px; border-radius: 8px; transition: background .2s; line-height: 1; }
.dg-modal-close:hover { background: var(--dg-light); color: var(--dg-dark); }

/* Progress */
.dg-progress-bar { padding: 10px 22px; background: var(--dg-light); position: sticky; top: 57px; z-index: 9; }
.dg-progress-fill { height: 5px; background: var(--dg-border); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.dg-progress-fill::after { content:''; display: block; height: 100%; background: linear-gradient(90deg, var(--dg-primary), var(--dg-accent)); border-radius: 3px; transition: width .4s ease; width: var(--progress, 0%); }
.dg-progress-steps { display: flex; justify-content: space-between; }
.dg-progress-step  { font-size: 10px; color: var(--dg-mid); text-align: center; flex: 1; padding: 0 2px; transition: color .2s; }
.dg-progress-step.active { color: var(--dg-primary); font-weight: 700; }

/* Steps container */
.dg-steps-container { padding: 24px 22px 0; width: 100%; min-width: 0; }
.dg-step { animation: dg-step-in .25s ease; }
@keyframes dg-step-in { from{ opacity:0; transform:translateX(16px); } to{ opacity:1; transform:none; } }
.dg-step-tag   { display: inline-block; background: rgba(0,115,170,.08); color: var(--dg-primary); padding: 2px 10px; border-radius: 100px; font-size: 11px; font-weight: 700; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .5px; }
.dg-step-header { margin-bottom: 22px; }
.dg-step-header h2 { font-size: 20px; font-weight: 900; margin: 0 0 6px; color: var(--dg-dark); }
.dg-step-header p  { font-size: 14px; color: var(--dg-mid); margin: 0; }

/* Form nav */
.dg-form-nav {
    padding: 16px 22px; display: flex; gap: 10px; justify-content: space-between;
    border-top: 1px solid var(--dg-border); position: sticky; bottom: 0;
    background: #fff; border-radius: 0 0 var(--dg-radius-lg) var(--dg-radius-lg);
}
#dg-btn-submit { flex: 1; }

/* ── Form fields ──────────────────────────────────────────── */
.dg-fields-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dg-field        { display: flex; flex-direction: column; gap: 5px; }
.dg-field-full   { grid-column: 1/-1; }
.dg-label        { font-size: 13px; font-weight: 700; color: var(--dg-dark); }
.dg-label-opt    { font-weight: 400; color: var(--dg-mid); font-size: 12px; }
.dg-required-star { color: var(--dg-danger); }
.dg-field-hint   { font-size: 12px; color: var(--dg-mid); margin: 3px 0 0; line-height: 1.5; }

.dg-input, .dg-select, .dg-textarea {
    padding: 10px 14px; border: 2px solid var(--dg-border); border-radius: 9px;
    font-size: 14px; font-family: var(--dg-font); color: var(--dg-dark);
    background: #fff; transition: border-color .2s, box-shadow .2s; width: 100%;
}
.dg-input:focus, .dg-select:focus, .dg-textarea:focus {
    outline: none; border-color: var(--dg-primary); box-shadow: 0 0 0 3px rgba(0,115,170,.1);
}
.dg-input.dg-input-error { border-color: var(--dg-danger); box-shadow: 0 0 0 3px rgba(239,68,68,.1); }
.dg-input-lg { padding: 13px 16px; font-size: 16px; }
.dg-textarea { resize: vertical; }
.dg-input-group { position: relative; display: flex; }
.dg-input-group .dg-input { padding-right: 44px; }
.dg-input-suffix { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--dg-mid); font-size: 13px; font-weight: 700; pointer-events: none; }

/* Mode select cards */
.dg-mode-select-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; }
.dg-mode-select-card {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 22px 16px; border: 2px solid var(--dg-border); border-radius: var(--dg-radius);
    cursor: pointer; background: #fff; transition: all .2s; font-family: var(--dg-font);
    text-align: center; position: relative; min-width: 0; width: 100%;
}
.dg-mode-select-card:hover { border-color: var(--dg-primary); background: var(--dg-light); }
.dg-mode-select-card.active { border-color: var(--dg-primary); background: rgba(0,115,170,.05); box-shadow: 0 0 0 4px rgba(0,115,170,.1); }
.dg-mode-select-card[data-select-mode="pro"].active { border-color: var(--dg-pro); background: rgba(124,58,237,.05); box-shadow: 0 0 0 4px rgba(124,58,237,.1); }
.dg-mode-select-icon { font-size: 36px; }
.dg-mode-select-card strong { font-size: 16px; font-weight: 800; }
.dg-mode-select-card span:not(.dg-mode-select-icon):not(.dg-badge) { font-size: 12px; color: var(--dg-mid); }
.dg-badge { position: absolute; top: 8px; right: 8px; background: var(--dg-success); color: #fff; padding: 2px 8px; border-radius: 100px; font-size: 11px; font-weight: 700; }
.dg-checkbox-hidden { position: absolute; opacity: 0; width: 0; height: 0; }

/* Symptom cards */
.dg-symptoms-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.dg-symptom-card {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 12px 8px; border: 2px solid var(--dg-border); border-radius: 10px;
    cursor: pointer; transition: all .2s; position: relative; text-align: center;
    background: #fff; user-select: none;
}
.dg-symptom-card:hover  { border-color: var(--dg-primary); background: var(--dg-light); transform: translateY(-2px); }
.dg-symptom-card.selected { border-color: var(--dg-primary); background: rgba(0,115,170,.07); }
.dg-symptom-icon  { font-size: 26px; }
.dg-symptom-label { font-size: 12px; font-weight: 700; color: var(--dg-dark); }
.dg-symptom-desc  { font-size: 10px; color: var(--dg-mid); line-height: 1.3; }
.dg-symptom-check { display: none; position: absolute; top: 5px; right: 5px; background: var(--dg-primary); color: #fff; width: 16px; height: 16px; border-radius: 50%; font-size: 9px; align-items: center; justify-content: center; }
.dg-symptom-card.selected .dg-symptom-check { display: flex; }

/* Radio pills */
.dg-radio-group { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dg-radio-card {
    padding: 7px 14px; border: 2px solid var(--dg-border); border-radius: 100px;
    cursor: pointer; font-size: 13px; font-weight: 600; transition: all .2s;
    background: #fff; user-select: none; display: flex; align-items: center; gap: 5px;
}
.dg-radio-card:hover    { border-color: var(--dg-primary); background: var(--dg-light); }
.dg-radio-card.selected { border-color: var(--dg-primary); background: rgba(0,115,170,.09); color: var(--dg-primary); }

/* Warning lights */
.dg-warning-lights-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin-top: 10px; }
.dg-warning-card {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 4px; border: 2px solid var(--dg-border); border-radius: 8px;
    cursor: pointer; text-align: center; background: #fff; transition: all .2s;
    position: relative; user-select: none;
}
.dg-warning-card:hover { transform: translateY(-2px); }
.dg-warning-card.selected { box-shadow: 0 0 0 3px rgba(0,115,170,.15); }
.dg-warning-orange:hover, .dg-warning-orange.selected { border-color: #f59e0b; background: #fffbeb; }
.dg-warning-red:hover,    .dg-warning-red.selected    { border-color: #ef4444; background: #fff1f2; }
.dg-warning-green:hover,  .dg-warning-green.selected  { border-color: #10b981; background: #f0fdf4; }
.dg-warning-gray:hover,   .dg-warning-gray.selected   { border-color: #94a3b8; background: var(--dg-light); }
.dg-warning-icon  { font-size: 20px; }
.dg-warning-label { font-size: 10px; font-weight: 700; line-height: 1.3; color: var(--dg-dark); }

/* Photo upload */
.dg-photo-guide { background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; margin-bottom: 16px; }
.dg-photo-guide summary.dg-photo-guide-title { padding: 12px 16px; cursor: pointer; font-size: 13px; font-weight: 700; color: #92400e; list-style: none; }
.dg-photo-guide summary.dg-photo-guide-title::-webkit-details-marker { display: none; }
.dg-photo-guide-steps { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.dg-guide-step { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: #92400e; }
.dg-guide-num  { width: 20px; height: 20px; border-radius: 50%; background: #f59e0b; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; margin-top: 1px; }

.dg-photos-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dg-photo-drop-zone {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 130px; border: 2px dashed var(--dg-border); border-radius: var(--dg-radius);
    cursor: pointer; transition: all .2s; background: var(--dg-light); padding: 16px; text-align: center;
}
.dg-photo-drop-zone:hover { border-color: var(--dg-primary); background: rgba(0,115,170,.04); }
.dg-photo-drop-zone.has-image { border-color: var(--dg-success); border-style: solid; background: rgba(16,185,129,.04); }
.dg-file-input { display: none; }
.dg-photo-drop-icon   { font-size: 30px; margin-bottom: 6px; }
.dg-photo-drop-label  { font-size: 14px; font-weight: 700; color: var(--dg-dark); }
.dg-photo-drop-hint   { font-size: 12px; color: var(--dg-mid); margin-top: 3px; }
.dg-photo-preview-img { max-width: 100%; max-height: 180px; border-radius: 8px; object-fit: cover; }
em { font-style: italic; }

/* Pro mini photos */
.dg-pro-photos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dg-photo-mini { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px; border: 2px dashed var(--dg-border); border-radius: 10px; cursor: pointer; text-align: center; background: var(--dg-light); transition: all .2s; font-size: 13px; font-weight: 700; }
.dg-photo-mini:hover { border-color: var(--dg-primary); }
.dg-photo-mini-hint  { font-size: 11px; font-weight: 400; color: var(--dg-mid); }

/* Sound cards */
.dg-sounds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dg-sound-card {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    border: 2px solid var(--dg-border); border-radius: 10px; cursor: pointer;
    transition: all .2s; background: #fff; position: relative; user-select: none;
}
.dg-sound-card:hover    { border-color: var(--dg-primary); background: var(--dg-light); transform: translateX(3px); }
.dg-sound-card.selected { border-color: var(--dg-primary); background: rgba(0,115,170,.06); }
.dg-sound-icon  { font-size: 24px; flex-shrink: 0; }
.dg-sound-text  { flex: 1; min-width: 0; }
.dg-sound-label { display: block; font-size: 13px; font-weight: 700; }
.dg-sound-desc  { display: block; font-size: 11px; color: var(--dg-mid); }
.dg-sound-card .dg-symptom-check { position: absolute; top: 7px; right: 7px; width: 14px; height: 14px; font-size: 8px; }

/* Contact step */
.dg-contact-form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.dg-contact-summary { background: var(--dg-light); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.dg-contact-summary h4 { margin: 0 0 8px; font-size: 14px; color: var(--dg-dark); }
.dg-summary-item  { display: flex; gap: 8px; font-size: 13px; padding: 3px 0; }
.dg-summary-label { font-weight: 700; color: var(--dg-mid); min-width: 110px; flex-shrink: 0; }
.dg-contact-reassurance { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; padding: 12px; background: var(--dg-light); border-radius: 8px; }
.dg-reassurance-item { font-size: 12px; color: var(--dg-mid); font-weight: 600; }

/* Loading */
.dg-loading { padding: 48px 22px; text-align: center; }
.dg-loading-car { position: relative; height: 70px; margin: 0 auto 28px; max-width: 280px; }
.dg-loading-car-icon { font-size: 40px; display: inline-block; animation: dg-drive 2s linear infinite; position: relative; z-index: 1; }
@keyframes dg-drive { 0%{ transform: translateX(-40px); } 100%{ transform: translateX(40px); } }
.dg-loading-road { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: repeating-linear-gradient(90deg, var(--dg-primary) 0, var(--dg-primary) 20px, transparent 20px, transparent 36px); animation: dg-road .5s linear infinite; border-radius: 2px; }
@keyframes dg-road { from{ background-position: 0 0; } to{ background-position: -36px 0; } }
.dg-loading h3  { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.dg-loading p   { color: var(--dg-mid); font-size: 14px; }
.dg-loading-steps { margin: 20px auto 0; display: flex; flex-direction: column; gap: 7px; text-align: left; max-width: 300px; }
.dg-loading-step  { padding: 8px 14px; border-radius: 8px; font-size: 13px; color: var(--dg-mid); background: var(--dg-light); transition: all .3s; }
.dg-loading-step.active { background: rgba(0,115,170,.1); color: var(--dg-primary); font-weight: 700; }
.dg-loading-step.done   { color: var(--dg-success); background: rgba(16,185,129,.1); }

/* ────────────────────────────────────────────────────────────
   RESULTS SECTION
   ──────────────────────────────────────────────────────────── */
.dg-results-section { padding: 60px 0; background: var(--dg-light); }
.dg-results-card {
    background: #fff; border-radius: var(--dg-radius-lg); box-shadow: var(--dg-shadow-lg);
    overflow: hidden; max-width: 800px; margin: 0 auto;
}
.dg-results-header { background: linear-gradient(145deg, #0a1628, #0f2744); padding: 30px; text-align: center; }
.dg-results-logo     { font-size: 18px; font-weight: 900; color: var(--dg-accent); margin-bottom: 8px; }
.dg-results-header h2 { font-size: 26px; font-weight: 900; color: #fff; margin: 0 0 14px; }
.dg-results-severity-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 18px; border-radius: 100px; font-size: 14px; font-weight: 700; }
.dg-sev-low      { background: rgba(16,185,129,.2);  color: #6ee7b7; }
.dg-sev-medium   { background: rgba(245,158,11,.2);  color: #fde68a; }
.dg-sev-high     { background: rgba(239,68,68,.2);   color: #fca5a5; }
.dg-sev-critical { background: rgba(220,38,38,.35);  color: #fee2e2; }

.dg-results-vehicle { padding: 14px 30px; background: var(--dg-light); text-align: center; font-size: 15px; font-weight: 700; color: var(--dg-mid); border-bottom: 1px solid var(--dg-border); }

.dg-results-causes { padding: 22px 30px; border-bottom: 1px solid var(--dg-border); }
.dg-results-causes h3 { font-size: 17px; font-weight: 800; margin-bottom: 12px; }
.dg-results-causes ul { list-style: none; padding: 0; margin: 0; }
.dg-results-causes li { padding: 8px 0 8px 22px; position: relative; font-size: 14px; border-bottom: 1px solid var(--dg-light); }
.dg-results-causes li::before { content:'→'; position: absolute; left: 0; color: var(--dg-primary); font-weight: 700; }

.dg-results-partial { padding: 22px 30px; border-bottom: 1px solid var(--dg-border); }
.dg-results-partial h3 { font-size: 17px; font-weight: 800; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.dg-partial-content { font-size: 15px; line-height: 1.8; color: var(--dg-mid); background: #f8fafc; padding: 16px 18px; border-radius: 10px; border-left: 4px solid var(--dg-primary); }

/* ── Comparatif prix DIY vs Garage ───────────────────────── */
.dg-price-comparison { padding: 22px 30px; border-bottom: 1px solid var(--dg-border); }
.dg-price-comparison h3 { font-size: 17px; font-weight: 800; margin-bottom: 16px; }
.dg-price-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }

.dg-price-card {
    border-radius: var(--dg-radius); padding: 20px 18px; text-align: center;
    border: 2px solid transparent;
}
.dg-price-card-garage { background: #f0f7ff; border-color: #bfdbfe; }
.dg-price-card-diy    { background: #f0fdf4; border-color: #bbf7d0; }

.dg-price-card-icon  { font-size: 30px; margin-bottom: 8px; }
.dg-price-card-title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }
.dg-price-card-garage .dg-price-card-title { color: #1d4ed8; }
.dg-price-card-diy    .dg-price-card-title { color: #166534; }

.dg-price-card-amount { font-size: 26px; font-weight: 900; line-height: 1; margin-bottom: 4px; }
.dg-price-card-garage .dg-price-card-amount { color: #1d4ed8; }
.dg-price-card-diy    .dg-price-card-amount { color: #166534; }

.dg-price-card-sub  { font-size: 11px; color: var(--dg-mid); line-height: 1.4; }

.dg-price-saving-banner {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0); border-radius: 10px;
    padding: 12px 16px; text-align: center; border: 1px solid #6ee7b7;
}
.dg-price-saving-banner strong { color: #065f46; font-size: 15px; }
.dg-price-saving-banner small  { color: #047857; font-size: 12px; display: block; margin-top: 2px; }

/* DIY info bar */
.dg-diy-info { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.dg-diy-badge {
    display: flex; align-items: center; gap: 5px; background: var(--dg-light);
    border: 1px solid var(--dg-border); border-radius: 100px;
    padding: 4px 12px; font-size: 12px; font-weight: 600; color: var(--dg-mid);
}
.dg-diy-difficulty-dots { display: flex; gap: 3px; }
.dg-diy-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dg-border); }
.dg-diy-dot.filled { background: var(--dg-accent); }

.dg-diy-note { margin-top: 12px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 10px 14px; font-size: 13px; color: #92400e; line-height: 1.5; }

/* Urgence */
.dg-results-urgency { padding: 12px 30px; text-align: center; font-size: 14px; font-weight: 700; }
.dg-urgency-immediate { background: #fee2e2; color: #991b1b; }
.dg-urgency-soon      { background: #fff3cd; color: #92400e; }
.dg-urgency-routine   { background: #d1fae5; color: #065f46; }

/* Paywall */
.dg-paywall { border: 2px dashed var(--dg-border); margin: 22px 30px; border-radius: var(--dg-radius); overflow: hidden; }
.dg-paywall-blur { padding: 18px; filter: blur(4px); pointer-events: none; user-select: none; color: var(--dg-mid); font-size: 14px; line-height: 1.7; }
.dg-paywall-cta  { padding: 28px; text-align: center; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 35%); }
.dg-paywall-icon  { font-size: 44px; margin-bottom: 10px; }
.dg-paywall-cta h3 { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.dg-paywall-cta p  { color: var(--dg-mid); font-size: 14px; margin-bottom: 14px; line-height: 1.6; }
.dg-paywall-price  { font-size: 34px; font-weight: 900; color: var(--dg-primary); margin-bottom: 18px; }
.dg-paywall-secure { font-size: 12px; color: var(--dg-mid); margin-top: 10px; }

/* Unlocked */
.dg-unlocked-content { padding: 22px 30px; border-bottom: 1px solid var(--dg-border); }
.dg-unlocked-content h3 { font-size: 17px; font-weight: 800; margin-bottom: 14px; color: var(--dg-success); }
.dg-full-content    { font-size: 14px; line-height: 1.8; color: var(--dg-mid); }
.dg-tutorial-content { font-size: 14px; line-height: 1.8; }
.dg-tutorial-content ol { padding-left: 20px; }
.dg-tutorial-content li { margin-bottom: 10px; }

/* Upsell */
.dg-upsell-box { margin: 22px 30px; background: linear-gradient(135deg, #fffbeb, #fef3c7); border: 2px solid #fbbf24; border-radius: 16px; padding: 26px; }
.dg-upsell-header { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.dg-upsell-icon   { font-size: 44px; flex-shrink: 0; }
.dg-upsell-header h3 { font-size: 18px; font-weight: 800; margin-bottom: 4px; color: #92400e; }
.dg-upsell-header p  { font-size: 13px; color: #92400e; opacity: .8; margin: 0; }
.dg-upsell-features  { list-style: none; padding: 0; margin: 0 0 18px; }
.dg-upsell-features li { padding: 5px 0; font-size: 13px; color: #78350f; }
.dg-upsell-cta  { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.dg-upsell-price { font-size: 28px; font-weight: 900; color: #92400e; }

.dg-results-footer { padding: 22px 30px; text-align: center; border-top: 1px solid var(--dg-border); }
.dg-results-footer p { color: var(--dg-mid); margin-bottom: 10px; font-size: 13px; }

/* ────────────────────────────────────────────────────────────
   RESPONSIVE — Tablet (≤900px)
   ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .dg-steps-grid          { grid-template-columns: repeat(2,1fr); }
    .dg-modes-grid          { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
    .dg-stats-grid          { grid-template-columns: repeat(2,1fr); }
    .dg-testimonials-grid   { grid-template-columns: repeat(2,1fr); }
    .dg-trust-grid          { grid-template-columns: repeat(2,1fr); }
    .dg-problem-grid        { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto 40px; }
    .dg-cta-banner-content  { flex-direction: column; text-align: center; gap: 24px; }
    .dg-hero-proof-item     { padding: 0 16px; }
}

/* ────────────────────────────────────────────────────────────
   RESPONSIVE — Mobile (≤600px)
   ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    /* Hero */
    .dg-hero { padding: 60px 0 50px; }
    .dg-hero-trust-top { gap: 6px; font-size: 12px; }
    .dg-hero-proof { padding: 16px 12px; flex-direction: column; gap: 12px; }
    .dg-hero-proof-sep { display: none; }
    .dg-hero-proof-item { padding: 0; }
    .dg-btn-hero { padding: 16px 28px; font-size: 16px; }

    /* Layout */
    .dg-steps-grid        { grid-template-columns: 1fr; }
    .dg-stats-grid        { grid-template-columns: repeat(2,1fr); }
    .dg-testimonials-grid { grid-template-columns: 1fr; }
    .dg-trust-grid        { grid-template-columns: 1fr; }
    .dg-problem-grid      { grid-template-columns: 1fr; }
    .dg-final-cta-buttons { display: flex; flex-direction: column; align-items: center; }

    /* Modal — drawer bottom */
    .dg-modal-overlay { align-items: flex-end; padding: 0; }
    .dg-modal-box { border-radius: 20px 20px 0 0; max-height: 95vh; }

    /* Form */
    .dg-fields-grid       { grid-template-columns: 1fr; }
    .dg-mode-select-grid  { grid-template-columns: 1fr; }
    .dg-symptoms-grid     { grid-template-columns: repeat(2,1fr); }
    .dg-sounds-grid       { grid-template-columns: 1fr; }
    .dg-warning-lights-grid { grid-template-columns: repeat(3,1fr); }
    .dg-photos-row        { grid-template-columns: 1fr; }
    .dg-form-nav          { flex-direction: column-reverse; }
    #dg-btn-submit        { width: 100%; }

    /* Results */
    .dg-price-cards                   { grid-template-columns: 1fr; }
    .dg-price-comparison,
    .dg-results-causes,
    .dg-results-partial,
    .dg-paywall,
    .dg-unlocked-content,
    .dg-upsell-box,
    .dg-results-footer                { padding-left: 18px; padding-right: 18px; }
    .dg-paywall                       { margin-left: 16px; margin-right: 16px; }
    .dg-upsell-box                    { margin-left: 16px; margin-right: 16px; }
    .dg-upsell-header                 { flex-direction: column; }
    .dg-upsell-cta                    { flex-direction: column; }
    .dg-diy-info                      { justify-content: center; }
}