/* === static/circuitMoto/css/base.css === */

/* === Thème (variables) === */
:root{
  --primary:#3b82f6; --primary-hover:#2563eb;
  --secondary:#f3f4f6; --secondary-hover:#e5e7eb;
  --text:#111827; --text-light:#6b7280;
  --bg:#ffffff; --border:#e5e7eb;
  --error:#ef4444; --success:#10b981;
  --radius:12px; --shadow:0 1px 3px rgba(0,0,0,.1); --shadow-md:0 4px 6px -1px rgba(0,0,0,.1);
  --transition:all .2s ease-in-out;
}

[data-theme="dark"]{
  --primary:#60a5fa; --primary-hover:#3b82f6;
  --secondary:#374151; --secondary-hover:#4b5563;
  --text:#f9fafb; --text-light:#9ca3af;
  --bg:#1f2937; --border:#374151;
  --error:#f87171; --success:#34d399;
}

/* === Base === */
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--text); background:var(--bg);
  transition:var(--transition); margin:0;
}
.container{
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(1rem, 2.2vw, 1.5rem);
}
.page-title{
  margin: 0 0 .85rem;
  font-weight: 800;
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  line-height: 1.1;
  background: linear-gradient(90deg, var(--primary), #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* === Thème toggle === */
.theme-toggle{
  position:fixed; top:calc(var(--nav-height,64px) + .75rem); right:1rem;
  z-index:5001; width:2.5rem;height:2.5rem;border-radius:50%;
  display:grid;place-items:center; border:0; cursor:pointer;
  background:var(--secondary); box-shadow:var(--shadow); transition:var(--transition);
}
.theme-toggle:hover{background:var(--secondary-hover)}
@media (max-width:960px){ .theme-toggle{ top:auto; bottom:1rem; right:1rem; } }
body.menu-open .theme-toggle{ opacity:0; pointer-events:none; }


/* === Messages === */
.messages-center{display:flex;justify-content:center;margin: 0 0 1rem}
.msg-stack{width:min(780px,100%);display:grid;gap:.5rem}
.msg-card{display:grid;grid-template-columns:28px 1fr auto;gap:.75rem 1rem;padding:.8rem 1rem;border:1px solid var(--border);border-radius:12px;background:var(--bg);box-shadow:var(--shadow)}
.msg-card.error{border-color:#fecaca;background:#fff1f2}
.msg-card.warning{border-color:#facc15;background:#fffbeb}
.msg-card.success{border-color:#bbf7d0;background:#ecfdf5}
.msg-card.info{border-color:#bfdbfe;background:#eff6ff}
.msg-close{align-self:start;width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:var(--secondary);cursor:pointer}
.msg-close:hover{filter:brightness(.98)}

/* === Utilitaires === */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
:focus-visible{outline:3px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset:2px}
@media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} }

/* === Footer === */
.site-footer{margin-top:4rem;background:var(--bg);border-top:1px solid var(--border);position:relative;overflow:hidden}
.footer-background{position:absolute;inset:0;background:linear-gradient(135deg, rgba(59,130,246,.03) 0%, rgba(139,92,246,.03) 100%)}
.footer-inner{max-width:1200px;margin:0 auto;padding:2.5rem 1.5rem;display:grid;gap:2rem;position:relative;z-index:1}
.footer-content{display:grid;grid-template-columns:1fr;gap:2rem}
@media (min-width:768px){ .footer-content{grid-template-columns:1fr 1fr} }

.footer-brand{display:flex;flex-direction:column;gap:.75rem}
.footer-logo{display:flex;align-items:center;gap:.75rem;font-size:1.5rem;font-weight:700;color:var(--text);text-decoration:none}
.footer-logo-icon{width:2rem;height:2rem;color:var(--primary)}
.footer-tagline{color:var(--text-light);font-size:.95rem;max-width:30ch;line-height:1.6}

.footer-social{display:flex;gap:1rem;margin-top:1rem}
.social-link{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;background:#8b5cf6;color:#fff;transition:var(--transition);text-decoration:none}
.social-link:hover{background:var(--primary);transform:translateY(-2px)}

.newsletter-section{position:relative}
.newsletter-card{background:var(--bg);border-radius:var(--radius);padding:1.75rem;box-shadow:var(--shadow-md);border:1px solid var(--border);transition:var(--transition)}
.newsletter-card:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,.1)}
.newsletter-title{font-size:1.25rem;font-weight:600;margin-bottom:1rem;color:var(--text)}
.newsletter-desc{color:var(--text-light);font-size:.95rem;margin-bottom:1.5rem;line-height:1.6}
.nl-form{display:flex;flex-direction:column;gap:.75rem}
.nl-input-group{position:relative;display:flex}
.nl-input{flex:1;padding:.75rem 1rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);font-size:.95rem;transition:var(--transition);min-width:0}
.nl-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,.2)}
.nl-btn{position:absolute;right:.25rem;top:.25rem;bottom:.25rem;padding:0 .75rem;border-radius:calc(var(--radius) - 2px);background:var(--primary);color:#fff;font-weight:500;font-size:.85rem;border:none;cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:.25rem}
.nl-btn:hover{background:var(--primary-hover);transform:translateY(-1px)}
.nl-btn-icon{width:.9rem;height:.9rem}
.nl-help{font-size:.85rem;color:var(--error);min-height:1.25rem;padding:0 .25rem}

.footer-bottom{grid-column:1 / -1;border-top:1px solid var(--border);padding-top:1.5rem;display:flex;flex-direction:column;gap:1rem;text-align:center;font-size:.85rem;color:var(--text-light)}
@media (min-width:768px){ .footer-bottom{flex-direction:row;justify-content:space-between;text-align:left} }
.footer-links{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.footer-link{color:var(--text-light);text-decoration:none;transition:var(--transition)}
.footer-link:hover{color:var(--primary)}


/* === Developer Section === */
.developer-section {
    grid-column: 1 / -1;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.developer-card {
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.05), 
        rgba(139, 92, 246, 0.05));
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
    transition: var(--transition);
}

.developer-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.developer-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.developer-icon {
    width: 24px;
    height: 24px;
    color: var(--primary);
}

.developer-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-light);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.developer-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.developer-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.developer-name {
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(90deg, var(--primary), #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.developer-badge {
    background: linear-gradient(135deg, var(--primary), #8b5cf6);
    color: white;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    letter-spacing: 0.05em;
}

.developer-contact {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--text);
    transition: var(--transition);
    padding: 0.5rem;
    border-radius: 8px;
}

.developer-contact:hover {
    background: var(--secondary);
    color: var(--primary);
    transform: translateX(4px);
}

.contact-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.developer-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dev-tag {
    background: var(--secondary);
    color: var(--text);
    font-size: 0.8rem;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    border: 1px solid var(--border);
    transition: var(--transition);
}

.dev-tag:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-1px);
}

