/* Blocs 4–6 : coordonnées de la maquette 584 px, textes HTML et photos séparées.
   --r est le facteur de taille. L'animation commune reste dans bloc-3.css. */
.site { container-type: inline-size; }
.reference-faithful {
  --r: calc(100cqw / 584);
  min-height: 0;
  border: 0;
  overflow: visible;
  color: #24231e;
}
.reference-faithful .paper {
  background-color: #fcf6ec;
  background-image: url('assets/reference/papier.png');
  background-size: calc(31 * var(--r)) calc(31 * var(--r));
}
.ref-decoration { position: absolute; pointer-events: none; display: block; height: auto; }
.reference-faithful .main-photo > img { object-fit: fill; }
.reference-faithful .main-photo > .ref-decoration { inset: auto; height: auto; object-fit: contain; transform: none; }
.reference-faithful .desktop-only { display: initial; }

/* Le papier du bloc 4 empiète sur les deux photographies, comme dans la base. */
.together-native.reference-faithful {
  grid-template-columns: calc(193 * var(--r)) 1fr;
  height: calc(222 * var(--r));
  z-index: 3;
}
.together-native.reference-faithful > .cuisine-panel-left { width: calc(240 * var(--r)); }
.together-native.reference-faithful > .cuisine-panel > .together-surface {
  height: calc(239 * var(--r));
  width: 100%;
  padding: 0;
  margin: 0;
  display: block;
  transform: none;
  clip-path: polygon(0 0,80.83% 0,93.75% 25.94%,96.25% 47.28%,100% 92.89%,0 100%);
}
.together-native.reference-faithful .together-surface::after { content: none; }
.together-native.reference-faithful .together-corner { left: 0; top: 0; width: calc(34 * var(--r)); }
.together-native.reference-faithful .together-leaves { left: 0; top: calc(35 * var(--r)); width: calc(34 * var(--r)); }
.together-native.reference-faithful .together-highlight { left: calc(38 * var(--r)); top: calc(82 * var(--r)); width: calc(191 * var(--r)); }
.together-native.reference-faithful h2 {
  position: absolute;
  left: calc(24 * var(--r));
  top: calc(31 * var(--r));
  margin: 0;
  font-size: calc(42 * var(--r));
  line-height: 1.04;
  letter-spacing: -.06em;
  transform: rotate(-8deg) skewX(-3deg);
  transform-origin: left top;
  white-space: nowrap;
}
.together-native.reference-faithful h2 > span:nth-child(2) { margin-left: calc(8 * var(--r)); }
.together-native.reference-faithful h2 mark {
  margin-left: calc(14 * var(--r));
  padding: 0;
  font-size: calc(31 * var(--r));
  letter-spacing: -.04em;
  line-height: 1.15;
  display: block;
  background: transparent;
  transform: none;
}
.together-native.reference-faithful h2 mark::before,
.together-native.reference-faithful h2 mark::after { content: none; }
.together-native.reference-faithful .copy {
  position: absolute;
  left: calc(24 * var(--r));
  top: calc(168 * var(--r));
  margin: 0;
  font-size: calc(11.3 * var(--r));
  line-height: 1.21;
  letter-spacing: -.025em;
  width: calc(207 * var(--r));
}
.together-native.reference-faithful > .main-photo {
  clip-path: polygon(0 0,100% 0,100% 100%,12.02% 100%,9.72% 50.9%,8.19% 27.93%);
}

