/* ═══════════════════════════ Il faisait quel temps ? ═══════════════════════════
 *
 * La météo d'un jour J, au lieu dit : la température, le ciel et le vent du jour d'une
 * naissance, d'un mariage, d'une rencontre. Servie **seulement** sur sa fiche
 * (`views/product-affiche.liquid`).
 *
 * ── Les couleurs ──
 *
 * **Ce sont des couleurs de produit, pas de charte** (point 6 quater) : toutes ici, en tête, et
 * nulle part ailleurs. Le dessin (`meteo-calcul.mjs`) ne porte que des classes.
 *
 * Le ciel peint du style « Ciel » prend sa palette du **temps qu'il a fait** (`data-ciel`) et,
 * par beau temps, de la **chaleur** (`data-chaleur`) : un ciel de canicule n'a pas le bleu d'un
 * matin de gel. --c-haut, --c-milieu, --c-bas : le dégradé ; --c-nuage, --c-sombre : les nuages
 * clairs et ceux qui pleuvent ; --c-sol : l'encre des collines ; --c-sur : ce qui s'écrit sur le
 * ciel (blanc sur un ciel profond, encre sur un ciel pâle).
 */
.mt, .mt-styles {
  --c-haut: #2f72bf; --c-milieu: #79b6e6; --c-bas: #eaf2f5; --c-nuage: #ffffff; --c-sombre: #5f6c7b;
  --c-sol: #24425f; --c-sur: #ffffff; --c-halo: #fff3cf; --c-astre: #fffbea; --c-pluie: #e8eef3; --c-flocon: #ffffff;
  --c-eclair: #ffe27a; --c-brume: #f2f4f5;
  /* L'ombre du pied du ciel et le halo des chiffres posés dessus ; le blanc des pastilles rouges du bulletin. */
  --c-ombre: rgba(0, 0, 0, .08); --c-halo-texte: rgba(0, 0, 0, .14); --m-sur-badge: #ffffff; --m-relief: rgba(0, 0, 0, .18);
  /* La barre des températures : du gel à la canicule. */
  --t-glace: #5b8fd6; --t-frais: #7cc1c6; --t-tiede: #f1b552; --t-brulant: #e2583e;
}
.mt[data-ciel="soleil"][data-chaleur="canicule"], .mt[data-ciel="peu_nuageux"][data-chaleur="canicule"] { --c-haut: #1c58a3; --c-milieu: #5a9fd9; --c-bas: #ffd4a1; --c-sol: #6a4a3a; --c-halo: #fff0c2; }
.mt[data-ciel="soleil"][data-chaleur="chaud"], .mt[data-ciel="peu_nuageux"][data-chaleur="chaud"] { --c-haut: #2563ad; --c-milieu: #6aaae0; --c-bas: #fbe5c4; --c-sol: #4c5b4a; }
.mt[data-ciel="soleil"][data-chaleur="doux"], .mt[data-ciel="peu_nuageux"][data-chaleur="doux"] { --c-haut: #2f72bf; --c-milieu: #7fbbe8; --c-bas: #eef5f3; --c-sol: #3d5a4c; }
.mt[data-ciel="soleil"][data-chaleur="froid"], .mt[data-ciel="peu_nuageux"][data-chaleur="froid"] { --c-haut: #3c7bbd; --c-milieu: #a2cbea; --c-bas: #f0f5f8; --c-sol: #3f5668; }
.mt[data-ciel="soleil"][data-chaleur="gel"], .mt[data-ciel="peu_nuageux"][data-chaleur="gel"] { --c-haut: #5a8cc0; --c-milieu: #c2dbef; --c-bas: #f8fbfd; --c-sol: #6d8396; --c-halo: #ffffff; }
.mt[data-ciel="nuageux"] { --c-haut: #5f84a9; --c-milieu: #a7bfd4; --c-bas: #e6ecf0; --c-sol: #3e5162; }
.mt[data-ciel="couvert"] { --c-haut: #7b8792; --c-milieu: #aab3bb; --c-bas: #dde1e4; --c-nuage: #eef0f2; --c-sol: #46525c; }
.mt[data-ciel="brouillard"] { --c-haut: #8f9aa3; --c-milieu: #bfc6cb; --c-bas: #e6e9eb; --c-nuage: #f3f4f5; --c-sol: #7d8890; --c-sur: #ffffff; --c-halo: #ffffff; }
.mt[data-ciel="bruine"] { --c-haut: #6d8296; --c-milieu: #9fadba; --c-bas: #d3d9df; --c-nuage: #c8d0d7; --c-sombre: #7d8a97; --c-sol: #3f4c57; }
.mt[data-ciel="pluie"] { --c-haut: #45586b; --c-milieu: #75889a; --c-bas: #bcc6cf; --c-nuage: #aeb8c2; --c-sombre: #55616e; --c-sol: #2e3a45; --c-pluie: #dde5ec; }
.mt[data-ciel="orage"] { --c-haut: #1f2533; --c-milieu: #434a5f; --c-bas: #a39389; --c-nuage: #77798a; --c-sombre: #343a4b; --c-sol: #1b1f28; --c-pluie: #c8ced8; }
.mt[data-ciel="neige"] { --c-haut: #5d7690; --c-milieu: #9fb2c6; --c-bas: #e9eef3; --c-nuage: #dfe6ed; --c-sombre: #8d9db0; --c-sol: #f4f7fa; --c-sur: #ffffff; }
.mt[data-ciel="neige_pluie"] { --c-haut: #7d8d9d; --c-milieu: #b2bdc8; --c-bas: #e3e8ec; --c-nuage: #cfd6dd; --c-sombre: #8b97a3; --c-sol: #56636e; }

/* Anton, pour le bulletin : déclarée ici comme sur les autres fiches qui s'en servent, elle ne
   se télécharge que si un texte l'appelle. */
@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;
}

/*
 * Les quatre styles. --m-fond : le papier ; --m-texte : l'encre ; --m-doux : les libellés ;
 * --m-accent : la couleur qui porte (la température, le filet) ; --m-trait : les filets.
 * Le pictogramme : --p-soleil, --p-rayon, --p-nuage, --p-nuage2, --p-goutte, --p-flocon,
 * --p-eclair, --p-trait (son contour).
 */
[data-style="Ciel"] { --m-fond: #f7f4ee; --m-texte: #1d2b38; --m-doux: #55636f; --m-accent: #1d2b38; --m-trait: rgba(29, 43, 56, .22); }
[data-style="Bulletin"] {
  --m-fond: #173b8c; --m-fond2: #2457b8; --m-texte: #ffffff; --m-doux: #c9d8ff; --m-accent: #ffd23f; --m-trait: rgba(255, 255, 255, .28);
  --m-badge: #e8352b; --m-tuile: rgba(255, 255, 255, .1);
  --p-soleil: #ffd23f; --p-rayon: #ffd23f; --p-nuage: #ffffff; --p-nuage2: #b9cbe9; --p-goutte: #6fd0ff; --p-flocon: #ffffff; --p-eclair: #ffd23f; --p-trait: transparent; --p-brume: #dbe5f5;
}
[data-style="Almanach"] {
  --m-fond: #f2e8d5; --m-texte: #3a2a1b; --m-doux: #6b5643; --m-accent: #8c3b23; --m-trait: rgba(58, 42, 27, .45);
  --p-soleil: #f2e8d5; --p-rayon: #3a2a1b; --p-nuage: #f2e8d5; --p-nuage2: #e3d6bd; --p-goutte: #3a2a1b; --p-flocon: #3a2a1b; --p-eclair: #f2e8d5; --p-trait: #3a2a1b; --p-brume: #3a2a1b;
}
[data-style="Minimal"] {
  --m-soleil: #d9622b;
  --m-fond: #fbfaf7; --m-texte: #121212; --m-doux: #5f5f5f; --m-accent: #121212; --m-trait: rgba(18, 18, 18, .18);
  --p-soleil: none; --p-rayon: #121212; --p-nuage: #fbfaf7; --p-nuage2: #fbfaf7; --p-goutte: #121212; --p-flocon: #121212; --p-eclair: #fbfaf7; --p-trait: #121212; --p-brume: #121212;
}
/* Le minimal prend une seule couleur, celle du temps : l'orange du soleil, le bleu de la
   pluie, le gris du couvert. */
.mt[data-style="Minimal"][data-ciel="soleil"], .mt[data-style="Minimal"][data-ciel="peu_nuageux"] { --m-accent: var(--m-soleil); }
.mt[data-style="Minimal"][data-ciel="nuageux"], .mt[data-style="Minimal"][data-ciel="couvert"], .mt[data-style="Minimal"][data-ciel="brouillard"] { --m-accent: #5b6873; }
.mt[data-style="Minimal"][data-ciel="bruine"], .mt[data-style="Minimal"][data-ciel="pluie"], .mt[data-style="Minimal"][data-ciel="orage"] { --m-accent: #2c5fa8; }
.mt[data-style="Minimal"][data-ciel="neige"], .mt[data-style="Minimal"][data-ciel="neige_pluie"] { --m-accent: #4b87b8; }

/* ── Le commun ──
 *
 * Tout est en `cqw` : la même mise en page tient de l'A4 au 70 × 100. Les blocs `__haut`,
 * `__bas`, `__tete` et `__meteo` ne sont des boîtes que dans le style « Ciel », où la frontière
 * du ciel est fixe ; ailleurs ils s'effacent (`display: contents`) et la grille place leurs
 * enfants.
 */
.mt { --fond: var(--m-fond); --texte: var(--m-texte); font-family: "Inter", system-ui, sans-serif; }
.mt :where(p, dl, dd, dt, figure, figcaption) { margin: 0; }
.mt svg { display: block; overflow: visible; }
.mt__m, .mt__peint, .mt__graphes, .mt__picto, .mt__d--lune, .mt__d--humidite { display: none; }
.mt__d2 { color: var(--m-doux); }
/* Les colonnes des relevés prennent la largeur de leur contenu, l'air se répartit entre elles ; au
   plancher seulement (`data-serre`), un libellé long se coupe plutôt que de déborder. */
.mt[data-serre] .mt__d dt span { min-width: 0; overflow-wrap: anywhere; }
.mt__nw { white-space: nowrap; }
/* Posé par l'éditeur quand rien d'autre ne suffit : les lignes secondaires se taisent. */
.mt[data-serre] .mt__d2, .mt[data-serre] .mt__g--arc figcaption { display: none; }
/* Le signe moins d'une très grande température : à pleine taille, il se lit comme un tiret long. */
.mt__moins { font-size: .55em; vertical-align: .32em; margin-right: .03em; }
.mt__nom, .mt__lieu, .mt__occasion, .mt__phrase, .mt__quand, .mt__etat { overflow-wrap: anywhere; }
.mt__attente { font-size: 3.4cqw; color: var(--m-doux); }
.mt__occasion:empty, .mt__phrase:empty { display: none; }

/* Le pictogramme : une géométrie, quatre habits. */
.mt-picto { width: 100%; height: auto; }
.mt-p-soleil { fill: var(--p-soleil); stroke: var(--p-trait); stroke-width: 2.4; }
.mt-p-rayon { stroke: var(--p-rayon); stroke-width: 4.5; stroke-linecap: round; }
.mt-p-nuage { fill: var(--p-nuage); stroke: var(--p-trait); stroke-width: 2.4; stroke-linejoin: round; }
.mt-p-nuage2 { fill: var(--p-nuage2); stroke: var(--p-trait); stroke-width: 2.4; stroke-linejoin: round; }
.mt-p-goutte { stroke: var(--p-goutte); stroke-width: 4; stroke-linecap: round; }
.mt-p-flocon { stroke: var(--p-flocon); stroke-width: 2.4; stroke-linecap: round; }
.mt-p-eclair { fill: var(--p-eclair); stroke: var(--p-trait); stroke-width: 2.2; stroke-linejoin: round; }
.mt-p-brume { stroke: var(--p-brume); stroke-width: 4; stroke-linecap: round; }
.mt-icone { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Le ciel peint : rien qu'avec des dégradés, aucun filtre — ce qui se rend à l'écran se rend
   à 300 dpi, dans le même temps. */
.mt .mt-peint { width: 100%; height: 100%; overflow: hidden; }
.mt-s-haut { stop-color: var(--c-haut); }
.mt-s-milieu { stop-color: var(--c-milieu); }
.mt-s-bas { stop-color: var(--c-bas); }
.mt-s-halo { stop-color: var(--c-halo); }
.mt-s-nuage { stop-color: var(--c-nuage); }
.mt-s-sombre { stop-color: var(--c-sombre); }
.mt-s-brume { stop-color: var(--c-brume); }
.mt-c-astre { fill: var(--c-astre); }
.mt-c-pluie { stroke: var(--c-pluie); stroke-width: .28; stroke-linecap: round; opacity: .7; }
.mt-c-flocon { fill: var(--c-flocon); opacity: .9; }
.mt-c-eclair { fill: var(--c-eclair); }
.mt-c-colline { fill: var(--c-sol); }
.mt-c-colline--1 { opacity: .22; }
.mt-c-colline--2 { opacity: .42; }
.mt-c-colline--3 { opacity: .78; }

/* Les petits graphiques du minimal. */
.mt-g-sol, .mt-g-rail, .mt-g-grad, .mt-g-cercle, .mt-g-tic { stroke: var(--m-trait); stroke-width: .8; fill: none; }
.mt-g-grad--zero { stroke: var(--m-doux); }
.mt-g-rail { stroke-width: 3; stroke-linecap: round; }
.mt-g-plage { stroke-width: 3; stroke-linecap: round; }
.mt-g-borne { fill: var(--m-fond); stroke: var(--m-texte); stroke-width: 1; }
.mt-g-arc { fill: none; stroke: var(--m-accent); stroke-width: 1.1; stroke-dasharray: 1.6 1.8; }
.mt-g-astre { fill: var(--m-accent); }
.mt-g-txt { font-family: "Inter", sans-serif; font-size: 5px; fill: var(--m-doux); font-variant-numeric: tabular-nums; }
.mt-g-card { font-size: 5.5px; font-weight: 600; fill: var(--m-texte); }
.mt-g-fleche { stroke: var(--m-accent); stroke-width: 1.6; stroke-linecap: round; }
.mt-g-pointe { fill: var(--m-accent); }
.mt-g-calme { fill: var(--m-accent); }
.mt-s-glace { stop-color: var(--t-glace); }
.mt-s-frais { stop-color: var(--t-frais); }
.mt-s-tiede { stop-color: var(--t-tiede); }
.mt-s-brulant { stop-color: var(--t-brulant); }
.mt-lune { width: 1em; height: 1em; flex: none; }
.mt-g-lune { fill: var(--m-fond); stroke: var(--m-texte); stroke-width: 1.2; }
.mt-g-ombre { fill: var(--m-texte); }

/* ═══ Ciel ═══
 *
 * Le ciel du jour, peint, en haut des deux tiers ; la température en très grand dessus ; le
 * papier en bas, avec le nom, la date, le lieu et quatre relevés. La frontière est fixe
 * (`--mt-ciel`) : posée par le contenu, elle bougerait d'une saisie à l'autre.
 */
.mt[data-style="Ciel"] { --mt-bas: 50cqw; display: block; }
.mt__phrase--ciel { display: none; }
.mt[data-style="Ciel"] .mt__phrase--ciel { display: block; }
.mt[data-style="Ciel"] .mt__bas .mt__phrase { display: none; }
.mt[data-style="Ciel"] .mt__peint { display: block; position: absolute; inset: 0 0 auto; height: calc(100% - var(--mt-bas)); }
.mt[data-style="Ciel"] .mt__peint::after { content: ""; position: absolute; inset: auto 0 0; height: 1.2cqw; background: linear-gradient(to bottom, transparent, var(--c-ombre)); }
.mt[data-style="Ciel"] .mt__haut { position: absolute; inset: 0 0 auto; height: calc(100% - var(--mt-bas)); padding: 8cqw 8cqw 0; color: var(--c-sur); display: flex; flex-direction: column; }
.mt[data-style="Ciel"] .mt__m--ciel { display: inline; }
.mt[data-style="Ciel"] .mt__marque { font-size: 2.3cqw; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; opacity: .88; }
.mt[data-style="Ciel"] .mt__meteo { margin-top: 5cqw; }
.mt[data-style="Ciel"] .mt__temp { font-weight: 200; font-size: calc(36cqw * var(--mt-t, 1)); line-height: .82; letter-spacing: -.045em; font-variant-numeric: lining-nums; text-shadow: 0 .4cqw 3cqw var(--c-halo-texte); }
.mt[data-style="Ciel"] .mt__haut { text-shadow: 0 0 2.4cqw var(--c-halo-texte); }
.mt[data-style="Ciel"] .mt__deg { font-weight: 100; font-size: .62em; vertical-align: .62em; margin-left: .03em; }
.mt[data-style="Ciel"] .mt__etat { margin-top: 2.2cqw; font-family: "Playfair Display", serif; font-style: italic; font-size: 6.6cqw; line-height: 1.05; }
.mt[data-style="Ciel"] .mt__bas { position: absolute; inset: auto 0 0; height: var(--mt-bas); padding: 4.4cqw 8cqw 3.6cqw; display: flex; flex-direction: column; }
.mt[data-style="Ciel"] .mt__occasion { font-size: 2.3cqw; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--m-doux); }
.mt[data-style="Ciel"] .mt__nom { font-family: "Playfair Display", serif; font-size: calc(10cqw * var(--mt-n, 1)); font-weight: 500; line-height: 1.02; margin-top: 1.2cqw; letter-spacing: -.01em; }
.mt[data-style="Ciel"] .mt__quand { margin-top: 1.2cqw; font-size: 3cqw; color: var(--m-doux); }
.mt[data-style="Ciel"] .mt__donnees { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 0 2.4cqw; padding-top: 2.8cqw; border-top: 1px solid var(--m-trait); margin-top: 3cqw; }
.mt[data-style="Ciel"] .mt__d dt { display: flex; align-items: center; gap: 1.2cqw; font-size: 1.8cqw; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--m-doux); }
.mt[data-style="Ciel"] .mt__d dt .mt-icone { font-size: 3.4cqw; color: var(--m-texte); }
.mt[data-style="Ciel"] .mt__d dd { margin-top: 1.2cqw; font-size: 2.8cqw; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.25; }
.mt[data-style="Ciel"] .mt__d .mt__d2 { display: none; }
.mt[data-style="Ciel"] .mt__phrase--ciel { margin-top: 2.6cqw; max-width: 62cqw; font-size: 3.4cqw; line-height: 1.4; font-weight: 400; opacity: .95; }

/* ═══ Bulletin ═══
 *
 * Le bulletin du journal télévisé des années 80 : un bleu profond, le grand pictogramme en
 * aplats francs comme un aimant posé sur la carte, la température dans une pastille rouge, des
 * capitales étroites. La grille place les enfants de `__haut`, `__bas`, `__tete` et `__meteo`.
 */
.mt[data-style="Bulletin"] {
  background: radial-gradient(120% 80% at 50% 30%, var(--m-fond2), var(--m-fond) 70%);
  display: grid; grid-template-columns: 8cqw 1fr 8cqw;
  grid-template-rows: 7cqw auto auto minmax(0, 1fr) auto auto auto auto auto 5cqw;
  grid-template-areas: ". . ." ". marque ." ". occasion ." ". picto ." ". etat ." ". nom ." ". quand ." ". donnees ." ". phrase ." ". . .";
  font-family: "Roboto Condensed", "Inter", sans-serif; text-align: center;
}
.mt[data-style="Bulletin"] :is(.mt__haut, .mt__bas, .mt__tete, .mt__meteo) { display: contents; }
.mt[data-style="Bulletin"] .mt__marque { grid-area: marque; display: flex; flex-direction: column; align-items: center; }
.mt[data-style="Bulletin"] .mt__m--bulletin { display: block; white-space: nowrap; font-family: "Anton", sans-serif; font-size: 10cqw; line-height: 1; letter-spacing: .01em; text-transform: uppercase; color: var(--m-texte); }
.mt[data-style="Bulletin"] .mt__marque::after { content: ""; width: 26cqw; height: 1.4cqw; margin-top: 2cqw; background: var(--m-accent); border-radius: 1cqw; }
.mt[data-style="Bulletin"] .mt__occasion { grid-area: occasion; justify-self: center; margin-top: 3.4cqw; padding: .9cqw 2.6cqw; background: var(--m-badge); color: var(--m-sur-badge); font-weight: 700; font-size: 2.6cqw; letter-spacing: .16em; text-transform: uppercase; border-radius: .6cqw; }
.mt[data-style="Bulletin"] .mt__picto { display: block; grid-area: picto; align-self: stretch; justify-self: center; min-height: 0; height: 100%; max-height: 54cqw; aspect-ratio: 1; margin: 2cqw 0 1cqw; filter: drop-shadow(0 1.4cqw 0 var(--m-relief)); }
.mt[data-style="Bulletin"] .mt__temp { grid-area: picto; align-self: end; justify-self: end; margin: 0 4cqw 2cqw 0; width: 22cqw; aspect-ratio: 1; border-radius: 50%; background: var(--m-badge); display: flex; align-items: center; justify-content: center; font-family: "Anton", sans-serif; font-size: calc(12.5cqw * var(--mt-t, 1)); line-height: 1; color: var(--m-sur-badge); box-shadow: 0 1cqw 0 var(--m-relief); border: .9cqw solid var(--m-sur-badge); }
.mt[data-style="Bulletin"] .mt__deg { font-size: .7em; align-self: flex-start; margin-top: .25em; }
.mt[data-style="Bulletin"] .mt__etat { grid-area: etat; font-family: "Anton", sans-serif; font-size: 6.4cqw; line-height: 1.05; text-transform: uppercase; color: var(--m-accent); letter-spacing: .02em; }
.mt[data-style="Bulletin"] .mt__nom { grid-area: nom; margin-top: 3cqw; font-weight: 800; font-size: calc(8cqw * var(--mt-n, 1)); line-height: 1; text-transform: uppercase; letter-spacing: .02em; }
.mt[data-style="Bulletin"] .mt__quand { grid-area: quand; margin-top: 1.4cqw; font-size: 3.2cqw; font-weight: 500; color: var(--m-doux); letter-spacing: .06em; text-transform: uppercase; }
.mt[data-style="Bulletin"] .mt__donnees { grid-area: donnees; margin-top: 4cqw; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.8cqw; }
.mt[data-style="Bulletin"] .mt__d { background: var(--m-tuile); border: 1px solid var(--m-trait); border-radius: 1.6cqw; padding: 1.8cqw .8cqw 1.6cqw; display: flex; flex-direction: column; align-items: center; }
.mt[data-style="Bulletin"] :is(.mt__d--lune, .mt__d--humidite) { display: none; }
.mt[data-style="Bulletin"] .mt__d dt { display: flex; flex-direction: column; align-items: center; gap: .8cqw; font-size: 1.9cqw; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--m-doux); }
.mt[data-style="Bulletin"] .mt__d dt .mt-icone { font-size: 4.2cqw; color: var(--m-accent); stroke-width: 2; }
.mt[data-style="Bulletin"] .mt__d dd { margin-top: .8cqw; font-size: 2.8cqw; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.mt[data-style="Bulletin"] .mt__d .mt__d2 { margin-top: .4cqw; font-size: 2cqw; font-weight: 400; }
.mt[data-style="Bulletin"] .mt__phrase { grid-area: phrase; margin-top: 3.4cqw; font-size: 3.4cqw; font-weight: 500; font-style: italic; }

/* ═══ Almanach ═══
 *
 * Le registre d'un observatoire d'autrefois : papier crème, encre sépia, double filet, le
 * pictogramme gravé dans un médaillon, les relevés en colonne à points de conduite, le vent dit
 * par l'échelle de Beaufort, la rose des vents, et le nom à la plume.
 */
.mt[data-style="Almanach"] {
  display: grid; grid-template-columns: 10cqw 1fr 10cqw;
  grid-template-rows: 9.5cqw auto auto minmax(0, 1fr) auto auto auto auto auto auto 7cqw;
  grid-template-areas: ". . ." ". marque ." ". quand ." ". picto ." ". temp ." ". etat ." ". donnees ." ". nom ." ". occasion ." ". phrase ." ". . .";
  font-family: "Cormorant Garamond", serif; text-align: center;
}
.mt[data-style="Almanach"]::before { content: ""; position: absolute; inset: 4cqw; border: .45cqw double var(--m-trait); border-width: .9cqw; pointer-events: none; }
.mt[data-style="Almanach"]::after { content: ""; position: absolute; inset: 5.6cqw; border: 1px solid var(--m-trait); pointer-events: none; }
.mt[data-style="Almanach"] :is(.mt__haut, .mt__bas, .mt__tete, .mt__meteo) { display: contents; }
.mt[data-style="Almanach"] .mt__marque { grid-area: marque; }
.mt[data-style="Almanach"] .mt__m--almanach { display: block; font-family: "Marcellus", serif; font-size: 4.2cqw; letter-spacing: .3em; text-transform: uppercase; line-height: 1.2; }
.mt[data-style="Almanach"] .mt__quand { grid-area: quand; margin-top: 1.6cqw; font-style: italic; font-size: 4.2cqw; color: var(--m-doux); }
.mt[data-style="Almanach"] .mt__sep { display: none; }
.mt[data-style="Almanach"] .mt__lieu::before { content: " — "; }
.mt[data-style="Almanach"] .mt__picto { display: block; grid-area: picto; justify-self: center; align-self: center; min-height: 0; height: 100%; max-height: 27cqw; aspect-ratio: 1; margin-top: 3.4cqw; padding: 1.4cqw; box-sizing: border-box; border-radius: 50%; border: 1px solid var(--m-trait); box-shadow: 0 0 0 1.2cqw var(--m-fond), 0 0 0 calc(1.2cqw + 1px) var(--m-trait); }
.mt[data-style="Almanach"] .mt-p-rayon { stroke-width: 2.4; }
.mt[data-style="Almanach"] .mt-p-goutte { stroke-width: 2.4; }
.mt[data-style="Almanach"] .mt-p-brume { stroke-width: 2.4; }
.mt[data-style="Almanach"] .mt__temp { grid-area: temp; margin-top: 2.6cqw; font-family: "Playfair Display", serif; font-size: calc(13cqw * var(--mt-t, 1)); font-weight: 400; line-height: 1; color: var(--m-accent); font-variant-numeric: lining-nums; }
.mt[data-style="Almanach"] .mt__etat { grid-area: etat; margin-top: .4cqw; font-style: italic; font-size: 5.2cqw; }
.mt[data-style="Almanach"] .mt__donnees { grid-area: donnees; margin: 3.4cqw auto 0; width: 100%; max-width: 72cqw; display: flex; flex-direction: column; gap: 1cqw; }
.mt[data-style="Almanach"] .mt__d--lune, .mt[data-style="Almanach"] .mt__d--humidite { display: grid; }
.mt[data-style="Almanach"] .mt__d { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 0 1.4cqw; font-size: 3.1cqw; line-height: 1.2; }
.mt[data-style="Almanach"] .mt__d::after { content: ""; grid-column: 2; grid-row: 1; border-bottom: .35cqw dotted var(--m-trait); transform: translateY(-.25em); }
.mt[data-style="Almanach"] .mt__d dt { grid-column: 1; grid-row: 1; font-variant: small-caps; letter-spacing: .06em; color: var(--m-doux); font-size: 3.1cqw; }
.mt[data-style="Almanach"] .mt__d dt .mt-icone { display: none; }
.mt[data-style="Almanach"] .mt__d dd { grid-column: 3; grid-row: 1; text-align: right; font-weight: 500; font-variant-numeric: oldstyle-nums; display: flex; align-items: center; justify-content: flex-end; gap: 1cqw; }
.mt[data-style="Almanach"] .mt__d .mt__d2 { grid-column: 1 / -1; grid-row: 2; font-style: italic; font-weight: 400; font-size: 2.6cqw; text-align: right; margin-top: -.3cqw; }
.mt[data-style="Almanach"] .mt__nom { grid-area: nom; margin-top: 2.4cqw; font-family: "Pinyon Script", cursive; font-size: calc(11cqw * var(--mt-n, 1)); line-height: 1.15; color: var(--m-texte); }
.mt[data-style="Almanach"] .mt__occasion { grid-area: occasion; font-family: "Marcellus", serif; font-size: 2.6cqw; letter-spacing: .26em; text-transform: uppercase; color: var(--m-doux); }
.mt[data-style="Almanach"] .mt__phrase { grid-area: phrase; margin-top: 2cqw; font-style: italic; font-size: 3.5cqw; line-height: 1.3; }

/* ═══ Minimal ═══
 *
 * Une page de données, à la suisse : le nom en haut à gauche, la température en très grand et
 * très fin, une seule couleur — celle du temps qu'il faisait —, et trois graphiques : la course
 * du soleil, les températures sur l'échelle de l'année, la rose des vents.
 */
.mt[data-style="Minimal"] {
  display: grid; grid-template-columns: 8cqw 1fr auto 8cqw;
  grid-template-rows: 8cqw auto auto auto 1fr auto auto auto 1fr auto auto 5cqw;
  grid-template-areas: ". . . ." ". nom nom ." ". occasion occasion ." ". quand quand ." ". . . ." ". temp picto ." ". etat etat ." ". graphes graphes ." ". . . ." ". donnees donnees ." ". phrase phrase ." ". . . .";
  text-align: left;
}
.mt[data-style="Minimal"] :is(.mt__haut, .mt__bas, .mt__tete, .mt__meteo) { display: contents; }
.mt[data-style="Minimal"] .mt__marque { display: none; }
.mt[data-style="Minimal"] .mt__nom { grid-area: nom; font-size: calc(9cqw * var(--mt-n, 1)); font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.mt[data-style="Minimal"] .mt__occasion { grid-area: occasion; margin-top: 1.6cqw; font-size: 2.4cqw; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--m-accent); }
.mt[data-style="Minimal"] .mt__quand { grid-area: quand; margin-top: 1cqw; font-size: 3cqw; color: var(--m-doux); }
.mt[data-style="Minimal"] .mt__temp { grid-area: temp; align-self: end; font-weight: 100; font-size: calc(42cqw * var(--mt-t, 1)); line-height: .78; letter-spacing: -.06em; margin-left: -.06em; font-variant-numeric: lining-nums; }
.mt[data-style="Minimal"] .mt__deg { color: var(--m-accent); font-weight: 200; }
.mt[data-style="Minimal"] .mt__picto { display: block; grid-area: picto; align-self: start; width: 17cqw; margin-top: 2cqw; }
.mt[data-style="Minimal"] .mt-p-rayon, .mt[data-style="Minimal"] .mt-p-soleil { stroke: var(--m-accent); }
.mt[data-style="Minimal"] .mt-p-rayon { stroke-width: 2.6; }
.mt[data-style="Minimal"] .mt-p-goutte, .mt[data-style="Minimal"] .mt-p-flocon { stroke: var(--m-accent); stroke-width: 2.6; }
.mt[data-style="Minimal"] .mt-p-brume { stroke-width: 2.6; }
.mt[data-style="Minimal"] .mt__etat { grid-area: etat; margin-top: 2.4cqw; font-size: 5.4cqw; font-weight: 300; letter-spacing: -.01em; }
.mt[data-style="Minimal"] .mt__graphes { display: grid; grid-area: graphes; margin-top: 3.4cqw; grid-template-columns: 1.4fr 1.4fr .8fr; gap: 4cqw; align-items: end; padding-top: 3cqw; border-top: 1px solid var(--m-trait); }
.mt[data-style="Minimal"] .mt__g { display: flex; flex-direction: column; gap: 1.6cqw; }
.mt[data-style="Minimal"] .mt__g figcaption { font-size: 2.1cqw; color: var(--m-doux); font-variant-numeric: tabular-nums; }
.mt[data-style="Minimal"] .mt__g--barre { flex-direction: column-reverse; }
.mt[data-style="Minimal"] .mt__g--barre figcaption { font-size: 3cqw; font-weight: 500; color: var(--m-texte); }
.mt[data-style="Minimal"] :is(.mt__d--temp, .mt__d--vent) { display: none; }
.mt[data-style="Minimal"] .mt__donnees { grid-area: donnees; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 2.2cqw 4cqw; margin-top: 3cqw; }
.mt[data-style="Minimal"] :is(.mt__d--lune, .mt__d--humidite) { display: block; }
/* Au plancher, la lune et l'humidité se taisent : la pluie et le soleil restent. */
.mt[data-style="Minimal"][data-serre] :is(.mt__d--lune, .mt__d--humidite) { display: none; }
.mt[data-style="Minimal"] .mt__d dt { display: flex; align-items: center; gap: 1cqw; font-size: 1.8cqw; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--m-doux); }
.mt[data-style="Minimal"] .mt__d dt .mt-icone { font-size: 2.8cqw; color: var(--m-accent); }
.mt[data-style="Minimal"] .mt__d dd { margin-top: .8cqw; font-size: 3cqw; font-weight: 500; display: flex; align-items: center; gap: 1cqw; font-variant-numeric: tabular-nums; }
.mt[data-style="Minimal"] .mt__d .mt__d2 { margin-top: .2cqw; font-size: 2.2cqw; font-weight: 400; }
/* La durée du jour est déjà sous la course du soleil. */
.mt[data-style="Minimal"] .mt__d--soleil .mt__d2 { display: none; }
.mt[data-style="Minimal"] .mt-lune { font-size: .8em; }
.mt[data-style="Minimal"] .mt__phrase { grid-area: phrase; margin-top: 3cqw; font-size: 3.4cqw; line-height: 1.35; font-weight: 400; }

/* ── Le formulaire ── */
.mt-lieu__recherche { display: flex; gap: .8rem; }
.mt-lieu__recherche input { flex: 1; min-width: 0; }
.mt-chercher { flex: none; min-height: 4.4rem; }
.mt-etat { margin: .6rem 0 0; font-size: 1.4rem; line-height: 1.4; min-height: 2rem; }
.mt-etat[data-erreur] { font-weight: 600; }
.mt-idees { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.mt-idees[hidden] { display: none; }
.mt-idee { min-height: 4.4rem; padding: .6rem 1.2rem; border: 1px solid rgba(var(--color-foreground), .3); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 1.4rem; line-height: 1.3; text-align: left; cursor: pointer; }
.mt-idee:hover { border-color: currentColor; }
.mt-idee:focus-visible { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
/* Sur un téléphone, les propositions défilent au doigt sur une ligne, comme les autres choix du
   site : empilées, les six occasions prenaient un écran. Le `padding` garde la place du cercle de
   focus, qu'un conteneur qui défile rognerait. */
@media (max-width: 749px) {
  .mt-idees { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; padding: .4rem .2rem; scrollbar-width: none; }
  .mt-idee { flex: none; white-space: nowrap; scroll-snap-align: start; }
}

/* ── Les pastilles des styles dans le formulaire : le papier de chacun. ── */
.mt-styles { display: flex; flex-wrap: wrap; gap: .6rem; }
.mt-styles input { position: absolute; opacity: 0; pointer-events: none; }
.mt-styles label { display: inline-flex; align-items: center; gap: .6rem; min-height: 4.4rem; padding: 0 1.4rem; border: 1px solid rgba(var(--color-foreground), .3); border-radius: 999px; cursor: pointer; font-size: 1.5rem; }
.mt-styles input:checked + label { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; font-weight: 600; }
.mt-styles input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.mt-pastille { width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid rgba(var(--color-foreground), .25); flex: none; }
.mt-styles [data-style="Ciel"] .mt-pastille { background: linear-gradient(var(--c-haut), var(--c-milieu) 60%, var(--m-fond) 60%); }
.mt-styles [data-style="Bulletin"] .mt-pastille { background: radial-gradient(circle at 50% 40%, var(--p-soleil) 30%, var(--m-fond) 32%); }
.mt-styles [data-style="Almanach"] .mt-pastille { background: var(--m-fond); box-shadow: inset 0 0 0 .3rem var(--m-fond), inset 0 0 0 .4rem var(--m-texte); }
.mt-styles [data-style="Minimal"] .mt-pastille { --m-accent: var(--m-soleil); background: linear-gradient(135deg, var(--m-fond) 55%, var(--m-accent) 55%); }

/* ═══ Sans relevé ═══
   La température vide ne montre rien (ni pastille ni place réservée), et le message d'attente
   prend la place de l'état du ciel, dans les quatre styles : laissé sans zone, la grille le
   rangeait dans sa marge de gauche, un mot par ligne. */
.mt .mt__meteo--vide .mt__temp { display: none; }
.mt .mt__attente { grid-area: etat; align-self: center; margin: 4cqw 0; font-style: italic; font-size: 4.2cqw; line-height: 1.3; color: var(--m-doux); text-wrap: balance; }
.mt[data-style="Ciel"] .mt__attente { margin: 5cqw 0 0; }
/* Sans relevé, le Ciel n'a pas de ciel peint : ses lettres claires passent à l'encre du papier. */
.mt[data-style="Ciel"] .mt__haut:has(.mt__meteo--vide) { color: var(--m-texte); text-shadow: none; }