/* Responsive */
@media (min-width: 768px) {
    .developer-section {
        margin-top: 2rem;
    }
    
    .developer-info {
        flex-direction: row;
        align-items: center;
        gap: 2rem;
    }
}

/* Dark mode support */
[data-theme="dark"] .developer-card {
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.1), 
        rgba(139, 92, 246, 0.1));
    border-color: var(--border);
}

[data-theme="dark"] .developer-contact:hover {
    background: var(--secondary-hover);
}


/* Boutons (si non définis globalement) */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.72rem 1rem; font-weight:600; border-radius:12px; border:1px solid transparent;
  cursor:pointer; transition: transform .06s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.btn svg{ flex:0 0 auto }
.btn-primary{
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  color:#fff; box-shadow: 0 10px 22px rgba(99,102,241,.22);
}
.btn-primary:hover{ filter: brightness(1.02); transform: translateY(-1px); }
.btn-primary:active{ transform: translateY(0); }
.btn-secondary{
  background: color-mix(in oklab, var(--secondary) 92%, transparent);
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover{ background: var(--secondary-hover); }
.btn-sm{ padding:.45rem .65rem; font-size:.88rem; border-radius:10px; }
.btn-xs{ padding:.25rem .5rem; font-size:.78rem; border-radius:10px; }

/* Chips / badges */
.badge{ display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .6rem; border-radius:999px; font-size:.8rem;
  background: color-mix(in srgb, var(--secondary) 80%, transparent); border:1px solid var(--border); }
.chip{ display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .5rem; border-radius:999px; font-size:.8rem; border:1px solid var(--border); }

/* Inline states utiles */
.status-badge{ border-radius:999px; padding:.35rem .6rem; font-weight:600; }
.status-ok, .status-valide{ background: rgba(16,185,129,.12); color:#10b981; }
.status-warn{ background: rgba(234,179,8,.14); color:#b45309; }
.status-bad, .status-error{ background: rgba(239,68,68,.14); color:#dc2626; }

/* Prévisualisation des inputs désactivés */
.form-step input[disabled],
.form-step select[disabled],
.form-step textarea[disabled]{
  opacity:.75; cursor:not-allowed; background: color-mix(in oklab, var(--bg) 90%, transparent);
}

/* Petites animations de liste (ex: contacts/documents) */
.form-step .list-animate > *{ animation: item-in .18s ease both; }
@keyframes item-in{ from{opacity:0; transform: translateY(4px)} to{opacity:1; transform:none} }

/* === Spécifiques à certaines steps ====================================== */

/* Step “Passager_Choix” — switch déjà présent : juste des micro-effets */
.toggle-switch-custom{ box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--border) 90%, transparent); }
.checkbox-label input[type="checkbox"]:checked + .toggle-switch-custom{ box-shadow:none; }

/* Step “Documents” — petits ajustements visuels si tu utilises .file-upload */
.file-upload-btn{ transition: border-color .2s ease, background .25s ease, transform .08s ease; }
.file-upload-btn:hover{ transform: translateY(-1px); }
.file-meta .btn-ghost{ background: transparent; border-color: var(--border); }
.inline-warning{ border-radius: 8px; }

/* Step “Infos Médicales” — harmonise les alertes */
.alert{ border-radius:12px; }
.alert-error{ background:#fff1f2; border:1px solid #fecaca; color:#7f1d1d; }

/* Step “Décharge” — rendu scroll plus doux */
.terms-scroll{ scrollbar-width: thin; }
.terms-scroll::-webkit-scrollbar{ height:8px; width:8px; }
.terms-scroll::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--border) 70%, transparent); border-radius: 999px; }

/* Réduction des animations si préféré */
@media (prefers-reduced-motion: reduce){
  .form-step{ animation: none !important; }
}

/* === Back to top === */
.back-top{
  position: fixed;
  right: 1rem;
  bottom: 1.25rem;
  z-index: 5002;
  width: 3.1rem; height: 3.1rem;
  border: 0; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease, filter .25s ease;
  /* état masqué par défaut (on enlève hidden en JS) */
  opacity: 0; transform: translateY(12px) scale(.9);
}

/* Anneau de progression (conic-gradient + masque) */
.back-top::before{
  content: "";
  position: absolute; inset: -4px; border-radius: inherit;
  background:
    conic-gradient(color-mix(in oklab, var(--primary) 85%, #8b5cf6) var(--p, 0%), rgba(127,127,127,.18) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  transition: opacity .25s ease;
}
[data-theme="dark"] .back-top::before{
  background:
    conic-gradient(color-mix(in oklab, var(--primary) 85%, #8b5cf6) var(--p, 0%), rgba(255,255,255,.14) 0);
}

.back-top svg{ pointer-events:none; }

/* état affiché (géré par JS via data-show) */
.back-top[data-show="1"]{ opacity: 1; transform: translateY(0) scale(1); }

.back-top:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.12), 0 4px 6px -4px rgba(0,0,0,.08);
  filter: brightness(1.02);
}
.back-top:active{ transform: translateY(0) scale(.98); }
.back-top:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 35%, transparent), var(--shadow-md);
}

/* Évite le chevauchement avec le bouton thème sur mobile (ton toggle passe en bas à droite <960px) */
@media (max-width: 960px){
  .back-top{ bottom: 4.25rem; } /* remonte au-dessus du theme-toggle */
}

/* Respecte la réduction des mouvements */
@media (prefers-reduced-motion: reduce){
  .back-top, .back-top::before{ transition: none !important; }
}


/* ======================================================================
   WIZARD — compact + premium + responsive (SANS doublons)
   ====================================================================== */

/* Header wizard (sticky sous nav) */
.wizard-head{
  position: sticky;
  top: calc(var(--nav-height, 64px) + .6rem);
  z-index: 60;

  background: color-mix(in oklab, var(--bg) 88%, transparent);
  border: 1px solid color-mix(in oklab, var(--border) 88%, transparent);
  border-radius: 16px;

  padding: .85rem .95rem;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  backdrop-filter: saturate(140%) blur(6px);
}

/* Titre responsive (ne crie plus sur desktop) */
.wizard-head .page-title{
  margin: .1rem 0 .55rem;
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  line-height: 1.1;
}

