/* VARIABLES GLOBALES */

:root {
  --navy: #072a4a;
  --navy-2: #0e426b;
  --blue: #1677ad;
  --ice: #eef7fb;
  --orange: #f47a35;
  --red: #c9433e;
  --ink: #183247;
  --muted: #607587;
  --line: #d8e5ec;
  --white: #fff;
  --shadow: 0 24px 70px rgba(5, 39, 67, .14);
  --radius: 22px
}

/* RÉINITIALISATION GÉNÉRALE */

* {box-sizing: border-box}
html {scroll-behavior: smooth; text-align: justify;}
body {margin: 0; background: var(--ice); color: var(--ink); font-family: Georgia, 'Times New Roman',  serif; font-size: 16px; line-height: 1.55}
button, input, textarea {font: inherit}
button {cursor: pointer}

/* STRUCTURE PRINCIPALE */

.shell {min-height: 100vh; background: radial-gradient(circle at 85% 6%, rgba(244, 122, 53, .15), transparent 26rem), linear-gradient(150deg, #f5fbfd 0%, #eef7fb 52%, #e6f1f6 100%)}
main {max-width: 1100px; margin: 0 auto; padding: clamp(28px, 5vw, 68px) 20px 80px}

/* BARRE SUPÉRIEURE */

.topbar {height: 76px; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px, 5vw, 72px); letter-spacing: .02em}
.brand {display: flex; align-items: center; gap: 13px; font-weight: bold}
.brand-mark {width: 38px; height: 38px; border: 2px solid #fff; border-radius: 50%; display: grid; place-items: center; position: relative; font-family: Arial, sans-serif; font-size: 20px}
.brand-mark:after {content: '+'; color: var(--orange); font-weight: 900}
.brand small {display: block; font-family: Arial, sans-serif; font-size: 10px; font-weight: normal; letter-spacing: .13em; text-transform: uppercase; opacity: .75}
.privacy {font: 12px Arial, sans-serif; opacity: .75; display: flex; gap: 7px; align-items: center}
.privacy:before {content: '⌁'; color: var(--orange); font-size: 19px}

/* SECTION HERO */

.hero {display: grid; grid-template-columns: 1.1fr .9fr; gap: 42px; align-items: end; margin-bottom: 36px}
.eyebrow {font: 700 12px Arial, sans-serif; color: var(--red); margin: 0 0 14px}
.hero h1 {font-size: clamp(38px, 5.4vw, 45px); line-height: 1.02; color: var(--navy); margin: 0; letter-spacing: -.045em}
.hero h1 em {color: var(--orange); font-style: normal}
.hero-note {border-left: 4px solid var(--orange); padding: 8px 0 8px 22px; font-size: 18px; color: #476073; max-width: 370px}
.hero-note strong {display: block; color: var(--navy); font-size: 15px; margin-top: 16px; font-family: Arial, sans-serif}

/* CARTES */

.card {background: rgba(255, 255, 255, .92); border: 1px solid rgba(216, 229, 236, .9); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden}

/* BARRE DE PROGRESSION */

.progress-wrap {padding: 25px clamp(22px, 4vw, 45px) 20px; border-bottom: 1px solid var(--line); background: #fff}
.progress-top {display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px}
.progress-top b {color: var(--navy); font-size: 17px}
.progress-top span {font: 12px Arial, sans-serif; color: var(--muted)}
.progress-line {height: 7px; background: #e5eef2; border-radius: 10px; overflow: hidden}
.progress-line i {display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--orange)); border-radius: 10px; transition: width .45s ease}
.steps {display: flex; justify-content: space-between; margin-top: 14px}
.step-dot {display: flex; align-items: center; gap: 7px; font: 11px Arial, sans-serif; color: #9aacb7}
.step-dot .active {color: var(--navy); font-weight: bold}
.dot {width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #cbdbe3; background: #fff; font-size: 11px}
.active .dot {background: var(--navy); border-color: var(--navy); color: #fff}
.done .dot {background: var(--orange); border-color: var(--orange); color: #fff}

/* PANNEAUX */

.panel {padding: clamp(24px, 4vw, 45px); display: none; animation: rise .35s ease both}
.panel.active {display: block}@keyframes rise {from {opacity: 0; transform: translateY(8px)}to {opacity: 1; transform: none}}
.panel h2 {font-size: clamp(27px, 3vw, 38px); color: var(--navy); line-height: 1.1; margin: 0 0 8px; letter-spacing: -.025em}
.lead {color: var(--muted); margin: 0 0 28px}

/* SECTION BIENVENUE */

.welcome-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center}
.mission-list {display: grid; gap: 10px}
.mission {padding: 16px; border-radius: 14px; background: var(--ice); border-left: 3px solid var(--blue); font-family: Arial, sans-serif; font-size: 14px}
.mission strong {display: block; color: var(--navy); font-size: 15px}
.mission span {color: var(--muted)}
.welcome-badge {background: var(--navy); color: #fff; border-radius: 18px; padding: 30px; min-height: 240px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden}
.welcome-badge:after {content: '+'; position: absolute; font: 180px Georgia; color: rgba(255, 255, 255, .06); right: -10px; bottom: -80px}
.badge-kicker {font: 11px Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #b9d6e6}
.welcome-badge h3 {font-size: 30px; line-height: 1.05; margin: 0; max-width: 220px}.time {font: 12px Arial, sans-serif; color: #ffd0b7}

/* CHAMPS DE FORMULAIRE */

.field {margin: 0 0 25px}
.field label, .legend {display: block; color: var(--navy); font-weight: bold; margin-bottom: 9px}
.hint {font: 12px Arial, sans-serif; color: var(--muted); margin-top: 6px}
textarea, input[type=text], input[type=email], input[type=tel], input[type=date], select {width: 100%; border: 1px solid #cddde5; border-radius: 11px; padding: 13px 14px; background: #fff; color: var(--ink); outline: none; transition: border .2s, box-shadow .2s}
textarea {min-height: 125px; resize: vertical}
textarea:focus, input:focus {border-color: var(--blue); box-shadow: 0 0 0 3px rgba(22, 119, 173, .13)}
.choice-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px}
.choice {display: flex; gap: 11px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: .2s}
.choice:has(input:checked) {border-color: var(--blue); background: #edf8fd; box-shadow: inset 3px 0 var(--blue)}
.choice input {accent-color: var(--blue); margin-top: 4px}
.choice b {font-size: 14px; color: var(--navy); display: block}
.choice small {color: var(--muted); font: 12px Arial, sans-serif}
.question {border-top: 1px solid var(--line); padding-top: 22px; margin-top: 26px}
.question: first-of-type {border-top: 0; padding-top: 0; margin-top: 0}
.question .legend {font-size: 16px}
.inline-choices {display: flex; flex-wrap: wrap; gap: 10px}
.pill {border: 1px solid var(--line); border-radius: 999px; padding: 11px 16px; background: white; font: 13px Arial, sans-serif; color: var(--ink)}
.pill:has(input:checked) {background: var(--navy); border-color: var(--navy); color: #fff}
.pill input {accent-color: var(--orange); margin-right: 7px}

/* MESSAGES ET VALIDATION */

.feedback {margin-top: 25px; padding: 16px 18px; border-radius: 12px; border-left: 4px solid var(--orange); background: #fff5ee; color: #70452c; font: 14px Arial, sans-serif}
.feedback .good {border-left-color: #3d9a71; background: #edf9f2; color: #245e47}
.hidden {display: none!important}
.error {color: var(--red); font: 12px Arial, sans-serif; margin-top: 7px; display: none}
.invalid .error {display: block}
.invalid input, .invalid textarea {border-color: var(--red)}

/* CHECKLIST */

.checklist {display: grid; gap: 12px}
.check-item {display: flex; align-items: flex-start; gap: 13px; border: 1px solid var(--line); padding: 15px; border-radius: 13px; background: #fbfdfe}
.check-item input {width: 18px; height: 18px; margin-top: 3px; accent-color: var(--orange)}
.check-item b {font-size: 15px; color: var(--navy)}
.check-item span {display: block; color: var(--muted); font: 12px Arial, sans-serif; margin-top: 2px}

/* GRILLES DE FORMULAIRE */

.form-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 19px}
.full {grid-column: 1/-1}

/* CRÉNEAUX HORAIRES */

.slot-area {margin-top: 18px}
.slot-list {display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px}
.slot {padding: 12px 18px; background: white; border: 1px solid var(--line); border-radius: 10px; color: var(--navy); font-weight: bold}
.slot:has(input:checked) {background: var(--orange); border-color: var(--orange); color: #fff}
.slot input {display: none}
.empty-slot {padding: 13px 15px; background: #fff6ef; border-radius: 10px; color: #825031; font: 13px Arial, sans-serif}

/* RÉSUMÉ */

.summary {display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; margin: 24px 0}
.summary-block {background: var(--ice); border-radius: 13px; padding: 16px}
.summary-block .wide {grid-column: 1/-1}
.summary-block h3 {font: 11px Arial, sans-serif; letter-spacing: .13em; text-transform: uppercase; color: var(--red); margin: 0 0 7px}
.summary-block p {margin: 0; color: var(--navy); white-space: pre-line}

/* CONFIRMATION */

.confirm-box {text-align: center; padding: 14px 0}
.confirm-icon {width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: #e6f7ee; color: #25825d; font-size: 35px; margin: 0 auto 20px}
.confirm-box h2 {margin-bottom: 12px}
.confirm-box p {color: var(--muted); max-width: 560px; margin: 0 auto 23px}

/* BOUTONS */

.actions {display: flex; justify-content: space-between; gap: 12px; padding: 20px clamp(22px, 4vw, 45px); background: #fbfdfe; border-top: 1px solid var(--line)}
.btn {border: 0; border-radius: 10px; padding: 13px 21px; font-weight: bold; transition: transform .2s, box-shadow .2s}
.btn:hover {transform: translateY(-2px)}
.btn-primary {background: var(--orange); color: #fff; box-shadow: 0 8px 18px rgba(244, 122, 53, .25)}
.btn-secondary {background: transparent; color: var(--navy); border: 1px solid var(--line)}
.btn:disabled {opacity: .45; cursor: not-allowed; transform: none}
.footer-note {text-align: center; font: 11px Arial, sans-serif; color: #78909f; margin-top: 18px}

/* RESPONSIVE MOBILE */

@media(max-width: 720px) {
  .hero, .welcome-grid {grid-template-columns: 1fr; gap: 22px}
  .hero {margin-bottom: 25px}
  .hero-note {max-width: none}
  .choice-grid, .form-grid, .summary {grid-template-columns: 1fr}
  .full, .summary-block.wide {grid-column: auto}
  .steps {gap: 5px}
  .step-dot span {display: none}
  .step-dot {justify-content: center}
  .actions {position: sticky; bottom: 0; z-index: 3}
  .topbar {height: 68px}.privacy {display: none}
}