/* ===== Couleurs et réglages de base ===== */
:root {
  --fond: #F7F5F2;
  --encre: #14213D;
  --bleu: #1D3DB8;
  --corail: #E4572E;
  --gris: #5B6478;
  --bord: #E3DFD8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  max-width: 480px;
  margin-inline: auto;
  min-height: 100vh;
  padding-bottom: 110px; /* place pour la barre du bas */
  background: var(--fond);
  color: var(--encre);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

a { color: inherit; text-decoration: none; }

/* Toutes les icônes : traits arrondis, couleur du texte */
svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }

/* ===== En-tête ===== */
#entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 20px 0;
}

/* Le h1 garde l'apparence du logo */
#titre-site { margin: 0; font-size: inherit; }

#logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.logo-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--bleu);
  color: #fff;
}

.logo-icone svg { width: 20px; height: 20px; }

#lien-compte {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--bord);
  border-radius: 50%;
  background: #fff;
}

main { padding: 18px 20px 0; }

/* ===== Recherche ===== */
#recherche { display: flex; gap: 10px; }

#recherche .champ {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--bord);
  border-radius: 16px;
  background: #fff;
  color: var(--gris);
}

#recherche .champ svg { width: 20px; height: 20px; flex: none; }

#champ-recherche {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--encre);
  font: inherit;
  font-size: 14px;
}

#recherche .champ:focus-within { outline: 3px solid var(--bleu); outline-offset: 2px; }

#bouton-filtres {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 16px;
  background: var(--bleu);
  color: #fff;
  cursor: pointer;
}

#bouton-filtres svg { width: 20px; height: 20px; }

/* ===== Localisation ===== */
#localisation {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #3A4560;
}

#localisation svg { width: 16px; height: 16px; stroke: var(--corail); stroke-width: 2.2; }
#localisation svg:last-child { width: 14px; height: 14px; stroke: #3A4560; stroke-width: 2.4; }

/* ===== Onglets ===== */
#onglets {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-bottom: 4px;
  overflow-x: auto;
}

.onglet {
  flex: none;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--bord);
  border-radius: 20px;
  background: #fff;
  color: var(--encre);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.onglet.actif {
  border-color: var(--encre);
  background: var(--encre);
  color: #fff;
}

/* ===== Produits ===== */
.titre-section {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 20px 0 14px;
}

.titre-section h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.titre-section a { font-size: 13px; font-weight: 600; color: var(--bleu); }

#grille-produits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.carte {
  padding: 8px;
  border: 1px solid #EEEAE3;
  border-radius: 20px;
  background: #fff;
}

.carte-photo {
  position: relative;
  height: 110px;
  border-radius: 14px;
  background: linear-gradient(135deg, #F6D9C8, #EFB89B);
}
.carte:nth-child(2) .carte-photo { background: linear-gradient(135deg, #D3E0F7, #A9C0EE); }
.carte:nth-child(3) .carte-photo { background: linear-gradient(135deg, #E5EBCB, #C6D49A); }
.carte:nth-child(4) .carte-photo { background: linear-gradient(135deg, #F3E2B8, #E8C77D); }

.carte-favori {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--encre);
  cursor: pointer;
}

.carte-favori svg { width: 18px; height: 18px; stroke-width: 2.2; }

.carte-nom { margin: 10px 4px 0; font-size: 14px; font-weight: 700; }

.carte-boutique {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 3px 4px 0;
  font-size: 12px;
  color: var(--gris);
}

.carte-boutique svg { flex: none; width: 12px; height: 12px; stroke-width: 2.2; }

.carte-boutique span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.carte-prix {
  margin: 6px 4px 4px;
  font-size: 15px;
  font-weight: 800;
  color: var(--bleu);
}

/* ===== Barre du bas ===== */
#barre-bas {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: calc(100% - 32px);
  max-width: 448px;
  height: 68px;
  border-radius: 24px;
  background: var(--encre);
  box-shadow: 0 10px 30px rgba(20, 33, 61, 0.28);
}

#barre-bas a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 60px;
  font-size: 11px;
  font-weight: 600;
  color: #AEB7CC;
}

#barre-bas a.actif { color: #fff; font-weight: 700; }


/* ===== Couleurs et réglages de base ===== */
:root {
  --fond: #F7F5F2;
  --encre: #14213D;
  --bleu: #1D3DB8;
  --corail: #E4572E;
  --gris: #5B6478;
  --bord: #E3DFD8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  max-width: 480px;
  margin-inline: auto;
  min-height: 100vh;
  padding-bottom: 110px; /* place pour la barre du bas */
  background: var(--fond);
  color: var(--encre);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

a { color: inherit; text-decoration: none; }

/* Toutes les icônes : traits arrondis, couleur du texte */
svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }

/* ===== En-tête ===== */
#entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 20px 0;
}

/* Le h1 garde l'apparence du logo */
#titre-site { margin: 0; font-size: inherit; }

#logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.logo-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--bleu);
  color: #fff;
}

.logo-icone svg { width: 20px; height: 20px; }

#lien-compte {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--bord);
  border-radius: 50%;
  background: #fff;
}

main { padding: 18px 20px 0; }

/* ===== Recherche ===== */
#recherche { display: flex; gap: 10px; }

#recherche .champ {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--bord);
  border-radius: 16px;
  background: #fff;
  color: var(--gris);
}

