.vendeur-menu {
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding: var(--e16) var(--e12) var(--e20);
}

.vendeur-tete {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e4);
  padding-bottom: var(--e16);
  border-bottom: 1px solid var(--bordure);
}



.vendeur-badge {
  align-self: flex-start;
}

.vendeur-marque {
  display: flex;
  align-items: center;
  gap: var(--e12);
}

.vendeur-bandeau {
  margin-top: var(--e16);
}

.vendeur-liste {
  display: flex;
  flex-direction: column;
  margin-top: var(--e20);
  border-radius: var(--rayon-bloc);
  background: var(--fond-bloc);
  box-shadow: var(--ombre-bloc);

  


  overflow: hidden;
}




.vendeur-entree {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--e16);
  border: 0;
  background: none;
  color: var(--texte);
  font-family: inherit;
  font-size: var(--t-titre);
  text-align: left;
  text-decoration: none;
}



.vendeur-entree + .vendeur-entree,
.vendeur-deconnexion .vendeur-entree {
  border-top: 1px solid var(--bordure);
}

.vendeur-entree-danger {
  width: 100%;
  color: var(--alerte);
}



.vendeur-deconnexion {
  display: contents;
}

@media (hover: hover) {
  .vendeur-entree:hover {
    background: var(--survol-secondaire);
  }
}







.vendeur-inscription > * + *,
.vendeur-formulaire > * + * {
  margin-top: var(--e16);
}

.vendeur-inscription > section {
  margin-top: var(--e20);
}




.jauge {
  display: flex;
  flex-direction: column;
  gap: var(--e8);
}

.jauge-barres {
  display: flex;
  gap: var(--e4);
}

.jauge-barre {
  flex-grow: 1;
  height: 4px;
  border-radius: var(--rayon-pastille);
  background: var(--bordure);
}

.jauge-barre-faite {
  background: var(--accent);
}





.vendeur-promesse {
  background: var(--vert-fond);
  color: var(--vert);
}






.vendeur-rayon-case,
.vendeur-niveau-case,
.vendeur-teinte-case {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
}

.vendeur-rayons {
  min-inline-size: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e8);
  padding: 0;
  border: 0;
  margin: 0;
}

.vendeur-rayons legend,
.vendeur-niveaux legend {
  padding: 0;
  margin-bottom: var(--e8);
}





.nom-etat:empty {
  display: none;
}

.nom-etat-libre {
  color: var(--vert);
}

.vendeur-rayon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 44px;
  min-height: 36px;
  padding: 0 var(--e12);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-bloc);
  background: var(--fond-bloc);
  font-size: var(--t-texte);
}

.vendeur-rayon-case:checked + .vendeur-rayon {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--fond-bloc);
  font-weight: 500;
}




.vendeur-rayon-case:focus-visible + .vendeur-rayon,
.vendeur-niveau-case:focus-visible + .vendeur-niveau,
.vendeur-teinte-case:focus-visible + .vendeur-teinte {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.vendeur-niveaux {
  display: flex;
  flex-direction: column;
  gap: var(--e8);
  padding: 0;
  border: 0;
  margin: 0;
}

.vendeur-niveau {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--e12);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-bloc);
  background: var(--fond-bloc);
}




.vendeur-niveau-case:checked + .vendeur-niveau {
  padding: calc(var(--e12) - 1px);
  border: 2px solid var(--accent);
}

.vendeur-niveau-titre {
  font-size: var(--t-texte);
  font-weight: 500;
}





.vendeur-conditions {
  display: flex;
  align-items: flex-start;
  gap: var(--e10);
  font-size: var(--t-texte);
  line-height: var(--interligne);
}

.vendeur-conditions input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--accent);
}

.vendeur-delai {
  text-align: center;
}





.vendeur-etapes {
  margin-top: var(--e16);
  padding: var(--e16);
  border-radius: var(--rayon-bloc);
  background: var(--attention-fond);
  color: var(--attention);
}

.vendeur-etapes-titre {
  margin-bottom: var(--e8);
  font-size: var(--t-texte);
  font-weight: 500;
}

