/* ============================================================================
   express.css — Le formulaire express (express.php)
   ----------------------------------------------------------------------------
   UNE LIGNE par étape : des champs côte à côte et un bouton, dans un cadre
   bas, comme une barre de recherche. La première version, tout sur un écran,
   était « trop grande » (David, 11/11/2026).

   Une seule feuille, avec tokens.css : la page n'emprunte rien au formulaire
   complet (base, components, calculator), pour s'afficher d'un coup. Les
   couleurs, les arrondis et les polices sont les variables du déménageur,
   posées par le serveur.

   La page vit dans une iframe aussi large que la colonne où on l'a collée.
   Les champs ont une largeur de base et passent à la ligne d'eux-mêmes quand
   la place manque (flex-wrap) : sur téléphone, une étape fait deux ou trois
   rangs, jamais un écran.
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body-family);
  font-size: var(--font-body-size);
  line-height: 1.4;
  color: var(--text);
}

/* 4 px autour : l'ombre du cadre et l'anneau de focus ne sont pas rognés par
   le bord de l'iframe. */
.xp { max-width: 980px; margin: 0 auto; padding: 4px; }

.xp__form, .xp__merci {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 8px;
  box-shadow: var(--shadow-xs);
}
/* « Sans cadre » (Configurer › Design) : la ligne se pose à même la page. */
html.sans-cadre .xp__form, html.sans-cadre .xp__merci {
  background: transparent; border: 0; box-shadow: none; padding: 0;
}

/* Le titre, s'il y en a un : une ligne, au-dessus des champs. */
.xp__titre {
  margin: 2px 6px 8px;
  font-family: var(--font-title-family);
  font-size: 1rem; font-weight: 700; line-height: 1.3;
}
.xp__titre[hidden] { display: none; }

/* ------------------------------------------------------------- la ligne -- */
.xp__etape[hidden] { display: none; }
.xp__ligne { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }

/* Un champ : un cadre, une icône ou un mot devant, la saisie sans bordure. */
.xp__champ {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 200px; min-width: 0; min-height: 48px;
  padding: 0 12px;
  background: var(--input-bg);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast), box-shadow var(--dur-med) var(--ease-out);
}
.xp__champ:hover { border-color: var(--border-strong); }
.xp__champ:focus-within { border-color: var(--accent); box-shadow: var(--shadow-glow); }
.xp__champ.est-faux { border-color: var(--danger); }
.xp__champ.est-faux:focus-within { box-shadow: 0 0 0 4px color-mix(in oklab, var(--danger) 20%, transparent); }

.xp__champ input, .xp__champ select {
  flex: 1 1 auto; width: 100%; min-width: 0; height: 45px;
  margin: 0; padding: 0;
  background: transparent; color: var(--text);
  border: 0; outline: none;
  font-family: var(--font-body-family);
  /* 16 px au moins : en dessous, l'iPhone zoome dans la page au premier champ
     touché — et la page est celle du site du déménageur. */
  font-size: max(16px, var(--font-body-size));
  line-height: 1.3;
}
.xp__champ input::placeholder { color: var(--placeholder); opacity: 1; }
.xp__champ select {
  appearance: none; -webkit-appearance: none;
  padding-right: 18px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 6px) 50%, 100% 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.xp__icone { flex: 0 0 auto; width: 18px; height: 18px; color: var(--muted); }
.xp__prefixe { flex: 0 0 auto; font-size: .875rem; color: var(--muted); white-space: nowrap; }
.xp__cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Les largeurs de base : de quoi tenir sur une ligne dans 760 px, et se
   replier proprement en dessous. */
.xp__champ--tel     { flex: 1 1 170px; }
.xp__champ--nom     { flex: 1 1 150px; }
.xp__champ--email   { flex: 1 1 190px; }
.xp__champ--adresse { flex: 1 1 240px; }
.xp__champ--date    { flex: 0 1 230px; }
.xp__champ--quoi    { flex: 2 1 150px; }
.xp__champ--etage   { flex: 1 1 140px; padding: 0 10px; }
.xp__champ--volume  { flex: 0 1 112px; }