/* Progress bar plus fine + clean */
.progress-container{
  width: 100%;
  height: .5rem;
  margin: .5rem 0 .75rem;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--secondary) 70%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.progress-bar{
  height: 100%;
  background:
    linear-gradient(90deg, var(--primary), #8b5cf6) padding-box,
    repeating-linear-gradient(45deg, rgba(255,255,255,.22) 0 10px, transparent 10px 20px) border-box;
  background-size: 200% 100%, auto;
  border-right: 1px solid rgba(0,0,0,.05);
  animation: wiz-stripes 2.6s linear infinite, wiz-glow 1.8s ease-in-out infinite;
  transition: width .45s cubic-bezier(.25,.8,.25,1);
}
@keyframes wiz-stripes{ to{ background-position: -200% 0, 0 0; } }
@keyframes wiz-glow{ 50%{ filter: brightness(1.05); } }

/* Steps container */
.step-indicator{
  position: relative;
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  align-items: center;
  padding: .15rem 0 .05rem;
}

/* Chips (base) — plus petits */
.step{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .45rem;

  padding: .42rem .72rem .42rem .48rem;
  border-radius: 999px;
  border: 1px solid var(--border);

  background: color-mix(in oklab, var(--secondary) 88%, transparent);
  color: var(--text-light);

  font-weight: 700;
  font-size: .86rem;
  line-height: 1;

  box-shadow: 0 1px 10px rgba(0,0,0,.02);
  transition: transform .16s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease, color .22s ease;
  white-space: nowrap;
}

/* Numéro plus petit */
.step-number{
  width: 1.45rem;
  height: 1.45rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg);
  color: var(--text);
  font-size: .72rem;
  font-weight: 900;
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--border) 78%, transparent);
  transition: box-shadow .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}

/* Hover (desktop) */
@media (hover:hover){
  .step:hover{
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(0,0,0,.06);
    border-color: color-mix(in oklab, var(--primary) 32%, var(--border));
  }
}

/* Active */
.step.active{
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(99,102,241,.18);
}
.step.active .step-number{
  background: rgba(255,255,255,.18);
  color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
}

/* Completed */
.step.completed{
  background: linear-gradient(135deg, #10b981, #34d399);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(16,185,129,.16);
}
.step.completed .step-number{
  color: transparent;
  background: rgba(255,255,255,.18);
}
.step.completed .step-number::after{
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: .9rem;
  font-weight: 900;
}

/* Disabled */
.step[aria-disabled="true"]{
  opacity: .55;
  cursor: not-allowed;
}

/* Boutons steps (cliquables) */
.step-link{
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.step-link:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent);
  outline-offset: 2px;
}

/* Mobile: steps en scroll horizontal (1 ligne) */
@media (max-width: 768px){
  .wizard-head{ padding: .75rem .8rem; border-radius: 14px; }
  .step-indicator{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .35rem;
    gap: .45rem;
  }
  .step{ flex: 0 0 auto; }
  .step-indicator::-webkit-scrollbar{ height: 6px; }
  .step-indicator::-webkit-scrollbar-thumb{
    background: color-mix(in srgb, var(--border) 60%, transparent);
    border-radius: 999px;
  }
}

/* Réduction animations */
@media (prefers-reduced-motion: reduce){
  .progress-bar{ animation: none !important; }
  .step{ transition: none !important; }
}


/* ✅ Fix lisibilité: texte sur étape active (évite bleu sur bleu) */
.step.active,
.step.active .step-link,
.step.active .step-link *,
.step.active a{
  color: #fff !important;
}

/* Optionnel: si tes étapes sont des liens <a>, on neutralise le style lien */
.step a{ text-decoration: none; color: inherit; }


/* ✅ Titres plus petits et responsive */
.wizard-head .page-title{
  font-size: clamp(1.1rem, 1.9vw, 1.6rem);
  margin: .05rem 0 .5rem;
  line-height: 1.15;
}

/* Titre dans le contenu (ex: Informations médicales sous le wizard) */
.step-hero .step-title,
.container h1,
.container > h2{
  font-size: clamp(1.25rem, 2.2vw, 1.8rem);
  line-height: 1.15;
}

/* Titres internes du formulaire */
.form-step h2{ font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
.form-step h3{ font-size: clamp(1rem, 1.3vw, 1.15rem); }


/* === static/circuitMoto/css/step.css ===
   Version clean (sans duplications)
   Objectifs:
   - Layout wizard stable
   - Sections (cards) propres
   - Grilles 2/3 colonnes sans décalage
   - Astérisque required (*) parfaitement positionné
*/

/* =========================================================
   0) Variables & sécurité anti overflow
========================================================= */

.page-wizard{
  --layout-max: 1240px;                 /* largeur globale du contenu */
  --wizard-max: 1040px;                 /* largeur bloc wizard (header + form) */
  --wizard-pad: clamp(14px, 2.2vw, 24px);

  --field-gap: clamp(12px, 1.8vw, 18px);
  --row-gap: clamp(10px, 1.6vw, 16px);
  --section-gap: clamp(12px, 2.2vw, 20px);
}

.container, .form-step, .wizard-head{ min-width: 0; }
.grid-2 > *, .grid-3 > *, .grid-3-id > *{ min-width: 0; }

/* =========================================================
   1) Layout global (utilise les côtés)
========================================================= */

.page-wizard main.container{
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: var(--wizard-pad);
}

/* Le wizard (header + form) centré */
.page-wizard .wizard-head,
.page-wizard .form-step,
.page-wizard .step-hero{
  max-width: var(--wizard-max);
  margin-left: auto;
  margin-right: auto;
}

/* Très grands écrans */
@media (min-width: 1400px){
  .page-wizard{
    --layout-max: 1360px;
    --wizard-max: 1120px;
  }
}

/* Mobile */
@media (max-width: 768px){
  .page-wizard{
    --layout-max: 100%;
    --wizard-max: 100%;
  }
}

/* =========================================================
   2) Step hero (titre + sous-titre)
========================================================= */

.page-wizard .step-hero{
  margin: 0 auto 1rem;
  text-align: left;
}

.page-wizard .step-title{
  margin: 0 0 .35rem;
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.15;
  background: linear-gradient(90deg, var(--primary), #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page-wizard .step-subtitle{
  margin: 0;
  color: var(--text-light);
  font-size: clamp(.95rem, 2.2vw, 1.05rem);
  line-height: 1.6;
  max-width: 70ch;
}

@media (max-width: 768px){
  .page-wizard .step-hero{ text-align:center; margin-bottom:.9rem; }
  .page-wizard .step-subtitle{ margin-left:auto; margin-right:auto; }
}

/* =========================================================
   3) Form card
========================================================= */

.form-step{
  background: color-mix(in oklab, var(--bg) 93%, transparent);
  border: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
  border-radius: 0 0 18px 18px; /* si wizard-head “cap” */
  padding: clamp(14px, 2.2vw, 20px);
  box-shadow: 0 18px 48px rgba(0,0,0,.10);
}

@media (max-width: 768px){
  .form-step{ border-radius: 0 0 16px 16px; }
}

/* Titre + helptext (si présents) */
.form-step h2{
  text-align:center;
  margin: .2rem 0 .4rem;
  font-size: clamp(1.1rem, 2.6vw, 1.45rem);
}
.form-step .helptext{
  text-align:center;
  margin: 0 auto 1rem;
  max-width: 60ch;
}

/* =========================================================
   4) Sections (cards internes)
========================================================= */

.step-section{
  background: color-mix(in oklab, var(--bg) 94%, transparent);
  border: 1px solid color-mix(in oklab, var(--border) 85%, transparent);
  border-radius: 16px;
  padding: clamp(12px, 2vw, 18px);
  margin-bottom: var(--section-gap);
  box-shadow: 0 8px 18px rgba(0,0,0,.05);
}

@media (max-width: 420px){
  .step-section{ padding:12px; border-radius:14px; }
}

.section-head{
  display:flex;
  flex-direction:column;
  gap:.25rem;
  margin-bottom: 1rem;
}

.section-title{
  margin:0;
  font-size: 1.05rem;
  font-weight: 850;
  letter-spacing: -.01em;
  color: var(--text);
}

.section-subtitle{
  margin:0;
  color: var(--text-light);
  font-size: .95rem;
  line-height: 1.55;
}

/* =========================================================
   5) Grilles (2 colonnes)
========================================================= */

.grid-2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--field-gap);
}

