@font-face {
  font-family: 'Fredoka';
  src: url('/assets/fonts/fredoka-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212;
}
@font-face { font-family:'Poppins'; src:url('/assets/fonts/poppins-400-latin.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('/assets/fonts/poppins-500-latin.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('/assets/fonts/poppins-600-latin.woff2') format('woff2'); font-weight:600; font-display:swap; }

:root {
  --rose: #ff5c8a;
  --rouge: #e63958;
  --rouge-profond: #c41e3a;
  --citron: #ffe14d;
  --citron-profond: #f7c948;

  --vert-lime: #3f7d20;
  --encre: #1a1130;
  --encre-douce: #6b5d7d;
  --creme: #fff7f0;
  --blanc: #ffffff;
  --filet: rgba(26, 17, 48, 0.1);
  --large: 1120px;
  --mesure: 62ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

:root {
  --texte: 1.0625rem;
  --texte-petit: 0.9375rem;
  --texte-mini: 0.8125rem;
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: var(--texte);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, .marque {
  font-family: 'Fredoka', 'Poppins', sans-serif;
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.5px;
  margin: 0;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }

h2 { font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: 0.8rem; }
h3 { font-size: 1.15rem; line-height: 1.25; }

p { margin: 0 0 1rem; max-width: var(--mesure); }
a { color: inherit; text-underline-offset: 0.2em; }

.enveloppe { max-width: var(--large); margin: 0 auto; padding: 0 6vw; }

.bandeau {
  position: relative;
  background: var(--encre); color: var(--creme);
  text-align: center; padding: 0.65rem 1rem;
  font-size: 0.875rem; font-weight: 500;
}

.bandeau { overflow: hidden; padding-inline: 0; }
.bandeau__piste {
  display: flex; width: max-content;
  animation: bandeau-defile 34s linear infinite;
}
.bandeau__piste:hover, .bandeau__piste:focus-visible { animation-play-state: paused; }
.bandeau__piste:focus-visible { outline: 2px solid var(--encre); outline-offset: -2px; }
.bandeau span {
  display: inline-flex; flex-wrap: nowrap; align-items: center;
  justify-content: center; gap: 0.5rem;
  padding-inline: 3rem; white-space: nowrap;
}
@keyframes bandeau-defile {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.bandeau__code {
  font-family: 'Fredoka', sans-serif; font-weight: 700; letter-spacing: 0.06em;
  padding: 0.12rem 0.6rem; border-radius: 999px; white-space: nowrap;
}
.bandeau small { font-size: 0.8125rem; font-weight: 400; opacity: 0.7; }

.bandeau {
  background: linear-gradient(120deg, var(--citron), var(--rose));
  color: var(--encre);
}
.bandeau__code { background: var(--encre); color: var(--creme); }

.entete { background: var(--creme); }

.entete__inner {
  display: flex; flex-direction: row; align-items: center; flex-wrap: wrap;
  gap: 0.9rem 2rem;
  max-width: var(--large); margin: 0 auto; padding: 0.8rem 6vw;
}

.marque {
  display: inline-flex; align-items: center; gap: 0.3em;
  font-size: 1.5rem; text-decoration: none; letter-spacing: -1px;
}
.marque svg { height: 1em; width: auto; flex: none; }
.marque em { font-style: normal; color: var(--rose); }
.nav { display: flex; gap: 1.6rem; flex-wrap: wrap; justify-content: flex-start; font-size: 0.9375rem; font-weight: 500; }
.nav a { text-decoration: none; }
.nav a:hover { color: var(--rose); }

.entete__outils {
  margin-left: auto;
  display: flex; align-items: center; gap: 0.35rem;
}

@media (min-width: 861px) {
  .entete__inner { flex-wrap: nowrap; }
  .nav { order: 1; flex: 1 1 0; min-width: 0; }
  .marque { order: 2; flex: 0 0 auto; }
  .entete__outils { order: 3; flex: 1 1 0; margin-left: 0; justify-content: flex-end; }
}
.icone {
  display: inline-flex; padding: 0.4rem; border-radius: 999px;
  color: inherit; text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.icone svg { width: 22px; height: 22px; display: block; }
.icone:hover { color: var(--rose); background: rgba(255, 92, 138, 0.1); }
.icone:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }

.ajout-confirme {
  margin: 0.75rem 0 0; padding: 0.6rem 0.9rem; border-radius: 14px;
  background: rgba(255, 92, 138, 0.12); font-size: 0.875rem; font-weight: 500;
}
.ajout-confirme a { font-weight: 600; }

.icone--panier { position: relative; }
.pastille-panier {
  position: absolute; top: -2px; right: -2px;
  min-width: 1.15rem; height: 1.15rem; padding: 0 0.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--rose); color: var(--blanc);
  font-size: 0.6875rem; font-weight: 700; line-height: 1;
  box-shadow: 0 2px 6px rgba(26, 17, 48, 0.25);
}

.entete--ajout .icone--panier { animation: panier-battement 1.15s ease-in-out both; }
@keyframes panier-battement {
  0%   { transform: scale(1); }
  8%   { transform: scale(1.35); }
  19%  { transform: scale(1); }
  29%  { transform: scale(1.35); }
  40%  { transform: scale(1); }
  50%  { transform: scale(1.35); }
  61%  { transform: scale(1); }
  100% { transform: scale(1); }
}

.menu__bascule { position: absolute; opacity: 0; width: 0; height: 0; }

.menu__burger { display: none; }
.menu__bascule:focus-visible + .menu__burger {
  outline: 3px solid var(--rose); outline-offset: 2px;
}

@media (max-width: 860px) {

  .entete__inner { gap: 0.8rem 1.2rem; position: relative; flex-wrap: nowrap; }
  .menu__burger { order: 1; flex: 1 0 auto; }
  .marque { order: 2; flex: 0 1 auto; justify-content: center; }
  .entete__outils { order: 3; flex: 1 0 auto; justify-content: flex-end; }
  .menu__burger {
    display: inline-flex; align-items: center; margin-left: 0; margin-right: auto;
    padding: 0.4rem; border-radius: 999px; cursor: pointer; color: inherit;
    transition: color 0.15s ease, background-color 0.15s ease;
  }

  .icone--panier-vide { display: none; }
  .menu__burger svg { width: 24px; height: 24px; display: block; }
  .menu__burger:hover { color: var(--rose); background: rgba(255, 92, 138, 0.1); }

  .entete__outils { margin-left: 0; }

  .entete__inner { flex-wrap: nowrap; }
  .marque { font-size: 1.3rem; }
  .marque__pro { margin-left: 0.3rem; padding: 0.05rem 0.35rem; }

  .compte-menu { position: static; }
  .compte-menu__tiroir { right: 3vw; left: auto; top: 100%; }

  .bascule button { padding: 0.3rem 0.5rem; font-size: 0.68rem; }
  .bascule__pro { letter-spacing: 0.5px; }

  .video-ouverture .video-ouverture__sur { text-align: center; }
  .video-ouverture .video-ouverture__sur .slogan__l1,
  .video-ouverture .video-ouverture__sur .slogan__l2,
  .video-ouverture .video-ouverture__sur .slogan__l3 { margin-inline: auto; }
  .video-ouverture .video-ouverture__sur .slogan__mots { margin-inline: auto; }
  .nav { display: none; }

  .menu__bascule:checked ~ .nav {
    display: flex; flex-direction: column; gap: 0.2rem;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
    margin-top: 0.8rem; padding: 0.6rem 6vw 1.1rem;
    background: var(--creme); border-top: 1px solid var(--filet);
    box-shadow: 0 18px 30px rgba(26, 17, 48, 0.12);
    font-size: 1.0625rem;
  }
  .menu__bascule:checked ~ .nav a { padding: 0.65rem 0; }
}

@media (max-width: 520px) {
  .entete__outils { gap: 0.1rem; }
  .icone { padding: 0.3rem; }
  .icone svg { width: 20px; height: 20px; }
  .menu__burger { padding: 0.3rem; }
  .marque { font-size: 1.15rem; }

  .compte-menu__tiroir { min-width: 0; width: min(14rem, calc(100vw - 12vw)); }
}

:root { --haut-entete: 113px; }

.video-ouverture { padding: 0; background: var(--encre); line-height: 0; position: relative; }

.video-ouverture__sur {
  position: absolute; inset: auto 0 0 0; pointer-events: none;
  padding: clamp(3rem, 9vw, 7rem) 0 clamp(1.75rem, 4vw, 3rem);
  text-align: center; line-height: 1.15;
  background: linear-gradient(to top, rgba(26, 17, 48, 0.72) 35%, rgba(26, 17, 48, 0));
}

.video-ouverture__sur .slogan__titre {
  color: var(--blanc);
  max-width: none;
  margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
  letter-spacing: 0;
}

.slogan__l1, .slogan__l2, .slogan__l3 {
  display: block; width: fit-content; margin-inline: auto;
  white-space: nowrap; line-height: 1.05;
}

.slogan__l1 { font-size: min(6.60vw, 5.20rem); }
.slogan__l2 { font-size: min(4.71vw, 3.71rem); }
.slogan__l3 { font-size: min(7.49vw, 5.90rem); font-style: normal; }

.video-ouverture__sur .slogan__l1 { font-size: min(3.30vw, 2.60rem); }
.video-ouverture__sur .slogan__l2 { font-size: min(2.36vw, 1.86rem); }
.video-ouverture__sur .slogan__l3 { font-size: min(3.75vw, 2.95rem); }

.video-ouverture__sur .slogan__titre em { color: var(--rose); }

.video-ouverture__sur .slogan__mots { gap: 0.7rem; max-width: 46rem; }

.video-ouverture__sur .slogan__mots li {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  background: rgba(255, 255, 255, 0.9); border-radius: 16px; padding: 0.75rem 0.5rem;
  font-size: clamp(0.7rem, 1.15vw, 0.85rem); letter-spacing: 1.5px;
  box-shadow: 0 14px 32px rgba(26, 17, 48, 0.32);
}
.video-ouverture__sur .slogan__picto { width: 1.35rem; height: 1.35rem; }

@media (max-width: 719px) {
  .video-ouverture__sur { padding-top: clamp(2rem, 12vw, 4rem); }
}

.video-ouverture--v2 .video-ouverture__sur { background: none; }

.video-ouverture--v2 .video-ouverture__sur { text-align: left; }
.video-ouverture--v2 .slogan__l1,
.video-ouverture--v2 .slogan__l2,
.video-ouverture--v2 .slogan__l3 { margin-inline: 0; }
.video-ouverture--v2 .video-ouverture__sur .slogan__titre {
  margin-inline: 0;
  text-shadow: 0 2px 18px rgba(26, 17, 48, 0.55);
}

.video-ouverture--v2 .video-ouverture__sur .slogan__mots {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem; max-width: 20rem; margin-inline: 0;
}

.video-ouverture--v2 .video-ouverture__sur .slogan__mots li {
  padding: 0.55rem 0.4rem; gap: 0.3rem;
  font-size: clamp(0.6rem, 0.95vw, 0.72rem); letter-spacing: 1px;
}
.video-ouverture--v2 .video-ouverture__sur .slogan__picto { width: 1.1rem; height: 1.1rem; }

@media (max-width: 719px) {
  .video-ouverture .video-ouverture__sur .slogan__l1 { font-size: 7.59vw; }
  .video-ouverture .video-ouverture__sur .slogan__l2 { font-size: 5.42vw; }
  .video-ouverture .video-ouverture__sur .slogan__l3 { font-size: 8.61vw; }

  .video-ouverture .video-ouverture__sur {
    inset: 0;
    padding: clamp(1rem, 4vw, 2rem) 0 clamp(1.25rem, 5vw, 2rem);
  }
  .video-ouverture .video-ouverture__sur .enveloppe {
    height: 100%; display: flex; flex-direction: column; justify-content: space-between;
  }

  .video-ouverture .video-ouverture__sur .slogan__titre { margin-bottom: 0; }

  .video-ouverture--v1 .video-ouverture__sur {
    background: linear-gradient(to bottom,
      rgba(26, 17, 48, 0.72) 0%, rgba(26, 17, 48, 0) 32%,
      rgba(26, 17, 48, 0) 68%, rgba(26, 17, 48, 0.72) 100%);
  }
}

.video-ouverture__media {
  display: block; width: 100%;
  height: calc(100svh - var(--haut-entete));
  min-height: 300px;
  object-fit: cover; background: var(--encre);
}

@media (max-width: 860px) { :root { --haut-entete: 113px; } }
@media (max-width: 520px) { :root { --haut-entete: 125px; } }

.slogan__titre {
  font-family: 'Fredoka', sans-serif; font-weight: 700;
  font-size: clamp(1.35rem, 2.8vw, 2.3rem); line-height: 1.15;
  margin: 0 auto clamp(1.4rem, 3vw, 2.25rem); max-width: 34ch;
  text-transform: uppercase; letter-spacing: 1px;
}
.slogan__titre em { font-style: normal; color: var(--rose); }

.slogan__mots {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1rem 0.5rem; margin: 0 auto; padding: 0; max-width: 62rem;
  list-style: none;
}
.slogan__mots li {
  font-family: 'Fredoka', sans-serif; font-weight: 600;
  font-size: clamp(0.8rem, 1.5vw, 1.05rem);
  letter-spacing: 2px; text-transform: uppercase;
  line-height: 1.3;
}

.slogan__picto { width: 1.9rem; height: 1.9rem; color: var(--rose); }

@media (max-width: 719px) {
  .slogan__mots { grid-template-columns: repeat(2, 1fr); }
}

.appel-boutique {
  text-align: center;
  padding: clamp(2.25rem, 5vw, 3.25rem) 0;
  background:
    radial-gradient(circle at 18% 25%, rgba(255, 225, 77, 0.5), transparent 55%),
    radial-gradient(circle at 82% 75%, rgba(255, 92, 138, 0.42), transparent 55%),
    var(--creme);
}
.appel-boutique h1 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); margin-bottom: 0.2rem; }
.appel-boutique p { margin-left: auto; margin-right: auto; }

.appel__inner { display: flex; align-items: center; justify-content: center; gap: clamp(0.5rem, 3vw, 2.5rem); }
.appel__texte { flex: 0 1 34rem; }
.appel__sous {
  font-family: 'Fredoka', sans-serif; font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--encre-douce); margin-bottom: 1.6rem;
}

.appel__canette { flex: none; display: block; }
.appel__canette .canette { height: clamp(170px, 26vh, 300px); }

.appel__canette--gauche .canette { transform: rotate(-13deg); }
.appel__canette--droite .canette { transform: rotate(13deg); }

@media (max-width: 860px) { .appel__canette { display: none; } }

.appel-boutique .bouton--vedette {
  display: inline-flex; flex-direction: column; gap: 0.15rem; line-height: 1.15;
}
.appel-boutique .bouton--vedette small { font-size: 0.8125rem; font-weight: 500; opacity: 0.92; }

.bouton--vedette {
  font-size: 1.0625rem; padding: 1rem 2.4rem;
  box-shadow: 0 14px 30px rgba(255, 92, 138, 0.45);
}

.shop__produits { padding: clamp(1rem, 2vw, 1.75rem) 0 clamp(2rem, 4vw, 3rem); }
.vignettes { display: grid; gap: clamp(1rem, 1.8vw, 1.5rem); }
@media (min-width: 640px) { .vignettes { grid-template-columns: 1fr 1fr; } }

@media (min-width: 900px) { .vignettes { grid-template-columns: repeat(3, 1fr); } }

.vignette {
  display: flex; flex-direction: column;
  background: var(--blanc); border-radius: 28px; overflow: hidden;
  text-decoration: none; color: inherit;
  box-shadow: 0 10px 30px rgba(26, 17, 48, 0.07);
  transition: transform 0.25s, box-shadow 0.25s;
}
.vignette:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(26, 17, 48, 0.14); }
.vignette:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }

.vignette__scene {
  display: flex; align-items: center; justify-content: center; gap: 1.5rem;

  height: clamp(200px, calc(100svh - var(--haut-entete) - 230px), 420px);
  padding: clamp(1rem, 2vw, 1.75rem);
}
.vignette--citron { background: linear-gradient(155deg, #fff3b0, var(--citron)); }
.vignette--rouge { background: linear-gradient(155deg, #ff8fae, var(--rouge)); }
.vignette--duo { background: linear-gradient(120deg, #ffe14d 0%, #ffd0dc 50%, var(--rose) 100%); }

.vignette__scene picture {
  display: flex; align-items: center; justify-content: center;
  height: 100%; min-height: 0; max-width: 100%;
}

.vignette__canette {
  display: block; max-height: 100%; max-width: 100%; width: auto; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 22px 34px rgba(26, 17, 48, 0.3));
}
.vignette__scene .canette--absente { height: 100%; width: auto; aspect-ratio: 1 / 2.1; }

.vignette__scene.vignette--duo { gap: 0; }
.vignette--duo picture {
  transform-origin: bottom center;
  transition: transform 0.2s ease;
}

.vignette--duo picture:first-of-type {
  transform: rotate(-5deg) translateX(22%) scale(0.9);
  z-index: 2;
}
.vignette--duo picture:last-of-type {
  transform: rotate(5deg) translateX(-22%) scale(0.9);
}

.vignette:hover .vignette--duo picture:first-of-type {
  transform: rotate(-6deg) translateX(22%) scale(0.92);
}
.vignette:hover .vignette--duo picture:last-of-type {
  transform: rotate(6deg) translateX(-22%) scale(0.92);
}

@media (prefers-reduced-motion: reduce) {
  .vignette--duo picture { transition: none; }
  .vignette:hover .vignette--duo picture:first-of-type {
    transform: rotate(-5deg) translateX(22%) scale(0.9);
  }
  .vignette:hover .vignette--duo picture:last-of-type {
    transform: rotate(5deg) translateX(-22%) scale(0.9);
  }
}

.vignette__texte {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.vignette__nom { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.5rem; line-height: 1.05; }
.vignette__degustation { color: var(--encre-douce); font-size: 0.9375rem; }
.vignette__prix { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.15rem; margin-top: 0.35rem; }

.vignette__bouton { margin-top: 0.9rem; cursor: pointer; }

.pitch { padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
.pitch__texte {
  background: var(--rouge); color: var(--blanc);
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.75rem, 4.5vw, 4rem);
  display: flex; flex-direction: column; justify-content: center;
}
.pitch__texte .surtitre { color: rgba(255, 255, 255, 0.75); }
.pitch__texte h2 { color: var(--blanc); margin-bottom: 1.4rem; }

.pitch__texte p { color: #ffe0e6; max-width: 44ch; }

.pitch__visuel {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  padding: clamp(2.5rem, 5vw, 4rem);
  background: linear-gradient(135deg, #fff6f7 0%, #ffe3ea 55%, #ffd3de 100%);
}

.pitch__visuel--photo { padding: 0; }
.pitch__photo {
  display: block; width: 100%; height: 100%;
  min-height: 22rem; object-fit: cover; object-position: center;
}

.pitch__photo--gauche { object-position: 32% center; }

.pitch__visuel .canette { height: clamp(260px, 40vh, 420px); width: auto; }

.pitch__fruit { position: absolute; font-size: clamp(1.4rem, 2.4vw, 2rem); opacity: 0.55; }
.pitch__fruit--haut { top: 14%; right: 18%; }
.pitch__fruit--bas { bottom: 16%; left: 16%; }
.pitch__fruit--droite { bottom: 12%; right: 14%; }

@media (min-width: 860px) {
  .pitch--inverse .pitch__visuel { order: -1; }
}

.pitch--citron .pitch__texte { background: var(--citron); color: var(--encre); }
.pitch--citron .pitch__texte h2 { color: var(--encre); }
.pitch--citron .pitch__texte p { color: #5c4a0a; }
.pitch--citron .pitch__texte .surtitre { color: #7a6712; }

.pitch--citron .pitch__visuel {
  background: linear-gradient(135deg, #fffdf0 0%, #fff3b0 55%, var(--citron) 100%);
}

@media (max-width: 859px) {
  .pitch { grid-template-columns: 1fr; }
  .pitch__visuel { min-height: 340px; }
}

.lien-fleche {
  display: inline-block; margin-top: 0.5rem; font-weight: 600; color: var(--rouge);
  text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 2px;
}
.lien-fleche::after { content: ' →'; text-decoration: none; }
.lien-fleche:hover { color: var(--rose); }

.lien-fleche--clair { color: var(--blanc); }
.lien-fleche--clair:hover { color: var(--citron); }

section { padding: clamp(3.5rem, 8vw, 6rem) 0; }

.hero {
  text-align: center;
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 225, 77, 0.55), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(230, 57, 88, 0.4), transparent 45%),
    var(--creme);
}
.hero h1 { margin-bottom: 1.1rem; }
.hero h1 em { font-style: normal; color: var(--rose); }
.hero p { font-size: 1.15rem; max-width: 34rem; margin-left: auto; margin-right: auto; color: var(--encre-douce); }

.etiquette {
  display: inline-block; background: var(--blanc); border: 2px solid var(--encre);
  padding: 0.35rem 1rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 1.3rem;
}
.surtitre {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--encre-douce); margin: 0 0 0.9rem;
}

.bouton {
  display: inline-block; text-decoration: none;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.05rem;
  padding: 0.95rem 2.1rem; border-radius: 999px; border: 2px solid transparent;
  transition: transform 0.2s, box-shadow 0.2s;
}
.bouton--principal {
  background: var(--rose); color: var(--blanc);
  box-shadow: 0 10px 24px rgba(255, 92, 138, 0.4);
}
.bouton--principal:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(255, 92, 138, 0.5); }

.bouton--petit { padding: 0.45rem 1rem; font-size: var(--texte-petit); border-width: 1px; }
.bouton--discret { background: transparent; color: var(--encre); border-color: var(--encre); }
.bouton--discret:hover { background: var(--encre); color: var(--creme); }
.rassurance { margin-top: 1rem; font-size: 0.875rem; font-weight: 500; color: var(--encre-douce); }

.chiffres {
  display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;
  margin: 0 0 1.5rem;
}
.chiffre {
  background: var(--blanc); border-radius: 20px; padding: 1.1rem 1.4rem;
  text-align: center; min-width: 8.5rem;
  box-shadow: 0 6px 20px rgba(26, 17, 48, 0.08);
}
.chiffre b {
  display: block; font-family: 'Fredoka', sans-serif; font-weight: 700;
  font-size: 1.9rem; line-height: 1; color: var(--rose);
}
.chiffre span {
  display: block; margin-top: 0.4rem;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--encre-douce);
}

.grille { display: grid; gap: 1.4rem; }
@media (min-width: 780px) {
  .grille--3 { grid-template-columns: repeat(3, 1fr); }
  .grille--2 { grid-template-columns: repeat(2, 1fr); }
}
.carte {
  background: var(--blanc); border-radius: 24px; padding: 2rem 1.5rem;
  border: 2px solid transparent;
  box-shadow: 0 8px 24px rgba(26, 17, 48, 0.06);
  transition: transform 0.25s, border-color 0.25s;
}
.carte:hover { transform: translateY(-6px); border-color: var(--rose); }
.carte h3 { margin-bottom: 0.5rem; }
.carte p { font-size: 0.9375rem; color: var(--encre-douce); }
.carte .prix { font-family: 'Fredoka', sans-serif; font-size: 1.35rem; color: var(--encre); }

.carte--centree { text-align: center; }
.carte--centree p { margin-left: auto; margin-right: auto; }
.carte--centree p:last-child { margin-bottom: 0; }
.carte p.carte__icone { font-size: 2.6rem; line-height: 1; margin-bottom: 0.8rem; }

.icone-drapeau {
  height: 0.78em; width: auto; vertical-align: -0.05em;
  filter: drop-shadow(0 2px 3px rgba(26, 17, 48, 0.22));
}

.centre { text-align: center; margin-bottom: 2.5rem; }
.centre p, .centre h2 { margin-left: auto; margin-right: auto; }
.sous-titre { color: var(--encre-douce); font-size: 1.05rem; }

.carte--rouge { border-top: 6px solid var(--rouge); }
.carte--citron { border-top: 6px solid var(--citron); }
.carte--duo { border-top: 6px solid var(--rose); }

.selecteur__titre {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--encre); opacity: 0.7; margin: 0 0 0.5rem; padding: 0;
}

.formats {
  display: grid; gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}
.format {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 0.15rem; text-align: center;
  padding: 0.8rem 0.5rem 0.7rem;
  background: var(--blanc); border: 2px solid var(--filet); border-radius: 18px;
  box-shadow: 0 6px 18px rgba(26, 17, 48, 0.05);

  transform: scale(0.96);

  transition:
    border-color 0.15s,
    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.3s ease-out;
}
.format__nom {
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.5rem; line-height: 1;
}

.format__nom small { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; color: var(--encre-douce); }

.format__prix {
  font-family: 'Fredoka', sans-serif; font-size: 1.7rem; line-height: 1.1;
  font-variant-numeric: tabular-nums; margin-top: 0.55rem;
}

.format__comparateurs {
  display: block; margin-top: 0.45rem; color: var(--encre-douce);
  font-size: 0.6875rem; line-height: 1.4; font-variant-numeric: tabular-nums;
}

.format__note {
  margin: 0.9rem 0 0; font-size: 0.8125rem; color: var(--blanc);
  max-width: none; text-align: center;
}
.fiche--citron .format__note, .fiche--duo .format__note { color: var(--encre); }

.fiche--rouge {
  --abo-encre: #fbdfe4; --abo-trait: rgba(255, 255, 255, 0.45);
  --abo-filet: rgba(255, 255, 255, 0.28); --abo-survol: rgba(255, 255, 255, 0.12);
  --abo-accent: var(--rouge);
}
.fiche--citron {
  --abo-encre: #6b5a10; --abo-trait: rgba(107, 90, 16, 0.38);
  --abo-filet: rgba(107, 90, 16, 0.2); --abo-survol: rgba(255, 255, 255, 0.4);

  --abo-accent: var(--vert-lime);
}
.fiche--duo {
  --abo-encre: #6d3040; --abo-trait: rgba(109, 48, 64, 0.38);
  --abo-filet: rgba(109, 48, 64, 0.2); --abo-survol: rgba(255, 255, 255, 0.4);

  --abo-accent: var(--rouge);
}
.abo-choix { border: 0; padding: 0; margin: 1.4rem 0 0; }
.abo-choix__legende {
  padding: 0 0 0.35rem;
  font-size: 0.7rem; letter-spacing: 1.5px; text-transform: uppercase;
  font-weight: 600; opacity: 0.8;
}
.abo-choix__cadre {
  display: flex; flex-direction: column;
  border: 1px solid var(--abo-trait, rgba(255, 255, 255, 0.45)); border-radius: 14px;
  overflow: hidden;
}

.abo-choix__carte::before {
  content: ""; position: absolute; left: 0.9rem; top: 0.85rem;
  width: 0.95rem; height: 0.95rem;
  border: 2px solid var(--abo-encre, rgba(255, 255, 255, 0.6)); border-radius: 50%;
  transition: border-color 0.15s, background 0.15s;
}
.abo-choix__carte:has(input:checked)::before {
  border-color: var(--abo-accent, var(--rouge));
  background: radial-gradient(var(--abo-accent, var(--rouge)) 46%, transparent 48%);
}
.abo-choix__carte {
  position: relative; cursor: pointer;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.1rem 0.55rem;
  padding: 0.65rem 0.9rem 0.7rem 2.4rem;
  transition: background 0.15s;

  color: var(--abo-encre, #fbdfe4);
}

.abo-choix__carte input { position: absolute; opacity: 0; pointer-events: none; }

.abo-choix__carte + .abo-choix__carte { border-top: 1px solid var(--abo-filet, rgba(255, 255, 255, 0.28)); }
.abo-choix__carte:hover { background: var(--abo-survol, rgba(255, 255, 255, 0.12)); }
.abo-choix__carte:has(input:checked) { background: var(--blanc); color: var(--abo-accent, var(--rouge)); }
.abo-choix__carte:has(input:focus-visible) { outline: 2px solid var(--blanc); outline-offset: -3px; }
.abo-choix__carte:has(input:checked):has(input:focus-visible) { outline-color: var(--abo-accent, var(--rouge)); }

.abo-choix__titre { font-family: 'Fredoka', sans-serif; font-size: 0.95rem; line-height: 1.25; }

.abo-choix__carte:has(input:checked) .abo-choix__titre { color: var(--encre); font-weight: 700; }

.abo-choix__note { font-size: 0.78rem; line-height: 1.3; opacity: 0.82; }

.abo-choix__rythmes {
  display: none;
  flex-wrap: wrap; align-items: center; gap: 0.4rem;
  padding: 0 0.9rem 0.8rem 2.4rem;
  background: var(--blanc); color: var(--abo-accent, var(--rouge));
}
.abo-choix:has(.abo-choix__carte--abo input:checked) .abo-choix__rythmes { display: flex; }

.abo-choix__rythmes-titre {
  font-size: 0.7rem; letter-spacing: 1px; text-transform: uppercase;
  font-weight: 600; opacity: 0.7;

  flex-basis: 100%; margin: 0 0 0.15rem;
}
.abo-choix__rythme { position: relative; cursor: pointer; }
.abo-choix__rythme input { position: absolute; opacity: 0; pointer-events: none; }

.abo-choix__rythme span {
  display: inline-block; padding: 0.3rem 0.7rem;
  color: var(--abo-accent, var(--rouge));
  border: 1.5px solid color-mix(in srgb, var(--abo-accent, var(--rouge)) 40%, transparent);
  border-radius: 999px;
  font-size: 0.8125rem; transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.abo-choix__rythme:hover span { border-color: var(--abo-accent, var(--rouge)); }
.abo-choix__rythme:has(input:checked) span {
  border-color: var(--abo-accent, var(--rouge));
  background: var(--abo-accent, var(--rouge));
  color: var(--blanc); font-weight: 600;
}
.abo-choix__rythme:has(input:focus-visible) span { outline: 3px solid var(--rose); outline-offset: 2px; }

.badge-abo {
  display: inline-block; margin-left: 0.4rem;
  padding: 0.1rem 0.5rem 0.15rem;
  border-radius: 999px; background: var(--rose); color: var(--blanc);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.3px;
  white-space: nowrap; vertical-align: 0.05em;
}

.badge-abo--prelevement {
  background: rgba(26, 17, 48, 0.07); color: var(--encre-douce); font-weight: 500;
}

.panier__abo {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.6rem;
  margin-top: 0.45rem;
}
.panier__abo .badge-abo { margin-left: 0; }
.panier__abo-texte { font-size: 0.8125rem; color: var(--encre-douce); }
.panier__abo form { margin: 0; }

.recap__abo {
  margin: 0.75rem 0 0; padding-top: 0.75rem;
  border-top: 1px solid var(--filet);
  font-size: 0.875rem; color: var(--encre-douce);
}
.recap__abo b { color: var(--encre); }

.abo { position: relative; }
.abo__entete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 0.35rem;
}
.abo__entete h2 { margin: 0; font-size: 1.25rem; }

.abo__etat {
  display: inline-block; padding: 0.2rem 0.7rem 0.25rem; border-radius: 999px;
  font-size: 0.6875rem; letter-spacing: 0.6px; text-transform: uppercase; font-weight: 600;
  background: var(--filet); color: var(--encre-douce);
}
.abo__etat--actif { background: #d7f5e1; color: #14663a; }
.abo--resilie { opacity: 0.62; }

.abo__lignes { list-style: none; padding: 0; margin: 0 0 1rem; }
.abo__lignes li { padding: 0.15rem 0; color: var(--encre-douce); }
.abo__lignes b { color: var(--encre); }

.abo__prochaine {
  background: var(--creme); border-radius: 18px; padding: 0.9rem 1.1rem; margin: 0 0 1.1rem;
}
.abo__prochaine-titre {
  display: block; font-size: 0.6875rem; letter-spacing: 1px; text-transform: uppercase;
  font-weight: 600; color: var(--encre-douce); margin-bottom: 0.15rem;
}
.abo__date { font-family: 'Fredoka', sans-serif; font-size: 1.5rem; line-height: 1.15; }
.abo__delai { display: block; font-size: 0.875rem; color: var(--encre-douce); margin-top: 0.1rem; }

.abo__quantites { margin: 0 0 0.9rem; }

.abo__lignes--saisie { max-width: 34rem; }
.abo__lignes--saisie { margin-bottom: 0.75rem; }
.abo__lignes--saisie li { padding: 0.25rem 0; }
.abo__lignes--saisie label {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;

  flex-wrap: wrap;
}
.abo__lignes--saisie input {
  width: 5rem; flex: none; text-align: center;
  padding: 0.4rem 0.5rem; border: 2px solid var(--filet); border-radius: 12px;
  font: inherit; color: var(--encre); background: var(--blanc);
}
.abo__lignes--saisie input:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }

.abo__rythme { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; }
.abo__rythme-titre {
  font-size: 0.6875rem; letter-spacing: 1px; text-transform: uppercase;
  font-weight: 600; color: var(--encre-douce); margin-right: 0.25rem;
}
.abo__choix { position: relative; cursor: pointer; }
.abo__choix input { position: absolute; opacity: 0; pointer-events: none; }
.abo__choix span {
  display: inline-block; padding: 0.35rem 0.7rem; min-width: 3rem; text-align: center;
  border: 2px solid var(--filet); border-radius: 999px; font-size: 0.8125rem;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.abo__choix:hover span { border-color: var(--rose); }

.abo__choix:has(input:checked) span {
  background: var(--rose); border-color: var(--rose); color: var(--blanc); font-weight: 600;
}
.abo__choix:has(input:focus-visible) span { outline: 3px solid var(--rose); outline-offset: 2px; }

.abo__actions {
  display: flex; justify-content: flex-end; margin: 1.2rem 0 0;
  padding-top: 0.9rem; border-top: 1px solid var(--filet);
}

.formats__mix {
  margin: 0 0 0.9rem; font-size: 0.8125rem; color: var(--blanc);
  max-width: none; text-align: center;
}
.fiche--citron .formats__mix, .fiche--duo .formats__mix { color: var(--encre); }

.fanion {
  display: inline-block; background: var(--encre); color: var(--creme);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
  padding: 0.15rem 0.6rem; border-radius: 999px; margin-left: 0.4rem; vertical-align: 0.1em;
}

.listes { display: grid; gap: 1.4rem; }
@media (min-width: 660px) { .listes { grid-template-columns: 1fr 1fr; } }
.listes > div { background: var(--blanc); border-radius: 24px; padding: 1.75rem 1.5rem; box-shadow: 0 8px 24px rgba(26,17,48,.06); }
.listes ul { list-style: none; padding: 0; margin: 0.75rem 0 0; }
.listes li { padding: 0.5rem 0; border-bottom: 1px solid var(--filet); font-size: 0.9375rem; }
.listes li:last-child { border-bottom: 0; }

.defilant { overflow-x: auto; background: var(--blanc); border-radius: 24px; box-shadow: 0 8px 24px rgba(26,17,48,.06); }

.tableau, .adm__table {
  width: 100%; border-collapse: collapse; min-width: 30rem;
  background: var(--blanc); border-radius: 20px; overflow: hidden;
}
.tableau th, .tableau td,
.adm__table th, .adm__table td {
  text-align: left; padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--filet);
  vertical-align: middle;
}
.tableau thead th, .adm__table thead th {
  font-family: 'Fredoka', sans-serif; font-weight: 600; background: var(--creme);
}
.tableau tbody tr:last-child th, .tableau tbody tr:last-child td,
.adm__table tbody tr:last-child th, .adm__table tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 719px) {

  .defilant { overflow-x: visible; background: transparent; box-shadow: none; border-radius: 0; }

  .tableau, .adm__table {
    display: block; min-width: 0; background: transparent; box-shadow: none;
  }
  .tableau thead, .adm__table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .tableau tbody, .adm__table tbody { display: block; }
  .tableau tbody tr, .adm__table tbody tr {
    display: block; background: var(--blanc); border-radius: 18px;
    box-shadow: 0 8px 24px rgba(26, 17, 48, 0.06);
    padding: 0.35rem 1rem; margin-bottom: 0.9rem;
  }
  .tableau tbody td, .adm__table tbody td,
  .tableau tbody th, .adm__table tbody th {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--filet);
    text-align: right;
  }
  .tableau tbody tr td:last-child, .adm__table tbody tr td:last-child { border-bottom: 0; }

  .tableau tbody td[data-libelle]::before, .adm__table tbody td[data-libelle]::before {
    content: attr(data-libelle); font-weight: 600; color: var(--encre-douce);
    text-align: left; flex: 0 0 auto; font-size: 0.8125rem;
  }

  .tableau tbody td[data-principal], .adm__table tbody td[data-principal] {
    display: block; text-align: left; font-size: 1.05rem;
    padding-top: 0.75rem;
  }
  .tableau tbody td[data-principal]::before, .adm__table tbody td[data-principal]::before { content: none; }

  .adm__table td.adm__nombre { text-align: right; }

  .adm__table .adm__aide { display: inline; margin-top: 0; }
  .adm__table td[data-principal] .adm__aide { display: block; margin-top: 0.15rem; }

  .adm__table tbody td[data-libelle]:empty { display: none; }
}

.parfum { padding: 0; position: relative; overflow: hidden; min-height: 90vh; display: grid; align-items: center; }

.parfum__fruit { position: absolute; font-size: clamp(6rem, 16vw, 12rem); opacity: 0.18; pointer-events: none; }
.parfum--citron .parfum__fruit { top: 5%; right: -2%; }
.parfum--rouge .parfum__fruit { bottom: 5%; left: -2%; }
.parfum--duo .parfum__fruit { top: 5%; right: -2%; }
.parfum__inner {
  position: relative; z-index: 1;
  max-width: var(--large); margin: 0 auto; padding: clamp(3.5rem, 8vw, 5.5rem) 6vw;
  display: grid; gap: 2.5rem; align-items: center;
}
@media (min-width: 860px) { .parfum__inner { grid-template-columns: 1fr 1fr; } }
.parfum--citron { background: var(--citron); }
.parfum--rouge { background: var(--rouge); color: var(--blanc); }

.parfum--duo { background: linear-gradient(140deg, var(--citron), var(--rose)); }
.parfum h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); }

.parfum h2 small {
  display: block; font-family: 'Fredoka', sans-serif; font-weight: 700;
  line-height: 0.95;
  font-size: 0.28em; letter-spacing: 1.5px; text-transform: uppercase;
  margin-top: 0.8rem; opacity: 0.75;
}
.parfum p { font-size: 1.1rem; }
.parfum--citron p { color: #5c4a0a; }
.parfum--rouge p { color: #ffe0e6; }
.parfum__tag {
  display: inline-block; padding: 0.35rem 1rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: 1rem;
}
.parfum--citron .parfum__tag { background: var(--encre); color: var(--citron); }
.parfum--rouge .parfum__tag { background: var(--blanc); color: var(--rouge); }
.parfum--duo .parfum__tag { background: var(--blanc); color: var(--rouge); }
.parfum--citron .bouton--plein { background: var(--encre); color: var(--creme); box-shadow: 0 10px 24px rgba(26,17,48,.28); }
.parfum--rouge .bouton--plein { background: var(--blanc); color: var(--rouge-profond); box-shadow: 0 10px 24px rgba(0,0,0,.22); }

.parfum--duo .bouton--plein { background: var(--blanc); color: var(--rouge-profond); box-shadow: 0 10px 24px rgba(0,0,0,.22); }
.parfum--duo p { color: #6d3040; }
.bouton--plein:hover { transform: translateY(-3px); }

.parfum p.note-haut--vitrine { font-size: 1rem; color: inherit; margin: -0.2rem 0 1.4rem; }
.parfum .note-haut__etoiles { font-size: 1.3rem; }
.parfum--citron p.note-haut--vitrine a { color: var(--encre); }
.parfum--rouge p.note-haut--vitrine a { color: var(--blanc); }

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

.parfum__lien-canette { display: flex; text-decoration: none; }
.parfum--rouge .parfum__visuel { order: -1; }
@media (max-width: 859px) { .parfum__visuel { order: -1 !important; } }

.canette {
  height: clamp(320px, 52vh, 560px); width: auto; display: block;
  filter: drop-shadow(0 25px 40px rgba(0, 0, 0, 0.28));
}

.canette-scene { position: relative; display: block; --pshitt: clamp(320px, 52vh, 560px); }
.canette-etats { position: relative; z-index: 1; display: block; }
.canette-etats picture { display: block; }

.canette-etats { filter: drop-shadow(0 25px 40px rgba(0, 0, 0, 0.28)); }
.canette-etats .canette { filter: none; }

.canette-etats__ouverte {
  position: absolute; left: 0; bottom: 0; margin: 0;
  width: 100%; height: auto; display: block;
  opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
}

.canette-bulles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.bulle {
  position: absolute; left: 50%; top: 8%;
  width: var(--taille); height: var(--taille);
  margin-left: calc(var(--taille) / -2);
  border-radius: 50%;
  opacity: 0;

  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,0.92) 0 9%, rgba(255,255,255,0) 42%),
    radial-gradient(circle at 62% 74%, rgba(255,255,255,0.35) 0 6%, rgba(255,255,255,0) 38%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0) 58%, rgba(255,255,255,0.55) 80%, rgba(255,255,255,0.10) 100%);
}

@keyframes pshitt {
  0% {
    transform: translate(calc(var(--pshitt) * var(--ox)), calc(var(--pshitt) * var(--oy))) scale(0.25);
    opacity: 0;
  }
  14% { opacity: 1; }
  62% { opacity: 0.9; }
  100% {
    transform: translate(calc(var(--pshitt) * var(--dx)), calc(var(--pshitt) * var(--dy))) scale(1);
    opacity: 0;
  }
}

.bulle--1  { --ox: -0.030; --oy: +0.020; --dx: -0.289; --dy: -0.280; --taille: 7px;  --retard: 0.0;   --duree: 0.95s; }
.bulle--2  { --ox: +0.045; --oy: +0.020; --dx: +0.357; --dy: -0.293; --taille: 11px; --retard: 0.09;  --duree: 1.15s; }
.bulle--3  { --ox: -0.060; --oy: +0.066; --dx: -0.391; --dy: -0.245; --taille: 6px;  --retard: 0.04;  --duree: 1.35s; }
.bulle--4  { --ox: +0.037; --oy: +0.066; --dx: +0.478; --dy: -0.259; --taille: 15px; --retard: 0.17; --duree: 1.10s; }
.bulle--5  { --ox: -0.052; --oy: +0.113; --dx: -0.498; --dy: -0.158; --taille: 9px;  --retard: 0.06;  --duree: 1.30s; }
.bulle--6  { --ox: +0.030; --oy: +0.113; --dx: +0.603; --dy: -0.171; --taille: 13px; --retard: 0.21; --duree: 1.05s; }
.bulle--7  { --ox: -0.045; --oy: +0.159; --dx: -0.607; --dy: -0.123; --taille: 8px;  --retard: 0.02;  --duree: 1.25s; }
.bulle--8  { --ox: +0.060; --oy: +0.159; --dx: +0.516; --dy: -0.136; --taille: 17px; --retard: 0.13; --duree: 1.00s; }
.bulle--9  { --ox: -0.037; --oy: +0.205; --dx: -0.712; --dy: -0.035; --taille: 5px;  --retard: 0.25; --duree: 1.20s; }
.bulle--10 { --ox: +0.052; --oy: +0.205; --dx: +0.610; --dy: -0.048; --taille: 12px; --retard: 0.11; --duree: 0.95s; }
.bulle--11 { --ox: -0.030; --oy: +0.251; --dx: -0.808; --dy: -0.000; --taille: 10px; --retard: 0.19; --duree: 1.15s; }
.bulle--12 { --ox: +0.045; --oy: +0.251; --dx: +0.698; --dy: -0.014; --taille: 19px; --retard: 0.07;  --duree: 1.35s; }
.bulle--13 { --ox: -0.060; --oy: +0.297; --dx: -0.891; --dy: +0.087; --taille: 7px;  --retard: 0.3; --duree: 1.10s; }
.bulle--14 { --ox: +0.037; --oy: +0.297; --dx: +0.775; --dy: +0.074; --taille: 14px; --retard: 0.15; --duree: 1.30s; }
.bulle--15 { --ox: -0.052; --oy: +0.344; --dx: -0.677; --dy: +0.122; --taille: 6px;  --retard: 0.03;  --duree: 1.05s; }
.bulle--16 { --ox: +0.030; --oy: +0.344; --dx: +0.836; --dy: +0.109; --taille: 9px;  --retard: 0.23; --duree: 1.25s; }
.bulle--17 { --ox: -0.045; --oy: +0.390; --dx: -0.719; --dy: +0.210; --taille: 16px; --retard: 0.08;  --duree: 1.00s; }
.bulle--18 { --ox: +0.060; --oy: +0.390; --dx: +0.878; --dy: +0.197; --taille: 7px;  --retard: 0.0;   --duree: 1.20s; }
.bulle--19 { --ox: -0.037; --oy: +0.436; --dx: -0.742; --dy: +0.245; --taille: 11px; --retard: 0.09;  --duree: 0.95s; }
.bulle--20 { --ox: +0.052; --oy: +0.436; --dx: +0.899; --dy: +0.231; --taille: 6px;  --retard: 0.04;  --duree: 1.15s; }
.bulle--21 { --ox: -0.030; --oy: +0.483; --dx: -0.746; --dy: +0.333; --taille: 15px; --retard: 0.17; --duree: 1.35s; }
.bulle--22 { --ox: +0.045; --oy: +0.483; --dx: +0.634; --dy: +0.319; --taille: 9px;  --retard: 0.06;  --duree: 1.10s; }
.bulle--23 { --ox: -0.060; --oy: +0.529; --dx: -0.727; --dy: +0.367; --taille: 13px; --retard: 0.21; --duree: 1.30s; }
.bulle--24 { --ox: +0.037; --oy: +0.529; --dx: +0.623; --dy: +0.354; --taille: 8px;  --retard: 0.02;  --duree: 1.05s; }
.bulle--25 { --ox: -0.052; --oy: +0.575; --dx: -0.687; --dy: +0.455; --taille: 17px; --retard: 0.13; --duree: 1.25s; }
.bulle--26 { --ox: +0.030; --oy: +0.575; --dx: +0.594; --dy: +0.442; --taille: 5px;  --retard: 0.25; --duree: 1.00s; }
.bulle--27 { --ox: -0.045; --oy: +0.621; --dx: -0.627; --dy: +0.490; --taille: 12px; --retard: 0.11; --duree: 1.20s; }
.bulle--28 { --ox: +0.060; --oy: +0.621; --dx: +0.545; --dy: +0.476; --taille: 10px; --retard: 0.19; --duree: 0.95s; }
.bulle--29 { --ox: -0.037; --oy: +0.667; --dx: -0.388; --dy: +0.578; --taille: 19px; --retard: 0.07;  --duree: 1.15s; }
.bulle--30 { --ox: +0.052; --oy: +0.667; --dx: +0.479; --dy: +0.564; --taille: 7px;  --retard: 0.3; --duree: 1.35s; }
.bulle--31 { --ox: -0.030; --oy: +0.714; --dx: -0.326; --dy: +0.612; --taille: 14px; --retard: 0.15; --duree: 1.10s; }
.bulle--32 { --ox: +0.045; --oy: +0.714; --dx: +0.399; --dy: +0.599; --taille: 6px;  --retard: 0.03;  --duree: 1.30s; }
.bulle--33 { --ox: -0.060; --oy: +0.760; --dx: -0.323; --dy: +0.700; --taille: 9px;  --retard: 0.23; --duree: 1.05s; }
.bulle--34 { --ox: +0.037; --oy: +0.760; --dx: +0.391; --dy: +0.687; --taille: 16px; --retard: 0.08;  --duree: 1.25s; }

@media (hover: hover) {
  .canette-scene:hover .canette-etats__ouverte { opacity: 1; }

  .canette-scene:hover .bulle {
    animation: pshitt var(--duree) ease-out calc(var(--retard) * 1s) both;
  }
}

.canette-scene.pshitt .canette-etats__ouverte { opacity: 1; }
.canette-scene.pshitt .bulle {
  animation: pshitt var(--duree) ease-out calc(var(--retard) * 1s) both;
}

.duo { --h-canette: clamp(320px, 52vh, 560px); display: flex; align-items: flex-end; justify-content: center; }
.duo picture, .duo .canette--absente { display: block; }

.duo .canette { height: var(--h-canette); }

.duo > picture + picture, .duo > * + * { margin-left: calc(var(--h-canette) * -0.11); }

.canette--absente {
  width: min(230px, 50vw); aspect-ratio: 1 / 2.1; border-radius: 26px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 1rem;
  box-shadow: 0 25px 45px rgba(0,0,0,.28), inset 0 0 0 6px rgba(255,255,255,.15);
}
.canette--absente b { font-family: 'Fredoka', sans-serif; font-size: 1.4rem; line-height: 1.05; }
.canette--absente span { font-size: 0.6875rem; letter-spacing: 2px; text-transform: uppercase; margin-top: 0.5rem; opacity: 0.8; }
.canette--citron { background: linear-gradient(160deg, var(--citron), var(--citron-profond)); color: var(--encre); }
.canette--rouge { background: linear-gradient(160deg, var(--rose), var(--rouge-profond)); color: var(--blanc); }

.plein {
  background: linear-gradient(120deg, var(--rose), var(--rouge-profond));
  color: var(--blanc);
  text-align: center;
}
.plein .surtitre { color: rgba(255, 255, 255, 0.75); }
.plein p { color: rgba(255, 255, 255, 0.95); margin-left: auto; margin-right: auto; }
.bouton--clair { background: var(--blanc); color: var(--rouge-profond); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); }

.sombre { background: var(--encre); color: var(--creme); text-align: center; }
.sombre p { color: #cfc4de; margin-left: auto; margin-right: auto; }
.sombre .bouton--discret { border-color: var(--creme); color: var(--creme); }
.sombre .bouton--discret:hover { background: var(--creme); color: var(--encre); }
.sombre .note { color: #a495bb; }

.avis__entete { display: flex; justify-content: center; gap: 0.15rem; font-size: 1.9rem; margin-bottom: 0.5rem; }
.avis__moyenne { color: #b3a6c9; margin-bottom: 0.5rem; }
.sombre h2 { margin-bottom: 3rem; }
.avis__rangee {
  display: flex; gap: 1.4rem; overflow-x: auto; padding: 0.5rem;
  scroll-snap-type: x mandatory; text-align: left;
}
.avis {
  flex: 0 0 320px; scroll-snap-align: start;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px; padding: 1.6rem;
}
.avis__etoiles { display: flex; gap: 0.1rem; font-size: 1.05rem; margin-bottom: 0.7rem; }
.sombre .avis p { color: #eee; font-size: 0.98rem; line-height: 1.5; margin-bottom: 1rem; }
.avis b { color: var(--rose); font-size: 0.9rem; }

.avis time { display: block; margin-top: 0.45rem; font-size: 0.75rem; color: #a495bb; }
.avis__rangee::-webkit-scrollbar { height: 6px; }
.avis__rangee::-webkit-scrollbar-thumb { background: var(--rose); border-radius: 99px; }

.fiche { padding: 3.5rem 0 4rem; position: relative; overflow: hidden; }
.fiche--rouge { background: var(--rouge); color: var(--blanc); }
.fiche--citron { background: var(--citron); }
.fiche--duo { background: linear-gradient(140deg, var(--citron), var(--rose)); }

.fiche__fruit {
  position: absolute; font-size: clamp(5rem, 14vw, 11rem); opacity: 0.18;
  pointer-events: none; line-height: 1;
}
.fiche--rouge .fiche__fruit { bottom: 3%; left: -2%; }
.fiche--citron .fiche__fruit { top: 3%; right: -2%; }
.fiche--duo .fiche__fruit { top: 3%; right: -2%; }

.fiche__inner { display: grid; gap: 2.5rem; align-items: start; position: relative; }

.fiche__entete + .fiche__galerie { margin-top: -1rem; }
@media (min-width: 62rem) {

  .fiche__inner {
    grid-template-columns: 1fr 1fr; gap: 3.5rem;
    grid-template-areas: "galerie entete" "galerie achat";
    align-content: start;
  }
  .fiche__entete { grid-area: entete; }
  .fiche__galerie { grid-area: galerie; }
  .fiche__achat { grid-area: achat; }
  .fiche__entete + .fiche__galerie { margin-top: 0; }

  .fiche__galerie { position: sticky; top: 1.5rem; }

  .fiche__inner { grid-template-rows: auto 1fr; }
}

.fiche__visuels {
  display: flex; justify-content: center; align-items: flex-end; gap: 1rem;
  padding: 0 0 1.5rem; min-height: 20rem;
}
.fiche__visuels .canette { max-height: 22rem; width: auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,.28)); }
.fiche__visuels .canette--absente { position: static; }

.fiche--rouge .fiche__degustation,
.fiche--rouge .verbes li,
.fiche--rouge .croisement { color: #ffe0e6; }
.fiche--rouge .fiche__entete > .surtitre { color: #ffc9d3; }
.fiche--rouge .note-haut a, .fiche--rouge .croisement a { color: var(--blanc); }

.fiche .formats { color: var(--encre); }
.fiche .format__canette { color: var(--encre-douce); }

.fiche .achat legend.surtitre { color: var(--encre-douce); }

.fiche--rouge .achat .note { color: #ffd0d8; }
.fiche--duo .achat .note { color: #7d3648; }
.fiche--citron .achat .note { color: #6b5a10; }

.fiche--citron .fiche__degustation,
.fiche--citron .verbes li,
.fiche--citron .croisement { color: #6b5a10; }
.fiche--citron .fiche__entete > .surtitre { color: #7a6712; }

.fiche--duo .fiche__degustation,
.fiche--duo .verbes li,
.fiche--duo .croisement { color: #6d3040; }
.fiche--duo .fiche__entete > .surtitre { color: #7d3648; }

.fiche--rouge .bouton--principal, .fiche--duo .bouton--principal {
  background: var(--blanc); color: var(--rouge-profond); box-shadow: 0 12px 28px rgba(0,0,0,.22);
}
.fiche--citron .bouton--principal {
  background: var(--encre); color: var(--creme); box-shadow: 0 12px 28px rgba(26,17,48,.28);
}
.fiche--rouge .bouton--principal:hover,
.fiche--duo .bouton--principal:hover,
.fiche--citron .bouton--principal:hover { transform: translateY(-3px); }

.medaillons {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 0.75rem; justify-items: center;
  max-width: 21rem; margin: 1.25rem auto 0;
  list-style: none; padding: 0;
}
.medaillons li {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  text-align: center;
  font-size: 0.75rem; font-weight: 500; line-height: 1.25;
}

.medaillons .picto { width: 2.1rem; height: 2.1rem; opacity: 0.7; stroke-width: 2; }
.fiche--rouge .medaillons { color: #ffe0e6; }
.fiche--citron .medaillons { color: #6b5a10; }
.fiche--duo .medaillons { color: #6d3040; }
.fiche__entete h1 { font-size: clamp(2.1rem, 5vw, 3rem); margin-bottom: 0.4rem; }
.fiche__degustation { font-size: 1.1rem; color: var(--encre-douce); margin-bottom: 1rem; }
.verbes {
  display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0 0 1.4rem;
  font-size: 0.75rem; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600;
}
.verbes li { color: var(--encre-douce); }
.verbes li + li::before { content: '·'; margin-right: 0.5rem; }

.note-haut { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.4rem; font-size: 0.9375rem; }
.note-haut__etoiles { display: inline-flex; gap: 0.08rem; font-size: 1.05rem; }
.note-haut b { font-family: 'Fredoka', sans-serif; }
.note-haut a { color: var(--encre-douce); }

.achat { margin: 0; }
.achat .formats { border: 0; padding: 0.5rem 1.25rem; margin: 0; }
.achat legend { padding: 0 0 0.5rem; }

.format--choix { cursor: pointer; }
.format--choix input { position: absolute; opacity: 0; pointer-events: none; }
.format--choix:hover { border-color: var(--rose); transform: scale(1); }

.formats:has(input:checked) .format:not(:has(input:checked)) {
  transform: scale(0.9); opacity: 0.78;
}
.formats:has(input:checked) .format:not(:has(input:checked)):hover {
  transform: scale(0.96); opacity: 1;
}
.format--choix:has(input:checked) {
  border-color: var(--rouge); background: var(--blanc);
  transform: scale(1.08);

  box-shadow: 0 0 22px rgba(230, 57, 88, 0.28), 0 10px 26px rgba(26, 17, 48, 0.18);

  z-index: 1;
}

.format--choix:has(input:checked) .format__prix { color: var(--rouge); }

.format--choix:has(input:focus-visible) { outline: 3px solid var(--rose); outline-offset: 3px; }

.format--choix .fanion {
  position: absolute; top: -0.6rem; left: 50%; transform: translateX(-50%);
  margin: 0; white-space: nowrap;
}

.prix-bouton { display: none; }
.achat:has(#fmt-6:checked) .prix-bouton--6 { display: inline; }
.achat:has(#fmt-12:checked) .prix-bouton--12 { display: inline; }
.achat:has(#fmt-18:checked) .prix-bouton--18 { display: inline; }
.achat:has(#fmt-24:checked) .prix-bouton--24 { display: inline; }
.achat:has(#fmt-30:checked) .prix-bouton--30 { display: inline; }
.achat:has(#fmt-36:checked) .prix-bouton--36 { display: inline; }

.bouton__abo { display: none; }
.bouton__rythme { display: none; }
.achat:has(.abo-choix__carte--abo input:checked) .bouton__abo {
  display: block; font-size: 0.78rem; font-weight: 500; opacity: 0.85; margin-top: 0.1rem;
}
.achat:has(input[name="abonnement_jours"][value="7"]:checked) .bouton__rythme--7 { display: inline; }
.achat:has(input[name="abonnement_jours"][value="15"]:checked) .bouton__rythme--15 { display: inline; }
.achat:has(input[name="abonnement_jours"][value="30"]:checked) .bouton__rythme--30 { display: inline; }
.achat:has(input[name="abonnement_jours"][value="60"]:checked) .bouton__rythme--60 { display: inline; }
.achat:has(input[name="abonnement_jours"][value="90"]:checked) .bouton__rythme--90 { display: inline; }
.bouton--large { display: block; width: 100%; margin: 1.25rem 0 0.75rem; text-align: center; }
.bouton__ligne1 { display: block; }

.rassurance-ligne {
  margin: 0.9rem 0 0; font-size: 0.8125rem; color: var(--blanc);
  max-width: none; text-align: center;
}
.fiche--citron .rassurance-ligne, .fiche--duo .rassurance-ligne { color: var(--encre); }
.croisement { margin-top: 1.5rem; font-size: 0.9375rem; color: var(--encre-douce); }

.quand { margin-top: 2.5rem; }
.depliant {
  background: var(--blanc); border-radius: 20px; margin-bottom: 0.75rem;
  box-shadow: 0 8px 24px rgba(26,17,48,.05);
}
.depliant summary {
  cursor: pointer; padding: 1.15rem 1.4rem; font-weight: 600;
  font-family: 'Fredoka', sans-serif; list-style: none; display: flex;
  justify-content: space-between; align-items: center; gap: 1rem;
}
.depliant summary::-webkit-details-marker { display: none; }
.depliant summary::after { content: '+'; font-size: 1.5rem; color: var(--rose); line-height: 1; }
.depliant[open] summary::after { content: '−'; }
.depliant__corps { padding: 0 1.4rem 1.4rem; font-size: 0.9375rem; }

.depliant__corps h4, .composition h4, .reglementaire__section h4 { font-family: 'Fredoka', sans-serif; margin: 1rem 0 0.35rem; }
.depliant__corps h4:first-child, .composition h4:first-child, .reglementaire__section h4:first-child { margin-top: 0; }

.depliant__corps .denomination, .composition .denomination, .reglementaire__section .denomination {
  color: var(--encre-douce); margin-bottom: 0.35rem;
}
.depliant__corps p { max-width: var(--mesure); }

.faq__liste { max-width: calc(var(--mesure) + 2.8rem); }

.faq__liste h2 { margin: 2.5rem 0 1rem; }

.faq__liste h2:first-child { margin-top: 0; }
.faq h1 { margin-bottom: 2.5rem; }

.reglementaire__section { padding: 2.5rem 0 0.5rem; }

.onglets { margin-top: 1.5rem; }

.onglets__barre {
  border-bottom: 1px solid var(--filet); padding-bottom: 0.3rem; margin-bottom: 1.5rem;
}

.onglets__piste {
  display: flex; flex-wrap: nowrap; gap: 0.4rem;

  padding: 0.3rem 0;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;

  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}
.onglets__piste::-webkit-scrollbar { display: none; }

.onglets__radio { position: absolute; opacity: 0; width: 0; height: 0; }
.onglets__onglet {
  cursor: pointer; border-radius: 999px; padding: 0.4rem 0.9rem;
  font-size: 0.8125rem; font-weight: 500; color: var(--encre-douce);
  border: 1px solid transparent; transition: background 0.15s, color 0.15s;

  white-space: nowrap; flex: none; scroll-snap-align: start;
}
.onglets__onglet:hover { background: var(--blanc); color: var(--encre); }

.onglets:has(#ong-nutrition:checked) [for="ong-nutrition"],
.onglets:has(#ong-ingredients:checked) [for="ong-ingredients"],
.onglets:has(#ong-quantite:checked) [for="ong-quantite"],
.onglets:has(#ong-conservation:checked) [for="ong-conservation"],
.onglets:has(#ong-lot:checked) [for="ong-lot"],
.onglets:has(#ong-exploitant:checked) [for="ong-exploitant"],
.onglets:has(#ong-logistique:checked) [for="ong-logistique"] {
  background: var(--blanc); color: var(--encre); border-color: var(--filet);
  box-shadow: 0 4px 14px rgba(26,17,48,.06);
}

.onglets__radio:focus-visible + .onglets__onglet {
  outline: 3px solid var(--rose); outline-offset: 2px;
}
.onglets:has(#ong-nutrition:checked) .onglets__panneau:not(#pan-nutrition),
.onglets:has(#ong-ingredients:checked) .onglets__panneau:not(#pan-ingredients),
.onglets:has(#ong-quantite:checked) .onglets__panneau:not(#pan-quantite),
.onglets:has(#ong-conservation:checked) .onglets__panneau:not(#pan-conservation),
.onglets:has(#ong-lot:checked) .onglets__panneau:not(#pan-lot),
.onglets:has(#ong-exploitant:checked) .onglets__panneau:not(#pan-exploitant),
.onglets:has(#ong-logistique:checked) .onglets__panneau:not(#pan-logistique) {
  display: none;
}

.onglets:has(.onglets__radio:checked) .onglets__titre { display: none; }

.onglets__panneau > p { max-width: var(--mesure); margin: 0 0 0.6rem; }
.onglets__panneau > p:last-child { margin-bottom: 0; }

.chiffres--gauche { justify-content: flex-start; margin-top: 1rem; }
.chiffre--petit { min-width: 6.5rem; padding: 0.8rem 1rem; border-radius: 16px; }
.chiffre--petit b { font-size: 1.35rem; }

.onglets__panneaux { min-height: 9rem; }

.reglementaire__section h4 { font-size: 1rem; }

.reglementaire__section .defilant { max-width: 34rem; }
.reglementaire__section .tableau { min-width: 0; font-size: 0.875rem; }
.reglementaire__section .tableau th, .reglementaire__section .tableau td { padding: 0.55rem 1rem; }
.reglementaire__section .note { margin-top: 0.6rem; }

.alerte {
  background: #fff3cd; border: 1px solid #f0d58c; border-radius: 16px;
  padding: 0.9rem 1.2rem; font-size: 0.9375rem; max-width: none;
}
.panier { background: var(--blanc); border-radius: 24px; padding: 0.5rem 1.5rem; box-shadow: 0 8px 24px rgba(26,17,48,.06); }
.panier__ligne {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1.1rem 0; border-bottom: 1px solid var(--filet);
}
.panier__ligne:last-child { border-bottom: 0; }
.panier__nom { flex: 1 1 14rem; display: flex; flex-direction: column; gap: 0.15rem; }
.panier__nom a { font-weight: 500; text-decoration: none; }
.panier__nom a:hover { color: var(--rose); }
.panier__prix { font-family: 'Fredoka', sans-serif; font-size: 1.15rem; font-variant-numeric: tabular-nums; min-width: 5rem; text-align: right; }

.panier__ligne form { display: inline; margin: 0; }
.compteur { display: flex; align-items: center; gap: 0.35rem; }
.compteur__bouton {
  width: 2.1rem; height: 2.1rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--filet); background: var(--creme); color: var(--encre);
  font: inherit; font-size: 1rem; line-height: 1;
}
.compteur__bouton:hover:not(:disabled) { border-color: var(--rose); color: var(--rose); }
.compteur__bouton:disabled { opacity: 0.35; cursor: not-allowed; }
.compteur__valeur { min-width: 2rem; text-align: center; font-variant-numeric: tabular-nums; font-weight: 500; }

.totaux { margin: 2rem 0 1rem; max-width: 26rem; margin-left: auto; }
.totaux__ligne { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; }
.totaux__ligne--discret { color: var(--encre-douce); font-size: 0.9375rem; }

.totaux__note { display: block; font-size: 0.8125rem; color: var(--encre-douce); }
.totaux__ligne--total {
  border-top: 1px solid var(--filet); margin-top: 0.35rem; padding-top: 0.9rem;
  font-family: 'Fredoka', sans-serif; font-size: 1.25rem;
}

.totaux__ligne--titre { padding-bottom: 0.15rem; }
.totaux__choix { font-size: 0.8125rem; color: var(--encre-douce); font-style: italic; }

.totaux__ligne--second { border-top: 0; margin-top: 0; padding-top: 0.2rem; }
.totaux__ligne--total small {
  display: block; font-family: 'Poppins', system-ui, sans-serif; font-size: 0.75rem;
  font-weight: 400; color: var(--encre-douce);
}
.totaux .note { margin-top: 0.5rem; }
.panier__suite { max-width: 26rem; margin-left: auto; }

.panier__entete {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.25rem;
}
.panier__entete h1 { margin: 0; }
.panier__retour {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.0625rem;
  color: var(--rose); text-decoration: none;
}
.panier__retour:hover { text-decoration: underline; }

.panier__retour .picto {

  display: block;
  width: 1.35em; height: 1.35em;

  animation: panier-battement 1.15s ease-in-out 0.5s both;
}
@media (prefers-reduced-motion: reduce) {
  .panier__retour .picto { animation: none; }
}

.panier__code {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 0.6rem;
  margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--filet);
}
.panier__code label { font-size: 0.9375rem; color: var(--encre-douce); }
.panier__code input {
  padding: 0.7rem 0.9rem; font: inherit; color: var(--encre);
  background: var(--blanc); border: 1px solid var(--filet); border-radius: 14px;
  width: min(14rem, 100%);
}
.panier__code input:focus-visible { border-color: var(--rose); outline: none; }
.panier__code form { margin: 0; }
.panier__code-actif { margin: 0; font-size: 0.9375rem; }

.panier__code-refus {
  flex-basis: 100%; margin: 0; font-size: 0.875rem; color: var(--rouge-profond);
}

.totaux__ligne--remise b,
.recap__remise b { color: var(--rose); }

.totaux__note, .recap__note-remise {
  margin: -0.25rem 0 0.75rem; text-align: right; line-height: 1.35;
}

.bouton--inerte {
  background: var(--filet); color: var(--encre-douce); cursor: not-allowed;
  box-shadow: none; border-color: transparent;
}
.bouton--inerte:hover { transform: none; box-shadow: none; }

.avis__depot { margin: 1.5rem 0 2.5rem; }
.depot summary {
  display: inline-block; cursor: pointer; list-style: none;
}
.depot summary::-webkit-details-marker { display: none; }
.depot[open] summary { margin-bottom: 1.5rem; }

.depot__form {
  background: var(--blanc); color: var(--encre);
  border-radius: 24px; padding: clamp(1.25rem, 3vw, 2rem);
  max-width: 42rem; margin: 0 auto; text-align: left;
}

.depot__form .depot__champ { margin: 0 0 1.1rem; max-width: none; }

.depot__form .etoiles__valeur { color: var(--encre); }
.depot__champ label { display: block; font-weight: 600; font-size: 0.875rem; margin-bottom: 0.35rem; color: var(--encre); }
.depot__form input[type="text"], .depot__form input[type="email"], .depot__form textarea,
.depot__form select {
  display: block; width: 100%; padding: 0.75rem 1rem; border-radius: 14px;
  border: 1px solid var(--filet); background: var(--creme); font: inherit; color: var(--encre);
}

.contact__form { margin: 1.5rem 0 2.5rem; border: 1px solid var(--filet); margin-left: 0; }

.mentions__absences {
  margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--filet);
}

.relais__form { max-width: 46rem; }

.relais-page { padding-top: 1.25rem; padding-bottom: 2rem; }
.relais-page h1 {
  font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; margin: 0 0 0.35rem;
}
.relais-page .relais__intro { margin: 0 0 0.75rem; font-size: 0.9375rem; }
.relais-page .relais__intro strong { white-space: nowrap; }

.relais__bascule {
  display: inline-flex; gap: 0.25rem; padding: 0.25rem; margin: 0.25rem 0 0;
  background: var(--blanc); border: 1px solid var(--filet); border-radius: 999px;
}
.relais__bascule label {
  cursor: pointer; padding: 0.45rem 1.4rem; border-radius: 999px;
  font-size: 0.9375rem; color: var(--encre-douce);
}

.relais__vue { position: absolute; opacity: 0; width: 1px; height: 1px; }
#vue-liste:checked ~ .relais__bascule label[for="vue-liste"],
#vue-carte:checked ~ .relais__bascule label[for="vue-carte"] {
  background: var(--encre); color: var(--creme);
}

#vue-liste:focus-visible ~ .relais__bascule label[for="vue-liste"],
#vue-carte:focus-visible ~ .relais__bascule label[for="vue-carte"] {
  outline: 3px solid var(--rose); outline-offset: 2px;
}

.relais__plan-cadre { position: relative; }

.relais__zone {
  position: absolute; z-index: 2; top: 0.85rem; left: 0; right: 0;
  margin: 0 auto; width: max-content;
  padding: 0.5rem 1.2rem; font-size: 0.875rem; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(26,17,48,.2);
}
.relais__zone[hidden] { display: none; }

.relais__cadre {
  height: 26rem; margin: 1.25rem 0 0; border-radius: 20px; overflow: hidden;
  background: var(--blanc); border: 1px solid var(--filet);
}

#vue-liste:checked ~ .relais__plan-cadre { display: none; }

#vue-carte:checked ~ .relais__liste > .relais,
#vue-carte:checked ~ .relais__liste > .relais__plus { display: none; }
#vue-carte:checked ~ .relais__liste > .relais:has(input:checked) { display: block; }

#vue-carte:checked ~ .relais__liste > .relais__plus:has(input:checked) { display: block; }
#vue-carte:checked ~ .relais__liste > .relais__plus:has(input:checked) > summary { display: none; }
#vue-carte:checked ~ .relais__liste > .relais__plus:has(input:checked) > .relais__suite { display: block; }
#vue-carte:checked ~ .relais__liste .relais__suite > .relais { display: none; }
#vue-carte:checked ~ .relais__liste .relais__suite > .relais:has(input:checked) { display: block; }

#vue-carte:checked ~ .relais__liste { margin-top: 0.75rem; }

.relais__barre {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.5rem 1rem;
}

.relais__barre .relais__ailleurs[open] { flex: 1 1 100%; }

.relais__ailleurs { margin: 0; max-width: 32rem; }
.relais__ailleurs > summary {
  display: flex; align-items: center; gap: 0.35rem; cursor: pointer; list-style: none;
  font-size: 0.8125rem; color: var(--rose); width: max-content; padding: 0.25rem 0;
}
.relais__ailleurs > summary::-webkit-details-marker { display: none; }
.relais__ailleurs > summary::before {
  content: ""; width: 0.4rem; height: 0.4rem; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
.relais__ailleurs[open] > summary::before { transform: rotate(45deg); margin-top: -0.25rem; }
.relais__ailleurs > summary:hover { text-decoration: underline; }

.relais__ailleurs-form { display: flex; gap: 0.6rem; align-items: start; margin-top: 0.5rem; flex-wrap: wrap; }
.relais__ailleurs-form .relais__auto { flex: 1 1 16rem; }
.relais__ailleurs-form .note { flex: 1 1 100%; margin: 0.15rem 0 0; font-size: 0.8125rem; }
.relais__ailleurs-form .champ__ligne { max-width: none; }
.relais__ailleurs-form button { flex: 0 0 auto; padding: 0.9rem 1.5rem; }

.relais__auto { position: relative; }
.relais__auto .champ__ligne { max-width: none; margin-bottom: 0.5rem; }

.auto__liste {
  position: absolute; z-index: 5; left: 0; right: 0; top: 100%;
  margin: -0.25rem 0 0; padding: 0.35rem; list-style: none;
  background: var(--blanc); border: 1px solid var(--filet); border-radius: 14px;
  box-shadow: 0 12px 28px rgba(26,17,48,.12);
}
.auto__liste[hidden] { display: none; }
.auto__item {
  padding: 0.6rem 0.75rem; border-radius: 10px; cursor: pointer;
  font-size: 0.9375rem; line-height: 1.3;
}

.auto__item:hover, .auto__item--actif { background: var(--creme); }

.auto__cp { float: right; color: var(--encre-douce); font-size: 0.8125rem; }

.relais__liste { border: 0; padding: 0; margin: 0.9rem 0 1.25rem; display: grid; gap: 0.6rem; }

.relais__plus > summary {
  display: block; cursor: pointer; text-align: center; list-style: none;
  padding: 0.7rem 1rem; border: 1px dashed var(--filet); border-radius: 999px;
  font-size: 0.9375rem; color: var(--encre-douce); background: var(--blanc);
}
.relais__plus > summary::-webkit-details-marker { display: none; }
.relais__plus > summary:hover { border-color: var(--rose); color: var(--rose); }

.relais__plus[open] > summary { margin-bottom: 0.75rem; }
.relais__suite { display: grid; gap: 0.75rem; }

.relais__radio { position: absolute; opacity: 0; width: 0; height: 0; }

.relais { position: relative; }
.relais__plan {
  position: absolute; top: 0.9rem; right: 1rem; z-index: 1;
  font-size: 0.8125rem; color: var(--rose); text-decoration: none;
  border: 1px solid var(--filet); border-radius: 999px; padding: 0.25rem 0.7rem;
  background: var(--blanc);
}
.relais__plan:hover, .relais__plan:focus-visible { border-color: var(--rose); }

.relais__carte {
  display: block; cursor: pointer;
  background: var(--blanc); border: 1px solid var(--filet); border-radius: 18px;
  padding: 1rem 1.25rem; transition: border-color 0.15s, box-shadow 0.15s;

  padding-right: 9.5rem;
}
.relais__carte:hover { border-color: var(--rose); }
.relais__radio:checked + .relais__carte {
  border-color: var(--rose); box-shadow: 0 0 0 2px var(--rose) inset;
}

.relais__radio:focus-visible + .relais__carte { outline: 3px solid var(--rose); outline-offset: 3px; }
.relais__nom { display: block; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.05rem; }
.relais__adresse { display: block; margin-top: 0.15rem; }
.relais__distance { display: block; margin-top: 0.2rem; font-size: 0.8125rem; color: var(--encre-douce); }

.relais__horaires {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.1rem 0.8rem; margin-top: 0.6rem;
  font-size: 0.75rem; color: var(--encre-douce);
}
.relais__jour b { color: var(--encre); font-weight: 600; }

.abo__montant {
  display: block; margin-top: 0.35rem;
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.05rem;
}
.relais__conges { display: block; margin-top: 0.5rem; font-size: 0.8125rem; color: var(--rouge-profond); }
.relais__pied { margin-top: 1.5rem; }

.relais__radio:not(:checked) ~ .relais__carte .relais__adresse,
.relais__radio:not(:checked) ~ .relais__carte .relais__horaires,
.relais__radio:not(:checked) ~ .relais__carte .relais__conges,
.relais__radio:not(:checked) ~ .relais__plan { display: none; }

.relais__radio:not(:checked) ~ .relais__carte { padding: 0.7rem 1.1rem; padding-right: 1.1rem; }
.relais__radio:not(:checked) ~ .relais__carte .relais__distance { margin-top: 0.1rem; }

.compte__grille { display: grid; gap: 1.25rem; margin: 1.25rem 0; }
@media (min-width: 52rem) { .compte__grille { grid-template-columns: 1.3fr 1fr; align-items: start; } }
.compte__bloc {
  background: var(--blanc); border-radius: 20px; padding: 1.5rem;
  box-shadow: 0 8px 24px rgba(26,17,48,.06); margin-bottom: 1.25rem;
}
.compte__bloc h2 { margin-top: 0; }

.compte__repli > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 0.6rem;
}
.compte__repli > summary::-webkit-details-marker { display: none; }
.compte__repli > summary h2 { margin: 0; }

.compte__repli > summary::after {
  content: ''; width: 0.55rem; height: 0.55rem; margin-left: auto;
  border-right: 2px solid var(--encre-douce); border-bottom: 2px solid var(--encre-douce);
  transform: rotate(45deg); transform-origin: center;
  transition: transform 0.15s ease;
}
.compte__repli[open] > summary::after { transform: rotate(-135deg); }
.compte__repli > summary:focus-visible { outline: 3px solid var(--rose); outline-offset: 4px; border-radius: 8px; }
.compte__repli[open] > form { margin-top: 1.25rem; }

@media (min-width: 640px) { .vignettes--pro { grid-template-columns: 1fr 1fr; max-width: 56rem; } }
@media (min-width: 900px) { .vignettes--pro { grid-template-columns: 1fr 1fr; } }
.vignette--pro:hover { transform: none; box-shadow: 0 10px 30px rgba(26, 17, 48, 0.07); }
.vignette--pro .vignette__prix { margin-top: 0.5rem; }
.vignette--pro .note { margin: 0; }

.vignette__unitaire { font-weight: 600; color: var(--encre-douce); font-size: 0.9375rem; }

.nutrition--paire { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 48rem) { .nutrition--paire { grid-template-columns: 1fr 1fr; } }
.nutrition__parfum h4 { margin-top: 0; }

.pro__recap { max-width: 34rem; margin: 0 auto 1rem; }
.pro__recap h2 { margin-top: 0; }
.pro__recap-action { margin: 1.25rem 0 0.75rem; }

.pro__recap-retour { margin: 1.25rem 0 0; text-align: center; }

.pro__action {
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  max-width: 56rem; margin: 2rem 0 2.5rem; text-align: center;
}
.pro__action .note { margin: 0; }

.vignette__lien { font-size: 0.9375rem; margin-top: 0.35rem; align-self: flex-start; }

#infos-produit:focus { outline: none; }

.vignette__qte { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.9rem; }
.vignette__qte label { font-size: 0.875rem; font-weight: 500; }

.pas { display: inline-flex; align-items: stretch; gap: 0.4rem; }
.pas__bouton {
  width: 2.75rem; height: 2.75rem; flex: none;
  font: inherit; font-size: 1.35rem; line-height: 1;
  border: 1px solid var(--filet); border-radius: 14px;
  background: var(--blanc); color: var(--encre); cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.pas__bouton:hover { border-color: var(--rose); background: var(--creme); }
.pas__bouton:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }
.pas__bouton[hidden] { display: none; }

.vignette__qte input {
  width: 4.5rem; padding: 0.65rem 0.5rem; font: inherit; text-align: center;
  border: 1px solid var(--filet); border-radius: 14px;
  background: var(--blanc); color: var(--encre);
}
.vignette__qte input:focus-visible { border-color: var(--rose); outline: none; }

.pas:has(.pas__bouton:not([hidden])) input[type="number"] { -moz-appearance: textfield; }
.pas:has(.pas__bouton:not([hidden])) input[type="number"]::-webkit-outer-spin-button,
.pas:has(.pas__bouton:not([hidden])) input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

.pro__articles { list-style: none; margin: 0 0 1.25rem; padding: 0; max-width: 46rem; }
.pro__article {
  display: grid; grid-template-columns: 1fr auto auto; gap: 0.75rem 1.5rem;
  align-items: center; background: var(--blanc); border-radius: 18px;
  padding: 1.1rem 1.35rem; margin-bottom: 0.75rem;
  box-shadow: 0 8px 24px rgba(26,17,48,.06);
}
.pro__article-nom, .pro__article-prix { display: flex; flex-direction: column; gap: 0.15rem; }
.pro__article-nom strong { font-size: 1.05rem; }
.pro__article-prix { text-align: right; }
.pro__article-prix { white-space: nowrap; }
.pro__article-prix strong { font-size: 1.05rem; }
.pro__article-qte { display: flex; flex-direction: column; gap: 0.3rem; }
.pro__article-qte label { font-size: 0.8rem; font-weight: 500; }
.pro__article-qte input {
  width: 5.5rem; padding: 0.65rem 0.75rem; font: inherit; text-align: center;
  border: 1px solid var(--filet); border-radius: 14px;
  background: var(--blanc); color: var(--encre);
}
.pro__article-qte input:focus-visible { border-color: var(--rose); outline: none; }
@media (max-width: 40rem) {
  .pro__article { grid-template-columns: 1fr; }
  .pro__article-prix { text-align: left; }
}

.pro__siren {
  display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; align-items: start;
  margin-bottom: 1rem; max-width: 30rem;
}
.pro__siren .champ__ligne { margin: 0; max-width: none; }
.pro__siren button { margin-top: 1.6rem; white-space: nowrap; }

.pro__connexion { padding-bottom: 1.25rem; }
.pro__connexion-form { display: grid; gap: 0.75rem; align-items: start; }
.pro__connexion-form .champ__ligne { margin: 0; }
@media (min-width: 40rem) {
  .pro__connexion-form { grid-template-columns: 1fr 1fr auto; gap: 0.75rem 1rem; }
  .pro__connexion-form button { align-self: center; }
}
.compte__totaux { margin-top: 1rem; }
.compte__adresse { font-style: normal; line-height: 1.5; margin: 0.35rem 0 1rem; }

.paiement__espace {
  background: var(--blanc); border-radius: 20px; padding: 1.25rem 1.5rem;
  margin: 1.5rem auto; max-width: 26rem;
}
.paiement__espace p { margin: 0 0 0.75rem; }
.paiement__espace p:last-child { margin: 0; }

.paiement__valide {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  flex-wrap: wrap; margin-bottom: 0.75rem;
}
.paiement__valide .picto--valide { width: 1.4rem; height: 1.4rem; }

.surtitre--valide { display: flex; align-items: center; gap: 0.45rem; }
.picto--valide { width: 1.15rem; height: 1.15rem; color: #1f8a4c; flex: none; }

.relais__retenu {
  background: var(--blanc); border-radius: 20px; padding: 1.25rem 1.5rem;
  margin: 1.5rem auto; max-width: 26rem; text-align: left;
}

.tunnel__retour {
  background: var(--blanc); border-left: 3px solid var(--rose);
  border-radius: 0 16px 16px 0; padding: 1rem 1.25rem; margin: 0 0 1.5rem;
}
.tunnel__retour p { margin: 0 0 0.5rem; max-width: none; font-size: 0.9375rem; }
.tunnel__retour p:last-child { margin-bottom: 0; }

.adm__message {
  white-space: pre-wrap; background: var(--creme); border-radius: 14px;
  padding: 1rem 1.25rem; margin: 0 0 1rem; max-width: none;
}
.depot__facultatif { font-weight: 400; color: var(--encre-douce); }
.depot__form input:focus-visible, .depot__form textarea:focus-visible { border-color: var(--rose); }
.depot__form textarea { resize: vertical; min-height: 8rem; }
.depot__aide { display: block; font-size: 0.8125rem; color: var(--encre-douce); margin-top: 0.35rem; }

@media (min-width: 34rem) {
  .depot__champs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
}

.etoile { display: block; width: 1em; height: 1em; flex: none; }
.etoile--pleine { fill: url("#etoile-or"); stroke: url("#etoile-or"); }

.etoile--vide { fill: currentColor; stroke: currentColor; opacity: 0.22; }

.etoile-part { position: relative; display: block; width: 1em; height: 1em; flex: none; }
.etoile-part__plein { position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden; }
.etoile-part__plein--10 { width: 10%; }
.etoile-part__plein--20 { width: 20%; }
.etoile-part__plein--30 { width: 30%; }
.etoile-part__plein--40 { width: 40%; }
.etoile-part__plein--50 { width: 50%; }
.etoile-part__plein--60 { width: 60%; }
.etoile-part__plein--70 { width: 70%; }
.etoile-part__plein--80 { width: 80%; }
.etoile-part__plein--90 { width: 90%; }

.depot__notes { border: 0; padding: 0; margin: 0 0 1.5rem; text-align: center; }
.depot__notes .selecteur__titre { margin-bottom: 0.75rem; }

.etoiles { display: flex; flex-direction: row-reverse; justify-content: center; font-size: 3rem; }

.etoiles__radio { position: absolute; opacity: 0; width: 0; height: 0; }
.etoiles__etoile {
  cursor: pointer; display: block; padding: 0 0.2rem; border-radius: 8px;
  transition: transform 0.12s;
}

.etoiles__forme { fill: var(--filet); stroke: var(--filet); transition: fill 0.12s, stroke 0.12s; }

.etoiles__etoile:hover .etoiles__forme,
.etoiles__etoile:hover ~ .etoiles__etoile .etoiles__forme,
.etoiles__radio:checked ~ .etoiles__etoile .etoiles__forme,
.etoiles__radio:checked + .etoiles__etoile .etoiles__forme {
  fill: url("#etoile-or"); stroke: url("#etoile-or");
}
.etoiles__etoile:hover { transform: scale(1.08); }

.etoiles__radio:focus-visible + .etoiles__etoile { outline: 3px solid var(--rose); outline-offset: 2px; }
@media (max-width: 600px) { .etoiles { font-size: 2.4rem; } }

.etoiles__valeur {
  margin: 0.4rem 0 0; min-height: 1.5rem;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.1rem;
  color: var(--encre); max-width: none;
}
.etoiles__valeur span { display: none; }
.depot__notes:has(#note-1:checked) .etoiles__valeur--1 { display: inline; }
.depot__notes:has(#note-2:checked) .etoiles__valeur--2 { display: inline; }
.depot__notes:has(#note-3:checked) .etoiles__valeur--3 { display: inline; }
.depot__notes:has(#note-4:checked) .etoiles__valeur--4 { display: inline; }
.depot__notes:has(#note-5:checked) .etoiles__valeur--5 { display: inline; }

.recit p { margin-left: auto; margin-right: auto; font-size: 1.125rem; }

.mention-cadre {
  margin: 1.75rem 0 0; padding: 0.9rem 0 0;
  border-top: 1px solid var(--filet);
  font-size: 0.875rem; color: var(--encre-douce); max-width: var(--mesure);
}

.legal { padding: 2rem 0 1rem; max-width: calc(var(--mesure) + 3rem); }
.legal h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 1.5rem; }
.legal h2 {
  font-size: 1.15rem; margin: 2.5rem 0 0.75rem; padding-top: 1.25rem;
  border-top: 1px solid var(--filet);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.5rem; }
.legal p { max-width: var(--mesure); margin-bottom: 0.9rem; }
.legal__maj { font-size: 0.875rem; color: var(--encre-douce); }
.legal__aparte {
  font-size: 0.9375rem; color: var(--encre-douce);
  border-left: 3px solid var(--filet); padding-left: 1rem;
}
.legal__liste { margin: 0 0 1rem; max-width: var(--mesure); }
.legal__liste dt { font-weight: 600; margin-top: 0.75rem; }
.legal__liste dd { margin: 0.1rem 0 0; color: var(--encre-douce); }
.legal__formulaire {
  background: var(--blanc); border-radius: 20px; padding: 1.5rem;
  margin: 1rem 0; box-shadow: 0 8px 24px rgba(26,17,48,.06); font-size: 0.9375rem;
}
.legal__formulaire p { max-width: none; }

.legal mark { background: #fff3cd; padding: 0.1rem 0.35rem; border-radius: 4px; }
.legal__nav {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem;
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--filet);
  font-size: 0.875rem;
}

.tunnel { display: grid; gap: 2.5rem; align-items: start; margin-top: 1.5rem; }

.tunnel__recap { order: -1; }
@media (min-width: 62rem) {
  .tunnel { grid-template-columns: 1.4fr 1fr; gap: 3rem; }

  .tunnel__recap { order: 0; }

  .tunnel__recap { position: sticky; top: 1.5rem; }
}
.tunnel h2 { font-size: 1.05rem; margin: 2rem 0 1rem; }
.tunnel h2:first-child { margin-top: 0; }
.champ__ligne { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1rem; max-width: 30rem; }
.champ__ligne label { font-size: 0.875rem; font-weight: 500; }
.champ__ligne input {
  padding: 0.8rem 1rem; font: inherit; border: 1px solid var(--filet);
  border-radius: 14px; background: var(--blanc); color: var(--encre);
}
.champ__ligne input:focus-visible { border-color: var(--rose); }

.champ__ligne input[aria-invalid="true"] { border-color: #c0392b; border-width: 2px; }
.champ__erreur { color: #c0392b; font-size: 0.8125rem; margin: 0; }

.champ--mdp { position: relative; }

.champ--mdp input { padding-right: 3rem; }
.mdp-voir {
  position: absolute; right: 0.4rem; bottom: 0.35rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.3rem; height: 2.3rem;
  padding: 0; border: 0; border-radius: 999px;
  background: transparent; color: var(--encre-douce);
  font: inherit; cursor: pointer;
}
.mdp-voir svg { display: block; }
.mdp-voir:hover { background: var(--creme); color: var(--encre); }
.mdp-voir:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }

.champ__flottant { position: relative; display: block; padding-top: 0; }
.champ__flottant input {
  width: 100%; padding: 1.45rem 1rem 0.55rem;

  transition: border-color 0.15s ease;
}
.champ__flottant label {
  position: absolute; left: 1rem; top: 1.05rem;
  color: var(--encre-douce); font-weight: 400; font-size: 1rem;
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.15s ease, color 0.15s ease;
}

.champ__flottant input:not(:placeholder-shown) + label,
.champ__flottant input:focus + label {
  transform: translateY(-0.75rem) scale(0.75);
  color: var(--encre-douce);
}
.champ__flottant input:focus + label { color: var(--rose); }

.champ__flottant input::placeholder { color: transparent; }
.champ__flottant input:focus::placeholder { color: var(--encre-douce); opacity: 0.55; }

.champ__flottant .champ__erreur { margin-top: 0.3rem; }

.champ__paire { align-items: start; }

.champ__flottant input[aria-invalid="true"] + label { color: #c0392b; }

.champ__paire { display: grid; gap: 0 1rem; max-width: 30rem; }
@media (min-width: 34rem) { .champ__paire { grid-template-columns: 1fr 1fr; } }
.champ__paire .champ__ligne { max-width: none; }

.champ__deplier { max-width: 30rem; margin: -0.25rem 0 1rem; }
.champ__deplier > summary {
  display: flex; align-items: center; gap: 0.4rem; cursor: pointer;
  font-size: 0.875rem; color: var(--rose); width: max-content;
  padding: 0.35rem 0; list-style: none;
}

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

.champ__deplier > summary::before {
  content: ""; width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(-45deg); margin-left: 0.15rem;
  transition: transform 0.15s ease;
}
.champ__deplier[open] > summary::before { transform: rotate(45deg); margin-top: -0.25rem; }
.champ__deplier > summary:hover { text-decoration: underline; }
.champ__deplier .champ__ligne { max-width: none; margin-top: 0.5rem; }

.modes { border: 0; padding: 0; margin: 0 0 1rem; max-width: 30rem; }
.modes--large { max-width: 40rem; }
.modes legend { font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; }
.mode {
  display: flex; align-items: center; gap: 0.75rem; cursor: pointer;
  padding: 0.9rem 1.1rem; margin-bottom: 0.6rem;
  background: var(--blanc); border: 1px solid var(--filet); border-radius: 16px;
}
.mode:has(input:checked) { border-color: var(--rose); border-width: 2px; padding: calc(0.9rem - 1px) calc(1.1rem - 1px); }
.mode input { accent-color: var(--rose); flex: none; }
.mode__nom { flex: 1; display: flex; flex-direction: column; font-weight: 500; font-size: 0.9375rem; }
.mode__nom small { font-weight: 400; color: var(--encre-douce); font-size: 0.8125rem; }

.mode__nom small + small { margin-top: 0.1rem; }

.mode:has(.mode__nom small + small) { align-items: flex-start; }
.mode:has(.mode__nom small + small) input { margin-top: 0.3rem; }
.mode__prix { font-family: 'Fredoka', sans-serif; font-variant-numeric: tabular-nums; }

.tunnel__recap {
  background: var(--blanc); border-radius: 24px; padding: 1.5rem;
  box-shadow: 0 8px 24px rgba(26,17,48,.06);
}
.tunnel__recap h2 { margin-top: 0; }

.recap__mode--domicile { display: none; }
.tunnel:has(#mode-domicile_sans_signature:checked) .recap__mode--relais { display: none; }
.tunnel:has(#mode-domicile_sans_signature:checked) .recap__mode--domicile { display: block; }

.recap__ligne { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; font-size: 0.9375rem; }
.recap__ligne--discret { color: var(--encre-douce); }
.recap__ligne--total {
  border-top: 1px solid var(--filet); margin-top: 0.35rem; padding-top: 0.8rem;
  font-family: 'Fredoka', sans-serif; font-size: 1.15rem;
}

.admin { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 3rem 1.5rem; }
.admin__carte {
  background: var(--blanc); border-radius: 28px; padding: 2.5rem; width: 100%; max-width: 34rem;
  box-shadow: 0 12px 40px rgba(26,17,48,.10);
}

@media (max-width: 560px) {
  .admin__carte { padding: 1.5rem 1.25rem; border-radius: 20px; }
}
.admin__carte h1 { font-size: 1.6rem; margin-bottom: 1.25rem; }
.admin__aide { color: var(--encre-douce); max-width: none; }
.admin__erreur {
  background: #fdecea; border: 1px solid #f5c6c0; color: #922b21;
  border-radius: 14px; padding: 0.8rem 1rem; font-size: 0.9375rem; max-width: none;
}
.admin__etapes { font-size: 0.9375rem; padding-left: 1.2rem; }
.admin__etapes li { margin-bottom: 0.75rem; }
.admin__secret, .admin__uri {
  display: block; margin-top: 0.4rem; padding: 0.7rem 0.9rem;
  background: var(--creme); border-radius: 12px; font-family: ui-monospace, monospace;
  word-break: break-all;
}
.admin__secret { font-size: 1.05rem; letter-spacing: 2px; }

.admin__qr { display: block; margin: 0.6rem 0; background: #fff; padding: 0.6rem; border-radius: 12px; width: max-content; }
.admin__qr svg { display: block; }
.admin__uri { font-size: 0.75rem; color: var(--encre-douce); }
.admin .champ__ligne { max-width: none; }
.admin .bouton--large { margin-top: 0.5rem; }

html:has(.adm__entete) { font-size: 80%; }

.adm__entete { background: var(--encre); color: var(--creme); padding: 0.9rem 0; }

.adm__inner { max-width: 1720px; margin: 0 auto; padding: 0 1.75rem; }
.adm__entete .adm__inner { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }

.adm__marque { display: inline-flex; align-items: center; color: var(--creme); text-decoration: none; flex: none; }
.adm__marque svg { height: 1.75rem; width: auto; }
.adm__nav { display: flex; gap: 1.2rem; font-size: 0.9375rem; flex: 1; }
.adm__nav a { color: #cfc4de; text-decoration: none; }
.adm__nav a:hover { color: var(--blanc); }

.adm__compteur {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem; margin-left: 0.15rem;
  border-radius: 999px; background: var(--rose); color: var(--blanc);
  font-family: 'Fredoka', sans-serif; font-size: 0.75rem; font-weight: 600;
  vertical-align: middle;
}

.adm__bascule { position: absolute; opacity: 0; pointer-events: none; }
.adm__burger { display: none; }
@media (max-width: 900px) {
  .adm__inner { padding: 0 1rem; }
  .adm__entete .adm__inner { gap: 0.75rem; position: relative; }

  .adm__burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 2.5rem; height: 2.5rem; margin-left: auto; padding: 0.5rem;
    border-radius: 999px; cursor: pointer; box-sizing: border-box;
  }
  .adm__burger span { display: block; height: 2px; background: var(--creme); border-radius: 2px; }

  .adm__bascule:focus-visible + .adm__burger { outline: 3px solid var(--rose); outline-offset: 2px; }

  .adm__nav { display: none; }
  .adm__bascule:checked ~ .adm__nav {
    display: flex; flex-direction: column; gap: 0.1rem;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
    margin-top: 0.9rem; padding: 0.5rem 1rem 1rem;
    background: var(--encre); border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .adm__bascule:checked ~ .adm__nav a { padding: 0.6rem 0.2rem; font-size: 1rem; }

  .adm__compte { position: static; }
  .adm__compte-tiroir { right: 1rem; left: auto; top: 100%; }
}

@media (max-width: 900px) {
  .adm .defilant { overflow-x: visible; background: transparent; box-shadow: none; }
  .adm .tableau, .adm .adm__table {
    display: block; min-width: 0; background: transparent; box-shadow: none;
  }
  .adm .tableau thead, .adm .adm__table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .adm .tableau tbody, .adm .adm__table tbody { display: block; }
  .adm .tableau tbody tr, .adm .adm__table tbody tr {
    display: block; background: var(--blanc); border-radius: 18px;
    box-shadow: 0 8px 24px rgba(26, 17, 48, 0.06);
    padding: 0.35rem 1rem; margin-bottom: 0.9rem;
  }
  .adm .tableau tbody td, .adm .adm__table tbody td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--filet);
    text-align: right;
  }
  .adm .tableau tbody tr td:last-child, .adm .adm__table tbody tr td:last-child { border-bottom: 0; }
  .adm .tableau tbody td[data-libelle]::before, .adm .adm__table tbody td[data-libelle]::before {
    content: attr(data-libelle); font-weight: 600; color: var(--encre-douce);
    text-align: left; flex: 0 0 auto; font-size: 0.8125rem;
  }
  .adm .adm__table tbody td[data-principal] {
    display: block; text-align: left; font-size: 1.05rem; padding-top: 0.75rem;
  }
  .adm .adm__table tbody td[data-principal]::before { content: none; }

  .adm .adm__table tbody td .adm__action,
  .adm .adm__table tbody td form { flex: 1 1 auto; }

  .adm__bloc { padding: 1.25rem 1rem; }
  .adm__grille { grid-template-columns: 1fr; }
}

.marque__pro {
  margin-left: 0.4rem; padding: 0.05rem 0.45rem; border-radius: 6px;
  background: var(--rose); color: var(--blanc);
  font-family: 'Fredoka', sans-serif; font-size: 0.7em; letter-spacing: 0.04em;
  vertical-align: middle;
}

.compte__vide { text-align: center; padding: 2.5rem 1.5rem; }
.compte__vide p { max-width: none; }

.histoire__texte h1 { margin: 0 0 0.8rem; }

.histoire__texte > * { max-width: var(--mesure); margin-left: 0; margin-right: 0; }
.histoire__texte h2 { margin-top: 0; }

.histoire__duo { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 56rem) {
  .histoire__duo { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }

  .histoire__duo--inverse { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }

  .histoire__duo--inverse .histoire__visuel { order: 1; }
  .histoire__duo--inverse .histoire__texte { order: 2; }
}

:root { --ombre-recit: 0 22px 40px rgba(26, 17, 48, 0.28); }

.histoire__video {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 28px; box-shadow: var(--ombre-recit);

  background: transparent;
}

.histoire__portrait {
  display: block; width: 100%; height: auto;
  max-height: clamp(22rem, 42vw, 32rem); object-fit: cover; object-position: center 25%;
  border-radius: 28px; box-shadow: var(--ombre-recit);
}

@media (max-width: 56rem) { .histoire__visuel { order: 2; } }

.histoire__visuel .vignette__scene {
  border-radius: 28px; height: clamp(260px, 34vw, 420px); width: 100%;
}

.histoire__pack .histoire__texte > * { max-width: none; }

.histoire__texte > .histoire__mini {
  max-width: none; margin: 1.75rem 0 2.25rem;
}
.histoire__mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.75rem, 1.5vw, 1.25rem); }
.histoire__mini .vignette__scene {
  height: clamp(180px, 21vw, 300px); border-radius: 0;
}
.histoire__mini .vignette { border-radius: 20px; box-shadow: var(--ombre-recit); }
.histoire__mini .vignette__texte { padding: 0.75rem 0.85rem 1rem; gap: 0.25rem; }
.histoire__mini .vignette__nom { font-size: 1.25rem; }
.histoire__mini .vignette__degustation { font-size: 0.875rem; }
@media (max-width: 56rem) { .histoire__mini { grid-template-columns: 1fr; } }

.histoire__rouge {
  background: var(--rouge);
  padding-top: clamp(2rem, 5vw, 3.5rem); padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

.histoire__citron {
  background: var(--citron);
  padding-top: clamp(2rem, 5vw, 3.5rem); padding-bottom: clamp(2rem, 5vw, 3.5rem);
}
.histoire__rouge h1 { color: var(--blanc); }
.histoire__rouge p { color: #ffe0e6; }
.histoire__rouge strong { color: var(--blanc); }

.histoire__rouge .histoire__cle { color: var(--encre); }
.histoire__rouge .histoire__cle::before { color: var(--rose); }

.histoire__rouge .mention-cadre {
  color: #ffe0e6; border-top-color: rgba(255, 255, 255, 0.35);
}

.histoire__pack {
  background: linear-gradient(140deg, var(--citron), var(--rose));
  padding-top: clamp(2rem, 5vw, 3.5rem); padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

.histoire__pack .note { color: var(--encre); }

.histoire__rouge .histoire__mention,
.histoire__citron .histoire__mention,
.histoire__pack .histoire__mention {
  max-width: none;
  text-align: center;
  margin: clamp(2rem, 5vw, 3.5rem) auto 0; padding: 0.9rem 6vw 0;

  border-top: 0;
}

.histoire__signature { font-family: 'Fredoka', sans-serif; font-size: 1.15rem; margin-top: 2rem; }
.histoire__signature span { font-size: 1.7rem; }

.histoire__cle {
  position: relative; margin: 2.5rem 0; padding: 2rem 2rem 2rem 3.75rem;
  text-wrap: balance;
  background: var(--blanc); border-radius: 28px;
  box-shadow: var(--ombre-recit);
  font-family: 'Fredoka', sans-serif; font-weight: 600;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem); line-height: 1.15; color: var(--encre);
}
.histoire__cle::before {
  content: "“"; position: absolute; left: 1.1rem; top: 0.35rem;
  font-family: 'Fredoka', sans-serif; font-size: 4.5rem; line-height: 1;
  color: var(--rose);
}

.carnet { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.carnet__ligne {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  align-items: flex-start; padding: 0.9rem 0; border-top: 1px solid var(--filet);
}
.carnet__ligne:last-child { border-bottom: 1px solid var(--filet); }

.carnet__defaut {
  display: inline-block; margin-left: 0.6rem; padding: 0.15rem 0.7rem;
  border-radius: 999px; background: var(--rose); color: var(--blanc);
  font-family: 'Fredoka', sans-serif; font-weight: 600;
  font-size: var(--texte-mini); letter-spacing: 0.02em; vertical-align: middle;
}
.carnet__adresse { font-style: normal; color: var(--encre-douce); margin-top: 0.35rem; }
.carnet__actions { display: flex; gap: 0.5rem; align-items: center; }
.carnet__actions form { margin: 0; }
.carnet__ajout { margin-top: 0.5rem; }

.carnet__ajout .consentement {
  max-width: none; margin: 1.1rem 0 1.4rem; align-items: center;
  font-size: var(--texte-petit); color: var(--encre);
}

.carnet__ajout .consentement input { accent-color: var(--rose); width: 1.1rem; height: 1.1rem; }

.carnet__aparte {
  display: inline-block; margin-left: 0.4rem;
  font-weight: 400; font-size: var(--texte-petit); color: var(--encre-douce);
}

.bascule { display: inline-flex; border: 1px solid var(--filet); border-radius: 999px; overflow: hidden; }
.bascule form { margin: 0; }
.bascule button {
  font: inherit; font-size: var(--texte-mini); font-weight: 500;
  padding: 0.35rem 0.75rem; border: 0; background: transparent;
  color: var(--encre-douce); cursor: pointer;
}
.bascule button:hover { background: var(--blanc); color: var(--encre); }
.bascule .bascule--active { background: var(--encre); color: var(--creme); }

.bascule__pro { text-transform: uppercase; font-weight: 700; letter-spacing: 1px; }

.nav__pro { font-weight: 700; letter-spacing: 1px; color: var(--rose); }

.compte-menu { position: relative; }
.compte-menu > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 999px; color: var(--encre);
}
.compte-menu > summary::-webkit-details-marker { display: none; }
.compte-menu > summary svg { width: 1.5rem; height: 1.5rem; }
.compte-menu > summary:hover, .compte-menu[open] > summary { color: var(--rose); }
.compte-menu > summary:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }

.compte-menu__tiroir {
  position: absolute; right: 0; top: calc(100% + 0.6rem); z-index: 30;
  min-width: 14rem; padding: 0.4rem;
  background: var(--blanc); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(20, 10, 35, 0.18);
}

.compte-menu__bonjour {
  margin: 0; padding: 0.5rem 0.75rem 0.7rem;
  border-bottom: 1px solid var(--filet); margin-bottom: 0.3rem;
  font-size: var(--texte-petit); color: var(--encre-douce); max-width: none;
}
.compte-menu__bonjour strong { color: var(--encre); }
.compte-menu__tiroir form { margin: 0; }
.compte-menu__tiroir a, .compte-menu__tiroir button {
  display: block; width: 100%; box-sizing: border-box; text-align: left;
  padding: 0.6rem 0.75rem; border-radius: 9px;
  font: inherit; font-size: var(--texte-petit); color: var(--encre);
  text-decoration: none; background: none; border: 0; cursor: pointer;
}
.compte-menu__tiroir a:hover, .compte-menu__tiroir button:hover { background: var(--creme); }

.adm__compte { position: relative; }
.adm__compte > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border: 1px solid #6b5d7d; border-radius: 999px; color: #cfc4de;
}

.adm__compte > summary::-webkit-details-marker { display: none; }
.adm__compte > summary:hover, .adm__compte[open] > summary { color: var(--blanc); border-color: #cfc4de; }
.adm__compte > summary svg { width: 1.25rem; height: 1.25rem; }

.adm__compte-tiroir {
  position: absolute; right: 0; top: calc(100% + 0.6rem); z-index: 30;
  min-width: 15rem; padding: 0.4rem;
  background: var(--blanc); color: var(--encre);
  border-radius: 14px; box-shadow: 0 12px 32px rgba(20, 10, 35, 0.28);
}
.adm__compte-qui {
  margin: 0 0 0.25rem; padding: 0.6rem 0.75rem;
  font-size: 0.8125rem; color: var(--encre-douce);
  border-bottom: 1px solid #ece5f4; word-break: break-all;
}
.adm__compte-tiroir form { margin: 0; }
.adm__compte-tiroir a, .adm__compte-tiroir button {
  display: block; width: 100%; box-sizing: border-box; text-align: left;
  padding: 0.55rem 0.75rem; border-radius: 9px;
  background: transparent; border: 0; color: var(--encre);
  font: inherit; font-size: 0.9375rem; text-decoration: none; cursor: pointer;
}
.adm__compte-tiroir a:hover, .adm__compte-tiroir button:hover { background: #f5f0fa; color: var(--rose); }

.adm { padding: 2.5rem 0 4rem; min-height: 60vh; }
.adm h1 { font-size: 1.8rem; margin-bottom: 1.25rem; }
.adm h2 { font-size: 1.1rem; margin: 2rem 0 0.9rem; }
.adm__aide { color: var(--encre-douce); max-width: none; }
.adm__fil { font-size: 0.875rem; margin-bottom: 0.5rem; }
.adm__vide { color: var(--encre-douce); padding: 1rem 0; }

.adm__pastilles { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--blanc); border-top: 1px solid var(--filet);
  box-shadow: 0 -8px 32px rgba(26, 17, 48, 0.12);
}
.consent__inner {
  max-width: var(--large); margin: 0 auto; padding: 1rem 6vw;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem;
}
.consent__texte { margin: 0; flex: 1 1 22rem; font-size: var(--texte-petit); max-width: none; }
.consent__texte strong { display: block; font-family: 'Fredoka', sans-serif; }
.consent__choix { display: flex; gap: 0.75rem; flex: 0 0 auto; }
.consent__choix form { margin: 0; }

@media (max-width: 560px) {
  .consent__choix { width: 100%; }
  .consent__choix form { flex: 1 1 0; }
  .consent__choix .bouton { width: 100%; }
}

.adm__pastille {
  background: var(--blanc); border: 1px solid var(--filet); border-radius: 18px;
  padding: 0.9rem 1.2rem; min-width: 9rem; text-decoration: none;
  display: flex; flex-direction: column; gap: 0.1rem;
}
.adm__pastille:hover { border-color: var(--rose); }
.adm__pastille b { font-family: 'Fredoka', sans-serif; font-size: 1.5rem; line-height: 1; }
.adm__pastille span { font-size: 0.8125rem; color: var(--encre-douce); }
.adm__pastille--fort b { color: var(--rose); }

.adm__filtres { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.adm__filtre {
  font-size: 0.8125rem; text-decoration: none; padding: 0.35rem 0.85rem;
  border-radius: 999px; border: 1px solid var(--filet); background: var(--blanc);
}
.adm__filtre--actif { background: var(--encre); color: var(--creme); border-color: var(--encre); }

.adm__table a { text-decoration: none; }

.adm__table code { font-size: 0.875rem; white-space: nowrap; }
.adm__nowrap { white-space: nowrap; }

.adm__mini { max-width: 8rem; }
.adm__table--serree th, .adm__table--serree td { padding: 0.6rem 0.9rem; vertical-align: middle; }
.adm__table--serree input { margin: 0; }

.adm__table--serree .adm__aide { display: block; font-size: 0.75rem; margin-top: 0.1rem; }

.adm__manque { color: #922b21; }
.adm__publication { display: flex; gap: 0.4rem; align-items: center; }

.adm__table .bouton { padding: 0.35rem 0.8rem; font-size: 0.8125rem; }
.bouton--icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; padding: 0; border-radius: 999px;
  border: 1px solid var(--encre); background: var(--blanc); color: var(--encre);
  cursor: pointer;
}
.adm__table .bouton--icone { padding: 0; }
.bouton--icone:hover, .bouton--icone:focus-visible { background: var(--encre); color: var(--creme); }
.bouton--icone .picto { width: 1.1rem; height: 1.1rem; }

.adm__bloc h2 .adm__aide { display: inline; font-weight: 400; margin-left: 0.5rem; }
.adm__nombre { text-align: right; font-variant-numeric: tabular-nums; }

.adm__table td.adm__nombre, .adm__table th.adm__nombre { text-align: right; }

.adm__detail { max-width: 26rem; }
.adm__detail-lien {
  display: flex; flex-direction: column; gap: 0.15rem;
  font-size: 0.875rem; line-height: 1.35; color: inherit;
  margin: -0.35rem -0.5rem; padding: 0.35rem 0.5rem; border-radius: 12px;
}
.adm__detail-lien:hover, .adm__detail-lien:focus-visible { background: var(--creme); }
.adm__detail-ligne { display: block; }
.adm__detail-qte { font-variant-numeric: tabular-nums; font-weight: 600; }

.adm__etiquette { white-space: nowrap; display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; }
.adm__etiquette .bouton { min-width: 6.5rem; text-align: center; font-size: 0.8125rem; padding: 0.4rem 0.9rem; }
.adm__etiquette form { margin: 0; }

.adm__statut {
  display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.6rem;
  border-radius: 999px; background: var(--filet); white-space: nowrap;
}
.adm__statut--pending { background: #fff3cd; color: #7a5c00; }
.adm__statut--paid { background: #d7f5e1; color: #14663a; }
.adm__statut--prepared, .adm__statut--shipped { background: #dce8ff; color: #1c3f7c; }
.adm__statut--delivered { background: #d7f5e1; color: #0f4d2c; }
.adm__statut--canceled, .adm__statut--refunded { background: #fdecea; color: #922b21; }

.adm__pagination { display: flex; gap: 1.5rem; align-items: center; font-size: 0.875rem; margin-top: 1.25rem; }
.adm__grille { display: grid; gap: 1.25rem; }
@media (min-width: 52rem) { .adm__grille { grid-template-columns: 1fr 1fr; } }
.adm__bloc {
  background: var(--blanc); border-radius: 20px; padding: 1.5rem;
  box-shadow: 0 8px 24px rgba(26,17,48,.06); margin-bottom: 1.25rem;
}
.adm__bloc h2 { margin-top: 0; }

.adm__bloc input[type="text"], .adm__bloc input[type="email"], .adm__bloc input[type="date"],
.adm__bloc input[type="number"], .adm__bloc input[type="password"], .adm__bloc select,
.adm__bloc textarea {
  padding: 0.55rem 0.8rem; font: inherit; color: var(--encre);
  background: var(--blanc); border: 1px solid var(--filet); border-radius: 12px;
  max-width: 100%;
}
.adm__bloc input:focus-visible, .adm__bloc select:focus-visible,
.adm__bloc textarea:focus-visible { border-color: var(--rose); outline: none; }
.adm__bloc select[multiple] { padding: 0.35rem; }

.adm__ligne-form {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin: 0.75rem 0 0;
}

.adm__grille {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem 1.25rem; align-items: end; margin: 0.75rem 0 0;
}
@media (max-width: 1100px) { .adm__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .adm__grille { grid-template-columns: 1fr; } }

.adm__champ { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }

.adm__champ > input, .adm__champ > select, .adm__champ > textarea { width: 100%; }
.adm__champ > span {
  font-size: 0.75rem; letter-spacing: 0.4px; text-transform: uppercase;
  font-weight: 600; color: var(--encre-douce);
}

.adm__champ--large { grid-column: span 2; }

.adm__champ-paire { display: flex; align-items: center; gap: 0.5rem; flex-wrap: nowrap; }
.adm__champ-paire input { min-width: 0; flex: 1 1 auto; }
.adm__champ-paire > span { font-size: 0.8125rem; color: var(--encre-douce); }

.adm__champ--case {
  flex-direction: row; align-items: center; gap: 0.5rem; font-size: 0.875rem;
  white-space: nowrap;
}
.adm__champ--case input { accent-color: var(--rose); width: 1.05rem; height: 1.05rem; }

.adm__edition-case { position: absolute; opacity: 0; width: 0; height: 0; }
.adm__edition-ligne { display: none; }
tr:has(.adm__edition-case:checked) + .adm__edition-ligne { display: table-row; }
.adm__edition { padding: 0.5rem 0 1rem; }

.adm__actions-code { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.adm__actions-code form { margin: 0; }

.adm__fige { margin: 0; padding: 0.55rem 0; color: var(--encre-douce); }

.adm__grille-actions {
  grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center;
  gap: 1rem; padding-top: 0.25rem; border-top: 1px solid var(--filet); margin-top: 0.25rem;
}

.adm__auto { position: relative; }
.adm__auto-liste {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
  margin: 0.25rem 0 0; padding: 0.25rem; list-style: none;
  background: var(--blanc); border: 1px solid var(--filet); border-radius: 14px;
  box-shadow: 0 12px 28px rgba(26, 17, 48, 0.12);
  max-height: 15rem; overflow-y: auto;
}
.adm__auto-choix {
  display: flex; flex-direction: column; gap: 0.1rem; width: 100%;
  padding: 0.5rem 0.7rem; border: 0; border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--encre); font: inherit; text-align: left;
}
.adm__auto-choix:hover, .adm__auto-choix:focus-visible {
  background: rgba(255, 92, 138, 0.08); outline: none;
}
.adm__auto-choix span { font-size: 0.8125rem; color: var(--encre-douce); }
.adm__auto-vide { padding: 0.6rem 0.7rem; font-size: 0.875rem; color: var(--encre-douce); }
.adm__adresse { font-style: normal; font-size: 0.9375rem; line-height: 1.5; margin-top: 0.75rem; }
.adm__totaux { margin-top: 1rem; }
.adm__histoire { list-style: none; padding: 0; margin: 0; font-size: 0.9375rem; }
.adm__histoire li { padding: 0.5rem 0; border-bottom: 1px solid var(--filet); }
.adm__histoire li:last-child { border-bottom: 0; }
.adm__motif { color: var(--encre-douce); font-size: 0.875rem; }
.adm__bloc--technique code { font-size: 0.8125rem; word-break: break-all; }

.adm__panne {
  background: #fdecea; border: 1px solid #f5c6c0; border-left: 5px solid #922b21;
  border-radius: 18px; padding: 1.1rem 1.3rem; margin: 0 0 1.75rem;
}
.adm__panne-titre {
  display: flex; align-items: baseline; gap: 0.5rem;
  margin: 0 0 0.4rem; font-size: 1.05rem; color: #922b21;
}
.adm__panne-titre b { font-family: 'Fredoka', sans-serif; font-size: 1.6rem; line-height: 1; }
.adm__panne-texte { margin: 0; max-width: none; }

.adm__panne-technique { margin: 0.6rem 0 0; max-width: none; }
.adm__panne-technique code {
  font-size: 0.8125rem; word-break: break-word; color: var(--encre-douce);
}
.adm__panne-actions {
  display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
  margin: 0.9rem 0 0; max-width: none;
}
.adm__panne-form { margin: 0; }
.adm__panne-note { margin: 0.7rem 0 0; font-size: 0.8125rem; color: var(--encre-douce); max-width: none; }

.adm__bandeau {
  display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; align-items: baseline;
  background: var(--blanc); border: 1px solid var(--filet); border-radius: 18px;
  padding: 0.9rem 1.2rem; margin-bottom: 1.25rem; max-width: none;
  font-size: 0.8125rem; color: var(--encre-douce);
}
.adm__bandeau b {
  font-family: 'Fredoka', sans-serif; font-size: 1.25rem; line-height: 1;
  color: var(--encre); margin-right: 0.3rem;
}
.adm__bandeau-seuil { margin-left: auto; }

.adm__colonnes { display: grid; gap: 1.25rem; align-items: start; }

@media (min-width: 52rem) {
  .adm__colonnes { grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); }
}
.adm__colonne { margin-bottom: 0; }
.adm__colonne-titre {
  margin: 0 0 0.75rem; font-size: 1.05rem; padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--filet);
}

.adm__colonne-chiffre { display: flex; align-items: baseline; gap: 0.5rem; margin: 0; }
.adm__colonne-chiffre b {
  font-family: 'Fredoka', sans-serif; font-size: 2.4rem; line-height: 1; color: var(--rose);
  font-variant-numeric: tabular-nums;
}
.adm__colonne-chiffre span { font-size: 0.875rem; color: var(--encre-douce); }
.adm__colonne-cartons { margin: 0.35rem 0 1rem; font-size: 0.9375rem; font-weight: 600; }
.adm__colonne-sous {
  margin: 1.5rem 0 0.75rem; font-size: 0.8125rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--encre-douce);
}

.adm__paires { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; margin: 0; max-width: none; }
.adm__paires dt { font-size: 0.875rem; color: var(--encre-douce); }
.adm__paires dd { margin: 0; font-size: 0.9375rem; text-align: right; font-variant-numeric: tabular-nums; }
.adm__paires--serre { gap: 0.25rem 1rem; }
.adm__paires--serre dt, .adm__paires--serre dd { font-size: 0.875rem; }
.adm__paires--alerte { color: #7a5c00; }

.adm__lot { border-top: 1px solid var(--filet); padding: 0.9rem 0 0; margin-top: 0.9rem; }
.adm__lot:first-of-type { border-top: 0; padding: 0; margin-top: 0; }
.adm__lot-titre { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.6rem; font-size: 0.9375rem; }

.adm__colonne .adm__champs3 { grid-template-columns: 1fr; }

.adm__journal { list-style: none; margin: 0; padding: 0; }
.adm__journal > li { padding: 0.7rem 0; border-bottom: 1px solid var(--filet); }
.adm__journal > li:first-child { padding-top: 0; }
.adm__journal > li:last-child { border-bottom: 0; padding-bottom: 0; }
.adm__journal-tete {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.8rem;
  margin: 0; max-width: none; font-size: 0.9375rem;
}
.adm__journal time {
  font-size: 0.8125rem; color: var(--encre-douce);
  font-variant-numeric: tabular-nums; min-width: 8rem;
}
.adm__journal code { font-size: 0.875rem; }
.adm__journal-parfum { font-size: 0.875rem; color: var(--encre-douce); }

.adm__journal-genre {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.125rem 0.4rem; border-radius: 999px; white-space: nowrap;
}
.adm__journal-genre--manuel { background: rgba(26, 17, 48, 0.06); color: var(--encre-douce); }
.adm__journal-genre--vente  { background: #e8f0fe; color: #1a4a8f; }
.adm__journal-genre--retour { background: #fdf0e4; color: #8a5320; }
.adm__journal-quantite { font-variant-numeric: tabular-nums; font-weight: 600; }
.adm__journal-delta {
  font-size: 0.75rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 999px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.adm__journal-delta--hausse { background: #d7f5e1; color: #14663a; }
.adm__journal-delta--baisse { background: #fdecea; color: #922b21; }
.adm__journal-motif {
  margin: 0.2rem 0 0; font-size: 0.875rem; color: var(--encre-douce); max-width: none;
}
.adm__journal + .adm__aide { margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--filet); }

.adm__ajuster > summary {
  cursor: pointer; font-size: 0.875rem; color: var(--encre-douce);
  margin-top: 0.6rem; padding: 0.3rem 0;
}
.adm__ajuster > summary:hover { color: var(--rose); }
.adm__ajuster .adm__formulaire { margin-top: 0.5rem; }

.adm__succes {
  background: #d7f5e1; border: 1px solid #9fd9b6; color: #14663a;
  border-radius: 14px; padding: 0.8rem 1rem; font-size: 0.9375rem; max-width: none;
}
.adm__formulaire { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--filet); }

.avis-mod__entete { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 0.9rem; }
.avis-mod__etoiles { display: inline-flex; gap: 0.08rem; font-size: 1.1rem; }

.avis-mod__texte {
  margin: 0 0 0.9rem; padding: 0.9rem 1.1rem;
  background: var(--creme); border-left: 3px solid var(--filet); border-radius: 0 14px 14px 0;
  font-size: 0.9375rem; line-height: 1.6;
}
.avis-mod__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 1rem; }
.avis-mod__actions form { display: flex; gap: 0.5rem; align-items: center; }

.avis-mod__refus { flex: 1 1 22rem; }
.avis-mod__refus input {
  flex: 1; min-width: 0; padding: 0.6rem 0.9rem; font: inherit;
  border: 1px solid var(--filet); border-radius: 12px; background: var(--blanc); color: var(--encre);
}

.adm__alerte {
  background: #fff3cd; border: 1px solid #ecd28a; color: #6b4e00;
  border-radius: 14px; padding: 0.85rem 1.1rem; font-size: 0.9375rem; max-width: none;
  margin-bottom: 1.25rem;
}
.adm__alerte code { background: rgba(0,0,0,.06); padding: 0.1rem 0.35rem; border-radius: 6px; }

.adm__table .adm__aide { display: block; font-size: 0.8125rem; margin-top: 0.15rem; }
.adm__form { max-width: 52rem; margin-top: 1.25rem; }
.adm__form label { display: block; font-weight: 600; font-size: 0.9375rem; margin: 1.1rem 0 0.35rem; }

.adm__form input[type="text"], .adm__form input[type="email"],
.adm__form input[type="date"], .adm__form select, .adm__form textarea {
  width: 100%; padding: 0.75rem 1rem; border-radius: 14px;
  border: 1px solid var(--filet); background: var(--blanc); font: inherit; color: var(--encre);
}

.adm__form select { appearance: auto; }

.adm__bloc > summary { cursor: pointer; padding: 0.4rem 0; font-size: 1.0625rem; }

.adm__form textarea { font-family: ui-monospace, monospace; font-size: 0.875rem; line-height: 1.6; resize: vertical; }
.adm__form .consentement { display: flex; gap: 0.6rem; align-items: flex-start; margin: 1.1rem 0; font-size: 0.9375rem; }
.adm__form .consentement label { margin: 0; font-weight: 400; }
.adm__variables { list-style: none; padding: 0; font-size: 0.9375rem; max-width: 52rem; }
.adm__variables li { padding: 0.45rem 0; border-bottom: 1px solid var(--filet); }
.adm__variables code {
  background: var(--blanc); border: 1px solid var(--filet); border-radius: 8px;
  padding: 0.1rem 0.4rem; font-size: 0.8125rem;
}
.adm__champs { display: grid; gap: 1rem; }
@media (min-width: 44rem) { .adm__champs { grid-template-columns: 12rem 1fr; align-items: start; } }
.adm__champs .champ__ligne { margin-bottom: 0.5rem; max-width: none; }
.adm__bloc h3 { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem; }

.adm__recherche { display: flex; gap: 0.6rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.adm__recherche input {
  flex: 1 1 18rem; max-width: 26rem; padding: 0.7rem 1rem; font: inherit;
  border: 1px solid var(--filet); border-radius: 14px; background: var(--blanc);
}
.adm__champs2 { display: grid; gap: 0.75rem 1.25rem; }
@media (min-width: 44rem) { .adm__champs2 { grid-template-columns: 1fr 1fr; } }
.adm__champs2 .champ__ligne { max-width: none; margin-bottom: 0; }
.adm__champs3 { display: grid; gap: 0.75rem 1.25rem; }
@media (min-width: 44rem) { .adm__champs3 { grid-template-columns: 10rem 10rem 1fr; align-items: start; } }
.adm__champs3 .champ__ligne { max-width: none; margin-bottom: 0; }

.adm__edition { margin: 1rem 0; box-shadow: none; border: 1px solid var(--filet); }
.adm__produits { display: grid; gap: 0.5rem; margin-bottom: 1rem; }
.adm__ligne-produit { display: grid; grid-template-columns: 1fr 6rem; gap: 1rem; align-items: center; max-width: 34rem; margin-bottom: 0; }
.adm__ligne-produit label { font-size: 0.9375rem; font-weight: 400; }

.adm__actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; }
.adm__actions h2 { width: 100%; margin: 0 0 0.25rem; }
.adm__action { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0; }
.adm__suivi {
  padding: 0.7rem 1rem; font: inherit; border: 1px solid var(--filet);
  border-radius: 14px; background: var(--creme); min-width: 16rem;
}
.adm__action button[disabled] { opacity: 0.4; cursor: not-allowed; }

.note { font-size: 0.8125rem; color: var(--encre-douce); max-width: var(--mesure); }
.note sup { font-size: 0.7em; }
.hero .note, .plein .note, .sombre .note { margin-left: auto; margin-right: auto; }

.champ { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; margin: 1.25rem 0 0.9rem; }
.champ input[type="email"] {
  flex: 1 1 18rem; max-width: 22rem; padding: 0.95rem 1.2rem; font: inherit;
  border: 2px solid var(--encre); border-radius: 999px; background: var(--blanc); color: var(--encre);
}
.champ button { cursor: pointer; }
.consentement {
  display: flex; gap: 0.6rem; align-items: flex-start; text-align: left;
  font-size: 0.875rem; max-width: 34rem; margin: 0 auto; color: var(--encre-douce);
}

.lettre { background: #fdf0e9; padding: clamp(2.5rem, 5vw, 3.75rem) 0; text-align: center; }

.lettre__titre { margin-bottom: 0.6rem; }

.lettre__intro {
  max-width: 52ch; margin: 0 auto 1.75rem; font-size: 1.0625rem;
}

.lettre__form {
  display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center;
  max-width: 620px; margin: 0 auto;
}
.lettre__form input {
  flex: 1 1 260px; min-width: 0;
  padding: 0.95rem 1.5rem; border-radius: 999px;
  border: 2px solid rgba(26, 17, 48, 0.12); background: var(--creme);
  font: inherit; color: var(--encre);
}
.lettre__form input::placeholder { color: var(--encre-douce); opacity: 0.75; }
.lettre__form input:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }
.lettre__form .bouton { flex: 0 0 auto; padding: 0.95rem 2.25rem; }

.lettre .consentement {
  display: flex; gap: 0.6rem; align-items: flex-start; text-align: left;
  max-width: 620px; margin: 1.25rem auto 0;
  font-size: 0.8125rem; color: var(--encre-douce);
}
.lettre .consentement input { margin-top: 0.15rem; flex: none; }

.pied { background: var(--encre); color: #a495bb; padding: 3.5rem 0; font-size: 0.875rem; }

.pied .marque { color: var(--blanc); font-size: 1.35rem; margin-bottom: 1rem; }
.pied a { color: #cfc4de; }
.pied a:hover { color: var(--rose); }
.pied__liens { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; margin: 1.25rem 0; }
.pied p { max-width: none; }

.pied__reseaux { margin: 2rem 0 1.5rem; text-align: center; }
.pied__reseaux-titre {
  margin: 0 0 0.9rem; font-family: 'Fredoka', sans-serif; font-weight: 700;
  font-size: 1.15rem; color: #a495bb;
}
.pied__reseaux-liens { display: flex; gap: 0.75rem; justify-content: center; }

.icone--reseau { color: #cfc4de; padding: 0.6rem; }
.icone--reseau svg { width: 26px; height: 26px; }
.icone--reseau:hover { color: var(--rose); background: rgba(255, 92, 138, 0.14); }

@keyframes flotte {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-22px) rotate(2deg); }
}
.flotte { animation: flotte 5s ease-in-out infinite; }

@keyframes flotte-v-gauche {
  0%, 100% { transform: rotate(-9deg) translateY(0); }
  50% { transform: rotate(-6deg) translateY(-16px); }
}
@keyframes flotte-v-droite {
  0%, 100% { transform: rotate(9deg) translateY(0); }
  50% { transform: rotate(6deg) translateY(-16px); }
}

.flotte-v { transform-origin: bottom center; }
.flotte-v--gauche { animation: flotte-v-gauche 5.4s ease-in-out infinite; }
.flotte-v--droite { animation: flotte-v-droite 5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }

  .flotte { animation: flotte 5s ease-in-out infinite !important; }

  .bandeau__piste { animation: bandeau-defile 34s linear infinite !important; }

  .flotte-v--gauche { animation: flotte-v-gauche 5.4s ease-in-out infinite !important; }
  .flotte-v--droite { animation: flotte-v-droite 5s ease-in-out infinite !important; }

  .format {
    transition:
      transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
      box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
      opacity 0.3s ease-out !important;
  }

  @media (hover: hover) {
    .canette-etats__ouverte { transition: opacity 0.3s ease !important; }
    .canette-scene:hover .bulle {
      animation: pshitt var(--duree) ease-out calc(var(--retard) * 1s) both !important;
    }
  }

  .entete--ajout .icone--panier {
    animation: panier-battement 1.15s ease-in-out both !important;
  }
}

.contact__scene { position: relative; }

@media (min-width: 900px) {

  .contact__scene { min-height: 42rem; }

  .contact__scene .contact__visuel {
    position: absolute; right: 0; top: 0; bottom: 0; width: 20rem;
    display: flex; align-items: flex-start; justify-content: center;

    z-index: 2;

    pointer-events: none;
  }

  .contact__scene .contact__visuel .canette {
    height: 100%; max-height: 42rem; width: auto; max-width: none;
  }

  .contact__scene .contact__colonne { max-width: none; }
  .contact__scene .contact__form {
    background: transparent; border: 0; padding: 0; max-width: none; margin: 1.5rem 0 2.5rem;
  }

  .contact__scene .contact__colonne > h1,
  .contact__scene .contact__colonne > p { margin-right: 23rem; }

  .contact__scene .contact__form input[type="text"],
  .contact__scene .contact__form input[type="email"],
  .contact__scene .contact__form textarea,
  .contact__scene .contact__form select {
    width: 100%; padding-right: 23rem;
  }

  .contact__scene .contact__form .depot__champ label,
  .contact__scene .contact__form .depot__aide,
  .contact__scene .contact__form > .depot__aide {
    display: block; margin-right: 23rem; text-align: left;
  }
  .contact__scene .contact__form button { display: block; margin-left: 0; }

  .contact__scene .contact__form .depot__champs { grid-template-columns: 1fr; }
}

:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }
.saut { position: absolute; left: -9999px; }
.saut:focus {
  left: 1rem; top: 1rem; z-index: 10; background: var(--blanc); color: var(--encre);
  padding: 0.75rem 1.25rem; border-radius: 999px; border: 2px solid var(--encre);
}