/* ========================================
   FORMATEURS MINI-SITE — v3 WIZARD UX
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
    --azur-primary: #2c5282;
    --azur-primary-light: #3b82c4;
    --azur-primary-dark: #1a365d;
    --azur-accent: #e8a838;
    --azur-accent-light: #f6c96b;
    --azur-success: #2f855a;
    --azur-warning: #d69e2e;
    --azur-danger: #c53030;
    --azur-bg: #f0f4f8;
    --azur-card: #ffffff;
    --azur-text: #2d3748;
    --azur-text-light: #718096;
    --azur-border: #e2e8f0;
    --azur-radius: 12px;
    --azur-radius-sm: 8px;
    --azur-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.03);
    --azur-shadow-lg: 0 4px 16px rgba(0,0,0,0.08);
}

* { box-sizing: border-box; }

body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--azur-bg);
    color: var(--azur-text);
    line-height: 1.6;
    min-height: 100vh;
    margin: 0;
}

/* ========================================
   LOGIN PAGE
   ======================================== */
.login-wrapper { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--azur-primary-dark),var(--azur-primary),var(--azur-primary-light)); padding:1rem }
.login-card { width:100%; max-width:420px; background:var(--azur-card); border-radius:16px; box-shadow:var(--azur-shadow-lg); overflow:hidden }
.login-header { padding:2rem 2rem 1rem; text-align:center }
.login-header img { max-width:180px; margin-bottom:.5rem }
.login-header h2 { font-size:1.1rem; font-weight:500; color:var(--azur-text-light); margin:0 }
.login-body { padding:1.5rem 2rem 2rem }
.login-body .form-label { font-weight:600; font-size:.85rem; text-transform:uppercase; letter-spacing:.5px; margin-bottom:.3rem }
.login-body .form-control { border:2px solid var(--azur-border); border-radius:var(--azur-radius-sm); padding:.65rem 1rem; font-size:.95rem; transition:border-color .2s }
.login-body .form-control:focus { border-color:var(--azur-primary); box-shadow:0 0 0 3px rgba(44,82,130,.15) }
.btn-azur { background:var(--azur-primary); color:#fff; border:none; border-radius:var(--azur-radius-sm); padding:.7rem 1.5rem; font-weight:600; width:100%; transition:background .2s,transform .1s }
.btn-azur:hover { background:var(--azur-primary-dark); color:#fff; transform:translateY(-1px) }
.alert-flash { border:none; border-radius:var(--azur-radius-sm); padding:.75rem 1rem; font-size:.9rem; display:flex; align-items:center; gap:.5rem; margin-bottom:1rem }

/* ========================================
   TOPBAR
   ======================================== */
.topbar { background:var(--azur-card); border-bottom:1px solid var(--azur-border); padding:.75rem 0; box-shadow:0 1px 4px rgba(0,0,0,.04); position:sticky; top:0; z-index:200 }
.topbar .nav-link { color:var(--azur-text); font-weight:500; font-size:.9rem; padding:.4rem .75rem; border-radius:var(--azur-radius-sm); transition:background .2s; text-decoration:none }
.topbar .nav-link:hover { background:var(--azur-bg) }
.status-badge { padding:.25rem .75rem; border-radius:20px; font-size:.78rem; font-weight:600; text-transform:uppercase }
.status-badge.brouillon { background:#fef3c7; color:#92400e }
.status-badge.connexion { background:#d1fae5; color:#065f46 }
.status-badge.terminer { background:#dbeafe; color:#1e40af }

/* ========================================
   WIZARD NAVIGATION
   ======================================== */
.wizard-nav {
    background: var(--azur-card);
    border-bottom: 1px solid var(--azur-border);
    padding: .5rem 0;
    position: sticky;
    top: 56px;
    z-index: 150;
    box-shadow: 0 2px 8px rgba(0,0,0,.03);
}

.wizard-steps {
    display: flex;
    align-items: center;
    gap: 0;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1rem;
    overflow-x: auto;
}

.wizard-step {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .75rem;
    cursor: pointer;
    border-radius: var(--azur-radius-sm);
    transition: all .2s;
    white-space: nowrap;
    position: relative;
    font-size: .85rem;
    font-weight: 500;
    color: var(--azur-text-light);
    text-decoration: none;
}

.wizard-step:hover { background: var(--azur-bg) }

.wizard-step.active {
    color: var(--azur-primary);
    font-weight: 700;
    background: rgba(44,82,130,.06);
}

.wizard-step .step-num {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 700;
    background: var(--azur-border);
    color: var(--azur-text-light);
    flex-shrink: 0;
    transition: all .2s;
}

.wizard-step.active .step-num {
    background: var(--azur-primary);
    color: #fff;
}

.wizard-step.complete .step-num {
    background: var(--azur-success);
    color: #fff;
}

.wizard-step.incomplete .step-num {
    background: var(--azur-warning);
    color: #fff;
}

.wizard-step .step-label { display: none }
@media (min-width: 768px) { .wizard-step .step-label { display: inline } }

/* Connector line */
.wizard-step:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -2px;
    top: 50%;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--azur-border);
}

/* ========================================
   GLOBAL COMPLETION BAR
   ======================================== */
.global-progress {
    background: var(--azur-card);
    border-bottom: 1px solid var(--azur-border);
    padding: .4rem 1rem;
}
.global-progress-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: .75rem;
}
.progress-track { flex:1; height:6px; background:var(--azur-border); border-radius:3px; overflow:hidden }
.progress-fill { height:100%; border-radius:3px; transition:width .5s }
.progress-pct { font-size:.82rem; font-weight:700; min-width:40px; text-align:right }

/* ========================================
   WIZARD CONTENT
   ======================================== */
.wizard-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem 1rem 6rem;
}

.wizard-panel { display: none; animation: fadeIn .3s ease }
.wizard-panel.active { display: block }

@keyframes fadeIn { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:translateY(0) } }