.vendeur-etapes-liste {
  margin-top: var(--e12);
  padding: 0;
  list-style: none;
}


.vendeur-etape {
  display: flex;
  align-items: center;
  gap: var(--e10);
  min-height: 44px;
  font-size: var(--t-texte);
}

.vendeur-etape-coche {
  flex: none;
  color: var(--vert);
}




.vendeur-etape-rond {
  flex: none;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: var(--rayon-pilule);
  opacity: .5;
}



.vendeur-etape-etat {
  margin-left: auto;
}

.vendeur-etape-reste {
  color: var(--accent);
  font-size: var(--t-mention);
  font-weight: 500;
}


.vendeur-etape-faite {
  opacity: .75;
}



.vendeur-catalogue {
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding: var(--e12) var(--e12) var(--e20);
}

.vendeur-refus,
.vendeur-jauge {
  margin-bottom: var(--e12);
}

.vendeur-vide {
  padding: var(--e20) var(--e12);
  color: var(--texte-secondaire);
  font-size: var(--t-texte);
  line-height: var(--interligne);
  text-align: center;
}


.vendeur-rayon-bloc {
  margin-bottom: var(--e8);
  border-radius: var(--rayon-bloc);
  background: var(--fond-bloc);
  box-shadow: var(--ombre-bloc);
  overflow: hidden;
}



.vendeur-rayon-titre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e10);
  min-height: 44px;
  padding: 0 var(--e16);
  font-size: var(--t-titre);
  font-weight: 500;
  cursor: pointer;
}






.vendeur-rayon-nom {
  display: flex;
  align-items: center;
  gap: var(--e10);
  min-width: 0;
}



.vendeur-rayon-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--rayon-pilule);
  background: var(--accent-fond);
  color: var(--accent);
}

.vendeur-rayon-titre::-webkit-details-marker {
  display: none;
}

.vendeur-rayon-titre::marker {
  content: '';
}

.vendeur-produits {
  padding: 0;
  margin: 0;
  list-style: none;
}

.vendeur-produit {
  display: flex;
  align-items: center;
  gap: var(--e10);
  min-height: 44px;
  padding: var(--e8) var(--e16);
  border-top: 1px solid var(--bordure);
  font-size: var(--t-texte);
}





.vendeur-produit-vignette {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--rayon-image);
  background: var(--fond-image);
  object-fit: cover;
}





.vendeur-produit-sans-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--e4);
  color: var(--texte-discret);
  font-size: var(--t-unite);
  line-height: 1.2;
  text-align: center;
}




.vendeur-produit-nom {
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.vendeur-produit-prix {
  flex: none;
}

.vendeur-produit-etat {
  flex: none;
}




.bouton-etat {
  min-width: 44px;
  height: 36px;
  padding: 0 var(--e12);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-bloc);
  background: var(--fond-bloc);
  color: var(--texte);
  font-family: inherit;
  font-size: var(--t-mention);
}

.bouton-etat-rupture {
  border-color: var(--attention);
  background: var(--attention-fond);
  color: var(--attention);
}




.pastille-suspendu {
  background: var(--alerte-fond);
  color: var(--alerte);
}




.bouton-etat-masque {
  border-style: dashed;
  background: var(--fond-boite);
  color: var(--texte-secondaire);
}



.vendeur-fait {
  margin-bottom: var(--e12);
}

.vendeur-selection {
  margin-bottom: var(--e12);
}

.vendeur-catalogue-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e12);
  margin-bottom: var(--e12);
}



.vendeur-brouillons {
  margin-bottom: var(--e12);
  border-radius: var(--rayon-bloc);
  background: var(--fond-bloc);
  box-shadow: var(--ombre-bloc);
  overflow: hidden;
}

.vendeur-brouillons-titre {
  padding: var(--e12) var(--e16) var(--e8);
}

.vendeur-brouillon-etat {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--e8);
  color: var(--texte-secondaire);
  font-size: var(--t-mention);
}

.vendeur-brouillon-point {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--alerte);
}