.grid-2 + .grid-2{ margin-top: var(--row-gap); }

.grid-2.grid-tight{
  gap: clamp(10px, 1.2vw, 14px);
}

@media (max-width: 640px){
  .grid-2{ grid-template-columns: 1fr; }
}

/* =========================================================
   6) Grilles (3 colonnes + identité plus large)
========================================================= */

.grid-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--field-gap);
  align-items: start;
}

.grid-3.grid-tight{
  gap: clamp(10px, 1.2vw, 14px);
}

@media (max-width: 980px){
  .grid-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px){
  .grid-3{ grid-template-columns: 1fr; }
}

/* Variante identité plus large */
.grid-3.grid-3-id{
  grid-template-columns: 1.35fr 1fr 1fr;
}

@media (max-width: 980px){
  .grid-3.grid-3-id{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3.grid-3-id .form-group:first-child{ grid-column: 1 / -1; }
}
@media (max-width: 640px){
  .grid-3.grid-3-id{ grid-template-columns: 1fr; }
  .grid-3.grid-3-id .form-group:first-child{ grid-column: auto; }
}


/* =========================================================
   6bis) Grille 3 colonnes "basic" (prenom/nom/adresse etc.)
========================================================= */

.grid-3.grid-3-basic{
  align-items: start;
}

/* Même alignement label pour éviter que le required fasse bouger l’input */
.grid-3.grid-3-basic .form-group{
  display:flex;
  flex-direction:column;
  align-items:stretch;
}

/* Réserve une hauteur label identique -> inputs parfaitement alignés */
.grid-3.grid-3-basic .form-group > label{
  display:flex;
  align-items:flex-end;
  min-height: 2.7em; /* ~2 lignes : stable */
}


/* =========================================================
   7) Form groups / labels / required (*)
========================================================= */

.form-step .form-group{
  margin: 0; /* la grille gère les espaces */
}

/* Label base */
.form-step label{
  display:block;
  font-weight: 650;
  margin: 0 0 .55rem;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ✅ Astérisque: stable et bien placé (ne décale pas le texte) */
.form-step label.required{
  position: relative;
  padding-right: 1rem; /* place pour le * */
}

.form-step label.required::after{
  content: "*";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-55%);
  color: var(--error);
  font-weight: 900;
  line-height: 1;
}

/* =========================================================
   8) FIX PRINCIPAL: alignement parfait sur la ligne 3 champs
      (identité/email/téléphone)
========================================================= */

/* Chaque item en colonne */
.grid-3.grid-3-id .form-group{
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* ✅ On réserve EXACTEMENT la même zone label pour les 3 */
.grid-3.grid-3-id .form-group > label{
  display: flex;
  align-items: flex-end;  /* texte du label aligné en bas */
  min-height: 2.7em;      /* réserve ~2 lignes (ajuste si besoin) */
}

/* Astérisque dans la zone label (priorité sur ce contexte) */
.grid-3.grid-3-id .form-group > label.required::after{
  top: 50%;
  transform: translateY(-55%);
}

/* =========================================================
   9) Inputs (uniformes)
========================================================= */

.form-step input[type="text"],
.form-step input[type="email"],
.form-step input[type="tel"],
.form-step input[type="date"],
.form-step input[type="number"],
.form-step input[type="password"],
.form-step textarea,
.form-step select{
  appearance: none;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;

  padding: .82rem .95rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font: inherit;

  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,.01);
}

.form-step textarea{ min-height: 130px; resize: vertical; }

.form-step input:focus,
.form-step select:focus,
.form-step textarea:focus{
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}

/* Select flèche */
.form-step select{
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 13px) calc(50% - 3px),
    calc(100% - 2.2rem) 0;
  background-size: 6px 6px, 6px 6px, 1px 100%;
  background-repeat: no-repeat;
  padding-right: 2.6rem;
}

/* =========================================================
   10) Erreurs Django
========================================================= */

.form-step .error-message,
.form-step .errorlist{
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;

  border: 1px solid #fecaca;
  background: #fff1f2;
  color: #7f1d1d;
  border-radius: 12px;
  padding: .6rem .75rem;
  list-style: none;
}

.form-step .errorlist li{ margin:.15rem 0; }

/* =========================================================
   11) Actions (boutons)
========================================================= */

.form-step .actions{
  display:flex;
  gap: .65rem;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;

  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.form-step .actions .btn{ min-width: 170px; }

@media (max-width: 520px){
  .form-step .actions{
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .form-step .actions .btn{
    width: 100%;
    min-width: 0;
  }
}

/* Réduction mouvements */
@media (prefers-reduced-motion: reduce){
  .form-step{ animation: none !important; }
}

/* =========================================================
   MEDICAL STEP — UI moderne (scopé)
========================================================= */

.medical-note .info-card{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
}

.medical-confidential{
  background: linear-gradient(135deg, rgba(59,130,246,.08), rgba(139,92,246,.08));
  border: 1px solid color-mix(in oklab, var(--primary) 35%, var(--border));
  border-radius: 14px;
  padding: .85rem 1rem;
}

.medical-confidential .medical-icon{
  color: var(--primary);
  margin-top: .15rem;
  flex: 0 0 auto;
}

.medical-confidential .muted{
  color: var(--text-light);
}

/* petite aide sous champs (notes, groupe sanguin) */
.field-help{
  margin: .4rem 0 0;
  color: var(--text-light);
  font-size: .88rem;
  line-height: 1.45;
}

/* Conditions : grille responsive qui utilise bien la largeur */
.conditions-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 14px);
}

