

[hidden] {
  display: none !important;
}

html:not(.script) .bouton-menu,
html:not(.script) .bouton-panier,
html:not(.script) [data-ajout],
html:not(.script) .selecteur {
  visibility: hidden;
}


*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: 0;
}

hr {
  height: 0;
  margin: 0;
  border: 0;
}

input,
textarea,
select,
button {
  border: 0;
  -webkit-appearance: none;
  appearance: none;
}

html {
  min-width: var(--plancher-page);
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  background-color: var(--papier);
  color: var(--encre);
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background-color: var(--papier);
  background-image: var(--teinte-niveau-0);
  color: var(--encre);
  display: flex;
  flex-direction: column;
  min-height: var(--hauteur-petite);
  font-family: var(--police-texte);
  font-size: var(--t-texte);
  line-height: var(--interligne);
  letter-spacing: var(--interlettre);
  font-weight: var(--graisse-texte);
  font-synthesis: none;
  font-optical-sizing: auto;
  font-variation-settings: var(--reglage-police);
}

* {
  letter-spacing: var(--interlettre);
}

h1, h2, h3, p, strong, b, th {
  margin: 0;
  font-family: var(--police-texte);
  font-weight: var(--graisse-appuyee);
}

p,
th {
  font-family: var(--police-texte);
  font-weight: var(--graisse-texte);
}

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

button,
input,
textarea {
  font-family: var(--police-texte);
  font-weight: var(--graisse-texte);
  font-optical-sizing: auto;
  font-variation-settings: var(--reglage-police);
  color: inherit;
}

button {
  cursor: pointer;
}