.vendeur-brouillon-jeter .vendeur-supprimer-lien {
  width: 100%;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}



.vendeur-prix {
  position: relative;
  max-width: 11rem;
}

.vendeur-prix .champ {
  padding-left: calc(var(--e16) + 1.6ch);
}

.vendeur-prix-devise {
  position: absolute;
  top: 50%;
  left: var(--e16);
  transform: translateY(-50%);
  color: var(--texte-secondaire);
  font-size: 16px;
  pointer-events: none;
}

.vendeur-espace {
  display: flex;
  flex-direction: column;
  gap: var(--e8);
  margin-bottom: var(--e16);
}

.vendeur-espace-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e12);
}

.vendeur-categorie-plus {
  display: inline-flex;
  align-items: center;
  gap: var(--e4);
  height: var(--cible-tactile);
  text-decoration: none;
}

.vendeur-selectionner {
  flex: none;
  height: var(--cible-tactile);
}

.vendeur-selection-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e12);
}

.vendeur-selection-tout {
  min-height: var(--cible-tactile);
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: var(--t-texte);
  font-weight: 500;
  cursor: pointer;
}





.selection-pilotee .vendeur-choix,
.selection-pilotee .vendeur-selection {
  display: none;
}

.selection-active .vendeur-choix {
  display: flex;
}



.selection-active .vendeur-produit {
  cursor: pointer;
}

.selection-active .vendeur-produit:has(.vendeur-choix input:checked) {
  background: var(--accent-fond);
}



.selection-active.selection-cochee .vendeur-selection {
  display: block;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  margin: 0;
  padding: var(--e8) max(var(--e12), calc((100% - var(--largeur-max)) / 2 + var(--e12))) calc(var(--e12) + env(safe-area-inset-bottom));
  background: var(--fond-bloc);
  box-shadow: 0 -2px 12px rgba(46, 52, 120, .14);
}

.selection-active.selection-cochee .vendeur-selection-boutons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: var(--e4);
}

.selection-active.selection-cochee .vendeur-selection .bouton-etat {
  padding-inline: var(--e4);
}


.selection-active.selection-cochee {
  padding-bottom: 128px;
}

.vendeur-selection-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e8);
  margin-top: var(--e8);
}



.vendeur-selection .bouton-etat {
  height: var(--cible-tactile);
}

.bouton-etat-supprimer {
  border-color: var(--alerte);
  color: var(--alerte);
}


.vendeur-choix {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--cible-tactile);
  height: var(--cible-tactile);
  margin-left: calc(var(--e12) * -1);
}

.vendeur-choix input {
  width: var(--icone);
  height: var(--icone);
  margin: 0;
  accent-color: var(--accent);
}

.vendeur-etats-aide {
  flex-basis: 100%;
}

.vendeur-selection-liste {
  margin: var(--e12) 0;
  padding-left: var(--e20);
  list-style: disc;
  font-size: var(--t-texte);
  line-height: var(--interligne);
}

@media (hover: hover) {
  .bouton-etat:hover {
    background: var(--survol-secondaire);
  }
}



.vendeur-photos {
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 0;
  margin: 0;
}

.vendeur-photos legend {
  padding: 0;
  margin-bottom: var(--e8);
}



.vendeur-photo {
  



  position: relative;
  padding: var(--e12) 0;
  border-bottom: var(--trait) solid var(--bordure);
}

.vendeur-photo:last-of-type {
  border-bottom: 0;
}

.vendeur-photo-ligne {
  display: flex;
  align-items: flex-start;
  gap: var(--e12);
}



.vendeur-photo-lien {
  flex: none;
  display: block;
  width: 72px;
  height: 72px;
  border-radius: var(--rayon-image);
  background: var(--fond-image);
  overflow: hidden;
}

.vendeur-photo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}




.vendeur-photo-corps {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e8);
}



.vendeur-photo-carte {
  padding: 2px var(--e8);
  border-radius: var(--rayon-pastille);
  background: var(--accent);
  color: var(--sur-aplat);
  font-size: var(--t-unite);
}