/* Tablette: 2 colonnes */
@media (max-width: 980px){
  .conditions-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile: 1 colonne */
@media (max-width: 640px){
  .conditions-grid{ grid-template-columns: 1fr; }
}

/* Ligne checkbox : look moderne, cliquable, accessible */
.checkbox-line{
  display:flex;
  align-items:flex-start;
  gap:.65rem;
  padding:.7rem .75rem;
  border: 1px solid color-mix(in oklab, var(--border) 90%, transparent);
  border-radius: 14px;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.checkbox-line:hover{
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--primary) 25%, var(--border));
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
}

.checkbox-line input[type="checkbox"]{
  margin-top: .12rem;
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--primary);
  flex: 0 0 auto;
}

.checkbox-text{
  line-height: 1.35;
}

/* =========================================================
   MOTO STEP — alignement parfait (3 champs)
========================================================= */

.grid-3.grid-3-moto{
  align-items: start;
}

/* Chaque item en colonne + labels alignés */
.grid-3.grid-3-moto .form-group{
  display:flex;
  flex-direction:column;
  align-items:stretch;
}

/* Réserve une hauteur label stable -> inputs parfaitement alignés */
.grid-3.grid-3-moto .form-group > label{
  display:flex;
  align-items:flex-end;
  min-height: 2.7em; /* ~2 lignes */
}

/* Tablette: marque sur 1 ligne + deux champs dessous si besoin */
@media (max-width: 980px){
  .grid-3.grid-3-moto{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-3.grid-3-moto .form-group:first-child{
    grid-column: 1 / -1; /* marque sur toute la ligne */
  }
}

/* Mobile : 1 colonne */
@media (max-width: 640px){
  .grid-3.grid-3-moto{
    grid-template-columns: 1fr;
  }
  .grid-3.grid-3-moto .form-group:first-child{
    grid-column: auto;
  }
}

/* =========================================================
   PASSAGER CHOIX — Toggle pro (sans inline CSS)
========================================================= */

.toggle-card{
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  border: 1px solid color-mix(in oklab, var(--border) 85%, transparent);
  border-radius: 14px;
  padding: clamp(12px, 2vw, 16px);
}

/* Label toggle = zone cliquable large */
.toggle-label{
  display:flex;
  align-items:center;
  gap: 1rem;
  cursor: pointer;
  user-select: none;
  padding: .25rem 0;
}

/* Cache la checkbox native (reste accessible) */
.toggle-label input[type="checkbox"]{
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Switch */
.toggle-switch-custom{
  position: relative;
  display: inline-block;
  width: 3.5rem;
  height: 2rem;
  border-radius: 999px;

  background: color-mix(in oklab, var(--text) 12%, var(--border));
  border: 1px solid color-mix(in oklab, var(--border) 85%, transparent);

  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
  flex: 0 0 auto;
}

/* Rond */
.toggle-switch-custom::after{
  content: "";
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  transition: transform .2s ease;
}

/* Etat coché */
.toggle-label input[type="checkbox"]:checked + .toggle-switch-custom{
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  border-color: transparent;
}

.toggle-label input[type="checkbox"]:checked + .toggle-switch-custom::after{
  transform: translateX(1.5rem);
}

/* Focus accessible */
.toggle-label input[type="checkbox"]:focus-visible + .toggle-switch-custom{
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 35%, transparent);
}

/* Texte */
.toggle-text{
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

/* Help */
.toggle-help{
  margin: .6rem 0 0;
  color: var(--text-light);
  font-size: .95rem;
  line-height: 1.6;
  max-width: 75ch;
}

/* Responsive: sur mobile on garde tout lisible */
@media (max-width: 520px){
  .toggle-label{
    gap: .75rem;
  }
  .toggle-text{
    font-size: .98rem;
  }
}

/* =========================================================
   OPTIONS — cards checkbox responsive (sans inline CSS)
========================================================= */

.options-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--field-gap);
}

@media (max-width: 820px){
  .options-grid{ grid-template-columns: 1fr; }
}

/* Card */
.option-card{
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  border: 1px solid color-mix(in oklab, var(--border) 85%, transparent);
  border-radius: 14px;
  padding: clamp(12px, 2vw, 16px);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

/* Ligne cliquable */
.option-check{
  display:flex;
  align-items:flex-start;
  gap: .9rem;
  cursor: pointer;
  user-select: none;
}

/* Checkbox native cachée (accessible) */
.option-check input[type="checkbox"]{
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* UI checkbox (custom) */
.option-ui{
  width: 1.3rem;
  height: 1.3rem;
  border-radius: .35rem;
  border: 1px solid color-mix(in oklab, var(--border) 90%, transparent);
  background: var(--bg);
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--border) 75%, transparent);
  flex: 0 0 auto;
  margin-top: .15rem;
  position: relative;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .06s ease;
}

/* Check visible */
.option-check input[type="checkbox"]:checked + .option-ui{
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(99,102,241,.22);
}

.option-check input[type="checkbox"]:checked + .option-ui::after{
  content:"";
  position:absolute;
  left: .44rem;
  top: .20rem;
  width: .35rem;
  height: .70rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Focus clavier */
.option-check input[type="checkbox"]:focus-visible + .option-ui{
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 35%, transparent), inset 0 0 0 2px color-mix(in oklab, var(--border) 75%, transparent);
}

/* Text */
.option-main{ display:flex; flex-direction:column; gap:.35rem; min-width:0; }
.option-title{
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.option-help{
  color: var(--text-light);
  font-size: .92rem;
  line-height: 1.55;
}

/* Astérisque option required (si utilisé) */
.req-star{
  color: var(--error);
  font-weight: 900;
  margin-left: .25rem;
}

/* Non checkbox fields */
.option-noncheck label{
  margin-bottom: .55rem;
  font-weight: 700;
}

/* Info card spécifique options */
.info-card--options{
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid color-mix(in oklab, var(--primary) 25%, var(--border));
  border-left: 4px solid var(--primary);
  border-radius: 14px;
}

/* =========================================================
   OPTIONS — CHECKBOX BLEU ULTRA VISIBLE (FIX FINAL)
   À coller tout en bas de step.css
========================================================= */

/* Scope correct */
.step-options .option-check{
  display:grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: start;
  cursor: pointer;
  user-select: none;
}

/* Cache input natif mais accessible */
.step-options .option-check input[type="checkbox"]{
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

/* ✅ OFF state : visible + bleu (pas noir/blanc) */
.step-options .option-ui{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;

  /* bleu visible même non coché */
  background: rgba(59,130,246,.08);
  border: 2px solid rgba(59,130,246,.55);
  box-shadow: 0 8px 18px rgba(59,130,246,.10);

  flex: 0 0 auto;
  margin-top: 2px;
  position: relative;

  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .08s ease;
}

/* Petit “tick” très léger en OFF (optionnel mais aide la visibilité) */
.step-options .option-ui::after{
  content:"";
  width: 12px;
  height: 20px;
  border: solid rgba(59,130,246,.35);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  margin-top: -2px;
}

/* ✅ ON state : bleu plein + check blanc */
.step-options .option-check input[type="checkbox"]:checked + .option-ui{
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border-color: rgba(37,99,235,1);
  box-shadow: 0 14px 28px rgba(37,99,235,.25);
}

.step-options .option-check input[type="checkbox"]:checked + .option-ui::after{
  border-color: #fff;
}

/* Focus clavier (accessible) */
.step-options .option-check input[type="checkbox"]:focus-visible + .option-ui{
  box-shadow: 0 0 0 4px rgba(59,130,246,.25), 0 14px 28px rgba(37,99,235,.20);
}

/* Mobile */
@media (max-width: 520px){
  .step-options .option-check{ grid-template-columns: 50px 1fr; }
  .step-options .option-ui{
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }
}


/* =========================================
   CONTACTS — 2 cards sur la même ligne
========================================= */

.contacts-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--section-gap);
  align-items: start;
}

