.grille {
  max-width: var(--largeur-max);
  margin-inline: auto;
}






.haut {
  position: sticky;
  top: 0;
  z-index: 1;
  



  background: var(--fond-barre);

  


  box-shadow: var(--ombre-barre);
}
















.haut-cache {
  transform: translateY(-100%);
  transition: transform var(--duree-mouvement) ease-out;
}



.haut-cache .barre {
  opacity: 0;
}

.haut-cache .categories {
  opacity: 0;
}






.barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e10) 0;
  padding: var(--e10) var(--e16);
  





  overflow-x: clip;
  overflow-y: visible;
  background: var(--fond-barre);
  border-bottom: var(--trait) solid var(--bordure);

  

  transition: opacity var(--duree-mouvement) ease-out;
}

.logo {
  width: auto;
  height: var(--logo-barre);
}


.barre-logo {
  gap: var(--e8);
  margin-right: auto;
}


.barre-nom {
  width: auto;
  height: var(--nom-barre);
  aspect-ratio: 1598 / 250;
  fill: currentColor;
}




.barre-icone {
  width: var(--cible-tactile);
}

.barre-icone .icone {
  width: var(--icone-barre);
  height: var(--icone-barre);
}


@media (max-width: 359px) {
  .barre-nom {
    height: calc(var(--nom-barre) - var(--e4));
  }
}
























.vol {
  position: fixed;
  z-index: 5;
  top: 0;
  left: 0;
  


  border-radius: var(--rayon-bloc);
  object-fit: cover;
  

  pointer-events: none;
  transition: transform var(--duree-mouvement) ease-in,
              opacity var(--duree-mouvement) ease-in;
}



.pastille-bat {
  animation: pastille-bat var(--duree-mouvement) ease-out;
}



@keyframes pastille-bat {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}







.barre-logo,
.barre-icone,
.barre-retour-lien,
.barre-partage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--texte);
  text-decoration: none;
}

.barre-logo::after,
.barre-icone::after,
.barre-retour-lien::after,
.barre-partage::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--cible-tactile);
  height: var(--cible-tactile);
  transform: translate(-50%, -50%);
}


.barre-logo::after {
  width: 100%;
}







.barre-recherche {
  display: none;
  order: 1;
  flex: 1 1 100%;
  align-items: center;
  gap: var(--e8);
  


  min-width: 0;
  position: relative;
  height: var(--hauteur-controle);
  padding: 0 var(--e12);
  
  border: 1.5px solid var(--bord-champ);
  border-radius: var(--rayon-pilule);
  background: var(--fond-champ-barre);
  color: var(--texte-discret);
}




.barre-recherche::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: var(--rayon-pilule);
  box-shadow: 0 0 0 4px var(--halo-champ);
  opacity: 0;
  transform: scaleX(.96);
  pointer-events: none;
  transition: opacity var(--duree-mouvement) ease-out,
              transform var(--duree-mouvement) ease-out;
}

.barre-recherche:focus-within {
  border-color: var(--accent);
  color: var(--texte);
}

.barre-recherche:focus-within::after {
  opacity: 1;
  transform: none;
}

.barre-recherche:target,
.barre-recherche-ouverte {
  display: flex;
}


.loupe-fermer,
.barre-loupe[aria-expanded="true"] .loupe-ouvrir {
  display: none;
}

.barre-loupe[aria-expanded="true"] .loupe-fermer {
  display: block;
}

.barre-inscrire {
  display: none;
}


@media (min-width: 768px) {
  .barre {
    flex-wrap: nowrap;
  }

  

  .barre-recherche {
    display: flex;
    order: 0;
    flex: 1 1 auto;
    max-width: var(--largeur-recherche);
    margin: 0 auto;
  }

  .barre-loupe {
    display: none;
  }

  
  .barre-inscrire {
    display: flex;
    flex: none;
    width: auto;
    margin: 0 var(--e8);
    padding: 0 var(--e16);
  }
}



.barre-champ {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  color: var(--texte);
  font-size: var(--t-titre-2);
}




.barre-champ:focus {
  outline: none;
}

.barre-champ::placeholder {
  color: var(--texte-discret);
}



.barre-champ::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}







.pastille-panier {
  position: absolute;
  
  top: calc(-1 * var(--e4));
  left: 50%;
  min-width: var(--e16);
  padding: 0 var(--e4);
  border-radius: var(--rayon-pastille);
  background: var(--accent);
  color: var(--sur-aplat);
  font-size: var(--t-mention);
  line-height: var(--e16);
  text-align: center;
}






.categories {
  display: flex;
  gap: var(--e8);
  padding: 0 var(--e12);
  overflow-x: auto;
  

  scrollbar-width: none;
  border-bottom: var(--trait) solid var(--bordure);

  

  transition: opacity var(--duree-mouvement) ease-out;
}

.categories::-webkit-scrollbar {
  display: none;
}





.categories > :first-child {
  margin-inline-start: auto;
}

.categories > :last-child {
  margin-inline-end: auto;
}



.categorie {
  display: flex;
  align-items: center;
  justify-content: center;
  

  flex: none;
  min-width: var(--cible-tactile);
  min-height: var(--cible-tactile);
  padding: 0;
  border: none;
  border-radius: var(--rayon-pilule);
  background: none;
  color: var(--texte-secondaire);
  font-size: var(--t-titre-2);
  text-decoration: none;
  white-space: nowrap;
}