.xp__bouton {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 20px;
  background: var(--degrade-accent);
  color: var(--accent-contrast);
  border: 0; border-radius: var(--r-md);
  font-family: var(--font-btn-family);
  font-size: calc(var(--font-btn-size) + 1px);
  font-weight: 700; line-height: 1.2; white-space: nowrap;
  cursor: pointer;
  transition: filter var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.xp__bouton:hover { filter: brightness(1.07); box-shadow: var(--shadow-pop); }
.xp__bouton:focus-visible { outline: 3px solid var(--accent-40); outline-offset: 2px; }
.xp__bouton[disabled] { cursor: progress; filter: none; box-shadow: none; }
.xp__bouton.est-envoi > span { visibility: hidden; }
.xp__bouton.est-envoi::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid color-mix(in oklab, var(--accent-contrast) 35%, transparent);
  border-top-color: var(--accent-contrast);
  animation: xp-tourne .7s linear infinite;
}
@keyframes xp-tourne { to { transform: rotate(360deg); } }

/* Étroit : ce qui doit rester ensemble le reste. La question « Que
   voulez-vous déménager ? » prend son rang pour se lire en entier (côte à
   côte avec le numéro, sur 300 px, elle était coupée) ; le numéro et le
   bouton se partagent le suivant ; les deux étages se partagent le leur. */
@media (max-width: 560px) {
  .xp__champ--quoi   { flex-basis: 100%; }
  .xp__champ--quoi + .xp__champ--tel { flex: 1 1 150px; }
  .xp__champ--volume { flex: 1 1 112px; }
  .xp__champ--date   { flex: 1 1 190px; }
  .xp__bouton        { flex: 1 1 auto; padding: 0 16px; }
}

/* ------------------------------------------------ les adresses proposées -- */
.xp__liste {
  position: absolute; left: -1.5px; right: -1.5px; top: calc(100% + 4px); z-index: 5;
  margin: 0; padding: 4px; list-style: none;
  max-height: 172px; overflow: auto;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.xp__liste[hidden] { display: none; }
.xp__option {
  padding: 8px 10px;
  border-radius: max(4px, calc(var(--r-md) - 4px));
  font-size: .9375rem; line-height: 1.3;
  cursor: pointer;
}
.xp__option:hover, .xp__option[aria-selected="true"] { background: var(--accent-14); }

/* ------------------------------------------- les messages, les petites lignes -- */
.xp__miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.xp__erreur {
  margin: 6px 0 0; padding: 6px 10px;
  background: var(--danger-bg);
  border: 1px solid color-mix(in oklab, var(--danger) 45%, var(--card));
  border-radius: var(--r-sm);
  color: color-mix(in oklab, var(--danger) 70%, var(--text));
  font-weight: 600; font-size: .875rem;
}
.xp__erreur[hidden] { display: none; }

.xp__pied {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px;
  margin: 6px 6px 0;
  font-size: .75rem; line-height: 1.45; color: var(--faint);
}
.xp__retour {
  padding: 0; background: none; border: 0; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--accent-strong);
}
.xp__retour[hidden] { display: none; }
.xp__retour:focus-visible { outline: 2px solid var(--accent-40); outline-offset: 2px; }
.xp__suivi:empty { display: none; }
.xp__suivi { font-weight: 600; color: var(--muted-strong); }
.xp__mention { min-width: 0; }
.xp__mention[open] { flex-basis: 100%; }
.xp__mention summary { list-style: none; cursor: pointer; }
.xp__mention summary::-webkit-details-marker { display: none; }
.xp__mention summary:focus-visible { outline: 2px solid var(--accent-40); outline-offset: 2px; }
.xp__mention p { margin: 4px 0 0; }
.xp__plus { text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.xp__mention[open] .xp__plus { display: none; }
/* Passé la première étape, la phrase a été lue : il reste « En savoir plus »,
   et les petites lignes tiennent sur une seule. */
.xp__form.est-suite .xp__mention:not([open]) .xp__phrase { display: none; }
.xp__pied a, .xp__merci a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
/* La mention OFA Web : au bout de la ligne, dans le cadre — lisible quel que
   soit le fond du site. */
.xp__ofa { margin-left: auto; white-space: nowrap; }
.xp__ofa a { font-weight: 700; color: var(--accent); }

/* ----------------------------------------------------------- la confirmation -- */
.xp__merci { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.xp__merci[hidden] { display: none; }
.xp__merci:focus { outline: none; }
.xp__merciTexte { margin: 0; }
.xp__coche { flex: 0 0 auto; color: var(--ok); }

.xp__noscript { padding: 12px; background: #7f1d1d; color: #fff; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .xp__champ, .xp__bouton { transition: none; }
  .xp__bouton.est-envoi::after { animation-duration: 1.6s; }
}