/* ═══════════════ « Météo du Petit Coin » : le bulletin météo des toilettes ═══════════════
 *
 * Servie **seulement** sur cette fiche (`views/product-affiche.liquid`). Un présentateur de dessin animé (`public/images/meteopc/`, engendré une fois, sans un mot) sur un paysage
 * de ville au bord d'une rivière ; **tout ce qui est écrit est du vrai texte** posé dessus par la page, et les pictogrammes des panneaux sont des `<symbol>` dessinés ici
 * (`views/meteopc-picto.liquid`). Tout est ancré à la **feuille** en `cqw`, sauf deux positions verticales en pourcentage de sa hauteur (les panneaux et le ruban) : l'image est
 * recadrée un peu de haut et de bas selon le format, et c'est la rivière, entre les deux, que les panneaux recouvrent.
 *
 * Des couleurs de **produit**, pas de charte (point 6 quater) : toutes ici, en tête, et nulle part ailleurs dans le fichier.
 */
.meteopc, .mp-pictos, .mp-defs {
  --mp-trait: #1e2f4d;           /* le cerne des pictogrammes et le texte des panneaux */
  --mp-blanc: #ffffff;
  --mp-papier: #ffffff;
  --mp-gris: #b9c6d6;
  --mp-bleu: #3aa0e6;
  --mp-bleu-fonce: #17508f;      /* l'en-tête des panneaux et le bandeau du titre */
  --mp-bleu-titre: #1b5fa8;
  --mp-jaune: #ffd23a;
  --mp-orange: #ff9a2e;
  --mp-rouge: #d7263d;           /* le ruban */
  --mp-rouge-bas: #8f1425;
  --mp-vert: #48b86a;
  --mp-carte: rgba(255, 255, 255, .94);
  --mp-ciel: #6fb6ee;            /* le fond avant que l'image charge */
}
.meteopc { position: relative; overflow: hidden; background: var(--mp-ciel); }
.meteopc [hidden] { display: none !important; }
.meteopc p, .meteopc ol { margin: 0; padding: 0; }
/* L'exemple est en pleine couleur (Fred, 8 oct. 2026 : à 40 % d'opacité, la première vue de la fiche était délavée) ; la fabrication le masque quand même. */
.meteopc .affiche-exemple { opacity: 1; }
.meteopc__fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* Les dix dessins : des aplats cernés. Une classe seule par forme (un `<use>` ne voit pas un sélecteur à ancêtre). */
.mp-s { stroke: var(--mp-trait); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.mp-papier { fill: var(--mp-papier); }
.mp-gris { fill: var(--mp-gris); }
.mp-bleu { fill: var(--mp-bleu); }
.mp-jaune { fill: var(--mp-jaune); }
.mp-r { fill: none; stroke: var(--mp-orange); stroke-width: 3.4; stroke-linecap: round; }
.mp-f { fill: none; stroke: var(--mp-trait); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mp-w { fill: none; stroke: var(--mp-trait); stroke-width: 3; stroke-linecap: round; }
.mp-wb { fill: none; stroke: var(--mp-bleu); stroke-width: 3; stroke-linecap: round; }
.mp-wf { stroke: var(--mp-bleu); stroke-width: 2.6; fill: none; }
.mp-a { fill: none; stroke-width: 4; }
.mp-ar1 { stroke: var(--mp-rouge); } .mp-ar2 { stroke: var(--mp-orange); } .mp-ar3 { stroke: var(--mp-jaune); } .mp-ar4 { stroke: var(--mp-vert); }

/* Le titre : un bandeau bleu en haut, « Météo du Petit Coin » en blanc, la ville seule dans un cartouche jaune. */
.meteopc__titre { position: absolute; z-index: 2; top: 4.5cqw; left: 5cqw; right: 5cqw; text-align: center; }
.meteopc__nom {
  display: block; padding: 2.4cqw 3cqw 2.6cqw; background: var(--mp-bleu-titre); color: var(--mp-blanc); border: .9cqw solid var(--mp-blanc); border-radius: 3cqw;
  font-family: "Fredoka", "Inter", sans-serif; font-weight: 600; line-height: 1.05; letter-spacing: .005em; font-size: 9.2cqw; white-space: nowrap;
  box-shadow: 0 .8cqw 1.8cqw rgba(0, 0, 0, .3); text-shadow: 0 .4cqw 0 rgba(0, 0, 0, .22);
}
.meteopc__ville {
  display: inline-block; max-width: 100%; margin-top: -1.2cqw; padding: .8cqw 3.4cqw 1cqw; background: var(--mp-jaune); color: var(--mp-trait); border: .8cqw solid var(--mp-trait); border-radius: 1.6cqw;
  font-family: "Fredoka", "Inter", sans-serif; font-weight: 600; line-height: 1.1; white-space: nowrap; overflow: hidden; text-transform: uppercase; letter-spacing: .04em;
  font-size: calc(6.4cqw * var(--mp-ech, 1)); position: relative; box-shadow: 0 .6cqw 1.2cqw rgba(0, 0, 0, .3);
}

/* Les trois panneaux : sur la rivière, à droite du présentateur. Un en-tête bleu (le jour), le pictogramme, la prévision. */
.meteopc__panneaux {
  position: absolute; z-index: 2; top: 31%; left: 31cqw; right: 3cqw; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8cqw;
}
/* La présentatrice est un peu plus à droite que le présentateur : les panneaux s'écartent pour ne pas lui mordre le visage. */
.meteopc[data-presentateur="Femme"] .meteopc__panneaux { left: 37cqw; }
.meteopc__panneau { display: flex; flex-direction: column; background: var(--mp-carte); border: .6cqw solid var(--mp-blanc); border-radius: 2.2cqw; overflow: hidden; box-shadow: 0 .8cqw 1.8cqw rgba(0, 0, 0, .3); }
.meteopc__jour {
  min-height: 6.6cqw; display: flex; align-items: center; justify-content: center; padding: .8cqw 1cqw; background: var(--mp-bleu-fonce); color: var(--mp-blanc);
  font-family: "Fredoka", "Inter", sans-serif; font-weight: 600; line-height: 1.1; text-align: center; white-space: nowrap; overflow: hidden; font-size: calc(3.1cqw * var(--mp-ech, 1));
}
.meteopc__picto { display: block; width: 76%; height: auto; margin: 1.2cqw auto 0; aspect-ratio: 1; }
.meteopc__texte {
  min-height: 12.6cqw; max-height: 12.6cqw; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; padding: .6cqw 1.2cqw 1.8cqw;
  color: var(--mp-trait); font-family: "Fredoka", "Inter", sans-serif; font-weight: 600; line-height: 1.12; text-align: center; font-size: calc(3cqw * var(--mp-ech, 1)); overflow-wrap: normal;
}

/* Le ruban : rouge, un peu penché, en bas à droite. */
.meteopc__bandeau {
  position: absolute; z-index: 2; right: 3.5cqw; bottom: 6cqw; max-width: 64cqw; max-height: 19cqw; overflow: hidden; padding: 2.2cqw 4.6cqw 2.5cqw; transform: rotate(-2.4deg);
  background: var(--mp-rouge); color: var(--mp-blanc); border: .7cqw solid var(--mp-blanc); border-bottom-color: var(--mp-rouge-bas);
  font-family: "Fredoka", "Inter", sans-serif; font-weight: 600; line-height: 1.12; text-align: center; font-size: calc(4.9cqw * var(--mp-ech, 1)); overflow-wrap: anywhere;
  box-shadow: 0 .8cqw 1.8cqw rgba(0, 0, 0, .38);
}

/* ── Le formulaire ── */
.mp-choix-pres { position: relative; display: flex; gap: 1.2rem; flex-wrap: wrap; }
/* Les boutons radio sont masqués mais restent dans leur boîte : sans parent positionné, ils partaient hors de l'écran et élargissaient la page (+37 px à 390). */
.mp-choix-pres input { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; }
.mp-choix-pres label { display: flex; align-items: center; gap: 1rem; min-height: 4.8rem; padding: .6rem 1.4rem .6rem .6rem; border: .1rem solid rgba(var(--color-foreground), .25); border-radius: 3rem; cursor: pointer; }
.mp-choix-pres img { width: 4.2rem; height: 4.2rem; border-radius: 50%; object-fit: cover; object-position: 20% 30%; }
.mp-choix-pres input:checked + label { border-color: rgb(var(--navy)); box-shadow: 0 0 0 .1rem rgb(var(--navy)); }
.mp-choix-pres input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.mp-pictos { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; margin: .4rem 0 1.2rem; }
.mp-pictos input { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; }
.mp-pictos label { display: flex; align-items: center; justify-content: center; min-height: 4.8rem; padding: .3rem; border: .1rem solid rgba(var(--color-foreground), .22); border-radius: 1rem; background: var(--mp-papier); cursor: pointer; }
.mp-pictos svg { width: 100%; max-width: 4.2rem; height: auto; aspect-ratio: 1; }
.mp-pictos input:checked + label { border-color: rgb(var(--navy)); box-shadow: 0 0 0 .2rem rgb(var(--navy)); }
.mp-pictos input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.mp-panneau-champs .mo-idees { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.mp-panneau-champs .mo-idees[hidden], .affiche__champ .mo-idees[hidden] { display: none; }
.meteopc-champs .mo-idee, .mp-panneau-champs .mo-idee, .mo-idees .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-idees .mo-idee:hover { border-color: rgb(var(--navy)); }
.mo-idees .mo-idee:focus-visible { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.mo-idees .mo-idee[aria-pressed="true"] { border-color: rgb(var(--navy)); box-shadow: 0 0 0 .1rem rgb(var(--navy)); }