.vendeur-photo-attente {
  padding: 2px var(--e8);
  border-radius: var(--rayon-pastille);
  background: var(--attention-fond);
  color: var(--attention);
  font-size: var(--t-unite);
}

.vendeur-photo-non-enregistree .vendeur-photo-lien {
  outline: 2px dashed var(--attention);
  outline-offset: -2px;
}




.vendeur-photo-retrait {
  flex: none;
  width: 44px;
  height: 44px;
  margin: calc(var(--e8) * -1) calc(var(--e8) * -1) 0 0;
  border: 0;

  



  background: none;
  color: var(--texte-discret);
  font-family: inherit;
  font-size: 22px;
  line-height: 44px;
  text-align: center;
  cursor: pointer;
}




.vendeur-photos-champ {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
}



.vendeur-photos-ajout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  margin-top: var(--e12);
  border: 1px dashed var(--bordure);
  border-radius: var(--rayon-image);
  background: var(--fond-bloc);
  color: var(--texte-secondaire);
  font-size: var(--t-mention);
  text-align: center;
  cursor: pointer;
}

.vendeur-photos-champ:focus-visible + .vendeur-photos-ajout {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}



.vendeur-photos-etat {
  flex-basis: 100%;
}

.vendeur-photos-etat:empty {
  display: none;
}

.vendeur-photos-refus {
  color: var(--attention);
}

.vendeur-etats {
  min-inline-size: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e8);
  padding: 0;
  border: 0;
  margin: 0;
}

.vendeur-etats legend {
  padding: 0;
  margin-bottom: var(--e8);
}

.vendeur-description {
  min-height: calc(var(--cible-tactile) * 4);
}







.vendeur-produit-lien {
  display: flex;
  align-items: center;
  gap: var(--e10);
  flex-grow: 1;
  min-width: 0;
  min-height: 44px;
  color: var(--texte);
  text-decoration: none;
}

.vendeur-produit-ajout {
  padding-top: 0;
  padding-bottom: 0;
}

.vendeur-produit-ajout .vendeur-produit-lien {
  color: var(--accent);
}

.vendeur-ajouter {
  margin-top: var(--e16);
}

@media (hover: hover) {
  .vendeur-produit-lien:hover {
    text-decoration: underline;
  }
}






.vendeur-supprimer-lien {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: var(--e20);
  color: var(--alerte);
  font-size: var(--t-mention);
  text-decoration: underline;
}

.vendeur-supprimer-question {
  margin: 0 0 var(--e8);
  font-size: var(--t-titre-2);
  font-weight: 600;
}



.vendeur-supprimer-renoncer {
  margin-top: var(--e12);
  border: var(--trait) solid var(--bordure);
  background: var(--fond-bloc);
  color: var(--texte);
}





















.vendeur-photo-teintes {
  width: 100%;
  min-width: 0;
}

.vendeur-photo-ouvrir {
  display: flex;
  align-items: center;
  gap: var(--e8);
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}

.vendeur-photo-ouvrir::-webkit-details-marker {
  display: none;
}

.vendeur-photo-pastilles {
  display: flex;
  gap: var(--e4);
}




.vendeur-pastille {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: var(--trait) solid var(--texte-discret);
  border-radius: var(--rayon-pilule);
}

.vendeur-photo-mot,
.vendeur-photo-recadrer {
  color: var(--accent);
  font-size: var(--t-mention);
  font-weight: var(--poids-moyen);
}


.vendeur-photo-recadrer {
  min-height: 44px;
  padding: 0;
}




.vendeur-teintes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e8);
  min-width: 0;
  margin-top: var(--e8);
}




.vendeur-teinte {
  display: inline-flex;
  align-items: center;
  gap: var(--e8);
  height: 44px;
  padding: 0 var(--e12);
  border: var(--trait) solid var(--bordure);
  border-radius: var(--rayon-pastille);
  background: var(--fond-bloc);
  font-size: var(--t-mention);
  cursor: pointer;
}