/* Tablet/Mobile => 1 colonne */
@media (max-width: 980px){
  .contacts-grid{
    grid-template-columns: 1fr;
  }
}

/* Card interne contact (cohérente avec step-section) */
.contact-card{
  background: color-mix(in oklab, var(--bg) 96%, transparent);
  border: 1px solid color-mix(in oklab, var(--border) 85%, transparent);
  border-radius: 16px;
  padding: clamp(12px, 1.8vw, 16px);
  box-shadow: 0 8px 18px rgba(0,0,0,.04);
  min-width: 0;
}

.contact-title{
  margin: 0 0 .9rem;
  font-size: 1.05rem;
  font-weight: 850;
  letter-spacing: -.01em;
  color: var(--text);
}

/* Sur mobile très petit */
@media (max-width: 420px){
  .contact-card{
    border-radius: 14px;
    padding: 12px;
  }
}

/* =========================================
   DOCUMENTS — upload pro + responsive
========================================= */

/* Guidelines */
.doc-guidelines{
  max-width: var(--wizard-max);
  margin: 0 auto 1rem;
  background: color-mix(in oklab, var(--bg) 96%, transparent);
  border: 1px solid color-mix(in oklab, var(--border) 85%, transparent);
  border-radius: 16px;
  padding: .9rem 1rem;
  box-shadow: 0 8px 18px rgba(0,0,0,.04);
  font-size: .95rem;
}

.doc-guidelines ul{ margin:.25rem 0 0 1rem; padding:0; }
.doc-guidelines li{ margin:.25rem 0; line-height:1.5; }

/* Grid docs */
.docs-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--section-gap);
  align-items: start;
}

@media (max-width: 980px){
  .docs-grid{ grid-template-columns: 1fr; }
}

.doc-field{
  min-width: 0;
}

/* Bloc fichier actuel */
.current-file{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  justify-content:space-between;
  align-items:center;

  background: color-mix(in oklab, var(--bg) 92%, transparent);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: .6rem .75rem;
  margin: .35rem 0 .55rem;
}

.current-file-main{
  display:flex;
  align-items:center;
  gap:.55rem;
  min-width: 220px;
  overflow-wrap:anywhere;
}

.current-file a{
  text-decoration: none;
  color: var(--text);
  font-weight: 650;
}

.current-file a:hover{
  text-decoration: underline;
}

.current-file .badge{
  font-size:.8rem;
  background: rgba(59,130,246,.12);
  border: 1px solid rgba(59,130,246,.18);
  padding: .12rem .55rem;
  border-radius: 999px;
}

/* Zone upload */
.file-upload[data-collapsed="1"] input[type="file"]{
  display:none;
}

/* Le bouton d’upload */
.file-upload-btn{
  position: relative;
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-wrap: wrap;

  border: 1px dashed color-mix(in oklab, var(--border) 80%, transparent);
  border-radius: 14px;
  padding: .75rem .85rem;
  cursor: pointer;

  background: color-mix(in oklab, var(--bg) 96%, transparent);
  transition: border-color .2s ease, box-shadow .2s ease, transform .08s ease;
}

.file-upload-btn:hover{
  border-color: color-mix(in oklab, var(--primary) 55%, var(--border));
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

.file-upload-btn:active{
  transform: translateY(1px);
}

.file-upload-btn input[type="file"]{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}

.file-upload-text{
  font-weight: 700;
}

.file-name{
  font-size:.92rem;
  opacity:.82;
}

/* Meta chips */
.file-meta{
  display:flex;
  gap:.55rem;
  align-items:center;
  margin-top:.55rem;
  flex-wrap:wrap;
}

.chip{
  display:inline-block;
  padding:.18rem .55rem;
  border-radius:999px;
  border:1px solid var(--border);
  font-size:.82rem;
  background: color-mix(in oklab, var(--bg) 96%, transparent);
}

.btn-xs{
  font-size:.82rem;
  padding:.18rem .45rem;
  border-radius:.55rem;
}

.btn-ghost{
  background:transparent;
  border:1px solid var(--border);
}

/* Preview */
.preview{
  margin-top:.6rem;
}

.preview img{
  max-width:100%;
  height:auto;
  display:block;
  border-radius: 12px;
  border:1px solid var(--border);
}

.preview .preview-info{
  font-size:.85rem;
  opacity:.85;
  margin-top:.3rem;
}

/* Inline warning */
.inline-warning{
  margin-top:.55rem;
  font-size:.9rem;
  color:#9a3412;
  background:#fff7ed;
  border:1px solid #fed7aa;
  padding:.55rem .65rem;
  border-radius: 12px;
}

/* Uploading message */
.uploading{
  margin-top:.55rem;
  font-size:.95rem;
  opacity:.9;
}

/* Mobile: current-file stack */
@media (max-width: 640px){
  .current-file{
    flex-direction: column;
    align-items:flex-start;
  }
}

/* =========================================
   DÉCHARGE — terms + signature (responsive)
========================================= */

.section-head-row{
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

/* Terms scroll */
.terms-scroll{
  max-height: 360px;
  overflow: auto;
  border: 1px solid color-mix(in oklab, var(--border) 85%, transparent);
  border-radius: 14px;
  padding: 14px;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
}

@media (max-width: 768px){
  .terms-scroll{ max-height: 320px; }
}

/* Harmonise le contenu HTML injecté (decharge_html) */
.terms h3{ margin: 0 0 .5rem; }
.terms .muted{ opacity: .82; }
.terms ul, .terms-list{ padding-left: 1.2rem; }
.terms li{ margin: .35rem 0; line-height: 1.55; }
.signature-hints{ opacity: .85; margin-top: .75rem; }

/* Acceptation (toggle check moderne) */
.ack-row{
  margin-top: 12px;
  display:flex;
  flex-direction: column;
  gap: .35rem;
}

.toggle-check{
  display:flex;
  align-items:center;
  gap:.75rem;
  cursor:pointer;
  user-select:none;
  padding: .4rem 0;
}

.toggle-check input[type="checkbox"]{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
}

.toggle-ui{
  width: 3.1rem;
  height: 1.85rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--text) 35%, transparent);
  border: 1px solid color-mix(in oklab, var(--border) 85%, transparent);
  position: relative;
  transition: .2s ease;
}

