.card {
  margin: 2rem auto;
  background: #18161d;
  border: 1px solid #2a2735;
  border-radius: 20px;
  padding: 12px 12px;
  width: min(760px, 95vw);  /* élargi pour 2 colonnes */
  box-shadow: 0 40px 80px rgba(0,0,0,0.5);
}
.card h1 {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-style: italic;
  font-size: 28px;
  color: #f0edf8;
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}
.card p {
  font-size: 13px;
  color: #6b6578;
  margin-bottom: 36px;
}

.card-blanc {
  margin: 2rem auto;
  background: #ffffff !important;
  border: 1px solid #e0dce8;
  border-radius: 20px;
  padding: 12px 12px;
  width: min(760px, 95vw);
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.card-blanc h1 {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-style: italic;
  font-size: 28px;
  color: #1a1040;
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}

.card-blanc label.field-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a7090;
  margin-bottom: 0;
}

.card-blanc input[type="text"],
.card-blanc input[type="email"],
.card-blanc input[type="tel"],
.card-blanc input[type="password"] {
  background: #f5f3f8 !important;
  border: 1px solid #d0cce0 !important;
  color: #1a1040 !important;
}

.card-blanc input:focus {
  border-color: #7c5cbf;
  box-shadow: 0 0 0 3px rgba(124, 92, 191, 0.12);
}

.card-blanc a             { color: #7c5cbf; }
.card-blanc a:hover       { color: #5c7cbf; }
.card-blanc .btn          { width: 100%; }

.field {
  margin-bottom: 8px;
}

/* Déjà existant — renommé pour cohérence */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;   /* base : 1 colonne (mobile first) */
  gap: 0 24px;
}

@media (min-width: 600px) {
  .form-grid-2    { grid-template-columns: 1fr 1fr; }
  .form-grid-3    { grid-template-columns: 1fr 1fr 1fr; }
  .form-grid-4    { grid-template-columns: 1fr 1fr 1fr 1fr; } 
  .form-grid-4-2  { grid-template-columns: 2fr 1fr 1fr; } 
   
  .form-grid-5    { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }   
  .form-grid-2-1  { grid-template-columns: 2fr 1fr; }  /* ← 2/3 + 1/3 */
  .form-grid-1-2  { grid-template-columns: 1fr 2fr; }  /* ← 1/3 + 2/3 */
  .form-grid-3-1  { grid-template-columns: 3fr 1fr; }  /* ← 3/4 + 1/4 */
  .form-grid-3-2  { grid-template-columns: 3fr 1fr 1fr; }  /* ← 3/5 + 2/5 */

}

/* Occupation des colonnes */
.field-full   { grid-column: 1 / -1; }  /* toute la largeur */
.field-2col   { grid-column: span 2; }  /* 2 colonnes sur 3 */