:root{  
    --bg-1: #0f1720;        /* very dark blue-gray */  
    --bg-2: #0f2a23;        /* dark greenish */  
    --card: rgba(18,24,28,0.96);  
    --muted: #9aa9a0;  
    --accent: #18b48f;      /* green accent */  
    --accent-2: #2eb1a2;  
    --glass: rgba(255,255,255,0.03);  
    --white-soft: rgba(255,255,255,0.92);  
    --shadow: rgba(2,6,23,0.6);  
  }  
  *{box-sizing:border-box}  
  html,body{height:100%}  
  body{  
    margin:0;  
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;  
    
    background: radial-gradient(1200px 600px at 10% 10%, rgba(24,150,120,0.06), transparent 6%),  
                linear-gradient(180deg,var(--bg-1) 0%, var(--bg-2) 100%);  
    color: #e6efe9;  
    
    
    -webkit-font-smoothing:antialiased;  
    -moz-osx-font-smoothing:grayscale;  
    overflow-x:hidden;  
  }  
  
  /* header */  
  header.site-header{  
    display:flex;  
    align-items:center;  
    justify-content:space-between;  
    gap:16px;  
    padding:18px 28px;  
    border-bottom:1px solid rgba(255,255,255,0.03);  
    position:relative;  
    z-index:6;  
  }  
  .brand {  
    display:flex;  
    align-items:center;  
    gap:14px;  
  }  
  .logo {  
    width:40px;height:40px;border-radius:12px;  
    display:flex;align-items:center;justify-content:center;  
   
  }  
  .brand h1{margin:0;font-size:18px;color:#dff1ea}  
  .brand p{margin:0;font-size:12px;color:var(--muted)}  
  
  .login-link {  
    font-size:16px;  
    color:var(--muted);  
  }  
  .login-link a{color:var(--accent); text-decoration:none; font-weight:700}  
  
  /* layout */  
  main{  
    display:flex;  
    justify-content:center;  
    align-items:flex-start;  
    padding:36px 16px 80px;  
    gap:28px;  
    min-height:calc(100vh - 120px);  
    position:relative;  
    z-index:3;  
  }  
  
  /* left area: card (form) */  
  .card {  
    width:100%;  
    max-width:640px;  
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));  
    border-radius:14px;  
    padding:28px;  
    box-shadow: 0 10px 40px var(--shadow);  
    border:1px solid rgba(255,255,255,0.03);  
    color: #dff1ea;  
    position:relative;  
    overflow:hidden;  
    backdrop-filter: blur(6px);  
  }  
  
  .card-head {  
    display:flex;  
    align-items:center;  
    justify-content:space-between;  
    margin-bottom:20px;  
    gap:12px;  
  }  
  .card-head h2{margin:0;font-size:20px;color:#e8fff5 }  
  .card-head .small{font-size:12px;color:var(--muted)}  
  
  .hint {  
    color:var(--muted);  
    font-size:13px;  
    margin-bottom:18px;  
  }  
  
  label{  
    display:block;  
    font-size:13px;  
    font-weight:700;  
    color:#bcdacb;  
    margin-bottom:6px;  
  }  
  
  input[type="text"],  
  input[type="email"],  
  input[type="password"],  
  input[type="tel"],  
  select {  
    width:100%;  
    padding:12px 14px;  
    border-radius:10px;  
    border:1px solid rgba(255,255,255,0.04);  
    background: rgba(3,8,10,0.45);  
    color:var(--white-soft);  
    font-size:14px;  
    margin-bottom:12px;  
    outline:none;  
    transition: box-shadow .18s, transform .12s;  
  }  
  input::placeholder{color:rgba(230,241,235,0.28)}  
  
  input:focus, select:focus {  
    box-shadow: 0 6px 18px rgba(16,185,129,0.08);  
    border-color: rgba(24,180,143,0.9);  
    transform: translateY(-1px);  
  }  
  
  .row {  
    display:flex;  
    gap:12px;  
    align-items:flex-end;  
    margin-bottom:8px;  
  }  
  .col-sm {flex:0 0 140px}  
  .col-grow {flex:1}  
  
  .btn-primary{  
    width:100%;  
    padding:14px 16px;  
    border-radius:10px;  
    border:none;  
    background: linear-gradient(90deg,var(--accent), var(--accent-2));  
    color:#02110d;  
    font-weight:800;  
    font-size:15px;  
    cursor:pointer;  
    box-shadow: 0 10px 30px rgba(20,120,95,0.12);  
    margin-top:6px;  
  }  
  .btn-primary:active{transform:translateY(1px)}  
  .meta {  
    margin-top:12px;  
    font-size:13px;  
    color:var(--muted);  
  }  
  .meta a{color:var(--accent); text-decoration:none; font-weight:700}  
  
  /* right area: preview / summary */  
  .panel {  
    width:360px;  
    max-width: 36%;  
    min-width:260px;  
    background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));  
    border-radius:12px;  
    padding:18px;  
    border:1px solid rgba(255,255,255,0.02);  
    box-shadow: 0 8px 26px rgba(2,6,23,0.6);  
    color: #dff1ea;  
    position:relative;  
  }  
  .panel h3{margin:0 0 8px 0}  
  .stat-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px dashed rgba(255,255,255,0.03);color:var(--muted)}  
  .stat-row:last-child{border-bottom:none}  
  
  /* toast */  
  #toast-container{position:fixed;top:22px;right:22px;z-index:9999}  
  .toast{padding:12px 16px;border-radius:10px;color:#02110d;font-weight:700;margin-bottom:10px}  
  .toast.success{background: #8ef3cf}  
  .toast.error{background:#ff9a9a}  
  
  /* background canvas */  
  #bg-canvas{  
    position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none;  
    mix-blend-mode:screen;  
  }  
  
  /* responsive */  
  @media(max-width:980px){  
    main{padding:20px}  
    .panel{display:none}  
    .card{max-width:720px}  
  }  
  @media(max-width:560px){  
    .row{flex-direction:column; align-items:stretch}  
    .col-sm{flex:auto}  
  }  
  
  
  
.row-horizontal {  
  display: flex !important;       /* force l’alignement horizontal */  
  gap: 8px;  
  margin: 6px 0 12px 0;  
}  
  
.row-horizontal .field-code {  
  flex: 0 0 117px;                /* largeur fixe pour le code pays */  
  display: flex;  
  flex-direction: column;  
}  
  
.row-horizontal .field-phone {  
  flex: 1;                         /* téléphone prend le reste */  
  display: flex;  
  flex-direction: column;  
}