/* styles-2026.css — Refonte design 2026 (additive)
 * Source : design-2026-handoff/iteration-01-identite.html à iteration-11
 * Tokens : --primary #0a2540 · --accent #3b82f6 · Inter
 * Coexiste avec styles.css (v25) — préfixé .r26-* pour ne pas écraser
 */

:root {
  --r26-primary: #0a2540;
  --r26-primary-700: #0f3358;
  --r26-primary-800: #081d33;
  --r26-primary-50: #eef3fb;
  --r26-accent: #3b82f6;
  --r26-accent-600: #2563eb;
  --r26-cyan: #06b6d4;
  --r26-success: #10b981;
  --r26-warning: #f59e0b;
  --r26-danger: #ef4444;
  --r26-ink: #1e293b;
  --r26-ink-2: #475569;
  --r26-ink-3: #94a3b8;
  --r26-ink-4: #cbd5e1;
  --r26-line: #e2e8f0;
  --r26-bg: #f8fafc;
  --r26-card: #ffffff;
  --r26-radius: 12px;
  --r26-radius-lg: 16px;
  --r26-shadow-sm: 0 1px 2px rgba(15,23,42,.04);
  --r26-shadow: 0 4px 14px rgba(10,37,64,.06), 0 1px 2px rgba(10,37,64,.04);
  --r26-shadow-lg: 0 18px 40px rgba(10,37,64,.08), 0 2px 6px rgba(10,37,64,.04);
}

/* ============================================================ */
/* APP SHELL                                                    */
/* ============================================================ */
.r26-app {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--r26-ink);
  background: var(--r26-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================ */
/* HEADER                                                       */
/* ============================================================ */
.r26-header {
  background: var(--r26-primary);
  color: #fff;
  border-bottom: 1px solid var(--r26-primary-700);
}
.r26-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; gap: 24px;
}
.r26-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.r26-brand-mark {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, var(--r26-accent) 0%, var(--r26-cyan) 100%);
  display: grid; place-items: center;
  box-shadow: 0 4px 10px rgba(59,130,246,.25);
  color: #fff; font-weight: 800;
}
.r26-brand-text { line-height: 1.1; }
.r26-brand-text .name { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; }
.r26-brand-text .sub { font-size: 10px; color: rgba(255,255,255,.55); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.r26-submission {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 12px 6px 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
}
.r26-submission .num { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.r26-submission .divider { width: 1px; height: 14px; background: rgba(255,255,255,.18); }
.r26-submission .client { font-size: 12px; color: rgba(255,255,255,.7); max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r26-submission .auto-save { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #6ee7b7; font-weight: 500; }
.r26-submission .auto-save .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--r26-success);
  box-shadow: 0 0 0 0 rgba(16,185,129,.5);
  animation: r26-pulse 2s ease-in-out infinite;
}
@keyframes r26-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); }
  50% { box-shadow: 0 0 0 5px rgba(16,185,129,0); }
}
.r26-spacer { flex: 1; }
.r26-nav { display: flex; align-items: center; gap: 6px; }
.r26-nav a, .r26-nav button {
  padding: 8px 12px; font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.7); text-decoration: none;
  border-radius: 8px; transition: all .15s ease;
  background: transparent; border: 0; cursor: pointer; font-family: inherit;
}
.r26-nav a:hover, .r26-nav button:hover { background: rgba(255,255,255,.06); color: #fff; }
.r26-nav a.active, .r26-nav button.active { background: rgba(255,255,255,.10); color: #fff; }
.r26-actions { display: flex; align-items: center; gap: 8px; }
.r26-h-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer;
  transition: all .15s ease; line-height: 1;
}
.r26-h-btn-pdf { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.14); }
.r26-h-btn-pdf:hover { background: rgba(255,255,255,.14); }
.r26-h-btn-pdf:disabled { opacity: .4; cursor: not-allowed; }

.r26-user {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px; border-radius: 999px;
  background: rgba(255,255,255,.06); cursor: pointer;
  color: #fff; border: 0; font-family: inherit;
}
.r26-user:hover { background: rgba(255,255,255,.10); }
.r26-user .avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24, #f97316);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #fff;
}
.r26-user .who { font-size: 12px; font-weight: 600; text-align: left; }
.r26-user .who .role { display: block; font-size: 10px; color: rgba(255,255,255,.55); font-weight: 500; }