.vendeur-teinte-rond {
  flex: none;
  display: inline-block;
  width: 14px;
  height: 14px;
  border: var(--trait) solid var(--texte-discret);
  border-radius: var(--rayon-pilule);
}




.vendeur-teinte-case:checked + .vendeur-teinte {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--sur-aplat);
  font-weight: var(--poids-moyen);
}







.vendeur-teinte-pleine {
  opacity: .45;
  cursor: default;
}






.vendeur-filtres {
  display: flex;
  gap: var(--e8);
  margin-bottom: var(--e16);
  padding-right: var(--e8);
  overflow-x: auto;
  scrollbar-width: none;
}

.vendeur-filtres::-webkit-scrollbar {
  display: none;
}

.vendeur-filtre {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--e4);
  min-height: 44px;
  padding: 0 var(--e12);
  border: var(--trait) solid var(--bordure);
  border-radius: var(--rayon-bloc);
  background: var(--fond-bloc);
  color: var(--texte);
  font-size: var(--t-texte);
  text-decoration: none;
  white-space: nowrap;
}




.vendeur-filtre-actif {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--fond-bloc);
  font-weight: var(--poids-moyen);
}

.vendeur-filtre-actif .secondaire {
  color: var(--fond-bloc);
}

.vendeur-moyenne {
  margin-bottom: var(--e16);
}

.vendeur-moyenne-note {
  margin: 0;
  font-size: var(--t-stat);
  font-weight: var(--poids-moyen);
}

.vendeur-moyenne-vide,
.vendeur-avis-mot {
  margin: 0;
}

.vendeur-avis-note {
  margin: 0 0 var(--e4);
  font-weight: var(--poids-moyen);
}

.vendeur-avis-mot {
  margin: var(--e8) 0;
}



.vendeur-jours {
  min-inline-size: 0;
  padding: 0;
  border: 0;
  margin: 0 0 var(--e16);
}

.vendeur-jours legend {
  padding: 0;
  margin-bottom: var(--e4);
}




.vendeur-jour-case {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
}

.vendeur-jour {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e8);
  margin-top: var(--e8);
}









.vendeur-jour-nom {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: var(--e8);
  min-height: 44px;
  font-size: var(--t-texte);

  

  color: var(--texte-secondaire);
}

.vendeur-jour-piste {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: none;
  box-sizing: border-box;
  width: 40px;
  height: 24px;
  padding: 2px;
  border-radius: 20px;
  background: var(--bordure);
}





.vendeur-jour-piste::after {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background: var(--sur-aplat);
  content: "";
  transition: transform var(--duree-mouvement) ease-out;
}

.vendeur-jour-case:checked + .vendeur-jour-nom {
  color: var(--texte);
  font-weight: var(--poids-moyen);
}

.vendeur-jour-case:checked + .vendeur-jour-nom .vendeur-jour-piste {
  background: var(--accent);
}


.vendeur-jour-case:checked + .vendeur-jour-nom .vendeur-jour-piste::after {
  transform: translateX(16px);
}




@media (prefers-reduced-motion: reduce) {
  .vendeur-jour-piste::after {
    transition: none;
  }
}

.vendeur-jour-case:focus-visible + .vendeur-jour-nom .vendeur-jour-piste {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.vendeur-jour-heures {
  display: flex;
  align-items: center;
  gap: var(--e4);

  

  margin-left: auto;
}




.vendeur-heure {
  width: auto;
  min-height: 44px;
  padding: 0 var(--e8);
}

.vendeur-jour-ferme {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-left: auto;
}

.vendeur-jour-tiret {
  color: var(--texte-secondaire);
}




.hors-vue {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
}






.vendeur-photo-champ,
.vendeur-photo-neuve-champ,
.vendeur-photo-retrait-case {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
}

.vendeur-photo-champ:focus-visible + .vendeur-photo-lien,
.vendeur-photo-neuve-champ:focus-visible + .vendeur-photo-lien,
.vendeur-photo-lien:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}







.vendeur-photo-marquee .vendeur-photo-lien,
.vendeur-photo-marquee .vendeur-photo-corps {
  opacity: 0.25;
}