/* ========================================
   SECTION CARDS
   ======================================== */
.section-card {
    background: var(--azur-card);
    border-radius: var(--azur-radius);
    box-shadow: var(--azur-shadow);
    margin-bottom: 1.25rem;
    overflow: hidden;
    border: 1px solid var(--azur-border);
}

.section-card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--azur-border);
    padding: .85rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.section-card .card-header h5 {
    margin: 0; font-size: .95rem; font-weight: 700;
    color: var(--azur-primary-dark);
    display: flex; align-items: center; gap: .6rem;
}

.section-card .card-header h5 i { color: var(--azur-primary); font-size: 1rem; width: 22px; text-align: center }

.section-card .card-body { padding: 1.25rem }

/* Section status indicator */
.section-status {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .75rem; font-weight: 600; padding: 3px 10px;
    border-radius: 12px;
}
.section-status.complete { background: #d1fae5; color: #065f46 }
.section-status.incomplete { background: #fef3c7; color: #92400e }
.section-status.empty { background: #fee2e2; color: #c53030 }

.card-hint { font-size: .85rem; color: var(--azur-text-light); font-style: italic; margin-bottom: .75rem }

/* ========================================
   FORM FIELDS
   ======================================== */
.field-group { margin-bottom: .6rem }
.field-group label { font-size: .8rem; font-weight: 600; color: var(--azur-text-light); text-transform: uppercase; letter-spacing: .3px; margin-bottom: .2rem; display: block }
.field-group.required label::after { content: " *"; color: var(--azur-danger); font-weight: 700 }
.field-group .form-control { border: 1.5px solid var(--azur-border); border-radius: var(--azur-radius-sm); padding: .5rem .75rem; font-size: .9rem; transition: border-color .2s, box-shadow .2s }
.field-group .form-control:focus { border-color: var(--azur-primary); box-shadow: 0 0 0 3px rgba(44,82,130,.1) }
.field-group.empty .form-control { border-color: #feb2b2; background: rgba(254,178,178,.04) }
.field-saved { border-color: var(--azur-success) !important; background: rgba(47,133,90,.03) }
.save-indicator { font-size: .72rem; color: var(--azur-success); opacity: 0; transition: opacity .3s }
.save-indicator.show { opacity: 1 }
textarea.form-control { min-height: 110px; resize: vertical }

/* ========================================
   EXPERTISE ITEMS
   ======================================== */
.item-row {
    display: flex; align-items: center; gap: .5rem;
    padding: .4rem 0; border-bottom: 1px solid var(--azur-bg);
}
.item-row:last-child { border: none }
.item-row .form-control { flex:1; border:1.5px solid transparent; background:var(--azur-bg); border-radius:var(--azur-radius-sm); padding:.4rem .75rem; font-size:.9rem }
.item-row .form-control:focus { border-color:var(--azur-primary); background:#fff }
.btn-icon { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; color:var(--azur-text-light); border-radius:6px; cursor:pointer; flex-shrink:0; transition:all .2s }
.btn-icon:hover { background:#fee2e2; color:var(--azur-danger) }
.btn-icon.btn-file { color:var(--azur-primary) }
.btn-icon.btn-file:hover { background:#dbeafe; color:var(--azur-primary-dark) }

.btn-add-item { display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem; font-weight:600; color:var(--azur-primary); background:none; border:1.5px dashed var(--azur-primary); border-radius:var(--azur-radius-sm); padding:.4rem .75rem; cursor:pointer; transition:all .2s; margin-top:.5rem }
.btn-add-item:hover { background:rgba(44,82,130,.05); border-style:solid }

/* ========================================
   DROP ZONE — Prominent upload areas
   ======================================== */
.drop-zone {
    border: 2.5px dashed var(--azur-border);
    border-radius: var(--azur-radius);
    padding: 1.5rem 1rem;
    text-align: center;
    transition: all .25s;
    cursor: pointer;
    background: linear-gradient(135deg, rgba(44,82,130,.02), rgba(44,82,130,.04));
    margin-top: .75rem;
}

.drop-zone:hover,
.drop-zone.dragover {
    border-color: var(--azur-primary);
    background: linear-gradient(135deg, rgba(44,82,130,.04), rgba(44,82,130,.08));
    transform: scale(1.01);
}

.drop-zone .drop-icon {
    font-size: 2rem;
    color: var(--azur-primary-light);
    margin-bottom: .5rem;
    opacity: .7;
}

.drop-zone .drop-text {
    font-size: .9rem;
    font-weight: 600;
    color: var(--azur-primary);
    margin-bottom: .25rem;
}

.drop-zone .drop-hint {
    font-size: .78rem;
    color: var(--azur-text-light);
}

/* Drop zone when files already exist */
.drop-zone.has-files {
    padding: 1rem;
    border-style: solid;
    border-color: var(--azur-border);
    background: transparent;
}

/* ========================================
   PREUVE ITEM (file + description)
   ======================================== */
.preuve-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .75rem;
    background: var(--azur-bg);
    border-radius: var(--azur-radius-sm);
    margin-bottom: .5rem;
    transition: background .2s;
}

.preuve-card:hover { background: #e8edf4 }

.preuve-card .file-icon {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    font-size: 1rem;
    flex-shrink: 0;
}

.preuve-card .file-icon.has-file { background: #fee2e2; color: var(--azur-danger) }
.preuve-card .file-icon.no-file { background: var(--azur-border); color: var(--azur-text-light) }

.preuve-card .preuve-info { flex: 1; min-width: 0 }
.preuve-card .preuve-desc { font-size: .88rem; font-weight: 500 }
.preuve-card .preuve-file { font-size: .75rem; color: var(--azur-text-light) }
.preuve-card .preuve-actions { display: flex; gap: .25rem; flex-shrink: 0 }

/* ========================================
   BOTTOM NAV (wizard prev/next)
   ======================================== */
.wizard-bottom {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--azur-card);
    border-top: 1px solid var(--azur-border);
    box-shadow: 0 -2px 12px rgba(0,0,0,.06);
    padding: .75rem 1rem;
    z-index: 100;
}

.wizard-bottom-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-wizard {
    padding: .6rem 1.5rem;
    border-radius: var(--azur-radius-sm);
    font-weight: 600;
    font-size: .9rem;
    border: none;
    cursor: pointer;
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.btn-wizard.prev { background: var(--azur-bg); color: var(--azur-text) }
.btn-wizard.prev:hover { background: var(--azur-border) }
.btn-wizard.next { background: var(--azur-primary); color: #fff }
.btn-wizard.next:hover { background: var(--azur-primary-dark) }
.btn-wizard.finish { background: var(--azur-accent); color: var(--azur-primary-dark); font-weight: 700 }
.btn-wizard.finish:hover { background: var(--azur-accent-light) }
.btn-wizard:disabled { opacity: .5; cursor: not-allowed }

/* ========================================
   MODAL
   ======================================== */
.modal-content { border-radius: var(--azur-radius); border: none }

/* ========================================
   DOCS GRID
   ======================================== */
.doc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.75rem }
.doc-item { border:1px solid var(--azur-border); border-radius:var(--azur-radius-sm); overflow:hidden; transition:transform .2s; text-decoration:none; color:var(--azur-text) }
.doc-item:hover { transform:translateY(-2px); box-shadow:var(--azur-shadow) }
.doc-item img { width:100%; aspect-ratio:3/4; object-fit:cover }
.doc-item .doc-label { padding:.4rem; font-size:.78rem; font-weight:600; text-align:center; background:var(--azur-bg) }

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .wizard-container { padding: 1rem .5rem 5rem }
    .wizard-step .step-label { display: none }
    .wizard-steps { gap: 0 }
    .wizard-bottom .btn-wizard { padding: .5rem 1rem; font-size: .85rem }
}

::-webkit-scrollbar { width:5px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:var(--azur-border); border-radius:3px }