/* ═══════════════════════════ La couverture de magazine ═══════════════════════════
 *
 * Servie **seulement** sur la fiche de la couverture (`views/product-affiche.liquid`) : six
 * maquettes d'affiche n'ont rien à faire dans le chemin critique des autres pages.
 *
 * ── La palette ──
 *
 * Des couleurs de **produit**, pas de charte (point 6 quater) : ivoire, noir, bordeaux profond,
 * blanc cassé et gris chaud, relevés sur la demande de Fred, plus le sable et la terre cuite de
 * l'été. Elles sont toutes ici, en tête, et nulle part ailleurs dans le fichier : un test y tient.
 *
 * ── La mise en page ──
 *
 * Tout est mesuré en `cqw` — la largeur de l'affiche —, pour qu'un A4 et un 70 × 100 soient la
 * même couverture à deux échelles. La photo est posée en absolu sous les textes : pleine page
 * pour quatre maquettes, dans une marge pour Mariage et Minimal, dont l'emprise est en
 * pourcentage de la hauteur pour suivre le format. Les textes s'empilent au-dessus (`flex`) et
 * **ne captent jamais le doigt** (`pointer-events: none`) : on cadre la photo en la faisant
 * glisser sous la couverture.
 *
 * **La lisibilité ne dépend pas de la photo** : chaque maquette pleine page pose deux voiles
 * (un dégradé sous le titre, un sous la une), et c'est eux, pas un contraste espéré, qui
 * rendent le texte lisible sur une photo claire.
 */
.magazine {
  --mg-ivoire: #f6f1e8; --mg-noir: #151515; --mg-bordeaux: #7a171a; --mg-blanc: #fbf9f5;
  --mg-gris: #817b71; --mg-sable: #f2d8b3; --mg-terre: #b5573a; --mg-vide: #e9e3d8; --mg-vide-sombre: #3b352e;
  --mg-ombre: 21, 21, 21; --mg-brun: 58, 30, 18; --mg-soleil: 242, 150, 70; --mg-filet: rgba(246, 241, 232, .4);
  --mg-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ── La base, commune aux six ── */
.magazine {
  --fond: var(--mg-noir); --texte: var(--mg-ivoire); --voile-haut: .42; --voile-bas: .72; --voile: var(--mg-ombre);
  font-family: "Inter", system-ui, sans-serif; line-height: 1.25; justify-content: flex-start;
  padding: 4.6cqw 6cqw 4.4cqw; text-align: center;
}
.magazine p { margin: 0; }
.magazine [hidden] { display: none !important; }

/* Le cadre vide est sombre sous les maquettes pleine page : leurs textes sont clairs, et un
   fond beige les rendait invisibles tant que la photo n'était pas déposée. Mariage et Minimal,
   aux textes foncés sur papier, gardent un cadre clair. */
.magazine__photo { position: absolute; inset: 0; margin: 0; overflow: hidden; background: var(--mg-vide-sombre); z-index: 0; }
.magazine__photo img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--photo-x, 50%) var(--photo-y, 40%);
  transform: scale(var(--photo-zoom, 1)); transform-origin: var(--photo-x, 50%) var(--photo-y, 40%);
}
.magazine__photo[data-photo] { touch-action: none; cursor: grab; }
/* **Sur un écran tactile, la page défile encore sur la photo.** Ici la photo couvre toute la
   couverture : bloquer le défilement vertical, c'était une page qui ne bouge plus sous le doigt,
   et un cadrage qui change en silence. Le glissement vertical fait défiler, le glissement
   horizontal recadre, et les curseurs du formulaire règlent le reste. */
@media (pointer: coarse) { .magazine__photo[data-photo] { touch-action: pan-y; } }
.magazine__grain { display: none; position: absolute; inset: 0; background-image: var(--mg-texture); background-size: 24cqw; opacity: .22; mix-blend-mode: multiply; pointer-events: none; }
.magazine__voile { position: absolute; left: 0; right: 0; pointer-events: none; }
.magazine__voile--haut { top: 0; height: 36%; background: linear-gradient(to bottom, rgba(var(--voile), var(--voile-haut)), rgba(var(--voile), 0)); }
.magazine__voile--bas { bottom: 0; height: 58%; background: linear-gradient(to top, rgba(var(--voile), var(--voile-bas)) 0%, rgba(var(--voile), calc(var(--voile-bas) * .55)) 45%, rgba(var(--voile), 0)); }
.magazine__vide {
  position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 1.4cqw;
  cursor: pointer; margin: 0; padding: 10%; color: var(--mg-sable); border: 1px dashed var(--mg-gris);
  font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 2.6cqw; line-height: 1.25;
}
.magazine__vide svg { width: 7cqw; height: auto; }
/* Sans photo, les voiles n'ont rien à assombrir : ils rendraient le cadre vide illisible. */
.magazine__photo:not([data-photo]) .magazine__voile { display: none; }

