/* ./projet — extrait du bloc <style> inline (refonte Phase 2) */

:root {
--primary-rgb: 79, 70, 229; /* Indigo 600 */
}

.wizard-section {
padding: 3rem 0;
background-color: #f8fafc; /* Slate 50 */
min-height: 80vh;
}

.wizard-wrapper {
display: grid;
grid-template-columns: minmax(0, 920px);
justify-content: center;
gap: 2.5rem;
align-items: start;
max-width: 1280px;
margin: 0 auto;
}

/* Sidebar Panier Modernisée */
.cart-sidebar {
background: white;
border-radius: 1rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
position: sticky;
top: 2rem;
overflow: hidden;
display: flex;
flex-direction: column;
border: 1px solid #e2e8f0;
z-index: 10;
}

.cart-header {
padding: 1.5rem;
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
color: white;
}

.cart-header h3 {
margin: 0;
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.95);
display: flex;
align-items: center;
gap: 0.75rem;
font-weight: 600;
letter-spacing: 0.025em;
}

.cart-content {
padding: 1.5rem;
flex: 1;
overflow-y: auto;
max-height: calc(100vh - 300px);
background: #fff;
}

.cart-footer {
padding: 1.5rem;
background: #f8fafc;
border-top: 1px dashed #cbd5e1;
}

.cart-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
font-size: 0.95rem;
padding-bottom: 1rem;
border-bottom: 1px solid #f1f5f9;
color: #334155;
}

.cart-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}

.cart-total-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.1rem;
font-weight: 700;
color: #0f172a;
margin-top: 0.5rem;
}

.cart-total-price {
color: var(--primary);
font-size: 1.75rem;
letter-spacing: -0.025em;
}

/* Wizard Steps Modernisés */
.wizard-steps {
display: flex;
justify-content: space-between;
margin-bottom: 3rem;
position: relative;
padding: 0 1rem;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}

.wizard-steps::before {
content: '';
position: absolute;
top: 20px;
left: 2rem;
right: 2rem;
height: 3px;
background: #e2e8f0;
z-index: 0;
border-radius: 99px;
}

.wizard-step {
text-align: center;
position: relative;
z-index: 1;
background: #f8fafc; /* Match page bg */
padding: 0 0.5rem;
cursor: default;
}

.wizard-step-number {
width: 42px;
height: 42px;
border-radius: 50%;
background: white;
border: 3px solid #e2e8f0;
color: #64748b;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 0.5rem;
font-weight: 700;
font-size: 1rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.wizard-step.active .wizard-step-number {
border-color: var(--primary);
background: var(--primary);
color: white;
transform: scale(1.1);
box-shadow: 0 0 0 6px rgba(var(--primary-rgb), 0.15);
}

.wizard-step.completed .wizard-step-number {
border-color: #10b981;
background: #10b981;
color: white;
}

.wizard-step-label {
font-size: 0.85rem;
color: #64748b;
font-weight: 600;
transition: color 0.3s;
margin-top: 0.5rem;
display: block; /* Toujours visible si possible */
}

.wizard-step.active .wizard-step-label {
color: var(--primary);
}

/* Wizard Card & Forms */
.wizard-card {
background: white;
padding: 3rem;
border-radius: 1.5rem;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
border: 1px solid #f1f5f9;
}

.step-section h2 {
font-size: 1.875rem;
font-weight: 800;
color: #0f172a;
margin-bottom: 0.5rem;
letter-spacing: -0.025em;
}

.step-section p.lead {
color: #64748b;
font-size: 1.1rem;
margin-bottom: 2.5rem;
}

/* Inputs Modernes & Visibles */
.form-group { margin-bottom: 2rem; }

.form-group label {
display: block;
font-weight: 600;
color: #334155;
margin-bottom: 0.75rem;
font-size: 0.95rem;
}

.form-control {
width: 100%;
padding: 1rem 1.25rem;
font-size: 1rem;
line-height: 1.5;
color: #0f172a;
background-color: #f8fafc; /* Fond légèrement grisé pour mieux voir le champ */
background-clip: padding-box;
border: 2px solid #cbd5e1; /* Bordure plus contrastée */
border-radius: 0.75rem;
transition: all 0.2s ease-in-out;
}

.form-control:focus {
background-color: #ffffff; /* Devient blanc au focus */
border-color: var(--primary);
outline: 0;
box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.15);
}

.form-control::placeholder {
color: #94a3b8;
opacity: 0.8;
}

textarea.form-control {
min-height: 120px;
resize: vertical;
}

/* Options Cards */
.options-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}

