/* ============================================================ STYLE.CSS — « Ouvrir la fenêtre ? » - Fond qui se teinte selon la chaleur (variables JS --bg-top/--bg-bottom) - Thème clair / sombre auto selon le coucher de soleil (.dark sur ) ============================================================ */ :root { --ink: #103a5f; --ink-soft: #6b88a3; --accent: #18b1d1; --accent-2: #1197b8; --card: #ffffff; --card-2: #eef6fc; --line: rgba(16, 45, 70, 0.10); --line-2: rgba(16, 45, 70, 0.18); --shadow: 0 6px 22px rgba(16, 55, 90, 0.09); --shadow-sm: 0 2px 10px rgba(16, 55, 90, 0.07); --c-temp: #16b1c9; --c-feel: #2fae74; --c-hum: #3b8fd9; --c-wind: #8a7bd8; --bg-top: #d8ecff; --bg-bottom: #f3f9ff; --display: "Noto Sans", system-ui, sans-serif; --body: "Noto Sans", system-ui, sans-serif; } html.dark { --ink: #e9f2f9; --ink-soft: #8aa1b6; --accent: #45d2ef; --accent-2: #38c3e0; --card: #15212f; --card-2: #1a2a3b; --line: rgba(255, 255, 255, 0.10); --line-2: rgba(255, 255, 255, 0.18); --shadow: 0 6px 22px rgba(0, 0, 0, 0.45); --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4); --c-temp: #3fd0e6; --c-feel: #4cc98c; --c-hum: #5aa6ed; --c-wind: #a99af0; } * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 58%) fixed; color: var(--ink); font-family: var(--body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; padding: clamp(18px, 5vw, 44px) 16px 44px; transition: background 0.7s ease, color 0.4s ease; } a { color: var(--accent-2); } svg { display: block; } .wrap { max-width: 880px; margin: 0 auto; } /* ─── Masthead ──────────────────────────────────────────────── */ .masthead { margin-bottom: 24px; position: relative; } .kicker { font-family: var(--body); font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 8px; } h1 { font-family: var(--display); font-weight: 800; font-size: clamp(38px, 8.5vw, 74px); line-height: 1.0; letter-spacing: -0.02em; color: var(--ink); } h1 .q { color: var(--accent); } .sub { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: clamp(19px, 3vw, 26px); margin-top: 10px; color: var(--ink); } .sub svg { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; } .meta { font-size: 12.5px; color: var(--ink-soft); margin-top: 5px; font-weight: 600; } .thermo-rule { height: 5px; border-radius: 5px; margin: 18px 0 4px; background: linear-gradient(90deg, #3f7fd6 0%, #18b1d1 24%, #6ec98a 48%, #f4cb52 64%, #f08a3c 80%, #e0492a 100%); } /* ─── Barre de localisation ─────────────────────────────────── */ .locbar { margin-top: 20px; } .search-wrap { position: relative; display: flex; gap: 10px; align-items: stretch; max-width: 560px; } .field { flex: 1; position: relative; display: flex; align-items: center; background: var(--card); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow-sm); padding-left: 14px; } .field svg { width: 20px; height: 20px; color: var(--ink-soft); flex-shrink: 0; } .field input { flex: 1; border: none; background: none; outline: none; font-family: var(--body); font-size: 16px; color: var(--ink); padding: 14px 14px 14px 10px; } .field input::placeholder { color: var(--ink-soft); } .geo-btn { flex-shrink: 0; width: 52px; border: 1px solid var(--line-2); background: var(--card); border-radius: 14px; cursor: pointer; color: var(--accent-2); box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; } .geo-btn svg { width: 22px; height: 22px; } .geo-btn:hover { color: var(--accent); } .suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; list-style: none; background: var(--card); border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); display: none; } .suggest.is-open { display: block; } .suggest li { padding: 12px 16px; cursor: pointer; font-size: 14px; color: var(--ink); border-bottom: 1px solid var(--line); } .suggest li:last-child { border-bottom: none; } .suggest li:hover { background: var(--card-2); color: var(--accent-2); } .suggest li span { color: var(--ink-soft); font-size: 12px; } .link-btn { background: none; border: none; color: var(--accent-2); font-family: var(--body); font-size: 14px; font-weight: 700; cursor: pointer; padding: 12px 0 0; text-decoration: underline; text-underline-offset: 3px; } .manual { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; } .manual[hidden] { display: none; } .manual input { width: 150px; font-family: var(--body); font-size: 14px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 12px; color: var(--ink); background: var(--card); outline: none; } .btn { font-family: var(--body); font-size: 14px; font-weight: 800; padding: 12px 22px; border-radius: 12px; border: none; cursor: pointer; background: var(--accent); color: #fff; } .btn:hover { background: var(--accent-2); } .msg { margin-top: 12px; max-width: 560px; font-size: 14px; font-weight: 600; color: #c0392b; background: #fbe9e7; border: 1px solid #e8a99f; border-radius: 12px; padding: 12px 16px; } html.dark .msg { background: rgba(192,57,43,0.18); border-color: rgba(230,120,100,0.5); color: #ff9b8a; } .msg[hidden] { display: none; } /* ─── Statut (pièce maîtresse) ──────────────────────────────── */ .status { display: flex; align-items: center; gap: 20px; border-radius: 22px; padding: clamp(18px, 3.5vw, 28px); margin: 24px 0 20px; color: #fff; box-shadow: var(--shadow); } .status--open { background: linear-gradient(105deg, #2bc7a4 0%, #17a8c6 100%); } .status--closed { background: linear-gradient(105deg, #ffa24d 0%, #ef4f3a 100%); } .status__badge { width: 66px; height: 66px; border-radius: 50%; flex-shrink: 0; background: rgba(255,255,255,0.22); display: flex; align-items: center; justify-content: center; } .status__badge svg { width: 32px; height: 32px; color: #fff; } .status__big { font-family: var(--display); font-weight: 800; font-size: clamp(24px, 5vw, 36px); line-height: 1.0; } .status__sub { font-size: 14.5px; line-height: 1.4; margin-top: 7px; opacity: 0.95; } /* ─── Réglette intérieure (stepper − / +) ───────────────────── */ .control { display: flex; flex-direction: column; gap: 14px; background: var(--card-2); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin-bottom: 20px; } .control > label { font-size: 14px; color: var(--ink-soft); font-weight: 700; text-align: center; } .stepper { display: flex; align-items: center; justify-content: center; gap: 22px; } .step-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card); color: var(--accent-2); font-size: 26px; font-weight: 700; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); user-select: none; -webkit-tap-highlight-color: transparent; transition: transform .1s, border-color .15s; } .step-btn:hover { border-color: var(--accent); } .step-btn:active { transform: scale(0.92); } .control .val { font-family: var(--display); font-weight: 800; font-size: 30px; color: var(--accent-2); min-width: 116px; text-align: center; line-height: 1; } .control input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: var(--line-2); outline: none; cursor: pointer; } .control input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); border: 3px solid var(--card); box-shadow: var(--shadow-sm); cursor: pointer; } .control input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); border: 3px solid var(--card); box-shadow: var(--shadow-sm); cursor: pointer; } /* ─── Mini-bandeau de statut fixe ───────────────────────────── */ .statusbar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; gap: 10px; padding: 11px 16px; color: #fff; font-family: var(--body); font-size: 14px; transform: translateY(-100%); transition: transform .25s ease; box-shadow: 0 2px 14px rgba(0,0,0,0.18); } .statusbar.is-visible { transform: translateY(0); } .statusbar.sb--open { background: linear-gradient(105deg, #2bc7a4 0%, #17a8c6 100%); } .statusbar.sb--closed { background: linear-gradient(105deg, #ffa24d 0%, #ef4f3a 100%); } .statusbar .sb-ic { display: inline-flex; } .statusbar .sb-ic svg { width: 18px; height: 18px; } .statusbar .sb-txt { font-family: var(--display); font-weight: 800; letter-spacing: 0.01em; } .statusbar .sb-temp { margin-left: auto; font-weight: 600; font-size: 12.5px; opacity: 0.95; white-space: nowrap; } @media (max-width: 400px) { .statusbar .sb-temp { font-size: 11px; } } /* ─── Stats ─────────────────────────────────────────────────── */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; } .stat { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; box-shadow: var(--shadow-sm); } .chip { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .chip svg { width: 23px; height: 23px; } .chip--temp { background: #d6f3f7; color: var(--c-temp); } .chip--feel { background: #d8f3e4; color: var(--c-feel); } .chip--hum { background: #dcebfb; color: var(--c-hum); } .chip--wind { background: #e7e2f9; color: var(--c-wind); } html.dark .chip--temp { background: rgba(63,208,230,0.16); } html.dark .chip--feel { background: rgba(76,201,140,0.16); } html.dark .chip--hum { background: rgba(90,166,237,0.16); } html.dark .chip--wind { background: rgba(169,154,240,0.16); } .stat .k { font-size: 12px; color: var(--ink-soft); font-weight: 700; } .stat .v { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.05; margin-top: 2px; } .stat--temp .v { color: var(--c-temp); } .stat--feel .v { color: var(--c-feel); } .stat--hum .v { color: var(--c-hum); } .stat--wind .v { color: var(--c-wind); } /* ─── Courbe ────────────────────────────────────────────────── */ .curve { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 14px 12px; margin-bottom: 20px; box-shadow: var(--shadow-sm); } .curve .ttl { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px 12px; flex-wrap: wrap; } .curve .ttl b { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink); } .curve .ttl b span { color: var(--ink-soft); font-weight: 600; font-size: 13px; } .curve .ttl .lg { font-size: 12px; color: var(--ink-soft); display: flex; align-items: center; gap: 7px; } .curve .ttl .lg i { width: 18px; height: 0; border-top: 2px dashed var(--accent); display: inline-block; } /* ─── Tableau ───────────────────────────────────────────────── */ .ftable-scroll { max-height: 460px; overflow-y: auto; border-radius: 16px; box-shadow: var(--shadow-sm); border: 1px solid var(--line); } .ftable { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--card); } .ftable thead th { position: sticky; top: 0; z-index: 2; background: linear-gradient(100deg, #18b1d1, #45c98e); color: #fff; font-family: var(--body); font-weight: 800; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; padding: 12px 8px; text-align: center; } .ftable td { padding: 9px 8px; text-align: center; border-bottom: 1px solid var(--line); color: var(--ink); } .ftable td.h { text-align: left; color: var(--ink-soft); font-weight: 700; } .ftable .hour-cell { display: flex; align-items: center; gap: 8px; } .ftable .hour-cell svg { width: 16px; height: 16px; flex-shrink: 0; } .ftable .ic-sun { color: #f3a83c; } .ftable .ic-moon { color: #7e8cc4; } .ftable tr.daysep td { background: var(--card-2); color: var(--accent-2); font-family: var(--body); font-weight: 800; text-align: left; text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 14px; } .tempcell { font-weight: 800; border-radius: 8px; } .fen { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; justify-content: center; } .fen svg { width: 15px; height: 15px; } .fen--o { color: #1aa37e; } .fen--c { color: #e0492a; } /* ─── Divers ────────────────────────────────────────────────── */ .note { display: flex; gap: 12px; align-items: flex-start; background: var(--card-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-top: 16px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; } .note svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; margin-top: 1px; } .loading { padding: 44px; text-align: center; color: var(--ink-soft); font-weight: 700; } .error { padding: 22px; background: #fbe9e7; border: 1px solid #e8a99f; border-radius: 16px; color: #c0392b; font-size: 14px; line-height: 1.6; } html.dark .error { background: rgba(192,57,43,0.16); border-color: rgba(230,120,100,0.5); color: #ff9b8a; } .error b { color: var(--ink); } @media (max-width: 768px) { .stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .status { flex-direction: column; text-align: center; } } /* ─── Insights : créneau d'aération + confort de la nuit ────── */ .insights { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; } .insight { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow-sm); } .insight > svg { width: 24px; height: 24px; flex-shrink: 0; color: var(--accent); margin-top: 1px; } .insight-k { font-size: 12px; color: var(--ink-soft); font-weight: 700; } .insight-v { font-family: var(--display); font-weight: 800; font-size: 18px; line-height: 1.15; margin-top: 3px; color: var(--ink); } .insight-s { font-size: 12px; color: var(--ink-soft); margin-top: 4px; line-height: 1.35; } /* Badge confort de la nuit — coloration selon la minimale */ .insight--night.night-cool > svg { color: #1aa37e; } .insight--night.night-mild > svg { color: #cf8a1a; } .insight--night.night-hot > svg { color: #e0492a; } .night-cool .insight-v { color: #1aa37e; } .night-mild .insight-v { color: #cf8a1a; } .night-hot .insight-v { color: #e0492a; } @media (max-width: 620px) { .insights { grid-template-columns: 1fr; } } /* ─── Bouton Partager ───────────────────────────────────────── */ .share-btn { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); border-radius: 12px; padding: 9px 14px; font-family: var(--body); font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: var(--shadow-sm); } .share-btn svg { width: 18px; height: 18px; color: var(--accent); } .share-btn:hover { border-color: var(--accent); } @media (max-width: 480px) { .share-btn span { display: none; } .share-btn { padding: 9px; } } /* ─── Affiliation (section discrète, adaptée à la météo) ────── */ .affil { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); } .affil-head { font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--ink); margin-bottom: 12px; } .affil-head span { font-family: var(--body); font-weight: 600; font-size: 12px; color: var(--ink-soft); } .affil-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .affil-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 14px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm); transition: border-color .15s, transform .15s; } .affil-card:hover { border-color: var(--accent); transform: translateY(-2px); } .affil-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--card-2); display: flex; align-items: center; justify-content: center; color: var(--accent); } .affil-ic svg { width: 20px; height: 20px; } .affil-name { font-size: 13px; font-weight: 700; line-height: 1.25; } .affil-cta { font-size: 12px; font-weight: 700; color: var(--accent-2); } .affil-legal { font-size: 11px; color: var(--ink-soft); margin-top: 12px; line-height: 1.4; } @media (max-width: 620px) { .affil-grid { grid-template-columns: 1fr 1fr; } }