::placeholder {
  color: var(--encre);
  opacity: 1;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

svg {
  display: block;
  fill: currentColor;
}

@property --focus-clavier {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

:focus-visible {
  outline: 1px solid var(--vermillon);
  outline-offset: var(--decalage-focus);
}

:focus:not(:focus-visible) {
  outline: none;
}

html.pointeur :focus-visible {
  outline: none;
}

.formulaire input:focus-visible,
.formulaire textarea:focus-visible {
  outline: none;
}


button,
.bouton,
.logo,
.logo img,
.bas-copie a,
.bas-copie img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.haut:focus {
  outline: none;
}

main {
  flex: 1 0 auto;
}

.sans-defilement {
  overflow: hidden;
}

.visuellement-cache,
.panier-defile > .panier-compte {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.emplacement {
  display: block;
  background: var(--encre-claire);
}

.emplacement picture,
.emplacement img {
  display: block;
  width: 100%;
  height: auto;
}

.emplacement:has(> picture) {
  background: none;
}

.carte-images .carte-image {
  transition: opacity var(--duree) var(--courbe);
}

.carte.ouverte .carte-image:not(.carte-image-2),
.carte:focus-within .carte-image:not(.carte-image-2) {
  opacity: 0;
}

@media (hover: hover) {
  .carte:hover .carte-image:not(.carte-image-2),
  .carte:active .carte-image:not(.carte-image-2) {
    opacity: 0;
  }
}

.cadre {
  width: min(var(--largeur-entre-retraits), var(--largeur-cadre-max));
  margin-left: auto;
  margin-right: auto;
}


.evitement {
  position: fixed;
  left: var(--hors-ecran);
  top: var(--ecart-bord-fenetre);
  z-index: var(--couche-dessus);
  display: flex;
  align-items: center;
  min-height: var(--cible);
  padding: var(--blanc-flottant-v) var(--blanc-flottant-h);
  background: var(--papier);
}

.evitement:focus {
  left: var(--ecart-bord-fenetre);
}

.evitement:focus-visible {
  outline-offset: 0;
}


.entete {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--couche-entete);
  height: var(--entete-h);
  background-color: var(--papier);
  background-image: linear-gradient(var(--filet-barre), var(--filet-barre)), var(--teinte-niveau-0);
  background-size: 100% var(--filet-1), auto;
  background-position: 0 100%, 0 0;
  background-repeat: no-repeat;
  box-shadow: none;
}

@media (min-resolution: 2dppx) {
  .entete {
    background-image: linear-gradient(var(--papier) 50%, var(--filet-barre) 50%), var(--teinte-niveau-0);
  }
}

@media (min-resolution: 3dppx) {
  .entete {
    background-image: linear-gradient(var(--papier) var(--papier-haut-dense), var(--filet-barre) var(--papier-haut-dense)), var(--teinte-niveau-0);
  }
}

.logo {
  position: absolute;
  z-index: var(--couche-locale);
  left: var(--logo-gauche);
  top: calc((var(--entete-h) - var(--logo-h)) / 2);
  width: var(--largeur-marque);
  height: var(--logo-h);
  display: block;
}

.logo img {
  position: absolute;
  left: var(--logo-encre-gauche);
  top: var(--logo-encre-haut);
  display: block;
  width: var(--logo-encre-l);
  height: var(--logo-encre-h);
}

.bouton-menu,
.bouton-panier {
  position: fixed;
  z-index: var(--couche-locale);
}

.bouton-menu,
.bouton-panier,
.volet-fermer {
  min-width: var(--cible);
  min-height: var(--cible);
  padding: 0;
  border: 0;
  background: none;
  color: var(--encre);
  font-size: var(--t-texte);
}

.bouton-menu {
  left: var(--bord-bouton-g);
  margin-left: env(safe-area-inset-left);
  top: var(--cale-commande-haut);
  width: var(--bouton-l);
  height: var(--bouton-h);
}

.menu-rond,
.sac,
.croix,
.picto-commande {
  background-color: currentColor;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

@media (forced-colors: active) {
  .menu-rond,
.sac,
.croix,
.picto-commande {
    forced-color-adjust: none;
    background-color: CanvasText;
  }
}

.menu-rond,
.sac,
.croix {
  position: absolute;
  top: var(--picto-haut);
  width: var(--picto-l);
  height: var(--picto-h);
}

.menu-rond {
  left: var(--picto-g);
  -webkit-mask-image: url("/statique/marque/menu.svg?v=73a9d744fb");
  mask-image: url("/statique/marque/menu.svg?v=73a9d744fb");
}

.bouton-panier {
  display: flex;
  align-items: flex-start;
  left: calc(100% - var(--bord-bouton-g) - var(--bouton-h) - env(safe-area-inset-right));
  top: var(--cale-commande-haut);
  width: auto;
  min-width: var(--bouton-h);
  height: var(--bouton-h);
  padding: 0 0 0 calc(var(--bouton-h) - var(--picto-g));
}

.sac {
  left: var(--sac-g);
  -webkit-mask-image: url("/statique/marque/sac.svg?v=5aa6163a26");
  mask-image: url("/statique/marque/sac.svg?v=5aa6163a26");
}

.croix {
  -webkit-mask-image: url("/statique/marque/fermer.svg?v=7a05f4b5bd");
  mask-image: url("/statique/marque/fermer.svg?v=7a05f4b5bd");
}

.volet-fermer {
  position: absolute;
  top: var(--cale-commande-haut);
  z-index: var(--couche-locale-dessus);
  height: var(--bouton-h);
}

[aria-expanded="true"] > .compteur {
  display: none;
}

.compteur {
  position: relative;
  flex: none;
  margin-top: var(--picto-haut);
  min-width: var(--place-deux-chiffres);
  display: flex;
  align-items: flex-start;
  color: var(--encre);
  font-size: var(--t-chiffre);
  line-height: var(--interligne-picto);
  white-space: nowrap;
  pointer-events: none;
}


.calque {
  position: fixed;
  inset: var(--entete-h) 0 0;
  z-index: var(--couche-locale-dessus);
  visibility: hidden;
}

.calque.ouvert,
.calque.fondu {
  visibility: visible;
}

.voile {
  position: absolute;
  inset: calc(-1 * var(--entete-h)) 0 0;
  background: var(--encre-voile);
  -webkit-backdrop-filter: blur(var(--flou-fond));
  backdrop-filter: blur(var(--flou-fond));
  opacity: 0;
}

@keyframes voile-entre {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes voile-sort {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.calque.fondu .voile {
  animation: voile-sort var(--duree-volet) var(--courbe-volet) both;
}

.calque.ouvert .voile {
  opacity: 1;
  animation: voile-entre var(--duree-volet) var(--courbe-volet) both;
}

.volet {
  position: absolute;
  top: calc(-1 * var(--entete-h));
  bottom: calc(-1 * var(--hauteur-grande));
  padding: var(--entete-h) 0 0;
  border-bottom: var(--hauteur-grande) solid transparent;
  background-origin: border-box;
  width: var(--largeur-volet);
  max-width: calc(100% - var(--bord-page-visible));
  z-index: var(--couche-locale);
  background-color: var(--papier);
  background-image: linear-gradient(calc(180deg + 90deg * var(--sens)), var(--papier) var(--part-papier-filet), var(--filet-barre) var(--part-papier-filet)), var(--teinte-niveau-0);
  background-size: var(--filet-1) 100%, auto;
  background-position: calc(50% - 50% * var(--sens)) 0, 0 0;
  background-repeat: no-repeat;
  box-shadow: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  --blanc-bout-volet: calc(var(--entete-h) + var(--air-2));
  --blanc-bas-volet: calc(var(--blanc-bout-volet) + env(safe-area-inset-bottom));
  transform: translateX(calc(var(--sens) * 100%));
  transition: transform var(--duree-volet) var(--courbe-volet);
}

.volet > nav,
.volet > .panier-corps {
  flex: 1 0 auto;
}

.volet[data-cote="g"] {
  --sens: -1;
  --largeur-volet: var(--largeur-panneau-etroit);
  left: 0;
  padding-left: env(safe-area-inset-left);
}

.volet[data-cote="d"] {
  --sens: 1;
  --largeur-volet: var(--largeur-panneau-large);
  right: 0;
  padding-right: env(safe-area-inset-right);
}

.volet[data-cote="g"] .volet-fermer {
  left: calc(var(--bord-bouton-g) + env(safe-area-inset-left));
  width: var(--bouton-l);
}

.volet[data-cote="g"] .volet-fermer > .croix {
  left: var(--picto-g);
}

.volet[data-cote="d"] .volet-fermer {
  right: calc(var(--bord-bouton-g) + env(safe-area-inset-right));
  width: var(--bouton-h);
}

.volet[data-cote="d"] .volet-fermer > .croix {
  left: var(--sac-g);
}

.bouton-menu::after,
.bouton-panier::after,
.volet-fermer::after {
  content: "";
  position: absolute;
  top: calc(var(--picto-haut) + var(--picto-h) + var(--ecart-souligne-picto));
  width: var(--picto-l);
  height: var(--bande-appel);
  background-color: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duree-courte) var(--courbe);
  -webkit-mask-image: url("/statique/naturel/soulignement.svg?v=780ce7094b");
  mask-image: url("/statique/naturel/soulignement.svg?v=780ce7094b");
  -webkit-mask-size: 800% 100%;
  mask-size: 800% 100%;
  -webkit-mask-position: calc(var(--naturel-n) * 100% / 7) 0;
  mask-position: calc(var(--naturel-n) * 100% / 7) 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.bouton-menu::after,
.volet[data-cote="g"] .volet-fermer::after {
  left: var(--picto-g);
}

.bouton-panier::after,
.volet[data-cote="d"] .volet-fermer::after {
  left: var(--sac-g);
}

:where([data-souligne-focus]) {
  position: relative;
}

[data-souligne-focus]::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  top: calc(100% + var(--ecart-souligne-focus));
  height: var(--bande-appel);
  background-color: var(--vermillon);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duree-courte) var(--courbe);
  -webkit-mask-image: url("/statique/naturel/soulignement.svg?v=780ce7094b");
  mask-image: url("/statique/naturel/soulignement.svg?v=780ce7094b");
  -webkit-mask-size: 800% 100%;
  mask-size: 800% 100%;
  -webkit-mask-position: calc(var(--naturel-n) * 100% / 7) 0;
  mask-position: calc(var(--naturel-n) * 100% / 7) 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.volet.ouvert {
  transform: none;
}

.menu-liste {
  padding: var(--air-2) var(--air-3) var(--blanc-bas-volet) calc(var(--air-3) - var(--menu-blanc));
}

.menu-liste li + li {
  margin-top: var(--air-1);
}

.menu-liste a {
  position: relative;
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: var(--cible);
  padding: 0 var(--menu-blanc);
  line-height: var(--interligne);
  text-transform: var(--casse-capitales);
  letter-spacing: var(--interlettre-capitales);
  font-size: calc(var(--t-texte) * var(--corps-sans));
  font-family: var(--police-sans);
  font-weight: var(--graisse-sans);
  font-variation-settings: var(--reglage-sans);
}

.menu-liste a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: var(--menu-blanc);
  right: var(--menu-blanc);
  top: calc(var(--souligne-haut) - var(--debord-focus));
  height: var(--bande);
  --bande-repos: var(--bande-appel);
  --debord-final: var(--debord-focus-souligne);
  font-size: var(--t-texte);
  background-color: var(--vermillon);
  pointer-events: none;
}

.menu-liste a[aria-current="page"]::after {
  -webkit-mask-image: url("/statique/naturel/soulignement.svg?v=780ce7094b");
  mask-image: url("/statique/naturel/soulignement.svg?v=780ce7094b");
  -webkit-mask-size: 800% 100%;
  mask-size: 800% 100%;
  -webkit-mask-position: calc(var(--naturel-n) * 100% / 7) 0;
  mask-position: calc(var(--naturel-n) * 100% / 7) 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.panier-corps {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 var(--air-3) var(--blanc-bas-volet);
}

.panier-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--air-5);
  padding-top: var(--air-2);
  text-align: center;
}

.panier-vide-bouton {
  max-width: 100%;
}

.panier-ligne {
  --ligne-prix-h: max(var(--interligne) * 1em, var(--cible));
  display: grid;
  grid-template-columns: var(--case-objet-l) minmax(0, 1fr) auto;
  grid-template-areas:
    "vignette nom nom"
    "vignette prix quantite"
    "vignette retirer retirer";
  gap: var(--air-3);
  row-gap: 0;
  align-items: center;
  position: relative;
  border-top: var(--filet-1) solid transparent;
  padding: var(--air-3) 0;
}

.panier-ligne + .panier-ligne {
  border-top-color: var(--encre-trait);
}

.panier-ligne:first-child {
  margin-top: calc(var(--air-2) - var(--air-3) - var(--filet-1));
}

.panier-ligne:last-child {
  margin-bottom: calc(var(--air-2) - var(--air-3));
}

.panier-vignette {
  --decalage-vignette: calc(var(--interligne) * 1em + var(--blanc-nom-prix) + var(--ligne-prix-h) / 2 - var(--case-objet-h) / 2);
  grid-area: vignette;
  align-self: start;
  display: block;
  width: var(--case-objet-l);
  height: var(--case-objet-h);
  margin-top: var(--decalage-vignette);
}

.panier-vignette picture,
.panier-vignette img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
}

.panier-ligne-nom {
  grid-area: nom;
  align-self: start;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  height: calc(1em * var(--interligne));
}

.panier-ligne-prix {
  grid-area: prix;
  margin-top: var(--blanc-nom-prix);
  color: var(--encre);
  font-weight: var(--graisse-appuyee);
}

.panier-ligne > .selecteur {
  min-height: var(--cible);
  grid-area: quantite;
  justify-self: end;
  margin-top: var(--blanc-nom-prix);
}

.bouton-croix {
  grid-area: retirer;
  justify-self: start;
  width: var(--picto-croix);
  height: var(--picto-croix);
  border: 0;
  background: none;
  color: var(--encre-discrete);
  font-size: var(--t-texte);
  line-height: var(--interligne-picto);
  min-width: var(--cible);
  min-height: var(--cible);
  margin: var(--cale-retirer-haut) 0 var(--cale-retirer-bas) var(--cale-retirer-gauche);
}

.picto-commande {
  display: block;
  width: var(--picto-commande);
  height: var(--picto-commande);
  margin: auto;
}

.picto-plus {
  -webkit-mask-image: url("/statique/marque/plus.svg?v=41ff1ba25c");
  mask-image: url("/statique/marque/plus.svg?v=41ff1ba25c");
}

.picto-moins {
  -webkit-mask-image: url("/statique/marque/moins.svg?v=ec779aa25b");
  mask-image: url("/statique/marque/moins.svg?v=ec779aa25b");
}

.picto-retirer {
  -webkit-mask-image: url("/statique/marque/retirer.svg?v=059554f2e0");
  mask-image: url("/statique/marque/retirer.svg?v=059554f2e0");
}

.panier-defile {
  flex: 1 0 auto;
  position: relative;
}

.panier-corps > .separateur,
.panier-corps > .bouton {
  flex: none;
}


.panier-corps > .bouton {
  width: 100%;
  margin-top: var(--air-3);
}

.panier-corps > .bouton[aria-disabled="true"] {
  cursor: not-allowed;
}


.bouton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: var(--encre);
  text-align: center;
  white-space: nowrap;
  min-height: var(--appel-h);
  padding: var(--appel-pad-v) var(--appel-pad-h);
  font-size: var(--t-texte);
  line-height: var(--interligne);
  font-weight: var(--graisse-appuyee);
  letter-spacing: var(--interlettre);
  transition: filter var(--duree-ajout-sortie) var(--courbe-ajout-sortie);
}

.bouton::before {
  content: "";
  position: absolute;
  inset: calc(var(--debord-focus) * -1);
  --bande-repos: var(--bande-appel);
  --debord-final: var(--debord-focus-appel);
  background-color: var(--vermillon);
  pointer-events: none;
  border-radius: calc(var(--rayon-coin-appel) * var(--trait-appel) * var(--focus-clavier));
}

.bouton::before {
  -webkit-mask-image: url("/statique/naturel/contour-haut.svg?v=654292edfa"), url("/statique/naturel/contour-droite.svg?v=ae83254cd3"), url("/statique/naturel/contour-bas.svg?v=58e88ec5f6"), url("/statique/naturel/contour-gauche.svg?v=723d8097cd");
  mask-image: url("/statique/naturel/contour-haut.svg?v=654292edfa"), url("/statique/naturel/contour-droite.svg?v=ae83254cd3"), url("/statique/naturel/contour-bas.svg?v=58e88ec5f6"), url("/statique/naturel/contour-gauche.svg?v=723d8097cd");
}

.bouton::before {
  -webkit-mask-size: 800% var(--bande), var(--bande) 800%, 800% var(--bande), var(--bande) 800%;
  mask-size: 800% var(--bande), var(--bande) 800%, 800% var(--bande), var(--bande) 800%;
  -webkit-mask-position: calc(var(--naturel-n) * 100% / 7) 0, 100% calc(var(--naturel-n) * 100% / 7), calc(var(--naturel-n) * 100% / 7) 100%, 0 calc(var(--naturel-n) * 100% / 7);
  mask-position: calc(var(--naturel-n) * 100% / 7) 0, 100% calc(var(--naturel-n) * 100% / 7), calc(var(--naturel-n) * 100% / 7) 100%, 0 calc(var(--naturel-n) * 100% / 7);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.bouton::before,
.menu-liste a[aria-current="page"]::after {
  --focus-clavier: var(--focus-clavier-cible, 1);
  --bande: calc(var(--bande-repos) * var(--focus-clavier));
  --debord-focus: calc(var(--debord-final) * (var(--focus-clavier) - 1) / (var(--focus-clavier-facteur) - 1));
  transition: --focus-clavier var(--duree-courte) var(--courbe), opacity var(--duree-courte) var(--courbe);
}


.bouton.avec-prix {
  justify-content: space-between;
  column-gap: var(--air-1);
}

.bouton.serre {
  padding-left: var(--blanc-appel);
  padding-right: var(--blanc-appel);
}

.bouton.replie {
  flex-wrap: wrap;
  max-width: 100%;
}

.bouton.replie,
.bouton.replie > span {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.bouton[data-ajoute] > .cta-libelle {
  opacity: 0;
}

.bouton[data-ajoute] {
  filter: opacity(var(--opacite-ajout));
  transition-duration: var(--duree-ajout-entree);
  transition-timing-function: var(--courbe-ajout-entree);
}

.cta-ajoute {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: inherit;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.bouton[data-ajoute] > .cta-ajoute {
  opacity: 1;
}

.cta-points > span {
  opacity: 0;
}

.bouton[data-ajoute] .cta-points > span {
  animation: point-parait 0.01s linear var(--pas-points) both;
}

.bouton[data-ajoute] .cta-points > span:nth-child(2) {
  animation-delay: calc(2 * var(--pas-points));
}

.bouton[data-ajoute] .cta-points > span:nth-child(3) {
  animation-delay: calc(3 * var(--pas-points));
}

@keyframes point-parait {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bouton[data-ajoute] .cta-points > span {
    opacity: 1;
    animation: none;
  }
}

.bouton.replie > .cta-ajoute {
  align-items: flex-start;
}


.carte {
  position: relative;
  --corps-nom: var(--t-titre);
}

@media (max-width: 767.98px) {
  .carte {
    --corps-nom: var(--t-carte);
  }
}

@media (max-width: 575.98px) {
  .carte {
    --corps-nom: var(--t-texte);
  }
}

@media (max-width: 419.98px) {
  .carte {
    --corps-nom: var(--t-carte);
  }
}

.carte > a {
  display: block;
}

.carte-images {
  --carte-reste: calc(var(--air-2) + var(--interligne) * var(--corps-nom) + var(--air-1) + var(--appel-h));
  width: min(100%, calc(max(var(--image-plancher), var(--fenetre-h) - var(--carte-reste)) * var(--rapport-image)));
  margin-left: auto;
  margin-right: auto;
  position: relative;
  display: block;
}

.carte-image {
  position: relative;
  aspect-ratio: var(--rapport-image);
}

.carte-image picture,
.carte-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.carte-info {
  display: block;
  padding-top: var(--air-2);
  font-size: var(--corps-nom);
}

.carte-nom {
  display: block;
  min-width: 0;
  font-size: inherit;
  font-weight: var(--graisse-appuyee);
  line-height: var(--interligne);
  white-space: nowrap;
  overflow-x: clip;
  text-overflow: ellipsis;
}

.carte-image-2 {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.carte-info,
.carte-ajout {
  opacity: 0;
}

.carte-ajout {
  display: flex;
  width: 100%;
  margin-top: var(--air-1);
}

.carte.ouverte .carte-image-2,
.carte.ouverte .carte-info,
.carte.ouverte .carte-ajout,
.carte:focus-within .carte-image-2,
.carte:focus-within .carte-info,
.carte:focus-within .carte-ajout {
  opacity: 1;
}

@media (hover: hover) {
  .carte:hover .carte-image-2,
  .carte:active .carte-image-2,
  .carte:hover .carte-info,
  .carte:active .carte-info,
  .carte:hover .carte-ajout,
  .carte:active .carte-ajout {
    opacity: 1;
  }

  .carte > a:hover,
  .carte > a:active {
    opacity: 1;
  }

  .carte:hover::after,
  .carte:active::after,
  .carte.sortie::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: var(--air-1);
  }

  .carte.sortie .carte-image:not(.carte-image-2) {
    opacity: 0;
  }

  .carte.sortie .carte-image-2,
  .carte.sortie .carte-info,
  .carte.sortie .carte-ajout {
    opacity: 1;
  }
}

.heros {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: var(--hauteur-petite);
  padding: var(--haut-de-page) var(--retrait) var(--air-4);
  overflow: hidden;
}

.heros-appel {
  display: flex;
  justify-content: center;
}

.heros-appel .bouton::after {
  content: "";
  position: absolute;
  inset: var(--debord-lien-etire);
  background: none;
  pointer-events: auto;
}

.bande-cartes {
  padding-top: var(--air-5);
}

.bande-cartes .appel,
.bande-grille .appel,
.introuvable .appel {
  display: flex;
  justify-content: center;
  margin-top: var(--air-5);
}


.bande-grille {
  padding-top: var(--haut-de-page);
}

.bouton-secondaire::before {
  background-color: var(--encre);
}

.grille-boutique,
.grille-j {
  --colonnes: var(--colonnes-max);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--colonne-min), calc((100% - (var(--colonnes) - 1) * var(--gouttiere)) / var(--colonnes) - 0.01rem))), 1fr));
  gap: var(--air-grille) var(--gouttiere);
}

.grille-message {
  padding: var(--air-6) 0 0;
  text-align: center;
}

.grille-message .bouton {
  margin-top: var(--air-5);
}

@media (max-width: 1199.98px) {
  .grille-boutique,
  .grille-j {
    --colonnes: 2;
  }
}

@media (max-width: 575.98px) {
  .bande-cartes .cadre,
  .bande-grille .cadre,
  .bande-suggestions-j .cadre {
    width: calc(100% - var(--ecart-cadre));
  }
}



.fiche {
  display: grid;
  grid-template-columns: var(--colonnes-fiche);
  align-items: start;
  max-width: var(--largeur-cadre-max);
  margin-left: auto;
  margin-right: auto;
  padding-top: var(--haut-de-page);
}

.fiche-image {
  padding: 0 var(--air-3) 0 var(--air-4);
}

.fiche-image .emplacement {
  width: 100%;
}

.fiche-image .emplacement picture,
.fiche-image .emplacement img {
  max-height: calc(var(--hauteur-petite) - var(--haut-de-page) - var(--air-4));
  object-fit: contain;
  object-position: 50% 0;
}

.fiche-infos {
  max-width: var(--largeur-infos);
  margin: 0 auto;
  text-align: left;
  --resume-blanc: calc((var(--hauteur-repliable) - var(--interligne) * var(--t-texte)) / 2);
}

.fiche-droite {
  position: relative;
  top: var(--cale-colonne-droite);
  padding: 0 var(--air-4) 0 var(--air-3);
  container-type: inline-size;
}

.fiche-infos h1 {
  margin-top: 0;
  font-size: var(--t-titre);
  line-height: var(--interligne-titre);
  overflow-wrap: break-word;
}

.fiche-prix {
  margin-top: var(--air-1);
}

.fiche-achat {
  display: grid;
  width: 100%;
  gap: var(--air-1);
  margin-top: var(--air-2);
}

.fiche-achat > .bouton-ajout {
  min-width: 0;
  max-width: none;
}

@container (min-width: 26.001rem) {
  .fiche-infos {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--air-3);
    align-items: baseline;
  }

  .fiche-infos > * {
    grid-column: 1 / -1;
  }

  .fiche-infos > h1 {
    grid-column: 1;
    grid-row: 1;
  }

  .fiche-infos > .fiche-prix {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
    text-align: right;
    white-space: nowrap;
  }

  .fiche-achat {
    align-items: stretch;
  }
}

.bouton-ajout {
  display: flex;
  justify-content: center;
  max-width: 100%;
}

.selecteur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--appel-h);
}

.selecteur button {
  flex: none;
  width: var(--cible);
  height: var(--cible);
  border: 0;
  background: none;
  color: var(--encre);
  font-size: inherit;
}

.selecteur button[aria-disabled="true"] {
  cursor: not-allowed;
}

.selecteur [data-selecteur-moins] > .picto-commande {
  margin-right: 0;
}

.selecteur [data-selecteur-plus] > .picto-commande {
  margin-left: 0;
}

.selecteur-nombre {
  min-width: max(var(--place-deux-chiffres), var(--largeur-nombre));
  font-weight: var(--graisse-appuyee);
  text-align: center;
}

.bouton.carte-ajout,
.bouton.bouton-ajout {
  column-gap: 0;
}

.bouton.carte-ajout > .cta-prix {
  margin-left: var(--air-prix-carte);
}

.bouton.bouton-ajout > .cta-prix {
  margin-left: var(--air-1);
}

.fiche-description {
  margin-top: var(--air-6);
  text-align: left;
}

.fiche-description p,
.fiche-sections details p,
.lecture p {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.fiche-description p + p {
  margin-top: var(--air-1);
}

.fiche-sections {
  margin-top: calc(var(--air-6) - var(--resume-blanc));
  text-align: left;
}

.fiche-sections details + details {
  margin-top: var(--air-cibles);
}

.fiche-sections summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--cible);
  padding: var(--blanc-repliable) 0;
  cursor: pointer;
  list-style: none;
}

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

.fiche-sections summary svg {
  flex: none;
  width: var(--picto-signe-l);
  height: var(--picto-commande);
}

.fiche-sections details[open] > summary .plus-vertical {
  display: none;
}

.fiche-sections details p {
  margin-top: calc(var(--air-1) - var(--resume-blanc));
  padding-bottom: var(--air-1);
}

@media (max-width: 991.98px) {
  .fiche-image {
    padding: 0 var(--air-2) 0 var(--air-3);
  }

  .fiche-droite {
    padding: 0 var(--air-3) 0 var(--air-2);
  }
}

.page-contact {
  padding-top: var(--entete-h);
}

.contact-ecran {
  display: flex;
  flex-direction: column;
  min-height: calc(var(--hauteur-petite) - var(--entete-h));
  padding: var(--air-3) 0 var(--air-3);
}

.contact-ligne {
  flex: none;
  height: var(--pas);
  margin-bottom: var(--air-cibles);
  white-space: nowrap;
}

.contact-alerte {
  margin: 0;
}

.contact-etat {
  display: none;
  scroll-margin-top: var(--haut-de-page);
}

.contact-etat:target {
  display: block;
}

.contact-alerte:not(:empty) ~ .contact-etat {
  display: none;
}

.contact-etat:focus {
  outline: none;
}

.champ-piege {
  position: absolute;
  left: var(--hors-ecran);
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulaire {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--air-champs);
}

.formulaire > * {
  flex: none;
}

.formulaire-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--air-champs);
}

.champ {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr;
}

.champ input,
.champ textarea {
  grid-area: 1 / 1;
}

.champ::before {
  content: "";
  grid-area: 1 / 1;
  z-index: var(--couche-locale-dessus);
  pointer-events: none;
  border: var(--trait-champ) solid var(--encre-champ);
}

.formulaire input,
.formulaire textarea {
  width: 100%;
  min-width: 0;
  min-height: var(--appel-h);
  padding: calc(var(--blanc-zone-v) * 1em) var(--blanc-zone-h);
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: var(--t-texte);
  line-height: var(--interligne);
}

.champ-message {
  flex: 1 1 0;
  min-height: var(--appel-h);
  max-height: calc((8 * var(--interligne) + 2 * var(--blanc-zone-v)) * var(--t-texte));
  grid-template-rows: minmax(0, 1fr);
}

.formulaire textarea {
  flex: 1 1 0;
  resize: none;
}

.formulaire .bouton-long {
  align-self: flex-end;
  margin-top: calc(var(--air-cibles) - var(--air-champs));
}

@media (max-height: 460px) {
  .contact-ecran {
    padding: var(--air-1) 0;
  }

  .contact-ligne {
    margin-bottom: var(--air-1);
  }
}

@media (max-height: 460px) and (not (max-width: 575.98px)) {
  .formulaire {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
  }

  .formulaire > .formulaire-duo {
    grid-column: span 2;
  }

  .formulaire > .champ-message,
  .formulaire > .bouton-long {
    grid-column: 1 / -1;
  }

  .formulaire > .champ-message {
    height: var(--appel-h);
  }

  .formulaire > .bouton-long {
    justify-self: end;
  }
}


.lecture {
  width: var(--mesure-texte-long);
  max-width: var(--largeur-entre-retraits);
  margin: 0 auto;
  padding-top: var(--haut-de-page);
}

.lecture h1 {
  font-size: var(--t-titre);
  line-height: var(--interligne-titre);
  font-weight: var(--graisse-appuyee);
  overflow-wrap: break-word;
}

.lecture h2 {
  margin-top: var(--air-4);
  font-size: var(--t-texte);
  line-height: var(--interligne);
  font-weight: var(--graisse-appuyee);
  text-transform: var(--casse-capitales);
  letter-spacing: var(--interlettre-capitales);
}

.lecture h2 + p {
  margin-top: var(--air-2);
}

.lecture h1 + h2 {
  margin-top: var(--air-5);
}

.lecture p + p {
  margin-top: var(--air-1);
}

.lecture a {
  text-decoration: underline;
  text-decoration-thickness: var(--trait-lien);
  text-underline-offset: var(--decalage-lien);
}

.courriel:empty::before {
  content: attr(data-u) "\40" attr(data-d);
}


.introuvable {
  padding: var(--haut-de-page) 0 var(--air-6);
  text-align: center;
}

.introuvable.acces {
  padding-top: max(var(--haut-de-page), var(--haut-contenu-seul));
  padding-bottom: 0;
}

.introuvable h1 {
  font-size: var(--t-grand);
  line-height: var(--interligne-grand);
  text-transform: var(--casse-capitales);
  letter-spacing: var(--interlettre-titre);
  overflow-wrap: break-word;
}

.introuvable p {
  margin-top: var(--air-5);
}

.bande-suggestions-j h2 {
  font-size: var(--t-grand);
  line-height: var(--interligne);
  text-align: center;
}

.grille-j {
  margin-top: var(--air-3);
}


.bas-liens {
  padding: var(--air-6) var(--retrait) 0;
}

.bas-liens ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--air-cibles);
  column-gap: var(--blanc-textes);
}

.bas-liens ul + ul {
  margin-top: var(--air-cibles);
}

@media (max-width: 991.98px) {
  .bas-liens ul {
    column-gap: var(--air-cibles);
  }
}

@media (max-width: 767.98px) {
  .bas-liens ul {
    flex-direction: column;
    align-items: center;
  }
}

.bas-liens a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible);
  max-width: 100%;
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.bas-copie {
  padding: var(--air-4) 0 calc(var(--air-4) + env(safe-area-inset-bottom));
}

.bas-copie a {
  position: relative;
  left: var(--coeur-bas-gauche);
  display: block;
  width: var(--coeur-bas-l);
  height: var(--coeur-bas-h);
  box-sizing: content-box;
  padding: var(--coeur-bas-cale-h) var(--coeur-bas-cale-l);
  margin: calc(-1 * var(--coeur-bas-cale-h)) 0 calc(-1 * var(--coeur-bas-cale-h)) calc(-1 * var(--coeur-bas-cale-l));
}

.bas-copie img {
  display: block;
  width: 100%;
  height: 100%;
}


@media (max-width: 767.98px) {
  .bouton-croix,
.menu-liste a,
.bas-liens a {
    min-height: var(--cible);
    min-width: var(--cible);
  }
}

@media (max-width: 767.98px) and (not ((max-height: 460px) and (orientation: landscape) and (not (max-width: 575.98px)))) {
  .fiche {
    display: block;
    padding-top: var(--entete-h);
  }

  .fiche-image {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: var(--image-fiche-h);
    padding: 0;
  }

  .fiche-image .emplacement picture,
  .fiche-image .emplacement img {
    max-height: var(--image-fiche-h);
    object-position: 50% 100%;
  }

  .fiche-droite {
    top: 0;
    padding: 0 var(--retrait);
  }

  .fiche-infos {
    max-width: none;
  }

  .fiche-infos h1 {
    margin-top: var(--air-4);
  }
}

@media (max-width: 767.98px) {
  .carte-ajout {
    padding-left: var(--blanc-carte-ajout);
    padding-right: var(--blanc-carte-ajout);
    column-gap: var(--air-libelle-prix);
  }
}

@media (max-width: 575.98px) {
  .carte-ajout {
    padding: 0 var(--blanc-carte-ajout);
  }
}

@media (max-width: 419.98px) {
  .heros {
    padding-left: var(--blanc-cotes-appels);
    padding-right: var(--blanc-cotes-appels);
  }
}

@media (max-width: 359.98px) {
  .volet {
    width: 100%;
    max-width: none;
    background-size: 0 100%, auto;
  }

  .voile {
    display: none;
  }
}

.bouton-croix {
  position: relative;
}

.bouton-menu::before,
.bouton-panier::before,
.bouton-croix::before,
.bas-copie a::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, var(--cible));
  height: max(100%, var(--cible));
  transform: translate(-50%, -50%);
}


@media (prefers-contrast: more), print {
  body,
.volet,
.entete {
    background-image: none;
  }
}

@media print {
  .entete {
    position: static;
    box-shadow: none;
  }

  .bouton-menu,
  .bouton-panier {
    display: none;
  }
}

:is(.menu-liste li, .carte, .panier-ligne):nth-child(8n + 2) {
  --naturel-n: 1;
}

:is(.menu-liste li, .carte, .panier-ligne):nth-child(8n + 3) {
  --naturel-n: 2;
}

:is(.menu-liste li, .carte, .panier-ligne):nth-child(8n + 4) {
  --naturel-n: 3;
}

:is(.menu-liste li, .carte, .panier-ligne):nth-child(8n + 5) {
  --naturel-n: 4;
}

:is(.menu-liste li, .carte, .panier-ligne):nth-child(8n + 6) {
  --naturel-n: 5;
}

:is(.menu-liste li, .carte, .panier-ligne):nth-child(8n + 7) {
  --naturel-n: 6;
}

:is(.menu-liste li, .carte, .panier-ligne):nth-child(8n + 8) {
  --naturel-n: 7;
}

.bouton-ajout {
  --naturel-n: 3;
}

.panier-vide-bouton {
  --naturel-n: 2;
}

.panier-corps > .bouton {
  --naturel-n: 5;
}

.bouton-long {
  --naturel-n: 7;
}

.bouton-menu,
.volet[data-cote="g"] .volet-fermer {
  --naturel-n: 2;
}

.bouton-panier,
.volet[data-cote="d"] .volet-fermer {
  --naturel-n: 5;
}

@media (forced-colors: none) and (prefers-contrast: no-preference) {
  html:not(.pointeur) :is(
    .bouton:focus-visible,
.menu-liste a[aria-current="page"]:focus-visible
  ) {
    --focus-clavier-cible: var(--focus-clavier-facteur);
    outline: none;
  }

  html:not(.pointeur) :is(.bouton-menu, .bouton-panier, .volet-fermer):focus-visible {
    outline: none;
  }

  html:not(.pointeur) :is(.bouton-menu, .bouton-panier, .volet-fermer):focus-visible::after {
    opacity: 1;
  }

  html:not(.pointeur) [data-souligne-focus]:focus-visible {
    outline: none;
  }

  html:not(.pointeur) [data-souligne-focus]:focus-visible::after {
    opacity: 1;
  }

  html:not(.pointeur) .champ:has(:focus-visible)::before {
    border-width: calc(var(--trait-champ) * var(--focus-clavier-facteur));
    border-color: var(--encre-discrete);
  }
}

@media (forced-colors: active), (prefers-contrast: more) {
  .menu-liste a[aria-current="page"]::after {
    height: var(--trait-appel);
    -webkit-mask-image: none;
    mask-image: none;
  }

  .bouton::before {
    background-color: transparent;
    -webkit-mask-image: none;
    mask-image: none;
    border: var(--trait-appel) solid var(--vermillon);
    border-radius: 0;
  }

  [data-souligne-focus]::after {
    content: none;
  }

  .bouton-secondaire::before {
    border-color: var(--encre);
  }

  .bouton-menu::after,
  .bouton-panier::after,
  .volet-fermer::after {
    content: none;
  }
}