.toggle-ui::after{
  content:"";
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: #fff;
  position:absolute;
  top: 50%;
  left: .24rem;
  transform: translateY(-50%);
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
  transition: .2s ease;
}

.toggle-check input[type="checkbox"]:checked + .toggle-ui{
  background: color-mix(in oklab, var(--primary) 75%, transparent);
  border-color: color-mix(in oklab, var(--primary) 70%, var(--border));
}

.toggle-check input[type="checkbox"]:checked + .toggle-ui::after{
  transform: translateY(-50%) translateX(1.25rem);
}

.toggle-check input[type="checkbox"]:focus-visible + .toggle-ui{
  box-shadow: 0 0 0 3px rgba(59,130,246,.25);
}

.toggle-text{
  font-weight: 650;
}

/* Signature */
.sig-card{
  border: 1px dashed color-mix(in oklab, var(--border) 85%, transparent);
  border-radius: 16px;
  padding: 12px;
  background: color-mix(in oklab, var(--bg) 94%, transparent);
}

.sig-canvas-wrap{
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--border) 85%, transparent);
  background: var(--bg);
}

.sig-canvas{
  width: 100%;
  height: 240px;
  display:block;
  touch-action: none;
  background: var(--bg);
}

@media (max-width: 520px){
  .sig-canvas{ height: 220px; }
}

