/*
 * Gabarit d'aperçu — maquette HTML/CSS fidèle à la structure du moteur :
 * en-tête (dédicace, titre, métadonnées en pictos), deux colonnes 40/60
 * (ingrédients illustrés à gauche, étapes numérotées à droite), pied
 * (secret, extrait manuscrit, dressage). Tout est dimensionné en cqw :
 * l'affiche reste juste à n'importe quelle largeur d'écran.
 */

.poster {
  container-type: inline-size;
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--p-bg);
  color: var(--p-ink);
  font-family: var(--p-corps);
  line-height: 1.5;
  box-shadow: 0 2px 6px rgba(43, 33, 25, 0.12), 0 16px 40px rgba(43, 33, 25, 0.18);
}

.poster-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 5.5cqw;
  gap: 3cqw;
}

/* ── En-tête ─────────────────────────────────────────────── */
.p-entete {
  text-align: center;
  flex-shrink: 0;
}
.p-dedicace {
  font-size: 2.7cqw;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 1.6cqw;
}
.p-titre {
  font-family: var(--p-titre);
  font-size: 8cqw;
  font-weight: 700;
  line-height: 1.08;
  margin: 0 auto;
  max-width: 92%;
  overflow-wrap: break-word;
}
.p-meta {
  margin-top: 2.6cqw;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.2cqw 4cqw;
  font-size: 2.5cqw;
  font-weight: 600;
}
.p-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 1.1cqw;
}
.p-meta-item svg {
  width: 2.8cqw;
  height: 2.8cqw;
  flex-shrink: 0;
}

/* ── Colonnes 40 / 60 ────────────────────────────────────── */
.p-colonnes {
  display: grid;
  grid-template-columns: 40fr 60fr;
  gap: 4.5cqw;
  flex: 1;
  min-height: 0;
  align-items: start;
  text-align: left;
}
.p-rubrique {
  font-family: var(--p-titre);
  font-size: 3.3cqw;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 2.2cqw;
  padding-bottom: 1.1cqw;
  border-bottom: 0.3cqw solid var(--p-accent);
}
.p-ingredients ul {
  display: flex;
  flex-direction: column;
  gap: 1.7cqw;
  font-size: 2.6cqw;
}
.p-ingredients li {
  display: flex;
  align-items: baseline;
  gap: 1.5cqw;
}
.p-marqueur {
  flex-shrink: 0;
  width: 2.4cqw;
  height: 2.4cqw;
  border-radius: 50%;
  background: var(--p-accent);
  align-self: center;
}
.p-ingredients li:nth-child(3n + 2) .p-marqueur {
  background: var(--p-accent2);
}
.p-ingredients li:nth-child(3n) .p-marqueur {
  background: var(--p-accent3);
}
.p-qte {
  font-weight: 700;
  white-space: nowrap;
}
.p-etapes ol {
  display: flex;
  flex-direction: column;
  gap: 2.1cqw;
  font-size: 2.6cqw;
}
.p-etapes li {
  display: flex;
  gap: 1.8cqw;
  align-items: flex-start;
}
.p-num {
  flex-shrink: 0;
  width: 3.8cqw;
  height: 3.8cqw;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--p-titre);
  font-weight: 700;
  font-size: 2.2cqw;
  color: var(--p-bg);
  background: var(--p-ink);
  margin-top: 0.2cqw;
}

/* ── Pied ────────────────────────────────────────────────── */
.p-pied {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1.6cqw;
  text-align: center;
}
.p-secret {
  font-size: 2.7cqw;
  font-style: italic;
}
.p-secret strong {
  font-style: normal;
}
.p-manuscrit {
  align-self: center;
  max-width: 46%;
  background: rgba(255, 253, 246, 0.92);
  padding: 1.4cqw 1.8cqw 2cqw;
  box-shadow: 0 0.5cqw 1.8cqw rgba(43, 33, 25, 0.25);
  transform: rotate(-1.6deg);
}
.p-manuscrit img {
  display: block;
  width: 100%;
  height: auto;
}
.p-manuscrit-legende {
  font-size: 1.8cqw;
  opacity: 0.7;
  margin-top: 0.9cqw;
}
.p-dressage {
  font-size: 2.4cqw;
  opacity: 0.85;
}