/* ============================================================ */
/* STEPPER                                                      */
/* ============================================================ */
.r26-stepper {
  background: var(--r26-card);
  border-bottom: 1px solid var(--r26-line);
  box-shadow: 0 1px 0 rgba(10,37,64,.02);
}
.r26-stepper-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 18px 24px 20px;
}
.r26-stepper-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; font-size: 12px;
}
.r26-stepper-meta .left { color: var(--r26-ink-3); font-weight: 500; }
.r26-stepper-meta .right { color: var(--r26-ink-2); font-weight: 600; }
.r26-stepper-meta .right b { color: var(--r26-primary); font-weight: 700; }

.r26-stepper-track {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
  position: relative;
}
.r26-step { position: relative; padding-top: 8px; cursor: pointer; background: transparent; border: 0; text-align: left; font-family: inherit; }
.r26-step .seg {
  height: 4px; border-radius: 2px; background: var(--r26-line);
  transition: background .25s ease; position: relative; overflow: hidden;
}
.r26-step .seg-fill {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--r26-accent), var(--r26-cyan));
  width: 0; transition: width .35s ease; border-radius: 2px;
}
.r26-step-body { padding-top: 12px; display: flex; align-items: flex-start; gap: 10px; }
.r26-step-bubble {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--r26-card); border: 2px solid var(--r26-line);
  color: var(--r26-ink-3); display: grid; place-items: center;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: all .2s ease;
}
.r26-step-bubble svg { width: 12px; height: 12px; }
.r26-step-text { padding-top: 1px; flex: 1; min-width: 0; }
.r26-step-text .label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--r26-ink-3); font-weight: 600; margin-bottom: 1px;
}
.r26-step-text .title {
  font-size: 13px; font-weight: 600; color: var(--r26-ink-2);
  letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.r26-step-text .meta { font-size: 11px; color: var(--r26-ink-3); margin-top: 2px; font-weight: 500; }

/* Step states */
.r26-step.completed .seg { background: var(--r26-success); }
.r26-step.completed .r26-step-bubble { background: var(--r26-success); border-color: var(--r26-success); color: #fff; }
.r26-step.completed .r26-step-text .title { color: var(--r26-primary); }
.r26-step.completed .r26-step-text .label { color: var(--r26-success); }

.r26-step.current .seg-fill { width: 60%; }
.r26-step.current .r26-step-bubble {
  background: #fff; border-color: var(--r26-accent); color: var(--r26-accent);
  box-shadow: 0 0 0 4px rgba(59,130,246,.15);
}
.r26-step.current .r26-step-text .title { color: var(--r26-primary); font-weight: 700; }
.r26-step.current .r26-step-text .label { color: var(--r26-accent); }

.r26-step.skipped .seg {
  background: repeating-linear-gradient(45deg, var(--r26-ink-4), var(--r26-ink-4) 4px, transparent 4px, transparent 8px);
  opacity: .5;
}
.r26-step.skipped .r26-step-bubble { background: #f1f5f9; border-color: var(--r26-line); color: var(--r26-ink-4); border-style: dashed; }
.r26-step.skipped .r26-step-text .label { color: var(--r26-ink-4); }
.r26-step.skipped .r26-step-text .title { color: var(--r26-ink-4); text-decoration: line-through; }
.r26-step.skipped .r26-step-text .meta { color: var(--r26-ink-4); font-style: italic; }

/* ============================================================ */
/* MAIN CONTENT AREA                                            */
/* ============================================================ */
.r26-main {
  flex: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px 80px;
  width: 100%;
}

.r26-step-intro { margin-bottom: 24px; }
.r26-step-intro .kicker {
  font-size: 11px; font-weight: 700; color: var(--r26-accent);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 6px;
  display: inline-flex; align-items: center; gap: 6px;
}
.r26-step-intro .kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--r26-accent); }
.r26-step-intro h1 {
  font-size: 28px; font-weight: 700; color: var(--r26-primary);
  letter-spacing: -0.02em; margin: 0 0 8px;
}
.r26-step-intro p { color: var(--r26-ink-2); margin: 0; max-width: 720px; font-size: 14px; }

/* Layout 2 columns : form + sticky preview */
.r26-grid-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 32px;
  align-items: flex-start;
}
@media (max-width: 1024px) {
  .r26-grid-main { grid-template-columns: 1fr; }
}