/* Le tirage : un filtre sur la photo, et le grain par-dessus pour l'argentique. */
.magazine[data-tirage="Couleur douce"] .magazine__photo img { filter: contrast(.9) saturate(.82) brightness(1.03); }
.magazine[data-tirage="Noir et blanc"] .magazine__photo img { filter: grayscale(1) contrast(1.06); }
.magazine[data-tirage="Argentique"] .magazine__photo img { filter: grayscale(1) contrast(.88) brightness(1.05); }
.magazine[data-tirage="Argentique"] .magazine__grain { display: block; }

/* Les textes : au-dessus de la photo, et transparents au doigt. */
.magazine__tete, .magazine__rubriques, .magazine__une, .magazine__phrase { position: relative; z-index: 2; pointer-events: none; }
/* Une ombre douce sous les textes clairs : les voiles couvrent le haut et le bas, mais une
   rubrique posée à mi-hauteur tombe sur des cheveux ou un ciel, là où aucun voile ne passe. */
.magazine__tete, .magazine__rubriques, .magazine__une, .magazine__phrase { text-shadow: 0 .15cqw 1.4cqw rgba(var(--voile), .6); }
.magazine[data-style="Mariage"] :is(.magazine__tete, .magazine__une, .magazine__phrase),
.magazine[data-style="Minimal"] :is(.magazine__tete, .magazine__une) { text-shadow: none; }
.magazine__tete { display: flex; flex-direction: column; align-items: center; width: 100%; }
.magazine__edition { display: flex; justify-content: center; gap: 2cqw; font-size: 1.45cqw; letter-spacing: .34em; padding-left: .34em; text-transform: uppercase; }
.magazine__special, .magazine__presente, .magazine__generique { display: none; }
/* `width: 100%` et `nowrap` ne sont pas décoratifs : l'éditeur mesure le texte dans sa boîte
   pour poser l'échelle (`--ech`) qui lui fait remplir la largeur. */
.magazine__journal {
  --ech-max: 1.6; width: 100%; white-space: nowrap; margin-top: .6cqw;
  font-family: "Playfair Display", Georgia, serif; font-weight: 800; font-size: calc(14cqw * var(--ech, 1));
  line-height: .92; letter-spacing: .01em; text-transform: uppercase;
}
.magazine__rubriques { display: none; flex-direction: column; gap: 2.8cqw; margin-top: 5cqw; }
.magazine__rubrique-titre { font-weight: 600; font-size: 1.75cqw; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; }
.magazine__rubrique-detail { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 2.5cqw; line-height: 1.2; margin-top: .5cqw !important; }
.magazine__une { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: auto; }
.magazine__titre, .magazine__noms { width: 100%; white-space: nowrap; }
.magazine .magazine--replie { white-space: normal; text-wrap: balance; }
.magazine__titre { font-weight: 600; font-size: calc(2cqw * var(--ech, 1)); letter-spacing: .3em; padding-left: .3em; text-transform: uppercase; }
.magazine__noms { font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: calc(8.6cqw * var(--ech, 1)); line-height: 1; text-transform: uppercase; margin-top: 1.4cqw; }
.magazine__sous { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 3.2cqw; line-height: 1.15; margin-top: 1.2cqw; }
.magazine__ligne { font-size: 1.45cqw; letter-spacing: .3em; padding-left: .3em; text-transform: uppercase; margin-top: 2cqw; font-variant-numeric: tabular-nums; }
.magazine__phrase { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 2.3cqw; margin-top: 2.6cqw; opacity: .92; }

/* ══ 01. Amour — le magazine romantique : le titre énorme en ivoire, les rubriques à gauche
   marquées de bordeaux, la une en bas à gauche sous une étiquette bordeaux. ══ */