.option-card {
border: 2px solid #e2e8f0;
border-radius: 1rem;
padding: 1.5rem;
cursor: pointer;
transition: all 0.2s ease-in-out;
position: relative;
background: white;
display: flex;
flex-direction: column;
height: 100%;
}

.option-card:hover {
border-color: #cbd5e1;
transform: translateY(-4px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.option-card.selected {
border-color: var(--primary);
background: #f5f3ff; /* Very light primary bg */
box-shadow: 0 4px 6px -1px rgba(var(--primary-rgb), 0.1);
}

.option-check {
position: absolute;
top: 1rem;
right: 1rem;
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid #cbd5e1;
display: flex;
align-items: center;
justify-content: center;
background: white;
transition: all 0.2s;
font-weight: bold;
color: white;
opacity: 0.5;
}

.option-card.selected .option-check {
background: var(--primary);
border-color: var(--primary);
opacity: 1;
}

.option-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
display: block;
}

.option-title {
font-weight: 700;
font-size: 1.1rem;
margin-bottom: 0.5rem;
color: #0f172a;
display: block;
}

.option-desc {
font-size: 0.9rem;
color: #64748b;
margin-bottom: 1.5rem;
display: block;
line-height: 1.5;
flex-grow: 1;
}

.option-price-tag {
background: #f1f5f9;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-weight: 700;
color: #334155;
display: inline-block;
align-self: flex-start;
transition: all 0.2s;
}

.option-card.selected .option-price-tag {
background: var(--primary);
color: white;
}

/* Formules Selector */
.formules-selector {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}

.formule-radio-card {
border: 2px solid #e2e8f0;
border-radius: 1rem;
padding: 2rem;
text-align: center;
cursor: pointer;
transition: all 0.2s;
background: white;
position: relative;
overflow: hidden;
}

.formule-radio-card:hover {
border-color: #94a3b8;
transform: translateY(-2px);
}

.formule-radio-card.selected {
border-color: var(--primary);
background: #f5f3ff;
box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.1);
}

.formule-radio-card h3 {
font-size: 1.5rem;
font-weight: 800;
color: #0f172a;
margin-bottom: 0.5rem;
}

.formule-price {
font-size: 2rem;
font-weight: 800;
color: var(--primary);
margin: 1rem 0;
}

.formule-features {
text-align: left;
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid #e2e8f0;
}

.formule-features li {
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
color: #475569;
font-size: 0.95rem;
}

.formule-features li::before {
content: "✓";
color: #10b981;
font-weight: bold;
}

/* Animations */
@keyframes fadeInUp {
from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
}
to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
}

.step-section {
display: none;
}

.step-section.active {
display: block;
animation: fadeInUp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Buttons */
.wizard-actions {
display: flex;
justify-content: space-between;
margin-top: 3rem;
gap: 1rem;
padding-top: 2rem;
border-top: 1px solid #f1f5f9;
}

.btn-primary, .btn-secondary {
padding: 1rem 2rem;
border-radius: 0.75rem;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.2s;
border: none;
}

.btn-primary {
background: var(--primary);
color: white;
box-shadow: 0 4px 6px -1px rgba(var(--primary-rgb), 0.3);
}

.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(var(--primary-rgb), 0.4);
}

.btn-secondary {
background: white;
color: #475569;
border: 2px solid #e2e8f0;
}

.btn-secondary:hover {
background: #f8fafc;
border-color: #cbd5e1;
color: #1e293b;
}

/* Mobile Responsive */
@media (max-width: 992px) {
.wizard-wrapper { grid-template-columns: 1fr; }
.cart-sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    z-index: 1000;
    border-radius: 1.5rem 1.5rem 0 0;
    transform: translateY(88%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0;
    border-top: 1px solid #cbd5e1;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
}
.cart-sidebar.open { transform: translateY(0); }
.cart-toggle { display: flex; }
.wizard-card { padding: 1.5rem; }
.wizard-step-label { display: none; }
.step-section h2 { font-size: 1.5rem; }
}

.cart-toggle {
display: none;
justify-content: space-between;
align-items: center;
width: 100%;
background: #0f172a;
border: none;
color: white;
padding: 1rem 1.5rem;
cursor: pointer;
font-weight: 600;
}

.modules-toolbar {
display: flex;
gap: 0.75rem;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
margin: 1.25rem 0 2rem;
padding: 1rem;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 0.75rem;
}

.modules-filters {
display: flex;
gap: 0.5rem;
align-items: center;
flex-wrap: wrap;
}

