/**
 * ViSAgree — Habillage du tunnel de signature et de la dictée par champ.
 * Mobile d'abord : une seule colonne, puis deux colonnes à partir de 768 px.
 */

/* ================= Barre de progression ================= */

.sign-progress { margin-bottom: 14px; }
.sp-steps { display: flex; gap: 6px; }
.sp-dot {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .28);
  transition: background .25s ease;
}
.sp-dot.on { background: #fff; }
.sp-dot.done { background: rgba(255, 255, 255, .72); }
.sp-labels { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; }
.sp-labels span {
  flex: 1;
  font-size: 11.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, .62);
  text-align: center;
}
.sp-labels span.on { color: #fff; font-weight: 700; }
.sp-labels span.done { color: rgba(255, 255, 255, .85); }

/* ================= Rassurance ================= */

.sign-reassure {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 14px;
}
.rs-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.rs-item svg { flex: none; color: var(--accent); margin-top: 1px; }
.rs-item span { font-size: 13px; line-height: 1.45; color: var(--ink-2); }

/* ================= Champ avec micro =================
   Grille plutôt que positionnement absolu : le micro se place à droite du champ,
   parfaitement centré, sans jamais recouvrir le texte ni déborder sur le label. */

.field-mic {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 8px;
}
.field-mic > label { grid-column: 1 / -1; }
.field-mic > .input,
.field-mic > textarea { grid-column: 1; }
.field-mic > .mic-live,
.field-mic > .hint,
.field-mic > .addr-sugg,
.field-mic > .lock-chip,
.field-mic > .send-result { grid-column: 1 / -1; }

.mic-in {
  grid-column: 2;
  width: 44px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--brand-dark);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.mic-in:hover { border-color: var(--brand); color: var(--brand); }
.mic-in.listening {
  background: #D6142E;
  border-color: #D6142E;
  color: #fff;
}
.mic-in.listening::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 10px;
  border: 2px solid rgba(214, 20, 46, .35);
  animation: pulseMic 1.2s infinite ease-out;
}
.mic-in.listening { position: relative; }
.mic-in[disabled] { opacity: .4; cursor: default; }
@keyframes pulseMic {
  0% { transform: scale(.96); opacity: .9; }
  100% { transform: scale(1.16); opacity: 0; }
}

/* Ligne d'aide pendant l'écoute : ce que le moteur a entendu, sans rien écraser. */
.mic-live {
  margin-top: 6px;
  padding: 7px 10px;
  border-radius: 8px;
  background: #F3F1FE;
  border: 1px solid #E1DBFA;
  font-size: 12.5px;
  color: var(--brand-dark);
  min-height: 31px;
}
.mic-live.empty { color: var(--muted); background: #FAFAFC; border-color: var(--line); }

.mic-note { font-size: 12.5px; color: var(--muted); margin-top: 8px; }

/* Trois menus côte à côte (jour / mois / année) : le mois garde la place nécessaire
   pour afficher « septembre » en entier, même sur un écran de 320 px. */
.date-row { display: grid; grid-template-columns: 76px 1fr 90px; gap: 8px; }
.date-row .select {
  font-size: 16px;
  padding-left: 11px;
  padding-right: 28px;
  background-position: right 8px center;
}
@media (min-width: 480px) {
  .date-row { grid-template-columns: 92px 1fr 108px; }
}

/* ================= Champs de date : taille et largeur maîtrisées =================
   Ce fichier est chargé après style.css : ces règles font donc autorité.
   Un champ date est dessiné par le navigateur et possède une largeur minimale
   propre. Deux protections, pour qu'il ne déborde jamais de sa carte et qu'il
   reste exactement de la même taille que les champs voisins :
   1. les pistes de grille acceptent de se comprimer (minmax(0, 1fr)) ;
   2. le champ lui-même peut descendre sous sa largeur minimale, et sa police
      comme son rembourrage sont calqués sur ceux des autres champs. */
.field-row { grid-template-columns: minmax(0, 1fr); }
.field-row > .field { min-width: 0; }
.field-mic { grid-template-columns: minmax(0, 1fr) auto; }

input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-size: 15px;
  line-height: 1.5;
  padding: 12px 14px;
  height: auto;
  min-height: 0;
}
input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; min-width: 0; }
input[type="date"]::-webkit-datetime-edit { min-width: 0; padding: 0; }
input[type="date"]::-webkit-datetime-edit-fields-wrapper { min-width: 0; padding: 0; }
input[type="date"]::-webkit-calendar-picker-indicator {
  display: block; width: 18px; height: 18px; margin-left: 6px; padding: 0; opacity: .75;
}

/* Sur ordinateur, les deux champs de date se placent côte à côte — mais
   seulement quand la place est réellement suffisante pour eux. */
@media (min-width: 640px) {
  .field-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ================= Récapitulatif du contrat ================= */

.sign-recap {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.sr-head {
  padding: 11px 13px;
  background: #F7F6FE;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-dark);
}
.sr-body { padding: 13px; }
.sr-body h4 {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.sr-body h4:not(:first-child) { margin-top: 16px; }
.sr-kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.sr-kv:last-child { border-bottom: 0; }
.sr-kv span { color: var(--muted); font-size: 13px; flex: none; }
.sr-kv strong { font-size: 13px; text-align: right; }
.sr-body p { margin: 0 0 9px; font-size: 13.5px; line-height: 1.62; }
.sr-body p:last-child { margin-bottom: 0; }

/* ================= Cases obligatoires ================= */

.consent-check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 13px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  margin-top: 10px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.consent-check:hover { border-color: var(--brand); }
.consent-check.on { border-color: var(--accent); background: #F2FBF8; }
.consent-check input {
  width: 22px;
  height: 22px;
  flex: none;
  margin: 0;
  accent-color: var(--accent);
}
.consent-check span { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }

/* ================= Signature ================= */

.sign-actions { display: flex; flex-direction: column; gap: 10px; }
.sign-back {
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
  padding: 6px 0;
}

/* ================= Desktop ================= */

@media (min-width: 768px) {
  .sign-reassure { grid-template-columns: 1fr 1fr; }
  .sign-actions { flex-direction: row; }
  .sign-actions .btn { flex: 1; }
}