.vendeur-photo-retrait-case:checked + .vendeur-photo-retrait {
  border-radius: var(--rayon-pilule);
  background: var(--accent);
  color: var(--sur-aplat);
}

.vendeur-photo-retrait-case:checked + .vendeur-photo-retrait .vendeur-photo-croix {
  visibility: hidden;
}

.vendeur-photo-retrait-case:checked + .vendeur-photo-retrait::after {
  position: absolute;
  content: "\21BA";
  color: var(--sur-aplat);
}

.vendeur-photo-retrait-case:focus-visible + .vendeur-photo-retrait {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}



.vendeur-tailles {
  padding: 0;
  border: 0;
  margin: 0 0 var(--e16);
  min-inline-size: 0;
}

.vendeur-tailles legend {
  padding: 0;
  margin-bottom: var(--e4);
}



.vendeur-groupe-case {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
}

.vendeur-groupes {
  display: flex;
  gap: var(--e4);
  padding: 2px;
  border-radius: var(--rayon-bloc);
  margin: var(--e8) 0;
  background: var(--fond-boite);
}

.vendeur-groupe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  min-height: 44px;
  border-radius: var(--rayon-bloc);
  font-size: var(--t-texte);
}

.vendeur-groupe-case:checked + .vendeur-groupe {
  background: var(--fond-bloc);
  font-weight: var(--poids-moyen);
}

.vendeur-groupe-case:focus-visible + .vendeur-groupe {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.vendeur-jetons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e8);
}

.vendeur-jeton-case {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
}




.vendeur-jeton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--e10);
  border: var(--trait) solid var(--bordure);
  border-radius: var(--rayon-bloc);
  background: var(--fond-bloc);
  font-size: var(--t-texte);
}

.vendeur-jeton-case:checked + .vendeur-jeton {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--sur-aplat);
  font-weight: var(--poids-moyen);
}

.vendeur-jeton-case:focus-visible + .vendeur-jeton {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.vendeur-tailles-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e8);
  padding-top: var(--e12);
  border-top: var(--trait) solid var(--bordure);
  margin-top: var(--e12);
}

.vendeur-tailles-compte {
  margin: 0;
}

.vendeur-tout {
  min-height: 44px;
  padding: 0 var(--e12);
  border: var(--trait) solid var(--bordure);
  border-radius: var(--rayon-bloc);
  background: var(--fond-bloc);
  color: var(--accent);
  font-family: inherit;
  font-size: var(--t-mention);
  font-weight: var(--poids-moyen);
}





.vendeur-sans-tailles,
.vendeur-sans-couleurs {
  margin-bottom: var(--e16);
}

.vendeur-sans-tailles p,
.vendeur-sans-couleurs p {
  margin: 0;
}



.vendeur-reglage {
  margin-bottom: var(--e16);
  padding: var(--e16);
  border-radius: var(--rayon-bloc);
  background: var(--fond-bloc);
}

.vendeur-reglage .libelle {
  margin: 0 0 var(--e8);
}

.vendeur-reglage .mention + .mention {
  margin-top: var(--e8);
}



.vendeur-reglage p + .formulaire-corps,
.vendeur-logo-apercu + .formulaire-corps {
  margin-top: var(--e16);
}





.cadre {
  position: relative;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  border-radius: var(--rayon-bloc);
  background: var(--fond-image);
  cursor: grab;
}

.cadre-image {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  transform-origin: 0 0;
  pointer-events: none;
  -webkit-touch-callout: none;
}



.cadrage {
  width: min(100% - 2 * var(--e16), 480px);
  max-height: calc(100% - 2 * var(--e16));
  padding: var(--e16);
  border: 0;
  border-radius: var(--rayon-bloc);
  background: var(--fond-bloc);
  color: var(--texte);
}

.cadrage .libelle {
  margin: 0 0 var(--e4);
}



.cadrage-cadre {
  width: min(100%, 45vh * 3 / 4);
  margin: 0 auto;
  aspect-ratio: 3 / 4;
}