.categorie-pastille {
  display: flex;
  align-items: center;
  gap: 6px;
  height: calc(var(--cible-tactile) - var(--e12));
  padding: 0 var(--e12);
  border-radius: var(--rayon-pilule);
  background: var(--fond-pastille);
}


.categorie-pastille .icone {
  margin-left: calc(-1 * var(--e4));
}

.categorie-active {
  color: var(--sur-aplat);
  font-weight: var(--poids-moyen);
}

.categorie-active .categorie-pastille {
  background: var(--accent);
}










.grille {
  display: flex;
  gap: var(--e4);
  align-items: flex-start;
  padding: var(--e8);
}


.colonne {
  display: flex;
  flex-direction: column;
  


  gap: var(--e8);
  

  flex: 1;
  min-width: 0;
}

.feed-vide {
  padding: var(--e20) var(--e16);
  text-align: center;
}


.feed-vide-lien {
  width: auto;
  max-width: max-content;
  margin: 0 auto;
  padding: 0 var(--e20);
}




.recherche-entete {
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding: var(--e12) var(--e8) 0;
  font-weight: var(--poids-normal);
}

.recherche-aucun {
  display: flex;
  flex-direction: column;
  gap: var(--e12);
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding: var(--e20) var(--e16);
  text-align: center;
}

.recherche-aucun h1 {
  font-size: var(--t-texte);
  font-weight: var(--poids-moyen);
}

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



.feed-suivant {
  
  margin: 0 auto var(--e16);
  width: auto;
  padding: 0 var(--e20);
}





















.carte {
  position: relative;
  z-index: 0;
  overflow: hidden;
  border-radius: var(--rayon-bloc);
  background: var(--fond-carte);
  color: var(--texte);
  box-shadow: var(--ombre-carte);
  

  transition: transform var(--duree-mouvement) ease-out;
}



















.carte:has(.carte-nom:active) {
  transform: scale(.97);
  box-shadow: var(--ombre-carte-appui);
}



.carte-rupture .carte-media {
  opacity: .55;
}


.carte-media {
  position: relative;
  display: block;
}

.carte-image {
  width: 100%;
  


  height: auto;
  

  background: var(--fond-image);
  
  object-fit: cover;
}










.carte-couleurs {
  position: absolute;
  right: var(--e8);
  bottom: var(--e8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e4);
  padding: var(--e4);
  border-radius: var(--rayon-pastille);
  background: var(--fond-etiquette);
}






.pastille-couleur {
  width: var(--e12);
  height: var(--e12);
  border: var(--trait) solid var(--texte-discret);
  border-radius: 50%;
  background: var(--fond-image);
}


.carte-couleurs-compte {
  font-size: var(--t-mention-carte);
  font-weight: var(--poids-moyen);
  line-height: 1;
  color: var(--texte);
}














