/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/Other/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : 26 juin 2026, 17:04:43
    Author     : Mathias keita <openwebarts.com>
*/

/* ==========================
   VARIABLES
========================== */

:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --background: #f1f5f9;
    --card: #ffffff;
    --text: #1e293b;
    --muted: #64748b;
    --border: #cbd5e1;
    --radius: 14px;
    --shadow: 0 5px 5px var(--c);
}

/* ==========================
   CONTAINER
========================== */
.page-container {width:100%;display:flex;justify-content:center;align-items:flex-start;padding:0px;}
.form-card {width:100%;max-width:950px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;}

/* ==========================
   HEADER
========================== */
.form-header {text-align:center;margin-bottom:35px;}
.form-header h1 {font-size:32px;margin-bottom:10px;}
.form-header p {color:var(--muted);}

/* ==========================
   STEPPER
========================== */
.stepper {display:flex;align-items:center;justify-content:center;margin-bottom:25px;}
.step {display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted);font-size:14px;}
.circle {width:42px;height:42px;border-radius:50%;background:#e2e8f0;display:flex;align-items:center;justify-content:center;}
.step.active {color:var(--primary);}
.step.active .circle {background:var(--primary);color:white;}
.line {height:3px;width:90px;background:#e2e8f0;margin:0 15px;}
/* Le wizard partage la classe .step avec les "process steps" de home.css : on neutralise le padding hérité */
.stepper .step {padding:0;}

/* ==========================
   PROGRESS
========================== */
.progress-container {height:8px;background:#e2e8f0;border-radius:10px;overflow:hidden;margin-bottom:35px;}
.progress-bar {height:100%;width:33%;background:var(--primary);border-radius:10px;transition:.3s;}

/* ==========================
   FORM
========================== */
.form-step {display:none;animation:fade .3s ease;}
.form-step.active {display:block;}
@keyframes fade {
    from {opacity:0;transform:translateY(10px);}
    to {opacity:1;transform:translateY(0);}
}
h2 {margin-bottom:25px;font-size:22px;}
.grid {display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.field {display:flex;flex-direction:column;gap:8px;margin-bottom:0px;}
label {font-size:14px;}
input,
select,
textarea {width:100%;padding:13px 14px;border-radius:10px;border:1px solid var(--border);outline:none;font-size:15px;transition:.2s;background:white;}
input:focus,
select:focus,
textarea:focus {border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.15);}
textarea {resize:vertical;}

/* ==========================
 OPTIONS
========================== */
.options {display:flex;gap:25px;flex-wrap:wrap;}
.options label {display:flex;align-items:center;gap:8px;}
input[type="checkbox"],
input[type="radio"] {width:auto;}

/* ==========================
 SWITCH
========================== */
.switch {position:relative;width:55px;height:28px;display:block;}
.switch input {display:none;}
.switch span {position:absolute;inset:0;background:#cbd5e1;border-radius:30px;cursor:pointer;transition:.3s;}
.switch span:before {content:"";width:22px;height:22px;background:white;border-radius:50%;position:absolute;top:3px;left:4px;transition:.3s;}
.switch input:checked + span {background:var(--primary);}
.switch input:checked + span:before {transform:translateX(25px);}

/* ==========================
 FILE
========================== */
.file-box {border:2px dashed var(--border);padding:25px;border-radius:12px;text-align:center;}

/* ==========================
 SUMMARY
========================== */
.summary {background:#f8fafc;padding:25px;border-radius:12px;margin-bottom:25px;border: 1px solid var(--c);}
.summary p {margin-top:10px;border-bottom: 1px dotted gray;font-weight: normal;}
.summary p .valeur {float: right;}
/* ==========================
 BUTTONS
========================== */
.actions {display:flex;justify-content:space-between;margin-top:35px;}
.btn {padding:14px 30px;border:none;border-radius:10px;cursor:pointer;font-size:15px;transition:.2s;}
.primary {background:var(--primary);color:white;}
.primary:hover {background:var(--primary-dark);}
.secondary {background:#e2e8f0;color:#334155;}

/* ==========================
 RESPONSIVE
========================== */

@media(max-width:768px) {
    .page-container {padding:5px;align-items:flex-start;    }
    .form-card {padding:25px;    }
    .grid {grid-template-columns:1fr;    }
    .stepper {flex-direction:column;gap:15px;    }
    .line {width:3px;height:35px;    }
    .actions {flex-direction:column;gap:15px;    }
    .btn {width:100%;}
    .stepper {flex-direction:row;justify-content:space-between;width:100%;gap:5px;    }
    .step {flex:1;font-size:11px;text-align:center;    }
    .circle {width:32px;height:32px;font-size:13px;    }
    .line {flex:1;width:auto;height:3px;margin:0 5px;    }
}

@media(max-width:480px){
    .step span {display:none;}
    .form-header h1 {font-size:24px;}
    .circle {width:36px;height:36px;}
}