/* ===== RESET BASIQUE ===== */
* {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

body {
  background: #f6f7fb;
  margin: 0;
  padding: 20px;
}

/* ===== CONTENEUR ===== */
.form-wrapper {
  max-width: 820px;
  margin: auto;
  background: #ffffff;
  padding: 25px 30px;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.08);
}

/* ===== TITRE ===== */
.form-wrapper h1 {
  font-size: 22px;
  margin-bottom: 20px;
  color: #111;
  text-align: center;
}

/* ===== GRILLE ===== */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 700px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== LABEL ===== */
label {
  font-size: 13px;
  color: #444;
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}

/* ===== INPUT / SELECT / TEXTAREA ===== */
input[type="text"],
input[type="url"],
select,
textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 14px;
  border-radius: 10px;
  border: 1px solid #ddd;
  background: #fafafa;
  transition: all 0.2s ease;
}

textarea {
  resize: vertical;
  min-height: 90px;
}

/* ===== FOCUS ===== */
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #ff6a00;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255,106,0,0.15);
}

/* ===== FULL WIDTH ===== */
.full {
  grid-column: 1 / -1;
}

/* ===== BOUTON ===== */
button {
  background: linear-gradient(135deg, #ff6a00, #ff8c1a);
  color: #fff;
  font-size: 15px;
  padding: 14px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(255,106,0,0.3);
}

/* ===== MESSAGE ===== */
.form-message {
  margin-top: 15px;
  padding: 12px;
  border-radius: 10px;
  font-size: 14px;
}

.success {
  background: #e9fff3;
  color: #1c7c4c;
  border: 1px solid #b7ebcf;
}

.error {
  background: #ffecec;
  color: #b00020;
  border: 1px solid #f5b5b5;
}

/* ===== RTL (AR) ===== */
html[dir="rtl"] {
  direction: rtl;
}

html[dir="rtl"] label {
  text-align: right;
}