/* ==========================================================================
   Moon — La Saveur du Pain
   Maquette Figma : WIDARR-DEV / Moon.fr (1440 × 4999)
   Mobile d'abord (mise en page fluide), puis direction artistique fidèle
   à la maquette à partir de 1024px (canevas 1440px mis à l'échelle).
   ========================================================================== */

:root {
  --black: #000;
  --white: #fff;
  --grey-text: #d0d0d0;
  --grey-tag: #bfbfbf;
  --shadow-text: 0 4px 11px rgba(0, 0, 0, 0.37);

  --font-body: "Manrope", system-ui, sans-serif;
  --font-script: "Taprom", "Brush Script MT", cursive;
  --font-display: "Goldnic", "Six Caps", "Bebas Neue", sans-serif;
  --font-label: "Riley", "Lexend Exa", "Sora", sans-serif;
  --font-footer: "Sora", "Manrope", sans-serif;

  --zoom: 1;
}

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

html { background: var(--black); overflow-x: hidden; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.text-shadow { text-shadow: var(--shadow-text); }

.script {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
}

a:focus-visible,
button:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.7); outline-offset: 4px; border-radius: 4px; }

/* ==========================================================================
   Mobile / tablette (< 1024px) : flux vertical
   ========================================================================== */

.page {
  position: relative;
  padding: 0 20px;
  background:
    radial-gradient(120% 60% at 50% 38%, rgba(70, 42, 20, 0.35), transparent 70%),
    var(--black);
}

.decor { display: none; }

.nav { padding: 32px 0 24px; }
.nav__logo img { width: 75px; height: 22px; }

/* Hero */
.hero { padding: 24px 0 56px; }
.hero__title {
  font-size: clamp(40px, 9vw, 64px);
  font-weight: 200;
  line-height: 1.08;
}
.hero__title .script { font-size: 1.33em; line-height: 0.8; }
.hero__underline { display: none; }
.hero__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 24px;
}
.hero__tags li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--grey-tag);
  font-size: 12.52px;
  line-height: 21.728px;
}
.hero__cookie { width: min(100%, 520px); height: auto; margin: 40px 0 0 auto; }

/* Viennoiserie : la composition garde ses cotes et est réduite */
.vien { padding: 24px 0 64px; text-align: center; }
.vien__figure {
  position: relative;
  width: 572px;
  height: 830px;
  margin: 0 auto;
  zoom: 0.58;
}
.vien__card {
  position: absolute;
  left: 0;
  top: 252.4px;
  width: 570.501px;
  height: 576.477px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vien__card img { flex: none; transform: rotate(-2.69deg); }
.vien__masked {
  position: absolute;
  left: 27px;
  top: 0;
  width: 546px;
  height: 819px;
  /* Forme du masque Figma (masque-viennoiserie.svg, 569.219 × 548.363 placé en -27px 267.514px).
     Le SVG exporté n'a qu'un remplissage à 6 % d'opacité : on reprend sa géométrie en clip-path. */
  clip-path: path("M-27 267.51H197.7C387.97 267.51 542.22 414.42 542.22 595.63V788.04C542.22 803.41 529.13 815.88 512.99 815.88H269.49C105.75 815.88 -27 689.45 -27 533.5Z");
}
.vien__masked img { width: 100%; height: 100%; object-fit: cover; }
.vien__top {
  position: absolute;
  left: 27px;
  top: 0;
  width: 545px;
  height: 610px;
  overflow: hidden;
  filter: drop-shadow(0 4px 103.9px rgba(205, 171, 142, 0.08));
}
.vien__top img {
  position: absolute;
  top: 0;
  left: -0.02%;
  width: 100.04%;
  max-width: none;
  height: 134.21%;
}
.vien__dots {
  position: absolute;
  left: 315px;
  top: 772px;
  width: 40px;
  height: 15px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.19);
  backdrop-filter: blur(1.1px);
  -webkit-backdrop-filter: blur(1.1px);
}
.vien__dot {
  position: absolute;
  top: 3px;
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 4.5px;
  background: rgba(255, 255, 255, 0.66);
  backdrop-filter: blur(42.85px);
  -webkit-backdrop-filter: blur(42.85px);
  cursor: pointer;
  transition: left 0.3s ease, width 0.3s ease;
}
.vien__dot:nth-child(1) { left: 5px; }
.vien__dot:nth-child(2) { left: 25px; }
.vien__dot.is-active { width: 17px; border-radius: 4px; }
.vien__dot:nth-child(2).is-active { left: 17px; }
.vien__dots:has(.vien__dot:nth-child(2).is-active) .vien__dot:nth-child(1) { left: 5px; }