#recherche .champ svg { width: 20px; height: 20px; flex: none; }

#champ-recherche {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--encre);
  font: inherit;
  font-size: 14px;
}

#recherche .champ:focus-within { outline: 3px solid var(--bleu); outline-offset: 2px; }

#bouton-filtres {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 16px;
  background: var(--bleu);
  color: #fff;
  cursor: pointer;
}

#bouton-filtres svg { width: 20px; height: 20px; }

/* ===== Localisation ===== */
#localisation {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #3A4560;
}

#localisation svg { width: 16px; height: 16px; stroke: var(--corail); stroke-width: 2.2; }
#localisation svg:last-child { width: 14px; height: 14px; stroke: #3A4560; stroke-width: 2.4; }

/* ===== Onglets ===== */
#onglets {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-bottom: 4px;
  overflow-x: auto;
}

.onglet {
  flex: none;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--bord);
  border-radius: 20px;
  background: #fff;
  color: var(--encre);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.onglet.actif {
  border-color: var(--encre);
  background: var(--encre);
  color: #fff;
}

/* ===== Produits ===== */
.titre-section {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 20px 0 14px;
}

.titre-section h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.titre-section a { font-size: 13px; font-weight: 600; color: var(--bleu); }

#grille-produits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.carte {
  padding: 8px;
  border: 1px solid #EEEAE3;
  border-radius: 20px;
  background: #fff;
}

.carte-photo {
  position: relative;
  height: 110px;
  border-radius: 14px;
  background: linear-gradient(135deg, #F6D9C8, #EFB89B);
}
.carte:nth-child(2) .carte-photo { background: linear-gradient(135deg, #D3E0F7, #A9C0EE); }
.carte:nth-child(3) .carte-photo { background: linear-gradient(135deg, #E5EBCB, #C6D49A); }
.carte:nth-child(4) .carte-photo { background: linear-gradient(135deg, #F3E2B8, #E8C77D); }

.carte-favori {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--encre);
  cursor: pointer;
}

.carte-favori svg { width: 18px; height: 18px; stroke-width: 2.2; }

.carte-nom { margin: 10px 4px 0; font-size: 14px; font-weight: 700; }

.carte-boutique {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 3px 4px 0;
  font-size: 12px;
  color: var(--gris);
}

.carte-boutique svg { flex: none; width: 12px; height: 12px; stroke-width: 2.2; }

.carte-boutique span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.carte-prix {
  margin: 6px 4px 4px;
  font-size: 15px;
  font-weight: 800;
  color: var(--bleu);
}

/* ===== Barre du bas ===== */
#barre-bas {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: calc(100% - 32px);
  max-width: 448px;
  height: 68px;
  border-radius: 24px;
  background: var(--encre);
  box-shadow: 0 10px 30px rgba(20, 33, 61, 0.28);
}

#barre-bas a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 60px;
  font-size: 11px;
  font-weight: 600;
  color: #AEB7CC;
}

#barre-bas a.actif { color: #fff; font-weight: 700; }

/* ===== Pages simples (Catégories, et plus tard Favoris, Compte...) ===== */
.page-simple { padding: 28px 20px 0; }

.page-simple h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.6px;
}

.sous-titre {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--gris);
}

.page-simple #recherche { margin-top: 18px; }

/* ===== Page Catégories ===== */
#grille-categories {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.categorie {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 76px;
  padding: 0 12px;
  border: 1px solid #EEEAE3;
  border-radius: 20px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.categorie-icone {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--fond-icone);
  color: var(--couleur-icone);
}

/* ===== Page Favoris ===== */
.page-simple #grille-produits { margin-top: 18px; }

/* Cœur plein quand le produit est en favori */
.carte-favori.actif svg { fill: var(--corail); stroke: var(--corail); }

/* Écran "Aucun favori" */
.favoris-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 110px;
  padding: 0 16px;
  text-align: center;
}

.favoris-vide[hidden] { display: none; }

.favoris-vide-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #E8EDFC;
  color: var(--bleu);
}

.favoris-vide-icone svg { width: 44px; height: 44px; }

.favoris-vide h2 {
  margin: 20px 0 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.favoris-vide p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gris);
}

/* Bouton bleu réutilisable sur d'autres pages */
.bouton-principal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin-top: 22px;
  padding: 0 28px;
  border-radius: 16px;
  background: var(--bleu);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}