.magazine[data-style="Amour"] .magazine__journal { text-shadow: 0 .4cqw 2.4cqw rgba(var(--mg-ombre), .35); }
.magazine[data-style="Amour"] .magazine__rubriques { display: flex; align-self: flex-start; width: 42%; text-align: left; }
.magazine[data-style="Amour"] .magazine__rubrique { border-left: .55cqw solid var(--mg-bordeaux); padding-left: 1.6cqw; }
.magazine[data-style="Amour"] .magazine__une { align-items: flex-start; text-align: left; }
.magazine[data-style="Amour"] .magazine__titre { width: auto; background: var(--mg-bordeaux); padding: .8cqw 1.4cqw .8cqw 1.7cqw; font-size: calc(1.8cqw * var(--ech, 1)); }
.magazine[data-style="Amour"] .magazine__noms { margin-top: 2cqw; }
.magazine[data-style="Amour"] .magazine__ligne { padding-left: 0; margin-top: 2.6cqw; }
.magazine[data-style="Amour"] .magazine__phrase { border-top: .12cqw solid var(--mg-filet); padding-top: 1.8cqw; width: 100%; }

/* ══ 02. Paris — la revue de mode : un titre fin, la photo presque seule, trois lignes en bas. ══ */
.magazine[data-style="Paris"] { --voile-haut: .3; --voile-bas: .66; }
.magazine[data-style="Paris"] .magazine__journal { font-weight: 400; letter-spacing: .08em; padding-left: .08em; --ech-max: 1.35; }
.magazine[data-style="Paris"] .magazine__edition { letter-spacing: .5em; font-size: 1.3cqw; }
.magazine[data-style="Paris"] .magazine__titre { order: 2; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 400; font-size: calc(3.6cqw * var(--ech, 1)); letter-spacing: .02em; padding-left: 0; text-transform: none; margin-top: 1.2cqw; }
.magazine[data-style="Paris"] .magazine__noms { order: 1; font-family: "Inter", system-ui, sans-serif; font-weight: 500; font-size: calc(2.1cqw * var(--ech, 1)); letter-spacing: .45em; padding-left: .45em; }
.magazine[data-style="Paris"] .magazine__ligne { order: 3; font-size: 1.25cqw; letter-spacing: .4em; margin-top: 1.4cqw; }
.magazine[data-style="Paris"] .magazine__sous,
.magazine[data-style="Paris"] .magazine__phrase { display: none; }

/* ══ 03. Été — le magazine de voyage : la photo réchauffée, un titre léger très espacé, les
   rubriques à droite couleur sable, les prénoms en capitales et le titre en écriture. ══ */
.magazine[data-style="Été"] { --voile: var(--mg-brun); --voile-haut: .38; --voile-bas: .62; font-family: "Josefin Sans", system-ui, sans-serif; }
.magazine[data-style="Été"] .magazine__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(var(--mg-soleil), .38), rgba(var(--mg-soleil), .08) 60%); mix-blend-mode: soft-light; pointer-events: none; }
.magazine[data-style="Été"] .magazine__journal { font-family: "Josefin Sans", system-ui, sans-serif; font-weight: 300; letter-spacing: .22em; padding-left: .22em; --ech-max: 1.5; }
.magazine[data-style="Été"] .magazine__edition { color: var(--mg-sable); }
.magazine[data-style="Été"] .magazine__rubriques { display: flex; align-self: flex-end; width: 40%; text-align: right; }
.magazine[data-style="Été"] .magazine__rubrique-titre { color: var(--mg-sable); font-weight: 600; }
.magazine[data-style="Été"] .magazine__rubrique-detail { font-family: "Josefin Sans", system-ui, sans-serif; font-style: normal; font-weight: 300; font-size: 2cqw; }
.magazine[data-style="Été"] .magazine__titre { order: 2; font-family: "Sacramento", cursive; font-weight: 400; font-size: calc(9cqw * var(--ech, 1)); letter-spacing: 0; padding-left: 0; text-transform: none; line-height: 1.05; margin-top: .6cqw; }
.magazine[data-style="Été"] .magazine__noms { order: 1; font-family: "Josefin Sans", system-ui, sans-serif; font-weight: 400; font-size: calc(4.2cqw * var(--ech, 1)); letter-spacing: .18em; padding-left: .18em; }
.magazine[data-style="Été"] .magazine__sous { order: 3; font-family: "Josefin Sans", system-ui, sans-serif; font-style: normal; font-weight: 300; font-size: 2.1cqw; letter-spacing: .12em; text-transform: uppercase; margin-top: 2cqw; }
.magazine[data-style="Été"] .magazine__ligne { order: 4; color: var(--mg-sable); margin-top: 1.6cqw; }
.magazine[data-style="Été"] .magazine__phrase { font-family: "Josefin Sans", system-ui, sans-serif; font-style: normal; font-weight: 300; font-size: 1.8cqw; letter-spacing: .08em; }