.teinte-noir        { background: #17171A; }
.teinte-blanc       { background: #F2F0EB; }
.teinte-creme       { background: #E8DCC4; }
.teinte-beige       { background: #B5A991; }
.teinte-gris        { background: #8E8880; }
.teinte-marron      { background: #5A3A24; }
.teinte-bordeaux    { background: #5C1F27; }
.teinte-rouge       { background: #8E2420; }
.teinte-orange      { background: #C25A1C; }
.teinte-jaune       { background: #D6A62B; }
.teinte-moutarde    { background: #A8821B; }
.teinte-vert        { background: #244F30; }
.teinte-kaki        { background: #6B6A3C; }
.teinte-turquoise   { background: #1C7A7A; }
.teinte-bleu        { background: #1B3A6B; }
.teinte-violet      { background: #5A3A7A; }
.teinte-rose        { background: #C4707F; }
.teinte-dore        { background: #B08D3F; }
.teinte-argente     { background: #A8ABAE; }
.teinte-multicolore { background: linear-gradient(135deg,#8E2420 0 25%,#D6A62B 25% 50%,#244F30 50% 75%,#1B3A6B 75%); }










.carte-nom {
  flex: 1;
  min-width: 0;
  color: inherit;
  font-size: var(--t-mention-carte);
  line-height: var(--interligne);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none;
}



.carte-nom::before {
  content: "";
  position: absolute;
  inset: 0;
}















.carte .boite,
.carte .carte-prix,
.carte .carte-boutique {
  position: relative;
  z-index: 1;
}



.carte-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  

  padding: var(--e4) var(--e10);
  min-width: 0;
  






  min-height: calc(var(--e12) + var(--e10) + var(--e8));
}






.carte-ligne-prix {
  padding-top: 0;
  padding-bottom: 0;
  min-height: 0;
}









.carte-ligne:last-child {
  padding-bottom: var(--e12);
  


  min-height: calc(var(--e4) + var(--e12) + var(--e10) + var(--e12));
}





.carte-prix {
  padding: 0;
  font-size: var(--t-prix-carte);
  font-weight: var(--poids-moyen);
  color: var(--texte);
  text-align: left;
  white-space: nowrap;
}






.carte-prix-symbole {
  font-size: var(--t-unite);
  font-weight: var(--poids-normal);
  color: var(--texte-secondaire);
}

.carte-boutique {
  overflow: hidden;
  min-width: 0;
  font-size: var(--t-mention-carte);
  color: var(--texte-secondaire);
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
}









.boite {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(var(--e10) + var(--e12));
  height: calc(var(--e10) + var(--e12));
  padding: 0;
  border: var(--trait) solid var(--texte-discret);
  border-radius: var(--rayon-bloc);
  background: var(--fond-boite);
  color: var(--texte);
}


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







.boite-porte {
  text-decoration: none;
}




.boite-panier .icone {
  color: var(--texte);
}




.boite-coeur .icone {
  color: var(--texte-discret);
}








.boite-panier[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
}

.boite-panier[aria-pressed="true"] .icone {
  color: var(--sur-aplat);
}



.boite-coeur[aria-pressed="true"] .icone {
  color: var(--alerte);
}







@media (hover: hover) {

  .boite:hover {
    background: var(--survol-boite);
  }

  




  .boite-panier[aria-pressed="true"]:hover {
    border-color: var(--survol-principal);
    background: var(--survol-principal);
  }
}





.bandeau {
  margin: var(--e12);
  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);
}







.bandeau-panier {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e4) var(--e8);
}




.bandeau-lien {
  color: inherit;
  font-weight: var(--poids-moyen);
}








.barre-retour {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: var(--e8);
  height: calc(var(--hauteur-controle) + var(--e4));
  padding: 0 var(--e8);
  background: var(--fond-barre);
  border-bottom: var(--trait) solid var(--bordure);
  

  box-shadow: var(--ombre-barre);
  font-size: var(--t-titre-2);
  font-weight: var(--poids-moyen);
}







.barre-retour-titre {
  overflow: hidden;
  min-width: 0;
  font-size: var(--t-titre);
  white-space: nowrap;
  text-overflow: ellipsis;
}




.barre-partage {
  width: 40px;
  height: 40px;
  margin-left: auto;
}






.galerie {
  position: relative;
}




.galerie-piste {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.galerie-piste::-webkit-scrollbar {
  height: 0;
}





.galerie-photo {
  width: 100%;
  


  height: auto;
  aspect-ratio: 3 / 4;
  scroll-snap-align: center;
  background: var(--fond-image);
  object-fit: cover;
}



.galerie-lien {
  flex: none;
  width: 100%;
}



.galerie-lien:focus-visible {
  outline-offset: calc(var(--trait) * -2);
}





.galerie-compte {
  position: absolute;
  right: var(--e8);
  bottom: var(--e8);
  padding: 0 var(--e8);
  border-radius: var(--rayon-pastille);
  background: var(--fond-etiquette);
  color: var(--texte);
  font-size: var(--t-mention);
  line-height: var(--e20);
}





.fiche {
  max-width: var(--largeur-max);
  margin-inline: auto;
}






.fiche-corps {
  margin: var(--e12) var(--e12) 0;
  padding: var(--e12);
  border-radius: var(--rayon-bloc);
  background: var(--fond-bloc);
  box-shadow: var(--ombre-bloc);
}



.fiche-nom {
  margin: 0 0 var(--e4);
  font-size: var(--t-titre);
  font-weight: var(--poids-moyen);
  line-height: var(--interligne);
}





.fiche-prix {
  margin: 0 0 var(--e10);
  font-size: var(--t-prix);
}





.fiche-etat,
.fiche-badge {
  display: flex;
  width: fit-content;
  margin-bottom: var(--e10);
}




.fiche-boutique {
  display: flex;
  align-items: center;
  gap: var(--e8);
  margin-bottom: var(--e4);
  color: var(--texte);
  font-size: var(--t-titre);
  font-weight: var(--poids-moyen);
  text-decoration: none;
}



.fiche-lieu {
  display: flex;
  align-items: center;
  gap: var(--e4);
  margin-bottom: var(--e12);
  color: var(--texte-secondaire);
  font-size: var(--t-mention);
}

.fiche-lieu .icone {
  width: var(--e12);
  height: var(--e12);
}








.libelle-groupe {
  margin: var(--e16) 0 var(--e8);
  color: var(--texte-secondaire);
  font-size: var(--t-mention);
}

.libelle-groupe b {
  color: var(--texte);
  font-weight: var(--poids-moyen);
}



.vignettes {
  display: flex;
  gap: var(--e8);
  overflow-x: auto;
  padding-bottom: var(--e4);
  scrollbar-width: none;
}

.vignettes::-webkit-scrollbar {
  height: 0;
}








.vignette {
  position: relative;
  flex: none;
  display: block;
  width: var(--vignette);
  height: var(--vignette);
  overflow: hidden;
  border: calc(var(--trait) * 2) solid transparent;
  border-radius: var(--rayon-image);
  background: var(--fond-image);
}

.vignette-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}




.vignette[aria-current] {
  border-color: var(--texte);
}



.vignette-epuisee {
  opacity: .55;
}

.vignette-epuisee::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right,
    transparent calc(50% - 1px), var(--texte) calc(50% - 1px),
    var(--texte) calc(50% + 1px), transparent calc(50% + 1px));
}




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









.taille {
  min-width: var(--cible-tactile);
  height: var(--hauteur-controle);
  padding: 0 var(--e10);
  border: var(--trait) solid var(--texte-discret);
  border-radius: var(--rayon-bloc);
  background: var(--fond-bloc);
  color: var(--texte);
  font-family: inherit;
  font-size: var(--t-texte);
  cursor: pointer;
}



.taille[aria-pressed="true"] {
  border: calc(var(--trait) * 2) solid var(--texte);
}





.taille[disabled] {
  border-color: transparent;
  background: var(--fond-page);
  color: var(--texte-discret);
  cursor: default;
}




.guide {
  margin-top: var(--e12);
}

.guide summary {
  color: var(--accent);
  font-size: var(--t-texte);
  list-style: none;
  cursor: pointer;
}

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



.guide table {
  width: 100%;
  margin-top: var(--e8);
  border-collapse: collapse;
  font-size: var(--t-mention);
}

.guide th,
.guide td {
  padding: var(--e4) 0;
  border-bottom: var(--trait) solid var(--bordure);
  color: var(--texte-secondaire);
  font-weight: var(--poids-normal);
  text-align: left;
}


.guide tr[aria-current] td {
  color: var(--texte);
  font-weight: var(--poids-moyen);
}



.fiche-description {
  margin-top: var(--e16);
  color: var(--texte-secondaire);
  font-size: var(--t-texte);
  line-height: var(--interligne);
}



.fiche-proprio {
  margin-top: var(--e16);
  color: var(--texte-secondaire);
  font-size: var(--t-texte);
  line-height: var(--cible-tactile);
  text-align: center;
}

.fiche-proprio a {
  font-weight: var(--poids-moyen);
}




.fiche-ajouter,
.fiche-contact,
.fiche-sortie {
  width: auto;
}








.fiche-ajouter {
  margin: var(--e16) var(--e12) 0;
}


.fiche-contact {
  margin: var(--e8) var(--e12) 0;
}








.contact-envoi {
  display: contents;
}


.fiche-mention {
  margin: var(--e8) var(--e12) 0;
  text-align: center;
}


.contact-trop {
  margin: var(--e8) 0 0;
  color: var(--alerte);
}

.fiche .contact-trop {
  margin: var(--e8) var(--e12) 0;
}



.fiche-sortie {
  margin: var(--e12) var(--e12) var(--e20);
}






.vitrine {
  max-width: var(--largeur-max);
  margin-inline: auto;
}








.vitrine-entete {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--e20) var(--e12) 0;
  text-align: center;
}

.vitrine-nom {
  margin: 0 0 var(--e8);
  font-size: 20px;
}



.vitrine-badge {
  display: flex;
  width: fit-content;
  margin: 0 auto var(--e8);
}



.logo-boutique {
  flex-shrink: 0;
  border: var(--trait) solid var(--bordure);
  border-radius: var(--rayon-bloc);
}

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

.vitrine-marque-texte {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}




.vitrine-logo {
  display: block;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}

.vitrine-logo .logo-boutique {
  display: block;
  border: 2px solid var(--fond-bloc);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--bordure), var(--ombre-bloc);
  object-fit: cover;
}



.vitrine-logo-grand {
  width: auto;
  padding: var(--e16);
}

.vitrine-logo-grand img {
  display: block;
  margin: 0 auto var(--e16);
  border-radius: var(--rayon-bloc);
}



.vitrine-meta {
  margin: 0 0 var(--e12);
}


.vitrine-description {
  max-width: 34em;
  margin-bottom: var(--e12);
  font-size: var(--t-texte);
  line-height: var(--interligne);
}



.vitrine-infos-bloc {
  width: 100%;
  max-width: 420px;
  margin-bottom: var(--e16);
  padding: var(--e12);
  border-radius: var(--rayon-bloc);
  background: var(--fond-bloc);
  box-shadow: var(--ombre-bloc);
  text-align: left;
}


.vitrine-lieu {
  margin-bottom: 0;
}

.vitrine-lieu + .vitrine-infos {
  margin-top: var(--e8);
}








.vitrine-infos {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--e4) var(--e12);
  margin: 0;
  font-size: var(--t-mention);
}

.vitrine-infos dt {
  color: var(--texte-secondaire);
}

.vitrine-infos dd {
  


  margin: 0;
  color: var(--texte);
}

.vitrine-horaires {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--e4) var(--e8);
}



.vitrine-partage {
  width: 100%;
  max-width: 420px;
  margin-bottom: var(--e16);
  padding: 0 var(--e20);
}




.vitrine-ruptures {
  margin: var(--e16) 0 0;
  padding-inline: var(--e8);
}


.vitrine-vide {
  padding: var(--e20) var(--e16);
  text-align: center;
}





.ecran-sobre {
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding: var(--e20) var(--e12);
  text-align: center;
}

.ferme-nom {
  margin-bottom: var(--e4);
}

.ferme-lieu {
  margin-bottom: var(--e16);
}





.ferme-explication {
  padding: var(--e12);
  border-radius: var(--rayon-bloc);
  background: var(--fond-bloc);
  box-shadow: var(--ombre-bloc);
  color: var(--texte-secondaire);
  font-size: var(--t-texte);
  line-height: var(--interligne);
  text-align: left;
}



.ferme-sortie {
  width: fit-content;
  margin: var(--e16) auto 0;
}








.panier,
.favoris {
  max-width: var(--largeur-max);
  margin-inline: auto;
  

  padding-bottom: var(--e20);
}





.panier-vendeur {
  margin: var(--e12);
  padding: var(--e12);
  border-radius: var(--rayon-bloc);
  background: var(--fond-bloc);
  box-shadow: var(--ombre-bloc);
}


.panier-boutique {
  display: block;
  margin-bottom: var(--e10);
  color: var(--texte);
  font-size: var(--t-titre);
  font-weight: var(--poids-moyen);
  text-decoration: none;
}






.panier-inactive {
  margin: calc(var(--e10) * -1) 0 var(--e10);
  color: var(--texte-secondaire);
  font-size: var(--t-mention);
  line-height: var(--interligne);
}



.panier-lignes {
  margin: 0;
  padding: 0;
  list-style: none;
}





















.panier-ligne {
  padding: var(--e10) 0;
  border-bottom: var(--trait) solid var(--bordure);
  transition: transform var(--duree-mouvement) ease-in,
              opacity var(--duree-mouvement) ease-in;
}

.panier-ligne-sort {
  transform: translateX(-25%);
  opacity: 0;
}

.panier-ligne:last-child {
  border-bottom: 0;
}



.panier-lien {
  display: flex;
  align-items: center;
  gap: var(--e10);
  color: var(--texte);
  text-decoration: none;
}






.panier-vignette {
  flex: none;
  display: block;
  width: var(--vignette);
  aspect-ratio: 3 / 4;
  border-radius: var(--rayon-image);
  background: var(--fond-image);
  overflow: hidden;
}



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




.panier-nom {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: var(--t-texte);
  line-height: var(--interligne);
}



.panier-variantes {
  margin: var(--e4) 0 0;
  padding-left: calc(var(--vignette) + var(--e10));
  color: var(--texte-secondaire);
  font-size: var(--t-mention);
  line-height: var(--interligne);
}


.panier-etat {
  display: flex;
  width: fit-content;
  margin: var(--e4) 0 0 calc(var(--vignette) + var(--e10));
}



.panier-ligne-bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e8);
  margin-top: var(--e8);
  padding-left: calc(var(--vignette) + var(--e10));
}







.panier-retirer,
.panier-retirer-selection {
  position: relative;
  flex: none;
  padding: 0;
  color: var(--texte-secondaire);
  font-size: var(--t-mention);
  text-decoration: underline;
}

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





.panier-selection {
  display: flex;
  justify-content: flex-end;
  margin: var(--e12) var(--e12) 0;
}



.panier-selectionner {
  height: var(--cible-tactile);
  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-mention);
}

.panier-choix,
.panier-selection-barre {
  display: none;
}

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



.panier-selection-active .panier-ligne {
  cursor: pointer;
}

.panier-selection-active .panier-ligne:has(.panier-case:checked) {
  background: var(--accent-fond);
}



.panier-selection-active.panier-selection-cochee .panier-selection-barre {
  display: block;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  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);
}

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

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

.panier-selection-tout {
  min-height: var(--cible-tactile);
  padding: 0;
  color: var(--accent);
  font-size: var(--t-texte);
  font-weight: 500;
}



.panier-selection-barre .panier-retirer-selection {
  width: 100%;
  margin-top: var(--e4);
  border: var(--trait) solid var(--alerte);
  color: var(--alerte);
  font-size: var(--t-texte);
  text-decoration: none;
}

.panier-selection-barre .panier-retirer-selection::after {
  content: none;
}

.panier-ligne:has(.panier-choix) {
  display: flex;
  align-items: flex-start;
  gap: var(--e8);
}

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


.panier-choix {
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: var(--cible-tactile);
  min-height: var(--cible-tactile);
  margin: calc((var(--vignette) * 4 / 3 - var(--cible-tactile)) / 2) 0 0 calc(var(--e12) * -1);
}

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



.panier-badge {
  display: flex;
  width: fit-content;
  margin: var(--e12) 0 var(--e8);
}






.panier-contact {
  margin: 0;
}


.panier-mention {
  margin: var(--e12) var(--e12) 0;
  text-align: center;
}







.panier-vide,
.panier-sans-script,
.panier-attente,
.panier-echec,
.references-vide {
  margin: var(--e20) var(--e12);
  color: var(--texte-secondaire);
  font-size: var(--t-texte);
  line-height: var(--interligne);
  text-align: center;
}



.panier-vide + .bouton,
.panier-sans-script + .bouton,
.panier-echec .bouton,
.references-vide + .bouton {
  width: fit-content;
  margin: var(--e12) auto 0;
}










.formulaire,
.menu {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: var(--e16) var(--e12) var(--e20);
}



.formulaire-intro {
  margin-bottom: var(--e16);
  line-height: var(--interligne);
}




.formulaire-corps {
  display: flex;
  flex-direction: column;
  gap: var(--e16);
}




.champ-bloc {
  display: block;
}





.libelle .discret {
  margin-left: var(--e4);
}





.aide-erreur {
  color: var(--alerte);
}





.formulaire-erreur {
  margin: 0 0 var(--e16);
}


.formulaire-autre {
  margin-top: var(--e12);
}


.compte-nom {
  margin-bottom: var(--e4);
}






.compte-liste {
  margin: var(--e20) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--e12);
}

.compte-valeur {
  margin: 0;
  font-size: var(--t-texte);
}

.compte-reglage {
  margin-top: var(--e20);
}

.compte-modifier {
  margin: var(--e16) 0 var(--e20);
}



.formulaire-corps > .compte-liste {
  margin-top: 0;
}






.panier-inscription {
  margin-top: var(--e20);
}





.invitation {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--e12);
  margin: var(--e12);
  padding: var(--e16);
  border: var(--trait) solid var(--bordure);
  border-radius: var(--rayon-bloc);
  background: var(--fond-bloc);
  box-shadow: var(--ombre-bloc);
}

.invitation-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--hauteur-controle);
  height: var(--hauteur-controle);
  border-radius: var(--rayon-pilule);
  background: var(--accent-fond);
  color: var(--accent);
}

.invitation-texte {
  font-size: var(--t-texte);
  line-height: var(--interligne);
}

.invitation-boutons {
  display: flex;
  flex-wrap: wrap;
  grid-column: 2;
  gap: var(--e8);
}

.invitation-boutons .bouton {
  position: relative;
  flex: 0 1 auto;
  width: auto;
  padding: 0 var(--e20);
}



.invitation-boutons .bouton::after {
  content: "";
  position: absolute;
  inset: calc((var(--hauteur-controle) - var(--cible-tactile)) / 2) 0;
}







.menu-liste {
  display: flex;
  flex-direction: column;
  border-radius: var(--rayon-bloc);
  background: var(--fond-bloc);
  box-shadow: var(--ombre-bloc);
}











.menu-entree {
  display: flex;
  align-items: center;
  min-height: var(--cible-tactile);
  padding: 0 var(--e12);
  color: var(--texte);
  font-size: var(--t-titre);
  text-decoration: none;
}




.menu-entree + .menu-entree {
  border-top: var(--trait) solid var(--bordure);
}







.menu-pastille {
  margin-left: auto;
  background: var(--fond-image);
  color: var(--texte-secondaire);
}




.compte-nom + .menu-liste {
  margin-top: var(--e12);
}

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



.menu-mode {
  margin-top: var(--e16);
}

.menu-deconnexion {
  margin-top: var(--e8);
}










.recu {
  padding: var(--e12);
  border-radius: var(--rayon-bloc);
  background: var(--fond-bloc);
  box-shadow: var(--ombre-bloc);
}



.recu-boutique {
  font-size: var(--t-texte);
  font-weight: var(--poids-moyen);
}

.recu-date {
  margin-top: var(--e4);
}



.recu-lignes {
  margin: var(--e12) 0 0;
  padding: 0;
  list-style: none;
}



.recu-ligne {
  margin-top: var(--e4);
  font-size: var(--t-texte);
  line-height: var(--interligne);
}

.recu-ligne:first-child {
  margin-top: 0;
}

.recu-variante {
  margin-left: var(--e4);
}





.recu-total {
  margin-top: var(--e12);
  padding-top: var(--e12);
  border-top: var(--trait) solid var(--bordure);
}



.recu-etat {
  margin-top: var(--e20);
  line-height: var(--interligne);
}



.recu-etat .pastille {
  margin-bottom: var(--e8);
}

.recu-etat p:last-child {
  margin-top: var(--e8);
}



.avis {
  margin-top: var(--e20);
}

.avis .formulaire-intro,
.plainte .formulaire-intro,
.annulation .formulaire-intro {
  margin-top: var(--e8);
}

.avis .formulaire-corps {
  margin-top: var(--e16);
}


.avis-note-lue {
  margin-top: var(--e8);
  font-size: var(--t-texte);
  font-weight: var(--poids-moyen);
}

.avis-commentaire-lu {
  margin-top: var(--e4);
  font-size: var(--t-texte);
  line-height: var(--interligne);
}








.etoiles {
  display: flex;
  flex-direction: row-reverse;

  

  justify-content: flex-end;
  margin-top: var(--e4);
}










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



.etoile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cible-tactile);
  min-height: var(--cible-tactile);
  cursor: pointer;
}





.etoile .icone {
  width: 20px;
  height: 20px;
  color: var(--texte-secondaire);
}





.etoile-choix:checked ~ .etoile .icone {
  fill: currentColor;
  color: var(--accent);
}


.etoile:hover .icone,
.etoile:hover ~ .etoile .icone {
  fill: currentColor;
  color: var(--accent);
}









.etoile-choix:focus-visible + .etoile {
  outline: calc(var(--trait) * 2) solid var(--texte);
  outline-offset: calc(var(--trait) * -2);
  border-radius: var(--rayon-bloc);
}






.choix {
  display: flex;
  align-items: center;
  gap: var(--e10);
  min-height: var(--cible-tactile);
  cursor: pointer;
}




.choix-entree {
  flex: none;
  accent-color: var(--accent);
}

.choix-libelle {
  font-size: var(--t-texte);
  line-height: var(--interligne);
}







fieldset.champ-bloc {
  margin: 0;
  padding: 0;
  border: 0;
}

fieldset.champ-bloc > .libelle {
  padding: 0;
}






.plainte,
.plainte-lue,
.annulation,
.panier-groupe + .panier-groupe {
  margin-top: var(--e20);
}



.panier-groupe-titre {
  margin-bottom: var(--e8);
}






.plainte-ouvrir,
.annulation-ouvrir {
  display: flex;   
  list-style: none;
  cursor: pointer;
}

.plainte-ouvrir::-webkit-details-marker,
.annulation-ouvrir::-webkit-details-marker {
  display: none;
}


.plainte-motif {
  margin-top: var(--e8);
  font-size: var(--t-texte);
  font-weight: var(--poids-moyen);
}

.plainte-description {
  margin-top: var(--e4);
  font-size: var(--t-texte);
  line-height: var(--interligne);

  



  white-space: pre-wrap;
}

.plainte-lue .mention,
.recu-etat .mention {
  margin-top: var(--e8);
}






.confirmer-inscription {
  margin: var(--e20) 0 0;
}





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



.reference-ligne {
  margin-top: var(--e12);
  padding: var(--e12);
  border-radius: var(--rayon-bloc);
  background: var(--fond-bloc);
  box-shadow: var(--ombre-bloc);
}







.reference-attente {
  border: calc(var(--trait) * 2) solid var(--accent);

  

  padding: calc(var(--e12) - var(--trait) * 2);
}

.reference-ligne .pastille {
  margin-bottom: var(--e8);
}

.reference-boutique {
  font-size: var(--t-texte);
  font-weight: var(--poids-moyen);
}




.reference-code {
  margin-top: var(--e4);
  color: var(--texte-secondaire);
}



.reference-produits {
  margin: var(--e8) 0 0;
  padding: 0;
  list-style: none;
}

.reference-produit {
  font-size: var(--t-texte);
  line-height: var(--interligne);
}



.reference-total {
  margin-top: var(--e8);
}







.reference-action {
  margin-top: var(--e12);
  background: var(--fond-page);
}






@media (hover: hover) {

  .reference-action:hover {
    background: var(--survol-boite);
  }
}





























































.boite,
.barre-icone,
.barre-logo,
.barre-retour-lien,
.barre-partage,
.categorie,
.menu-entree,
.taille,
.vignette {
  position: relative;
  -webkit-tap-highlight-color: transparent;
}







.carte-nom {
  -webkit-tap-highlight-color: transparent;
}

.boite::before,
.barre-icone::before,
.barre-logo::before,
.barre-retour-lien::before,
.barre-partage::before,
.categorie::before,
.menu-entree::before,
.taille::before,
.vignette::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: currentColor;
  opacity: 0;
}

.boite:active::before,
.barre-icone:active::before,
.barre-logo:active::before,
.barre-retour-lien:active::before,
.barre-partage:active::before,
.categorie:active::before,
.menu-entree:active::before,
.taille:active::before,
.vignette:active::before {
  opacity: var(--opacite-appui);
}














.bouton {
  transition: transform var(--duree-mouvement) ease-out;
}

.bouton:active {
  transform: scale(.97);
  transition-duration: 0s;
}

.taille {
  transition: transform var(--duree-mouvement) ease-out;
}

.taille:active {
  transform: scale(.97);
  transition-duration: 0s;
}

.boite {
  transition: transform var(--duree-mouvement) ease-out;
}

.boite:active {
  transform: scale(.97);
  transition-duration: 0s;
}






.boite-coeur .icone {
  transition: transform var(--duree-mouvement) ease-out;
}

.boite-coeur:active .icone {
  transform: scale(1.25);
  transition-duration: 0s;
}







.carte-arrivee {
  animation: carte-arrivee var(--duree-mouvement) ease-out backwards;
}

@keyframes carte-arrivee {
  from { opacity: 0; transform: translateY(var(--e8)); }
  to   { opacity: 1; transform: none; }
}






details[open] > :not(summary) {
  animation: details-ouvre var(--duree-mouvement) ease-out;
}

@keyframes details-ouvre {
  from { opacity: 0; transform: translateY(calc(-1 * var(--e4))); }
  to   { opacity: 1; transform: none; }
}







@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--duree-mouvement);
}