/* ===== Page Compte ===== */
.carte-bienvenue {
  margin-top: 18px;
  padding: 22px;
  border-radius: 24px;
  background: var(--bleu);
  color: #fff;
}

.bienvenue-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.bienvenue-avatar svg { width: 28px; height: 28px; }

.carte-bienvenue h2 {
  margin: 14px 0 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.4px;
}

.carte-bienvenue p {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: #DCE4FF;
}

.bouton-blanc,
.bouton-contour,
.bouton-sombre {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  font-size: 15px;
}

.bouton-blanc {
  height: 50px;
  margin-top: 18px;
  background: #fff;
  color: var(--bleu);
  font-weight: 800;
}

.bouton-contour {
  height: 50px;
  margin-top: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  font-weight: 700;
}

.carte-vendeur {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 18px;
  border: 1px solid #EEEAE3;
  border-radius: 24px;
  background: #fff;
}

.vendeur-icone {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: #FCE9D9;
  color: #C2571A;
}

.vendeur-icone svg { width: 24px; height: 24px; }

.carte-vendeur h2 { margin: 0; font-size: 15px; font-weight: 800; }

.carte-vendeur p {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--gris);
}

.bouton-sombre {
  height: 48px;
  margin-top: 10px;
  background: var(--encre);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.liste-compte {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.liste-compte a {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 4px;
  border-top: 1px solid #E9E5DE;
  font-size: 14px;
  font-weight: 600;
}

.liste-compte .valeur {
  margin-left: auto;
  margin-right: -6px;
  font-size: 13px;
  font-weight: 400;
  color: var(--gris);
}

.liste-compte .chevron {
  width: 18px;
  height: 18px;
  stroke: var(--gris);
  stroke-width: 2.2;
}

/* Sans valeur à droite (Aide, À propos), la flèche se place quand même à droite */
.liste-compte a > .chevron:last-child { margin-left: auto; }
.liste-compte .valeur + .chevron { margin-left: 0; }


/* ===== Fiche produit ===== */
.page-fiche { padding-bottom: 150px; } /* place pour la barre de contact */

.fiche-photo { position: relative; height: 260px; }

/* Les photos se font glisser avec le doigt, sans JavaScript */
.galerie {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.galerie::-webkit-scrollbar { display: none; }

.diapo {
  flex: 0 0 100%;
  scroll-snap-align: start;
  background: linear-gradient(135deg, #F6D9C8, #EFB89B);
}
.diapo:nth-child(2) { background: linear-gradient(135deg, #D3E0F7, #A9C0EE); }
.diapo:nth-child(3) { background: linear-gradient(135deg, #E5EBCB, #C6D49A); }

/* Boutons ronds blancs : retour, partager, favori */
.rond {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--encre);
  cursor: pointer;
}

.rond.actif svg { fill: var(--corail); stroke: var(--corail); }

.retour { position: absolute; top: 28px; left: 20px; }

.actions-haut {
  position: absolute;
  top: 28px;
  right: 20px;
  display: flex;
  gap: 10px;
}

/* La partie blanche qui monte sur la photo */
.fiche-infos {
  position: relative;
  margin-top: -24px;
  padding: 20px;
  border-radius: 28px 28px 0 0;
  background: var(--fond);
}

.fiche-categorie { margin: 0; font-size: 12px; font-weight: 700; color: var(--bleu); }

.fiche-infos h1 {
  margin: 4px 0 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.4px;
}

.fiche-prix { margin: 4px 0 0; font-size: 24px; font-weight: 800; color: var(--bleu); }

.fiche-zone {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #3A4560;
}

.fiche-zone svg { width: 16px; height: 16px; stroke: var(--corail); stroke-width: 2.2; }

.badge-dispo {
  padding: 3px 8px;
  border-radius: 10px;
  background: #E3F5EA;
  color: #0B6B35;
  font-size: 11px;
  font-weight: 700;
}

/* Carte de la boutique */
.fiche-boutique {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #EEEAE3;
  border-radius: 20px;
  background: #fff;
}

.boutique-avatar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bleu);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
}

.boutique-nom { display: block; font-size: 14px; font-weight: 800; }
.boutique-lien { display: block; margin-top: 3px; font-size: 12px; color: var(--gris); }

.fiche-boutique .chevron {
  margin-left: auto;
  width: 18px;
  height: 18px;
  stroke: var(--gris);
  stroke-width: 2.2;
}

/* Choix de la taille */
.tailles { margin: 14px 0 0; padding: 0; border: 0; }

.tailles legend { margin-bottom: 6px; padding: 0; font-size: 13px; font-weight: 700; }

.tailles-choix { display: flex; gap: 8px; }

.taille { position: relative; }

/* Le vrai bouton radio est invisible mais couvre toute la case */
.taille input {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.taille span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--bord);
  border-radius: 14px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
}

.taille input:checked + span {
  border-color: var(--bleu);
  background: var(--bleu);
  color: #fff;
  font-weight: 800;
}

.taille input:focus-visible + span { outline: 3px solid var(--bleu); outline-offset: 2px; }

/* Description et conseil */
.fiche-infos h2 { margin: 14px 0 0; font-size: 13px; font-weight: 700; }

.fiche-texte { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: #3A4560; }

.conseil {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: #FFF4D6;
  color: #5A4300;
  font-size: 12px;
  line-height: 1.45;
}

/* Barre du bas : WhatsApp + signaler */
.barre-contact {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  padding: 12px 20px 16px;
  border-top: 1px solid #E9E5DE;
  background: var(--fond);
}

.bouton-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 54px;
  border-radius: 16px;
  background: #0B6B35;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}

.lien-signaler {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gris);
}

.lien-signaler svg { width: 16px; height: 16px; }

/* ===== Cartes cliquables (toute la carte ouvre la fiche) ===== */
.carte { position: relative; }

.carte-nom a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
}

/* Le cœur reste cliquable par-dessus la carte */
.carte-favori { z-index: 2; }

/* ===== Page boutique ===== */
.page-boutique { padding-bottom: 40px; }

.boutique-banniere {
  position: relative;
  height: 150px;
  background: linear-gradient(135deg, #1D3DB8, #4A66D6);
}

.boutique-infos { padding: 0 20px; }

.boutique-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-top: -36px;
  border: 4px solid var(--fond);
  border-radius: 50%;
  background: var(--corail);
  color: #fff;
  font-size: 26px;
  font-weight: 800;
}

.boutique-infos h1 {
  margin: 10px 0 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.boutique-infos .fiche-zone { margin-top: 6px; }

.etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.etiquette {
  padding: 6px 12px;
  border: 1px solid var(--bord);
  border-radius: 14px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
}

.boutique-infos .bouton-whatsapp { margin-top: 16px; height: 52px; }

.boutique-infos .titre-section { margin: 22px 0 12px; }

/* ===== Pages sans barre du bas (inscription, connexion...) ===== */
.page-sans-barre { padding-bottom: 40px; }

/* ===== Formulaires ===== */
.page-formulaire { padding: 28px 20px 0; }

.rond-bord { border: 1px solid var(--bord); }

.marque { margin-top: 24px; }

.page-formulaire h1 {
  margin: 22px 0 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.6px;
}

.page-formulaire form { margin-top: 6px; }

.champ-formulaire { margin-top: 14px; }

.champ-formulaire label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
}

.champ-formulaire input {
  width: 100%;
  height: 52px;
  padding: 0 14px;
  border: 1px solid var(--bord);
  border-radius: 16px;
  background: #fff;
  color: var(--encre);
  font: inherit;
  font-size: 14px;
}

/* Champ mal rempli : bordure rouge + message d'erreur */
.champ-formulaire input:user-invalid { border: 1.5px solid #C0262D; }

.erreur {
  display: none;
  align-items: flex-start;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  color: #B3202A;
}

.erreur svg { flex: none; width: 16px; height: 16px; }

.champ-formulaire input:user-invalid + .erreur { display: flex; }

.note-conditions {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--gris);
}

.note-conditions a,
.pied-formulaire a { color: var(--bleu); font-weight: 700; }

.lien-oublie {
  display: block;
  margin-top: 6px;
  padding: 8px 0;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  color: var(--bleu);
}

.bouton-plein {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 54px;
  margin-top: 22px;
  border: 0;
  border-radius: 16px;
  background: var(--bleu);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.pied-formulaire {
  margin: 22px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--gris);
}


/* ===== Pages avec boutons fixes en bas (localisation, filtres) ===== */
.page-avec-actions { padding-bottom: 120px; }

.barre-actions {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 480px;
  padding: 12px 20px 24px;
  border-top: 1px solid #E9E5DE;
  background: var(--fond);
}

.barre-actions .bouton-plein { flex: 2; margin-top: 0; }

.bouton-secondaire {
  flex: 1;
  height: 54px;
  border: 1px solid var(--bord);
  border-radius: 16px;
  background: #fff;
  color: var(--encre);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.bouton-contour-bleu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  margin-top: 12px;
  border: 1.5px solid var(--bleu);
  border-radius: 16px;
  background: #fff;
  color: var(--bleu);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.bouton-contour-bleu svg { width: 20px; height: 20px; }

.page-formulaire > .sous-titre + #recherche { margin-top: 18px; }

/* ===== Page Localisation ===== */
.titre-liste { margin: 22px 0 4px; font-size: 17px; font-weight: 800; }

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

.zone {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 4px;
  border-top: 1px solid #E9E5DE;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.zone input { position: absolute; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }

.zone svg { width: 20px; height: 20px; stroke: var(--gris); }
.zone span { flex: 1; }

.zone .coche { display: none; stroke: var(--bleu); stroke-width: 2.6; }

.zone input:checked ~ .coche { display: block; }
.zone input:checked ~ span { font-weight: 800; }
.zone input:checked + svg { stroke: var(--bleu); }
.zone:focus-within { outline: 3px solid var(--bleu); outline-offset: 2px; }

/* ===== Page Filtres ===== */
.groupe { margin: 16px 0 0; padding: 0; border: 0; }

.groupe legend { margin-bottom: 6px; padding: 0; font-size: 13px; font-weight: 700; }

.puces { display: flex; flex-wrap: wrap; gap: 8px; }

.puce { position: relative; }

.puce input { position: absolute; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }

.puce span {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--bord);
  border-radius: 20px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
}

.puce-carre span {
  justify-content: center;
  min-width: 52px;
  height: 44px;
  border-radius: 14px;
  font-size: 14px;
}

.puce input:checked + span {
  border-color: var(--bleu);
  background: var(--bleu);
  color: #fff;
  font-weight: 700;
}

.puce input:focus-visible + span { outline: 3px solid var(--bleu); outline-offset: 2px; }

.grille-prix { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Interrupteur "Seulement les produits disponibles" */
.interrupteur {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--bord);
  border-radius: 16px;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
}

.interrupteur input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.piste {
  flex: none;
  position: relative;
  width: 46px;
  height: 28px;
  border-radius: 14px;
  background: #C9C4BA;
}

.piste::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
}

.interrupteur input:checked ~ .piste { background: var(--bleu); }
.interrupteur input:checked ~ .piste::after { transform: translateX(18px); }
.interrupteur:focus-within { outline: 3px solid var(--bleu); outline-offset: 2px; }


/* ===== Les barres fixes passent toujours au-dessus du contenu ===== */
#barre-bas,
.barre-contact,
.barre-actions {
  z-index: 10;
}

/* ===== Page Devenir vendeur ===== */
.indice {
  margin: -2px 0 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--gris);
}

.case-conditions {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: #3A4560;
}

.case-conditions input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--bleu);
}

