/* ══════════════════════════════════════════════════════════════════════════════════════════
   LE PANIER EN QUESTIONS, UNE PAR ÉCRAN (JM, le 7 octobre 2026).
   ══════════════════════════════════════════════════════════════════════════════════════════

   « Les accordéons sont vilains. Utilise ce qu'on a fait dans les questions de BoutiqueOuf pour
   que ce soit des wizards bien cool, et des zones de saisie bien cool : inspire-toi des pages
   de connexion. »

   Le formulaire tenait sur un seul long écran : coordonnées, sept champs d'adresse, quatre
   moyens de paiement, puis le bouton, tout en bas. On ne savait ni où on en était ni ce qui
   était obligatoire. Une question par écran, une barre d'avancement, « Retour » à gauche et
   « Suivant » à droite.

   LES CHAMPS SONT CEUX DE LA CONNEXION DE MANAGE : ronds, 54 px de haut, liseré gris, et violet
   avec un fond lavande quand on écrit dedans. Une cliente qui passe de la boutique à son compte
   retrouve les mêmes cases.

   Fichier à part, et pas dans style.css : la fiche article et la page « Moi » bougent en même
   temps, et deux mains dans le même fichier se marchent dessus.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

.bo-assistant { margin-top: 8px; padding-bottom: 8px; }
.bo-assistant[hidden], #vuePanier[hidden] { display: none; }
/* « Commander » sous le total : le seul geste de l'écran du panier. */
.bo-commander { width: 100%; height: 54px; border-radius: 999px; margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 800; }

.bo-assistant-avance { height: 6px; border-radius: 999px; background: var(--primary-bg, #F3E8FF); overflow: hidden; }
.bo-assistant-barre { height: 100%; width: 20%; border-radius: 999px; background: var(--primary); transition: width .35s ease; }
.bo-assistant-num { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--text-sec); }

.bo-assistant-page { animation: bo-assistant-entre .28s ease; }
.bo-assistant-page[hidden] { display: none; }
@keyframes bo-assistant-entre { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bo-assistant-page { animation: none; } .bo-assistant-barre { transition: none; } }

.bo-assistant-titre { margin: 14px 0 18px; font-size: 22px; line-height: 1.25; font-weight: 800; color: var(--text); }

/* ── Les champs, comme à la connexion ─────────────────────────────────────────────────── */
/* SANS CADRE AUTOUR (JM, le 7 octobre 2026) : la règle générale de theme.css encadre chaque
   .form-group, et la pilule se retrouvait dans une case. Un libellé, puis la pilule, comme dans
   « Moi ». */
.bo-assistant .form-group,
.bo-assistant .form-group:focus-within {
  margin-bottom: 14px; padding: 0; border: 0; background: transparent; box-shadow: none;
}
.bo-assistant .form-group label { text-transform: none; letter-spacing: 0; display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--text-sec); }
.bo-assistant .form-group label [data-ico] { color: var(--primary); }
/* Les !important répondent à ceux de theme.css (`.form-group input { border: none !important }`),
   qui faisaient du cadre la case et laissaient la pilule sans bord. Mêmes valeurs que « Moi ». */
