/* Compte client et caisse du Marché Agri Péi — lot G4-2b.
 *
 * ⚠️ CHARGÉE EN DERNIER, APRÈS agripei-design-system.css.
 * Elle n'ajoute que ce qui manquait : la mise en page des formulaires de compte
 * et de caisse. Tout est porté par les classes .agri-compte-* et .agri-caisse-*,
 * donc rien ici ne peut atteindre la boutique d'un producteur ni les rayons.
 *
 * ⚠️ Ne PAS y remettre des règles de bannière, d'en-tête ou de carte produit :
 * elles existent déjà dans les feuilles précédentes, et une sixième source de
 * vérité sur les mêmes éléments est exactement le problème que §5 du document de
 * fondation demande d'arrêter.
 */

:root {
  --apc-vert: #28643C;
  --apc-vert-fonce: #173524;
  --apc-creme: #FAF8F0;
  --apc-bord: #e3ded0;
  --apc-or: #C89B3C;
  --apc-rouge: #A5342B;
}

/* ---------------------------------------------------- Cadre commun */

.agri-compte,
.agri-caisse {
  max-width: 640px;
  margin: 0 auto 3rem;
  background: #fff;
  border: 1px solid var(--apc-bord);
  border-radius: 14px;
  padding: 2rem 2.2rem 2.4rem;
  box-shadow: 0 6px 24px rgba(23, 53, 36, .07);
}

.agri-compte h1,
.agri-caisse h1 {
  margin: 0 0 .6rem;
  font-size: 1.6rem;
  color: var(--apc-vert-fonce);
}

.agri-compte h2,
.agri-caisse h2 {
  margin: 2rem 0 .8rem;
  font-size: 1.1rem;
  color: var(--apc-vert-fonce);
  border-top: 1px solid var(--apc-bord);
  padding-top: 1.4rem;
}

.agri-compte-intro,
.agri-caisse-intro {
  margin: 0 0 1.6rem;
  line-height: 1.55;
  color: #3c4b40;
}

/* ------------------------------------------- Messages : VISIBLES
 *
 * ⚠️ Un message de confirmation ou d'erreur qui se fond dans le texte n'existe
 * pas. Retour de Gilbert du 04/08 : « le message n'est pas visible, il faut que
 * cela se voie bien ». D'où le fond coloré, le liseré épais et le gras.
 */

.agri-compte-message {
  margin: 0 0 1.6rem;
  padding: .85rem 1.1rem;
  border-radius: 8px;
  border-left: 5px solid var(--apc-vert);
  background: #eef5ef;
  color: var(--apc-vert-fonce);
  font-weight: 700;
  line-height: 1.45;
}

.agri-compte-message.error {
  border-left-color: var(--apc-rouge);
  background: #fbeeec;
  color: #7d251e;
}

/* ------------------------------------------------- Formulaires
 *
 * ⚠️ Le libellé est AU-DESSUS du champ, jamais à côté. Sans cela, les libellés
 * de longueurs différentes désalignent toute la colonne — c'était le défaut
 * signalé le 04/08 sur la création de compte.
 */

.agri-compte-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.agri-compte-form label,
.agri-caisse-form label {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-weight: 600;
  color: var(--apc-vert-fonce);
  font-size: .95rem;
}

.agri-compte-form input,
.agri-compte-form select,
.agri-caisse-form select {
  width: 100%;
  box-sizing: border-box;
  padding: .7rem .8rem;
  border: 1px solid var(--apc-bord);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-weight: 400;
  color: #1d2b22;
}

.agri-compte-form input:focus,
.agri-compte-form select:focus,
.agri-caisse-form select:focus {
  outline: 2px solid var(--apc-vert);
  outline-offset: 1px;
  border-color: var(--apc-vert);
}

/* Deux champs côte à côte (prénom / nom), qui repassent l'un sous l'autre sur
 * un téléphone : la moitié des visites se fera au téléphone. */
.agri-compte-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}

.agri-compte-form button,
.agri-caisse-form button {
  align-self: flex-start;
  margin-top: .4rem;
}

.agri-compte-aide {
  margin: 0;
  font-size: .88rem;
  line-height: 1.5;
  color: #5d6b60;
  font-weight: 400;
}