.vien__title {
  margin-top: 32px;
  font-size: clamp(30px, 7vw, 48px);
  font-weight: 200;
  line-height: 1.3;
}
.vien__title .script { font-size: 1.33em; }
.vien__underline,
.vien__accent { display: none; }
.vien__text {
  max-width: 624px;
  margin: 24px auto 0;
  color: var(--grey-text);
  font-size: 18px;
  font-weight: 200;
  line-height: 1.25;
}

/* L'illusion gourmande */
.illusion { padding: 48px 0 64px; text-align: center; }
.illusion__title { font-size: clamp(32px, 8vw, 48px); font-weight: 200; line-height: 1.3; }
.illusion__sub { margin-top: 8px; font-size: 16px; font-weight: 200; }
.illusion__glow { display: none; }
.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 49px;
  margin-top: 40px;
}
.card {
  position: relative;
  flex: none;
  width: 352px;
  height: 529px;
  zoom: 0.92;
  transition: transform 0.4s ease;
}
.card__bg { position: absolute; left: 15px; top: 78px; }
.card__img {
  position: absolute;
  left: 0;
  top: 0;
  width: 352px;
  height: 347px;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.card:hover .card__img { transform: translateY(-10px) rotate(-2deg); }
.card__title {
  position: absolute;
  left: 0;
  top: 322px;
  width: 323px;
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 400;
  line-height: 75px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}
.card__text {
  position: absolute;
  left: 43px;
  top: 438px;
  width: 237px;
  transform: translateY(-50%);
  font-size: 18px;
  font-weight: 300;
  line-height: 18px;
  text-align: center;
}

/* Qui sommes-nous */
.about { display: grid; gap: 24px; padding: 48px 0 64px; }
.about__title { font-size: clamp(32px, 8vw, 48px); font-weight: 200; line-height: 1.3; }
.about__text { font-size: 19px; font-weight: 300; line-height: normal; }
.about__social { display: flex; gap: 36px; align-items: center; }
.about__social a { display: block; transition: opacity 0.2s ease, transform 0.2s ease; }
.about__social a:hover { opacity: 0.75; transform: translateY(-2px); }
.map {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 597 / 417;
  min-height: 300px;
  border-radius: 12px;
  overflow: hidden;
}
.map::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 4px 40.2px rgba(0, 0, 0, 0.54);
  pointer-events: none;
}
.map__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.map:hover .map__img { transform: scale(1.03); }
.map__fade {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 198px;
  background: linear-gradient(170.07deg, rgba(0, 0, 0, 0.87) 1.58%, rgba(0, 0, 0, 0) 66.56%);
}
.map__name,
.map__rating,
.map__cta {
  position: absolute;
  font-family: var(--font-label);
  font-weight: 500;
  letter-spacing: 0.1px;
  line-height: 16px;
  white-space: nowrap;
}
.map__name { left: 30px; top: 29px; font-size: 16px; }
.map__rating { left: 30.4px; top: 48px; display: flex; align-items: center; gap: 9.4px; font-size: 11px; white-space: pre; }
.map__rating img { margin-top: 1px; }
.map__cta { left: 26px; bottom: 26px; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.about__photo { width: 100%; height: auto; aspect-ratio: 605 / 643; object-fit: cover; }
.about__photo--2 { aspect-ratio: 605 / 334; }

/* Tout nos pains */
.breads { padding: 48px 0 40px; text-align: center; }
.breads__title img { width: min(100%, 485px); height: auto; margin: 0 auto; }
.breads__text { margin-top: 12px; color: var(--grey-text); font-size: 17px; font-weight: 200; line-height: 1.3; }
.breads__text p + p { margin-top: 8px; }
.bread {
  position: relative;
  width: 694.071px;
  height: 361.101px;
  margin: 0 auto;
  zoom: 0.48;
  touch-action: pan-y;
  cursor: grab;
}
.bread.is-dragging { cursor: grabbing; }
.bread__inner {
  position: absolute;
  left: 175.16px;
  top: -162.22px;
  width: 343.756px;
  height: 685.54px;
  overflow: hidden;
  transform: translateX(var(--drag, 0px)) rotate(calc(91.46deg + var(--tilt, 0deg)));
  box-shadow: 0 4px 87px rgba(0, 0, 0, 0.9);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bread.is-dragging .bread__inner { transition: none; }
.bread__inner img {
  position: absolute;
  top: 0;
  left: -56.18%;
  width: 199.43%;
  max-width: none;
  height: 100%;
  user-select: none;
  pointer-events: none;
}
.swipe { display: grid; justify-items: center; gap: 12px; margin-top: 16px; }
.swipe span { font-size: 22px; font-weight: 500; line-height: 21.728px; }

/* Footer */
.footer {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 48px 0 40px;
  font-family: var(--font-footer);
  text-align: center;
}
.footer__copy { order: 3; font-size: 14px; line-height: 24px; }
.footer__logo { order: 0; }
.footer__mail { order: 1; font-size: 13px; line-height: 24px; opacity: 0.47; }
.footer__social { order: 2; position: relative; }
.footer__social-links a { position: absolute; top: 0; width: 27px; height: 23px; }
.footer__social-links a:nth-child(1) { left: 0; }
.footer__social-links a:nth-child(2) { left: 62px; }
.footer__social-links a:nth-child(3) { left: 122px; }
.footer__social-links a:nth-child(4) { left: 181px; }
.footer__social-links a:nth-child(5) { left: 240px; }
/* Logo Vindex Studio (maquette VINDEX, déclinaison sombre 701.1 × 243.9, réduite à 140px) */
.vindex { order: 5; width: 140.22px; height: 48.78px; }
.vindex__logo {
  position: relative;
  width: 701.1px;
  height: 243.9px;
  zoom: 0.2;
}
.vindex__logo > * { position: absolute; }
.vindex__embleme { left: 0; top: 26.1px; max-width: none; }
.vindex__wordmark { left: 182.7px; top: 0; max-width: none; }
.vindex__studio {
  left: 182.7px;
  top: 203.4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 30.6px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 12.24px;
  white-space: nowrap;
}
.vindex__filet { left: 369px; top: 221.85px; width: 30.6px; height: 3.6px; background: #ef001a; }

.footer__legal { order: 4; display: flex; gap: 20px; font-size: 12px; line-height: 24px; }
.footer__legal a,
.footer__mail { opacity: 0.47; transition: opacity 0.2s ease; }
.footer__legal a:hover,
.footer__mail:hover { opacity: 1; }

@media (min-width: 640px) {
  .vien__figure { zoom: 0.85; }
  .bread { zoom: 0.8; }
}

/* Positions du motif dessiné (coordonnées maquette, calculées depuis Figma) */
.doodles img:nth-child(1) { left: 543.5px; top: 4270.8px; width: 342.1px; height: 279.9px; }
.doodles img:nth-child(2) { left: 1166.5px; top: 3684.4px; width: 342.1px; height: 279.9px; }
.doodles img:nth-child(3) { left: -194.4px; top: 3862.7px; width: 260.8px; height: 284.3px; }
.doodles img:nth-child(4) { left: 201.6px; top: 4258.9px; width: 307.1px; height: 345.1px; }
.doodles img:nth-child(5) { left: 1308.4px; top: 4374.7px; width: 314.3px; height: 361.5px; }
.doodles img:nth-child(6) { left: 931.6px; top: 4227.4px; width: 431.5px; height: 351.5px; }
.doodles img:nth-child(7) { left: -160.3px; top: 4219.4px; width: 332.5px; height: 448.3px; }
.doodles img:nth-child(8) { left: 927.8px; top: 3518.9px; width: 314.4px; height: 322.1px; }
.doodles img:nth-child(9) { left: 207.3px; top: 3374.9px; width: 315.5px; height: 304.8px; }
.doodles img:nth-child(10) { left: 140.6px; top: 4003.5px; width: 288.9px; height: 258.3px; }
.doodles img:nth-child(11) { left: 1280.7px; top: 4100.9px; width: 296.4px; height: 261.4px; }
.doodles img:nth-child(12) { left: 673.3px; top: 3366.0px; width: 296.4px; height: 261.4px; }
.doodles img:nth-child(13) { left: 546.2px; top: 3566.1px; width: 351.3px; height: 304.0px; }
.doodles img:nth-child(14) { left: 953.5px; top: 3901.2px; width: 315.6px; height: 292.9px; }
.doodles img:nth-child(15) { left: 309.9px; top: 3724.8px; width: 315.6px; height: 292.9px; }
.doodles img:nth-child(16) { left: -177.1px; top: 3530.1px; width: 314.9px; height: 320.9px; }
.doodles img:nth-child(17) { left: 894.7px; top: 3870.3px; width: 87.8px; height: 78.1px; }
.doodles img:nth-child(18) { left: 437.3px; top: 3945.7px; width: 66.6px; height: 69.0px; }
.doodles img:nth-child(19) { left: 466.3px; top: 4310.0px; width: 86.9px; height: 83.5px; }
.doodles img:nth-child(20) { left: 276.5px; top: 3911.3px; width: 86.9px; height: 83.5px; }
.doodles img:nth-child(21) { left: 545.3px; top: 4546.2px; width: 80.0px; height: 86.4px; }
.doodles img:nth-child(22) { left: 153.8px; top: 3928.9px; width: 80.0px; height: 86.4px; }
.doodles img:nth-child(23) { left: 266.1px; top: 3669.9px; width: 80.0px; height: 86.4px; }
.doodles img:nth-child(24) { left: 879.0px; top: 4250.1px; width: 128.2px; height: 125.0px; }
.doodles img:nth-child(25) { left: 1302.8px; top: 3972.4px; width: 128.2px; height: 125.0px; }
.doodles img:nth-child(26) { left: 147.6px; top: 3759.4px; width: 128.2px; height: 125.0px; }
.doodles img:nth-child(27) { left: 118.6px; top: 3560.4px; width: 132.3px; height: 125.4px; }
.doodles img:nth-child(28) { left: 518.6px; top: 3828.2px; width: 131.4px; height: 115.4px; }
.doodles img:nth-child(29) { left: 352.2px; top: 4182.4px; width: 77.4px; height: 66.5px; }
.doodles img:nth-child(30) { left: 1235.2px; top: 4503.8px; width: 77.9px; height: 62.9px; }
.doodles img:nth-child(31) { left: 1022.7px; top: 4223.9px; width: 77.4px; height: 66.5px; }
.doodles img:nth-child(32) { left: 547.6px; top: 3556.1px; width: 63.6px; height: 47.8px; }
.doodles img:nth-child(33) { left: 15.4px; top: 4173.5px; width: 81.8px; height: 55.7px; }

/* Déclinaison mobile / tablette : décor et détails adaptés au flux vertical */
@media (max-width: 1023px) {
  .page { overflow: hidden; }

  .decor { display: block; position: absolute; inset: 0; pointer-events: none; }
  .decor > * { display: none; }

  /* Scène du hero : les deux mains autour du cookie */
  .hero__stage { position: relative; height: 260px; margin: 40px -20px 0; }
  .hero__stage > * { position: absolute; max-width: none; }
  .hero__hand--left { left: 0; top: 0; width: 140px; height: auto; }
  .hero__stage .hero__cookie { right: 16px; top: 14px; width: 250px; height: auto; margin: 0; }
  /* Trait qui coupe le cookie : cookie-lines desktop réduit à l'échelle du cookie (250 / 682) */
  .hero__stage::before {
    content: "";
    position: absolute;
    right: 16px;
    top: -79.8px;
    width: 378.7px;
    height: 284.5px;
    background: url("assets/lignes-cookie.svg") no-repeat 53px 132.3px / 357.6px 89.6px;
    transform: scaleX(-1);
    pointer-events: none;
  }
  .hero__hand--right { right: -34px; top: 128px; width: 200px; height: auto; transform: rotate(12.95deg); }

  /* Le haut de la composition viennoiserie est transparent : on la remonte */
  .hero { padding-bottom: 0; }
  .vien { padding-top: 0; }
  .vien__figure { margin-top: -170px; }

  /* Motif dessiné derrière les pains et le footer */
  .decor .doodles {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 1440px;
    height: 4999px;
    transform: translateX(-50%) scale(0.5);
    transform-origin: 50% 100%;
  }
  .doodles img { position: absolute; max-width: none; opacity: 0.13; transform: rotate(-3.41deg); }

  .nav, main, .footer { position: relative; }

  /* Soulignés manuscrits et accent de « sublimé » */
  .hero__title .script,
  .vien__title .script { position: relative; display: inline-block; }
  .hero__title .script::after {
    content: "";
    position: absolute;
    left: 0.06em;
    bottom: -0.1em;
    width: 1.48em;
    height: 0.135em;
    background: url("assets/souligne-unique.svg") no-repeat center / 100% 100%;
  }
  .vien__title .script::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.08em;
    width: 100%;
    height: 0.18em;
    background: url("assets/souligne-sublime.svg") no-repeat center / 100% 100%;
  }
  .vien__title .script::before {
    content: "";
    position: absolute;
    right: -0.12em;
    top: -0.02em;
    width: 0.54em;
    height: 0.59em;
    background: url("assets/accent-sublime.svg") no-repeat center / contain;
    transform: rotate(30.88deg);
  }


  /* Cartes mangue : carrousel horizontal à glisser */
  .cards {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 16px;
    margin: 32px -20px 0;
    padding: 0 20px 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 20px;
    scrollbar-width: none;
  }
  .cards::-webkit-scrollbar { display: none; }
  .card { zoom: 0.8; scroll-snap-align: start; }
  .illusion .cards-hint { display: block; }

  .about__social { justify-content: center; }
  .about__title { text-align: center; }
}

.cards-hint { display: none; margin-top: 16px; color: var(--grey-tag); font-size: 12.52px; text-align: center; }

/* ==========================================================================
   Desktop (>= 1024px) : canevas 1440 × 4999 de la maquette
   Toutes les coordonnées ci-dessous sont celles de la maquette Figma.
   ========================================================================== */

@media (min-width: 1024px) {
  .page {
    width: 1440px;
    height: 4999px;
    margin: 0 auto;
    padding: 0;
    background: var(--black);
    zoom: var(--zoom);
  }

  .page > *,
  main > section > *,
  .decor > * { position: absolute; }

  main,
  main > section { display: contents; }

  .vien__figure,
  .map,
  .bread,
  .footer__social { position: absolute; }

  /* ---------- Décor ---------- */
  .decor { display: contents; }

  .doodles { inset: 0; pointer-events: none; }
  .doodles img { position: absolute; max-width: none; opacity: 0.13; transform: rotate(-3.41deg); }

  .world {
    left: -329px;
    top: 2276px;
    width: 2097.607px;
    height: 1960.019px;
    display: flex;
    align-items: center;
    justify-content: center;
    mix-blend-mode: difference;
  }
  .world img {
    flex: none;
    width: 1688.514px;
    height: 1447.488px;
    max-width: none;
    opacity: 0.42;
    transform: rotate(158.81deg) scaleY(-1);
  }

  .hand--left { left: 0; top: 152px; width: 304px; height: 311px; }
  .hand--right { left: 1065px; top: 447.85px; width: 432px; height: 281px; max-width: none; transform: rotate(12.95deg); }

  .cookie-lines {
    left: 392px;
    top: -42px;
    width: 1033px;
    height: 776px;
    overflow: hidden;
    transform: scaleX(-1);
  }
  .cookie-lines img { position: absolute; left: 144.62px; top: 360.94px; max-width: none; }

  .circles-left { left: -157.47px; top: 725.4px; max-width: none; }
  .circles-mango { left: 113px; top: 1418.2px; max-width: none; }

  .glow {
    left: -799px;
    top: -319px;
    width: 2840px;
    height: 3728px;
    mix-blend-mode: plus-lighter;
    pointer-events: none;
  }
  .glow__box {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 120px;
    opacity: 0.28;
    filter: drop-shadow(0 32px 28px rgba(113, 113, 113, 0.25));
    transform: scaleY(-1);
  }
  .glow__element {
    position: absolute;
    left: -435.3px;
    top: 2612.4px;
    width: 3051.09px;
    height: 1884.47px;
    transform: rotate(-131.54deg) scaleX(-1) skewX(6.36deg);
  }
  .glow__element img { position: absolute; left: -500.07px; top: -499.95px; max-width: none; }
  .glow__noise {
    position: absolute;
    inset: 0;
    opacity: 0.08;
    background: url("assets/noise.webp") top left / 434.589px 434.589px;
  }

  /* ---------- Contenu ---------- */
  .nav { left: 155px; top: 74px; padding: 0; }
  .nav__logo { display: block; }

  /* Hero */
  .hero__title {
    left: 180px;
    top: 264px;
    width: 731.872px;
    height: 324px;
    display: flex;
    align-items: center;
    font-size: 72px;
    line-height: 75px;
  }
  .hero__title .script { font-size: 96px; line-height: 75px; }
  .hero__underline { display: block; left: 191.94px; top: 422px; max-width: none; }
  .hero__tags {
    left: 188px;
    top: 601px;
    width: 684px;
    margin: 0;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 302px;
  }
  .hero__stage { display: contents; }
  .hero__hand { display: none; }
  .hero__cookie { position: absolute; left: 743px; top: 214px; width: 682px; height: 454px; margin: 0; max-width: none; }

  /* Viennoiserie */
  .vien__figure { left: 83px; top: 566px; margin: 0; zoom: 1; }
  .vien__title {
    left: 693px;
    top: 832px;
    width: 731.872px;
    height: 324px;
    margin: 0;
    display: flex;
    align-items: center;
    font-size: 48px;
    line-height: 75px;
    text-align: left;
    white-space: nowrap;
  }
  .vien__title .script { font-size: 64px; }
  .vien__underline { display: block; left: 1166.99px; top: 1023.62px; max-width: none; }
  .vien__accent { display: block; left: 1326px; top: 974px; width: 18.798px; height: 19.934px; }
  .vien__accent img {
    position: absolute;
    left: -7.84px;
    top: -4.92px;
    max-width: none;
    transform-origin: 17.24px 14.89px;
    transform: rotate(30.88deg);
  }
  .vien__text {
    left: 707px;
    top: 1163.5px;
    width: 624px;
    margin: 0;
    transform: translateY(-50%);
    font-size: 22px;
    line-height: 21.728px;
  }

  /* L'illusion gourmande */
  .illusion__title { left: 500px; top: 1557.5px; transform: translateY(-50%); font-size: 48px; line-height: 75px; white-space: nowrap; }
  .illusion__sub { left: 540px; top: 1620.5px; width: 360px; margin: 0; transform: translateY(-50%); line-height: normal; text-align: left; white-space: nowrap; }
  .illusion__glow {
    display: block;
    left: 158px;
    top: 1685px;
    width: 1153px;
    height: 529px;
    max-width: none;
    object-fit: cover;
    opacity: 0.43;
    filter: blur(257.75px);
  }
  .cards { left: 158px; top: 1685px; width: 1154px; margin: 0; flex-wrap: nowrap; justify-content: flex-start; gap: 49px; }
  .card { zoom: 1; }

  /* Qui sommes-nous */
  .about__title { left: 141px; top: 2529px; width: 466px; transform: translateY(-50%); font-size: 48px; line-height: 75px; }
  .about__text { left: 134px; top: 2618px; width: 506px; font-size: 24px; }
  .about__social { display: contents; }
  .about__social li { position: absolute; }
  .about__social .s-youtube { left: 241.06px; top: 2939.9px; }
  .about__social .s-facebook { left: 304.99px; top: 2938.9px; }
  .about__social .s-instagram { left: 364.03px; top: 2938.9px; }
  .about__social .s-tiktok { left: 423.07px; top: 2938.9px; }
  .about__social .s-twitter { left: 482.98px; top: 2939.9px; }
  .map { left: 113px; top: 3056px; width: 597px; height: 417px; min-height: 0; }
  .map__fade { width: 597px; }
  .about__photo--1 { left: 732px; top: 2468px; width: 605px; height: 643px; }
  .about__photo--2 { left: 732px; top: 3133px; width: 605px; height: 334px; }

  /* Tout nos pains */
  .breads__title { left: 477px; top: 3761px; }
  .breads__title img { width: 485px; height: 134px; }
  .breads__text {
    left: 364px;
    top: 3941.5px;
    width: 736px;
    margin: 0;
    transform: translateY(-50%);
    font-size: 22px;
    line-height: 21.728px;
    white-space: pre-line;
  }
  .breads__text p + p { margin-top: 0; }
  .bread { left: 363.99px; top: 3965px; margin: 0; zoom: 1; }
  .swipe { display: contents; }
  .swipe img { position: absolute; left: 720px; top: 4353px; }
  .swipe span { position: absolute; left: 735.5px; top: 4417.5px; transform: translate(-50%, -50%); }

  /* Footer */
  .footer { display: contents; }
  .footer > * { position: absolute; }
  .footer__copy { left: 70px; top: 4870px; font-size: 16px; white-space: nowrap; }
  .footer .vindex { position: absolute; left: 70px; top: 4904px; }
  .footer__logo { left: 699px; top: 4871px; }
  .footer__mail { left: 631px; top: 4907px; white-space: nowrap; }
  .footer__social { left: 1117.2px; top: 4871.1px; }
  .footer__legal { left: 1113px; top: 4914px; width: 270px; height: 24px; }
  .footer__legal a { position: absolute; top: 0; white-space: nowrap; }
  .footer__legal a:nth-child(1) { left: 0; }
  .footer__legal a:nth-child(2) { left: 111px; }
  .footer__legal a:nth-child(3) { left: 224px; }
}

/* Apparition au défilement */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; translate: 0 24px; transition: opacity 0.9s ease, translate 0.9s ease; }
  .reveal.is-visible { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card__img, .bread__inner, .map__img { transition: none; }
}