/* ── Filigrane APERÇU ────────────────────────────────────── */
/* ── Protection de l'aperçu ─────────────────────────────────────────────
 *
 * 12/08/2026. L'aperçu montre l'affiche entière avant paiement : c'est la
 * mécanique de vente, et c'est aussi le fichier lui-même s'il n'est pas
 * protégé. Trois couches de filigrane aux inclinaisons opposées, denses,
 * en fusion « multiply » pour qu'elles mordent sur les aplats clairs comme
 * sur les fonds peints.
 *
 * Honnêteté technique : aucune de ces protections n'est infranchissable.
 * Le navigateur exécute le DOM chez le client, donc qui ouvre l'inspecteur
 * peut retirer les couches. Et AUCUNE page web ne peut empêcher une capture
 * d'écran : ni Windows, ni macOS, ni iOS, ni Android n'exposent ce contrôle
 * au web. La seule protection réelle est la définition : ce qui est à
 * l'écran fait autour de 600 px de large, un tirage 30 x 40 en demande
 * 3500. Une capture donne une image inutilisable en impression.
 */
.p-filigrane {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  z-index: 40;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='150'%3E%3Ctext x='130' y='84' font-family='Arial, sans-serif' font-size='27' font-weight='700' letter-spacing='7' fill='rgba(43,33,25,0.30)' text-anchor='middle' transform='rotate(-24 130 80)'%3EAPER%C3%87U%3C/text%3E%3C/svg%3E");
  background-size: 30cqw auto;
}

.p-filigrane.f2 {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='170'%3E%3Ctext x='150' y='92' font-family='Arial, sans-serif' font-size='19' font-weight='700' letter-spacing='5' fill='rgba(43,33,25,0.22)' text-anchor='middle' transform='rotate(26 150 88)'%3Eaffichetarecette.fr%3C/text%3E%3C/svg%3E");
  background-size: 34cqw auto;
  background-position: 12% 40%;
}

.p-filigrane.f3 {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Ccircle cx='90' cy='90' r='2.4' fill='rgba(43,33,25,0.20)'/%3E%3C/svg%3E");
  background-size: 7cqw auto;
  mix-blend-mode: multiply;
}

/* La mention du site en pied d'affiche, retirée pour un euro de plus. */
.p-mention {
  position: absolute;
  right: 3.2cqw;
  bottom: 2.4cqw;
  z-index: 30;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2.1cqw;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--p-ink, #33221d);
  opacity: 0.46;
}

/* Ni glisser-déposer, ni sélection, ni menu contextuel sur l'aperçu : ça
   n'arrête personne de déterminé, ça arrête le geste réflexe. */
.poster, .poster * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.poster img { pointer-events: none; }

/* L'impression de la page est un contournement gratuit du filigrane à
   l'écran : on la ferme. */
@media print {
  .poster { display: none !important; }
  body::after {
    content: "L'aperçu ne s'imprime pas. Les fichiers haute définition sont livrés après commande.";
    display: block; padding: 40px; font: 16px/1.5 Arial, sans-serif;
  }
}

/* ════ Univers 3 — Rétro ══════════════════════════════════ */
.poster[data-style="retro"] {
  --p-bg: #f4e7c8;
  --p-ink: #3b2a1c;
  --p-accent: #b5502a;
  --p-accent2: #c98a2c;
  --p-accent3: #7fa3a8;
  --p-titre: "Abril Fatface", Georgia, serif;
  --p-corps: "Archivo", system-ui, sans-serif;
  background-image: radial-gradient(
    ellipse 140% 55% at 50% -12%,
    rgba(233, 180, 76, 0.5),
    transparent 62%
  );
}
.poster[data-style="retro"] .poster-inner {
  border: 0.7cqw solid var(--p-ink);
  outline: 0.25cqw solid var(--p-ink);
  outline-offset: -2.2cqw;
  margin: 2.2cqw;
}
.poster[data-style="retro"] .p-titre {
  background: var(--p-accent);
  color: #f4e7c8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 6.6cqw;
  padding: 1.4cqw 3.4cqw 1.8cqw;
  display: inline-block;
  box-decoration-break: clone;
}
.poster[data-style="retro"] .p-dedicace {
  color: var(--p-accent);
  font-weight: 700;
}
.poster[data-style="retro"] .p-marqueur {
  border-radius: 0.5cqw;
  transform: rotate(45deg) scale(0.9);
}
.poster[data-style="retro"] .p-secret {
  background: rgba(255, 251, 238, 0.75);
  border: 0.2cqw solid rgba(59, 42, 28, 0.35);
  padding: 1.3cqw 2.4cqw;
  align-self: center;
  max-width: 88%;
  margin: 0 auto;
}

