/* ======================================================================
   Le bandeau de rodage.

   Il doit se remarquer sans crier : c'est une main tendue, pas une alerte.
   D'où le fond crème, le filet doré à gauche plutôt qu'un cadre complet,
   et aucune couleur d'avertissement — rien n'est cassé, on demande juste
   qu'on nous le dise.
   ====================================================================== */

.lpwa-rodage {
  margin: 0 0 18px;
  padding: 16px 18px;
  background: linear-gradient(180deg, #FFFDFA, #FBF7F2);
  border: 1px solid var(--cream-300, #E4D9CB);
  border-left: 2px solid var(--gold, #C9A227);
  border-radius: 14px;
}

.lpwa-rodage__corps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}

.lpwa-rodage__texte {
  flex: 1 1 260px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-600, #322A2C);
}

.lpwa-rodage__texte strong {
  font-weight: 600;
  color: var(--ink-800, #191315);
}

.lpwa-rodage__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lpwa-rodage__dire,
.lpwa-rodage__fermer,
.lpwa-rodage__envoyer {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font: 600 13px/1 inherit;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}

.lpwa-rodage__dire,
.lpwa-rodage__envoyer {
  border: 1px solid var(--gold, #C9A227);
  background: transparent;
  color: var(--gold-deep, #9A7A18);
}

.lpwa-rodage__dire:hover,
.lpwa-rodage__envoyer:hover {
  background: var(--gold-wash, rgba(201, 162, 39, .12));
}

.lpwa-rodage__fermer {
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: #6F6862;
  font-weight: 500;
}

.lpwa-rodage__fermer:hover { color: var(--ink-800, #191315); }

.lpwa-rodage__zone { margin-top: 14px; }

.lpwa-rodage__champ {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.lpwa-rodage__champ span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-700, #241D1F);
}

.lpwa-rodage__champ textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--cream-300, #E4D9CB);
  border-radius: 12px;
  background: #FFFDFA;
  font: 400 14px/1.55 inherit;
  color: var(--ink-800, #191315);
  resize: vertical;
}

.lpwa-rodage__champ textarea:focus {
  outline: 2px solid var(--gold, #C9A227);
  outline-offset: 1px;
  border-color: transparent;
}

.lpwa-rodage__envoyer:disabled { opacity: .6; cursor: default; }

.lpwa-rodage__mot,
.lpwa-rodage__merci {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-600, #322A2C);
}

.lpwa-rodage__merci { color: #1C7A4B; font-weight: 500; }

@media (max-width: 520px) {
  .lpwa-rodage__actions { width: 100%; justify-content: space-between; }
}