.filter-chip {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.85rem;
border-radius: 999px;
border: 1px solid #e2e8f0;
background: white;
color: #334155;
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
transition: all 0.2s;
}

.filter-chip.active {
border-color: rgba(var(--primary-rgb), 0.35);
background: rgba(var(--primary-rgb), 0.08);
color: var(--primary);
}

.modules-search {
display: flex;
align-items: center;
gap: 0.5rem;
flex: 1;
min-width: 220px;
}

.modules-search input {
width: 100%;
padding: 0.75rem 1rem;
border-radius: 0.75rem;
border: 1px solid #e2e8f0;
background: white;
font-size: 1rem;
}

.field-error {
margin-top: 0.5rem;
color: #ef4444;
font-weight: 600;
font-size: 0.95rem;
}

.field-error.hidden {
display: none;
}

.form-control.is-invalid {
border-color: #ef4444 !important;
background-color: #fef2f2 !important;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

.form-control.is-invalid:focus {
border-color: #ef4444 !important;
box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2) !important;
}

.form-group .inline-error {
margin-top: 0.4rem;
color: #ef4444;
font-weight: 600;
font-size: 0.875rem;
display: flex;
align-items: center;
gap: 0.3rem;
}

.form-group .inline-error::before {
content: '⚠';
font-size: 0.9rem;
}

.formule-radio-card.is-invalid {
border-color: #ef4444 !important;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

.option-card.is-invalid {
border-color: #ef4444 !important;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

@keyframes shakeX {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-6px); }
40%, 80% { transform: translateX(6px); }
}

.shake {
animation: shakeX 0.5s ease-in-out;
}

/* Barre de progression */
.progress-bar-wrapper {
max-width: 800px;
margin: 0 auto 2rem;
padding: 0 1rem;
}

.progress-bar-container {
display: flex;
align-items: center;
gap: 1rem;
}

.progress-bar-track {
flex: 1;
height: 6px;
background: #e2e8f0;
border-radius: 99px;
overflow: hidden;
}

.progress-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--primary), #7c3aed);
border-radius: 99px;
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
width: 0%;
}

.progress-bar-text {
font-size: 0.85rem;
font-weight: 700;
color: var(--primary);
white-space: nowrap;
min-width: 40px;
text-align: right;
}

/* Indicateur sauvegarde auto */
.autosave-indicator {
position: fixed;
bottom: 1.5rem;
left: 1.5rem;
background: #0f172a;
color: white;
padding: 0.6rem 1.2rem;
border-radius: 0.75rem;
font-size: 0.85rem;
font-weight: 600;
z-index: 999;
display: flex;
align-items: center;
gap: 0.5rem;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.3s, transform 0.3s;
pointer-events: none;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.autosave-indicator.visible {
opacity: 1;
transform: translateY(0);
}

.autosave-indicator .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #10b981;
}