/* Nouvelle photographie de Catalina : cadrage du bloc conservé. */
.events-native.reference-faithful {
  grid-template-columns: calc(321 * var(--r)) 1fr;
  height: calc(224 * var(--r));
  z-index: 2;
}
.events-native.reference-faithful > .catalina {
  height: calc(284 * var(--r));
  background-image: none;
}
.events-native.reference-faithful .catalina > img:not(.ref-decoration) {
  width: calc(347.26 * var(--r));
  height: calc(463.175 * var(--r));
  left: 0;
  top: calc(-79 * var(--r));
  object-fit: fill;
}
.events-native.reference-faithful .catalina figcaption {
  left: calc(12 * var(--r));
  top: calc(151 * var(--r));
  bottom: auto;
  font-size: calc(29 * var(--r));
  line-height: 1.06;
  letter-spacing: -.055em;
  transform: rotate(-8deg) skewX(-3deg);
  transform-origin: left top;
  text-shadow: 0 1px 3px #0008;
}
.events-native.reference-faithful .welcome-heart { left: calc(70 * var(--r)); top: calc(205 * var(--r)); width: calc(28 * var(--r)); }
.events-native.reference-faithful .welcome-line { left: calc(98 * var(--r)); top: calc(189 * var(--r)); width: calc(42 * var(--r)); }
.events-native.reference-faithful > .cuisine-panel > .events-surface {
  height: calc(247 * var(--r));
  margin: 0;
  padding: 0;
  display: block;
  clip-path: polygon(0 0,100% 0,100% 90.69%,19.39% 100%,0 100%);
}
.events-native.reference-faithful .event-text { position: static; width: auto; }
.events-native.reference-faithful .eyebrow {
  position: absolute;
  top: calc(16 * var(--r));
  left: calc(14 * var(--r));
  font-size: calc(7.7 * var(--r));
  letter-spacing: .28em;
  margin: 0;
}
.events-native.reference-faithful h2 {
  position: absolute;
  top: calc(35 * var(--r));
  left: calc(14 * var(--r));
  font-size: calc(24 * var(--r));
  line-height: 1.03;
  letter-spacing: -.04em;
}
.events-native.reference-faithful h2 em { color: #efd06a; font-size: 1.17em; }
.events-native.reference-faithful h2 em::after { content: none; }
.events-native.reference-faithful .events-underline { top: calc(110 * var(--r)); left: calc(13 * var(--r)); width: calc(93 * var(--r)); }
.events-native.reference-faithful ul {
  position: absolute;
  top: calc(119 * var(--r));
  left: calc(14 * var(--r));
  padding: 0;
  margin: 0;
  font-size: calc(10.2 * var(--r));
  line-height: 1.55;
}
.events-native.reference-faithful li::before {
  width: calc(14 * var(--r));
  height: calc(14 * var(--r));
  margin-right: calc(7 * var(--r));
  font-size: calc(10 * var(--r));
  background: #f5d05a;
}
.events-native.reference-faithful .button {
  position: absolute;
  top: calc(193 * var(--r));
  left: calc(14 * var(--r));
  width: calc(169 * var(--r));
  height: calc(29 * var(--r));
  padding: 0;
  border-radius: calc(14 * var(--r));
  font-size: calc(10.2 * var(--r));
  gap: calc(8 * var(--r));
  background: #facb43;
  white-space: nowrap;
  max-width: none;
}
.events-native.reference-faithful .button svg { width: calc(13 * var(--r)); height: calc(13 * var(--r)); }
.events-native.reference-faithful .karaoke-note {
  left: calc(153 * var(--r));
  right: auto;
  top: calc(21 * var(--r));
  width: calc(105 * var(--r));
  padding: calc(5 * var(--r));
  transform: rotate(-6.5deg);
  transform-origin: left top;
  background: #fcf6ec;
}
.events-native.reference-faithful .karaoke-note img { width: 100%; height: auto; aspect-ratio: 94 / 107; object-fit: cover; object-position: center; }
.events-native.reference-faithful .karaoke-note figcaption {
  margin-top: calc(5 * var(--r));
  font-size: calc(18.5 * var(--r));
  line-height: 1.05;
  letter-spacing: -.025em;
  white-space: nowrap;
}
.events-native.reference-faithful .events-music { left: calc(187 * var(--r)); top: calc(162 * var(--r)); width: calc(72 * var(--r)); }

/* L'ardoise est une photographie. Le panneau central porte uniquement du HTML. */
.flavours-native.reference-faithful {
  grid-template-columns: calc(371 * var(--r)) 1fr;
  height: calc(288 * var(--r));
  z-index: 1;
  overflow: clip;
}
.flavours-native.reference-faithful .flavours-left { display: block; width: calc(404 * var(--r)); }
.flavours-native.reference-faithful .slate {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(232 * var(--r));
  height: 100%;
}
.flavours-native.reference-faithful .slate > img { object-fit: fill; }
.flavours-native.reference-faithful .flavours-surface {
  position: absolute;
  left: calc(221 * var(--r));
  top: 0;
  width: calc(183 * var(--r));
  height: 100%;
  padding: 0;
  margin: 0;
  transform: none;
  display: block;
  clip-path: polygon(0 0,81.967% 0,83.06% 7.99%,100% 100%,6.01% 100%,0 20.83%);
}
.flavours-native.reference-faithful h2 {
  position: absolute;
  left: calc(19 * var(--r));
  top: calc(78 * var(--r));
  margin: 0;
  font-size: calc(24.5 * var(--r));
  line-height: 1.1;
  letter-spacing: -.045em;
  white-space: nowrap;
}
.flavours-native.reference-faithful h2 > span { display: block; }
.flavours-native.reference-faithful h2 mark {
  display: block;
  padding: 0;
  margin: calc(1 * var(--r)) 0 calc(3 * var(--r));
  background: transparent;
  transform: skewX(-4deg);
  font-size: calc(29.5 * var(--r));
  letter-spacing: -.06em;
  line-height: 1.06;
}
.flavours-native.reference-faithful h2 > .native-script { font-size: calc(28 * var(--r)); letter-spacing: -.03em; line-height: 1.1; }
.flavours-native.reference-faithful .flavours-highlight { left: calc(10 * var(--r)); top: calc(104 * var(--r)); width: calc(133 * var(--r)); }
.flavours-native.reference-faithful .copy {
  position: absolute;
  left: calc(19 * var(--r));
  top: calc(179 * var(--r));
  width: calc(165 * var(--r));
  margin: 0;
  font-size: calc(10 * var(--r));
  line-height: 1.29;
  letter-spacing: -.035em;
  transform: scaleX(.94);
  transform-origin: left top;
}
.flavours-native.reference-faithful .flavours-swash { left: calc(19 * var(--r)); top: calc(235 * var(--r)); width: calc(94 * var(--r)); height: auto; margin: 0; }
.flavours-native.reference-faithful .flavours-heart { left: calc(119 * var(--r)); top: calc(232 * var(--r)); right: auto; bottom: auto; width: calc(26 * var(--r)); height: auto; }
.flavours-native.reference-faithful .flavours-leaves { left: calc(83 * var(--r)); top: calc(246 * var(--r)); width: calc(97 * var(--r)); }
.flavours-native.reference-faithful > .main-photo { clip-path: polygon(0 7.99%,100% 0,100% 100%,15.493% 100%); }
/* Retire du cadrage la bande sombre déjà imprimée en bas de la vignette.
   Les deux panneaux s'arrêtent à la même limite avant le pied de page. */
.flavours-native.reference-faithful > .main-photo > img { height: calc(100% * 288 / 283); }

@media (min-width: 701px) {
  .block-preview:has(.events-native) main { padding-bottom: calc(60 * 100cqw / 584); }
}

/* Sur téléphone, les mêmes éléments passent en colonnes sans réduire les textes. */
@media (max-width: 700px) {
  .native-block.reference-faithful { height: auto; grid-template-columns: 1fr; overflow: clip; }
  .reference-faithful .desktop-only { display: none; }
  .together-native.reference-faithful > .cuisine-panel-left { width: 100%; }
  .together-native.reference-faithful > .cuisine-panel > .together-surface { width: 100%; height: auto; min-height: 380px; padding: 35px 8% 32px; clip-path: none; }
  .together-native.reference-faithful h2 { position: relative; left: auto; top: auto; font-size: clamp(47px,13vw,73px); }
  .together-native.reference-faithful h2 > span:nth-child(2) { margin-left: 8px; }
  .together-native.reference-faithful h2 mark { font-size: .7em; margin-left: 14px; }
  .together-native.reference-faithful .together-highlight { left: 11%; top: 80px; width: 79%; transform: rotate(1deg); }
  .together-native.reference-faithful .together-leaves { top: 55px; width: 40px; }
  .together-native.reference-faithful .copy { position: relative; left: auto; top: auto; width: auto; font-size: 17px; line-height: 1.35; margin-top: 38px; }
  .together-native.reference-faithful > .main-photo { height: auto; aspect-ratio: 391 / 222; clip-path: polygon(0 0,100% 0,100% 100%,12.02% 100%,9.72% 50.9%,8.19% 27.93%); }
  .events-native.reference-faithful > .catalina { height: auto; aspect-ratio: 321 / 284; }
  .events-native.reference-faithful .catalina > img:not(.ref-decoration) { width: 108.18%; height: 163.09%; left: 0; top: -27.82%; }
  .events-native.reference-faithful .catalina figcaption { font-size: clamp(29px,9vw,51px); left: 3.74%; top: 53.17%; }
  .events-native.reference-faithful .welcome-heart { left: 21.81%; top: 72.18%; width: 8.72%; }
  .events-native.reference-faithful .welcome-line { left: 30.53%; top: 66.55%; width: 13.08%; }
  .events-native.reference-faithful > .cuisine-panel > .events-surface { height: auto; min-height: 395px; padding: 32px 7%; clip-path: none; }
  .events-native.reference-faithful .event-text { position: relative; width: 70%; }
  .events-native.reference-faithful .eyebrow { position: static; font-size: 12px; margin-bottom: 15px; }
  .events-native.reference-faithful h2 { position: static; font-size: clamp(32px,8.5vw,44px); }
  .events-native.reference-faithful ul { position: static; margin: 26px 0 22px; font-size: 15px; line-height: 1.65; }
  .events-native.reference-faithful li::before { width: 20px; height: 20px; margin-right: 8px; font-size: 14px; }
  .events-native.reference-faithful .button { position: relative; top: auto; left: auto; width: auto; height: 43px; padding: 0 13px; font-size: 14px; gap: 8px; border-radius: 22px; }
  .events-native.reference-faithful .button svg { width: 18px; height: 18px; }
  .events-native.reference-faithful .events-underline { left: 0; top: 111px; width: 135px; }
  .events-native.reference-faithful .karaoke-note { top: 53px; left: auto; right: 2%; width: 31%; padding: 6px; }
  .events-native.reference-faithful .karaoke-note figcaption { margin-top: 8px; font-size: clamp(20px,5.4vw,32px); }
  .events-native.reference-faithful .events-music { left: auto; right: 3%; top: 235px; width: 85px; }
  .flavours-native.reference-faithful .flavours-left { width: 100%; min-height: 0; display: flex; flex-direction: column; }
  .flavours-native.reference-faithful .slate { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 232 / 288; }
  .flavours-native.reference-faithful .slate > img { object-fit: fill; }
  .flavours-native.reference-faithful .flavours-surface { position: relative; left: auto; top: auto; width: 100%; height: auto; min-height: 340px; padding: 33px 8% 95px; clip-path: none; }
  .flavours-native.reference-faithful h2 { position: relative; left: auto; top: auto; font-size: clamp(34px,9vw,49px); }
  .flavours-native.reference-faithful h2 mark { font-size: 1.16em; }
  .flavours-native.reference-faithful h2 > .native-script { font-size: 1.02em; }
  .flavours-native.reference-faithful .flavours-highlight { left: 7%; top: 68px; width: 48%; }
  .flavours-native.reference-faithful .copy { position: relative; left: auto; top: auto; width: auto; margin-top: 24px; font-size: 17px; line-height: 1.35; transform: none; }
  .flavours-native.reference-faithful .flavours-swash { top: auto; bottom: 32px; left: 12%; width: 40%; }
  .flavours-native.reference-faithful .flavours-heart { top: auto; bottom: 52px; left: auto; right: 9%; width: 25px; }
  .flavours-native.reference-faithful .flavours-leaves { top: auto; bottom: 0; left: auto; right: 0; width: 32%; }
  .flavours-native.reference-faithful > .main-photo { height: auto; aspect-ratio: 213 / 288; clip-path: polygon(0 7.99%,100% 0,100% 100%,15.493% 100%); }
}