/* Les univers « Poétique japonais » et « Éditorial illustré » ont été retirés
   du catalogue le 11/08/2026 : leurs habillages sont supprimés d'ici, plus
   aucun StyleId ne peut les viser. */

/* ════ Univers 2 — Cahier de famille ══════════════════════ */
.poster[data-style="cahier"] {
  --p-bg: #f7f1e1;
  --p-ink: #2f4a6e;
  --p-accent: #b4453a;
  --p-accent2: #8a6a4f;
  --p-accent3: #2f4a6e;
  --p-titre: "Lora", Georgia, serif;
  --p-corps: "Lora", Georgia, serif;
  background-image:
    linear-gradient(to right, transparent 11.4cqw, rgba(180, 69, 58, 0.55) 11.4cqw, rgba(180, 69, 58, 0.55) 11.7cqw, transparent 11.7cqw),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 5.2cqw,
      rgba(122, 148, 182, 0.28) 5.2cqw,
      rgba(122, 148, 182, 0.28) 5.35cqw
    );
}
.poster[data-style="cahier"]::before,
.poster[data-style="cahier"]::after {
  content: "";
  position: absolute;
  top: -1.4cqw;
  width: 12cqw;
  height: 4.6cqw;
  background: rgba(228, 214, 180, 0.75);
  box-shadow: 0 0.3cqw 0.8cqw rgba(43, 33, 25, 0.12);
  z-index: 2;
}
.poster[data-style="cahier"]::before {
  left: 7cqw;
  transform: rotate(-5deg);
}
.poster[data-style="cahier"]::after {
  right: 7cqw;
  transform: rotate(4deg);
}
.poster[data-style="cahier"] .poster-inner {
  padding-left: 14cqw;
}
.poster[data-style="cahier"] .p-titre {
  font-style: italic;
  font-weight: 600;
}
.poster[data-style="cahier"] .p-dedicace {
  color: var(--p-accent);
}
.poster[data-style="cahier"] .p-rubrique {
  border-bottom-style: double;
  border-bottom-width: 0.7cqw;
  border-bottom-color: var(--p-accent);
  letter-spacing: 0.22em;
}
.poster[data-style="cahier"] .p-ingredients li .p-marqueur {
  width: 2cqw;
  height: 2cqw;
  border: 0.35cqw solid var(--p-accent2);
  background: transparent;
}
.poster[data-style="cahier"] .p-num {
  background: transparent;
  color: var(--p-accent);
  border: 0.3cqw solid var(--p-accent);
}
.poster[data-style="cahier"] .p-secret {
  font-family: "Caveat", cursive;
  font-size: 3.6cqw;
  font-style: normal;
}
.poster[data-style="cahier"] .p-manuscrit {
  transform: rotate(-2.2deg);
  outline: 0.25cqw dashed rgba(138, 106, 79, 0.5);
  outline-offset: 0.6cqw;
}
/* Tache de café discrète */
.poster[data-style="cahier"] .poster-inner::after {
  content: "";
  position: absolute;
  right: 6cqw;
  bottom: 7cqw;
  width: 9cqw;
  height: 9cqw;
  border-radius: 50%;
  border: 1.1cqw solid rgba(138, 106, 79, 0.16);
  filter: blur(0.35cqw);
  pointer-events: none;
}