.categorie-active .categorie-pastille {
  view-transition-name: categorie-marque;
}

::view-transition-group(categorie-marque) {
  animation-duration: var(--duree-mouvement);
}



.fenetre {
  width: min(calc(100% - 2 * var(--e16)), 420px);
  padding: var(--e20);
  border: none;
  border-radius: var(--rayon-bloc);
  background: var(--fond-bloc);
  color: var(--texte);
  box-shadow: var(--ombre-carte-appui);
}

.fenetre::backdrop {
  background: rgba(11, 15, 25, .55);
}

.fenetre[open] {
  animation: fenetre-ouvre var(--duree-mouvement) ease-out;
}

@keyframes fenetre-ouvre {
  from { opacity: 0; transform: translateY(var(--e8)) scale(.98); }
  to   { opacity: 1; transform: none; }
}



.fenetre-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cible-tactile);
  height: var(--cible-tactile);
  margin-bottom: var(--e12);
  border-radius: var(--rayon-pilule);
  background: var(--accent-fond);
  color: var(--accent);
}



.fenetre-texte {
  margin: 0 0 var(--e20);
  font-size: var(--t-titre-2);
  line-height: var(--interligne);
  white-space: pre-line;
}

.fenetre-boutons {
  display: flex;
  gap: var(--e12);
}