.case-conditions a { color: var(--bleu); font-weight: 700; }

/* ===== Espace vendeur ===== */
.entete-vendeur {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bonjour { margin: 0; font-size: 13px; font-weight: 600; color: var(--gris); }

.entete-vendeur h1 { margin: 2px 0 0; font-size: 24px; letter-spacing: -0.5px; }

.avatar-vendeur {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bleu);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
}

.bouton-blanc svg { width: 20px; height: 20px; margin-right: 8px; stroke-width: 2.6; }

.titre-etapes { margin: 26px 0 4px; font-size: 17px; font-weight: 800; }

.etapes { margin: 0; padding: 0; list-style: none; counter-reset: etape; }

.etapes li {
  counter-increment: etape;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid #E9E5DE;
  font-size: 14px;
  font-weight: 600;
}

.etapes li::before {
  content: counter(etape);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #E8EDFC;
  color: var(--bleu);
  font-size: 13px;
  font-weight: 800;
}

.lien-vendeur {
  display: block;
  margin-top: 8px;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--bleu);
}

/* ===== Page Ajouter un produit ===== */
.champ-formulaire textarea {
  width: 100%;
  height: 96px;
  padding: 12px 14px;
  border: 1px solid var(--bord);
  border-radius: 16px;
  background: #fff;
  color: var(--encre);
  font: inherit;
  font-size: 14px;
  resize: none;
}