/* ============================================================ */
/* CARD                                                         */
/* ============================================================ */
.r26-card {
  background: var(--r26-card);
  border: 1px solid var(--r26-line);
  border-radius: var(--r26-radius);
  box-shadow: var(--r26-shadow-sm);
  margin-bottom: 20px;
  overflow: hidden;
}
.r26-card-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--r26-line);
}
.r26-card-head .icon-tile {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--r26-primary-50);
  display: grid; place-items: center; color: var(--r26-primary);
}
.r26-card-head .icon-tile svg { width: 16px; height: 16px; }
.r26-card-head .title {
  font-size: 14px; font-weight: 700; color: var(--r26-primary);
  letter-spacing: -0.005em;
}
.r26-card-head .num {
  margin-left: auto;
  font-size: 11px; color: var(--r26-ink-3);
  font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em;
}
.r26-card-body { padding: 20px; }

/* ============================================================ */
/* FORM CONTROLS                                                */
/* ============================================================ */
.r26-field { margin-bottom: 16px; }
.r26-field-label {
  font-size: 12px; font-weight: 600; color: var(--r26-ink-2);
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em;
  display: block;
}
.r26-input, .r26-select, .r26-textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--r26-line); border-radius: 8px;
  font-family: inherit; font-size: 14px; color: var(--r26-ink);
  background: #fff; transition: border-color .15s, box-shadow .15s;
}
.r26-input:focus, .r26-select:focus, .r26-textarea:focus {
  outline: 0; border-color: var(--r26-accent);
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.r26-textarea { resize: vertical; min-height: 80px; }
.r26-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.r26-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.r26-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 720px) {
  .r26-grid-2, .r26-grid-3, .r26-grid-4 { grid-template-columns: 1fr; }
}

/* Pills (radio-button style) */
.r26-pill-row { display: flex; gap: 6px; flex-wrap: wrap; }
.r26-pill {
  flex: 1; min-width: 80px;
  padding: 10px 14px; border-radius: 10px;
  background: #fff; border: 2px solid var(--r26-line);
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--r26-ink-2); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: all .15s ease;
}
.r26-pill:hover { border-color: var(--r26-ink-4); }
.r26-pill.selected {
  border-color: var(--r26-accent); color: var(--r26-primary);
  background: var(--r26-primary-50);
  box-shadow: 0 0 0 3px rgba(59,130,246,.10);
}
.r26-pill .level { font-size: 16px; font-weight: 800; }
.r26-pill .lbl { font-size: 10px; font-weight: 500; opacity: .8; }

/* Type cards (project type chooser) */
.r26-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 720px) { .r26-type-grid { grid-template-columns: 1fr; } }
.r26-type-card {
  padding: 22px 18px; border-radius: 12px;
  background: #fff; border: 2px solid var(--r26-line); cursor: pointer;
  text-align: left; font-family: inherit;
  transition: all .15s ease;
}
.r26-type-card:hover { border-color: var(--r26-ink-4); }
.r26-type-card.selected { border-color: var(--r26-accent); background: var(--r26-primary-50); box-shadow: 0 0 0 3px rgba(59,130,246,.10); }
.r26-type-card .icon { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--r26-accent), var(--r26-cyan)); display: grid; place-items: center; color: #fff; margin-bottom: 10px; }
.r26-type-card .title { font-size: 15px; font-weight: 700; color: var(--r26-primary); margin-bottom: 4px; }
.r26-type-card .desc { font-size: 12px; color: var(--r26-ink-2); }