.agri-compte-bascule {
  margin: 1.8rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--apc-bord);
  font-size: .95rem;
}

.agri-compte-bascule a {
  color: var(--apc-vert);
  font-weight: 700;
}

.agri-compte-deconnexion {
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--apc-bord);
}

/* ------------------------------------------------------- La caisse */

.agri-caisse-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--apc-bord);
}

.agri-caisse-groupe {
  margin: 0 0 1rem;
  border: 1px solid var(--apc-bord);
  border-radius: 10px;
  overflow: hidden;
}

.agri-caisse-groupe > header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .7rem 1rem;
  background: var(--apc-creme);
  border-bottom: 1px solid var(--apc-bord);
}

.agri-caisse-groupe > header h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--apc-vert-fonce);
}

.agri-caisse-groupe ul {
  margin: 0;
  padding: .4rem 1rem .6rem;
  list-style: none;
}

.agri-caisse-groupe li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .35rem 0;
  border-bottom: 1px dotted var(--apc-bord);
}

.agri-caisse-groupe li:last-child { border-bottom: none; }

.agri-caisse-total {
  margin: 1.2rem 0 0;
  padding-top: 1rem;
  border-top: 2px solid var(--apc-vert);
  font-size: 1.1rem;
  color: var(--apc-vert-fonce);
}

.agri-caisse-total .agri-compte-aide { display: block; margin-top: .3rem; }

/* Les lignes tombées depuis l'ouverture du panier. Volontairement voyant : une
 * commande qui maigrit sans que la cliente le remarque est une trahison. */
.agri-caisse-retirees {
  margin: 0 0 1.6rem;
  padding: .9rem 1.1rem;
  border-radius: 8px;
  border-left: 5px solid var(--apc-or);
  background: #fdf6e6;
  color: #6b4e12;
}

.agri-caisse-retirees ul { margin: .5rem 0 0; padding-left: 1.2rem; }

.agri-caisse-vide {
  margin: 1rem 0;
  padding: 1.2rem;
  border-radius: 8px;
  background: var(--apc-creme);
  line-height: 1.55;
}

/* --------------------------------------- Retrait et liste de commandes */

.agri-commande-retrait {
  margin: 0 0 1.4rem;
  padding: 1rem 1.2rem;
  list-style: none;
  border: 1px solid var(--apc-bord);
  border-left: 5px solid var(--apc-vert);
  border-radius: 8px;
  background: var(--apc-creme);
  line-height: 1.6;
}

.agri-commande-liste { margin: 0; padding: 0; list-style: none; }

.agri-commande-liste li {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 1rem;
  align-items: center;
  padding: .8rem .2rem;
  border-bottom: 1px solid var(--apc-bord);
}

.agri-commande-liste li:last-child { border-bottom: none; }

.agri-commande-liste a { color: var(--apc-vert); font-weight: 700; }

/* ------------------------------------------------------- Téléphone */

@media (max-width: 640px) {
  .agri-compte,
  .agri-caisse { padding: 1.4rem 1.2rem 1.8rem; border-radius: 10px; }
  .agri-compte-duo { grid-template-columns: 1fr; }
  .agri-commande-liste li { grid-template-columns: 1fr auto; }
}

/* ------------------------------------- Le bandeau « à qui vous achetez »
 *
 * ⚠️ Il n'apparaît QUE sur une boutique d'Agri Péi (Marché, plus tard Épicerie),
 * parce que seul layoutGlobal le pose. C'est le repère visuel qui distingue une
 * boutique d'Agri Péi de la boutique d'un producteur : au Marché le client paie
 * immédiatement et c'est Agri Péi qui encaisse, alors que chez le producteur sa
 * commande est d'abord validée. Il ne doit jamais avoir à se demander lequel des
 * deux — la couleur ambrée le distingue franchement du vert des producteurs.
 */
.agri-bandeau-boutique {
  max-width: 1100px;
  margin: .7rem auto 0;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  background: #fdf6e6;
  border: 1px solid #ecdcb4;
  color: #6b4e12;
  font-size: .92rem;
  line-height: 1.45;
  text-align: center;
}

.agri-bandeau-boutique strong { color: #4c380c; }

@media (max-width: 640px) {
  .agri-bandeau-boutique { border-radius: 10px; text-align: left; }
}