/* Notification de restauration */
.restore-banner {
background: linear-gradient(135deg, #eff6ff, #f5f3ff);
border: 1px solid #c7d2fe;
border-radius: 0.75rem;
padding: 1rem 1.5rem;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
animation: fadeInUp 0.4s ease;
}

.restore-banner-text {
font-size: 0.95rem;
color: #334155;
font-weight: 500;
}

.restore-banner-actions {
display: flex;
gap: 0.5rem;
flex-shrink: 0;
}

.restore-banner-actions button {
padding: 0.4rem 1rem;
border-radius: 0.5rem;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
border: none;
transition: all 0.2s;
}

.btn-restore {
background: var(--primary);
color: white;
}

.btn-discard {
background: white;
color: #64748b;
border: 1px solid #e2e8f0 !important;
}

/* Loading state bouton submit */
.btn-primary.is-loading {
pointer-events: none;
opacity: 0.7;
position: relative;
}

.btn-primary.is-loading .btn-text {
visibility: hidden;
}

.btn-primary.is-loading::after {
content: '';
position: absolute;
width: 22px;
height: 22px;
border: 3px solid rgba(255,255,255,0.3);
border-top-color: white;
border-radius: 50%;
animation: spin 0.6s linear infinite;
top: 50%;
left: 50%;
margin: -11px 0 0 -11px;
}

@keyframes spin {
to { transform: rotate(360deg); }
}

@media (max-width: 992px) {
.autosave-indicator { bottom: 5rem; left: 0.75rem; font-size: 0.8rem; padding: 0.5rem 1rem; }
.restore-banner { flex-direction: column; text-align: center; }
}

 .svg-icon {
 width: 1.3rem;
 height: 1.3rem;
 display: inline-block;
 vertical-align: -0.15em;
 flex-shrink: 0;
 }

 .svg-icon-md {
 width: 1.6rem;
 height: 1.6rem;
 }

 .svg-icon-xl {
 width: 2.6rem;
 height: 2.6rem;
 }

 .icon-inline {
 display: inline-flex;
 align-items: center;
 gap: 0.6rem;
 line-height: 1.2;
 }

/* — bloc suivant — */

.projet-hero {
background: linear-gradient(135deg, var(--gray-900) 0%, var(--primary-dark) 100%);
padding: 160px 0 80px;
text-align: center;
position: relative;
overflow: hidden;
}
.projet-hero::before {
content: '';
position: absolute;
inset: 0;
background:
    radial-gradient(ellipse 60% 50% at 20% 40%, rgba(99,102,241,0.18), transparent),
    radial-gradient(ellipse 50% 60% at 80% 30%, rgba(34,211,238,0.1), transparent);
pointer-events: none;
}
.projet-hero .container { position: relative; z-index: 1; }
.projet-hero h1 {
color: #fff;
font-size: clamp(2.2rem, 5vw, 3.6rem);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.12;
margin-bottom: 1.25rem;
max-width: 780px;
margin-left: auto;
margin-right: auto;
}
.projet-hero-sub {
color: rgba(255,255,255,0.75);
font-size: 1.15rem;
line-height: 1.7;
max-width: 580px;
margin: 0 auto 2.25rem;
}
.projet-hero-kpis {
display: flex;
justify-content: center;
gap: 3rem;
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid rgba(255,255,255,0.1);
flex-wrap: wrap;
}
.projet-kpi strong {
display: block;
font-size: 1.75rem;
font-weight: 800;
color: var(--accent);
line-height: 1;
margin-bottom: 0.3rem;
}
.projet-kpi span {
color: rgba(255,255,255,0.55);
font-size: 0.88rem;
font-weight: 500;
}
@media (max-width: 768px) {
.projet-hero { padding: 130px 0 50px; }
.projet-hero-kpis { gap: 1.5rem; }
}

/* ─── Refonte « sans engagement » : bandeau rassurance, avantages, budget, récap ─── */
.reassure-banner {
background: linear-gradient(135deg, #ecfdf5, #eff6ff);
border: 1px solid #bbf7d0;
border-radius: 1rem;
padding: 1.5rem;
margin-bottom: 2rem;
}
.reassure-head {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.reassure-icon {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 12px;
background: #10b981;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
}
.reassure-title {
display: block;
font-size: 1.1rem;
color: #065f46;
font-weight: 800;
margin-bottom: 0.25rem;
}
.reassure-text {
margin: 0;
color: #334155;
font-size: 0.95rem;
line-height: 1.6;
}
.reassure-advantages {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.75rem;
margin-top: 1.25rem;
padding-top: 1.25rem;
border-top: 1px dashed rgba(16,185,129,0.35);
}
.advantage {
display: flex;
align-items: center;
gap: 0.6rem;
}
.advantage i {
font-size: 1.4rem;
color: #10b981;
flex-shrink: 0;
}
.advantage strong {
display: block;
font-size: 0.92rem;
color: #0f172a;
font-weight: 700;
line-height: 1.2;
}
.advantage span {
display: block;
font-size: 0.8rem;
color: #64748b;
line-height: 1.3;
}

.budget-optional {
font-size: 0.8rem;
font-weight: 600;
color: #64748b;
background: #f1f5f9;
border-radius: 999px;
padding: 0.15rem 0.7rem;
vertical-align: middle;
}

.budget-undecided {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
border-style: dashed !important;
}
.budget-undecided-icon {
font-size: 1.8rem;
color: var(--primary);
margin-bottom: 0.5rem;
}

.budget-reassure {
display: flex;
align-items: flex-start;
gap: 0.6rem;
margin-top: 1.5rem;
padding: 1rem 1.25rem;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 0.75rem;
color: #475569;
font-size: 0.92rem;
line-height: 1.5;
}
.budget-reassure i { color: var(--primary); font-size: 1.1rem; flex-shrink: 0; margin-top: 0.1rem; }

.recap-grid p {
margin: 0 0 0.6rem;
color: #334155;
font-size: 0.98rem;
}
.recap-grid p strong { color: #0f172a; }
.recap-free-note {
margin-top: 1.25rem;
padding-top: 1rem;
border-top: 2px dashed #ddd;
color: #059669;
font-weight: 700;
display: flex;
align-items: center;
gap: 0.5rem;
}

@media (max-width: 768px) {
.reassure-advantages { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.reassure-advantages { grid-template-columns: 1fr; }
}