/* Lil Mail Club : notes, formules, boutons et bloc du mois (maquette Canva du 21 octobre 2026).
   Tout est posé dans la scène Canva (1897 px sur ordinateur, 375 px sur mobile) que site.js
   met à l'échelle : les valeurs en px sont celles de la maquette. */

.mc-stage .DF_utQ { contain: none; }
.mc-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.mc-scale { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

/* Textes HTML : même police, taille, interligne et centrage que les blocs de texte Canva. */
.mc-copy {
  position: absolute; left: 0; top: 0; box-sizing: border-box; margin: 0; padding: 0;
  font-size: 16px; line-height: 22px; font-weight: 400; font-style: normal; letter-spacing: 0;
  text-align: center; color: #000; overflow-wrap: break-word;
  font-kerning: normal; font-synthesis: none; font-feature-settings: "liga" 0, "clig" 0, "calt" 0;
  text-rendering: geometricPrecision; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  translate: 0 -.1em; pointer-events: auto; user-select: text;
}
.mc-copy--light { color: #fff; }
/* En anglais, des lignes équilibrées gardent la première ligne loin de la pointe de la flèche ;
   le français garde le retour à la ligne de Canva. */
html[lang="en"] .mc-note .mc-copy { text-wrap: balance; }

/* Formules : les lignes tombent entre les astérisques dessinées sur la carte. */
.mc-offer__card { position: absolute; margin: 0; padding: 0; font-size: 16px; font-weight: 400; line-height: 0; }
.mc-offer__card img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.mc-offer__list { list-style: none; }
.mc-offer__list > li { display: flex; flex-direction: column; justify-content: center; height: calc(var(--lines, 1) * 22px); margin: 0 0 22px; padding: 0; }
.mc-offer__list > li:last-child { margin-bottom: 0; }
/* Canva centre « 10€ » avec l'espace final saisi dans la maquette : on garde ce léger décalage. */
.mc-offer__price { font-size: 22.0789px; line-height: 30px; letter-spacing: .073em; white-space: nowrap; translate: 0 calc(-.1em - .75px); }
.mc-offer__price::after { content: "\00a0"; }
.mc-month__title { font-size: 21.5659px; line-height: 30px; translate: 0 calc(-.1em - 1.5px); }
.mc-section--mobile .mc-month__title { translate: 0 -.1em; }

/* Boutons hérissés : même prise en main que « Retour » (élévation, inclinaison, ombre, appui). */
.mc-button {
  position: absolute; display: block; box-sizing: border-box; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: none; color: #fff; font: inherit; text-decoration: none; cursor: pointer;
  pointer-events: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent; appearance: none;
}
.mc-button__shape {
  position: absolute; inset: 0; display: block; filter: none;
  transition: translate 300ms ease, scale 300ms ease, rotate 300ms ease, filter 300ms ease;
}
.mc-button__face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; filter: brightness(1); transition: filter 220ms ease; }
.mc-button__face img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.mc-button__label {
  position: relative; display: block; width: 74.95px; font-size: 16px; line-height: 22px; text-align: center; color: #fff;
  font-kerning: normal; font-synthesis: none; font-feature-settings: "liga" 0, "clig" 0, "calt" 0;
  text-rendering: geometricPrecision; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
@media (hover: hover) and (pointer: fine) {
  .mc-button:hover .mc-button__shape { translate: 0 -3px; scale: 1.025; rotate: -1.5deg; filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, .35)); }
}
.mc-button:focus-visible { outline: 3px dashed #edc4ce; outline-offset: 4px; }
.mc-button:focus-visible .mc-button__shape { translate: 0 -3px; scale: 1.025; rotate: -1.5deg; }
.mc-button:active .mc-button__shape { translate: 0 1px; scale: .97; rotate: -.4deg; filter: none; transition-duration: 70ms; }
.mc-button:active .mc-button__face { filter: brightness(.97); transition-duration: 120ms; }
@media (prefers-reduced-motion: reduce) {
  .mc-button__shape, .mc-button__face { transition: none; }
  .mc-button .mc-button__shape, .mc-button:hover .mc-button__shape, .mc-button:focus-visible .mc-button__shape, .mc-button:active .mc-button__shape { translate: none; scale: none; rotate: none; }
}