.fenetre-boutons .bouton {
  flex: 1;
}







.fenetre-question[open] {
  animation: question-surgit 320ms cubic-bezier(.34, 1.56, .64, 1);
}

.fenetre-question[open]::backdrop {
  animation: voile-fond 220ms ease-out;
}

@keyframes question-surgit {
  from { opacity: 0; transform: translateY(var(--e16)) scale(.8); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}

@keyframes voile-fond {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .fenetre-question[open],
  .fenetre-question[open]::backdrop {
    animation: none;
  }
}

.signalement-page {
  max-width: 480px;
  margin-inline: auto;
  padding: var(--e20) var(--e12);
}

.signalement-carte {
  padding: var(--e20);
  border-radius: var(--rayon-bloc);
  background: var(--fond-bloc);
  box-shadow: var(--ombre-bloc);
}

.signalement-cible {
  margin: 0 0 var(--e12);
}

.signalement-motifs {
  min-inline-size: 0;
  margin: 0 0 var(--e12);
  padding: 0;
  border: 0;
}


.signalement-choix {
  display: flex;
  align-items: center;
  gap: var(--e10);
  min-height: var(--cible-tactile);
  font-size: var(--t-texte);
}

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

.signalement-precision {
  min-height: calc(var(--cible-tactile) * 2);
}

.signalement .fenetre-boutons,
.signalement-resultat .fenetre-boutons {
  margin-top: var(--e16);
}



.lien-signaler {
  display: block;
  margin-top: var(--e20);
  color: var(--texte-discret);
  font-size: var(--t-mention);
  line-height: var(--cible-tactile);
  text-align: center;
}



.carte {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}








.taux-bouton {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  height: calc(var(--hauteur-controle) - var(--e4));
  padding: 0 var(--e12);
  border: var(--trait) solid var(--accent-bord);
  border-radius: var(--rayon-pilule);
  background: var(--accent-fond);
  color: var(--texte);
  font-size: var(--t-titre-2);
  font-weight: 700;   
  text-decoration: none;
  white-space: nowrap;
}

.taux-bouton::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--cible-tactile);
  transform: translateY(-50%);
}