.bo-assistant input[type="text"],
.bo-assistant input[type="tel"] {
  width: 100%; height: 54px !important; box-sizing: border-box; padding: 0 18px !important;
  border: 1px solid var(--border) !important; border-radius: 999px !important; background: var(--surface) !important;
  font-size: 16px !important; font-weight: 500 !important; color: var(--text); outline: none;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.bo-assistant input[type="text"]:focus,
.bo-assistant input[type="tel"]:focus {
  border: 2px solid var(--primary) !important; padding: 0 17px !important; background: var(--primary-bg, #F3E8FF) !important;
}
.bo-assistant input[readonly] { color: var(--text-sec); background: #F9FAFB !important; }
/* Le champ du téléphone, indicatif compris : voir css/champ-telephone.css. */

/* ── Les deux façons de recevoir ─────────────────────────────────────────────────────── */
.bo-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bo-choix-carte {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  min-height: 132px; padding: 18px 10px; border: 1.5px solid var(--border); border-radius: 22px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 15px; font-weight: 800;
  cursor: pointer; transition: border-color .15s, background-color .15s, transform .1s;
}
.bo-choix-carte:active { transform: scale(.98); }
.bo-choix-carte.choisi { border: 2px solid var(--primary); background: var(--primary-bg, #F3E8FF); color: var(--primary-dark); }
.bo-choix-icone {
  display: flex; align-items: center; justify-content: center; width: 56px; height: 56px;
  border-radius: 999px; background: var(--primary-bg, #F3E8FF); color: var(--primary); font-size: 26px;
}
.bo-choix-carte.choisi .bo-choix-icone { background: var(--primary); color: #fff; }

/* ── Moto ou cargo (JM, le 8 octobre 2026 : « plus d'images, moins de texte ») ──────────── */
/* Les mêmes cartes que « Livraison ou boutique », avec en plus, sous le nom, ce que le véhicule
   emporte en trois pictogrammes : c'est l'image qui explique, pas une phrase. Gris tant que la
   carte n'est pas choisie, violet ensuite, comme le reste de la carte. */
.bo-vehicule { min-height: 168px; }
.bo-vehicule-objets { display: flex; align-items: center; gap: 10px; font-size: 20px; line-height: 1; color: var(--text-sec); }
.bo-choix-carte.choisi .bo-vehicule-objets { color: var(--primary); }

/* ── La position : le geste qui remplit la course du livreur ─────────────────────────── */
.bo-position {
  width: 100%; height: 54px; display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 2px solid var(--primary); border-radius: 999px; background: var(--primary-bg, #F3E8FF);
  color: var(--primary-dark); font: inherit; font-size: 16px; font-weight: 800; cursor: pointer;
}
.bo-position.trouvee { border-color: #16A34A; background: #DCFCE7; color: #166534; }
.bo-position-etat { min-height: 18px; margin: 6px 0 14px; font-size: 13px; color: var(--text-sec); text-align: center; }
.bo-position-etat a { color: var(--primary); font-weight: 700; }

/* ── Le paiement garde ses cartes, arrondies comme le reste ──────────────────────────── */
.bo-assistant .payment-option { border-radius: 18px; }

/* ── Le récapitulatif ────────────────────────────────────────────────────────────────── */
.bo-recap { border: 1px solid var(--border); border-radius: 20px; background: var(--surface); padding: 6px 16px; }
.bo-recap-ligne { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.bo-recap-ligne:last-child { border-bottom: 0; }
.bo-recap-ligne span { color: var(--text-sec); }
.bo-recap-ligne strong { color: var(--text); text-align: right; }
.bo-recap-total strong { color: var(--primary); font-size: 17px; }
.bo-recap-modifier { margin-top: 10px; background: none; border: 0; padding: 4px; color: var(--primary); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }

.bo-assistant-erreur { min-height: 0; margin-top: 12px; color: #B91C1C; font-size: 14px; font-weight: 600; text-align: center; }
.bo-assistant-erreur:empty { display: none; }

/* ── Retour à gauche, Suivant à droite ───────────────────────────────────────────────── */
.bo-assistant-nav { display: flex; gap: 12px; margin-top: 20px; }
.bo-assistant-nav button {
  height: 54px; border-radius: 999px; font: inherit; font-size: 16px; font-weight: 800; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
/* « RETOUR » COMME « CONTINUER » (JM, le 9 octobre 2026) : même capitale, même tranche, même
   enfoncement. Son chevron est parti avec le reste — voir css/moi-ecrans.css pour le jumeau
   de la page Plus. */
.bo-assistant-retour {
  flex: 0 0 auto; padding: 0 20px; border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text);
  font-size: 15px !important; letter-spacing: .7px; text-transform: uppercase;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.09), 0 10px 12px -8px rgba(0,0,0,.16);
  transition: transform .08s ease, box-shadow .08s ease;
}
.bo-assistant-retour:active {
  transform: translateY(3px);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.09), 0 4px 6px -4px rgba(0,0,0,.14);
}
.bo-assistant-retour[hidden] { display: none; }
/* LE BOUTON À TRANCHE, LE FORMAT DE JM (le 7 octobre 2026 : « Continuer, enlève Suivant », « c'est
   mon format que je veux »). Le même que la connexion de Manage et la page d'arrivée : une
   tranche sombre de 4 px dessous, qui disparaît à l'appui, et une ombre teintée de violet. La
   tranche est une ombre intérieure : elle ne change pas la hauteur du bouton. */
.bo-assistant-suivant {
  flex: 1; border: 0; background: var(--primary); color: #fff;
  font-size: 15px !important; letter-spacing: .7px; text-transform: uppercase;
  /* L'ombre SEULEMENT EN BAS (JM, le 7 octobre 2026) : décalée vers le bas et rentrée (-8 px),
     elle ne déborde plus au-dessus du bouton. */
  box-shadow: inset 0 -4px 0 var(--bo-tranche), 0 10px 12px -8px var(--bo-lueur);
  transition: transform .08s ease, box-shadow .08s ease;
}
.bo-assistant-suivant:active { transform: translateY(3px); box-shadow: inset 0 -1px 0 var(--bo-tranche-appui), 0 4px 6px -4px var(--bo-lueur-appui); }
.bo-assistant-suivant[hidden] { display: none; }
.bo-assistant #orderBtn { height: 54px; border-radius: 999px; margin-top: 16px; }