/* ════ Univers 1 — Aquarelle ══════════════════════════════ */
.poster[data-style="aquarelle"] {
  --p-bg: #fbf4e6;
  --p-ink: #3e2c2a;
  --p-accent: #c86b4a;
  --p-accent2: #7c8b4e;
  --p-accent3: #6e8ca0;
  --p-olive-fonce: #5e6b39;
  --p-terracotta-texte: #a9502f;
  --p-abricot: #e4a94f;
  --p-creme: #fdf9f0;
  --p-titre: "Petrona", Georgia, serif;
  --p-corps: "Karla", system-ui, sans-serif;
  /* Deux lavis diffus : pigment déposé en haut à gauche, en bas à droite */
  background-image:
    radial-gradient(ellipse 46% 20% at 12% 4%, rgba(124, 139, 78, 0.34), transparent 70%),
    radial-gradient(ellipse 30% 14% at 40% 1%, rgba(228, 169, 79, 0.36), transparent 72%),
    radial-gradient(ellipse 44% 18% at 88% 97%, rgba(200, 107, 74, 0.28), transparent 70%),
    radial-gradient(ellipse 30% 13% at 58% 99%, rgba(110, 140, 160, 0.24), transparent 72%);
}
.poster[data-style="aquarelle"] .poster-inner {
  padding: 5.2cqw 5cqw 4.6cqw;
  gap: 2.2cqw;
}
.poster[data-style="aquarelle"] .p-dedicace {
  color: var(--p-olive-fonce);
  font-weight: 700;
  letter-spacing: 0.22em;
  opacity: 1;
}
.poster[data-style="aquarelle"] .p-titre {
  font-weight: 800;
  font-size: 8cqw;
  line-height: 1.05;
  letter-spacing: -0.012em;
}
/* Filet peint sous le titre : deux traits terre cuite, un point abricot */
.poster[data-style="aquarelle"] .p-titre::after {
  content: "";
  display: block;
  width: 30cqw;
  height: 2cqw;
  margin: 1.8cqw auto 0;
  background-image:
    radial-gradient(circle at 50% 50%, var(--p-abricot) 0 0.85cqw, transparent 0.9cqw),
    linear-gradient(to right, rgba(200, 107, 74, 0.55), rgba(200, 107, 74, 0.55)),
    linear-gradient(to right, rgba(200, 107, 74, 0.55), rgba(200, 107, 74, 0.55));
  background-repeat: no-repeat;
  background-size: 100% 100%, 10cqw 0.42cqw, 10cqw 0.42cqw;
  background-position: center, left center, right center;
}
.poster[data-style="aquarelle"] .p-meta {
  margin-top: 1.6cqw;
  color: #61483f;
}
/* Colonne d'ingrédients : lavis olive très pâle, coins irréguliers */
.poster[data-style="aquarelle"] .p-ingredients {
  position: relative;
  padding: 3.4cqw 3.2cqw;
}
.poster[data-style="aquarelle"] .p-ingredients::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(124, 139, 78, 0.14);
  border-radius: 4cqw 7cqw 3cqw 6cqw;
}
.poster[data-style="aquarelle"] .p-ingredients > * {
  position: relative;
}
.poster[data-style="aquarelle"] .p-rubrique {
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--p-olive-fonce);
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
  text-align: center;
}
.poster[data-style="aquarelle"] .p-etapes .p-rubrique {
  color: var(--p-terracotta-texte);
  text-align: left;
}
.poster[data-style="aquarelle"] .p-rubrique::after {
  content: "";
  display: block;
  width: 11cqw;
  height: 0.55cqw;
  border-radius: 1cqw;
  background: var(--p-abricot);
  margin: 1.4cqw auto 1.7cqw;
  opacity: 0.85;
}
.poster[data-style="aquarelle"] .p-etapes .p-rubrique::after {
  margin-left: 0;
}
/* Ingrédients : filets olive entre les lignes, pas de puces */
.poster[data-style="aquarelle"] .p-marqueur {
  display: none;
}
.poster[data-style="aquarelle"] .p-ingredients ul {
  gap: 0;
}
.poster[data-style="aquarelle"] .p-ingredients li {
  padding: 1.1cqw 0;
}
.poster[data-style="aquarelle"] .p-ingredients li + li {
  border-top: 0.28cqw solid rgba(94, 107, 57, 0.2);
}
.poster[data-style="aquarelle"] .p-qte {
  font-family: var(--p-titre);
  font-style: italic;
  color: var(--p-olive-fonce);
}
/* Pastilles d'étape : contours organiques, trois pigments en alternance */
.poster[data-style="aquarelle"] .p-num {
  background: var(--p-accent);
  color: var(--p-creme);
  border-radius: 52% 48% 46% 54% / 48% 52% 48% 52%;
  width: 4.2cqw;
  height: 4.2cqw;
}
.poster[data-style="aquarelle"] .p-etapes li:nth-child(3n + 2) .p-num {
  background: var(--p-accent2);
  border-radius: 48% 52% 54% 46% / 52% 46% 54% 48%;
}
.poster[data-style="aquarelle"] .p-etapes li:nth-child(3n) .p-num {
  background: var(--p-accent3);
  border-radius: 54% 46% 50% 50% / 46% 54% 46% 54%;
}
/* Pied : le secret dans un lavis abricot aux coins irréguliers */
.poster[data-style="aquarelle"] .p-secret {
  position: relative;
  align-self: center;
  max-width: 94%;
  padding: 1.9cqw 3cqw;
  font-style: normal;
  text-align: left;
}
.poster[data-style="aquarelle"] .p-secret::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(228, 169, 79, 0.2);
  border-radius: 5cqw 2.6cqw 6cqw 3.4cqw;
}
.poster[data-style="aquarelle"] .p-secret > * {
  position: relative;
}
.poster[data-style="aquarelle"] .p-secret strong {
  font-family: var(--p-titre);
  font-weight: 700;
  color: var(--p-terracotta-texte);
}
.poster[data-style="aquarelle"] .p-dressage {
  font-style: italic;
  color: #61483f;
}
.poster[data-style="aquarelle"] .p-manuscrit {
  transform: rotate(-1.1deg);
  border-radius: 1.4cqw;
  box-shadow: 0 0.5cqw 1.8cqw rgba(62, 44, 42, 0.18);
}