.barre-retour-taux {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.barre-retour-gauche {
  display: flex;
  align-items: center;
  gap: var(--e8);
  min-width: 0;
}






















@media (prefers-reduced-motion: reduce) {

  .haut-cache {
    transition: none;
  }

  .barre {
    transition: none;
  }

  .categories {
    transition: none;
  }

  .barre-recherche::after {
    transition: none;
  }

  .carte {
    transition: none;
  }

  .carte:has(.carte-nom:active) {
    transform: none;
  }

  


  .vol {
    transition: none;
  }

  .pastille-bat {
    animation: none;
  }

  .bouton {
    transition: none;
  }

  .bouton:active {
    transform: none;
  }

  .taille {
    transition: none;
  }

  .taille:active {
    transform: none;
  }

  .boite {
    transition: none;
  }

  .boite:active {
    transform: none;
  }

  .boite-coeur .icone {
    transition: none;
  }

  .boite-coeur:active .icone {
    transform: none;
  }

  .carte-arrivee {
    animation: none;
  }

  details[open] > :not(summary) {
    animation: none;
  }

  @view-transition {
    navigation: none;
  }

  .panier-ligne {
    transition: none;
  }

  .panier-ligne-sort {
    transform: none;
  }

  .fenetre[open] {
    animation: none;
  }
}





.partage {
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  margin: auto auto 0;
  padding: var(--e8) var(--e16) var(--e20);
  border: 0;
  border-radius: var(--rayon-bloc) var(--rayon-bloc) 0 0;
  background: var(--fond-page);
  color: var(--texte);
}

.partage::backdrop {
  background: rgba(11, 15, 25, .55);
}

.partage[open] {
  animation: partage-monte var(--duree-mouvement) ease-out;
}

@keyframes partage-monte {
  from { transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .partage[open] {
    animation: none;
  }
}

.partage-poignee {
  display: block;
  width: 40px;
  height: 4px;
  margin: 0 auto var(--e12);
  border-radius: var(--rayon-pilule);
  background: var(--bordure);
}

.partage-apercu {
  padding: var(--e12) var(--e16);
  border-radius: var(--rayon-bloc);
  background: var(--fond-bloc);
}

.partage-titre {
  overflow: hidden;
  font-weight: var(--poids-moyen);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.partage-adresse {
  overflow-wrap: anywhere;
}

.partage-sur {
  margin: var(--e16) 0 var(--e8);
}

.partage-choix {
  display: flex;
  gap: var(--e8);
}

.partage-option {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: var(--e8);
  min-height: 44px;
  padding: var(--e4) 0;
  border: 0;
  background: none;
  color: var(--texte);
  font-family: inherit;
  font-size: var(--t-mention);
  text-decoration: none;
  cursor: pointer;
}

.partage-rond {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--fond-bloc);
  box-shadow: var(--ombre-bloc);
  transition: background var(--duree-mouvement), color var(--duree-mouvement);
}

.partage-rond svg {
  width: 26px;
  height: 26px;
}

.partage-rond-whatsapp {
  background: #25D366;
  color: #FFFFFF;
}



.partage-coche,
.partage-copie .partage-lien {
  display: none;
}

.partage-copie .partage-coche {
  display: block;
}

.partage-copie .partage-rond {
  background: var(--vert);
  color: var(--sur-aplat);
}

.partage-copie .partage-mot {
  color: var(--vert);
  font-weight: var(--poids-moyen);
}

.partage-fermer {
  width: 100%;
  margin-top: var(--e16);
}