/* ═══════════════════════════ Les affiches de moto rétro ═══════════════════════════
 *
 * Servie **seulement** sur les trois fiches de moto (`views/product-affiche.liquid`), après
 * `aquarelle.css` dont elle reprend l'attente et les sections du formulaire : l'affiche de moto est
 * un portrait IA comme les autres, avec une autre consigne (`lib/moto-affiche.js`).
 *
 * ── Ce que Gemini rend, et ce que la page écrit ──
 *
 * L'image est **l'affiche entière** : titre, gamme, colonne de devises, plaque, moto, paysage. Deux
 * zones sont laissées vides par la consigne — la phrase manuscrite de droite, et le bandeau bleu du
 * bas, qui reste un aplat — et c'est ici qu'on y écrit **du vrai texte**. Les deux sont posées en
 * pourcentages de l'affiche, relevés sur les trois références ET sur les trois sorties de Gemini :
 * le bandeau va de 94,5 % à 98,3 % de la hauteur et de 2 % à 98 % de la largeur dans les six images.
 *
 * ── La mise en page ──
 *
 * L'affiche (2:3) se pose **en entier**, centrée sur la feuille, jamais rognée : le titre est tout en
 * haut et le bandeau tout en bas, `cover` les couperait. Les formats vendus vont de 1,333 (30 × 40) à
 * 1,5 (40 × 60) : sur tous les autres (A4, 30 × 40, 50 × 70, 70 × 100) il reste un liseré de papier de chaque côté, de la couleur du
 * papier de l'image. Tout est en `cqw`, la largeur de l'affiche elle-même (`.moto`, son propre
 * conteneur) : un A4 et un 70 × 100 sont la même composition à deux échelles.
 *
 * ── Les couleurs ──
 *
 * Des couleurs de **produit**, pas de charte (point 6 quater) : elles sont relevées sur les
 * références (l'encre marine de « MOTOS DE FRANCE », le crème du texte du bandeau) et nulle part
 * ailleurs dans ce fichier.
 */
.aquarelle--moto {
  --mo-marine: #1b2a58;       /* l'encre bleu marine de la phrase, comme « MOTOS DE FRANCE » */
  --mo-creme: #fff9ec;        /* le crème des mots du bandeau (relevé : #fffbef) */
  --mo-halo: 255, 244, 214;   /* le halo crème qui détache la phrase du ciel et des montagnes */
  --aq-papier-defaut: #f8e7c0;
}

.aquarelle--moto { display: block; position: relative; overflow: hidden; --fond: var(--aq-papier, var(--aq-papier-defaut)); }

/* L'affiche : toute la hauteur de la feuille, centrée, au rapport de son image — 2:3 pour les trois premières, 3:4 pour « Notre scooter… »
   (`--mo-rapport`, posé par le gabarit). */
.moto {
  position: absolute; top: 0; bottom: 0; left: 50%; height: 100%; aspect-ratio: var(--mo-rapport, 2 / 3);
  transform: translateX(-50%); container-type: inline-size;
}
.moto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.aquarelle--moto[data-etat="attente"] .moto img { filter: blur(5px) saturate(.7); }

/* La phrase manuscrite, à droite, dans la place que Gemini a rendue au ciel. Damion, une écriture au
   pinceau ; le halo crème est là pour les montagnes, pas pour le ciel. Elle se resserre ensemble
   (`--mo-ech`, estimé par le serveur, repris au pixel par l'éditeur) plutôt que de déborder. */
.moto__slogan {
  position: absolute; left: 60%; top: 24%; width: 36%; height: 23%; margin: 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: "Damion", "Sacramento", cursive; font-weight: 400; line-height: 1.12; color: var(--mo-marine);
  font-size: calc(7cqw * var(--mo-ech, 1)); text-wrap: balance; overflow-wrap: normal;
  transform: rotate(-8deg); pointer-events: none;
  paint-order: stroke fill; -webkit-text-stroke: 1.1cqw rgba(var(--mo-halo), .92);
  text-shadow: 0 0 1.6cqw rgba(var(--mo-halo), .95), 0 0 3.4cqw rgba(var(--mo-halo), .85);
}

/* Le bandeau : les mots du client, entre deux tirets, en capitales espacées comme sur l'affiche
   d'origine. `white-space: nowrap` est aussi ce qui permet à l'éditeur de mesurer le débordement. */
.moto__slogan span { display: block; max-width: 100%; }
.moto__bandeau {
  position: absolute; left: 2%; right: 2%; top: 94.5%; height: 3.8%; margin: 0;
  display: flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; overflow: hidden;
  font-family: "Montserrat", system-ui, sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: .14em;
  font-size: calc(2.8cqw * var(--mo-ech, 1)); line-height: 1; color: var(--mo-creme); pointer-events: none;
}
.moto__bandeau::before, .moto__bandeau::after { content: "—"; flex: none; margin: 0 1.2em; opacity: .85; }

/* « Notre scooter… » : un seul texte, le titre du ciel, écrit à la place de celui que Gemini a retiré. Anton, comme les grandes capitales
   de l'affiche d'origine, crème avec l'ombre marine décalée de la réclame ; une seule ligne, qui se resserre plutôt que de passer sur deux. */
/* 3:4 est plus large que tous nos formats sauf le 30 × 40 : l'affiche se pose **à la largeur de la feuille**, centrée en hauteur — la poser
   à sa hauteur, comme les trois autres, couperait les côtés. Le papier reste en haut et en bas. */
.moto--titre { top: 50%; bottom: auto; left: 0; width: 100%; height: auto; transform: translateY(-50%); }
.moto--titre .moto__slogan {
  left: 4%; top: 3.2%; width: 92%; height: 13%; transform: none; font-family: "Anton", "Roboto Condensed", Impact, sans-serif;
  text-transform: uppercase; letter-spacing: .03em; line-height: 1; white-space: nowrap; overflow: hidden;
  font-size: calc(11cqw * var(--mo-ech, 1)); color: var(--mo-creme); -webkit-text-stroke: 0; paint-order: normal;
  text-shadow: .5cqw .5cqw 0 var(--mo-marine);
}
.moto--titre .moto__slogan span { max-width: none; }

/* L'exemple se montre en pleine couleur (la règle d'`aquarelle.css`) ; la fabrication le masque. */
.aquarelle--moto .affiche-exemple { opacity: 1; }

/* ── Le formulaire ── */
.mo-idees { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.mo-idees[hidden] { display: none; }
.mo-idee {
  min-height: 4.4rem; padding: .6rem 1.2rem; font: inherit; font-size: 1.3rem; line-height: 1.25; text-align: left; cursor: pointer;
  border: .1rem solid rgba(var(--color-foreground), .25); border-radius: 2.2rem; background: transparent; color: inherit;
}
.mo-idee:hover { border-color: rgb(var(--navy)); }
.mo-idee:focus-visible { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.mo-idee[aria-pressed="true"] { border-color: rgb(var(--navy)); box-shadow: 0 0 0 .1rem rgb(var(--navy)); }

/* Damion, déjà servie à `bols.css` : même fichier, déclarée ici parce que chaque feuille est autonome. */
@font-face {
  font-family: "Damion"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/damion-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Damion"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/damion-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Anton, déjà servie à `calendrier.css` : mêmes fichiers, déclarée ici parce que chaque feuille est autonome. */
@font-face {
  font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/anton-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/anton-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}