.sig-actions{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.sig-hint{
  opacity: .78;
  font-size: .92rem;
}

.sig-existing{
  margin-top: 12px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.sig-existing-img{
  max-width: 100%;
  height: auto;
  border: 1px solid color-mix(in oklab, var(--border) 85%, transparent);
  border-radius: 14px;
  background: var(--bg);
}

/* Loader bouton submit (pro) */
.btn.is-loading{
  opacity: .92;
  cursor: not-allowed;
}

.btn-spinner{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: rgba(255,255,255,1);
  display:inline-block;
  animation: spin .75s linear infinite;
}

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

/* =========================================================
   DÉCHARGE — FIX lisibilité + marge + toggle
   (à coller tout en bas de step.css)
========================================================= */

/* Le bloc qui contient le HTML de décharge */
.page-wizard .terms-scroll{
  margin-top: .6rem;
  margin-bottom: 1rem;                 /* ✅ vraie marge avant l’acceptation */
  min-height: 240px;                   /* ✅ évite “petit champ vide” */
  max-height: 360px;
  overflow: auto;

  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;

  background: color-mix(in oklab, var(--bg) 92%, white);
  color: var(--text);                  /* ✅ force la lisibilité */
  box-shadow: inset 0 1px 0 rgba(0,0,0,.02);
}

/* Contenu interne rendu par _decharge_contenu.html */
.page-wizard .terms-scroll .terms{
  color: inherit;
}
.page-wizard .terms-scroll .terms h3{
  margin: 0 0 .75rem;
  font-size: 1.05rem;
}
.page-wizard .terms-scroll .terms p{
  margin: .6rem 0;
  line-height: 1.65;
}
.page-wizard .terms-scroll .terms ul{
  margin: .5rem 0;
  padding-left: 1.25rem;
}
.page-wizard .terms-scroll .terms li{
  margin: .35rem 0;
  line-height: 1.55;
}

/* Ligne d’acceptation (séparée et respirante) */
.page-wizard .ack-row{
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px dashed color-mix(in oklab, var(--border) 75%, transparent);
}

/* Toggle (checkbox stylée) */
.page-wizard .toggle-check{
  display: flex;
  align-items: center;
  gap: .75rem;
  cursor: pointer;
  user-select: none;
}

/* Cache la checkbox native mais reste accessible */
.page-wizard .toggle-check input[type="checkbox"]{
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

/* UI du switch */
.page-wizard .toggle-ui{
  width: 3.3rem;
  height: 1.9rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--text) 22%, var(--bg));
  border: 1px solid var(--border);
  position: relative;
  flex: 0 0 auto;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* Le rond */
.page-wizard .toggle-ui::after{
  content: "";
  position: absolute;
  top: 50%;
  left: .22rem;
  transform: translateY(-50%);
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
  transition: transform .2s ease;
}

/* Checked -> switch ON */
.page-wizard .toggle-check input[type="checkbox"]:checked + .toggle-ui{
  background: color-mix(in oklab, var(--primary) 78%, var(--bg));
  border-color: color-mix(in oklab, var(--primary) 70%, var(--border));
}
.page-wizard .toggle-check input[type="checkbox"]:checked + .toggle-ui::after{
  transform: translate(1.35rem, -50%);
}

/* Focus accessibilité */
.page-wizard .toggle-check input[type="checkbox"]:focus-visible + .toggle-ui{
  box-shadow: 0 0 0 3px rgba(59,130,246,.25);
}

/* Texte à droite */
.page-wizard .toggle-text{
  font-weight: 650;
  line-height: 1.35;
}

/* Mobile : un peu plus compact */
@media (max-width: 520px){
  .page-wizard .terms-scroll{
    min-height: 220px;
    padding: 12px 12px;
  }
}

/* =========================================================
   DÉCHARGE — FIX "texte invisible" (override des styles .terms)
   À COLLER TOUT EN BAS du step.css
========================================================= */

/* Le wrapper */
.page-wizard .terms-scroll{
  color: var(--text) !important;
  font-size: .98rem;
  line-height: 1.65;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ✅ Force la couleur/visibilité sur TOUT le contenu rendu */
.page-wizard .terms-scroll *{
  color: var(--text) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Titres/lists un peu plus clean */
.page-wizard .terms-scroll h1,
.page-wizard .terms-scroll h2,
.page-wizard .terms-scroll h3{
  color: var(--text) !important;
  margin: 0 0 .75rem;
}

.page-wizard .terms-scroll a{
  color: var(--primary) !important;
  text-decoration: underline;
}

/* ===== Passager: 2 lignes x 3 champs (responsive) ===== */
.grid-3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.grid-3.grid-top{ margin-top: 12px; }

.form-wide{ margin-top: 12px; }

/* tablette -> 2 colonnes */
@media (max-width: 900px){
  .grid-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* mobile -> 1 colonne */
@media (max-width: 560px){
  .grid-3{ grid-template-columns: 1fr; }
}

/* =========================================================
   WIZARD — FIX TEXTE ETAPE ACTIVE + COMPACT (FINAL)
   À COLLER TOUT EN BAS de step.css
========================================================= */

/* 1) Rendre le wizard plus compact (libère de la place) */
.page-wizard .wizard-head{
  padding: .55rem .7rem !important;
  border-radius: 14px !important;
}

.page-wizard .wizard-head .page-title{
  font-size: clamp(1.05rem, 1.4vw, 1.35rem) !important;
  margin: .05rem 0 .35rem !important;
  line-height: 1.15 !important;
}

/* Progress plus fine */
.page-wizard .progress-container{
  height: .42rem !important;
  margin: .35rem 0 .55rem !important;
}

/* 2) Chips encore plus petites */
.page-wizard .step-indicator{
  gap: .35rem !important;
  padding: .05rem 0 !important;
}

.page-wizard .step{
  padding: .28rem .52rem .28rem .34rem !important;
  font-size: .78rem !important;
  font-weight: 750 !important;
}

.page-wizard .step-number{
  width: 1.22rem !important;
  height: 1.22rem !important;
  font-size: .66rem !important;
  font-weight: 900 !important;
}

/* 3) ✅ FIX: texte de l’étape active invisible (annule gradient/transparent) */
.page-wizard .step.active,
.page-wizard .step.active *{
  color: #fff !important;
  opacity: 1 !important;
  visibility: visible !important;

  /* annule les styles “texte transparent” */
  -webkit-text-fill-color: #fff !important;
  /* background: none !important; */
  -webkit-background-clip: border-box !important;
          background-clip: border-box !important;
}

/* Si tes steps sont des <a> ou <button> */
.page-wizard .step a,
.page-wizard .step .step-link{
  color: inherit !important;
  text-decoration: none !important;
  -webkit-text-fill-color: inherit !important;
}

/* 4) Titre de page (hero) plus petit aussi */
.page-wizard .step-title{
  font-size: clamp(1.1rem, 2vw, 1.55rem) !important;
  margin: 0 0 .25rem !important;
}
.page-wizard .step-subtitle{
  font-size: clamp(.92rem, 1.8vw, 1rem) !important;
}


/* ======================================================================
   BOUTONS (form_list / actions) — compacts + responsive
   ====================================================================== */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;

  padding: .68rem .95rem;
  border-radius: 12px;
  border: 1px solid transparent;

  font-weight: 700;
  font-size: .95rem;
  line-height: 1;

  cursor: pointer;
  transition: transform .08s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease, filter .22s ease;
  user-select: none;
}

.btn-primary{
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  color:#fff;
  box-shadow: 0 10px 22px rgba(99,102,241,.18);
}
.btn-primary:hover{ filter: brightness(1.02); transform: translateY(-1px); }
.btn-primary:active{ transform: translateY(0); }

.btn-secondary{
  background: color-mix(in oklab, var(--secondary) 92%, transparent);
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover{ background: var(--secondary-hover); }

.btn-sm{
  padding: .5rem .7rem;
  font-size: .88rem;
  border-radius: 10px;
}

/* Actions: sur mobile, boutons full-width */
.form-step .actions{
  display:flex;
  gap:.6rem;
  justify-content: space-between;
  align-items:center;
  margin-top:1.2rem;
  padding-top: 1rem;
  border-top:1px solid var(--border);
}
.form-step .actions .btn{ min-width: 140px; }

@media (max-width: 640px){
  .form-step .actions{
    flex-direction: column;
    align-items: stretch;
  }
  .form-step .actions .btn{
    width: 100%;
    min-width: 0;
  }
}


/* 1) NE PAS masquer horizontalement tout le document */
html,body{ overflow-x: visible; }      /* ou supprime la règle si tu l'as ajoutée */

/* 2) Corrige le débordement uniquement dans la nav */
.site-nav, .site-nav-wrap { overflow-x: clip; }   /* confine le header sans toucher au reste */

/* 3) Sur mobile, fais rétrécir le brand au lieu de pousser la page */
@media (max-width: 960px){
  .site-nav { gap: .5rem; }
  .nav-left { flex: 1 1 auto; min-width: 0; }
  .brand { min-width: 0; }
  .brand-name{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 65vw;   /* laisse la place au burger */
  }
}

/* 4) Par sécurité, évite que les enfants de grilles soient “trop larges” */
.charts-grid, .chart-card, .chart-container, .table-card { min-width: 0; }

/* ================================
   Developer contacts — lisibilité + hover
================================ */

/* .site-footer .developer-contact{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px; */

  /* état normal (un peu soft) */
  /* color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);

  text-decoration:none;
  transition: background .25s ease, border-color .25s ease, transform .25s ease, color .25s ease, box-shadow .25s ease;
} */

.site-footer .developer-contact .contact-icon{
  width:18px;
  height:18px;
  flex:0 0 auto;
  opacity:.95;
}

.site-footer .developer-contact span{
  font-weight:600;
  letter-spacing:.2px;
}

/* ✅ Quand on scroll et que le footer est visible → texte plus lisible */
/* .site-footer.is-inview .developer-contact{ */
  /*color: rgba(255,255,255,.86); /* "blanc foncé" / blanc cassé */
  /* background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
} */

/* ✅ Hover + Focus clavier */
.site-footer .developer-contact:hover,
.site-footer .developer-contact:focus-visible{
  color: rgba(255,255,255,.98);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
  transform: translateY(-1px);
}

.site-footer .developer-contact:active{
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .site-footer .developer-contact{ transition:none; }
}


/* =========================================================
   Developer section — devient "premium dark" quand visible
   (nécessite .site-footer.is-inview via ton JS)
========================================================= */

/* état normal : on garde ton design light (lisible) */
.site-footer .developer-contact{
  border: 1px solid transparent; /* léger, sinon garde ton style */
}

/* ✅ Quand on scroll et que le footer est visible */
.site-footer.is-inview .developer-card{
  background: linear-gradient(135deg, rgba(15,23,42,.94), rgba(30,41,59,.94));
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 18px 45px rgba(0,0,0,.25);
}

.site-footer.is-inview .developer-label{
  color: rgba(255,255,255,.75);
}

.site-footer.is-inview .developer-icon{
  color: rgba(255,255,255,.92);
}

/* Téléphone + email : blanc "cassé" lisible */
.site-footer.is-inview .developer-contact{
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}

/* Hover : plus lumineux + premium */
.site-footer.is-inview .developer-contact:hover,
.site-footer.is-inview .developer-contact:focus-visible{
  color: rgba(255,255,255,.98);
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.20);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  transform: translateX(4px);
}

/* Icône encore plus visible au hover */
.site-footer.is-inview .developer-contact:hover .contact-icon,
.site-footer.is-inview .developer-contact:focus-visible .contact-icon{
  opacity: 1;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.35));
}

/* Tags en mode dark */
.site-footer.is-inview .dev-tag{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.88);
}

.site-footer.is-inview .dev-tag:hover{
  background: rgba(255,255,255,.14);
  color: #fff;
}


/* 33 880 47 04 */