/* ════ Univers 4 — Chic parisien ══════════════════════════ */
/* Gravure au trait : noir K100 seul, aucun gris d'aplat, cadre à filet double,
   symétrie axiale, capitales espacées, chiffres romains d'étape. */
.poster[data-style="chic"] {
  --p-bg: #f6f6f4;
  --p-ink: #111111;
  --p-accent: #111111;
  --p-accent2: #767b7e;
  --p-accent3: #c9cbca;
  --p-gris: #767b7e;
  --p-titre: "Bodoni Moda", Georgia, serif;
  --p-corps: "Archivo", system-ui, sans-serif;
}
/* le filet double du cadre de page : un fin dehors, un gras dedans */
.poster[data-style="chic"]::before {
  content: "";
  position: absolute;
  inset: 3.2cqw;
  border: 0.18cqw solid var(--p-ink);
  pointer-events: none;
}
.poster[data-style="chic"]::after {
  content: "";
  position: absolute;
  inset: 3.9cqw;
  border: 0.45cqw solid var(--p-ink);
  pointer-events: none;
}
.poster[data-style="chic"] .poster-inner {
  padding: 7.4cqw 7.6cqw 6.4cqw;
  gap: 2.6cqw;
}
.poster[data-style="chic"] .p-dedicace {
  font-family: var(--p-titre);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 3.2cqw;
  opacity: 1;
  order: 2;
  margin: 1.4cqw 0 0;
}
.poster[data-style="chic"] .p-entete {
  display: flex;
  flex-direction: column;
}
.poster[data-style="chic"] .p-titre {
  order: 1;
  font-weight: 500;
  font-size: 7.6cqw;
  line-height: 1.12;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}