/* Buttons */
.r26-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 20px; border-radius: 10px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; transition: all .15s ease;
  line-height: 1;
}
.r26-btn-primary { background: var(--r26-accent); color: #fff; }
.r26-btn-primary:hover { background: var(--r26-accent-600); }
.r26-btn-primary:disabled { background: var(--r26-ink-4); cursor: not-allowed; }
.r26-btn-ghost { background: #fff; color: var(--r26-ink-2); border-color: var(--r26-line); }
.r26-btn-ghost:hover { background: var(--r26-bg); }
.r26-btn-success { background: var(--r26-success); color: #fff; }
.r26-btn-success:hover { background: #059669; }
.r26-btn-warn { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.r26-btn-row { display: flex; gap: 10px; justify-content: space-between; align-items: center; margin-top: 20px; }

/* Warning / error banners */
.r26-alert {
  padding: 12px 16px; border-radius: 10px; margin-bottom: 16px;
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 13px;
}
.r26-alert-warning { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.r26-alert-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.r26-alert-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.r26-alert-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.r26-alert .icon { flex: 0 0 18px; }

/* Sticky live preview (right column) */
.r26-preview {
  position: sticky; top: 24px;
  background: #fff; border: 1px solid var(--r26-line); border-radius: var(--r26-radius);
  box-shadow: var(--r26-shadow);
  padding: 20px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
.r26-preview h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--r26-ink-3); margin: 0 0 12px; font-weight: 600;
}
.r26-preview .ps-card { padding: 14px; border-radius: 10px; margin-bottom: 10px; }
.r26-preview .ps-card.accent { background: var(--r26-primary); color: #fff; }
.r26-preview .ps-card.accent .lbl { color: rgba(255,255,255,.7); }
.r26-preview .ps-card.accent .val { color: #fff; }
.r26-preview .ps-card.success { background: #f0fdf4; border: 1px solid #bbf7d0; }
.r26-preview .ps-card.success .lbl { color: #166534; }
.r26-preview .ps-card.success .val { color: #166534; }
.r26-preview .ps-card .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: var(--r26-ink-3); margin-bottom: 4px; }
.r26-preview .ps-card .val { font-size: 22px; font-weight: 800; color: var(--r26-primary); font-variant-numeric: tabular-nums; }
.r26-preview .ps-card .sub { font-size: 11px; color: var(--r26-ink-3); margin-top: 4px; }
.r26-preview .ps-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; border-bottom: 1px dashed var(--r26-line); }
.r26-preview .ps-row:last-child { border-bottom: 0; }
.r26-preview .ps-row .k { color: var(--r26-ink-2); }
.r26-preview .ps-row .v { font-weight: 600; color: var(--r26-primary); font-variant-numeric: tabular-nums; }

/* Solar kit cards (step 4) */
.r26-kit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.r26-kit-card {
  position: relative;
  padding: 14px; border-radius: 12px;
  background: #fff; border: 2px solid var(--r26-line);
  font-family: inherit; text-align: left; cursor: pointer;
  transition: all .15s ease;
}
.r26-kit-card:hover { border-color: var(--r26-ink-4); }
.r26-kit-card.selected { border-color: var(--r26-accent); background: var(--r26-primary-50); box-shadow: 0 0 0 3px rgba(59,130,246,.10); }
.r26-kit-card .kit-power { font-size: 22px; font-weight: 800; color: var(--r26-primary); }
.r26-kit-card .kit-power-unit { font-size: 13px; font-weight: 600; color: var(--r26-ink-3); margin-left: 3px; }
.r26-kit-card .kit-panels { font-size: 11px; color: var(--r26-ink-2); margin-top: 2px; }
.r26-kit-card .kit-panels b { color: var(--r26-primary); font-weight: 700; }
.r26-kit-card .kit-price { font-size: 14px; font-weight: 700; color: var(--r26-accent); margin-top: 8px; }

/* Toiture grid */
.r26-roof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.r26-roof-card {
  position: relative;
  padding: 14px 10px; border-radius: 10px;
  background: #fff; border: 2px solid var(--r26-line);
  text-align: center; cursor: pointer; font-family: inherit;
  transition: all .15s ease;
}
.r26-roof-card:hover { border-color: var(--r26-ink-4); }
.r26-roof-card.selected { border-color: var(--r26-accent); background: var(--r26-primary-50); }
.r26-roof-card.warning::after {
  content: ""; position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--r26-warning);
}
.r26-roof-card .roof-label { font-size: 12px; font-weight: 600; color: var(--r26-primary); margin-top: 6px; }
.r26-roof-card .roof-sub { font-size: 10px; color: var(--r26-ink-3); margin-top: 2px; }

/* Pitch grid */
.r26-pitch-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
@media (max-width: 720px) { .r26-pitch-grid { grid-template-columns: repeat(2, 1fr); } }
.r26-pitch-card {
  padding: 12px 8px; border-radius: 10px;
  background: #fff; border: 2px solid var(--r26-line);
  text-align: center; cursor: pointer; font-family: inherit;
  transition: all .15s ease;
}
.r26-pitch-card:hover { border-color: var(--r26-ink-4); }
.r26-pitch-card.selected { border-color: var(--r26-accent); background: var(--r26-primary-50); }
.r26-pitch-card .pitch-label { font-size: 12px; font-weight: 700; color: var(--r26-primary); }
.r26-pitch-card .pitch-deg { font-size: 10px; color: var(--r26-ink-3); margin-top: 2px; }

/* Read-only block */
.r26-ro-block {
  background: var(--r26-primary-50); border: 1px solid #c7d2fe;
  border-radius: 10px; padding: 12px 14px; margin-top: 16px;
}
.r26-ro-block .ro-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.r26-ro-block .ro-tag { font-size: 10px; padding: 2px 8px; border-radius: 999px; background: var(--r26-accent); color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.r26-ro-block .ro-title { font-size: 12px; font-weight: 700; color: var(--r26-primary); }
.r26-ro-block .ro-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; }
.r26-ro-block .ro-row .val { font-weight: 700; color: var(--r26-primary); font-variant-numeric: tabular-nums; }

/* Detail table (step 6) */
.r26-detail-table { width: 100%; border-collapse: collapse; }
.r26-detail-table th { text-align: left; font-size: 11px; font-weight: 700; color: var(--r26-ink-3); text-transform: uppercase; letter-spacing: 0.04em; padding: 8px 12px; border-bottom: 1px solid var(--r26-line); }
.r26-detail-table td { padding: 10px 12px; border-bottom: 1px solid var(--r26-line); font-size: 13px; vertical-align: top; }
.r26-detail-table .qty { width: 40px; text-align: center; font-weight: 700; color: var(--r26-primary); }
.r26-detail-table .un { width: 80px; font-size: 11px; color: var(--r26-ink-3); }
.r26-detail-table .price { width: 100px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--r26-primary); }
.r26-detail-table .name { font-weight: 600; color: var(--r26-primary); }
.r26-detail-table .desc { font-size: 12px; color: var(--r26-ink-2); margin-top: 4px; padding-left: 12px; border-left: 3px solid var(--r26-accent); }

/* Chip */
.r26-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.r26-chip-default { background: #f0fdf4; color: #166534; }
.r26-chip-modified { background: #fffbeb; color: #92400e; }
.r26-chip-internal { background: #f3e8ff; color: #6b21a8; }

/* ================================================================ */
/* PHASE 3 PATCH — Claude Design v3 (21 mai 2026)                  */
/* Append additif · 16 sections RESPONSIVE / A11Y / POLISH         */
/* Source : design-phase-3-handoff/styles-2026-v3-patch.css        */
/* ================================================================ */
/* ================================================================
 * styles-2026-v3-patch.css — Phase 3 design corrections
 * ----------------------------------------------------------------
 * À MERGER dans styles-2026.css (à la fin, ou intégrer section par section).
 * Tous les ajouts sont ADDITIFS — aucun token ni classe existante n'est cassée.
 * Trois familles de fix :
 *   1. RESPONSIVE — stepper, header, preview, grilles
 *   2. A11Y — focus states, contraste, hit targets
 *   3. POLISH — disabled states, hiérarchie CTAs étape 6, micro-animations
 * ================================================================ */


/* ============================================================
 * 1. RESPONSIVE — Stepper (le plus critique)
 * ------------------------------------------------------------
 * Bug : .r26-stepper-track { grid-template-columns: repeat(6, 1fr) }
 *       sans aucune media query → écrasement < 720px, illisible < 480px.
 * Fix : passage en 2 colonnes (tablette) puis 1 colonne (mobile) +
 *       mode "compact" où seuls bubble + label restent visibles.
 * ============================================================ */
@media (max-width: 1024px) {
  .r26-stepper-inner { padding: 14px 16px 16px; }
  .r26-stepper-track {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  /* Lignes 2/3 prennent les étapes 4-6 puis cachent meta */
  .r26-step-text .meta { display: none; }
  .r26-step-text .title { font-size: 12px; }
}

@media (max-width: 720px) {
  .r26-stepper-inner { padding: 12px 14px 14px; }
  .r26-stepper-track {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .r26-step-text .label { font-size: 10px; }
  .r26-step-text .title { font-size: 11px; }
}

@media (max-width: 480px) {
  .r26-stepper-track {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  /* En mode liste verticale, on remet une mini barre horizontale par étape */
  .r26-step .seg { height: 3px; }
  .r26-step-body { padding-top: 8px; }
}


/* ============================================================
 * 2. RESPONSIVE — Header
 * ------------------------------------------------------------
 * Bug : .r26-header-inner = flex, gap 24px, aucun mobile collapse →
 *       logo + submission pill + nav + actions + user débordent.
 * Fix : navigation cachée en mobile (hamburger géré par React),
 *       submission pill compactée, user perd "who" texte.
 * ============================================================ */
@media (max-width: 1024px) {
  .r26-header-inner {
    padding: 12px 16px;
    gap: 12px;
  }
  .r26-nav { display: none; }
  /* Le composant React doit fournir un bouton hamburger en remplacement.
     Voir directive REACT-1 dans CHANGES_FROM_V2.md */
}

@media (max-width: 720px) {
  .r26-header-inner { gap: 8px; }
  .r26-submission .client { max-width: 110px; }
  .r26-submission .divider { display: none; }
  .r26-submission .auto-save .lbl { display: none; }
  .r26-user .who { display: none; }
  .r26-user { padding: 4px; }
  .r26-h-btn { padding: 8px 10px; font-size: 12px; }
  /* Si plusieurs h-btn dans .r26-actions, en cacher certains */
  .r26-actions .r26-h-btn:not(.r26-h-btn-primary) { display: none; }
}


/* ============================================================
 * 3. RESPONSIVE — Live Preview (sticky → static en mobile)
 * ------------------------------------------------------------
 * Bug : .r26-preview reste position:sticky même quand .r26-grid-main
 *       passe en 1 colonne à 1024px → preview suit le scroll au lieu
 *       d'être après le form. Pénible et masque le contenu.
 * Fix : static + max-height auto quand layout single-column.
 * ============================================================ */
@media (max-width: 1024px) {
  .r26-preview {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
  /* Carte d'accent moins imposante en mobile */
  .r26-preview .ps-card .val { font-size: 20px; }
}


/* ============================================================
 * 4. RESPONSIVE — Main padding + step intro
 * ============================================================ */
@media (max-width: 720px) {
  .r26-main { padding: 20px 16px 60px; }
  .r26-step-intro h1 { font-size: 22px; line-height: 1.2; }
  .r26-step-intro p { font-size: 13px; }
  .r26-card-body { padding: 16px; }
  .r26-card-head { padding: 12px 16px; }
}


/* ============================================================
 * 5. RESPONSIVE — Grilles étape 4 (Configuration solaire)
 * ------------------------------------------------------------
 * Bug : .r26-roof-grid { repeat(3, 1fr) } sans mobile breakpoint.
 *       .r26-pitch-grid { repeat(5, 1fr) } se casse entre 720-1024px
 *       car la sticky preview prend 380px du viewport.
 * Fix : auto-fit minmax sur toutes les grilles de sélection.
 * ============================================================ */
.r26-roof-grid {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.r26-pitch-grid {
  /* Override : auto-fit fonctionne mieux que repeat(5,1fr) sur tous écrans */
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}
@media (max-width: 480px) {
  .r26-roof-grid { grid-template-columns: repeat(2, 1fr); }
  .r26-pitch-grid { grid-template-columns: repeat(2, 1fr); }
  .r26-kit-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .r26-pill { min-width: 64px; padding: 8px 10px; }
  .r26-pill .level { font-size: 14px; }
}


/* ============================================================
 * 6. A11Y — Focus states partout
 * ------------------------------------------------------------
 * Bug : aucun `:focus-visible` sur .r26-pill, .r26-kit-card,
 *       .r26-roof-card, .r26-pitch-card, .r26-type-card, .r26-btn,
 *       .r26-step → navigation clavier impossible.
 * Fix : ring bleu cohérent partout, gros assez pour être visible.
 * ============================================================ */
.r26-pill:focus-visible,
.r26-kit-card:focus-visible,
.r26-roof-card:focus-visible,
.r26-pitch-card:focus-visible,
.r26-type-card:focus-visible {
  outline: 0;
  border-color: var(--r26-accent);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25);
}

.r26-btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.30);
}

.r26-step:focus-visible {
  outline: 0;
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.r26-h-btn:focus-visible,
.r26-user:focus-visible,
.r26-nav a:focus-visible,
.r26-nav button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}


/* ============================================================
 * 7. A11Y — Contraste
 * ------------------------------------------------------------
 * Bug : --r26-ink-3 (#94a3b8) utilisé pour 10-11px sur fond blanc
 *       → ratio 3.0:1 → WCAG AA FAIL (4.5:1 requis sous 14px).
 * Fix : ink-3 reste pour 14px+ uniquement. Nouveau token ink-3-strong
 *       (#64748b, ratio 4.6:1) pour les labels 10-12px.
 * ============================================================ */
:root {
  --r26-ink-3-strong: #64748b;  /* slate-500, ratio 4.6:1 sur blanc — labels 10-12px */
}

.r26-stepper-meta .left,
.r26-step-text .label,
.r26-step-text .meta,
.r26-card-head .num,
.r26-preview h3,
.r26-preview .ps-card .lbl,
.r26-preview .ps-card .sub,
.r26-preview .ps-row .k,
.r26-detail-table th,
.r26-detail-table .un,
.r26-kit-card .kit-power-unit,
.r26-kit-card .kit-panels,
.r26-roof-card .roof-sub,
.r26-pitch-card .pitch-deg,
.r26-type-card .desc,
.r26-field-label {
  color: var(--r26-ink-3-strong);
}

/* Status "completed" garde le vert success (ratio 4.7:1) */
/* Status "current" garde l'accent bleu (ratio 5.3:1) */


/* ============================================================
 * 8. A11Y — Hit targets
 * ------------------------------------------------------------
 * Bug : .r26-pill min-width 80px mais avec .level=10px font, hauteur
 *       totale ~36px → en-dessous des 44×44 px recommandés (WCAG 2.5.5).
 * Fix : min-height 44px partout sur les contrôles tactiles.
 * ============================================================ */
.r26-pill { min-height: 44px; }
.r26-btn { min-height: 40px; }  /* boutons textuels, OK plus petit */
.r26-h-btn { min-height: 36px; }


/* ============================================================
 * 9. POLISH — Disabled state pour les boutons
 * ------------------------------------------------------------
 * Bug : .r26-btn-primary:disabled = bg ink-4 + text blanc →
 *       contraste insuffisant, visuel pas assez "off".
 * Fix : opacity + cursor + retire le focus ring sur disabled.
 * ============================================================ */
.r26-btn:disabled,
.r26-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
.r26-btn-primary:disabled {
  background: var(--r26-ink-4);
  color: #fff;
}


/* ============================================================
 * 10. POLISH — Logo : on remplace le placeholder .r26-brand-mark
 *     par un wrapper qui accepte une vraie <img>
 * ------------------------------------------------------------
 * Le CSS actuel génère un gradient bleu avec une initiale —
 * acceptable comme fallback, mais l'image officielle doit dominer.
 * ============================================================ */
.r26-brand img.logo,
.r26-brand-logo {
  height: 28px;
  width: auto;
  /* Sur le header bleu marine, force le logo officiel en blanc */
  filter: brightness(0) invert(1);
}
@media (max-width: 720px) {
  .r26-brand img.logo,
  .r26-brand-logo { height: 22px; }
  .r26-brand-text .sub { display: none; }  /* "RAYCOM SOLUTIONS" sub-line */
}


/* ============================================================
 * 11. POLISH — Stepper "skipped" : ajouter le tooltip explicatif
 * ------------------------------------------------------------
 * Le CSS .r26-step.skipped existe mais le composant React ne
 * l'utilise jamais. Cf. REACT-2 dans CHANGES_FROM_V2.md pour la
 * directive d'application côté JSX.
 * Ici on raffine juste le visuel skipped pour qu'il soit plus
 * "ignoré gentiment" plutôt que "barré agressivement".
 * ============================================================ */
.r26-step.skipped .r26-step-text .title { text-decoration: none; }
.r26-step.skipped .r26-step-text .title::after {
  content: " · sauté";
  font-size: 0.85em;
  font-style: italic;
  font-weight: 400;
  color: var(--r26-ink-3-strong);
}


/* ============================================================
 * 12. POLISH — Hiérarchie CTAs étape 6 (Accepter/Réfléchir/Refuser)
 * ------------------------------------------------------------
 * Le Step6 a 3 CTAs équivalents visuellement → mauvaise UX, le
 * vendeur ne sait pas lequel est le "happy path".
 * Fix : nouvelle classe .r26-decision-row qui pose une hiérarchie
 *       claire (Accepter > Réfléchir > Refuser) sans inventer de
 *       couleur nouvelle.
 * ============================================================ */
.r26-decision-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
  margin-top: 24px;
  padding: 20px;
  background: var(--r26-bg);
  border: 1px solid var(--r26-line);
  border-radius: var(--r26-radius-lg);
}
@media (max-width: 720px) {
  .r26-decision-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px;
  }
}
.r26-decision-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px 14px;
  border-radius: 12px;
  border: 2px solid transparent;
  background: #fff;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}
.r26-decision-cta .label {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.r26-decision-cta .sub {
  font-size: 12px;
  margin-top: 4px;
  font-weight: 500;
  opacity: 0.85;
  line-height: 1.3;
}
/* Accept = happy path = full success */
.r26-decision-cta.accept {
  background: var(--r26-success);
  color: #fff;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.25);
  border-color: var(--r26-success);
}
.r26-decision-cta.accept:hover {
  background: #059669;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(16, 185, 129, 0.32);
}
.r26-decision-cta.accept .label { font-size: 18px; }
/* Think = pending = warning subtle */
.r26-decision-cta.think {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}
.r26-decision-cta.think:hover {
  background: #fef3c7;
  border-color: #fcd34d;
}
/* Refuse = neutral, not red — un refus n'est pas une erreur */
.r26-decision-cta.refuse {
  background: #fff;
  border-color: var(--r26-line);
  color: var(--r26-ink-2);
}
.r26-decision-cta.refuse:hover {
  border-color: var(--r26-ink-3);
  background: var(--r26-bg);
}


/* ============================================================
 * 13. POLISH — SubmissionCompletion (étape 7) — anim plus douce
 * ------------------------------------------------------------
 * Bug rapporté : "anim pop + auto-redirect peuvent paraître brutaux"
 * Fix : easing plus organique + scale moins agressif + délai redirect
 *       (le redirect lui-même est dans React, ici on prépare la classe).
 * ============================================================ */
@keyframes r26-success-pop {
  0%   { opacity: 0; transform: scale(0.85) translateY(8px); }
  60%  { opacity: 1; transform: scale(1.02) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.r26-success-card-enter {
  animation: r26-success-pop 0.6s cubic-bezier(0.34, 1.20, 0.64, 1) both;
}
@keyframes r26-success-checkmark {
  0%   { stroke-dashoffset: 60; opacity: 0; }
  40%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
.r26-success-check {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: r26-success-checkmark 0.7s 0.3s ease-out forwards;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .r26-success-card-enter,
  .r26-success-check,
  .r26-submission .auto-save .dot,
  .r26-step .seg-fill {
    animation: none !important;
    transition: none !important;
  }
}


/* ============================================================
 * 14. POLISH — Dashboard funnel : états vides explicites
 * ------------------------------------------------------------
 * Bug rapporté : "si peu de soumissions, les recommandations
 * peuvent être bizarres".
 * Fix : skeleton + état vide explicite avec illustration neutre.
 * ============================================================ */
.r26-empty-state {
  padding: 48px 24px;
  text-align: center;
  background: #fff;
  border: 1px dashed var(--r26-line);
  border-radius: var(--r26-radius-lg);
}
.r26-empty-state .ico {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--r26-primary-50);
  color: var(--r26-accent);
  display: grid;
  place-items: center;
}
.r26-empty-state .ico svg {
  width: 28px;
  height: 28px;
}
.r26-empty-state .title {
  font-size: 15px;
  font-weight: 700;
  color: var(--r26-primary);
  margin-bottom: 4px;
}
.r26-empty-state .desc {
  font-size: 13px;
  color: var(--r26-ink-3-strong);
  max-width: 360px;
  margin: 0 auto 16px;
}


/* ============================================================
 * 15. POLISH — Footer/coordonnées RBQ
 * ------------------------------------------------------------
 * Le handoff insiste : RBQ 5590-9402 partout. On expose une classe
 * de footer minimale (à utiliser en pied de page application).
 * ============================================================ */
.r26-footer {
  background: #fff;
  border-top: 1px solid var(--r26-line);
  padding: 18px 24px;
  font-size: 11px;
  color: var(--r26-ink-3-strong);
  text-align: center;
}
.r26-footer .row {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  justify-content: center;
  align-items: center;
}
.r26-footer b { color: var(--r26-ink-2); font-weight: 700; }
.r26-footer .sep { color: var(--r26-ink-4); }
.r26-footer .slogan { font-style: italic; color: var(--r26-primary); }


/* ============================================================
 * 16. NBSP — utilitaire pour forcer espace insécable
 * ------------------------------------------------------------
 * À utiliser dans le HTML : <span class="r26-nbsp">25 750 $</span>
 * Ne casse jamais "25 750 $" sur deux lignes.
 * ============================================================ */
.r26-nbsp { white-space: nowrap; }