/* METEO-001 — la météo du Manoir, à la manière de MSN Météo : ciel en dégradé, cartes de verre, pastille jaune.
   Deux thèmes (clair le jour, sombre la nuit) et trois formats : tv (scène 1920 × 1080, le projecteur du salon),
   mobile (colonne de 1080, le lien envoyé par Alfred) et carte (1080 × 1350, la capture pour WhatsApp). */
@font-face { font-family: "Manoir Sans"; src: url("fonts/NunitoSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manoir Sans"; src: url("fonts/NunitoSans-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --page: linear-gradient(#C4DCFF 0, #D9E9FF 320px, #E4F0FF 100%);
  --texte: #101114; --doux: rgba(28, 30, 38, .62); --tres-doux: rgba(28, 30, 38, .42);
  --verre: rgba(255, 255, 255, .8); --verre-jour: rgba(255, 255, 255, .58); --verre-fort: linear-gradient(#FFFFFF 0%, rgba(255, 255, 255, .84) 64%);
  --trait: rgba(20, 40, 90, .1); --piste: #E3E7EE; --jaune: #FFD02C; --sur-jaune: #363636; --bleu: #6994FA; --bleu-fort: #2F6BED;
  --zone-pluie: rgba(120, 170, 255, .2); --ici: rgba(255, 255, 255, .62); --bande: #BBDCFF; --sur-bande: #0E1B33; --goutte: #2F6BED;
  --ombre: 0 10px 30px rgba(40, 80, 160, .08);
}
html.t-sombre {
  --page: linear-gradient(#204C84 0, #162544 320px, #14203D 640px);
  --texte: #FFFFFF; --doux: rgba(255, 255, 255, .72); --tres-doux: rgba(255, 255, 255, .46);
  --verre: rgba(255, 255, 255, .06); --verre-jour: rgba(255, 255, 255, .05); --verre-fort: linear-gradient(181.92deg, rgba(255, 255, 255, .11) 1.75%, rgba(255, 255, 255, .085) 43%, rgba(255, 255, 255, .065) 71%);
  --trait: rgba(255, 255, 255, .11); --piste: rgba(255, 255, 255, .13); --bleu: #7FA6FF; --bleu-fort: #8DB6FF;
  --zone-pluie: rgba(90, 150, 255, .2); --ici: rgba(255, 255, 255, .07); --bande: #25508C; --sur-bande: #FFFFFF; --goutte: #FFFFFF;
  --ombre: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--page) fixed; background-color: #D9E9FF; color: var(--texte); font-family: "Manoir Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; font-size: 22px; line-height: 1.25; -webkit-font-smoothing: antialiased; }
html.t-sombre body { background-color: #14203D; }
h2, h3, p, dl, dd { margin: 0; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; text-align: left; }
button:disabled { cursor: default; }
.mg-defs { position: absolute; }
.ic { display: block; width: 64px; height: 64px; overflow: visible; }
.verre { background: var(--verre); border-radius: 18px; box-shadow: var(--ombre); }
.attente, .panne { margin: auto; padding: 60px; font-size: 30px; color: var(--doux); text-align: center; grid-column: 1 / -1; }
.panne b { display: block; color: var(--texte); font-size: 38px; margin-bottom: 10px; }

/* ── En-tête ── */
.entete { grid-area: entete; display: flex; align-items: center; gap: 26px; min-width: 0; }
.lieu { display: flex; align-items: center; gap: 12px; font-size: 28px; white-space: nowrap; }
.lieu svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.lieu b { font-weight: 700; } .lieu span { color: var(--doux); }
.onglets { display: flex; gap: 12px; flex: 1; min-width: 0; }
.onglet { height: 50px; padding: 0 22px; border-radius: 25px; background: var(--verre-jour); color: var(--doux); font-size: 21px; white-space: nowrap; transition: background .25s, color .25s; }
.onglet-choisi { background: var(--jaune); color: var(--sur-jaune); font-weight: 700; }
.horloge { margin-left: auto; text-align: right; white-space: nowrap; font-size: 21px; color: var(--doux); }
.horloge b { color: var(--texte); font-size: 30px; font-weight: 700; margin-left: 14px; }

/* ── Carte du haut ── */
.hero { grid-area: hero; padding: 24px 28px; display: flex; flex-direction: column; min-width: 0; }
.h-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.h-tete h2 { font-size: 26px; font-weight: 700; } .h-heure { color: var(--doux); font-size: 21px; }
.h-vent { padding: 9px 18px; border-radius: 22px; background: rgba(105, 148, 250, .16); color: var(--bleu-fort); font-size: 19px; white-space: nowrap; }
.h-centre { display: flex; align-items: center; gap: 18px; margin-top: 10px; }
.h-centre .ic { width: 150px; height: 150px; flex: none; }
.h-temp { display: flex; align-items: flex-start; line-height: 1; } .h-temp b { font-size: 128px; font-weight: 700; letter-spacing: -4px; } .h-temp sup { font-size: 34px; margin-top: 18px; margin-left: 6px; }
.h-plage { margin-left: auto; display: flex; flex-direction: column; gap: 8px; font-size: 30px; font-weight: 700; text-align: right; }
.h-plage span::before { font-size: 20px; margin-right: 8px; } .h-max::before { content: "▲"; color: #F2740C; } .h-min::before { content: "▼"; color: var(--bleu); } .h-min { color: var(--doux); }
.h-cond { font-size: 34px; font-weight: 700; margin-top: 2px; }
.h-mesures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 14px; margin-top: auto; }
.h-mesures div { min-width: 0; }
.h-mesures dt { color: var(--doux); font-size: 18.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-mesures dd { font-size: 24px; font-weight: 700; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.h-fleche { width: 22px; height: 22px; fill: currentColor; } .h-point { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }

/* ── En bref ── */
.bref { grid-area: bref; padding: 20px 28px; display: flex; flex-direction: column; min-width: 0; }
.bref h3 { font-size: 21px; font-weight: 400; color: var(--doux); }
.b-phrase { font-size: 26px; font-weight: 700; margin-top: 4px; }
.b-sous { color: var(--doux); font-size: 19px; margin-top: auto; }
.b-barres { display: flex; align-items: flex-end; gap: 8px; height: 62px; margin: 8px 0 30px; }
.b-col { flex: 1; height: 100%; display: flex; align-items: flex-end; position: relative; }
.b-col i { width: 100%; border-radius: 6px 6px 3px 3px; transform-origin: bottom; }
.b-pluie { background: linear-gradient(#2F52EC, #93A6FF); } .b-sec { background: var(--piste); }
.b-col em { position: absolute; top: 100%; left: 0; margin-top: 4px; font-style: normal; font-size: 15px; color: var(--tres-doux); }

/* ── Bande des jours ── */
.jours { grid-area: jours; display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.jc { flex: 1; min-width: 0; height: 138px; padding: 14px 16px; border-radius: 18px; background: var(--verre-jour); display: flex; flex-direction: column; transition: background .25s; }
.jc-choisi { height: 150px; border-radius: 18px 18px 0 0; background: var(--verre-fort); }
/* width explicite : dans un <button>, les anciens Chromium (moteur de capture) n'étirent pas les enfants. */
.jc-tete, .jc-corps { width: 100%; }
.jc-tete { display: flex; justify-content: space-between; align-items: baseline; font-size: 20px; color: var(--doux); white-space: nowrap; }
.jc-tete b { font-size: 22px; font-weight: 700; } .jc-choisi .jc-tete, .jc-choisi .jc-tete b { color: var(--texte); }
.jc-corps { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; flex: 1; min-height: 0; }
.jc-corps .ic { width: 70px; height: 70px; flex: none; }
.jc-temp { display: flex; flex-direction: column; align-items: flex-end; } .jc-temp b { font-size: 28px; font-weight: 700; } .jc-temp em { font-style: normal; font-size: 25px; color: var(--doux); }
.jc-donnee { display: flex; flex-direction: column; min-width: 0; } .jc-donnee b { font-size: 30px; font-weight: 700; white-space: nowrap; } .jc-donnee b i { font-style: normal; font-weight: 400; font-size: 18px; color: var(--doux); margin-left: 4px; }
.jc-donnee em { font-style: normal; font-size: 18px; color: var(--doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jc-tube { width: 26px; height: 70px; border-radius: 13px; background: var(--piste); display: flex; align-items: flex-end; overflow: hidden; flex: none; }
.jc-tube i { width: 100%; border-radius: 13px; background: linear-gradient(#2F52EC, #7F97FF); min-height: 0; }
.jc-hier { opacity: .62; }

/* ── Panneau du graphe ── */
.panneau { grid-area: panneau; background: var(--verre-fort); border-radius: 18px; padding: 14px 20px 12px; display: flex; flex-direction: column; min-width: 0; box-shadow: var(--ombre); }
.p-tete { display: flex; align-items: baseline; gap: 16px; height: 44px; } .p-tete h2 { font-size: 26px; font-weight: 700; } .p-sous { color: var(--doux); font-size: 20px; }
.p-legende { margin-left: auto; color: var(--doux); font-size: 18px; display: flex; gap: 18px; align-items: center; }
.p-legende i { display: inline-block; width: 26px; height: 5px; border-radius: 3px; margin-right: 7px; vertical-align: middle; }
.p-graphe { position: relative; flex: 1; min-height: 0; }
.graphe, .pluie { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pluie { pointer-events: none; }
.graphe text { font-family: inherit; fill: var(--texte); }
.g-fond { fill: none; } .g-ligne { stroke: var(--trait); stroke-width: 1; } .g-colonne { stroke: var(--trait); stroke-width: 1; stroke-dasharray: 4 5; }
.g-axe { font-size: 19px; fill: var(--doux) !important; } .g-date { font-size: 18px; fill: var(--doux) !important; }
.g-heure { font-size: 21px; fill: var(--doux) !important; } .g-ici { fill: var(--texte) !important; font-weight: 700; }
.g-val { font-size: 23px; font-weight: 700; } .g-min { font-size: 20px; fill: var(--doux) !important; }
.g-zone-pluie { fill: var(--zone-pluie); } .g-maintenant { fill: var(--ici); }
.g-crete { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: 2.5; } html.t-sombre .g-crete { stroke: rgba(255, 255, 255, .45); }
.g-bande { fill: var(--bande); } .g-bande-val { font-size: 19px; font-weight: 700; fill: var(--sur-bande) !important; } .g-goutte { fill: var(--goutte); }
.g-hachure-trait { fill: var(--trait); }
.g-soleil-heure { font-size: 20px; fill: var(--doux) !important; } .g-horizon { stroke: #F2740C; stroke-width: 2.4; stroke-linecap: round; } .g-fleche { fill: none; stroke: var(--bleu-fort); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.g-cumul { fill: none; stroke: #5CC3FF; stroke-width: 3; } .g-cumul-val { font-size: 19px; fill: var(--doux) !important; } .g-vide { font-size: 24px; fill: var(--doux) !important; }
.g-vent-ligne { fill: none; stroke: #6DB3FF; stroke-width: 2; } .g-rafales { fill: none; stroke: #5CA8FF; stroke-width: 3.2; stroke-linecap: round; } .g-vent-fleche { fill: var(--texte); }
.g-hum-ligne { fill: none; stroke: var(--bleu); stroke-width: 3; }

/* ── Cartes de conditions ── */
.conditions { grid-area: cond; display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; min-width: 0; }
.cc { background: var(--verre); border-radius: 18px; padding: 16px 20px 16px; display: flex; flex-direction: column; min-width: 0; box-shadow: var(--ombre); }
.cc h3 { font-size: 20.5px; font-weight: 400; }
.cc-corps { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; }
.cc-corps > svg { height: 124px; width: auto; flex: none; max-width: 100%; }
.cc-titre { font-size: 22.5px; font-weight: 700; display: flex; align-items: center; gap: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-texte { font-size: 17.5px; color: var(--doux); margin-top: 3px; height: 44px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cc-chiffres { display: flex; flex-direction: column; gap: 6px; min-width: 0; text-align: left; }
.cc-chiffres b { font-size: 36px; font-weight: 700; line-height: 1; } .cc-chiffres i { font-style: normal; font-size: 17px; margin-left: 5px; color: var(--doux); }
.cc-chiffres span { display: block; font-size: 16px; color: var(--doux); white-space: nowrap; }
.cc-ressentie .cc-corps, .cc-pression .cc-corps { flex-direction: column; align-items: stretch; justify-content: center; gap: 14px; }
.cc-ressentie .cc-corps > svg, .cc-pression .cc-corps > svg { height: 40px; width: 100%; }
.cc-ressentie .cc-chiffres, .cc-pression .cc-chiffres { flex-direction: row; justify-content: space-between; }
.cc-pression .cc-chiffres div:last-child b { font-size: 24px; line-height: 36px; }
.cc-uv .cc-corps, .cc-air .cc-corps, .cc-visibilite .cc-corps, .cc-precipitations .cc-corps, .cc-nuages .cc-corps { justify-content: center; }
.pastille { width: 24px; height: 24px; border-radius: 50%; flex: none; display: inline-flex; background: #F2B930; } .p-hausse { background: #F27A2A; } .p-baisse { background: #4C9BE8; }
.pastille svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.c-piste { fill: var(--piste); } .c-plein { fill: #A99BFF; } .c-point { fill: #5EA2F5; stroke: #fff; stroke-width: 3; } .c-violet { fill: #8F7BFF; }
.e-fond { fill: var(--piste); opacity: .55; } .e-bord { fill: none; stroke: var(--trait); stroke-width: 2; } .e-vague { fill: #6C8FF5; } .e-v2 { fill: #9DB6FF; opacity: .7; }
.e-val { font-size: 30px; font-weight: 700; fill: var(--texte); } .e-unite { font-size: 17px; } .e-sous { font-size: 13.5px; font-weight: 700; fill: var(--texte); }
.r-anneau { fill: none; stroke: var(--piste); stroke-width: 7; } .r-source { fill: none; stroke: #6DB3FF; stroke-width: 7; stroke-linecap: round; } .r-pt { font-size: 15px; fill: var(--doux); } .r-aiguille { fill: #6DB3FF; }
.b-fond { fill: var(--piste); } .b-plein { fill: var(--bleu); }
.j-piste { fill: none; stroke: var(--piste); stroke-width: 9; stroke-linecap: round; } .j-seg { fill: none; stroke-width: 9; stroke-linecap: round; } .j-repere { stroke: #fff; stroke-width: 3; } .j-val { font-size: 44px; fill: var(--texte); }
.py-on { fill: #2E9E55; } .py-off { fill: var(--piste); } .py-val { font-size: 32px; font-weight: 700; fill: var(--texte); } .py-unite { font-size: 17px; font-weight: 400; }
.n-fond { fill: #CFE4FF; } html.t-sombre .n-fond { fill: #2B4A7C; } .n-nuage { fill: #fff; opacity: .93; } html.t-sombre .n-nuage { opacity: .8; } .n-val { font-size: 26px; font-weight: 700; fill: #17233F; stroke: rgba(255, 255, 255, .85); stroke-width: 5px; paint-order: stroke; stroke-linejoin: round; }
.s-piste { fill: none; stroke: var(--piste); stroke-width: 9; stroke-linecap: round; } .s-fait { fill: none; stroke-width: 9; stroke-linecap: round; } .s-horizon { stroke: var(--trait); stroke-width: 2; }
.s-astre { fill: #F7A531; stroke: #fff; stroke-width: 3; } .s-couche { fill: var(--piste); }
.l-ombre { fill: var(--piste); } .l-clair { fill: #F3C24A; }
.cc-soleil .cc-chiffres b, .cc-lune .cc-chiffres b { font-size: 29px; }
.cc-soleil .cc-corps > svg { height: 104px; } .cc-lune .cc-corps > svg { height: 110px; }
.pied { grid-area: pied; color: var(--tres-doux); font-size: 16px; text-align: right; }

/* ── Format tv : une scène fixe, mise à l'échelle par app.js ── */
html.f-tv, html.f-tv body { height: 100%; overflow: hidden; }
html.f-tv body { display: flex; align-items: center; justify-content: center; }
html.f-tv .scene { width: 1920px; height: 1080px; flex: none; padding: 30px 36px 26px; display: grid; grid-template-columns: 500px 1fr; column-gap: 22px;
  grid-template-rows: 80px 150px 280px 228px 286px; grid-template-areas: "entete entete" "hero jours" "hero panneau" "bref panneau" "cond cond"; }
html.f-tv .entete { padding-bottom: 16px; } html.f-tv .bref { margin-top: 20px; } html.f-tv .conditions { margin-top: 20px; } html.f-tv .pied { display: none; }

/* ── Formats mobile et carte : une colonne de 1080 ── */
html.f-mobile .scene, html.f-carte .scene { width: 1080px; padding: 28px; display: flex; flex-direction: column; gap: 20px; transform-origin: 0 0; }
html.f-mobile .entete, html.f-carte .entete { flex-wrap: wrap; row-gap: 18px; }
html.f-mobile .onglets, html.f-carte .onglets { order: 3; flex: none; width: 100%; overflow-x: auto; scrollbar-width: none; }
html.f-mobile .hero, html.f-carte .hero { height: auto; padding: 26px 32px 28px; } html.f-mobile .h-mesures, html.f-carte .h-mesures { margin-top: 22px; } html.f-mobile .h-centre .ic, html.f-carte .h-centre .ic { width: 170px; height: 170px; }
html.f-mobile .h-mesures dt, html.f-carte .h-mesures dt { font-size: 21px; } html.f-mobile .h-mesures dd, html.f-carte .h-mesures dd { font-size: 28px; }
html.f-mobile .bref { height: 232px; }
html.f-mobile .jours, html.f-carte .jours { gap: 10px; margin-bottom: -20px; }
html.f-mobile .panneau { height: 560px; flex: none; } html.f-carte .panneau { height: 536px; flex: none; }
html.f-mobile .conditions { grid-template-columns: repeat(2, 1fr); } html.f-mobile .cc { height: 292px; }
html.f-mobile .cc-titre { font-size: 26px; } html.f-mobile .cc-texte { font-size: 20px; height: 50px; } html.f-mobile .cc h3 { font-size: 23px; }
html.f-carte, html.f-carte body { overflow: hidden; }
html.f-carte .scene { height: 1350px; overflow: hidden; }
html.f-carte .onglets, html.f-carte .bref, html.f-carte .conditions { display: none; }
html.f-carte .pied { margin-top: auto; }

/* ── Animations ── */
@keyframes monte { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes rideau { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pousse { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes flotte { 0%, 100% { transform: translateX(-1.6px); } 50% { transform: translateX(1.6px); } }
@keyframes respire { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes tombe { 0% { transform: translateY(-7px); opacity: 0; } 25% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(7px); opacity: 0; } }
@keyframes neige { 0% { transform: translate(-2px, -6px) rotate(0); opacity: 0; } 25% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(2px, 6px) rotate(80deg); opacity: 0; } }
@keyframes foudre { 0%, 58%, 100% { opacity: 1; } 62% { opacity: .15; } 66% { opacity: 1; } 70% { opacity: .3; } 74% { opacity: 1; } }
@keyframes houle { from { transform: translateX(0); } to { transform: translateX(-60px); } }
@keyframes girouette { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes derive { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(5px); } }
.ic.anime .a-nuage { animation: flotte 6s ease-in-out infinite; }
.ic.anime .a-soleil, .ic.anime .a-lune { animation: respire 5s ease-in-out infinite; }
.ic.anime .a-goutte { animation: tombe 1.5s linear infinite; } .ic.anime .a-flocon { animation: neige 3.2s linear infinite; }
.ic.anime .a-d2 { animation-delay: -.5s; } .ic.anime .a-d3 { animation-delay: -1s; }
.ic.anime .a-eclair { animation: foudre 3.4s linear infinite; } .ic.anime .a-brume { animation: flotte 7s ease-in-out infinite; }
.e-v1 { animation: houle 3.6s linear infinite; } .e-v2 { animation: houle 5.4s linear infinite reverse; }
.r-aiguille { animation: girouette 4.5s ease-in-out infinite; }
.n-d1 { animation: derive 9s ease-in-out infinite; } .n-d2 { animation: derive 12s ease-in-out infinite reverse; } .n-d3 { animation: derive 15s ease-in-out infinite; }
.entree .hero, .entree .bref, .entree .panneau, .entree .jc, .entree .cc { animation: monte .55s cubic-bezier(.2, .8, .2, 1) both; }
.entree .bref { animation-delay: .08s; } .entree .panneau { animation-delay: .12s; } .entree .cc { animation-delay: calc(.2s + var(--i, 0) * .06s); }
.entree .g-rideau { animation: rideau 1.2s cubic-bezier(.3, .7, .2, 1) .25s both; }
.entree .g-pousse, .entree .g-pousse-plage, .entree .b-plein, .entree .b-col i { animation: pousse .7s cubic-bezier(.2, .8, .2, 1) both; }
html.fige *, html.fige *::before { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }