@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/poppins-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-latin-700-normal.woff2') format('woff2');
}

:root {
  --blanc: #FFFFFF;
  --sauge: #F2F5EF;
  --vert: #D6E6B3;
  --vert-pale: #F5F8EE;
  --clair: #F5F8EF;
  --feuille: #557236;
  --vert-fonce: #213622;
  --fonce: #111811;
  --texte: rgba(17, 24, 17, 0.75);
  --discret: rgba(17, 24, 17, 0.62);
  --texte-clair: rgba(245, 248, 239, 0.75);
  --filet-clair: rgba(245, 248, 239, 0.1);
  --filet-fonce: rgba(17, 24, 17, 0.1);

  --titres: 'Poppins', 'Trebuchet MS', system-ui, sans-serif;
  --textes: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --police-courant: 400 16px/28.8px var(--textes);
  --police-nom: 700 24px/42px var(--titres);
  --police-section: 700 40px/52px var(--titres);
  --police-bande: 700 24px/31.2px var(--titres);
  --police-pied: 700 18px/23.4px var(--titres);
  --police-article: 700 18px/23.4px var(--titres);
  --police-detail: 400 13px/22px var(--textes);
  --police-prix: 400 16px/24px var(--textes);
  --police-bouton: 400 15px/1 var(--textes);
  --police-mention: 400 12px/19.2px var(--textes);
  --police-photo: 400 13px/1 var(--textes);
  --interlettre: 0.6px;
  --interlettre-large: 1px;
  --interlettre-detail: 0.6px;

  --espace-1: 4px;
  --espace-2: 8px;
  --espace-3: 12px;
  --espace-4: 16px;
  --espace-5: 20px;
  --espace-6: 24px;
  --espace-8: 32px;
  --espace-10: 40px;
  --espace-12: 48px;

  --gouttiere: var(--espace-12);
  --section: var(--espace-10);
  --bandeau: var(--espace-12);
  --entete: 64px;

  --rayon-carte: 16px;
  --rayon-bouton: 4px;
  --rayon-barre: 2px;
}

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

body {
  margin: 0;
  background: var(--blanc);
  color: var(--texte);
  font: var(--police-courant);
  letter-spacing: var(--interlettre);
}

h1,
h2,
h3,
p,
ul,
dl,
dd {
  margin: 0;
}

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

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

footer :focus-visible {
  outline-color: var(--clair);
}

.conteneur {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.bouton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  height: 44px;
  padding: 0 var(--espace-6);
  border-radius: var(--rayon-bouton);
  background: var(--feuille);
  color: var(--clair);
  font: var(--police-bouton);
  letter-spacing: var(--interlettre-large);
  text-decoration: none;
  white-space: nowrap;
}

.bouton:hover {
  background: var(--vert-fonce);
}

.bouton--clair {
  background: var(--vert);
  color: var(--fonce);
}

.bouton--clair:hover {
  background: var(--clair);
}

.fleche {
  display: grid;
  flex: none;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.entete {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
  height: var(--entete);
  border-bottom: 1px solid var(--filet-fonce);
  background: var(--sauge);
}

.entete .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.entete__logo {
  display: block;
  padding: var(--espace-1);
}

.entete__logo img,
.titre__logo img {
  display: block;
  height: auto;
  aspect-ratio: 9038 / 9300;
}

.entete__logo img {
  width: 40px;
}

.titre {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--bandeau) var(--gouttiere);
  background: var(--sauge);
}

.titre__logo {
  padding: var(--espace-2);
}

.titre__logo img {
  width: 100px;
}

.titre h1 {
  margin-top: var(--espace-4);
  color: var(--fonce);
  font: var(--police-nom);
  text-align: center;
}

.titre p {
  max-width: 620px;
  margin-top: var(--espace-2);
  text-align: center;
  text-wrap: balance;
}

.titre .bouton {
  margin-top: var(--espace-6);
}

.rayon {
  padding: var(--section) 0;
  scroll-margin-top: var(--entete);
}

.rayon h2 {
  margin-bottom: var(--espace-8);
  color: var(--fonce);
  font: var(--police-section);
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.rayon__articles {
  display: flex;
  gap: var(--espace-4);
  margin: -6px;
  padding: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding: 0 6px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

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

.rayon__articles > li {
  flex: 0 0 calc((100% - 2 * var(--espace-4)) / 3);
  min-width: 0;
  scroll-snap-align: start;
}

.rayon__commandes {
  display: flex;
  align-items: center;
  gap: var(--espace-5);
}

.rayon__commandes[hidden] {
  visibility: hidden;
}

.rayon__barre {
  position: relative;
  flex: 1;
  height: 3px;
  border-radius: var(--rayon-barre);
  background: var(--filet-fonce);
}

.rayon__curseur {
  position: absolute;
  top: 0;
  left: calc(var(--debut, 0) * 100%);
  width: calc(var(--part, 0) * 100%);
  height: 100%;
  border-radius: var(--rayon-barre);
  background: var(--feuille);
}

.rayon__fleches {
  display: flex;
  margin-right: -15px;
}

.rayon .fleche {
  width: 44px;
  height: 44px;
  color: var(--texte);
}

.rayon .fleche:hover {
  color: var(--fonce);
}

.fiche {
  display: block;
  color: var(--fonce);
  text-decoration: none;
}

.fiche__photo {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: var(--rayon-carte);
  background: var(--sauge);
  color: var(--discret);
  font: var(--police-photo);
}

.fiche__photo img {
  width: 100%;
  height: 100%;
  border-radius: var(--rayon-carte);
  object-fit: cover;
}

.fiche__texte {
  padding: var(--espace-4) 0;
}

.fiche h3 {
  color: var(--fonce);
  font: var(--police-article);
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.fiche dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--espace-4);
  align-items: baseline;
  margin-top: var(--espace-2);
}

.fiche dt,
.fiche dd {
  font: var(--police-detail);
  letter-spacing: var(--interlettre-detail);
}

.fiche dt {
  color: var(--texte);
}

.fiche dd {
  color: var(--fonce);
}

.fiche dt:last-of-type {
  line-height: 1;
}

.fiche dd:last-of-type {
  font: var(--police-prix);
  letter-spacing: var(--interlettre-large);
}

.derriere {
  padding: var(--section) 0;
  background: var(--vert-pale);
}

.derriere .conteneur {
  display: flex;
  align-items: center;
  gap: var(--espace-8);
}

.derriere__portrait {
  display: grid;
  flex: none;
  place-items: center;
  width: 120px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: var(--vert);
  color: var(--discret);
  font: var(--police-photo);
}

.derriere__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.derriere h2 {
  color: var(--fonce);
  font: var(--police-bande);
}

.derriere p {
  max-width: 760px;
  margin-top: var(--espace-2);
  text-wrap: pretty;
}

.derriere .signature {
  color: var(--feuille);
  font-weight: 700;
}

footer {
  padding: var(--espace-12) 0;
  background: var(--vert-fonce);
}

.pied__blocs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: var(--espace-4);
  padding-bottom: var(--espace-12);
}

.pied__blocs h2 {
  color: var(--clair);
  font: var(--police-pied);
}

.pied__blocs p {
  max-width: 440px;
  margin-top: var(--espace-3);
  color: var(--texte-clair);
  text-wrap: pretty;
}

.pied__blocs .bouton {
  margin-top: var(--espace-6);
}

.pied__bas {
  padding-top: var(--espace-8);
  border-top: 1px solid var(--filet-clair);
}

.pied__bas .conteneur {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: var(--espace-1) var(--espace-10);
}

.pied__bas p {
  color: var(--texte-clair);
  font: var(--police-mention);
}

.pied__auteur {
  text-align: center;
}

.pied__licence {
  text-align: right;
}

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

.pied__bas a:hover {
  color: var(--clair);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pied__auteur a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pied__bas span {
  white-space: nowrap;
}

@media (width < 750px) {
  :root {
    --police-courant: 400 15px/27px var(--textes);
    --police-nom: 700 24px/31.2px var(--titres);
    --police-section: 700 30px/39px var(--titres);
    --police-bande: 700 20px/26px var(--titres);
    --police-pied: 700 16px/20.8px var(--titres);
    --police-article: 700 16px/20.8px var(--titres);
    --police-detail: 400 12px/20px var(--textes);
    --police-prix: 400 15px/24px var(--textes);
    --interlettre-detail: 0;

    --gouttiere: var(--espace-4);
    --section: var(--espace-8);
    --bandeau: var(--espace-8);
    --entete: 60px;
  }

  .entete__logo img {
    width: 36px;
  }

  .titre {
    padding-inline: var(--espace-8);
  }

  .titre h1 {
    margin-top: var(--espace-3);
  }

  .rayon h2 {
    margin-bottom: var(--espace-6);
  }

  .rayon__corps {
    padding-inline: 0;
  }

  .rayon__articles {
    gap: var(--espace-2);
    margin: -6px 0;
    padding: 6px var(--gouttiere);
    scroll-padding: 0 var(--gouttiere);
  }

  .rayon__articles > li {
    flex: 0 0 160px;
  }

  .rayon__commandes {
    padding: var(--espace-2) var(--gouttiere) 0;
  }

  .rayon__fleches {
    display: none;
  }

  .fiche__texte {
    padding: var(--espace-3) 0;
  }

  .fiche dl {
    column-gap: var(--espace-2);
  }

  .derriere .conteneur {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--espace-4);
  }

  .derriere__portrait {
    width: 88px;
  }

  footer {
    padding: var(--espace-8) 0;
  }

  .pied__blocs {
    gap: var(--espace-8);
    padding-bottom: var(--espace-8);
  }

  .pied__blocs p {
    margin-top: var(--espace-2);
  }

  .pied__bas {
    padding-top: var(--espace-6);
  }

  .pied__bas .conteneur {
    grid-template-columns: 1fr;
  }

  .pied__auteur,
  .pied__licence {
    text-align: left;
  }
}