/* ═══════════════════════════ L'affiche d'un véhicule : votre voiture, votre moto, en affiche d'époque ═══════════════════════════
 *
 * Servie **seulement** sur la fiche « véhicule » (`views/product-affiche.liquid`), après `aquarelle.css` dont elle reprend l'attente et les
 * sections du formulaire : c'est un portrait IA comme les autres, avec une autre consigne (`lib/vehicule-affiche.js`).
 *
 * ── Ce que Gemini rend, et ce que la page écrit ──
 *
 * L'image est **l'affiche entière** : un paysage peint à la gouache, le véhicule du client sur la route, **un tiers de ciel vide en haut**
 * et **un bandeau marine uni en bas**. La consigne ne lui laisse écrire aucune lettre : c'est ici qu'on pose **du vrai texte** — le titre
 * (le nom du véhicule) et la devise dans le ciel, la mention dans le bandeau. Les trois sont posés en pourcentages de l'affiche, relevés
 * sur les trois références ET sur les sorties de Gemini (le bandeau commence entre 89 % et 92 % de la hauteur une fois le liseré de
 * papier retiré, d'où une zone de texte qui reste dans les 92,5 % à 97,5 %).
 *
 * ── La mise en page ──
 *
 * L'affiche (2:3) se pose **en entier**, centrée sur la feuille, jamais rognée : le titre est en haut et le bandeau en bas, `cover` les
 * couperait sur les formats plus larges (30 × 40, A4). Il reste alors un liseré de papier de chaque côté, de la couleur du papier des
 * références. Tout est en `cqw`, la largeur de l'affiche elle-même (`.vehicule`, son propre conteneur).
 *
 * ── Les couleurs ──
 *
 * Des couleurs de **produit**, pas de charte (point 6 quater) : le crème des lettres et l'encre marine qui les cerne sont relevés sur les
 * références. Le texte est crème **cerné de marine**, jamais posé sur le ciel seul : le ciel d'une ambiance va du turquoise au bleu pâle, et
 * c'est le cerne qui fait la lisibilité (contraste crème sur marine mesuré par l'essai).
 */
.aquarelle--vehicule {
  --vr-creme: #fff6e0;         /* le crème des lettres */
  --vr-marine: #1b2a58;        /* l'encre qui les cerne, et celle du bandeau des références */
  --vr-marine-rgb: 27, 42, 88;
  --aq-papier-defaut: #f6e8cc; /* le papier des références : ce qui reste de chaque côté d'un format plus large que 2:3 */
}

.aquarelle--vehicule { display: block; position: relative; overflow: hidden; container-type: size; --fond: var(--aq-papier-defaut); }

/* Les mesures de la boîte, enregistrées : voir `moto.css`, qui en dit la raison (le bandeau compte sur la largeur de la feuille, pas de l'affiche). */
@property --vr-sw { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --vr-sh { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --vr-hb { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --vr-wb { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --vr-top { syntax: "<length>"; inherits: true; initial-value: 0px; }

/* L'affiche **remplit la feuille, sans une bande de papier** (30 oct. 2026, Fred : « aucune bande beige, photo plein cadre comme les autres
   affiches ») : posée pour couvrir, le rapport faussé de 3 % au plus, le reste rogné — **le quart en haut, les trois quarts en bas** : le
   titre est écrit à 4 % du haut, et le bandeau marine du bas est assez épais (près de 10 % de la hauteur) pour en perdre un peu. La mention
   est donc posée **au pied de la feuille** et non à un pourcentage de l'image. */
.vehicule {
  --vr-sw: 100cqw; --vr-sh: 100cqh;
  --vr-hb: max(100cqh, 150cqw / 1.03);
  --vr-wb: max(100cqw, calc(var(--vr-hb) * .6667 / 1.03));
  --vr-top: calc((100cqh - var(--vr-hb)) * .25);
  position: absolute; top: var(--vr-top); left: calc((100cqw - var(--vr-wb)) / 2); width: var(--vr-wb); height: var(--vr-hb);
  container-type: inline-size;
}
.vehicule img { display: block; width: 100%; height: 100%; object-fit: fill; }
.aquarelle--vehicule[data-etat="attente"] .vehicule img { filter: blur(5px) saturate(.7); }

/* Le titre : une ligne en capitales Anton, qui se resserre (`--vr-ech`, estimé par le serveur, repris au pixel par l'éditeur) plutôt que de
   passer sur deux. Dix-sept signes tiennent au corps plein. */
.vehicule__titre {
  position: absolute; left: 4%; top: 4.2%; width: 92%; height: 10.5%; margin: 0;
  display: flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; overflow: hidden;
  font-family: "Anton", "Roboto Condensed", Impact, sans-serif; text-transform: uppercase; letter-spacing: .03em; line-height: 1;
  font-size: calc(11cqw * var(--vr-ech, 1)); color: var(--vr-creme); pointer-events: none;
  paint-order: stroke fill; -webkit-text-stroke: 1.5cqw var(--vr-marine);
  text-shadow: .6cqw .6cqw 0 var(--vr-marine);
}
.vehicule__titre span { display: block; max-width: none; }

/* La devise : Damion, deux lignes au plus, dans le ciel sous le titre. Le cerne marine est plus fin que celui du titre — Damion est
   mince, un cerne épais en bouchait les boucles. */
.vehicule__devise {
  position: absolute; left: 10%; top: 15.6%; width: 80%; height: 11%; margin: 0;
  display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden;
  font-family: "Damion", "Sacramento", cursive; font-weight: 400; line-height: 1.1; color: var(--vr-creme);
  font-size: calc(6.4cqw * var(--vr-ech, 1)); text-wrap: balance; overflow-wrap: normal; pointer-events: none;
  paint-order: stroke fill; -webkit-text-stroke: 1cqw var(--vr-marine);
  text-shadow: .4cqw .4cqw 0 var(--vr-marine);
}
.vehicule__devise span { display: block; max-width: 100%; }

/* La mention, dans le bandeau marine du bas : capitales espacées, entre deux tirets comme sur les affiches d'époque.
   `white-space: nowrap` est aussi ce qui permet à l'éditeur de mesurer le débordement. */
.vehicule__bandeau {
  position: absolute; left: calc((var(--vr-wb) - var(--vr-sw)) / 2); width: var(--vr-sw); height: 5cqw; margin: 0;
  top: calc(var(--vr-sh) - var(--vr-top) - 5.4cqw);
  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(--vr-ech, 1)); line-height: 1; color: var(--vr-creme); pointer-events: none;
}
.vehicule__bandeau::before, .vehicule__bandeau::after { content: "—"; flex: none; margin: 0 1.2em; opacity: .85; }

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

/* Les vignettes d'ambiance : l'affiche entière est en 2:3. */
.aquarelle-palettes label img { aspect-ratio: 2 / 3; object-fit: cover; }

/* Les idées en pastilles : mêmes que celles des affiches de moto (`moto.css`, dont la feuille ne charge pas ici). */
.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 et Anton, déjà servies à `moto.css` : mêmes fichiers, déclarées 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;
}
@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;
}