/* ══ 04. Cinéma — l'affiche de film : le magazine en studio qui « présente », les prénoms en
   très grand, l'accroche en réclame au-dessus, le générique serré en pied. ══ */
.magazine[data-style="Cinéma"] { --voile-haut: .55; --voile-bas: .92; }
.magazine[data-style="Cinéma"] .magazine__voile--bas { height: 62%; }
.magazine[data-style="Cinéma"] .magazine__edition { display: none; }
.magazine[data-style="Cinéma"] .magazine__journal { --ech-max: 1; font-family: "Inter", system-ui, sans-serif; font-weight: 600; font-size: calc(2.4cqw * var(--ech, 1)); letter-spacing: .5em; padding-left: .5em; margin-top: 1cqw; }
.magazine[data-style="Cinéma"] .magazine__presente { display: block; font-size: 1.3cqw; letter-spacing: .5em; padding-left: .5em; text-transform: uppercase; margin-top: 1cqw; color: var(--mg-sable); }
.magazine[data-style="Cinéma"] .magazine__titre { font-weight: 500; font-size: calc(1.9cqw * var(--ech, 1)); letter-spacing: .42em; padding-left: .42em; color: var(--mg-sable); }
.magazine[data-style="Cinéma"] .magazine__noms { font-size: calc(11cqw * var(--ech, 1)); line-height: .95; letter-spacing: .02em; margin-top: 2cqw; }
.magazine[data-style="Cinéma"] .magazine__sous { font-size: 3cqw; margin-top: 1.6cqw; }
.magazine[data-style="Cinéma"] .magazine__ligne { display: none; }
.magazine[data-style="Cinéma"] .magazine__generique {
  display: block; width: 100%; margin-top: 3.4cqw; padding-top: 1.6cqw; border-top: .12cqw solid var(--mg-filet);
  font-family: "Roboto Condensed", "Inter", sans-serif; font-size: 1.55cqw; letter-spacing: .12em; text-transform: uppercase; color: var(--mg-sable);
}
.magazine[data-style="Cinéma"] .magazine__phrase { display: none; }

/* ══ 05. Mariage — l'édition spéciale : papier clair, la photo dans ses marges, « Édition
   mariage » en bordeaux au-dessus du titre, les prénoms, la date et l'accroche dessous. ══ */
.magazine[data-style="Mariage"] { --fond: var(--mg-ivoire); --texte: var(--mg-noir); padding-top: 4cqw; }
.magazine[data-style="Mariage"] .magazine__photo { inset: 21% 7cqw 27%; background: var(--mg-vide); }
.magazine[data-style="Mariage"] .magazine__vide, .magazine[data-style="Minimal"] .magazine__vide { color: var(--mg-gris); }
.magazine[data-style="Mariage"] .magazine__voile { display: none; }
.magazine[data-style="Mariage"] #mg-edition { display: none; }
.magazine[data-style="Mariage"] .magazine__special { display: inline; color: var(--mg-bordeaux); font-weight: 600; }
.magazine[data-style="Mariage"] .magazine__journal { --ech-max: 1.25; font-weight: 700; margin-top: 1cqw; }
.magazine[data-style="Mariage"] .magazine__titre { order: 4; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 400; font-size: calc(3.3cqw * var(--ech, 1)); letter-spacing: .01em; padding-left: 0; text-transform: none; color: var(--mg-bordeaux); margin-top: 1.4cqw; }
.magazine[data-style="Mariage"] .magazine__noms { order: 1; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: calc(5.4cqw * var(--ech, 1)); letter-spacing: .16em; padding-left: .16em; margin-top: 0; }
.magazine[data-style="Mariage"] .magazine__ligne { order: 2; font-weight: 500; font-size: 1.7cqw; margin-top: 1.3cqw; }
.magazine[data-style="Mariage"] .magazine__sous { display: none; }
.magazine[data-style="Mariage"] .magazine__phrase { font-size: 2cqw; color: var(--mg-gris); margin-top: 1.6cqw; }

