/* =====================================================================
   Les pages de « Mon compte » (frontend/compte/), volet Exposant compris.
   Elle s'appuie sur styles.css (couleurs, polices, boutons, messages) et
   n'ajoute que sa mise en page : une colonne, des cartes de papier.
   compte.css vient par-dessus.
   ===================================================================== */
/* `width: 100%` : le <body> du site est une colonne flex (pied de page collé
   en bas). Là, `margin: 0 auto` ne centre pas, il RÉTRÉCIT le cadre à la
   largeur de son contenu : chaque onglet du compte avait sa propre largeur
   (1 012, 548, 896 px mesurés à 1 280 px de fenêtre, Simon 2026-11-08). */
.expoCorps { width: 100%; max-width: 820px; margin: 0 auto; padding: var(--sp-8) var(--sp-4) var(--sp-16); }
/* La place de la barre de défilement est TOUJOURS réservée dans le compte et
   l'espace exposant (cette feuille n'est chargée que là) : un onglet court
   (Messages, Aperçu) n'a pas de barre, un long en a une, et toute la page se
   décalait de 7 px d'un onglet à l'autre (Simon, 2026-11-08). */
html { scrollbar-gutter: stable; }
.expoCorps h1 { font-family: var(--font-display); color: var(--brand); font-size: clamp(28px, 5vw, 40px); line-height: 1.1; margin: 0 0 var(--sp-4); }
.expoCorps h2 { font-family: var(--font-display); color: var(--brand); margin: var(--sp-8) 0 var(--sp-3); }
.expoFil { font: 500 14px/1.4 var(--font-sans); color: var(--fg-3); margin: 0 0 var(--sp-3); }
.expoFil a { color: var(--fg-3); }
.expoMeta { font: 500 14px/1.5 var(--font-sans); color: var(--fg-3); margin: var(--sp-2) 0 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.expoVide { color: var(--fg-2); }

.expoCarte {
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-3);
  padding: var(--sp-6); box-shadow: var(--shadow-sm);
}
.expoCarte--etroite { max-width: 480px; margin: 0 auto; }

.expoListe { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.expoStand { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; align-items: center; }
.expoStand h2 { margin: 0; font-size: 22px; }
.expoActions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

.pastille { display: inline-block; padding: 3px 10px; border-radius: var(--r-full); font: 600 12px/1.4 var(--font-sans); background: var(--beige-50); color: var(--fg-2); border: 1px solid var(--border); }
.pastille--accepte { background: #e8f5ed; color: var(--success); border-color: #bfe3cd; }
.pastille--refuse, .pastille--retire { background: #f6e7e2; color: var(--danger); border-color: #e7c4bb; }

/* Formulaires : une colonne, des champs pleine largeur, des cibles de 44 px. */
.expoForm { display: flex; flex-direction: column; gap: var(--sp-2); }
.expoForm label { font: 600 14px/1.4 var(--font-sans); color: var(--fg-2); margin-top: var(--sp-3); }
.expoForm input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.expoForm select, .expoForm textarea {
  width: 100%; min-height: 44px; box-sizing: border-box; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--r-3); background: #fff;
  font: 400 16px/1.4 var(--font-text); color: var(--fg);
}
.expoForm textarea { resize: vertical; }
.expoForm fieldset { border: 1px solid var(--border-soft); border-radius: var(--r-3); padding: var(--sp-4); margin: var(--sp-4) 0 0; }
.expoForm legend { font: 700 14px/1 var(--font-sans); color: var(--brand); padding: 0 var(--sp-2); }
.expoForm .btn { align-self: flex-start; margin-top: var(--sp-5); min-height: 44px; }
.expoForm .hint { font-weight: 400; color: var(--fg-3); }
.expoCase { display: flex; gap: var(--sp-2); align-items: flex-start; font-weight: 500 !important; }
.expoCase input { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.expoChoix { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.expoChoix label { display: inline-flex; gap: var(--sp-2); align-items: center; margin: 0; }
.expoCreneau { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.expoCreneau label { flex: 1 1 220px; margin-top: var(--sp-2); }
.expoAgenda { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.expoAgenda .hint { flex: 1 1 100%; margin: 0; }
.expoDanger { color: var(--danger); border-color: var(--danger); }

/* L'étal : des vignettes portrait, comme sur la page publique. */
.expoEtal { list-style: none; padding: 0; margin: 0 0 var(--sp-6); display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-4); }
.expoArticle { display: flex; flex-direction: column; gap: var(--sp-2); }
.expoArticle img, .expoArticleVide { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--r-2); background: var(--beige-200); }
.expoArticleTitre { font: 600 15px/1.3 var(--font-text); }
.expoArticle .btn { align-self: flex-start; min-height: 40px; }

@media (max-width: 560px) {
  
  .expoCarte { padding: var(--sp-4); }
}

/* Les chiffres d'un stand accepté : une rangée de compteurs, puis le lien à partager. */
.expoStats { flex: 1 1 100%; display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; border-top: 1px solid var(--border); padding-top: var(--sp-3); }
.expoStats h3 { margin: 0; font-size: 17px; }
.expoStats dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--sp-2); width: 100%; }
.expoStats dl div { background: var(--surface-2); border-radius: var(--r-3); padding: 8px 12px; }
.expoStats dt { font-size: 13px; color: var(--ink-500); }
.expoStats dd { margin: 2px 0 0; font: 600 22px/1.1 var(--font-display); color: var(--brand); }
.expoLien { width: 100%; max-width: 560px; min-height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-3); font: 14px/1 var(--font-sans); background: #fff; }

/* La trousse de partage : les deux images du stand, à télécharger. */
.expoTrousse { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.expoTrousseImage { display: flex; flex-direction: column; gap: 4px; width: 220px; text-decoration: none; font-size: 13px; }
.expoTrousseImage img { width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--r-3); background: var(--surface-2); }
textarea.expoLien { min-height: 72px; padding: 8px 10px; line-height: 1.4; resize: vertical; }
.expoPrix { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--sp-3); }
.expoPrix > span { display: flex; flex-direction: column; gap: var(--sp-2); }
.expoPrix + .hint { margin-top: 0; }