.cadrage-cadre.cadrage-carre {
  width: min(100%, 45vh);
  aspect-ratio: 1;
}

.cadrage-aide {
  margin: var(--e8) 0;
}



.cadrage-avertissement {
  margin: var(--e8) 0 0;
  padding: var(--e10) var(--e12);
  border-radius: var(--rayon-bloc);
  background: var(--attention-fond);
  color: var(--attention);
  font-size: var(--t-mention);
  line-height: var(--interligne);
}

.cadrage-formes {
  display: flex;
  gap: var(--e4);
  margin: var(--e8) 0;
  padding: 2px;
  border: 0;
  border-radius: var(--rayon-bloc);
  background: var(--fond-boite);
}

.cadrage-forme-case {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
}

.cadrage-forme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  min-height: 44px;
  border-radius: var(--rayon-bloc);
  font-size: var(--t-texte);
}

.cadrage-forme-case:checked + .cadrage-forme {
  background: var(--fond-bloc);
  font-weight: var(--poids-moyen);
}

.cadrage-forme-case:focus-visible + .cadrage-forme {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.cadrage-zoom-ligne {
  display: flex;
  align-items: center;
  gap: var(--e12);
}

.cadrage-zoom-ligne .libelle {
  margin: 0;
}

.cadrage-zoom {
  flex-grow: 1;
  min-height: 44px;
  margin: 0;
}





.cadrage-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: var(--e8);
  margin: var(--e12) calc(var(--e16) * -1) calc(var(--e16) * -1);
  padding: var(--e12) var(--e16) var(--e16);
  background: var(--fond-bloc);
}



.vendeur-logo-champ,
.vendeur-piece-champ {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
}

.vendeur-logo-champ:focus-visible + .bouton,
.vendeur-piece-champ:focus-visible + .bouton {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.vendeur-logo-apercu {
  display: block;
  margin: var(--e8) 0;
}

.vendeur-logo-retrait {
  display: flex;
  align-items: center;
  gap: var(--e8);
  min-height: 44px;
  font-size: var(--t-texte);
}



.vendeur-pieces,
.vendeur-piece,
.vendeur-piece-envoi {
  display: flex;
  flex-direction: column;
  gap: var(--e8);
}

.vendeur-piece + .vendeur-piece {
  margin-top: var(--e8);
}

.vendeur-piece-etat {
  font-size: var(--t-texte);
}

.vendeur-piece-nom {
  font-weight: var(--poids-moyen);
}



.vendeur-piece-apercu {
  align-self: flex-start;
  max-width: 100%;
  max-height: 240px;
  border-radius: var(--rayon-bloc);
}

.vendeur-piece-progression {
  width: 100%;
  accent-color: var(--accent);
}

.vendeur-piece-lien {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 44px;
}

.vendeur-piece-vignette {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--rayon-bloc);
}






.bouton-info {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--texte);
  cursor: pointer;
}

.bouton-info::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--cible-tactile);
  height: var(--cible-tactile);
  transform: translate(-50%, -50%);
}

.bouton-info svg {
  width: 24px;
  height: 24px;
}



.jauge-place {
  height: 8px;
  overflow: hidden;
  border-radius: var(--rayon-pilule);
  background: var(--fond-image);
}

.jauge-place span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}






.fenetre-riche {
  white-space: normal;
}

.info-titre {
  margin-bottom: var(--e12);
  font-size: var(--t-titre);
  font-weight: var(--poids-moyen);
}

.info-liste {
  display: flex;
  flex-direction: column;
  gap: var(--e8);
  margin: 0;
}

.info-liste dt,
.info-sous-titre {
  font-weight: var(--poids-moyen);
}

.info-liste dd {
  margin: 0;
  color: var(--texte-secondaire);
}

.info-sous-titre {
  margin-top: var(--e16);
}

.info-texte {
  color: var(--texte-secondaire);
}

.info-puces {
  margin: var(--e4) 0 0;
  padding-left: var(--e20);
  color: var(--texte-secondaire);
  list-style: disc;
}