/* ══ 06. Minimal — la photo seule, entourée d'air : le titre en petites capitales en haut à
   gauche, les prénoms et la date en pied, rien d'autre. ══ */
.magazine[data-style="Minimal"] { --fond: var(--mg-blanc); --texte: var(--mg-noir); padding: 5.4cqw 9cqw 5cqw; }
.magazine[data-style="Minimal"] .magazine__photo { inset: 12% 9cqw 13.5%; background: var(--mg-vide); }
.magazine[data-style="Minimal"] .magazine__voile,
.magazine[data-style="Minimal"] .magazine__titre,
.magazine[data-style="Minimal"] .magazine__sous,
.magazine[data-style="Minimal"] .magazine__phrase { display: none; }
.magazine[data-style="Minimal"] .magazine__tete { flex-direction: row-reverse; justify-content: space-between; align-items: baseline; }
.magazine[data-style="Minimal"] .magazine__journal { --ech-max: 1; width: auto; flex: 1 1 0; min-width: 0; text-align: left; font-family: "Inter", system-ui, sans-serif; font-weight: 600; font-size: calc(3cqw * var(--ech, 1)); letter-spacing: .42em; margin-top: 0; }
.magazine[data-style="Minimal"] .magazine__edition { flex: none; white-space: nowrap; font-size: 1.2cqw; color: var(--mg-gris); }
/* Les prénoms au-dessus de la ligne, pas à côté : côte à côte, deux prénoms composés et un lieu
   de quarante signes écrasaient la date en une colonne de sept lignes, jusqu'au bord. */
.magazine[data-style="Minimal"] .magazine__une { align-items: flex-start; text-align: left; }
.magazine[data-style="Minimal"] .magazine__noms { font-family: "Inter", system-ui, sans-serif; font-weight: 500; font-size: calc(1.9cqw * var(--ech, 1)); letter-spacing: .36em; margin-top: 0; }
.magazine[data-style="Minimal"] .magazine__ligne { margin-top: 1cqw; padding-left: 0; font-size: 1.25cqw; color: var(--mg-gris); letter-spacing: .3em; }

/* ═══════════════════════════════ Le formulaire ═══════════════════════════════ */
.magazine-section { border: 0; padding: 0; margin: 0 0 2.4rem; min-width: 0; }
.magazine-section > legend { font-family: "Playfair Display", Georgia, serif; font-size: 2rem; font-weight: 600; padding: 0; margin-bottom: 1rem; }
.magazine-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .8rem; }
.magazine-styles input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.magazine-styles label {
  display: grid; gap: .2rem; padding: 1.2rem 1.4rem; min-height: 4.4rem; cursor: pointer; text-align: left;
  border: .1rem solid rgba(var(--color-foreground), .18); transition: border-color .2s ease;
}
.magazine-styles__numero { font-size: 1.1rem; letter-spacing: .2em; color: rgba(var(--color-foreground), .6); }
.magazine-styles__nom { font-family: "Playfair Display", Georgia, serif; font-size: 1.8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.magazine-styles__ligne { font-size: 1.2rem; color: rgba(var(--color-foreground), .7); }
.magazine-styles input:checked + label { border-color: rgb(var(--color-foreground)); box-shadow: inset 0 0 0 .1rem rgb(var(--color-foreground)); }
.magazine-styles input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.magazine-idees { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.2rem; }
.magazine-idees__choix {
  font: inherit; font-size: 1.2rem; letter-spacing: .08em; min-height: 4.4rem; padding: .6rem 1.2rem; cursor: pointer;
  background: none; color: inherit; border: .1rem solid rgba(var(--color-foreground), .22);
}
.magazine-idees__choix:hover { border-color: rgb(var(--color-foreground)); }
/* Sur les quatre maquettes qui ne les impriment pas, les rubriques restent modifiables mais se
   montrent en retrait : l'aide dit pourquoi. */
.magazine-section[data-muettes] .magazine-rubrique-champs,
.magazine-section[data-muettes] [data-rubriques] { opacity: .55; }
@media (prefers-reduced-motion: reduce) { .magazine-styles label { transition: none; } }