.poster[data-style="chic"] .p-meta {
  order: 3;
  margin-top: 2.6cqw;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 2.2cqw;
  font-weight: 500;
  gap: 1cqw 3cqw;
}
.poster[data-style="chic"] .p-meta-item svg {
  display: none;
}
.poster[data-style="chic"] .p-meta::after {
  content: "";
  display: block;
  width: 18cqw;
  height: 0.14cqw;
  background: var(--p-accent3);
  margin: 2.4cqw auto 0;
}
.poster[data-style="chic"] .p-rubrique {
  text-align: center;
  letter-spacing: 0.3em;
  font-family: var(--p-corps);
  font-weight: 500;
  font-size: 2.5cqw;
  border-bottom: none;
  padding-bottom: 0;
}
.poster[data-style="chic"] .p-ingredients li .p-marqueur,
.poster[data-style="chic"] .p-ingredients li:nth-child(3n) .p-marqueur,
.poster[data-style="chic"] .p-ingredients li:nth-child(3n + 2) .p-marqueur {
  width: 2.6cqw;
  height: 3.25cqw; /* l'ovale du cartouche : rapport 1,25 */
  border-radius: 50%;
  background: transparent;
  border: 0.16cqw solid var(--p-ink);
  box-shadow: inset 0 0 0 0.28cqw var(--p-bg), inset 0 0 0 0.45cqw var(--p-ink);
}
.poster[data-style="chic"] .p-qte {
  font-weight: 400;
  color: var(--p-gris);
}
.poster[data-style="chic"] .p-num {
  width: auto;
  height: auto;
  min-width: 3.4cqw;
  border-radius: 0;
  background: transparent;
  color: var(--p-ink);
  font-family: var(--p-titre);
  font-weight: 500;
  letter-spacing: 0.08em;
  justify-content: flex-start;
}
.poster[data-style="chic"] .p-secret {
  font-style: normal;
  text-align: center;
}
.poster[data-style="chic"] .p-secret strong {
  font-family: var(--p-corps);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  display: block;
  font-size: 2.2cqw;
  margin-bottom: 0.9cqw;
}
.poster[data-style="chic"] .p-dressage {
  color: var(--p-gris);
}

/* ════ Agencements ════════════════════════════════════════
 * Un agencement, c'est le rôle donné aux illustrations. La frise latérale est
 * l'état par défaut du gabarit, elle n'a rien à redéfinir. Les deux autres
 * réorganisent la page sans toucher au DOM : c'est ce qui garantit que les
 * trois agencements valent pour les quatre univers.
 */

/* ── Bandeau haut : la frise en tête, les étapes en deux colonnes ── */
.poster[data-agencement="bandeau"] .poster-inner {
  gap: 2.4cqw;
}
.poster[data-agencement="bandeau"] .p-colonnes {
  display: flex;
  flex-direction: column;
  gap: 3cqw;
}
.poster[data-agencement="bandeau"] .p-entete {
  order: 2;
}
.poster[data-agencement="bandeau"] .p-colonnes {
  order: 3;
}
.poster[data-agencement="bandeau"] .p-pied {
  order: 4;
}
.poster[data-agencement="bandeau"] .p-ingredients {
  order: -1;
  margin-top: -1cqw;
}
.poster[data-agencement="bandeau"] .p-ingredients ul {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.4cqw 4cqw;
}
.poster[data-agencement="bandeau"] .p-ingredients li {
  flex: 0 1 auto;
}
.poster[data-agencement="bandeau"] .p-ingredients .p-rubrique,
.poster[data-agencement="bandeau"] .p-etapes .p-rubrique {
  text-align: center;
}
.poster[data-agencement="bandeau"] .p-etapes ol {
  columns: 2;
  column-gap: 4.5cqw;
  display: block;
}
.poster[data-agencement="bandeau"] .p-etapes li {
  break-inside: avoid;
  margin-bottom: 2.1cqw;
}

/* ── Couronne : les ingrédients encerclent le bloc de titre ── */
.poster[data-agencement="couronne"] .poster-inner {
  gap: 2.2cqw;
  justify-content: center;
}
.poster[data-agencement="couronne"] .p-colonnes {
  display: flex;
  flex-direction: column;
  gap: 2.6cqw;
  flex: 0 0 auto;
}
.poster[data-agencement="couronne"] .p-entete {
  order: 2;
  padding: 0 12cqw;
}
.poster[data-agencement="couronne"] .p-ingredients {
  order: 1;
}
.poster[data-agencement="couronne"] .p-etapes {
  order: 3;
}
.poster[data-agencement="couronne"] .p-ingredients ul {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5cqw 4.4cqw;
}
.poster[data-agencement="couronne"] .p-ingredients li {
  flex: 0 1 auto;
}
.poster[data-agencement="couronne"] .p-ingredients .p-rubrique,
.poster[data-agencement="couronne"] .p-etapes .p-rubrique {
  text-align: center;
}
.poster[data-agencement="couronne"] .p-etapes ol {
  columns: 2;
  column-gap: 4.5cqw;
  display: block;
}
.poster[data-agencement="couronne"] .p-etapes li {
  break-inside: avoid;
  margin-bottom: 2cqw;
}
.poster[data-agencement="couronne"] .p-titre {
  font-size: 7cqw;
}