/* Zone photos */
.zone-photo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 120px;
  margin-top: 18px;
  border: 2px dashed #B9C3E6;
  border-radius: 20px;
  background: #EEF2FD;
  color: var(--bleu);
  text-align: center;
  cursor: pointer;
}

.zone-photo input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.zone-photo svg { width: 28px; height: 28px; }
.zone-photo strong { font-size: 14px; }
.zone-photo small { font-size: 12px; color: #3A4560; }
.zone-photo:focus-within { outline: 3px solid var(--bleu); outline-offset: 2px; }

.champ-photo:has(input:user-invalid) .zone-photo { border-color: #C0262D; background: #FDF3F3; }
.champ-photo:has(input:user-invalid) .erreur { display: flex; }

/* Champ avec "gdes" à droite */
.champ-suffixe {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 14px;
  border: 1px solid var(--bord);
  border-radius: 16px;
  background: #fff;
}

.champ-suffixe input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
}

.champ-suffixe input:user-invalid { border: 0; }
.champ-suffixe:has(input:user-invalid) { border: 1.5px solid #C0262D; }
.champ-suffixe:has(input:user-invalid) + .erreur { display: flex; }
.champ-suffixe:focus-within { outline: 3px solid var(--bleu); outline-offset: 2px; }
.champ-suffixe span { font-size: 14px; font-weight: 700; color: var(--gris); }

/* Erreur d'un groupe de choix (catégorie) */
.groupe:has(input:user-invalid) .erreur { display: flex; }

/* Choix larges : type d'article, disponibilité */
.puces-segment .puce { flex: 1; }

.puces-segment .puce span {
  justify-content: center;
  height: 46px;
  padding: 0 8px;
  border-radius: 14px;
  text-align: center;
}

/* ===== Types d'article, tailles et pointures : cachés par défaut ===== */
.bloc-conditionnel { display: none; }

/* Mode et vêtements : types d'article */
.formulaire-produit:has(#cat-mode:checked) #types-mode { display: block; }

/* Artisanat et art : types d'article + dimensions */
.formulaire-produit:has(#cat-artisanat:checked) #types-art { display: block; }

/* Tailles : Mode + Vêtement, ou Artisanat + Vêtement */
.formulaire-produit:has(#cat-mode:checked):has(#type-vetement:checked) #bloc-vetement,
.formulaire-produit:has(#cat-artisanat:checked):has(#type-art-vetement:checked) #bloc-vetement { display: block; }

/* Pointures : Mode + Chaussures ou sandales, ou Artisanat + Sandales */
.formulaire-produit:has(#cat-mode:checked):has(#type-chaussures:checked) #bloc-chaussures,
.formulaire-produit:has(#cat-artisanat:checked):has(#type-art-sandales:checked) #bloc-chaussures { display: block; }

/* Choix sur deux colonnes (types d'art) */
.puces-grille { display: grid; grid-template-columns: 1fr 1fr; }

.puces-grille .puce span {
  justify-content: center;
  height: 46px;
  padding: 0 8px;
  border-radius: 14px;
  text-align: center;
}

/* ===== Page Mes produits ===== */
.titre-page {
  margin: 22px 0 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.6px;
}

.rond-bord { margin-top: 0; }

.liste-vendeur {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.produit-ligne {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid #EEEAE3;
  border-radius: 20px;
  background: #fff;
}

.miniature {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 14px;
  background: linear-gradient(135deg, #F6D9C8, #EFB89B);
}
.produit-ligne:nth-child(2) .miniature { background: linear-gradient(135deg, #D3E0F7, #A9C0EE); }
.produit-ligne:nth-child(3) .miniature { background: linear-gradient(135deg, #E5EBCB, #C6D49A); }
.produit-ligne:nth-child(4) .miniature { background: linear-gradient(135deg, #F3E2B8, #E8C77D); }

.produit-infos { flex: 1; min-width: 0; }

.produit-infos h2 { margin: 0; font-size: 14px; font-weight: 700; }

.produit-categorie { margin: 2px 0 0; font-size: 12px; color: var(--gris); }

.produit-prix {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--bleu);
}

.badge-indispo { background: #EEEAE3; color: var(--gris); }

.bouton-supprimer {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #FBE9EA;
  color: #C0262D;
}

/* Message de réussite */
.message-succes {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: #E3F5EA;
  color: #0B6B35;
  font-size: 14px;
  font-weight: 700;
}

.message-succes[hidden] { display: none; }
.message-succes svg { flex: none; width: 20px; height: 20px; stroke-width: 2.6; }

/* ===== Fenêtre de confirmation (sans JavaScript : elle s'ouvre avec #supprimer-1, etc.) ===== */
.fenetre { display: none; position: fixed; inset: 0; z-index: 20; }
.fenetre:target { display: block; }

.fenetre .fond {
  position: absolute;
  inset: 0;
  background: rgba(20, 33, 61, 0.55);
}

.fenetre-carte {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 50%;
  max-width: 440px;
  margin-inline: auto;
  transform: translateY(-50%);
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  text-align: center;
}

.fenetre-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border-radius: 50%;
  background: #FBE9EA;
  color: #C0262D;
}

.fenetre-icone svg { width: 26px; height: 26px; }

.fenetre-carte h2 {
  margin: 14px 0 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.fenetre-carte p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--gris);
}

.bouton-danger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  margin-top: 20px;
  border: 0;
  border-radius: 16px;
  background: #C0262D;
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.bouton-annuler {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin-top: 10px;
  border: 1px solid var(--bord);
  border-radius: 16px;
  background: #fff;
  color: var(--encre);
  font-size: 15px;
  font-weight: 700;
}

/* ===== Aide et contact ===== */
.carte-contact {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid #EEEAE3;
  border-radius: 24px;
  background: #fff;
}

.carte-contact h2 { margin: 0 0 12px; font-size: 15px; font-weight: 800; }

.carte-contact .bouton-whatsapp { height: 52px; }

.faq details { border-top: 1px solid #E9E5DE; }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 56px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  flex: none;
  font-size: 22px;
  font-weight: 600;
  color: var(--gris);
}

.faq details[open] summary::after { content: "−"; }

.faq details p {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: #3A4560;
}

/* ===== Pages de texte (À propos, conditions, confidentialité, règles) ===== */
.page-texte h2 { margin: 22px 0 6px; font-size: 17px; font-weight: 800; }

.page-texte p,
.page-texte li { font-size: 14px; line-height: 1.6; color: #3A4560; }

.page-texte p { margin: 6px 0 0; }

.page-texte ul { margin: 6px 0 0; padding-left: 20px; }

.page-texte li { margin-top: 4px; }

.page-texte .maj { margin-top: 10px; font-size: 13px; color: var(--gris); }

.page-texte a { color: var(--bleu); font-weight: 700; }

/* Liste de liens (dans la page À propos) */
.page-texte .liens-legaux { padding-left: 0; list-style: none; }
.page-texte .liens-legaux li { margin-top: 0; }
.page-texte .liens-legaux a { color: var(--encre); font-weight: 600; }



/* ===== Page Signaler ===== */
/* Le bouton rouge dans la barre fixe : même place que les autres boutons */
.barre-actions .bouton-danger { margin-top: 0; height: 54px; }

/* Le texte du bouton garde sa taille même quand la barre est cachée par le script */
.barre-actions[hidden] { display: none; }

/* Le logo de la boutique passe par-dessus le bandeau bleu */
.boutique-logo {
  position: relative;
  z-index: 1;
}

/* ===== Accueil connecté à Supabase ===== */
.carte-photo img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  object-fit: cover;
}

.message-liste {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #EEEAE3;
  border-radius: 14px;
  background: #fff;
  color: var(--gris);
  font-size: 14px;
  text-align: center;
}

.message-liste[hidden] { display: none; }

/* ===== Messages d'erreur du serveur (inscription, connexion) ===== */
.message-erreur {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: #FBE9EA;
  color: #B3202A;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.message-erreur[hidden] { display: none; }
.message-erreur svg { flex: none; width: 18px; height: 18px; }

.bouton-plein:disabled { opacity: 0.6; cursor: wait; }

/* ===== Salutation (accueil) et compte connecté ===== */
.salutation {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: #3A4560;
}

.salutation[hidden] { display: none; }

.bienvenue-avatar { font-size: 24px; font-weight: 800; }

.bouton-deconnexion {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 56px;
  padding: 0 4px;
  border: 0;
  border-top: 1px solid #E9E5DE;
  background: transparent;
  color: #C0262D;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* ===== Espace vendeur et devenir vendeur ===== */
.etat[hidden] { display: none; }

.nom-boutique {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--bleu);
}

.page-formulaire .carte-bienvenue { margin-top: 18px; }

/* ===== Aperçu des photos choisies ===== */
.apercu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.apercu img {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  object-fit: cover;
}

.page-formulaire .champ-photo .erreur { margin-top: 8px; }


/* ===== Administration ===== */
.badge-admin {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 10px;
  background: var(--corail);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  vertical-align: middle;
}

.stats-admin { display: flex; gap: 10px; margin-top: 16px; }

.stat { flex: 1; padding: 14px 12px; border-radius: 20px; }
.stat strong { display: block; font-size: 26px; font-weight: 800; }
.stat span { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; line-height: 1.3; }
.stat-att { background: #FFF4D6; color: #5A4300; }
.stat-sig { background: #FBE9EA; color: #B3202A; }
.stat-val { background: #E3F5EA; color: #0B6B35; }

.ligne-admin {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #EEEAE3;
  border-radius: 20px;
  background: #fff;
}

.avatar-admin {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bleu);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
}

.avatar-alerte { background: #C0262D; }

.ligne-texte { flex: 1; min-width: 0; }

.ligne-texte strong {
  display: block;
  overflow: hidden;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ligne-texte small { display: block; margin-top: 2px; font-size: 12px; color: var(--gris); }

.ligne-admin .chevron { flex: none; width: 18px; height: 18px; stroke: var(--gris); stroke-width: 2.2; }

.statut {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.statut-att { background: #FFF4D6; color: #5A4300; }
.statut-val { background: #E3F5EA; color: #0B6B35; }
.statut-ref { background: #FBE9EA; color: #B3202A; }
.statut-sus { background: #EEEAE3; color: #3A4560; }

.vide-admin {
  margin: 10px 0 0;
  padding: 14px;
  border: 1px solid #EEEAE3;
  border-radius: 14px;
  background: #fff;
  color: var(--gris);
  font-size: 14px;
  text-align: center;
}

.filtres-admin {
  display: flex;
  gap: 8px;
  margin: 12px 0 8px;
  padding-bottom: 4px;
  overflow-x: auto;
}

.ligne-badge { margin: 8px 0 0; }

/* Informations d'une boutique */
.carte-info {
  margin-top: 16px;
  padding: 4px 16px;
  border: 1px solid #EEEAE3;
  border-radius: 24px;
  background: #fff;
}

.info-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  border-top: 1px solid #E9E5DE;
  font-size: 14px;
}
.info-ligne:first-child { border-top: 0; }
.info-ligne > span:first-child { color: var(--gris); font-size: 13px; }
.info-ligne strong { text-align: right; }
.info-ligne[hidden] { display: none; }

.valeur-droite { display: flex; align-items: center; gap: 8px; }

.bouton-ecrire {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  background: #0B6B35;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.case-verif {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  border-top: 1px solid #E9E5DE;
  font-size: 14px;
  font-weight: 600;
}
.case-verif input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--bleu); }

/* Boutons d'action */
.actions-admin { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }

.actions-admin > * {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  margin-top: 0;
  border: 0;
  border-radius: 16px;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.bouton-vert { background: #0B6B35; color: #fff; }
.bouton-sombre-plein { background: var(--encre); color: #fff; }
.bouton-contour-vert { border: 1.5px solid #0B6B35; background: #fff; color: #0B6B35; }
.bouton-contour-rouge { border: 1.5px solid #C0262D; background: #fff; color: #C0262D; }
.bouton-texte { background: transparent; color: var(--gris); font-weight: 700; }
.actions-admin button:disabled { opacity: 0.6; cursor: wait; }

.bouton-prevenir { margin-top: 10px; }

#bloc-refus .bouton-danger { margin-top: 16px; }

/* Cartes de signalement */
.carte-signalement {
  margin-top: 12px;
  padding: 16px;
  border: 1px solid #EEEAE3;
  border-radius: 24px;
  background: #fff;
}

.carte-signalement h2 { margin: 0; font-size: 17px; font-weight: 800; }
.sig-boutique { margin: 2px 0 0; font-size: 13px; color: var(--gris); }

.sig-raison {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #FBE9EA;
  color: #B3202A;
  font-size: 14px;
  font-weight: 800;
}

.sig-details { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: #3A4560; }
.sig-date { margin: 8px 0 0; font-size: 12px; color: var(--gris); }






/* ===== Mes produits (connecté à Supabase) ===== */
.fenetre.ouverte { display: block; }

button.bouton-supprimer { border: 0; padding: 0; cursor: pointer; }

.miniature img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  object-fit: cover;
}

.badge-masque { background: #FBE9EA; color: #B3202A; }

button.bouton-annuler {
  width: 100%;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.bouton-danger:disabled { opacity: 0.6; cursor: wait; }

/* ===== Fiche produit et page boutique connectées ===== */
.zone-etat { padding: 28px 20px 0; }
.zone-etat .message-liste { margin-top: 18px; }
.zone-etat .carte-bienvenue { margin-top: 18px; }
.zone-etat[hidden] { display: none; }

.diapo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Les petits points sous la photo */
.points {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}

.point { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); }
.point.actif { width: 22px; border-radius: 4px; background: #fff; }

.fiche-texte { white-space: pre-line; }

.fiche-dimensions { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--gris); }

.fiche-infos .message-succes { margin: 0 0 12px; }
.boutique-infos .message-succes { margin: 12px 0 0; }

/* ===== Page Signaler connectée ===== */
.bouton-lien { margin-top: 16px; }

.etat[hidden] { display: none; }

/* ===== Cœurs (favoris) ===== */
.carte-favori.actif svg,
.rond.actif svg {
  fill: var(--corail);
  stroke: var(--corail);
}

.carte-favori:disabled,
.rond:disabled { opacity: 0.6; cursor: wait; }

/* Petit message qui apparaît en bas de l'écran ("Ajouté aux favoris.") */
#message-flottant {
  position: fixed;
  left: 50%;
  bottom: 100px;
  z-index: 30;
  max-width: calc(100% - 40px);
  margin: 0;
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--encre);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}

#message-flottant.visible { opacity: 1; transform: translate(-50%, 0); }

/* ===== Résumé des filtres actifs ===== */
.filtres-actifs {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #EEEAE3;
  border-radius: 16px;
  background: #fff;
}

.filtres-actifs[hidden] { display: none; }

.filtres-actifs p { margin: 0; font-size: 13px; line-height: 1.5; color: #3A4560; }

.filtres-liens { display: flex; gap: 16px; margin-top: 6px; }

.filtres-liens a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-size: 13px;
  font-weight: 700;
  color: var(--bleu);
}

/* ===== Localisation ===== */
.zone-actuelle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: 14px;
  background: #E3F5EA;
  color: #0B6B35;
  font-size: 14px;
}

.zone-actuelle[hidden] { display: none; }

.lien-retirer {
  min-height: 40px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: #B3202A;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.champ-zone { margin-top: 16px; }

/* Sur l'accueil : les produits de la zone choisie ont le nom de la boutique en vert */
.carte-proche .carte-boutique { color: #0B6B35; font-weight: 700; }