/* ── Slot d'illustration d'ingrédient ─────────────────────
 * La bibliothèque détourée du moteur, réduite pour le navigateur. Quand
 * l'ingrédient n'a pas d'illustration, le marqueur historique reprend sa place.
 */
.p-ill { flex-shrink: 0; width: 7.4cqw; height: 7.4cqw; object-fit: contain;
  display: block; align-self: center; mix-blend-mode: multiply; }
.poster[data-agencement="bandeau"] .p-ill,
.poster[data-agencement="couronne"] .p-ill { width: 9cqw; height: 9cqw; }
.poster[data-agencement="bandeau"] .p-ingredients li,
.poster[data-agencement="couronne"] .p-ingredients li {
  flex-direction: column; align-items: center; text-align: center; gap: 0.6cqw;
  width: 17%; }
.poster[data-agencement="bandeau"] .p-ingredients li .p-qte,
.poster[data-agencement="couronne"] .p-ingredients li .p-qte {
  display: block; }
.poster[data-style="chic"] .p-ill { mix-blend-mode: multiply; }

/* ── Ajustement automatique ───────────────────────────────
 * Le gabarit est dessiné pour un 30 x 40 lu de près. Dans une vignette, ou
 * quand la recette est longue, le contenu déborde de la cage. Le composeur
 * mesure et pose --k : la page est composée plus grande puis ramenée à
 * l'échelle, ce qui fait entrer le texte sans le tronquer.
 */
.poster-inner {
  inset: auto; top: 0; left: 0;
  width: calc(100% / var(--k, 1));
  height: calc(100% / var(--k, 1));
  transform: scale(var(--k, 1));
  transform-origin: top left;
}
/* la colonne des étapes doit pouvoir se mesurer : sans min-height auto, son
   débordement reste invisible au composeur. */
.p-colonnes, .p-etapes, .p-ingredients { overflow: hidden; }

/* Le texte de l'ingrédient doit tenir sa place à côté de l'illustration, et le
   fond des gravures chic, qui sont sur blanc, doit se fondre dans le papier. */
.poster-inner { background: var(--p-bg); }
.p-ingredients li { align-items: center; }
.p-ingredients li > span:last-child { flex: 1 1 auto; min-width: 0; }
.p-ill { flex: 0 0 auto; }

/* L'illustration se dimensionne sur le corps du texte, pas en unités de
   conteneur : c'est ce qui garantit qu'elle reste proportionnée à la ligne
   quelle que soit la taille de l'aperçu. */
.p-ill { width: 2.8em !important; height: 2.8em !important; }
.poster[data-agencement="bandeau"] .p-ill,
.poster[data-agencement="couronne"] .p-ill { width: 3.4em !important; height: 3.4em !important; }

/* Les intertitres sont composés en capitales espacées : dans une colonne
   étroite, ils dépassent. On leur rend l'air nécessaire plutôt que de les
   couper. */
.p-ingredients, .p-etapes { overflow: visible; }
.p-rubrique { letter-spacing: 0.1em; font-size: 3cqw; }
.p-colonnes { overflow: hidden; }

/* Le rappel de l'affiche sur la page de paiement : on ne paie pas ce qu'on ne
   voit pas. Classe nouvelle, elle ne redéfinit rien du site. */
.rappel { display: grid; grid-template-columns: 190px 1fr; gap: 26px;
  align-items: center; margin: 0 0 30px; }
@media (max-width: 620px) { .rappel { grid-template-columns: 1fr; gap: 18px; } }
.rappel .cadre { padding: 8px; }

/* ── Aperçu rendu par le serveur ────────────────────────────────────────── */
.apercu-serveur { position: relative; }
.apercu-serveur .apercu-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 18px 48px rgba(29, 47, 79, .16);
  /* Ni glisser, ni « enregistrer l'image sous » au premier réflexe. */
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
.apercu-attente { opacity: .72; transition: opacity .2s; }