:root {
 --bg1: #dbeafe;
 --bg2: #f8fafc;
 --text: #0f172a;
 --muted: #64748b;
 --primary: #2563eb;
 --primary-soft: rgba(37,99,235,.10);
 --card: rgba(255,255,255,.88);
 --border: rgba(148,163,184,.25);
 --shadow: 0 24px 60px rgba(15,23,42,.10);
}

* { box-sizing: border-box; }

body {
 margin: 0;
 min-height: 100vh;
 font-family: Inter, Arial, sans-serif;
 color: var(--text);
 background:
 radial-gradient(circle at top left, rgba(37,99,235,.22), transparent 30rem),
 radial-gradient(circle at top right, rgba(14,165,233,.15), transparent 28rem),
 linear-gradient(135deg, var(--bg1), var(--bg2));
}

.site {
 width: min(1220px, calc(100% - 32px));
 margin: 0 auto;
 padding: 24px 0 48px;
}

.topbar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 18px;
 margin-bottom: 24px;
}

.brand {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 color: var(--text);
 text-decoration: none;
 font-weight: 800;
 font-size: 18px;
}

.brand-icon {
 width: 42px;
 height: 42px;
 display: grid;
 place-items: center;
 border-radius: 15px;
 background: var(--card);
 box-shadow: var(--shadow);
}

.search {
 display: flex;
 gap: 10px;
 padding: 8px;
 border-radius: 18px;
 background: rgba(255,255,255,.55);
 border: 1px solid var(--border);
 backdrop-filter: blur(12px);
}

select, button {
 border: 0;
 border-radius: 13px;
 padding: 12px 14px;
 font-size: 15px;
}

select {
 min-width: 230px;
 background: white;
 color: var(--text);
}

button {
 background: var(--primary);
 color: white;
 font-weight: 700;
 cursor: pointer;
}

.hero-card, .panel, .stat-card, .update-info {
 background: var(--card);
 border: 1px solid var(--border);
 box-shadow: var(--shadow);
 backdrop-filter: blur(16px);
}

.hero-card {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 28px;
 padding: 34px;
 border-radius: 34px;
 margin-bottom: 22px;
}

.eyebrow {
 margin: 0 0 8px;
 color: #2563eb;
 font-size: 20px;
 font-weight: 800;
 text-transform: none;
 letter-spacing: 0;
}

.eyebrow-small {
 margin: 0 0 6px;
 color: var(--primary);
 font-size: 13px;
 font-weight: 900;
 text-transform: uppercase;
 letter-spacing: .10em;
}

h1 {
 margin: 0;
 font-size: clamp(36px, 4vw, 52px);
 line-height: 1.05;
 letter-spacing: -1px;
 font-weight: 900;
}

.subtitle {
 margin: 14px 0 0;
 color: var(--muted);
 font-size: 18px;
}

.current-weather {
 display: flex;
 align-items: center;
 gap: 22px;
 min-width: 360px;
 justify-content: flex-end;
}

.big-icon { font-size: 86px; }

.temperature {
 font-size: 78px;
 line-height: .9;
 font-weight: 950;
 letter-spacing: -.06em;
}

.condition { margin-top: 10px; font-size: 20px; font-weight: 800; }
.feels { color: var(--muted); margin-top: 4px; }

.error-box {
 max-width: 420px;
 padding: 18px;
 border-radius: 20px;
 background: #fff7ed;
 border: 1px solid #fed7aa;
 color: #9a3412;
}

.error-box p { margin-bottom: 0; }

.update-info {
 margin: 0 0 22px;
 padding: 20px 24px;
 border-left: 5px solid var(--primary);
 border-radius: 24px;
 color: #334155;
}

.update-info p {
 margin: 0;
 font-size: 17px;
 line-height: 1.7;
}

.update-info strong { color: #0f172a; }

.stats-grid {
 display: grid;
 grid-template-columns: repeat(6, 1fr);
 gap: 14px;
 margin-bottom: 22px;
}

.stat-card {
 padding: 20px;
 border-radius: 24px;
}

.stat-card span {
 display: block;
 color: var(--muted);
 font-size: 14px;
 margin-bottom: 10px;
}

.stat-card strong { font-size: 24px; }

.content-grid {
 display: grid;
 grid-template-columns: 1.35fr .85fr;
 gap: 22px;
 margin-bottom: 22px;
}

.panel {
 border-radius: 30px;
 padding: 26px;
}

.panel h2 { margin: 0 0 18px; font-size: 26px; }

.forecast-day {
 display: grid;
 grid-template-columns: 1fr 56px 80px;
 gap: 16px;
 align-items: center;
 padding: 16px 0;
 border-top: 1px solid rgba(148,163,184,.25);
}

.forecast-day p {
 margin: 5px 0 0;
 color: var(--muted);
}

.forecast-icon { font-size: 32px; text-align: center; }
.forecast-temp { text-align: right; }
.forecast-temp strong { font-size: 24px; }
.forecast-temp span { color: var(--muted); margin-left: 8px; }

.hourly-scroll {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 12px;
}

.hour-card {
 padding: 16px;
 border-radius: 20px;
 background: rgba(255,255,255,.62);
 border: 1px solid var(--border);
 display: grid;
 gap: 6px;
 text-align: center;
}

.hour-card span { color: var(--muted); }
.hour-card strong { font-size: 30px; }
.hour-card em { font-style: normal; font-weight: 900; font-size: 22px; }
.hour-card small { color: var(--muted); }

.hourly-table-panel {
 margin-bottom: 22px;
 padding: 0;
 overflow: hidden;
}

.section-title {
 display: flex;
 justify-content: space-between;
 align-items: flex-end;
 gap: 18px;
 padding: 26px 26px 18px;
}

.section-title h2 {
 margin: 0;
}

.table-note {
 color: var(--muted);
 font-size: 14px;
 white-space: nowrap;
}

.table-wrap {
 width: 100%;
 overflow-x: auto;
 padding: 0 0 8px;
}

.hourly-table {
 width: 100%;
 min-width: 980px;
 border-collapse: collapse;
 font-size: 14px;
}

.hourly-table thead th {
 position: sticky;
 top: 0;
 z-index: 1;
 background: rgba(248,250,252,.96);
 color: #475569;
 text-align: left;
 font-size: 12px;
 text-transform: uppercase;
 letter-spacing: .06em;
 padding: 14px 12px;
 border-top: 1px solid var(--border);
 border-bottom: 1px solid var(--border);
}

.hourly-table tbody td {
 padding: 13px 12px;
 border-bottom: 1px solid rgba(148,163,184,.18);
 color: #334155;
 white-space: nowrap;
}

.hourly-table tbody tr:nth-child(even) {
 background: rgba(255,255,255,.45);
}

.hourly-table tbody tr:hover {
 background: var(--primary-soft);
}

.weather-cell {
 display: flex;
 align-items: center;
 gap: 8px;
 min-width: 170px;
}

.weather-cell span {
 font-size: 22px;
}

.weather-cell em {
 font-style: normal;
}

.editorial p {
 margin: 0;
 color: #334155;
 font-size: 18px;
 line-height: 1.75;
}

@media (max-width: 980px) {
 .hero-card, .topbar { flex-direction: column; align-items: stretch; }
 .current-weather { justify-content: flex-start; min-width: 0; }
 .stats-grid { grid-template-columns: repeat(3, 1fr); }
 .content-grid { grid-template-columns: 1fr; }
 .section-title { align-items: flex-start; flex-direction: column; }
 .table-note { white-space: normal; }
}

@media (max-width: 640px) {
 .site { width: min(100% - 20px, 1180px); padding-top: 12px; }
 .brand { font-size: 28px; }
 .search { flex-direction: column; }
 select { min-width: 0; width: 100%; }
 .hero-card { padding: 24px; border-radius: 28px; }
 .current-weather { display: block; }
 .big-icon { font-size: 64px; }
 .temperature { font-size: 58px; }
 .eyebrow {
 margin: 0 0 8px;
 color: #2563eb;
 font-size: 20px;
 font-weight: 800;
 text-transform: none;
 letter-spacing: 0;
}
 .stats-grid { grid-template-columns: repeat(2, 1fr); }
 .forecast-day { grid-template-columns: 1fr 42px 64px; }
 .hourly-scroll { grid-template-columns: repeat(2, 1fr); }
 .panel { padding: 22px; }
 .section-title { padding: 22px 22px 14px; }
}


/* V4 — tableau 3h plus lisible */
.hourly-table-panel {
 background: rgba(255,255,255,.92);
}

.table-wrap {
 padding: 0 18px 22px;
}

.hourly-table {
 border-collapse: separate;
 border-spacing: 0 8px;
 min-width: 1120px;
 font-size: 15px;
}

.hourly-table thead th {
 background: #eff6ff;
 color: #1e3a8a;
 border: 0;
 padding: 14px 14px;
}

.hourly-table thead th:first-child {
 border-radius: 16px 0 0 16px;
}

.hourly-table thead th:last-child {
 border-radius: 0 16px 16px 0;
}

.hourly-table tbody td {
 background: #ffffff;
 border-top: 1px solid rgba(148,163,184,.22);
 border-bottom: 1px solid rgba(148,163,184,.22);
 padding: 16px 14px;
 vertical-align: middle;
}

.hourly-table tbody .hour-row td:first-child {
 border-left: 1px solid rgba(148,163,184,.22);
 border-radius: 18px 0 0 18px;
}

.hourly-table tbody .hour-row td:last-child {
 border-right: 1px solid rgba(148,163,184,.22);
 border-radius: 0 18px 18px 0;
}

.hourly-table tbody tr:nth-child(even) {
 background: transparent;
}

.hourly-table tbody .hour-row:hover td {
 background: #f8fbff;
 border-color: rgba(37,99,235,.28);
}

.date-separator td {
 background: transparent !important;
 border: 0 !important;
 color: #2563eb !important;
 font-size: 14px;
 font-weight: 900;
 text-transform: uppercase;
 letter-spacing: .08em;
 padding: 22px 4px 4px !important;
}

.date-cell {
 color: #64748b !important;
 font-weight: 700;
}

.time-cell strong {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 52px;
 padding: 8px 10px;
 border-radius: 999px;
 background: #e0f2fe;
 color: #075985;
 font-size: 15px;
}

.weather-cell {
 min-width: 210px;
}

.weather-emoji {
 width: 42px;
 height: 42px;
 display: inline-grid;
 place-items: center;
 border-radius: 15px;
 background: #f1f5f9;
 font-size: 24px !important;
}

.weather-cell em {
 color: #0f172a;
 font-weight: 750;
}

.metric-pill {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 74px;
 padding: 8px 11px;
 border-radius: 999px;
 font-weight: 900;
 border: 1px solid transparent;
}

.soft-value {
 display: inline-flex;
 padding: 7px 10px;
 border-radius: 12px;
 background: #f8fafc;
 color: #334155;
 font-weight: 700;
}

.cloud-badge {
 display: inline-flex;
 min-width: 54px;
 justify-content: center;
 padding: 7px 10px;
 border-radius: 12px;
 background: #f1f5f9;
 color: #475569;
 font-weight: 800;
}

.temp-freezing { background:#e0f2fe; color:#0369a1; border-color:#bae6fd; }
.temp-cold { background:#ecfeff; color:#0e7490; border-color:#a5f3fc; }
.temp-mild { background:#ecfdf5; color:#047857; border-color:#bbf7d0; }
.temp-warm { background:#fff7ed; color:#c2410c; border-color:#fed7aa; }
.temp-hot { background:#fef2f2; color:#b91c1c; border-color:#fecaca; }

.rain-low { background:#f8fafc; color:#475569; border-color:#e2e8f0; }
.rain-mid { background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; }
.rain-high { background:#dbeafe; color:#1e40af; border-color:#93c5fd; }

.wind-low { background:#f8fafc; color:#475569; border-color:#e2e8f0; }
.wind-mid { background:#fefce8; color:#a16207; border-color:#fde68a; }
.wind-strong { background:#fff1f2; color:#be123c; border-color:#fecdd3; }

@media (max-width: 640px) {
 .table-wrap {
 padding: 0 10px 18px;
 }

 .hourly-table {
 min-width: 1080px;
 font-size: 14px;
 }

 .hourly-table tbody td {
 padding: 13px 11px;
 }
}


/* V5 — forecast 3h en cartes larges et aérées */
.hourly-table-panel,
.hourly-table,
.table-wrap {
 display: none;
}

.hourly-cards-panel {
 margin-bottom: 22px;
 overflow: hidden;
}

.hourly-day-list {
 display: grid;
 gap: 16px;
}

.day-divider {
 width: 100%;
 display: flex;
 align-items: center;
 gap: 18px;
 margin: 8px 0 2px;
 color: #1d4ed8;
 font-weight: 950;
 text-transform: uppercase;
 letter-spacing: .10em;
 font-size: 14px;
}

.day-divider::before,
.day-divider::after {
 content: "";
 height: 2px;
 flex: 1;
 border-radius: 999px;
 background: linear-gradient(90deg, rgba(37,99,235,.08), rgba(37,99,235,.65), rgba(37,99,235,.08));
}

.day-divider span {
 padding: 10px 18px;
 border-radius: 999px;
 background: #eff6ff;
 border: 1px solid #bfdbfe;
 box-shadow: 0 10px 25px rgba(37,99,235,.08);
}

.hourly-weather-card {
 width: 100%;
 display: grid;
 grid-template-columns: 340px 1fr;
 gap: 22px;
 align-items: center;
 padding: 20px;
 border-radius: 28px;
 background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.90));
 border: 1px solid rgba(148,163,184,.28);
 box-shadow: 0 16px 36px rgba(15,23,42,.08);
 transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.hourly-weather-card:hover {
 transform: translateY(-1px);
 border-color: rgba(37,99,235,.36);
 box-shadow: 0 22px 48px rgba(15,23,42,.12);
}

.hour-main {
 display: grid;
 grid-template-columns: 82px 1fr;
 gap: 18px;
 align-items: center;
 min-width: 0;
}

.hour-time {
 display: grid;
 gap: 6px;
 text-align: center;
 padding: 14px 10px;
 border-radius: 22px;
 background: #e0f2fe;
 border: 1px solid #bae6fd;
 color: #075985;
}

.hour-time strong {
 font-size: 26px;
 line-height: 1;
}

.hour-time span {
 font-size: 13px;
 font-weight: 800;
 color: #0369a1;
}

.hour-condition {
 display: flex;
 align-items: center;
 gap: 14px;
 min-width: 0;
}

.weather-emoji.big {
 width: 62px;
 height: 62px;
 display: grid;
 place-items: center;
 flex: 0 0 62px;
 border-radius: 22px;
 background: #f1f5f9;
 font-size: 34px !important;
}

.hour-condition strong {
 display: block;
 font-size: 19px;
 line-height: 1.2;
 color: #0f172a;
}

.hour-condition span {
 display: block;
 margin-top: 5px;
 color: #64748b;
 font-weight: 700;
}

.hour-metrics {
 display: grid;
 grid-template-columns: repeat(5, minmax(120px, 1fr));
 gap: 14px;
}

.hour-metric {
 min-height: 92px;
 display: grid;
 align-content: center;
 gap: 7px;
 padding: 14px 16px;
 border-radius: 22px;
 background: rgba(248,250,252,.9);
 border: 1px solid rgba(148,163,184,.20);
}

.hour-metric.primary {
 background: linear-gradient(135deg, #eff6ff, #ffffff);
 border-color: #bfdbfe;
}

.hour-metric span {
 color: #64748b;
 font-size: 13px;
 font-weight: 850;
 text-transform: uppercase;
 letter-spacing: .06em;
}

.hour-metric strong {
 justify-self: start;
 display: inline-flex;
 align-items: center;
 min-height: 34px;
 padding: 8px 12px;
 border-radius: 999px;
 font-size: 18px;
 font-weight: 950;
}

.hour-metric em {
 color: #64748b;
 font-size: 13px;
 font-style: normal;
 font-weight: 750;
}

.hour-metric strong:not([class]) {
 background: #ffffff;
 color: #0f172a;
 border: 1px solid #e2e8f0;
}

@media (max-width: 1100px) {
 .hourly-weather-card {
 grid-template-columns: 1fr;
 }

 .hour-metrics {
 grid-template-columns: repeat(5, minmax(110px, 1fr));
 }
}

@media (max-width: 760px) {
 .hourly-weather-card {
 padding: 16px;
 border-radius: 24px;
 }

 .hour-main {
 grid-template-columns: 1fr;
 }

 .hour-time {
 width: 110px;
 text-align: left;
 }

 .hour-condition {
 align-items: flex-start;
 }

 .hour-metrics {
 grid-template-columns: repeat(2, 1fr);
 }

 .hour-metric.primary {
 grid-column: span 2;
 }

 .day-divider {
 gap: 10px;
 font-size: 12px;
 }

 .day-divider span {
 padding: 9px 12px;
 }
}

@media (max-width: 420px) {
 .hour-metrics {
 grid-template-columns: 1fr;
 }

 .hour-metric.primary {
 grid-column: auto;
 }

 .weather-emoji.big {
 width: 54px;
 height: 54px;
 flex-basis: 54px;
 font-size: 30px !important;
 }
}


/* V5.1 */
.hourly-scroll{
 grid-template-columns:repeat(2,1fr);
 gap:16px;
}
.hour-card{
 padding:20px;
 border-radius:24px;
}
.hour-card strong{
 font-size:42px;
}
.hour-card em{
 font-size:28px;
 font-weight:900;
}
.hour-card span{
 display:inline-block;
 padding:6px 12px;
 border-radius:999px;
 background:#e0f2fe;
 color:#075985;
 font-weight:800;
}
.hour-card small{
 margin-top:4px;
 font-size:13px;
}


/* V5.2 — résumé prochaines heures style premium */
.hourly-scroll{
 grid-template-columns:repeat(2, minmax(0,1fr));
 gap:18px;
}

.premium-hour-card{
 position:relative;
 overflow:hidden;
 min-height:190px;
 padding:20px;
 border-radius:28px;
 text-align:left;
 background:
 radial-gradient(circle at top right, rgba(37,99,235,.18), transparent 7rem),
 linear-gradient(145deg, rgba(255,255,255,.96), rgba(239,246,255,.88));
 border:1px solid rgba(147,197,253,.55);
 box-shadow:0 18px 38px rgba(15,23,42,.10);
}

.premium-hour-card::after{
 content:"";
 position:absolute;
 inset:auto -24px -42px auto;
 width:120px;
 height:120px;
 border-radius:999px;
 background:rgba(37,99,235,.08);
}

.hour-top{
 position:relative;
 z-index:1;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:14px;
}

.hour-badge{
 display:inline-flex !important;
 align-items:center;
 justify-content:center;
 padding:8px 14px !important;
 border-radius:999px !important;
 background:#dbeafe !important;
 color:#1d4ed8 !important;
 font-weight:950 !important;
 font-size:15px;
}

.hour-icon{
 font-size:48px !important;
 line-height:1;
}

.hour-temp{
 position:relative;
 z-index:1;
 display:block;
 margin-top:18px;
 font-style:normal;
 font-size:48px !important;
 line-height:.9;
 font-weight:950 !important;
 letter-spacing:-2px;
 color:#0f172a;
}

.hour-desc{
 position:relative;
 z-index:1;
 display:block;
 margin-top:10px;
 color:#475569 !important;
 font-size:14px !important;
 font-weight:800;
 min-height:34px;
}

.hour-mini-metrics{
 position:relative;
 z-index:1;
 display:flex;
 flex-wrap:wrap;
 gap:8px;
 margin-top:14px;
}

.hour-mini-metrics span{
 display:inline-flex;
 padding:7px 10px;
 border-radius:999px;
 background:rgba(255,255,255,.78);
 border:1px solid rgba(148,163,184,.22);
 color:#334155;
 font-size:13px;
 font-weight:850;
}

@media (max-width:640px){
 .hourly-scroll{
 grid-template-columns:1fr;
 }
 .premium-hour-card{
 min-height:160px;
 }
}


/* V5.3 — H1 moins massif */
@media (max-width: 640px) {
 h1 {
 font-size: clamp(32px, 10vw, 40px);
 letter-spacing: -0.5px;
 }

 .eyebrow {
 font-size: 18px;
 }
}


/* Ajustement header sans logo PNG : icône + TIEMPODEHOY.COM plus visible */
.brand {
 display: inline-flex;
 align-items: center;
 gap: 14px;
 color: var(--text);
 text-decoration: none;
 font-weight: 800;
 font-size: inherit;
}

.brand-icon {
 width: 54px;
 height: 54px;
 display: grid;
 place-items: center;
 border-radius: 18px;
 background: var(--card);
 box-shadow: var(--shadow);
 font-size: 30px;
 flex: 0 0 54px;
}

.brand-copy {
 display: flex;
 flex-direction: column;
 gap: 3px;
 line-height: 1.05;
}

.brand-copy strong {
 display: block;
 font-size: clamp(30px, 3vw, 38px);
 font-weight: 950;
 letter-spacing: -1px;
 color: #0f172a;
}

.brand-copy em {
 display: block;
 font-size: clamp(14px, 1.4vw, 16px);
 font-style: normal;
 font-weight: 700;
 color: #64748b;
 letter-spacing: 0;
}

@media (max-width: 640px) {
 .brand {
 gap: 10px;
 }

 .brand-icon {
 width: 46px;
 height: 46px;
 flex-basis: 46px;
 font-size: 26px;
 border-radius: 15px;
 }

 .brand-copy strong {
 font-size: 26px;
 }

 .brand-copy em {
 font-size: 13px;
 }
}


/* Graphique vent propre : axes X/Y + échelle km/h */
.wind-chart-panel {
 margin-bottom: 22px;
}

.wind-chart-box {
 position: relative;
 padding: 0 26px 26px;
}

.wind-y-title {
 position: absolute;
 left: 28px;
 top: 6px;
 color: #2563eb;
 font-size: 13px;
 font-weight: 900;
}

.wind-chart-svg {
 width: 100%;
 height: 360px;
 display: block;
 border-radius: 24px;
 background:
 radial-gradient(circle at 80% 15%, rgba(37,99,235,.10), transparent 13rem),
 linear-gradient(180deg, #ffffff, #f8fbff);
 border: 1px solid rgba(148,163,184,.25);
}

.wind-grid {
 stroke: rgba(148,163,184,.26);
 stroke-width: 1;
}

.wind-axis {
 stroke: rgba(71,85,105,.62);
 stroke-width: 1.6;
}

.wind-y-label,
.wind-x-label,
.wind-x-title {
 fill: #64748b;
 font-size: 13px;
 font-weight: 800;
}

.wind-x-title {
 fill: #2563eb;
 font-size: 14px;
}

.wind-area {
 fill: rgba(37,99,235,.12);
}

.wind-line {
 fill: none;
 stroke: #2563eb;
 stroke-width: 5;
 stroke-linecap: round;
 stroke-linejoin: round;
}

.wind-dot {
 fill: #ffffff;
 stroke: #2563eb;
 stroke-width: 4;
}

.wind-summary-row {
 display: grid;
 grid-template-columns: repeat(8, 1fr);
 gap: 10px;
 margin-top: 14px;
}

.wind-summary-row span {
 display: grid;
 gap: 4px;
 padding: 10px 8px;
 border-radius: 14px;
 background: rgba(255,255,255,.78);
 border: 1px solid rgba(148,163,184,.22);
 text-align: center;
}

.wind-summary-row strong {
 color: #0f172a;
 font-size: 14px;
}

.wind-summary-row em {
 color: #2563eb;
 font-style: normal;
 font-size: 13px;
 font-weight: 850;
}

@media (max-width: 760px) {
 .wind-chart-box {
 padding: 0 16px 22px;
 }

 .wind-chart-svg {
 height: 300px;
 }

 .wind-summary-row {
 grid-template-columns: repeat(4, 1fr);
 }
}


/* VENT V2 — graphique épuré */
.wind-area {
 display: none !important;
}

.wind-axis {
 display: none !important;
}

.wind-line {
 fill: none !important;
 stroke: #2563eb !important;
 stroke-width: 4 !important;
 stroke-linecap: round !important;
 stroke-linejoin: round !important;
}

.wind-dot {
 fill: #2563eb !important;
 stroke: #ffffff !important;
 stroke-width: 3 !important;
}

.wind-grid {
 stroke: rgba(148,163,184,.20) !important;
 stroke-width: 1 !important;
}

.wind-summary-row,
.wind-summary-row span,
.wind-summary-row strong,
.wind-summary-row em {
 display: none !important;
}


/* VENT V3 — jour + heure sous l’axe X */
.wind-day-label {
 fill: #0f172a;
 font-size: 12px;
 font-weight: 900;
}

.wind-x-label {
 fill: #2563eb !important;
 font-size: 13px !important;
 font-weight: 900 !important;
}

.wind-x-title {
 display: none;
}


/* VENT V4 — courbe vent moyen + rafales */
.wind-x-title {
 display: none !important;
}

.wind-legend {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 margin: 0 0 14px;
 padding: 0 2px;
}

.wind-legend span {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 8px 12px;
 border-radius: 999px;
 background: rgba(255,255,255,.78);
 border: 1px solid rgba(148,163,184,.22);
 color: #334155;
 font-size: 14px;
 font-weight: 800;
}

.wind-legend i {
 width: 24px;
 height: 4px;
 border-radius: 999px;
 display: inline-block;
}

.legend-blue { background: #2563eb; }
.legend-orange { background: #f97316; }

.wind-line {
 fill: none !important;
 stroke-width: 4 !important;
 stroke-linecap: round !important;
 stroke-linejoin: round !important;
}

.wind-line-mean {
 stroke: #2563eb !important;
}

.wind-line-gust {
 stroke: #f97316 !important;
 stroke-width: 3.5 !important;
 opacity: .95;
}

.wind-dot {
 fill: #2563eb !important;
 stroke: #ffffff !important;
 stroke-width: 3 !important;
}

.wind-area {
 display: none !important;
}


/* VENT V5 — correction rafales orange + légende propre */
.wind-line-gust {
 stroke: #f97316 !important;
 stroke-width: 4 !important;
 stroke-dasharray: 8 7;
 opacity: 1 !important;
}

.wind-line-mean {
 stroke: #2563eb !important;
 stroke-width: 4 !important;
}

.wind-dot,
.wind-dot-blue {
 fill: #2563eb !important;
 stroke: #ffffff !important;
 stroke-width: 3 !important;
}

.wind-dot-orange {
 fill: #f97316 !important;
 stroke: #ffffff !important;
 stroke-width: 3 !important;
}

.wind-legend {
 display: none !important;
}

.wind-legend-clean {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 42px;
 margin-top: 14px;
 color: #0f172a;
 font-size: 15px;
}

.wind-legend-clean span {
 display: inline-flex;
 align-items: center;
 gap: 10px;
}

.wind-legend-clean i {
 display: block;
 width: 42px;
 height: 4px;
 border-radius: 999px;
}

.wind-legend-clean strong {
 font-weight: 900;
}

.legend-mean i {
 background: #2563eb;
}

.legend-gust i {
 background: #f97316;
}

@media (max-width: 640px) {
 .wind-legend-clean {
 gap: 18px;
 font-size: 14px;
 flex-wrap: wrap;
 }

 .wind-legend-clean i {
 width: 34px;
 }
}


/* Légende graphique vent — FORCÉE */
.wind-legend-clean {
 display: flex !important;
 justify-content: center;
 align-items: center;
 gap: 42px;
 margin: 16px 0 0;
 padding-bottom: 4px;
 color: #0f172a;
 font-size: 15px;
}

.wind-legend-clean span {
 display: inline-flex !important;
 align-items: center;
 gap: 10px;
 background: transparent !important;
 border: 0 !important;
 padding: 0 !important;
}

.wind-legend-clean i {
 display: block !important;
 width: 42px;
 height: 4px;
 border-radius: 999px;
}

.wind-legend-clean strong {
 font-weight: 900;
}

.wind-legend-clean .legend-mean i {
 background: #2563eb;
}

.wind-legend-clean .legend-gust i {
 background: #f97316;
}

@media (max-width: 640px) {
 .wind-legend-clean {
 gap: 18px;
 font-size: 14px;
 flex-wrap: wrap;
 }

 .wind-legend-clean i {
 width: 34px;
 }
}


/* VENT V6 — heures à chaque point, jour tous les 4 points */
.wind-day-label {
 fill: #0f172a !important;
 font-size: 11px !important;
 font-weight: 900 !important;
}

.wind-x-label {
 fill: #2563eb !important;
 font-size: 11px !important;
 font-weight: 850 !important;
}

@media (max-width: 760px) {
 .wind-x-label {
 font-size: 10px !important;
 }

 .wind-day-label {
 font-size: 10px !important;
 }
}


/* TEMP V1 — courbe température + pictogrammes weather */
.temp-chart-panel {
 margin-bottom: 22px;
}

.temp-chart-box {
 position: relative;
 padding: 0 26px 26px;
}

.temp-y-title {
 position: absolute;
 left: 28px;
 top: 6px;
 color: #ea580c;
 font-size: 13px;
 font-weight: 900;
}

.temp-chart-svg {
 width: 100%;
 height: 385px;
 display: block;
 border-radius: 24px;
 background:
 radial-gradient(circle at 80% 15%, rgba(249,115,22,.10), transparent 13rem),
 linear-gradient(180deg, #ffffff, #fffaf5);
 border: 1px solid rgba(148,163,184,.25);
}

.temp-grid {
 stroke: rgba(148,163,184,.20);
 stroke-width: 1;
}

.temp-y-label,
.temp-day-label,
.temp-x-label {
 fill: #64748b;
 font-size: 11px;
 font-weight: 850;
}

.temp-x-label {
 fill: #ea580c;
}

.temp-day-label {
 fill: #0f172a;
 font-weight: 900;
}

.temp-line {
 fill: none;
 stroke: #f97316;
 stroke-width: 4;
 stroke-linecap: round;
 stroke-linejoin: round;
}

.temp-dot {
 fill: #f97316;
 stroke: #ffffff;
 stroke-width: 3;
}

.temp-value-label {
 fill: #0f172a;
 font-size: 12px;
 font-weight: 900;
}

.temp-icon-label {
 font-size: 22px;
}

.temp-legend-clean {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 42px;
 margin: 16px 0 0;
 color: #0f172a;
 font-size: 15px;
}

.temp-legend-clean span {
 display: inline-flex;
 align-items: center;
 gap: 10px;
}

.temp-legend-clean i {
 display: block;
 width: 42px;
 height: 4px;
 border-radius: 999px;
}

.legend-temp i {
 background: #f97316;
}

.temp-legend-clean strong {
 font-weight: 900;
}

@media (max-width: 760px) {
 .temp-chart-box {
 padding: 0 16px 22px;
 }

 .temp-chart-svg {
 height: 330px;
 }

 .temp-x-label,
 .temp-day-label {
 font-size: 10px;
 }

 .temp-icon-label {
 font-size: 18px;
 }

 .temp-legend-clean {
 gap: 18px;
 font-size: 14px;
 flex-wrap: wrap;
 }

 .temp-legend-clean i {
 width: 34px;
 }
}


/* TEMP V2 — courbe propre, couleur selon température */
.temp-chart-panel { margin-bottom: 22px; }

.temp-chart-box {
 position: relative;
 padding: 0 26px 26px;
}

.temp-y-title {
 position: absolute;
 left: 28px;
 top: 6px;
 color: #2563eb;
 font-size: 13px;
 font-weight: 900;
}

.temp-chart-svg {
 width: 100%;
 height: 385px;
 display: block;
 border-radius: 24px;
 background:
 radial-gradient(circle at 80% 15%, rgba(37,99,235,.08), transparent 13rem),
 linear-gradient(180deg, #ffffff, #f8fbff);
 border: 1px solid rgba(148,163,184,.25);
}

.temp-grid {
 stroke: rgba(148,163,184,.20);
 stroke-width: 1;
}

.temp-y-label {
 fill: #64748b;
 font-size: 11px;
 font-weight: 850;
}

.temp-segment {
 fill: none;
 stroke-width: 4;
 stroke-linecap: round;
 stroke-linejoin: round;
}

.temp-line-freezing { stroke: #0284c7; }
.temp-line-cold { stroke: #06b6d4; }
.temp-line-mild { stroke: #16a34a; }
.temp-line-warm { stroke: #f97316; }
.temp-line-hot { stroke: #dc2626; }

.temp-dot {
 stroke: #ffffff;
 stroke-width: 3;
}

.temp-dot-freezing { fill: #0284c7; }
.temp-dot-cold { fill: #06b6d4; }
.temp-dot-mild { fill: #16a34a; }
.temp-dot-warm { fill: #f97316; }
.temp-dot-hot { fill: #dc2626; }

.temp-value-label {
 fill: #334155;
 font-size: 11px;
 font-weight: 900;
}

.temp-icon-label { font-size: 20px; }

.temp-day-label {
 fill: #0f172a;
 font-size: 11px;
 font-weight: 900;
}

.temp-x-label {
 fill: #2563eb;
 font-size: 11px;
 font-weight: 850;
}

.temp-legend-clean {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 18px;
 margin: 16px 0 0;
 color: #0f172a;
 font-size: 14px;
 flex-wrap: wrap;
}

.temp-legend-clean span {
 display: inline-flex;
 align-items: center;
 gap: 8px;
}

.temp-legend-clean i {
 display: block;
 width: 32px;
 height: 4px;
 border-radius: 999px;
}

.temp-legend-clean strong { font-weight: 900; }

.legend-freezing i { background: #0284c7; }
.legend-cold i { background: #06b6d4; }
.legend-mild i { background: #16a34a; }
.legend-warm i { background: #f97316; }
.legend-hot i { background: #dc2626; }

@media (max-width: 760px) {
 .temp-chart-box { padding: 0 16px 22px; }
 .temp-chart-svg { height: 330px; }

 .temp-x-label,
 .temp-day-label,
 .temp-value-label {
 font-size: 10px;
 }

 .temp-icon-label { font-size: 17px; }

 .temp-legend-clean {
 gap: 12px;
 font-size: 13px;
 }

 .temp-legend-clean i { width: 26px; }
}


/* TEMP V3 — couleurs forcées */
.temp-segment {
 fill: none !important;
 stroke-width: 5 !important;
 stroke-linecap: round !important;
 stroke-linejoin: round !important;
}

.temp-dot {
 stroke: #ffffff !important;
 stroke-width: 3 !important;
}

.temp-legend-clean span strong {
 color: inherit !important;
 font-weight: 950 !important;
}

.temp-legend-clean i {
 display: block !important;
 width: 36px !important;
 height: 5px !important;
 border-radius: 999px !important;
}


/* TEMP V4 - épuré */
.temp-icon-label,
.temp-legend-clean{
 display:none !important;
}


/* Forecast générales enrichies - version stable */
.forecast-day p {
 line-height: 1.55;
}


/* Forecast générales enrichies - présentation lisible */
.forecast-day-rich {
 grid-template-columns: 1fr 56px 82px;
 align-items: start;
 padding: 18px 0;
}

.forecast-main > strong {
 display: block;
 font-size: 18px;
 margin-bottom: 4px;
}

.forecast-main > p {
 margin: 0 0 12px;
 color: #64748b;
 font-weight: 700;
}

.forecast-metrics {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 8px;
}

.forecast-metrics span {
 display: flex;
 justify-content: space-between;
 gap: 10px;
 padding: 9px 11px;
 border-radius: 14px;
 background: rgba(248,250,252,.84);
 border: 1px solid rgba(148,163,184,.22);
}

.forecast-metrics b {
 color: #475569;
 font-size: 13px;
 font-weight: 850;
 white-space: nowrap;
}

.forecast-metrics em {
 color: #0f172a;
 font-style: normal;
 font-size: 13px;
 font-weight: 900;
 text-align: right;
}

@media (max-width: 640px) {
 .forecast-day-rich {
 grid-template-columns: 1fr 46px 58px;
 }

 .forecast-metrics {
 grid-template-columns: 1fr;
 }

 .forecast-metrics span {
 padding: 8px 10px;
 }
}


.forecast-metrics{
 row-gap:14px !important;
 column-gap:12px !important;
}

.forecast-metrics span{
 padding:11px 12px !important;
}

.forecast-metrics b{
 margin-right:10px;
}

.metric-break{
 display:block;
 grid-column:1 / -1;
 height:2px;
 padding:0 !important;
 border:0 !important;
 background:transparent !important;
}


/* Forecast générales — lignes simples sans bulles */
.forecast-metrics-lines {
 display: grid !important;
 grid-template-columns: 1fr !important;
 gap: 7px !important;
 margin-top: 10px;
}

.forecast-metrics-lines div {
 display: grid;
 grid-template-columns: 185px 1fr;
 align-items: baseline;
 gap: 14px;
}

.forecast-metrics-lines span {
 color: #475569;
 font-size: 14px;
 font-weight: 800;
}

.forecast-metrics-lines strong {
 color: #0f172a;
 font-size: 14px;
 font-weight: 900;
}

.forecast-metrics-lines > span,
.forecast-metrics-lines .metric-break {
 display: none !important;
}

.forecast-metrics span {
 padding: 0 !important;
 border: 0 !important;
 background: transparent !important;
}

@media (max-width: 640px) {
 .forecast-metrics-lines div {
 grid-template-columns: 1fr;
 gap: 2px;
 }
}


/* Forecast générales — version simple texte */
.forecast-simple-lines {
 margin-top: 10px;
}

.forecast-simple-lines p {
 margin: 5px 0;
 padding: 0;
 background: transparent;
 border: 0;
 color: #334155;
 font-size: 15px;
 line-height: 1.45;
 font-weight: 600;
}

.forecast-simple-lines p:first-child {
 margin-top: 0;
}

/* Neutralise les anciennes variantes */
.forecast-metrics,
.forecast-metrics-lines {
 display: none !important;
}


/* Forecast générales — version compacte 2 colonnes */
.forecast-simple-lines,
.forecast-metrics,
.forecast-metrics-lines {
 display: none !important;
}

.forecast-compact-grid {
 display: grid;
 grid-template-columns: 1.25fr 0.85fr;
 column-gap: 28px;
 margin-top: 10px;
}

.forecast-col {
 display: grid;
 gap: 5px;
 align-content: start;
}

.forecast-col p {
 margin: 0;
 padding: 0;
 background: transparent;
 border: 0;
 color: #334155;
 font-size: 14px;
 line-height: 1.28;
 font-weight: 650;
 white-space: nowrap;
}

@media (max-width: 760px) {
 .forecast-compact-grid {
 grid-template-columns: 1fr;
 row-gap: 5px;
 }

 .forecast-col p {
 white-space: normal;
 }
}


/* Meteocons SVG animés */
.weather-icon {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: contain;
}

.big-icon {
 width: 92px;
 height: 92px;
 font-size: 0 !important;
}

.current-weather-icon {
 width: 92px;
 height: 92px;
}

.forecast-icon {
 width: 52px;
 height: 52px;
 display: grid;
 place-items: center;
 font-size: 0 !important;
}

.forecast-weather-icon {
 width: 58px;
 height: 58px;
}

.hour-icon {
 display: block;
 width: 54px;
 height: 54px;
 font-size: 0 !important;
}

.hour-weather-icon {
 width: 54px;
 height: 54px;
}

.weather-emoji.big {
 width: 62px;
 height: 62px;
 display: grid;
 place-items: center;
 font-size: 0 !important;
}

.detail-weather-icon {
 width: 62px;
 height: 62px;
}

@media (max-width: 640px) {
 .big-icon,
 .current-weather-icon {
 width: 70px;
 height: 70px;
 }

 .forecast-icon,
 .forecast-weather-icon {
 width: 46px;
 height: 46px;
 }
}


/* Meteocons — corrections globales */
.weather-icon {
 display: block !important;
 object-fit: contain !important;
}

.big-icon {
 width: 96px !important;
 height: 96px !important;
 font-size: 0 !important;
 display: grid !important;
 place-items: center !important;
}

.current-weather-icon {
 width: 96px !important;
 height: 96px !important;
}

.hour-icon {
 width: 56px !important;
 height: 56px !important;
 display: block !important;
 font-size: 0 !important;
 line-height: 0 !important;
}

.hour-weather-icon {
 width: 56px !important;
 height: 56px !important;
}

.forecast-icon {
 width: 54px !important;
 height: 54px !important;
 display: grid !important;
 place-items: center !important;
 font-size: 0 !important;
}

.forecast-weather-icon {
 width: 58px !important;
 height: 58px !important;
}

.weather-emoji.big {
 width: 62px !important;
 height: 62px !important;
 display: grid !important;
 place-items: center !important;
 font-size: 0 !important;
}

.detail-weather-icon {
 width: 62px !important;
 height: 62px !important;
}

.premium-hour-card .hour-icon img,
.hour-card .hour-icon img {
 width: 56px !important;
 height: 56px !important;
}

@media (max-width: 640px) {
 .big-icon,
 .current-weather-icon {
 width: 72px !important;
 height: 72px !important;
 }

 .hour-icon,
 .hour-weather-icon {
 width: 50px !important;
 height: 50px !important;
 }
}


/* Meteocons V2 — icônes plus grandes et plus visibles sur fond clair */
.big-icon {
 width: 122px !important;
 height: 122px !important;
 border-radius: 34px;
 background:
 radial-gradient(circle at 35% 25%, rgba(255,255,255,.95), rgba(219,234,254,.78));
 box-shadow:
 inset 0 0 0 1px rgba(147,197,253,.35),
 0 16px 34px rgba(37,99,235,.14);
}

.current-weather-icon {
 width: 112px !important;
 height: 112px !important;
 filter: drop-shadow(0 8px 12px rgba(15,23,42,.18));
}

.forecast-icon {
 width: 66px !important;
 height: 66px !important;
 border-radius: 20px;
 background: rgba(239,246,255,.92);
 box-shadow:
 inset 0 0 0 1px rgba(147,197,253,.30),
 0 10px 22px rgba(15,23,42,.08);
}

.forecast-weather-icon {
 width: 66px !important;
 height: 66px !important;
 filter: drop-shadow(0 5px 8px rgba(15,23,42,.16));
}

.hour-icon {
 width: 70px !important;
 height: 70px !important;
 border-radius: 22px;
 background: rgba(239,246,255,.92);
 box-shadow:
 inset 0 0 0 1px rgba(147,197,253,.28),
 0 10px 22px rgba(15,23,42,.08);
}

.hour-weather-icon {
 width: 70px !important;
 height: 70px !important;
 filter: drop-shadow(0 6px 9px rgba(15,23,42,.18));
}

.weather-emoji.big {
 width: 76px !important;
 height: 76px !important;
 border-radius: 24px;
 background: rgba(239,246,255,.92);
 box-shadow:
 inset 0 0 0 1px rgba(147,197,253,.28),
 0 10px 22px rgba(15,23,42,.08);
}

.detail-weather-icon {
 width: 76px !important;
 height: 76px !important;
 filter: drop-shadow(0 6px 9px rgba(15,23,42,.18));
}

.premium-hour-card .hour-icon img,
.hour-card .hour-icon img {
 width: 70px !important;
 height: 70px !important;
}

@media (max-width: 640px) {
 .big-icon {
 width: 88px !important;
 height: 88px !important;
 border-radius: 26px;
 }

 .current-weather-icon {
 width: 84px !important;
 height: 84px !important;
 }

 .forecast-icon,
 .forecast-weather-icon {
 width: 56px !important;
 height: 56px !important;
 }

 .hour-icon,
 .hour-weather-icon {
 width: 60px !important;
 height: 60px !important;
 }
}


/* Correctif mise en page — Weather par tranches de 3 heures */
.hourly-weather-card {
 grid-template-columns: 330px 1fr !important;
 align-items: stretch !important;
 gap: 18px !important;
}

.hour-main {
 align-items: center !important;
}

.hour-condition {
 min-width: 0;
}

.hour-condition strong {
 font-size: 17px !important;
 line-height: 1.2 !important;
}

.hour-condition span:not(.weather-emoji) {
 font-size: 13px !important;
}

.hour-metrics {
 display: grid !important;
 grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
 gap: 10px !important;
 align-items: stretch !important;
}

.hour-metric {
 min-height: 86px !important;
 padding: 12px 10px !important;
 border-radius: 20px !important;
 display: flex !important;
 flex-direction: column !important;
 justify-content: center !important;
 align-items: center !important;
 text-align: center !important;
 gap: 6px !important;
}

.hour-metric span {
 display: block !important;
 width: 100% !important;
 color: #64748b !important;
 font-size: 11px !important;
 font-weight: 900 !important;
 text-transform: uppercase !important;
 letter-spacing: .045em !important;
 line-height: 1.1 !important;
 white-space: normal !important;
}

.hour-metric strong {
 display: flex !important;
 justify-content: center !important;
 align-items: center !important;
 min-height: 34px !important;
 width: auto !important;
 max-width: 100% !important;
 padding: 7px 10px !important;
 border-radius: 999px !important;
 font-size: 15px !important;
 line-height: 1.15 !important;
 font-weight: 950 !important;
 text-align: center !important;
 white-space: normal !important;
 word-break: normal !important;
 overflow-wrap: anywhere !important;
}

.hour-metric em {
 display: block !important;
 color: #64748b !important;
 font-size: 12px !important;
 line-height: 1.15 !important;
 font-style: normal !important;
 font-weight: 750 !important;
 text-align: center !important;
}

.hour-metric strong:not([class]) {
 background: #ffffff !important;
 color: #0f172a !important;
 border: 1px solid #e2e8f0 !important;
}

/* Cas spécial : précipitations = Aucune, compact et propre */
.hour-metric strong {
 box-sizing: border-box !important;
}

@media (max-width: 1100px) {
 .hourly-weather-card {
 grid-template-columns: 1fr !important;
 }

 .hour-metrics {
 grid-template-columns: repeat(5, minmax(95px, 1fr)) !important;
 }
}

@media (max-width: 760px) {
 .hour-metrics {
 grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
 }

 .hour-metric {
 min-height: 78px !important;
 }

 .hour-metric strong {
 font-size: 14px !important;
 }
}

@media (max-width: 420px) {
 .hour-metrics {
 grid-template-columns: 1fr !important;
 }
}


/* Correction : valeur du vent en noir comme les autres */
.hour-metric em {
 color: #0f172a !important;
 font-weight: 900 !important;
}


/* Ligne d'infos actuelles en bas de la grande bulle — version safe flex */
.hero-card {
 flex-wrap: wrap;
}

.hero-card .hero-text {
 flex: 1 1 360px;
}

.hero-card .current-weather {
 flex: 0 1 auto;
}

.hero-bottom-stats {
 flex: 0 0 100%;
 width: 100%;
 margin-top: 16px;
 padding-top: 13px;
 border-top: 1px solid rgba(148, 163, 184, .24);

 display: flex;
 justify-content: center;
 align-items: center;
 gap: 26px;
 flex-wrap: wrap;

 color: #334155;
 font-size: 14px;
 line-height: 1.25;
}

.hero-bottom-stats span {
 white-space: nowrap;
}

.hero-bottom-stats strong {
 color: #0f172a;
 font-weight: 900;
 margin-right: 5px;
}

.stats-grid {
 display: none !important;
}

@media (max-width: 760px) {
 .hero-bottom-stats {
 justify-content: flex-start;
 gap: 10px 18px;
 font-size: 13px;
 }
}


/* Correctif : bloc de mise à jour sans barre bleue */
.update-info {
 border-left: 0 !important;
}

.update-info::before,
.update-info::after {
 display: none !important;
 content: none !important;
}

/* Hero plus compact */
.hero-card {
 padding-top: 30px !important;
 padding-bottom: 30px !important;
 gap: 22px !important;
}

.hero-text h1 {
 margin-top: 4px !important;
 margin-bottom: 8px !important;
}

.hero-text .subtitle {
 margin-top: 0 !important;
 margin-bottom: 0 !important;
}

.current-weather {
 gap: 18px !important;
}

.big-icon {
 width: 106px !important;
 height: 106px !important;
}

.current-weather-icon {
 width: 98px !important;
 height: 98px !important;
}

.temperature {
 line-height: 1 !important;
 margin-bottom: 5px !important;
}

.condition {
 margin-bottom: 4px !important;
}

.feels {
 line-height: 1.25 !important;
}

.hero-bottom-stats {
 margin-top: 12px !important;
 padding-top: 10px !important;
}

@media (max-width: 760px) {
 .hero-card {
 padding-top: 24px !important;
 padding-bottom: 24px !important;
 }

 .big-icon,
 .current-weather-icon {
 width: 82px !important;
 height: 82px !important;
 }
}


.hour-mini-metrics{
display:flex;
flex-direction:column;
gap:4px;
margin-top:8px;
}
.hour-mini-metrics span{
font-size:13px;
line-height:1.25;
}





/* Ciudades proches — bloc premium */
.nearby-cities-panel {
 margin-top: 26px;
 overflow: hidden;
 background:
 radial-gradient(circle at 8% 0%, rgba(59,130,246,.12), transparent 18rem),
 linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.92));
}

.nearby-header {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 18px;
 padding: 28px 30px 18px;
}

.nearby-header h2 {
 margin: 2px 0 6px;
 color: #0f172a;
 font-size: clamp(24px, 3vw, 34px);
 line-height: 1.05;
 letter-spacing: -0.035em;
}

.nearby-subtitle {
 margin: 0;
 max-width: 560px;
 color: #64748b;
 font-size: 15px;
 line-height: 1.5;
 font-weight: 650;
}

.nearby-count {
 flex: 0 0 auto;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 38px;
 padding: 0 14px;
 border-radius: 999px;
 background: rgba(37,99,235,.09);
 color: #2563eb;
 border: 1px solid rgba(37,99,235,.16);
 font-size: 13px;
 font-weight: 950;
}

.nearby-cities-grid {
 display: grid;
 grid-template-columns: repeat(5, minmax(0, 1fr));
 gap: 12px;
 padding: 0 30px 30px;
}

.nearby-city {
 position: relative;
 min-height: 82px;
 display: grid;
 grid-template-columns: 12px minmax(0, 1fr);
 grid-template-rows: 1fr auto;
 column-gap: 11px;
 row-gap: 9px;
 align-items: center;
 padding: 16px 15px;
 border-radius: 22px;
 background: rgba(255,255,255,.78);
 border: 1px solid rgba(148,163,184,.20);
 color: #0f172a;
 text-decoration: none;
 box-shadow: 0 10px 26px rgba(15,23,42,.055);
 transition:
 transform .16s ease,
 box-shadow .16s ease,
 border-color .16s ease,
 background .16s ease;
}

.nearby-city:hover {
 transform: translateY(-3px);
 background: #ffffff;
 border-color: rgba(37,99,235,.30);
 box-shadow: 0 18px 36px rgba(15,23,42,.095);
}

.nearby-dot {
 width: 9px;
 height: 9px;
 border-radius: 999px;
 background: #38bdf8;
 box-shadow: 0 0 0 5px rgba(56,189,248,.15);
}

.nearby-name {
 min-width: 0;
}

.nearby-city strong {
 display: block;
 color: #0f172a;
 font-size: 15px;
 font-weight: 950;
 line-height: 1.15;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.nearby-city em {
 display: block;
 margin-top: 5px;
 color: #64748b;
 font-size: 12px;
 font-style: normal;
 font-weight: 800;
}

.nearby-city b {
 grid-column: 1 / -1;
 justify-self: start;
 display: inline-flex;
 align-items: center;
 min-height: 28px;
 padding: 0 10px;
 border-radius: 999px;
 background: rgba(15,23,42,.045);
 color: #2563eb;
 font-size: 12px;
 font-weight: 950;
 white-space: nowrap;
}

@media (max-width: 1180px) {
 .nearby-cities-grid {
 grid-template-columns: repeat(4, minmax(0, 1fr));
 }
}

@media (max-width: 920px) {
 .nearby-cities-grid {
 grid-template-columns: repeat(3, minmax(0, 1fr));
 }
}

@media (max-width: 700px) {
 .nearby-header {
 padding: 24px 20px 16px;
 flex-direction: column;
 }

 .nearby-cities-grid {
 grid-template-columns: repeat(2, minmax(0, 1fr));
 padding: 0 20px 24px;
 gap: 10px;
 }

 .nearby-city {
 min-height: 76px;
 border-radius: 18px;
 padding: 14px;
 }
}

@media (max-width: 460px) {
 .nearby-cities-grid {
 grid-template-columns: 1fr;
 }
}


/* Thèmes weather dynamiques — subtils et lisibles */
:root {
 --theme-bg-1: #eef7ff;
 --theme-bg-2: #f8fbff;
 --theme-accent: #2563eb;
 --theme-accent-soft: rgba(37, 99, 235, .10);
 --theme-panel-glow: rgba(37, 99, 235, .08);
}

body {
 background:
 radial-gradient(circle at 12% 0%, var(--theme-panel-glow), transparent 28rem),
 linear-gradient(180deg, var(--theme-bg-1), var(--theme-bg-2)) !important;
 transition: background .35s ease;
}

.theme-clear-day {
 --theme-bg-1: #eef8ff;
 --theme-bg-2: #fffaf0;
 --theme-accent: #f59e0b;
 --theme-accent-soft: rgba(245, 158, 11, .12);
 --theme-panel-glow: rgba(251, 191, 36, .18);
}

.theme-clear-night {
 --theme-bg-1: #e9efff;
 --theme-bg-2: #f6f8ff;
 --theme-accent: #6366f1;
 --theme-accent-soft: rgba(99, 102, 241, .12);
 --theme-panel-glow: rgba(99, 102, 241, .16);
}

.theme-clouds {
 --theme-bg-1: #eef4fb;
 --theme-bg-2: #f8fafc;
 --theme-accent: #64748b;
 --theme-accent-soft: rgba(100, 116, 139, .12);
 --theme-panel-glow: rgba(148, 163, 184, .18);
}

.theme-overcast {
 --theme-bg-1: #e9eef5;
 --theme-bg-2: #f5f7fa;
 --theme-accent: #475569;
 --theme-accent-soft: rgba(71, 85, 105, .12);
 --theme-panel-glow: rgba(71, 85, 105, .14);
}

.theme-rain {
 --theme-bg-1: #e8f1fb;
 --theme-bg-2: #f6fbff;
 --theme-accent: #2563eb;
 --theme-accent-soft: rgba(37, 99, 235, .12);
 --theme-panel-glow: rgba(37, 99, 235, .18);
}

.theme-storm {
 --theme-bg-1: #ece9ff;
 --theme-bg-2: #f8f7ff;
 --theme-accent: #7c3aed;
 --theme-accent-soft: rgba(124, 58, 237, .13);
 --theme-panel-glow: rgba(124, 58, 237, .18);
}

.theme-snow,
.theme-cold {
 --theme-bg-1: #eefcff;
 --theme-bg-2: #f9feff;
 --theme-accent: #0891b2;
 --theme-accent-soft: rgba(8, 145, 178, .12);
 --theme-panel-glow: rgba(34, 211, 238, .16);
}

.theme-fog {
 --theme-bg-1: #f1f5f9;
 --theme-bg-2: #fafafa;
 --theme-accent: #64748b;
 --theme-accent-soft: rgba(100, 116, 139, .10);
 --theme-panel-glow: rgba(148, 163, 184, .16);
}

.theme-hot {
 --theme-bg-1: #fff4e6;
 --theme-bg-2: #fffaf5;
 --theme-accent: #f97316;
 --theme-accent-soft: rgba(249, 115, 22, .13);
 --theme-panel-glow: rgba(249, 115, 22, .18);
}

/* Application légère du thème aux zones importantes */
.hero-card {
 background:
 radial-gradient(circle at 82% 12%, var(--theme-accent-soft), transparent 18rem),
 rgba(255,255,255,.86) !important;
}

.brand strong,
.temperature,
.nearby-city b,
.wind-y-title,
.temp-y-title {
 color: var(--theme-accent) !important;
}

.hour-badge,
.nearby-count {
 background: var(--theme-accent-soft) !important;
 color: var(--theme-accent) !important;
 border-color: color-mix(in srgb, var(--theme-accent) 24%, transparent) !important;
}

.nearby-dot {
 background: var(--theme-accent) !important;
 box-shadow: 0 0 0 5px var(--theme-accent-soft) !important;
}

/* Ligne hero avec plus d'infos */
.hero-bottom-stats {
 gap: 14px 24px !important;
}


/* Dégradé continu des températures */
.temp-gradient-text {
 color: var(--temp-color) !important;
 text-shadow: 0 8px 18px color-mix(in srgb, var(--temp-color) 18%, transparent);
}

.temp-inline {
 color: var(--temp-color) !important;
 font-weight: 950;
}

.temp-badge {
 display: inline-flex !important;
 align-items: center;
 justify-content: center;
 min-height: 34px;
 padding: 7px 12px;
 border-radius: 999px;
 background: var(--temp-bg) !important;
 border: 1px solid var(--temp-border) !important;
 color: var(--temp-color) !important;
 font-weight: 950 !important;
 line-height: 1 !important;
 white-space: nowrap;
}

.metric-temp-badge {
 min-width: 66px;
}

.forecast-temp .temp-min {
 opacity: .82;
}

.hour-temp.temp-gradient-text {
 font-weight: 950;
}

.temp-value-label {
 font-weight: 950 !important;
 paint-order: stroke;
 stroke: rgba(255,255,255,.78);
 stroke-width: 3px;
}





/* Forecast 5 jours — Max / Min propre, sans casser la bulle */
.forecast-day.forecast-day-rich {
 grid-template-columns: minmax(0, 1fr) 64px 150px !important;
 gap: 18px !important;
 align-items: center !important;
 padding-right: 10px !important;
}

.forecast-temp-range {
 width: 150px !important;
 justify-self: end !important;
 display: grid !important;
 gap: 8px !important;
 text-align: right !important;
 align-content: center !important;
}

.forecast-temp-chip {
 width: 136px !important;
 min-height: 38px !important;
 display: flex !important;
 align-items: center !important;
 justify-content: space-between !important;
 gap: 8px !important;
 padding: 8px 11px !important;
 border-radius: 999px !important;
 background: var(--temp-bg) !important;
 border: 1px solid var(--temp-border) !important;
 box-shadow: 0 8px 18px color-mix(in srgb, var(--temp-color) 14%, transparent) !important;
}

.forecast-temp-chip .forecast-temp-label {
 margin: 0 !important;
 color: #64748b !important;
 font-size: 11px !important;
 font-weight: 950 !important;
 white-space: nowrap !important;
}

.forecast-temp-chip .forecast-temp-value {
 color: var(--temp-color) !important;
 font-size: 19px !important;
 line-height: 1 !important;
 font-weight: 950 !important;
 white-space: nowrap !important;
}

.forecast-temp-min {
 opacity: .88;
}

@media (max-width: 900px) {
 .forecast-day.forecast-day-rich {
 grid-template-columns: minmax(0, 1fr) 56px 140px !important;
 gap: 14px !important;
 }

 .forecast-temp-range {
 width: 140px !important;
 }

 .forecast-temp-chip {
 width: 128px !important;
 padding: 8px 10px !important;
 }

 .forecast-temp-chip .forecast-temp-value {
 font-size: 18px !important;
 }
}

@media (max-width: 640px) {
 .forecast-day.forecast-day-rich {
 grid-template-columns: 1fr !important;
 padding-right: 0 !important;
 }

 .forecast-temp-range {
 width: 100% !important;
 justify-self: stretch !important;
 grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
 }

 .forecast-temp-chip {
 width: 100% !important;
 }
}


/* Recherche city AJAX — remplace le gros select */
.city-search {
 position: relative;
 align-items: stretch;
}

.city-search-box {
 position: relative;
 min-width: 280px;
}

.city-search input[type="search"] {
 width: 100%;
 border: 0;
 border-radius: 13px;
 padding: 12px 14px;
 font-size: 15px;
 background: white;
 color: var(--text);
 outline: none;
}

.city-search input[type="search"]:focus {
 box-shadow: 0 0 0 3px rgba(37,99,235,.16);
}

.city-suggestions {
 position: absolute;
 z-index: 50;
 top: calc(100% + 8px);
 left: 0;
 right: 0;
 max-height: 360px;
 overflow-y: auto;
 padding: 8px;
 border-radius: 18px;
 background: rgba(255,255,255,.98);
 border: 1px solid rgba(148,163,184,.32);
 box-shadow: 0 24px 50px rgba(15,23,42,.16);
 backdrop-filter: blur(14px);
}

.city-suggestion {
 width: 100%;
 display: grid;
 gap: 3px;
 text-align: left;
 padding: 11px 12px;
 border: 0;
 border-radius: 13px;
 background: transparent;
 color: #0f172a;
 cursor: pointer;
}

.city-suggestion:hover,
.city-suggestion:focus {
 background: #eff6ff;
}

.city-suggestion strong {
 font-size: 15px;
 font-weight: 900;
}

.city-suggestion span {
 color: #64748b;
 font-size: 13px;
 font-weight: 700;
}

.city-suggestion-empty {
 cursor: default;
 color: #64748b;
}

.city-suggestion-empty:hover {
 background: transparent;
}

@media (max-width: 640px) {
 .city-search-box {
 min-width: 0;
 width: 100%;
 }

 .city-suggestions {
 max-height: 300px;
 }
}

/* Correctif V3.1 — suggestions au-dessus de la carte hero */
.topbar {
 position: relative;
 z-index: 5000;
 overflow: visible;
}

.search.city-search,
.city-search,
.city-search-box {
 position: relative;
 z-index: 5001;
 overflow: visible;
}

.city-suggestions {
 z-index: 99999 !important;
}

.hero-card {
 position: relative;
 z-index: 1;
}

/* HOME V5 */
.home-body {
 min-height: 100vh;
}

.home-site {
 padding-bottom: 64px;
}

.home-topbar {
 margin-bottom: 28px;
}

.home-hero {
 position: relative;
 z-index: 5;
 border-radius: 40px;
 padding: clamp(34px, 6vw, 72px);
 margin-bottom: 24px;
 background:
 radial-gradient(circle at 85% 10%, rgba(14,165,233,.22), transparent 18rem),
 radial-gradient(circle at 12% 18%, rgba(37,99,235,.22), transparent 20rem),
 linear-gradient(135deg, rgba(255,255,255,.96), rgba(239,246,255,.82));
 border: 1px solid rgba(148,163,184,.25);
 box-shadow: 0 30px 80px rgba(15,23,42,.12);
 overflow: visible;
}

.home-hero-content {
 max-width: 880px;
 margin: 0 auto;
 text-align: center;
}

.home-hero h1 {
 font-size: clamp(42px, 6vw, 76px);
 letter-spacing: -2.5px;
 line-height: .98;
 margin-bottom: 18px;
}

.home-lead {
 max-width: 760px;
 margin: 0 auto 28px;
 color: #475569;
 font-size: clamp(17px, 2vw, 22px);
 line-height: 1.65;
}

.home-search {
 width: min(760px, 100%);
 margin: 0 auto;
 padding: 10px;
 border-radius: 26px;
 background: rgba(255,255,255,.82);
 box-shadow: 0 20px 48px rgba(15,23,42,.12);
}

.home-search .city-search-box {
 display: grid;
 grid-template-columns: 1fr auto;
 gap: 10px;
}

.home-search .city-search-input {
 width: 100%;
 min-height: 56px;
 border: 0;
 border-radius: 18px;
 padding: 0 18px;
 background: #ffffff;
 color: #0f172a;
 font-size: 17px;
 outline: none;
}

.home-search button {
 min-height: 56px;
 border-radius: 18px;
 padding: 0 22px;
 white-space: nowrap;
}

.home-count {
 margin: 18px 0 0;
 color: #64748b;
 font-weight: 700;
}

.home-grid {
 display: grid;
 grid-template-columns: 1.25fr .75fr;
 gap: 22px;
 margin-bottom: 22px;
}

.home-panel {
 overflow: visible;
}

.compact-title {
 padding: 0 0 18px;
}

.home-city-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 12px;
}

.home-city-link {
 display: grid;
 gap: 4px;
 padding: 14px 16px;
 border-radius: 18px;
 text-decoration: none;
 background: rgba(248,250,252,.95);
 border: 1px solid rgba(148,163,184,.24);
 color: #0f172a;
 transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.home-city-link:hover {
 transform: translateY(-1px);
 border-color: rgba(37,99,235,.36);
 background: #eff6ff;
}

.home-city-link strong {
 font-size: 17px;
 font-weight: 950;
}

.home-city-link span {
 color: #64748b;
 font-size: 13px;
 font-weight: 750;
}

.home-feature-panel h2 {
 margin-top: 0;
}

.home-feature-list {
 display: grid;
 gap: 10px;
}

.home-feature-list span {
 padding: 12px 14px;
 border-radius: 16px;
 background: #f8fafc;
 border: 1px solid rgba(148,163,184,.22);
 color: #334155;
 font-weight: 800;
}

.home-region-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 12px;
}

.home-region-chip {
 display: grid;
 gap: 4px;
 padding: 14px 16px;
 border-radius: 18px;
 background: rgba(248,250,252,.95);
 border: 1px solid rgba(148,163,184,.24);
}

.home-region-chip strong {
 color: #0f172a;
 font-size: 15px;
 font-weight: 950;
}

.home-region-chip em {
 color: #64748b;
 font-size: 13px;
 font-style: normal;
 font-weight: 750;
}

.home-hero .city-suggestions,
.home-search .city-suggestions {
 z-index: 999999;
 text-align: left;
}

@media (max-width: 980px) {
 .home-grid {
 grid-template-columns: 1fr;
 }

 .home-city-grid,
 .home-region-grid {
 grid-template-columns: repeat(2, 1fr);
 }
}

@media (max-width: 640px) {
 .home-hero {
 padding: 28px 18px;
 border-radius: 30px;
 }

 .home-hero h1 {
 letter-spacing: -1.2px;
 }

 .home-search .city-search-box {
 grid-template-columns: 1fr;
 }

 .home-city-grid,
 .home-region-grid {
 grid-template-columns: 1fr;
 }
}


/* HOME V7 — page d'accueil plus propre */
.home-body {
 background:
 radial-gradient(circle at 10% 0%, rgba(37,99,235,.18), transparent 28rem),
 radial-gradient(circle at 90% 8%, rgba(14,165,233,.14), transparent 26rem),
 linear-gradient(135deg, #eef6ff, #f8fafc 52%, #eef6ff);
}

.home-site {
 width: min(1180px, calc(100% - 36px));
 padding-top: 26px;
}

.home-topbar {
 margin-bottom: 26px;
}

.home-hero {
 margin-bottom: 34px !important;
 padding: clamp(42px, 7vw, 86px) clamp(22px, 5vw, 72px) !important;
 border-radius: 44px !important;
 background:
 radial-gradient(circle at 78% 16%, rgba(14,165,233,.20), transparent 18rem),
 radial-gradient(circle at 18% 18%, rgba(37,99,235,.18), transparent 21rem),
 linear-gradient(145deg, rgba(255,255,255,.98), rgba(239,246,255,.90)) !important;
 border: 1px solid rgba(148,163,184,.24) !important;
 box-shadow: 0 32px 90px rgba(15,23,42,.12) !important;
}

.home-hero-content {
 max-width: 920px !important;
}

.home-hero .eyebrow {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 margin-bottom: 14px;
 padding: 9px 16px;
 border-radius: 999px;
 background: #eff6ff;
 border: 1px solid #bfdbfe;
 color: #1d4ed8;
 font-size: 14px;
 font-weight: 950;
}

.home-hero h1 {
 max-width: 860px;
 margin: 0 auto 20px !important;
 font-size: clamp(42px, 5.7vw, 72px) !important;
 line-height: 1.02 !important;
 letter-spacing: -2.4px !important;
}

.home-lead {
 max-width: 760px !important;
 margin-bottom: 34px !important;
 color: #475569 !important;
 font-size: clamp(17px, 1.7vw, 21px) !important;
 line-height: 1.65 !important;
}

.home-search {
 position: relative;
 z-index: 50;
 width: min(780px, 100%) !important;
 padding: 12px !important;
 border-radius: 30px !important;
 background: rgba(255,255,255,.92) !important;
 border: 1px solid rgba(147,197,253,.55) !important;
 box-shadow: 0 24px 60px rgba(15,23,42,.14) !important;
}

.home-search .city-search-box {
 gap: 12px !important;
}

.home-search .city-search-input {
 min-height: 62px !important;
 border-radius: 20px !important;
 padding: 0 22px !important;
 font-size: 18px !important;
 box-shadow: inset 0 0 0 1px rgba(148,163,184,.20);
}

.home-search button {
 min-height: 62px !important;
 border-radius: 20px !important;
 padding: 0 28px !important;
 font-size: 16px;
 box-shadow: 0 14px 30px rgba(37,99,235,.22);
}

.home-count {
 margin-top: 20px !important;
 font-size: 15px;
}

.home-grid {
 display: grid;
 grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr) !important;
 gap: 30px !important;
 align-items: start;
 margin-bottom: 30px !important;
}

.home-panel {
 padding: 30px !important;
 border-radius: 34px !important;
 background: rgba(255,255,255,.92) !important;
 border: 1px solid rgba(148,163,184,.24) !important;
 box-shadow: 0 24px 70px rgba(15,23,42,.09) !important;
}

.compact-title {
 display: flex;
 align-items: end;
 justify-content: space-between;
 padding: 0 0 22px !important;
 margin: 0 !important;
}

.compact-title h2,
.home-feature-panel h2 {
 margin: 0 !important;
 font-size: clamp(25px, 2.5vw, 34px) !important;
 letter-spacing: -0.8px;
}

.home-section-intro {
 margin: 8px 0 0;
 color: #64748b;
 font-size: 15px;
 line-height: 1.5;
}

.home-city-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
 gap: 16px !important;
}

.home-city-link {
 position: relative;
 display: grid !important;
 min-height: 92px;
 align-content: center;
 gap: 8px !important;
 padding: 18px 18px 18px 20px !important;
 border-radius: 24px !important;
 background:
 radial-gradient(circle at 90% 10%, rgba(37,99,235,.10), transparent 5rem),
 #f8fafc !important;
 border: 1px solid rgba(148,163,184,.22) !important;
 text-decoration: none !important;
 box-shadow: 0 10px 26px rgba(15,23,42,.045);
}

.home-city-link::after {
 content: "→";
 position: absolute;
 right: 16px;
 top: 16px;
 width: 28px;
 height: 28px;
 display: grid;
 place-items: center;
 border-radius: 999px;
 background: #e0f2fe;
 color: #0369a1;
 font-weight: 950;
}

.home-city-link:hover {
 transform: translateY(-2px) !important;
 background: #eff6ff !important;
 border-color: rgba(37,99,235,.38) !important;
 box-shadow: 0 16px 36px rgba(15,23,42,.08);
}

.home-city-name,
.home-city-link strong {
 display: block;
 max-width: calc(100% - 32px);
 color: #0f172a;
 font-size: 19px !important;
 font-weight: 950 !important;
 line-height: 1.15;
}

.home-city-meta,
.home-city-link span {
 display: block;
 color: #64748b !important;
 font-size: 14px !important;
 font-weight: 750 !important;
 line-height: 1.25;
}

.home-feature-panel {
 position: sticky;
 top: 18px;
}

.home-feature-panel .eyebrow-small {
 margin-bottom: 10px;
}

.home-feature-list {
 gap: 14px !important;
 margin-top: 22px;
}

.home-feature-list span {
 display: grid !important;
 gap: 4px !important;
 padding: 16px 18px !important;
 border-radius: 22px !important;
 background: linear-gradient(135deg, #f8fafc, #ffffff) !important;
 border: 1px solid rgba(148,163,184,.22) !important;
}

.home-feature-list span strong {
 color: #0f172a;
 font-size: 16px;
 font-weight: 950;
}

.home-feature-list span em {
 color: #64748b;
 font-size: 14px;
 font-style: normal;
 font-weight: 700;
}

.home-regions-panel {
 margin-top: 0;
}

.home-region-grid {
 grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
 gap: 16px !important;
}

.home-region-chip {
 min-height: 82px;
 align-content: center;
 padding: 18px !important;
 border-radius: 24px !important;
 background: #f8fafc !important;
 border: 1px solid rgba(148,163,184,.22) !important;
}

.home-region-chip strong {
 font-size: 16px !important;
 line-height: 1.2;
}

.home-region-chip em {
 margin-top: 3px;
}

.home-hero .city-suggestions,
.home-search .city-suggestions {
 top: calc(100% + 12px) !important;
 border-radius: 24px !important;
 padding: 10px !important;
 background: rgba(255,255,255,.98) !important;
 border: 1px solid rgba(148,163,184,.28) !important;
 box-shadow: 0 28px 70px rgba(15,23,42,.18) !important;
}

.home-hero .city-suggestion,
.home-search .city-suggestion {
 border-radius: 16px !important;
 margin: 2px 0 !important;
 padding: 13px 15px !important;
}

@media (max-width: 1080px) {
 .home-grid {
 grid-template-columns: 1fr !important;
 }

 .home-feature-panel {
 position: static;
 }

 .home-city-grid {
 grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
 }

 .home-region-grid {
 grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
 }
}

@media (max-width: 680px) {
 .home-site {
 width: min(100% - 22px, 1180px);
 padding-top: 14px;
 }

 .home-hero {
 padding: 30px 18px !important;
 border-radius: 32px !important;
 margin-bottom: 24px !important;
 }

 .home-hero h1 {
 font-size: clamp(34px, 11vw, 46px) !important;
 letter-spacing: -1.2px !important;
 }

 .home-lead {
 font-size: 16px !important;
 }

 .home-search .city-search-box {
 grid-template-columns: 1fr !important;
 }

 .home-search button {
 width: 100%;
 }

 .home-panel {
 padding: 22px !important;
 border-radius: 28px !important;
 }

 .home-city-grid,
 .home-region-grid {
 grid-template-columns: 1fr !important;
 gap: 12px !important;
 }

 .home-city-link {
 min-height: 78px;
 }
}

/* HOME V8 — accueil aéré, inspiré du bloc cityes proches */
.home-v8,
.home-v8 * {
 box-sizing: border-box;
}

.home-v8 .home-hero-v8,
.home-v8 .home-section-v8 {
 background: rgba(255,255,255,.92) !important;
 border: 1px solid rgba(148,163,184,.24) !important;
 box-shadow: 0 24px 70px rgba(15,23,42,.09) !important;
 backdrop-filter: blur(16px);
}

.home-v8 .home-hero-v8 {
 position: relative;
 z-index: 20;
 margin: 0 0 34px !important;
 padding: clamp(38px, 6vw, 72px) clamp(22px, 5vw, 64px) !important;
 border-radius: 42px !important;
 text-align: center;
 background:
 radial-gradient(circle at 80% 10%, rgba(14,165,233,.18), transparent 18rem),
 radial-gradient(circle at 18% 16%, rgba(37,99,235,.16), transparent 20rem),
 linear-gradient(145deg, rgba(255,255,255,.98), rgba(239,246,255,.92)) !important;
}

.home-v8 .home-hero-copy-v8 {
 max-width: 900px;
 margin: 0 auto;
}

.home-v8 .home-kicker-v8 {
 display: inline-flex !important;
 align-items: center;
 justify-content: center;
 width: auto !important;
 min-width: 0 !important;
 min-height: 0 !important;
 margin: 0 0 14px !important;
 padding: 8px 15px !important;
 border-radius: 999px !important;
 background: #eff6ff !important;
 border: 1px solid #bfdbfe !important;
 color: #1d4ed8 !important;
 font-size: 13px !important;
 font-weight: 950 !important;
 line-height: 1 !important;
 text-transform: uppercase;
 letter-spacing: .08em;
}

.home-v8 .home-hero-v8 h1 {
 max-width: 880px;
 margin: 0 auto 18px !important;
 font-size: clamp(38px, 5.2vw, 68px) !important;
 line-height: 1.03 !important;
 letter-spacing: -2.2px !important;
}

.home-v8 .home-lead-v8 {
 max-width: 760px;
 margin: 0 auto 30px !important;
 color: #475569;
 font-size: clamp(17px, 1.65vw, 21px);
 line-height: 1.65;
}

.home-v8 .home-search-v8 {
 position: relative !important;
 z-index: 9999 !important;
 width: min(760px, 100%) !important;
 margin: 0 auto !important;
 padding: 12px !important;
 border-radius: 30px !important;
 background: rgba(255,255,255,.94) !important;
 border: 1px solid rgba(147,197,253,.55) !important;
 box-shadow: 0 24px 60px rgba(15,23,42,.14) !important;
}

.home-v8 .home-search-box-v8 {
 position: relative !important;
 display: grid !important;
 grid-template-columns: minmax(0,1fr) auto !important;
 gap: 12px !important;
}

.home-v8 .home-search-input-v8 {
 width: 100% !important;
 min-height: 62px !important;
 border: 0 !important;
 border-radius: 20px !important;
 padding: 0 22px !important;
 background: #ffffff !important;
 box-shadow: inset 0 0 0 1px rgba(148,163,184,.22) !important;
 font-size: 18px !important;
 outline: none !important;
}

.home-v8 .home-search-v8 button {
 min-height: 62px !important;
 border-radius: 20px !important;
 padding: 0 28px !important;
 white-space: nowrap !important;
 box-shadow: 0 14px 30px rgba(37,99,235,.22) !important;
}

.home-v8 .home-count-v8 {
 display: block !important;
 margin: 20px 0 0 !important;
 padding: 0 !important;
 background: transparent !important;
 border: 0 !important;
 box-shadow: none !important;
 color: #64748b !important;
 font-size: 15px !important;
 font-weight: 800 !important;
}

.home-v8 .home-section-v8 {
 margin: 0 0 32px !important;
 padding: 32px !important;
 border-radius: 34px !important;
}

.home-v8 .home-section-head-v8 {
 margin: 0 0 24px !important;
}

.home-v8 .home-section-head-v8 h2 {
 margin: 0 !important;
 font-size: clamp(26px, 2.8vw, 36px) !important;
 line-height: 1.12 !important;
 letter-spacing: -.8px !important;
}

.home-v8 .home-section-head-v8 p:not(.home-kicker-v8) {
 margin: 10px 0 0 !important;
 color: #64748b !important;
 font-size: 16px !important;
 line-height: 1.55 !important;
}

.home-v8 .home-city-grid-v8 {
 display: grid !important;
 grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
 gap: 18px !important;
}

.home-v8 .home-city-card-v8 {
 position: relative;
 min-height: 96px;
 display: grid !important;
 grid-template-columns: 10px minmax(0,1fr) auto !important;
 align-items: center !important;
 gap: 16px !important;
 padding: 20px !important;
 border-radius: 24px !important;
 background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
 border: 1px solid rgba(148,163,184,.24) !important;
 box-shadow: 0 12px 28px rgba(15,23,42,.055) !important;
 color: #0f172a !important;
 text-decoration: none !important;
 transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.home-v8 .home-city-card-v8:hover {
 transform: translateY(-2px) !important;
 background: #eff6ff !important;
 border-color: rgba(37,99,235,.38) !important;
 box-shadow: 0 18px 42px rgba(15,23,42,.10) !important;
}

.home-v8 .home-city-dot-v8 {
 width: 10px !important;
 height: 10px !important;
 border-radius: 999px !important;
 background: #2563eb !important;
 box-shadow: 0 0 0 6px rgba(37,99,235,.10) !important;
}

.home-v8 .home-city-text-v8 {
 display: grid !important;
 gap: 5px !important;
 min-width: 0 !important;
}

.home-v8 .home-city-text-v8 strong {
 display: block !important;
 color: #0f172a !important;
 font-size: 19px !important;
 font-weight: 950 !important;
 line-height: 1.15 !important;
 overflow-wrap: anywhere;
}

.home-v8 .home-city-text-v8 em {
 display: block !important;
 color: #64748b !important;
 font-size: 14px !important;
 font-style: normal !important;
 font-weight: 750 !important;
 line-height: 1.25 !important;
}

.home-v8 .home-city-card-v8 b {
 width: 34px !important;
 height: 34px !important;
 display: grid !important;
 place-items: center !important;
 border-radius: 999px !important;
 background: #e0f2fe !important;
 color: #0369a1 !important;
 font-size: 18px !important;
 font-weight: 950 !important;
}

.home-v8 .home-two-cols-v8 {
 display: grid !important;
 grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) !important;
 gap: 32px !important;
 align-items: start !important;
}

.home-v8 .home-feature-grid-v8,
.home-v8 .home-region-list-v8 {
 display: grid !important;
 gap: 16px !important;
}

.home-v8 .home-feature-grid-v8 span,
.home-v8 .home-region-card-v8 {
 display: grid !important;
 gap: 5px !important;
 padding: 18px 20px !important;
 border-radius: 22px !important;
 background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
 border: 1px solid rgba(148,163,184,.24) !important;
 color: #334155 !important;
 box-shadow: 0 10px 24px rgba(15,23,42,.04) !important;
}

.home-v8 .home-feature-grid-v8 strong,
.home-v8 .home-region-card-v8 strong {
 color: #0f172a !important;
 font-size: 16px !important;
 font-weight: 950 !important;
}

.home-v8 .home-feature-grid-v8 em,
.home-v8 .home-region-card-v8 em {
 color: #64748b !important;
 font-size: 14px !important;
 font-style: normal !important;
 font-weight: 700 !important;
}

.home-v8 .home-region-list-v8 {
 grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.home-v8 .home-search-v8 .city-suggestions {
 position: absolute !important;
 top: calc(100% + 14px) !important;
 left: 0 !important;
 right: 0 !important;
 z-index: 999999 !important;
 border-radius: 24px !important;
 padding: 10px !important;
 background: rgba(255,255,255,.98) !important;
 border: 1px solid rgba(148,163,184,.28) !important;
 box-shadow: 0 28px 70px rgba(15,23,42,.18) !important;
 text-align: left !important;
}

.home-v8 .home-search-v8 .city-suggestion {
 border-radius: 16px !important;
 margin: 2px 0 !important;
 padding: 14px 16px !important;
}

.home-v8 .home-search-v8 .city-suggestion span {
 color: #64748b !important;
}

@media (max-width: 1050px) {
 .home-v8 .home-city-grid-v8,
 .home-v8 .home-two-cols-v8,
 .home-v8 .home-region-list-v8 {
 grid-template-columns: repeat(2, minmax(0,1fr)) !important;
 }
}

@media (max-width: 720px) {
 .home-v8 .home-hero-v8 {
 padding: 30px 18px !important;
 border-radius: 32px !important;
 margin-bottom: 24px !important;
 }

 .home-v8 .home-hero-v8 h1 {
 font-size: clamp(34px, 11vw, 46px) !important;
 letter-spacing: -1.2px !important;
 }

 .home-v8 .home-search-box-v8,
 .home-v8 .home-city-grid-v8,
 .home-v8 .home-two-cols-v8,
 .home-v8 .home-region-list-v8 {
 grid-template-columns: 1fr !important;
 }

 .home-v8 .home-search-v8 button {
 width: 100% !important;
 }

 .home-v8 .home-section-v8 {
 padding: 22px !important;
 border-radius: 28px !important;
 margin-bottom: 24px !important;
 }

 .home-v8 .home-city-card-v8 {
 min-height: 82px !important;
 padding: 18px !important;
 }
}

/* HOME V9 — vraie page d'accueil aérée */
.home-v9 {
 padding-bottom: 70px;
}

.home-topbar-v9 {
 margin-bottom: 28px;
}

.home-hero-v9,
.home-section-v9,
.home-seo-v9 {
 background: rgba(255,255,255,.90);
 border: 1px solid rgba(148,163,184,.25);
 box-shadow: 0 24px 60px rgba(15,23,42,.10);
 backdrop-filter: blur(16px);
}

.home-hero-v9 {
 position: relative;
 z-index: 30;
 display: grid;
 gap: 28px;
 padding: clamp(30px, 5vw, 56px);
 border-radius: 38px;
 margin-bottom: 28px;
 background:
 radial-gradient(circle at top right, rgba(37,99,235,.16), transparent 18rem),
 linear-gradient(135deg, rgba(255,255,255,.96), rgba(239,246,255,.86));
}

.home-kicker-v9 {
 margin: 0 0 10px;
 color: #2563eb;
 font-size: 13px;
 font-weight: 950;
 text-transform: uppercase;
 letter-spacing: .12em;
}

.home-hero-copy-v9 h1 {
 max-width: 860px;
 margin: 0;
 font-size: clamp(40px, 6vw, 72px);
 line-height: .98;
 letter-spacing: -2.5px;
 font-weight: 950;
}

.home-lead-v9 {
 max-width: 760px;
 margin: 22px 0 0;
 color: #475569;
 font-size: clamp(18px, 2vw, 22px);
 line-height: 1.65;
 font-weight: 650;
}

.home-search-v9 {
 width: min(820px, 100%);
 padding: 12px;
 border-radius: 28px;
 background: rgba(255,255,255,.74);
 border: 1px solid rgba(147,197,253,.55);
 box-shadow: 0 18px 45px rgba(37,99,235,.12);
 position: relative;
 z-index: 1000;
}

.home-search-box-v9 {
 display: grid;
 grid-template-columns: 1fr auto;
 gap: 12px;
 position: relative;
 width: 100%;
}

.home-search-input-v9 {
 width: 100%;
 border: 0;
 border-radius: 20px;
 padding: 18px 20px;
 background: #ffffff;
 color: #0f172a;
 font-size: 18px;
 font-weight: 700;
 outline: none;
}

.home-search-v9 button {
 border-radius: 20px;
 padding: 18px 24px;
 font-size: 16px;
 font-weight: 900;
}

.home-search-v9 .city-suggestions {
 top: calc(100% + 12px);
 z-index: 99999;
 border-radius: 24px;
 overflow: hidden;
 box-shadow: 0 30px 70px rgba(15,23,42,.20);
}

.home-section-v9,
.home-seo-v9 {
 border-radius: 34px;
 padding: clamp(26px, 4vw, 42px);
 margin-bottom: 28px;
}

.home-section-head-v9 {
 max-width: 760px;
 margin-bottom: 26px;
}

.home-section-head-v9 h2,
.home-maillage-copy-v9 h2,
.home-seo-v9 h2 {
 margin: 0;
 font-size: clamp(28px, 3vw, 40px);
 line-height: 1.1;
 letter-spacing: -1px;
 font-weight: 950;
}

.home-section-head-v9 p:not(.home-kicker-v9),
.home-maillage-copy-v9 p,
.home-seo-v9 p {
 margin: 14px 0 0;
 color: #475569;
 font-size: 17px;
 line-height: 1.7;
}

.home-maillage-v9 {
 display: grid;
 grid-template-columns: 1.1fr .9fr;
 gap: 28px;
 align-items: center;
 background:
 radial-gradient(circle at top left, rgba(14,165,233,.12), transparent 18rem),
 linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.92));
}

.home-maillage-stats-v9 {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 16px;
}

.home-maillage-stats-v9 span {
 min-height: 128px;
 display: grid;
 align-content: center;
 gap: 8px;
 padding: 20px;
 border-radius: 28px;
 background: #ffffff;
 border: 1px solid rgba(148,163,184,.24);
 box-shadow: 0 16px 34px rgba(15,23,42,.07);
 text-align: center;
}

.home-maillage-stats-v9 strong {
 color: #0f172a;
 font-size: clamp(28px, 3vw, 40px);
 line-height: 1;
 font-weight: 950;
}

.home-maillage-stats-v9 em {
 color: #64748b;
 font-style: normal;
 font-size: 14px;
 font-weight: 850;
 text-transform: uppercase;
 letter-spacing: .08em;
}

.home-city-grid-v9 {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 16px;
}

.home-city-card-v9 {
 min-height: 86px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 14px;
 padding: 18px 20px;
 border-radius: 24px;
 background: #ffffff;
 border: 1px solid rgba(148,163,184,.24);
 box-shadow: 0 14px 30px rgba(15,23,42,.07);
 color: #0f172a;
 text-decoration: none;
 transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.home-city-card-v9:hover {
 transform: translateY(-2px);
 border-color: rgba(37,99,235,.40);
 box-shadow: 0 20px 42px rgba(15,23,42,.11);
}

.home-city-text-v9 {
 min-width: 0;
 display: grid;
 gap: 6px;
}

.home-city-text-v9 strong {
 font-size: 18px;
 font-weight: 950;
 line-height: 1.1;
}

.home-city-text-v9 em {
 color: #64748b;
 font-size: 14px;
 font-style: normal;
 font-weight: 750;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.home-city-card-v9 b {
 width: 34px;
 height: 34px;
 display: grid;
 place-items: center;
 flex: 0 0 34px;
 border-radius: 999px;
 background: #eff6ff;
 color: #2563eb;
 font-size: 18px;
}

.home-department-grid-v9 {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 16px;
}

.home-department-card-v9 {
 min-height: 82px;
 display: grid;
 align-content: center;
 gap: 7px;
 padding: 18px 20px;
 border-radius: 22px;
 background: #ffffff;
 border: 1px solid rgba(148,163,184,.24);
 box-shadow: 0 14px 30px rgba(15,23,42,.06);
}

.home-department-card-v9 strong {
 color: #0f172a;
 font-size: 17px;
 font-weight: 950;
}

.home-department-card-v9 em {
 color: #2563eb;
 font-size: 14px;
 font-style: normal;
 font-weight: 850;
}

.home-seo-v9 {
 background: rgba(255,255,255,.78);
}

.home-seo-v9 p {
 max-width: 980px;
}

@media (max-width: 1100px) {
 .home-city-grid-v9,
 .home-department-grid-v9 {
 grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 .home-maillage-v9 {
 grid-template-columns: 1fr;
 }
}

@media (max-width: 760px) {
 .home-hero-v9,
 .home-section-v9,
 .home-seo-v9 {
 border-radius: 28px;
 }
 .home-search-box-v9 {
 grid-template-columns: 1fr;
 }
 .home-city-grid-v9,
 .home-department-grid-v9,
 .home-maillage-stats-v9 {
 grid-template-columns: 1fr;
 }
 .home-city-card-v9,
 .home-department-card-v9 {
 min-height: 74px;
 }
}


/* V10 — pages provincia */
.department-site {
 padding-bottom: 56px;
}

.department-topbar {
 position: relative;
 z-index: 20;
}

.department-search {
 min-width: min(460px, 100%);
}

.department-hero,
.department-section {
 background: var(--card);
 border: 1px solid var(--border);
 box-shadow: var(--shadow);
 backdrop-filter: blur(16px);
 border-radius: 34px;
}

.department-hero {
 display: grid;
 grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
 gap: 30px;
 align-items: center;
 padding: 38px;
 margin-bottom: 28px;
}

.department-hero h1 {
 margin: 0;
 font-size: clamp(38px, 5vw, 64px);
 line-height: 1;
}

.department-hero p:not(.home-kicker-v9) {
 margin: 18px 0 0;
 color: #475569;
 font-size: 18px;
 line-height: 1.75;
 max-width: 760px;
}

.department-stats {
 display: grid;
 gap: 14px;
}

.department-stats span {
 display: grid;
 gap: 4px;
 padding: 18px 20px;
 border-radius: 24px;
 background: rgba(255,255,255,.72);
 border: 1px solid rgba(148,163,184,.22);
}

.department-stats strong {
 font-size: 30px;
 line-height: 1;
 color: #0f172a;
 font-weight: 950;
}

.department-stats em {
 color: #64748b;
 font-style: normal;
 font-weight: 800;
}

.department-section {
 padding: 30px;
 margin-bottom: 28px;
}

.department-city-grid.featured {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 16px;
}

.department-municipio-grid {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 12px;
}

.department-municipio-link {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 padding: 15px 16px;
 border-radius: 18px;
 background: rgba(255,255,255,.74);
 border: 1px solid rgba(148,163,184,.22);
 color: #0f172a;
 text-decoration: none;
 transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.department-municipio-link:hover {
 transform: translateY(-1px);
 background: #ffffff;
 border-color: rgba(37,99,235,.34);
 box-shadow: 0 14px 32px rgba(15,23,42,.08);
}

.department-municipio-link strong {
 min-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 font-size: 15px;
}

.department-municipio-link span {
 flex: 0 0 auto;
 color: #2563eb;
 font-size: 13px;
 font-weight: 850;
}

.home-department-card-v9 {
 text-decoration: none;
}

.home-department-card-v9 b {
 margin-left: auto;
 color: #2563eb;
 font-size: 20px;
}

.department-seo {
 margin-top: 0;
}

@media (max-width: 1020px) {
 .department-hero {
 grid-template-columns: 1fr;
 }

 .department-city-grid.featured {
 grid-template-columns: repeat(2, minmax(0, 1fr));
 }

 .department-municipio-grid {
 grid-template-columns: repeat(3, minmax(0, 1fr));
 }
}

@media (max-width: 720px) {
 .department-hero,
 .department-section {
 padding: 22px;
 border-radius: 28px;
 }

 .department-city-grid.featured,
 .department-municipio-grid {
 grid-template-columns: 1fr;
 }

 .department-municipio-link span {
 display: none;
 }

 .department-search {
 min-width: 0;
 }
}


/* V11 — ancres SEO propres + suppression des petites bulles parasites */
.home-city-card-v9 b,
.home-department-card-v9 b,
.department-municipio-link span {
 display: none !important;
}

.seo-city-anchor,
.seo-department-anchor,
.seo-municipio-anchor {
 text-decoration: none !important;
}

.seo-city-anchor {
 align-items: center;
 justify-content: flex-start;
}

.seo-city-anchor .home-city-text-v9 strong {
 font-size: 16px;
 line-height: 1.25;
}

.seo-department-anchor {
 display: grid;
 gap: 9px;
 align-content: center;
}

.seo-department-anchor strong {
 line-height: 1.25;
}

.department-municipio-link.seo-municipio-anchor {
 justify-content: flex-start;
 min-height: 58px;
 padding: 16px 18px;
}

.department-municipio-link.seo-municipio-anchor strong {
 white-space: normal;
 overflow: visible;
 text-overflow: initial;
 line-height: 1.25;
}

.department-section,
.department-hero,
.home-section-v9,
.home-seo-v9 {
 position: relative;
 overflow: visible;
}

/* Si un ancien bloc de debug/JSON a été laissé dans le HTML par erreur, on l'éteint visuellement. */
.debug-json,
.json-debug,
pre.debug,
pre.json-debug {
 display: none !important;
}


/* =========================================================
 Correctif AJAX provincia — bouton VOIR aligné à droite
 À laisser en fin de fichier pour écraser les anciennes règles
 ========================================================= */

.department-search {
 position: relative !important;
 z-index: 5001 !important;
 flex: 0 1 460px !important;
 width: min(460px, 100%) !important;
 max-width: 100% !important;
 overflow: visible !important;
}

.department-search .city-search-box {
 position: relative !important;
 display: grid !important;
 grid-template-columns: minmax(0, 1fr) auto !important;
 align-items: center !important;
 gap: 10px !important;
 width: 100% !important;
 min-width: 0 !important;
 overflow: visible !important;
}

.department-search .city-search-input,
.department-search input[type="search"] {
 width: 100% !important;
 min-width: 0 !important;
 height: 46px !important;
 padding: 0 14px !important;
}

.department-search input[type="hidden"] {
 display: none !important;
}

.department-search button,
.department-search button[type="submit"] {
 width: auto !important;
 min-width: 70px !important;
 height: 46px !important;
 padding: 0 18px !important;
 margin: 0 !important;
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 white-space: nowrap !important;
 justify-self: end !important;
 grid-column: 2 !important;
 grid-row: 1 !important;
}

.department-search .city-suggestions,
#department-city-suggestions {
 position: absolute !important;
 z-index: 99999 !important;
 top: calc(100% + 8px) !important;
 left: 0 !important;
 right: 0 !important;
 width: 100% !important;
 grid-column: 1 / -1 !important;
}

@media (max-width: 760px) {
 .department-search {
 width: 100% !important;
 flex-basis: 100% !important;
 }

 .department-search .city-search-box {
 grid-template-columns: 1fr !important;
 }

 .department-search button,
 .department-search button[type="submit"] {
 width: 100% !important;
 min-width: 0 !important;
 justify-self: stretch !important;
 grid-column: 1 !important;
 grid-row: 2 !important;
 }
}

/* SEO V3 — maillage en bulles, liens limités et silo propre */
.seo-bubble-card {
 border-radius: 28px !important;
 border: 1px solid rgba(148, 163, 184, .22) !important;
 background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(239,246,255,.88)) !important;
 box-shadow: 0 20px 55px rgba(15, 23, 42, .10) !important;
 overflow: hidden;
}

.seo-card-grid-compact {
 gap: 12px !important;
}

.seo-toc-panel {
 margin: 18px 0 22px;
 padding: 22px;
 border-radius: 26px;
 background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(248,250,252,.94));
 border: 1px solid rgba(148, 163, 184, .22);
 box-shadow: 0 18px 45px rgba(15, 23, 42, .09);
}

.seo-toc-panel h2 {
 margin: 4px 0 14px;
 font-size: 1.35rem;
}

.seo-toc-links {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
}

.seo-toc-links a,
.seo-mini-footer-links a {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 38px;
 padding: 9px 14px;
 border-radius: 999px;
 background: rgba(37, 99, 235, .08);
 border: 1px solid rgba(37, 99, 235, .14);
 color: #1e3a8a;
 font-weight: 800;
 text-decoration: none;
}

.seo-toc-links a:hover,
.seo-mini-footer-links a:hover {
 transform: translateY(-1px);
 background: rgba(37, 99, 235, .14);
}

.seo-city-mesh-panel {
 margin-top: 24px;
}

.seo-city-mesh-panel .nearby-cities-grid {
 grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.seo-city-mesh-panel .nearby-city {
 min-height: 72px;
}

.seo-mini-footer-links {
 margin-top: 18px;
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
}

.home-section-v9.seo-bubble-card,
.home-seo-v9.seo-bubble-card,
.department-section.seo-bubble-card {
 padding: clamp(18px, 3vw, 28px) !important;
 margin-top: 24px;
}

@media (max-width: 720px) {
 .seo-toc-links a,
 .seo-mini-footer-links a {
 width: 100%;
 justify-content: flex-start;
 }
}

/* Ajustement demandé : réduire uniquement les espaces autour du texte de mise à jour
 placé dans la carte weather principale, sans changer la présentation générale. */
.hero-update-info {
 margin-top: 6px;
 padding-top: 6px;
 font-size: .84rem;
 line-height: 1.28;
}

.hero-update-info p {
 margin: 0;
}

.hero-bottom-stats {
 margin-bottom: 0;
}

/* Carte weather Spain - home */
.home-weather-map-section {
 overflow: hidden;
}

.home-weather-map-wrap {
 margin-top: 18px;
 border-radius: 24px;
 overflow: hidden;
 border: 1px solid rgba(15, 23, 42, .08);
 box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
 background: rgba(255, 255, 255, .72);
}

.home-weather-map {
 width: 100%;
 height: 500px;
 min-height: 360px;
 background: #dbeafe;
}

.home-weather-map-note {
 margin: 12px 2px 0;
 font-size: .86rem;
 color: rgba(71, 85, 105, .92);
 line-height: 1.45;
}

.weather-map-marker {
 background: transparent;
 border: 0;
}

.weather-map-pin {
 display: inline-flex;
 align-items: center;
 gap: 5px;
 min-width: 54px;
 justify-content: center;
 padding: 5px 8px;
 border-radius: 999px;
 background: rgba(255, 255, 255, .94);
 border: 1px solid rgba(15, 23, 42, .10);
 box-shadow: 0 8px 22px rgba(15, 23, 42, .20);
 color: #0f172a;
 font-weight: 800;
 line-height: 1;
 white-space: nowrap;
 backdrop-filter: blur(8px);
}

.weather-map-icon {
 font-size: 18px;
 line-height: 1;
}

.weather-map-pin strong {
 font-size: 13px;
 letter-spacing: -.02em;
}

.leaflet-popup-content {
 font-family: inherit;
 font-size: 14px;
 line-height: 1.45;
}

.leaflet-popup-content a {
 color: #2563eb;
 font-weight: 800;
 text-decoration: none;
}

.home-weather-map.is-unavailable::after {
 content: "Weather map temporarily unavailable";
 display: grid;
 place-items: center;
 height: 100%;
 color: #475569;
 font-weight: 700;
}

@media (max-width: 760px) {
 .home-weather-map {
 height: 390px;
 min-height: 320px;
 }

 .weather-map-pin {
 padding: 4px 7px;
 min-width: 48px;
 }

 .weather-map-icon {
 font-size: 16px;
 }

 .weather-map-pin strong {
 font-size: 12px;
 }
}

/* Correctif robuste Leaflet : évite les tuiles en carrés mélangés si la CSS CDN ne charge pas */
.leaflet-container {
 overflow: hidden;
 position: relative;
 outline-style: none;
 background: #dbeafe;
 font-family: inherit;
}
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
 position: absolute;
 left: 0;
 top: 0;
}
.leaflet-tile {
 width: 256px;
 height: 256px;
 user-select: none;
 -webkit-user-drag: none;
}
.leaflet-marker-icon,
.leaflet-marker-shadow {
 display: block;
}
.leaflet-tile-pane { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane { z-index: 500; }
.leaflet-marker-pane { z-index: 600; }
.leaflet-tooltip-pane { z-index: 650; }
.leaflet-popup-pane { z-index: 700; }
.leaflet-control {
 position: relative;
 z-index: 800;
 pointer-events: auto;
}
.leaflet-top,
.leaflet-bottom {
 position: absolute;
 z-index: 1000;
 pointer-events: none;
}
.leaflet-top { top: 0; }
.leaflet-right { right: 0; }
.leaflet-bottom { bottom: 0; }
.leaflet-left { left: 0; }
.leaflet-control-zoom {
 margin-left: 10px;
 margin-top: 10px;
 border-radius: 12px;
 overflow: hidden;
 box-shadow: 0 8px 22px rgba(15,23,42,.14);
}
.leaflet-control-zoom a {
 display: block;
 width: 30px;
 height: 30px;
 line-height: 30px;
 text-align: center;
 background: #fff;
 color: #0f172a;
 text-decoration: none;
 font-weight: 900;
 border-bottom: 1px solid rgba(15,23,42,.10);
}
.leaflet-control-attribution {
 background: rgba(255,255,255,.82);
 padding: 3px 7px;
 font-size: 11px;
}
.leaflet-popup {
 position: absolute;
 text-align: center;
 margin-bottom: 20px;
}
.leaflet-popup-content-wrapper {
 background: #fff;
 border-radius: 16px;
 box-shadow: 0 14px 36px rgba(15,23,42,.20);
 padding: 1px;
 text-align: left;
}
.leaflet-popup-content {
 margin: 12px 14px;
}
.leaflet-popup-tip-container {
 width: 40px;
 height: 20px;
 position: absolute;
 left: 50%;
 margin-left: -20px;
 overflow: hidden;
 pointer-events: none;
}
.leaflet-popup-tip {
 width: 14px;
 height: 14px;
 padding: 1px;
 margin: -7px auto 0;
 transform: rotate(45deg);
 background: #fff;
 box-shadow: 0 14px 36px rgba(15,23,42,.16);
}
.leaflet-popup-close-button {
 position: absolute;
 top: 6px;
 right: 8px;
 text-decoration: none;
 color: #64748b;
 font-weight: 900;
}
.leaflet-grab { cursor: grab; }
.leaflet-dragging .leaflet-grab { cursor: grabbing; }
.home-weather-map .leaflet-marker-icon.weather-map-marker {
 background: transparent !important;
 border: 0 !important;
}


/* Carte weather : pictos SVG animés identiques aux pages cityes */
.weather-map-pin.weather-map-pin-svg {
 gap: 4px;
 padding: 4px 7px 4px 5px;
 min-width: 58px;
 min-height: 34px;
}

.weather-map-svg {
 width: 28px;
 height: 28px;
 display: block;
 object-fit: contain;
 flex: 0 0 auto;
}

.weather-map-pin-svg strong {
 font-size: 13px;
 line-height: 1;
}

@media (max-width: 760px) {
 .weather-map-pin.weather-map-pin-svg {
 min-width: 52px;
 min-height: 31px;
 padding: 3px 6px 3px 4px;
 }

 .weather-map-svg {
 width: 25px;
 height: 25px;
 }
}


/* Carte weather V2 — SVG transparents + températures colorées */
.home-weather-map .leaflet-marker-icon.weather-map-marker,
.weather-map-marker {
 background: transparent !important;
 border: 0 !important;
 box-shadow: none !important;
}

.weather-map-pin,
.weather-map-pin.weather-map-pin-svg,
.weather-map-pin.weather-map-pin-fallback {
 background: transparent !important;
 border: 0 !important;
 box-shadow: none !important;
 backdrop-filter: none !important;
 padding: 0 !important;
 min-width: 0 !important;
 min-height: 0 !important;
 width: 58px !important;
 height: 66px !important;
 display: flex !important;
 flex-direction: column !important;
 align-items: center !important;
 justify-content: center !important;
 gap: 0 !important;
 color: #0f172a;
 line-height: 1;
 pointer-events: auto;
}

.weather-map-svg {
 width: 46px !important;
 height: 46px !important;
 display: block !important;
 object-fit: contain !important;
 filter: drop-shadow(0 5px 8px rgba(15, 23, 42, .22));
 margin: 0 auto -2px !important;
}

.weather-map-icon {
 font-size: 36px !important;
 line-height: 1 !important;
 filter: drop-shadow(0 5px 8px rgba(15, 23, 42, .22));
}

.weather-map-temp,
.weather-map-pin strong,
.weather-map-pin-svg strong {
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 min-width: 34px !important;
 padding: 3px 7px !important;
 border-radius: 999px !important;
 background: rgba(255, 255, 255, .88) !important;
 border: 1px solid rgba(255, 255, 255, .72) !important;
 box-shadow: 0 6px 14px rgba(15, 23, 42, .18) !important;
 font-size: 15px !important;
 font-weight: 950 !important;
 letter-spacing: -.04em !important;
 line-height: 1 !important;
 text-shadow: none !important;
}

.weather-map-temp-freezing { color: #0369a1 !important; }
.weather-map-temp-cold { color: #0e7490 !important; }
.weather-map-temp-mild { color: #047857 !important; }
.weather-map-temp-warm { color: #c2410c !important; }
.weather-map-temp-hot { color: #b91c1c !important; }
.weather-map-temp-neutral { color: #475569 !important; }

@media (max-width: 760px) {
 .weather-map-pin,
 .weather-map-pin.weather-map-pin-svg,
 .weather-map-pin.weather-map-pin-fallback {
 width: 50px !important;
 height: 58px !important;
 }

 .weather-map-svg {
 width: 39px !important;
 height: 39px !important;
 }

 .weather-map-icon {
 font-size: 30px !important;
 }


.hero-ai-bulletin,
.hero-ai-bulletin p {
 font-size: 14px;
 line-height: 1.55;
 font-weight: 400;
}

.hero-ai-bulletin strong {
 font-size: 14px;
 font-weight: 600;
}

 .weather-map-temp,
 .weather-map-pin strong,
 .weather-map-pin-svg strong {
 min-width: 30px !important;
 padding: 3px 6px !important;
 font-size: 13px !important;
 }
}


.brand{
 display:flex;
 align-items:center;
 text-decoration:none;
}

.site-logo{
 display:block;
 width:260px;
 height:auto;
 max-width:100%;
}

@media (max-width:768px){
 .site-logo{
 width:180px;
 }
}



/* Logo SVG weatherdehoy — correctif header */
.brand{
 display:inline-flex !important;
 align-items:center !important;
 gap:0 !important;
 text-decoration:none !important;
}
.site-logo{
 display:block !important;
 width:260px !important;
 height:auto !important;
 max-width:100% !important;
}
@media (max-width:640px){
 .site-logo{
 width:190px !important;
 }
}



/* ===== LOGO TIEMPODEHOY.COM ===== */

.brand{
 display:inline-flex !important;
 align-items:center !important;
 text-decoration:none !important;
 gap:0 !important;
}

.site-logo{
 display:block !important;
 width:450px !important;
 height:auto !important;
 max-width:none !important;
 object-fit:contain !important;
 object-position:left center !important;
}

.topbar{
 align-items:center !important;
 margin-bottom:18px !important;
}

@media (max-width:768px){
 .site-logo{
 width:250px !important;
 }
}


/* Legacy weather block — home addition */
.heritage-box-v1 {
 display: grid;
 grid-template-columns: 280px 1fr;
 gap: 34px;
 align-items: center;
 margin-top: 22px;
}

.heritage-logo-wrap-v1 {
 display: grid;
 justify-items: center;
 gap: 12px;
 padding: 28px;
 border-radius: 26px;
 background:
 radial-gradient(circle at top, rgba(15,23,42,.08), transparent 9rem),
 rgba(248,250,252,.86);
 border: 1px solid rgba(148,163,184,.24);
}

.heritage-logo-v1 {
 width: 220px;
 max-width: 100%;
 filter: grayscale(100%);
 opacity: .62;
}

.heritage-logo-wrap-v1 span {
 color: #64748b;
 font-size: 13px;
 font-weight: 900;
 text-transform: uppercase;
 letter-spacing: .10em;
}

.heritage-content-v1 h2 {
 margin: 0 0 16px;
 color: #0f172a;
 font-size: clamp(26px, 3vw, 36px);
 line-height: 1.12;
 letter-spacing: -.04em;
}

.heritage-content-v1 p {
 margin: 14px 0;
 color: #334155;
 font-size: 17px;
 line-height: 1.75;
}

.heritage-button-v1 {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 margin-top: 12px;
 padding: 14px 22px;
 border-radius: 999px;
 background: #0f172a;
 color: #ffffff;
 text-decoration: none;
 font-weight: 900;
 box-shadow: 0 14px 30px rgba(15,23,42,.16);
}

.heritage-button-v1:hover {
 background: #1e293b;
}

@media (max-width: 760px) {
 .heritage-box-v1 {
 grid-template-columns: 1fr;
 gap: 22px;
 }

 .heritage-logo-wrap-v1 {
 padding: 22px;
 }

 .heritage-logo-v1 {
 width: 190px;
 }

 .heritage-button-v1 {
 width: 100%;
 text-align: center;
 }
}

/* Correctif mobile — suppression du grand espace vide dans la première carte */
@media (max-width: 980px) {
 .hero-card {
 height: auto !important;
 min-height: 0 !important;
 align-items: stretch !important;
 }

 .hero-card .hero-text {
 flex: none !important;
 width: 100% !important;
 min-height: 0 !important;
 }

 .hero-card .current-weather {
 flex: none !important;
 width: 100% !important;
 min-height: 0 !important;
 margin-top: 0 !important;
 }
}

@media (max-width: 640px) {
 .hero-card {
 gap: 16px !important;
 padding: 20px !important;
 }

 .hero-card .hero-text {
 margin: 0 !important;
 padding: 0 !important;
 }

 .hero-card .current-weather {
 display: flex !important;
 align-items: center !important;
 justify-content: flex-start !important;
 gap: 14px !important;
 }

 .hero-bottom-stats {
 margin-top: 4px !important;
 }

.seo-hub-card,
.seo-province-directory,
.seo-region-directory,
.seo-home-cities {
 margin-top: 28px;
 padding: 22px;
 border-radius: 18px;
 background: #fff;
 box-shadow: 0 8px 28px rgba(22, 34, 51, .08);
}

.seo-hub-card h2,
.seo-province-directory h2,
.seo-region-directory h2,
.seo-home-cities h2 {
 margin: 0 0 18px;
 font-size: 1.3rem;
}

.seo-hub-levels {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 10px;
 margin-bottom: 14px;
}

.seo-hub-level,
.seo-hub-city-list a,
.seo-province-directory__list a,
.seo-region-directory__list a,
.seo-home-cities__list a {
 text-decoration: none;
}

.seo-hub-level {
 display: block;
 padding: 12px;
 border-radius: 11px;
 font-weight: 700;
 background: rgba(41, 98, 255, .08);
}

.seo-hub-city-list,
.seo-province-directory__list,
.seo-region-directory__list,
.seo-home-cities__list {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 gap: 9px 14px;
 padding: 0;
 margin: 0;
 list-style: none;
}

.seo-hub-city-list li,
.seo-province-directory__list li,
.seo-region-directory__list li,
.seo-home-cities__list li {
 padding: 9px 11px;
 border-radius: 10px;
 background: rgba(41, 98, 255, .05);
}

.seo-province-directory__list span,
.seo-region-directory__list span {
 display: block;
 margin-top: 3px;
 font-size: .82rem;
 opacity: .72;
}

@media (max-width: 680px) {
 .seo-hub-levels {
 grid-template-columns: 1fr;
 }

 .seo-hub-city-list,
 .seo-province-directory__list,
 .seo-region-directory__list,
 .seo-home-cities__list {
 grid-template-columns: 1fr;
 }
}



}


/* ==========================================================
 TIEMPODEHOY.COM — Meteocons plus grandes sur mobile
 Modification uniquement visuelle, sans changement desktop
 ========================================================== */
@media (max-width: 640px) {
 /* Icône météo principale */
 .big-icon {
 width: 120px !important;
 height: 120px !important;
 }

 .current-weather-icon {
 width: 112px !important;
 height: 112px !important;
 }

 /* Icônes du résumé des prochaines heures */
 .hour-icon,
 .hour-weather-icon,
 .premium-hour-card .hour-icon img,
 .hour-card .hour-icon img {
 width: 76px !important;
 height: 76px !important;
 }

 /* Icônes des prévisions générales */
 .forecast-icon,
 .forecast-weather-icon {
 width: 68px !important;
 height: 68px !important;
 }

 /* Icônes des prévisions détaillées par tranches de 3 heures */
 .weather-emoji.big,
 .detail-weather-icon {
 width: 92px !important;
 height: 92px !important;
 flex-basis: 92px !important;
 }
}


/* =========================================================
 MOBILE COMPACT V1 — réduction de la longueur verticale
 Ajouté sans modifier l'affichage desktop
 ========================================================= */
@media (max-width: 640px) {

 /* Structure générale */
 .site {
 width: calc(100% - 12px) !important;
 padding: 6px 0 24px !important;
 }

 .topbar {
 gap: 10px !important;
 margin-bottom: 10px !important;
 }

 main > section,
 .content-grid,
 .wind-chart-panel,
 .temp-chart-panel,
 .hourly-cards-panel {
 margin-bottom: 12px !important;
 }

 .panel {
 padding: 14px !important;
 border-radius: 22px !important;
 }

 .panel h2 {
 margin-bottom: 12px !important;
 font-size: 25px !important;
 line-height: 1.08 !important;
 letter-spacing: -.45px !important;
 }

 .section-title {
 gap: 4px !important;
 padding: 15px 14px 10px !important;
 }

 .section-title h2 {
 font-size: 24px !important;
 line-height: 1.1 !important;
 }

 .eyebrow-small {
 margin-bottom: 3px !important;
 font-size: 11px !important;
 }

 /* Hero */
 .hero-card {
 gap: 12px !important;
 padding: 17px !important;
 margin-bottom: 12px !important;
 border-radius: 24px !important;
 }

 .hero-text h1 {
 margin: 0 0 5px !important;
 font-size: 32px !important;
 line-height: 1.03 !important;
 }

 .hero-text .subtitle {
 font-size: 15px !important;
 }

 .current-weather {
 display: flex !important;
 align-items: center !important;
 gap: 12px !important;
 }

 .big-icon,
 .current-weather-icon {
 width: 72px !important;
 height: 72px !important;
 }

 .temperature {
 font-size: 51px !important;
 }

 .condition {
 margin-top: 4px !important;
 font-size: 17px !important;
 }

 .hero-bottom-stats {
 gap: 7px 14px !important;
 margin-top: 6px !important;
 padding-top: 8px !important;
 font-size: 12px !important;
 }

 /* Bulletin IA */
 .hero-ai-bulletin,
 .update-info {
 padding: 14px 15px !important;
 margin-bottom: 12px !important;
 border-radius: 18px !important;
 }

 .hero-ai-bulletin-text,
 .update-info p {
 font-size: 15px !important;
 line-height: 1.48 !important;
 }

 /* Prévision 5 jours : une journée beaucoup plus compacte */
 .forecast-day.forecast-day-rich {
 grid-template-columns: minmax(0, 1fr) 58px !important;
 grid-template-areas:
 "main icon"
 "temps temps" !important;
 gap: 8px 12px !important;
 align-items: center !important;
 padding: 13px 0 !important;
 }

 .forecast-day.forecast-day-rich:first-of-type {
 padding-top: 10px !important;
 }

 .forecast-main {
 grid-area: main !important;
 min-width: 0 !important;
 }

 .forecast-icon {
 grid-area: icon !important;
 justify-self: end !important;
 width: 54px !important;
 height: 54px !important;
 border-radius: 17px !important;
 }

 .forecast-weather-icon {
 width: 54px !important;
 height: 54px !important;
 }

 .forecast-temp-range {
 grid-area: temps !important;
 width: 100% !important;
 display: grid !important;
 grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
 gap: 8px !important;
 margin-top: 2px !important;
 }

 .forecast-temp-chip {
 width: 100% !important;
 min-height: 34px !important;
 padding: 7px 10px !important;
 box-shadow: none !important;
 }

 .forecast-temp-chip .forecast-temp-label {
 font-size: 10px !important;
 }

 .forecast-temp-chip .forecast-temp-value {
 font-size: 18px !important;
 }

 .forecast-main > strong {
 margin-bottom: 2px !important;
 font-size: 18px !important;
 line-height: 1.15 !important;
 }

 .forecast-main > p {
 margin: 0 0 7px !important;
 font-size: 16px !important;
 line-height: 1.2 !important;
 }

 .forecast-compact-grid {
 display: block !important;
 margin-top: 4px !important;
 }

 .forecast-col {
 display: contents !important;
 }

 .forecast-col p {
 margin: 2px 0 !important;
 font-size: 13px !important;
 line-height: 1.28 !important;
 }

 /* Résumé des prochaines heures */
 .hourly-scroll {
 gap: 9px !important;
 }

 .premium-hour-card {
 min-height: 0 !important;
 padding: 14px !important;
 border-radius: 20px !important;
 }

 .hour-temp {
 margin-top: 9px !important;
 font-size: 39px !important;
 }

 .hour-desc {
 min-height: 0 !important;
 margin-top: 6px !important;
 }

 .hour-mini-metrics {
 gap: 3px !important;
 margin-top: 8px !important;
 }

 .hour-mini-metrics span {
 padding: 0 !important;
 border: 0 !important;
 background: transparent !important;
 font-size: 12px !important;
 }

 /* Cartes par tranches de 3 heures */
 .hourly-day-list {
 gap: 9px !important;
 }

 .day-divider {
 margin: 4px 0 0 !important;
 }

 .day-divider span {
 padding: 7px 10px !important;
 }

 .hourly-weather-card {
 padding: 12px !important;
 gap: 10px !important;
 border-radius: 19px !important;
 }

 .hour-main {
 display: flex !important;
 align-items: center !important;
 gap: 10px !important;
 }

 .hour-time {
 width: 76px !important;
 flex: 0 0 76px !important;
 gap: 3px !important;
 padding: 9px 7px !important;
 border-radius: 15px !important;
 text-align: center !important;
 }

 .hour-time strong {
 font-size: 20px !important;
 }

 .weather-emoji.big,
 .detail-weather-icon {
 width: 52px !important;
 height: 52px !important;
 }

 .hour-metrics {
 grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
 gap: 7px !important;
 }

 .hour-metric {
 min-height: 66px !important;
 padding: 8px !important;
 border-radius: 15px !important;
 gap: 3px !important;
 }

 .hour-metric span {
 font-size: 9px !important;
 }

 .hour-metric strong {
 min-height: 28px !important;
 padding: 5px 8px !important;
 font-size: 13px !important;
 }

 .hour-metric em {
 font-size: 10px !important;
 }

 /* Graphiques */
 .wind-chart-box,
 .temp-chart-box {
 padding: 0 8px 12px !important;
 }

 .wind-chart-svg,
 .temp-chart-svg {
 height: 270px !important;
 border-radius: 17px !important;
 }

 .wind-legend-clean {
 margin-top: 8px !important;
 }

 /* Navigation territoriale */
 .nearby-cities-panel {
 margin-top: 12px !important;
 }

 .nearby-header {
 gap: 5px !important;
 padding: 16px 14px 10px !important;
 }

 .nearby-header h2 {
 font-size: 24px !important;
 }

 .nearby-cities-grid {
 padding: 0 14px 16px !important;
 gap: 8px !important;
 }

 .nearby-city {
 min-height: 62px !important;
 padding: 10px !important;
 border-radius: 15px !important;
 }
}



/* =========================================================
 METEOCONS XXL V3
 ========================================================= */

.big-icon{
 width:155px !important;
 height:155px !important;
}

.current-weather-icon{
 width:155px !important;
 height:155px !important;
}

.forecast-icon,
.forecast-weather-icon{
 width:96px !important;
 height:96px !important;
}

.hour-icon,
.hour-weather-icon{
 width:92px !important;
 height:92px !important;
}

.weather-emoji.big,
.detail-weather-icon{
 width:105px !important;
 height:105px !important;
}

.premium-hour-card .hour-icon img,
.hour-card .hour-icon img{
 width:92px !important;
 height:92px !important;
}

@media (max-width:640px){

 .big-icon,
 .current-weather-icon{
 width:128px !important;
 height:128px !important;
 }

 .forecast-icon,
 .forecast-weather-icon{
 width:88px !important;
 height:88px !important;
 }

 .hour-icon,
 .hour-weather-icon{
 width:84px !important;
 height:84px !important;
 }

 .weather-emoji.big,
 .detail-weather-icon{
 width:96px !important;
 height:96px !important;
 }

 .premium-hour-card .hour-icon img,
 .hour-card .hour-icon img{
 width:84px !important;
 height:84px !important;
 }
}



/* =========================================================
 OPTIMISATION MOBILE + ICONES XXL V4
 ========================================================= */

/* Hero */
.big-icon,
.current-weather-icon{
 width:150px !important;
 height:150px !important;
}

/* Prévisions */
.forecast-icon,
.forecast-weather-icon{
 width:92px !important;
 height:92px !important;
}

.weather-emoji.big,
.detail-weather-icon{
 width:100px !important;
 height:100px !important;
}

/* Résumé prochaines heures */
.premium-hour-card{
 min-height:170px !important;
 padding:16px !important;
}

.premium-hour-card .hour-top{
 align-items:flex-start !important;
}

.premium-hour-card .hour-icon{
 width:112px !important;
 height:112px !important;
 flex:0 0 112px !important;
 background:none !important;
 box-shadow:none !important;
}

.premium-hour-card .hour-icon img,
.premium-hour-card .hour-icon svg,
.premium-hour-card .hour-weather-icon{
 width:112px !important;
 height:112px !important;
}

.premium-hour-card .hour-temp{
 font-size:52px !important;
 margin-top:8px !important;
}

.premium-hour-card .hour-desc{
 margin-top:6px !important;
 min-height:0 !important;
}

.hour-mini-metrics{
 display:flex !important;
 flex-direction:column !important;
 gap:3px !important;
}

@media(max-width:640px){

.site{
 width:calc(100% - 10px)!important;
 padding-top:6px!important;
}

.hero-card,
.panel,
.update-info{
 padding:14px!important;
}

.big-icon,
.current-weather-icon{
 width:122px!important;
 height:122px!important;
}

.forecast-icon,
.forecast-weather-icon{
 width:82px!important;
 height:82px!important;
}

.weather-emoji.big,
.detail-weather-icon{
 width:90px!important;
 height:90px!important;
}

.premium-hour-card{
 min-height:150px!important;
 padding:14px!important;
}

.premium-hour-card .hour-icon,
.premium-hour-card .hour-icon img,
.premium-hour-card .hour-icon svg,
.premium-hour-card .hour-weather-icon{
 width:94px!important;
 height:94px!important;
}

.section-title{
 padding:14px 14px 8px!important;
}

.hero-bottom-stats{
 gap:6px 12px!important;
 margin-top:8px!important;
 padding-top:8px!important;
}

}


/* =========================================================
 RESUMEN PRÓXIMAS HORAS — ULTRA COMPACT V6
 Heure et icône fortement mises en évidence
 ========================================================= */

.hourly-scroll {
 gap: 10px !important;
}

.premium-hour-card {
 min-height: 0 !important;
 padding: 12px 14px !important;
 border-radius: 20px !important;
 display: grid !important;
 grid-template-columns: minmax(0, 1fr) 92px !important;
 grid-template-areas:
 "top icon"
 "temp icon"
 "desc icon"
 "metrics metrics" !important;
 column-gap: 12px !important;
 row-gap: 3px !important;
 align-items: center !important;
}

.premium-hour-card::after {
 width: 82px !important;
 height: 82px !important;
 right: -24px !important;
 bottom: -30px !important;
}

.premium-hour-card .hour-top {
 grid-area: top !important;
 display: block !important;
 min-width: 0 !important;
}

.premium-hour-card .hour-badge {
 padding: 7px 13px !important;
 font-size: 18px !important;
 line-height: 1 !important;
 font-weight: 950 !important;
 letter-spacing: -.02em !important;
}

.premium-hour-card .hour-icon {
 grid-area: icon !important;
 justify-self: end !important;
 align-self: center !important;
 width: 92px !important;
 height: 92px !important;
 flex: none !important;
 padding: 0 !important;
 border-radius: 0 !important;
 background: transparent !important;
 box-shadow: none !important;
}

.premium-hour-card .hour-icon img,
.premium-hour-card .hour-icon svg,
.premium-hour-card .hour-weather-icon {
 display: block !important;
 width: 92px !important;
 height: 92px !important;
 max-width: none !important;
 max-height: none !important;
 filter: drop-shadow(0 6px 8px rgba(15,23,42,.16)) !important;
}

.premium-hour-card .hour-temp {
 grid-area: temp !important;
 margin: 5px 0 0 !important;
 font-size: 40px !important;
 line-height: .92 !important;
 letter-spacing: -1.5px !important;
}

.premium-hour-card .hour-desc {
 grid-area: desc !important;
 min-height: 0 !important;
 margin: 3px 0 0 !important;
 font-size: 13px !important;
 line-height: 1.25 !important;
}

.premium-hour-card .hour-mini-metrics {
 grid-area: metrics !important;
 display: flex !important;
 flex-direction: row !important;
 flex-wrap: wrap !important;
 gap: 4px 10px !important;
 margin-top: 6px !important;
}

.premium-hour-card .hour-mini-metrics span {
 display: inline !important;
 padding: 0 !important;
 border: 0 !important;
 border-radius: 0 !important;
 background: transparent !important;
 font-size: 11px !important;
 line-height: 1.2 !important;
 white-space: nowrap !important;
}

/* Tablette */
@media (max-width: 900px) {
 .premium-hour-card {
 grid-template-columns: minmax(0, 1fr) 82px !important;
 }

 .premium-hour-card .hour-icon,
 .premium-hour-card .hour-icon img,
 .premium-hour-card .hour-icon svg,
 .premium-hour-card .hour-weather-icon {
 width: 82px !important;
 height: 82px !important;
 }
}

/* Mobile */
@media (max-width: 640px) {
 .hourly-scroll {
 gap: 8px !important;
 }

 .premium-hour-card {
 min-height: 0 !important;
 padding: 10px 12px !important;
 border-radius: 17px !important;
 grid-template-columns: minmax(0, 1fr) 78px !important;
 column-gap: 8px !important;
 row-gap: 1px !important;
 }

 .premium-hour-card .hour-badge {
 padding: 6px 11px !important;
 font-size: 17px !important;
 }

 .premium-hour-card .hour-icon,
 .premium-hour-card .hour-icon img,
 .premium-hour-card .hour-icon svg,
 .premium-hour-card .hour-weather-icon {
 width: 78px !important;
 height: 78px !important;
 }

 .premium-hour-card .hour-temp {
 margin-top: 3px !important;
 font-size: 35px !important;
 }

 .premium-hour-card .hour-desc {
 margin-top: 2px !important;
 font-size: 12px !important;
 line-height: 1.2 !important;
 }

 .premium-hour-card .hour-mini-metrics {
 gap: 3px 8px !important;
 margin-top: 5px !important;
 }

 .premium-hour-card .hour-mini-metrics span {
 font-size: 10px !important;
 }
}


/* =========================================================
 GRAPHIQUES MOBILE — ZOOM + SCROLL HORIZONTAL V1
 Desktop : graphiques complets
 Mobile : largeur augmentée et défilement tactile
 ========================================================= */

.chart-scroll {
 width: 100%;
 overflow: visible;
}

/* Aucun débordement du panneau */
.wind-chart-box,
.temp-chart-box {
 min-width: 0;
}

/* Indication seulement sur écran tactile/mobile */
.chart-scroll::after {
 display: none;
}

@media (max-width: 760px) {
 .wind-chart-box,
 .temp-chart-box {
 padding-left: 8px !important;
 padding-right: 8px !important;
 overflow: hidden !important;
 }

 .chart-scroll {
 position: relative;
 width: 100%;
 overflow-x: auto !important;
 overflow-y: hidden !important;
 overscroll-behavior-x: contain;
 -webkit-overflow-scrolling: touch;
 scroll-behavior: smooth;
 scrollbar-width: thin;
 scrollbar-color: rgba(37,99,235,.55) rgba(226,232,240,.7);
 padding: 0 0 10px;
 cursor: grab;
 }

 .chart-scroll:active {
 cursor: grabbing;
 }

 .chart-scroll::-webkit-scrollbar {
 height: 7px;
 }

 .chart-scroll::-webkit-scrollbar-track {
 border-radius: 999px;
 background: rgba(226,232,240,.72);
 }

 .chart-scroll::-webkit-scrollbar-thumb {
 border-radius: 999px;
 background: rgba(37,99,235,.55);
 }

 /*
 * Le SVG reste au format 1000 unités, mais est affiché beaucoup plus large.
 * Le visiteur voit donc environ la moitié du graphique à la fois.
 */
 .chart-scroll .wind-chart-svg {
 width: 920px !important;
 min-width: 920px !important;
 height: 310px !important;
 max-width: none !important;
 border-radius: 18px !important;
 }

 .chart-scroll .temp-chart-svg {
 width: 920px !important;
 min-width: 920px !important;
 height: 330px !important;
 max-width: none !important;
 border-radius: 18px !important;
 }

 .chart-scroll::after {
 content: "← Swipe to view the next hours →";
 position: sticky;
 left: 12px;
 bottom: 2px;
 display: inline-flex;
 align-items: center;
 min-height: 27px;
 padding: 0 10px;
 margin: 7px 0 0;
 border-radius: 999px;
 background: rgba(239,246,255,.96);
 border: 1px solid rgba(147,197,253,.65);
 color: #1d4ed8;
 font-size: 11px;
 font-weight: 900;
 pointer-events: none;
 box-shadow: 0 6px 16px rgba(37,99,235,.10);
 }

 /* Les titres restent fixes au-dessus du graphique */
 .wind-y-title,
 .temp-y-title {
 z-index: 2;
 }
}

@media (max-width: 420px) {
 .chart-scroll .wind-chart-svg {
 width: 880px !important;
 min-width: 880px !important;
 height: 295px !important;
 }

 .chart-scroll .temp-chart-svg {
 width: 880px !important;
 min-width: 880px !important;
 height: 315px !important;
 }
}


/* =========================================================
 CORRECTIFS ALIGNEMENT ICÔNES V7
 ========================================================= */

/* Prévisions prochains jours :
 réserve une vraie colonne pour l'icône afin d'éviter
 tout chevauchement avec les températures Min / Max */
.forecast-day.forecast-day-rich {
 grid-template-columns: minmax(0, 1fr) 96px 132px !important;
 column-gap: 14px !important;
 align-items: center !important;
}

.forecast-icon {
 justify-self: center !important;
 align-self: center !important;
 margin: 0 !important;
}

.forecast-temp-range {
 justify-self: stretch !important;
 align-self: center !important;
 min-width: 0 !important;
}

/* Résumé prochaines heures :
 icône bien calée à droite, centrée verticalement */
.premium-hour-card {
 grid-template-columns: minmax(0, 1fr) 92px !important;
}

.premium-hour-card .hour-icon {
 justify-self: end !important;
 align-self: center !important;
 margin: 0 !important;
 display: grid !important;
 place-items: center !important;
}

.premium-hour-card .hour-icon img,
.premium-hour-card .hour-icon svg,
.premium-hour-card .hour-weather-icon {
 margin: 0 !important;
 display: block !important;
}

/* Mobile */
@media (max-width: 640px) {
 .forecast-day.forecast-day-rich {
 grid-template-columns: minmax(0, 1fr) 82px !important;
 grid-template-areas:
 "main icon"
 "temps temps" !important;
 column-gap: 10px !important;
 }

 .forecast-icon {
 grid-area: icon !important;
 justify-self: end !important;
 }

 .forecast-temp-range {
 grid-area: temps !important;
 margin-top: 4px !important;
 }

 .premium-hour-card {
 grid-template-columns: minmax(0, 1fr) 82px !important;
 }

 .premium-hour-card .hour-icon {
 justify-self: end !important;
 align-self: center !important;
 }
}


/* Photo de la ville */
.city-photo{
 margin:22px 0;
 overflow:hidden;
 border-radius:28px;
 box-shadow:0 18px 45px rgba(15,23,42,.12);
}
.city-photo img{
 display:block;
 width:100%;
 height:auto;
}


/* City photo responsive */
.city-photo{
 width:100%;
 margin:24px 0;
 border-radius:28px;
 overflow:hidden;
 box-shadow:0 18px 45px rgba(15,23,42,.12);
}

.city-photo img{
 display:block;
 width:100%;
 max-width:100%;
 height:auto;
 aspect-ratio:1600/840;
 object-fit:cover;
 object-position:center;
}


/* =========================================================
 INFOBULLES DES ICÔNES SVG — CORRECTIF SURVOL
 ========================================================= */

.temp-chart-weather-foreign {
 pointer-events: auto !important;
 overflow: visible !important;
}

.temp-chart-weather-wrap,
.temp-chart-weather-icon {
 pointer-events: auto !important;
}

.temp-chart-weather-icon {
 cursor: help;
}

/* =========================================================
 Air quality — OpenWeather Air Pollution Forecast
 ========================================================= */
.air-quality-panel{overflow:hidden}
.air-quality-heading{align-items:flex-start}
.air-quality-tabs{display:flex;gap:8px;margin:18px 0 16px;padding:5px;background:rgba(255,255,255,.62);border:1px solid rgba(15,23,42,.08);border-radius:16px;overflow-x:auto}
.air-quality-tab{flex:1;min-width:92px;border:0;border-radius:12px;padding:10px 14px;background:transparent;color:#475569;font:inherit;font-weight:800;cursor:pointer;white-space:nowrap}
.air-quality-tab.is-active{background:#fff;color:#0f766e;box-shadow:0 5px 16px rgba(15,23,42,.10)}
.air-quality-content{animation:airFade .18s ease}
@keyframes airFade{from{opacity:.45;transform:translateY(3px)}to{opacity:1;transform:none}}
.air-quality-summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px;border-radius:20px;border:1px solid rgba(15,23,42,.08);background:linear-gradient(135deg,rgba(236,253,245,.95),rgba(240,253,250,.82))}
.air-quality-score{display:flex;align-items:center;gap:14px}.air-quality-emoji{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:rgba(255,255,255,.78);font-size:31px;box-shadow:inset 0 0 0 1px rgba(15,23,42,.05)}
.air-quality-score strong{display:block;font-size:clamp(1.55rem,4vw,2.2rem);line-height:1;color:#166534}.air-quality-score span{display:block;margin-top:5px;color:#475569;font-weight:750}
.air-quality-time{text-align:right;color:#64748b;font-size:.83rem;font-weight:700}.air-quality-time strong{display:block;margin-top:4px;color:#0f172a;font-size:1.08rem}
.air-quality-summary.aq-fair{background:linear-gradient(135deg,#fefce8,#fef9c3)}.air-quality-summary.aq-fair .air-quality-score strong{color:#a16207}
.air-quality-summary.aq-moderate{background:linear-gradient(135deg,#fff7ed,#ffedd5)}.air-quality-summary.aq-moderate .air-quality-score strong{color:#c2410c}
.air-quality-summary.aq-poor{background:linear-gradient(135deg,#fef2f2,#fee2e2)}.air-quality-summary.aq-poor .air-quality-score strong{color:#b91c1c}
.air-quality-summary.aq-very-poor{background:linear-gradient(135deg,#faf5ff,#f3e8ff)}.air-quality-summary.aq-very-poor .air-quality-score strong{color:#7e22ce}
.air-quality-timeline{display:flex;gap:9px;margin:18px 0 16px;padding:14px 10px 8px;overflow-x:auto;border-radius:16px;background:rgba(248,250,252,.82)}
.air-quality-hour{flex:0 0 42px;text-align:center}.air-quality-dot{display:block;width:14px;height:14px;margin:0 auto 7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.13)}.air-quality-hour small{font-weight:750;color:#64748b}
.air-quality-hour.aq-fair .air-quality-dot{background:#eab308;box-shadow:0 0 0 5px rgba(234,179,8,.14)}.air-quality-hour.aq-moderate .air-quality-dot{background:#f97316;box-shadow:0 0 0 5px rgba(249,115,22,.14)}.air-quality-hour.aq-poor .air-quality-dot{background:#ef4444;box-shadow:0 0 0 5px rgba(239,68,68,.14)}.air-quality-hour.aq-very-poor .air-quality-dot{background:#9333ea;box-shadow:0 0 0 5px rgba(147,51,234,.14)}
.air-pollutant-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.air-pollutant{border-radius:16px;background:rgba(255,255,255,.72);border:1px solid rgba(15,23,42,.08);overflow:hidden}.air-pollutant summary{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;min-height:92px;padding:13px 38px 13px 14px;cursor:pointer;list-style:none}.air-pollutant summary::-webkit-details-marker{display:none}.air-pollutant-name{color:#475569;font-weight:800;font-size:.84rem;line-height:1.25}.air-pollutant-name b{color:#0f766e;font-weight:900;white-space:nowrap}.air-pollutant-value{grid-column:1/-1;display:block}.air-pollutant strong{display:inline-block;color:#0f172a;font-size:1.35rem}.air-pollutant small{margin-left:3px;color:#64748b;font-size:.72rem}.air-pollutant-info{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#e6fffb;color:#0f766e;font-size:.75rem;font-weight:950;border:1px solid rgba(15,118,110,.18)}.air-pollutant[open] .air-pollutant-info{background:#0f766e;color:#fff}.air-pollutant p{margin:0;padding:0 14px 14px;color:#475569;font-size:.78rem;line-height:1.45}.air-pollutant[open] summary{padding-bottom:8px}
.air-quality-advice{display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;padding:13px 15px;border-radius:14px;background:rgba(240,253,250,.85);color:#115e59;font-weight:750;line-height:1.45}.air-quality-advice span{font-weight:950}
.air-quality-source{margin:10px 2px 0;color:#64748b;font-size:.76rem;line-height:1.45}
@media(max-width:640px){.air-quality-panel{padding-left:14px!important;padding-right:14px!important}.air-quality-heading .table-note{display:none}.air-quality-tabs{margin-top:14px}.air-quality-tab{padding:9px 12px}.air-quality-summary{padding:16px 14px}.air-quality-emoji{width:48px;height:48px;font-size:27px}.air-quality-score strong{font-size:1.5rem}.air-quality-time{font-size:.72rem}.air-pollutant-grid{grid-template-columns:1fr}.air-pollutant summary{min-height:78px}.air-quality-timeline{margin-top:14px}}

/* V3 - Curseurs colorés des polluants */
.air-pollutant-list{display:flex;flex-direction:column;margin-top:2px;border:1px solid rgba(15,23,42,.08);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.68)}
.air-pollutant-row{border-bottom:1px solid rgba(15,23,42,.08)}
.air-pollutant-row:last-child{border-bottom:0}
.air-pollutant-row summary{display:grid;grid-template-columns:52px minmax(0,1fr) auto 18px;gap:12px;align-items:center;padding:16px 15px;cursor:pointer;list-style:none}
.air-pollutant-row summary::-webkit-details-marker{display:none}
.air-pollutant-symbol{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#14b8a6,#65c466);color:#fff;font-weight:950;font-size:.88rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 6px 14px rgba(22,163,74,.16)}
.air-pollutant-main{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 12px;align-items:center}
.air-pollutant-title{min-width:0;color:#0f172a;font-size:.9rem;line-height:1.2}.air-pollutant-title strong{font-weight:850}.air-pollutant-title small{color:#64748b;font-size:.8rem;white-space:nowrap}
.air-pollutant-status{font-size:.79rem;font-weight:850;color:#16a34a}.air-pollutant-status.aq-fair{color:#a16207}.air-pollutant-status.aq-moderate{color:#c2410c}.air-pollutant-status.aq-poor{color:#b91c1c}.air-pollutant-status.aq-very-poor{color:#7e22ce}
.air-pollutant-gauge{position:relative;grid-column:1/-1;display:block;height:10px;margin-top:1px;border-radius:999px;background:linear-gradient(90deg,#22c55e 0 20%,#84cc16 20% 40%,#facc15 40% 60%,#f97316 60% 80%,#dc2626 80% 90%,#9333ea 90% 100%);box-shadow:inset 0 1px 2px rgba(15,23,42,.16)}
.air-pollutant-marker{position:absolute;top:-8px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:10px solid #172033;transform:translateX(-50%);filter:drop-shadow(0 2px 1px rgba(15,23,42,.14))}
.air-pollutant-reading{text-align:right;white-space:nowrap;color:#0f172a}.air-pollutant-reading strong{font-size:1.22rem}.air-pollutant-reading small{display:block;margin-top:2px;color:#64748b;font-size:.67rem}
.air-pollutant-chevron{color:#64748b;font-size:1.25rem;transition:transform .18s ease}.air-pollutant-row[open] .air-pollutant-chevron{transform:rotate(180deg)}
.air-pollutant-row p{margin:0;padding:0 76px 15px;color:#475569;font-size:.79rem;line-height:1.5}
@media(max-width:640px){.air-pollutant-row summary{grid-template-columns:43px minmax(0,1fr) auto 14px;gap:9px;padding:14px 10px}.air-pollutant-symbol{width:41px;height:41px;font-size:.72rem}.air-pollutant-main{gap:6px 8px}.air-pollutant-title{font-size:.79rem}.air-pollutant-title small{font-size:.7rem}.air-pollutant-status{font-size:.7rem}.air-pollutant-reading strong{font-size:1.02rem}.air-pollutant-reading small{font-size:.61rem}.air-pollutant-gauge{height:9px}.air-pollutant-row p{padding:0 12px 14px 62px;font-size:.75rem}}


/* V6 — qualité de l’air premium + attribution discrète */
.air-quality-emoji{
 display:flex !important;
 align-items:center !important;
 justify-content:center !important;
 padding:0 !important;
 line-height:1 !important;
 text-align:center;
 font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
.air-quality-emoji > *{line-height:1}
.air-quality-score .air-quality-emoji{
 transform:none;
}

.air-pollutant-gauge-wrap{
 grid-column:1/-1;
 display:grid;
 gap:7px;
 min-width:0;
}
.air-pollutant-gauge-wrap .air-pollutant-gauge{
 grid-column:auto;
 margin-top:1px;
}
.air-pollutant-scale{
 display:grid;
 grid-template-columns:repeat(5,minmax(0,1fr));
 gap:4px;
 color:#64748b;
 font-size:.62rem;
 font-weight:800;
 line-height:1.15;
 text-align:center;
}
.air-pollutant-scale span{
 min-width:0;
}
.air-pollutant-row summary{
 transition:background .18s ease;
}
.air-pollutant-row summary:hover{
 background:rgba(248,250,252,.72);
}
.air-pollutant-marker{
 border-left-width:8px;
 border-right-width:8px;
 border-top-width:11px;
}
.air-pollutant-marker::after{
 content:"";
 position:absolute;
 left:50%;
 top:-19px;
 width:8px;
 height:8px;
 border-radius:50%;
 background:#172033;
 border:2px solid #fff;
 transform:translateX(-50%);
 box-shadow:0 2px 6px rgba(15,23,42,.22);
}

.site-data-attribution{
 margin:28px 0 0;
 padding:18px 14px 0;
 border-top:1px solid rgba(148,163,184,.20);
 color:#64748b;
 text-align:center;
 font-size:12px;
 line-height:1.5;
}

@media(max-width:640px){
 .air-pollutant-scale{
 font-size:.54rem;
 gap:2px;
 }
 .air-pollutant-row summary{
 align-items:start;
 }
 .air-quality-emoji{
 font-size:27px !important;
 }
 .site-data-attribution{
 margin-top:22px;
 padding-top:15px;
 font-size:11px;
 }
}


/* V7 — heures AQ cliquables et libellés mobiles lisibles */
.air-quality-hour{
 appearance:none;
 border:0;
 padding:8px 5px;
 border-radius:13px;
 background:transparent;
 color:inherit;
 cursor:pointer;
 transition:background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.air-quality-hour:hover{
 background:rgba(255,255,255,.86);
}
.air-quality-hour:focus-visible{
 outline:3px solid rgba(37,99,235,.28);
 outline-offset:2px;
}
.air-quality-hour.is-selected{
 background:#fff;
 box-shadow:0 5px 15px rgba(15,23,42,.10);
 transform:translateY(-1px);
}
.air-quality-hour.is-selected small{
 color:#0f172a;
 font-weight:950;
}
.air-quality-hour.is-selected .air-quality-dot{
 transform:scale(1.14);
}

@media(max-width:640px){
 .air-pollutant-scale{
 grid-template-columns:repeat(3,minmax(0,1fr)) !important;
 gap:8px !important;
 font-size:11px !important;
 line-height:1.2 !important;
 text-align:left;
 }
 .air-pollutant-scale span{
 display:none;
 white-space:nowrap;
 }
 .air-pollutant-scale span:nth-child(1),
 .air-pollutant-scale span:nth-child(3),
 .air-pollutant-scale span:nth-child(5){
 display:block;
 }
 .air-pollutant-scale span:nth-child(3){
 text-align:center;
 }
 .air-pollutant-scale span:nth-child(5){
 text-align:right;
 }
 .air-quality-timeline{
 gap:7px;
 padding:10px 8px;
 }
 .air-quality-hour{
 flex-basis:48px;
 min-width:48px;
 padding:9px 4px;
 }
 .air-quality-hour small{
 font-size:12px;
 }
}


/* V8 — finition premium qualité de l’air */
.air-quality-score{
 align-items:center;
 gap:20px;
}

.air-quality-emoji{
 width:auto !important;
 height:auto !important;
 min-width:0 !important;
 flex:0 0 auto !important;
 padding:0 !important;
 border:0 !important;
 border-radius:0 !important;
 background:transparent !important;
 box-shadow:none !important;
 font-size:72px !important;
 line-height:1 !important;
 display:flex !important;
 align-items:center !important;
 justify-content:center !important;
 transform:none !important;
}

.air-quality-score strong{
 font-size:clamp(30px,3vw,42px);
 line-height:1;
}

.air-pollutant-name{
 font-size:17px;
 font-weight:900;
}

.air-pollutant-reading strong{
 font-size:20px;
 font-weight:950;
 transition:opacity .18s ease, transform .18s ease;
}

.air-pollutant-marker{
 transition:left .25s ease;
}

.air-pollutant-status{
 transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}

.air-quality-summary{
 transition:background-color .2s ease, border-color .2s ease;
}

.air-quality-score strong,
.air-quality-emoji,
[data-air-advice],
[data-air-selected-time]{
 transition:opacity .18s ease, transform .18s ease;
}

@media(max-width:640px){
 .air-quality-score{
 gap:14px;
 }

 .air-quality-emoji{
 font-size:56px !important;
 }

 .air-quality-score strong{
 font-size:32px;
 }

 .air-pollutant-name{
 font-size:16px;
 }

 .air-pollutant-reading strong{
 font-size:19px;
 }
}


/* V9 — résumé compact et suppression définitive des libellés en double */
.air-quality-summary{
 display:grid !important;
 grid-template-columns:minmax(0,auto) minmax(105px,1fr) !important;
 align-items:center !important;
 gap:14px !important;
}

.air-quality-score{
 display:flex !important;
 flex-direction:column !important;
 align-items:center !important;
 justify-content:center !important;
 gap:3px !important;
 min-width:72px !important;
 max-width:92px !important;
 text-align:center !important;
}

.air-quality-emoji{
 width:auto !important;
 height:auto !important;
 min-width:0 !important;
 margin:0 !important;
 padding:0 !important;
 border:0 !important;
 border-radius:0 !important;
 background:transparent !important;
 box-shadow:none !important;
 font-size:46px !important;
 line-height:1 !important;
}

.air-quality-score strong{
 display:block !important;
 margin:0 !important;
 font-size:23px !important;
 line-height:1.05 !important;
 white-space:nowrap;
}

.air-quality-time{
 min-width:0;
 text-align:right !important;
}

.air-quality-time span{
 display:block;
 white-space:normal;
}

.air-quality-time strong{
 font-size:18px !important;
 white-space:nowrap;
}

.air-pollutant-title small{
 display:none !important;
}

.air-pollutant-title strong{
 font-size:17px;
}

.air-quality-content.is-updating .air-quality-score strong,
.air-quality-content.is-updating .air-quality-emoji,
.air-quality-content.is-updating [data-air-selected-time],
.air-quality-content.is-updating [data-pollutant-value]{
 opacity:.35;
 transform:translateY(2px);
}

@media(max-width:640px){
 .air-quality-summary{
 grid-template-columns:72px minmax(0,1fr) !important;
 gap:10px !important;
 padding:14px 12px !important;
 }

 .air-quality-score{
 min-width:64px !important;
 max-width:72px !important;
 gap:2px !important;
 }

 .air-quality-emoji{
 font-size:39px !important;
 }

 .air-quality-score strong{
 font-size:20px !important;
 }

 .air-quality-time{
 font-size:11px !important;
 line-height:1.25;
 }

 .air-quality-time strong{
 margin-top:3px !important;
 font-size:16px !important;
 }

 .air-pollutant-title strong{
 font-size:16px;
 }
}


/* V10 — correction du rendu mobile observé sur la capture */
.air-pollutant-marker{
 top:50% !important;
 width:12px !important;
 height:12px !important;
 border:3px solid #ffffff !important;
 border-radius:50% !important;
 background:#172033 !important;
 transform:translate(-50%,-50%) !important;
 filter:none !important;
 box-shadow:0 1px 4px rgba(15,23,42,.28) !important;
 transition:left .25s ease !important;
}

.air-pollutant-marker::after{
 display:none !important;
 content:none !important;
}

.air-pollutant-scale{
 margin-top:1px;
}

.air-pollutant-title{
 line-height:1.12 !important;
}

@media(max-width:640px){
 .air-quality-summary{
 grid-template-columns:66px minmax(0,1fr) !important;
 gap:8px !important;
 padding:13px 12px !important;
 }

 .air-quality-score{
 min-width:58px !important;
 max-width:66px !important;
 }

 .air-quality-emoji{
 font-size:36px !important;
 }

 .air-quality-score strong{
 font-size:18px !important;
 line-height:1 !important;
 }

 .air-quality-time{
 padding-left:4px;
 font-size:11px !important;
 line-height:1.2 !important;
 }

 .air-quality-time strong{
 font-size:16px !important;
 }

 .air-pollutant-row summary{
 grid-template-columns:48px minmax(0,1fr) 65px 14px !important;
 grid-template-areas:
 "symbol main reading chevron";
 gap:8px !important;
 align-items:start !important;
 padding:15px 10px 14px !important;
 }

 .air-pollutant-symbol{
 grid-area:symbol;
 width:46px !important;
 height:46px !important;
 margin-top:1px;
 font-size:.76rem !important;
 }

 .air-pollutant-main{
 grid-area:main;
 display:grid !important;
 grid-template-columns:minmax(0,1fr) auto !important;
 gap:7px 8px !important;
 align-items:center !important;
 min-width:0 !important;
 }

 .air-pollutant-title{
 grid-column:1;
 min-width:0;
 font-size:15px !important;
 line-height:1.14 !important;
 overflow-wrap:anywhere;
 }

 .air-pollutant-title strong{
 font-size:15px !important;
 font-weight:850 !important;
 }

 .air-pollutant-status{
 grid-column:2;
 justify-self:end;
 align-self:start;
 font-size:11px !important;
 line-height:1.1;
 white-space:nowrap;
 }

 .air-pollutant-gauge-wrap{
 grid-column:1/-1 !important;
 gap:5px !important;
 margin-top:1px;
 }

 .air-pollutant-gauge{
 height:10px !important;
 }

 .air-pollutant-scale{
 grid-template-columns:repeat(3,minmax(0,1fr)) !important;
 gap:0 !important;
 margin-top:0 !important;
 font-size:10px !important;
 line-height:1 !important;
 }

 .air-pollutant-scale span:nth-child(1){
 text-align:left !important;
 }

 .air-pollutant-scale span:nth-child(3){
 text-align:center !important;
 }

 .air-pollutant-scale span:nth-child(5){
 text-align:right !important;
 }

 .air-pollutant-reading{
 grid-area:reading;
 align-self:start;
 min-width:61px;
 padding-top:0;
 text-align:right !important;
 }

 .air-pollutant-reading strong{
 font-size:20px !important;
 line-height:1 !important;
 }

 .air-pollutant-reading small{
 margin-top:4px !important;
 font-size:10px !important;
 }

 .air-pollutant-chevron{
 grid-area:chevron;
 align-self:center;
 margin-top:4px;
 font-size:17px !important;
 }

 .air-pollutant-marker{
 width:10px !important;
 height:10px !important;
 border-width:2px !important;
 }
}

@media(max-width:380px){
 .air-pollutant-row summary{
 grid-template-columns:43px minmax(0,1fr) 58px 12px !important;
 gap:7px !important;
 padding-left:8px !important;
 padding-right:8px !important;
 }

 .air-pollutant-symbol{
 width:41px !important;
 height:41px !important;
 font-size:.69rem !important;
 }

 .air-pollutant-title,
 .air-pollutant-title strong{
 font-size:14px !important;
 }

 .air-pollutant-status{
 font-size:10px !important;
 }

 .air-pollutant-reading{
 min-width:54px;
 }

 .air-pollutant-reading strong{
 font-size:18px !important;
 }

 .air-pollutant-scale{
 font-size:9px !important;
 }
}


/* V11 — état à droite de l’emoji et heure en dessous */
.air-quality-summary{
 display:block !important;
 padding:18px 20px !important;
}

.air-quality-score{
 display:grid !important;
 grid-template-columns:auto minmax(0,1fr) !important;
 align-items:center !important;
 justify-content:stretch !important;
 gap:16px !important;
 width:100% !important;
 min-width:0 !important;
 max-width:none !important;
 text-align:left !important;
}

.air-quality-emoji{
 grid-column:1;
 grid-row:1;
 font-size:46px !important;
 line-height:1 !important;
}

.air-quality-score-text{
 grid-column:2;
 min-width:0;
 display:flex;
 flex-direction:column;
 align-items:flex-start;
 justify-content:center;
}

.air-quality-score-text > strong{
 margin:0 0 7px !important;
 font-size:25px !important;
 line-height:1.05 !important;
 white-space:normal !important;
}

.air-quality-time{
 width:100%;
 padding:0 !important;
 text-align:left !important;
 min-width:0;
}

.air-quality-time span{
 display:block;
 font-size:13px !important;
 line-height:1.25 !important;
 white-space:normal !important;
}

.air-quality-time strong{
 display:block;
 margin-top:2px !important;
 font-size:25px !important;
 line-height:1 !important;
 color:#172033;
 white-space:nowrap;
}

@media(max-width:640px){
 .air-quality-summary{
 padding:15px 16px !important;
 }

 .air-quality-score{
 grid-template-columns:48px minmax(0,1fr) !important;
 gap:12px !important;
 }

 .air-quality-emoji{
 font-size:40px !important;
 }

 .air-quality-score-text > strong{
 margin-bottom:5px !important;
 font-size:21px !important;
 }

 .air-quality-time span{
 font-size:11px !important;
 }

 .air-quality-time strong{
 margin-top:2px !important;
 font-size:21px !important;
 }
}

@media(max-width:380px){
 .air-quality-summary{
 padding:14px 13px !important;
 }

 .air-quality-score{
 grid-template-columns:43px minmax(0,1fr) !important;
 gap:10px !important;
 }

 .air-quality-emoji{
 font-size:37px !important;
 }

 .air-quality-score-text > strong{
 font-size:19px !important;
 }

 .air-quality-time strong{
 font-size:20px !important;
 }
}


/* V13 — prévision détaillée ultra-compacte */
.compact-forecast-panel{padding:0!important;overflow:hidden}
.compact-forecast-title{padding:20px 22px 14px!important}
.compact-forecast-list{border-top:1px solid rgba(148,163,184,.22)}
.compact-day-divider{position:sticky;top:0;z-index:3;padding:6px 14px;background:#eff6ff;border-top:1px solid #bfdbfe;border-bottom:1px solid #bfdbfe;color:#1d4ed8;font-size:12px;font-weight:950;letter-spacing:.06em;text-transform:uppercase}
.compact-forecast-row{background:rgba(255,255,255,.82);border-bottom:1px solid rgba(148,163,184,.20)}
.compact-forecast-row:nth-of-type(even){background:rgba(248,250,252,.80)}
.compact-forecast-main{min-height:52px;display:grid;grid-template-columns:80px minmax(190px,1.5fr) 64px 105px 145px 100px 32px;align-items:center;gap:9px;padding:5px 12px}
.compact-hour{display:inline-flex;justify-content:center;align-items:center;min-width:72px;box-sizing:border-box;padding:6px 7px;border-radius:10px;background:#e0f2fe;color:#075985;font-size:14px;font-weight:950;white-space:nowrap}
.compact-weather{min-width:0;display:flex;align-items:center;gap:7px}
.compact-weather-icon,.compact-weather-icon img,.compact-weather-icon svg,.compact-detail-icon{width:38px!important;height:38px!important;flex:0 0 38px}
.compact-weather-label{min-width:0;overflow:hidden;color:#0f172a;font-size:14px;font-weight:800;line-height:1.15;text-overflow:ellipsis;white-space:nowrap}
.compact-temp{font-size:23px;font-weight:950;line-height:1;text-align:center;white-space:nowrap}
.compact-primary-data{min-width:0;display:grid;gap:1px;line-height:1.1}
.compact-primary-data b{color:#1e293b;font-size:12px;white-space:nowrap}
.compact-primary-data small{color:#64748b;font-size:10px;font-weight:750;white-space:nowrap}
.compact-more-button{width:29px;height:29px;display:grid;place-items:center;padding:0!important;border-radius:50%!important;background:#dbeafe!important;color:#1d4ed8!important;font-size:20px!important;font-weight:900!important;line-height:1!important}
.compact-forecast-details{display:flex;flex-wrap:wrap;gap:5px 12px;padding:7px 14px 9px 79px;background:rgba(239,246,255,.58);border-top:1px dashed rgba(37,99,235,.20);color:#475569;font-size:11px;line-height:1.25}
.compact-forecast-details[hidden]{display:none!important}
.compact-forecast-details span{white-space:nowrap}
.compact-forecast-details b{color:#1e3a8a}

@media(max-width:900px){
.compact-forecast-main{grid-template-columns:76px minmax(145px,1fr) 55px 88px 120px 29px}
.compact-humidity{display:none}
}

@media(max-width:640px){
.compact-forecast-title{padding:16px 14px 10px!important}
.compact-forecast-title .table-note{font-size:11px}
.compact-day-divider{padding:5px 10px;font-size:11px}
.compact-forecast-main{min-height:58px;grid-template-columns:72px 34px 48px minmax(95px,1fr) 28px;grid-template-areas:"hour icon temp weather more" "hour rain rain wind more";gap:2px 7px;padding:5px 8px}
.compact-hour{grid-area:hour;align-self:stretch;align-items:center;justify-content:center;min-width:68px;padding:4px 5px;font-size:12.5px}
.compact-weather{display:contents}
.compact-weather-icon{grid-area:icon}
.compact-weather-icon,.compact-weather-icon img,.compact-weather-icon svg,.compact-detail-icon{width:34px!important;height:34px!important;flex-basis:34px}
.compact-weather-label{grid-area:weather;align-self:center;font-size:12px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.compact-temp{grid-area:temp;font-size:21px}
.compact-rain{grid-area:rain}
.compact-wind{grid-area:wind}
.compact-primary-data{display:block}
.compact-primary-data b{font-size:9px}
.compact-primary-data small,.compact-humidity{display:none}
.compact-more-button{grid-area:more;width:27px;height:27px;font-size:18px!important}
.compact-forecast-details{gap:4px 10px;padding:7px 9px 8px;font-size:10px;overflow-x:auto}
}

/* V14 — correction chevauchement pluie/vent sur mobile */
@media(max-width:640px){
.compact-rain{min-width:0;padding-right:4px}
.compact-wind{min-width:0}
.compact-primary-data b{overflow:hidden;text-overflow:ellipsis}
}

/* V20 — couleur de température visible dans la ligne générale 3 h */
.compact-forecast-main .compact-temp {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 justify-self: center;
 min-width: 54px;
 padding: 7px 10px;
 border-radius: 999px;
 color: var(--temp-color) !important;
 background: var(--temp-bg) !important;
 border: 1px solid var(--temp-border) !important;
}

/* V21 — indice UV index WeatherAPI */
.hero-uv-stat { font-weight: 800; }
.hero-uv-stat.uv-low { color:#166534; }
.hero-uv-stat.uv-moderate { color:#854d0e; }
.hero-uv-stat.uv-high { color:#c2410c; }
.hero-uv-stat.uv-very-high { color:#b91c1c; }
.hero-uv-stat.uv-extreme { color:#7e22ce; }

.uv-panel { margin-bottom:22px; }
.uv-current {
 display:grid;
 grid-template-columns:auto minmax(150px, .55fr) 1fr;
 align-items:center;
 gap:22px;
 padding:22px;
 border-radius:26px;
 border:1px solid rgba(148,163,184,.24);
 background:#f8fafc;
}
.uv-sun { font-size:58px; line-height:1; }
.uv-current-value { display:grid; gap:3px; }
.uv-current-value span { color:#64748b; font-size:13px; font-weight:850; text-transform:uppercase; letter-spacing:.06em; }
.uv-current-value strong { font-size:48px; line-height:1; font-weight:950; }
.uv-current-value em { font-style:normal; font-weight:900; }
.uv-current p { margin:0; color:#334155; line-height:1.6; font-weight:650; }

.uv-low { color:#166534; background:#f0fdf4; border-color:#bbf7d0; }
.uv-moderate { color:#854d0e; background:#fefce8; border-color:#fde68a; }
.uv-high { color:#c2410c; background:#fff7ed; border-color:#fed7aa; }
.uv-very-high { color:#b91c1c; background:#fef2f2; border-color:#fecaca; }
.uv-extreme { color:#7e22ce; background:#faf5ff; border-color:#e9d5ff; }

.uv-subsection { margin-top:24px; }
.uv-subsection h3 { margin:0 0 12px; font-size:18px; }
.uv-hourly-list { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.uv-hour-item { display:grid; gap:5px; justify-items:center; padding:12px 8px; border:1px solid; border-radius:17px; }
.uv-hour-item span { color:#475569; font-size:13px; font-weight:800; }
.uv-hour-item strong { font-size:23px; }
.uv-hour-item small { font-weight:800; }
.uv-days-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:10px; }
.uv-day-item { display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:center; padding:13px 15px; border-radius:17px; background:#f8fafc; border:1px solid rgba(148,163,184,.22); }
.uv-day-item span { font-weight:850; }
.uv-day-item strong { grid-row:1 / span 2; grid-column:2; min-width:46px; padding:7px 9px; border:1px solid; border-radius:12px; text-align:center; font-size:20px; }
.uv-day-item small { color:#64748b; }
.uv-editorial { margin:22px 0 0; padding:16px 18px; border-radius:18px; background:#eff6ff; color:#334155; line-height:1.65; }
.site-data-attribution small { display:block; margin-top:8px; line-height:1.5; }

@media (max-width:760px) {
 .uv-current { grid-template-columns:auto 1fr; }
 .uv-current p { grid-column:1 / -1; }
 .uv-hourly-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:420px) {
 .uv-hourly-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* V21.1 — carte UV index compacte en lignes */
.uv-panel-compact {
 padding: 14px 18px;
 margin-bottom: 22px;
 overflow: hidden;
}

.uv-compact-main {
 display: grid;
 grid-template-columns: minmax(230px, auto) auto 1fr;
 align-items: center;
 gap: 14px;
}

.uv-compact-title {
 display: flex;
 align-items: center;
 gap: 10px;
 min-width: 0;
}

.uv-compact-icon {
 font-size: 28px;
 line-height: 1;
 flex: 0 0 auto;
}

.uv-compact-title strong {
 display: block;
 color: #0f172a;
 font-size: 17px;
 line-height: 1.2;
}

.uv-compact-title small {
 display: block;
 margin-top: 2px;
 color: #64748b;
 font-size: 12px;
}

.uv-compact-current {
 display: inline-flex;
 align-items: center;
 gap: 7px;
 padding: 7px 11px;
 border: 1px solid;
 border-radius: 999px;
 white-space: nowrap;
}

.uv-compact-current span {
 font-size: 12px;
 font-weight: 800;
 opacity: .8;
}

.uv-compact-current strong {
 font-size: 22px;
 line-height: 1;
 font-weight: 950;
}

.uv-compact-current em {
 font-size: 13px;
 font-style: normal;
 font-weight: 900;
}

.uv-compact-advice {
 margin: 0;
 color: #475569;
 font-size: 14px;
 line-height: 1.35;
}

.uv-inline-row {
 display: grid;
 grid-template-columns: 72px minmax(0, 1fr);
 align-items: center;
 gap: 10px;
 margin-top: 10px;
 padding-top: 10px;
 border-top: 1px solid rgba(148,163,184,.20);
}

.uv-inline-label {
 color: #64748b;
 font-size: 12px;
 font-weight: 900;
 text-transform: uppercase;
 letter-spacing: .05em;
}

.uv-inline-scroll {
 display: flex;
 align-items: center;
 gap: 7px;
 min-width: 0;
 overflow-x: auto;
 scrollbar-width: thin;
 padding-bottom: 2px;
}

.uv-inline-chip {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 flex: 0 0 auto;
 padding: 5px 9px;
 border: 1px solid;
 border-radius: 999px;
 white-space: nowrap;
}

.uv-inline-chip b {
 font-size: 12px;
 font-weight: 850;
}

.uv-inline-chip strong {
 font-size: 15px;
 line-height: 1;
 font-weight: 950;
}

.uv-day-chip {
 background: #f8fafc;
}

@media (max-width: 900px) {
 .uv-compact-main {
 grid-template-columns: 1fr auto;
 }

 .uv-compact-advice {
 grid-column: 1 / -1;
 }
}

@media (max-width: 640px) {
 .uv-panel-compact {
 padding: 12px;
 }

 .uv-compact-main {
 grid-template-columns: 1fr;
 gap: 9px;
 }

 .uv-compact-current {
 justify-self: start;
 }

 .uv-compact-advice {
 display: none;
 }

 .uv-inline-row {
 grid-template-columns: 1fr;
 gap: 6px;
 margin-top: 8px;
 padding-top: 8px;
 }
}

/* V21.2 — carte Santé compacte UV index + air sur 7 jours */
.health-panel{margin-bottom:22px;padding:20px 22px;border-radius:28px;overflow:hidden}
.health-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.health-title{display:flex;align-items:center;gap:12px;min-width:0}
.health-title-icon{width:42px;height:42px;display:grid;place-items:center;flex:0 0 42px;border-radius:14px;background:#fee2e2;font-size:21px}
.health-title .eyebrow-small{margin:0 0 2px}
.health-title h2{margin:0;font-size:23px}
.health-update{color:#64748b;font-size:12px;font-weight:750;white-space:nowrap}
.health-now{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.health-now-item{display:flex;align-items:center;gap:7px;min-height:38px;padding:7px 11px;border:1px solid rgba(148,163,184,.22);border-radius:999px;background:rgba(248,250,252,.88)}
.health-now-item>span{color:#64748b;font-size:13px;font-weight:800}
.health-now-item strong{font-size:16px;font-weight:950}
.health-now-item em{font-style:normal;color:#334155;font-size:13px;font-weight:850}
.health-now-item strong.uv-low,.health-value.uv-low{color:#15803d;background:#dcfce7}
.health-now-item strong.uv-moderate,.health-value.uv-moderate{color:#a16207;background:#fef9c3}
.health-now-item strong.uv-high,.health-value.uv-high{color:#c2410c;background:#ffedd5}
.health-now-item strong.uv-very-high,.health-value.uv-very-high{color:#b91c1c;background:#fee2e2}
.health-now-item strong.uv-extreme,.health-value.uv-extreme{color:#7e22ce;background:#f3e8ff}
.health-now-item strong[class]{padding:4px 8px;border-radius:999px}
.health-advice{display:flex;align-items:center;gap:7px;margin:0 0 12px;color:#475569;font-size:13px;line-height:1.45}
.health-advice span{color:#16a34a;font-weight:950}
.health-forecast{border:1px solid rgba(148,163,184,.22);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.72)}
.health-row{display:grid;grid-template-columns:minmax(90px,.8fr) 1fr 1fr;gap:8px;align-items:center;min-height:44px;padding:6px 10px;border-top:1px solid rgba(148,163,184,.16)}
.health-row:first-child{border-top:0}
.health-row-head{min-height:30px;background:#f8fafc;color:#64748b;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.05em}
.health-day{font-size:14px;color:#0f172a}
.health-value{display:flex;align-items:center;gap:7px;justify-content:flex-start;width:max-content;max-width:100%;padding:5px 9px;border-radius:999px}
.health-value b{font-size:14px;line-height:1}
.health-value small{font-size:12px;font-weight:850;white-space:nowrap}
.health-value.aq-good{color:#15803d;background:#dcfce7}.health-value.aq-fair{color:#4d7c0f;background:#ecfccb}.health-value.aq-moderate{color:#a16207;background:#fef9c3}.health-value.aq-poor{color:#c2410c;background:#ffedd5}.health-value.aq-very-poor{color:#b91c1c;background:#fee2e2}
.health-unavailable{color:#94a3b8;background:#f8fafc}
.health-hours{display:flex;align-items:center;gap:10px;margin-top:10px;min-width:0}
.health-hours-label{flex:0 0 auto;color:#475569;font-size:12px;font-weight:900;text-transform:uppercase}
.health-hours-scroll{display:flex;gap:6px;overflow-x:auto;padding:2px 1px;scrollbar-width:thin}
.health-hour{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:5px 8px;border-radius:999px;font-size:12px}
.health-hour b{font-weight:850}.health-hour strong{font-size:13px;font-weight:950}
.health-hour.uv-low{color:#15803d;background:#dcfce7}.health-hour.uv-moderate{color:#a16207;background:#fef9c3}.health-hour.uv-high{color:#c2410c;background:#ffedd5}.health-hour.uv-very-high{color:#b91c1c;background:#fee2e2}.health-hour.uv-extreme{color:#7e22ce;background:#f3e8ff}
@media(max-width:640px){.health-panel{padding:16px 14px;border-radius:24px}.health-head{align-items:flex-start}.health-update{display:none}.health-title-icon{width:36px;height:36px;flex-basis:36px}.health-title h2{font-size:20px}.health-now{gap:6px}.health-now-item{min-height:34px;padding:6px 9px}.health-now-item>span,.health-now-item em{font-size:12px}.health-row{grid-template-columns:72px 1fr 1fr;padding:6px 7px;gap:5px}.health-row-head{font-size:9px}.health-day{font-size:12px}.health-value{gap:4px;padding:5px 6px}.health-value small{font-size:10px}.health-hours{align-items:flex-start;flex-direction:column;gap:5px}}
@media(max-width:390px){.health-value small{display:none}.health-row{grid-template-columns:68px 1fr 1fr}.health-value{min-width:42px;justify-content:center}.health-advice{font-size:12px}}

.uv-inline-row,.uv-hourly-list,.health-hours{overflow-x:auto;overflow-y:hidden;white-space:nowrap;-webkit-overflow-scrolling:touch;display:flex;flex-wrap:nowrap;max-width:100%;}


/* V24 — explication UV ajoutée sans supprimer la qualité de l’air */
.health-uv-explainer{display:flex;align-items:baseline;gap:8px;margin:2px 0 7px;color:#475569;font-size:12px;line-height:1.35}
.health-uv-explainer strong{flex:0 0 auto;color:#0f172a;font-size:13px;font-weight:950}
.health-uv-scale{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 10px}
.health-uv-scale span{display:inline-flex;align-items:center;gap:4px;padding:4px 7px;border-radius:999px;font-size:10px;font-weight:850;line-height:1;white-space:nowrap}
.health-uv-scale b{font-size:11px;font-weight:950}
.health-uv-scale .uv-low{color:#15803d;background:#dcfce7}
.health-uv-scale .uv-moderate{color:#a16207;background:#fef9c3}
.health-uv-scale .uv-high{color:#c2410c;background:#ffedd5}
.health-uv-scale .uv-very-high{color:#b91c1c;background:#fee2e2}
.health-uv-scale .uv-extreme{color:#7e22ce;background:#f3e8ff}
@media(max-width:640px){.health-uv-explainer{display:block;margin-bottom:7px}.health-uv-explainer strong{display:block;margin-bottom:2px}.health-uv-scale{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:4px}}

/* V29 — badges UV plus visuels dans le tableau */
.health-uv-badge{
 display:inline-flex;
 align-items:center;
 gap:6px;
 width:max-content;
 max-width:100%;
 border:1px solid currentColor;
 box-shadow:0 2px 8px rgba(15,23,42,.08);
}
.health-uv-badge .health-uv-dot{
 width:8px;
 height:8px;
 flex:0 0 8px;
 border-radius:999px;
 background:currentColor;
 box-shadow:0 0 0 3px rgba(255,255,255,.7);
}
.health-uv-badge b{font-weight:950;white-space:nowrap}
.health-uv-badge small{font-weight:900;white-space:nowrap}
@media(max-width:640px){
 .health-uv-badge{gap:4px;padding:5px 7px}
 .health-uv-badge .health-uv-dot{width:7px;height:7px;flex-basis:7px}
}
@media(max-width:390px){
 .health-value.health-uv-badge small{display:inline;font-size:9px}
 .health-value.health-uv-badge{justify-content:flex-start;min-width:0}
}

/* V30 — alignement propre des colonnes du tableau santé sur Android */
.health-row{
 grid-template-columns:minmax(0,23%) minmax(0,45%) minmax(0,32%);
 column-gap:0;
}
.health-row > :first-child{
 justify-self:start;
 text-align:left;
}
.health-row > :nth-child(2),
.health-row > :nth-child(3){
 justify-self:center;
 text-align:center;
}
.health-row-head > :nth-child(2),
.health-row-head > :nth-child(3){
 width:100%;
 text-align:center;
}
.health-row .health-value{
 margin-inline:auto;
}
@media(max-width:640px){
 .health-row{
 grid-template-columns:minmax(0,23%) minmax(0,45%) minmax(0,32%);
 padding-left:8px;
 padding-right:8px;
 column-gap:0;
 }
}
@media(max-width:390px){
 .health-row{
 grid-template-columns:minmax(0,22%) minmax(0,47%) minmax(0,31%);
 }
}

/* V31 — Automatic health tips */
.health-recommendations{
 margin:18px 0 20px;
 padding:16px;
 border:1px solid rgba(15,23,42,.10);
 border-radius:18px;
 background:linear-gradient(180deg,rgba(248,250,252,.96),rgba(255,255,255,.98));
}
.health-recommendations-head{
 display:flex;
 align-items:flex-start;
 gap:10px;
 margin-bottom:13px;
}
.health-recommendations-head>span{font-size:22px;line-height:1}
.health-recommendations-head strong{display:block;font-size:16px;line-height:1.25;color:#0f172a}
.health-recommendations-head small{display:block;margin-top:3px;font-size:12px;line-height:1.35;color:#64748b}
.health-recommendations-grid{
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:10px;
}
.health-tip{
 display:flex;
 align-items:flex-start;
 gap:10px;
 min-width:0;
 padding:13px;
 border:1px solid rgba(15,23,42,.08);
 border-radius:14px;
 background:#fff;
 box-shadow:0 4px 14px rgba(15,23,42,.04);
}
.health-tip-icon{
 display:grid;
 place-items:center;
 flex:0 0 34px;
 width:34px;
 height:34px;
 border-radius:11px;
 background:#f1f5f9;
 font-size:18px;
}
.health-tip h3{margin:0 0 4px;font-size:14px;line-height:1.25;color:#0f172a}
.health-tip p{margin:0;font-size:12.5px;line-height:1.48;color:#475569}
.health-tip-sun .health-tip-icon{background:#fff7d6}
.health-tip-air .health-tip-icon{background:#eaf7f5}
.health-tip-heat .health-tip-icon{background:#eaf4ff}
.health-tip-activity .health-tip-icon{background:#edf8e9}
@media (max-width:640px){
 .health-recommendations{padding:13px;margin:15px 0 18px;border-radius:16px}
 .health-recommendations-grid{grid-template-columns:1fr;gap:8px}
 .health-tip{padding:11px}
 .health-tip h3{font-size:13.5px}
 .health-tip p{font-size:12px}
}

/* V32 — Compact expandable health tips at the end of the health card */
.health-recommendations{
 margin:18px 0 0;
 padding:0;
 overflow:hidden;
 border:1px solid rgba(15,23,42,.10);
 border-radius:16px;
 background:linear-gradient(180deg,rgba(248,250,252,.98),#fff);
}
.health-recommendations-head{
 display:grid;
 grid-template-columns:auto minmax(0,1fr) auto;
 align-items:center;
 gap:10px;
 margin:0;
 padding:13px 14px;
 cursor:pointer;
 list-style:none;
 -webkit-tap-highlight-color:transparent;
}
.health-recommendations-head::-webkit-details-marker{display:none}
.health-recommendations-head>span:first-child{font-size:20px;line-height:1}
.health-recommendations-head strong{display:block;font-size:14px;line-height:1.25;color:#0f172a}
.health-recommendations-head small{display:block;margin-top:2px;font-size:11.5px;line-height:1.3;color:#64748b}
.health-recommendations-toggle{
 display:grid;
 place-items:center;
 width:28px;
 height:28px;
 border-radius:999px;
 background:#eef2f7;
 color:#475569;
 font-size:18px;
 transition:transform .2s ease;
}
.health-recommendations[open] .health-recommendations-toggle{transform:rotate(180deg)}
.health-recommendations-grid{
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:8px;
 padding:0 12px 12px;
}
.health-recommendations:not([open]) .health-recommendations-grid{display:none}
.health-tip{padding:11px;border-radius:12px;box-shadow:none}
.health-tip-icon{flex-basis:30px;width:30px;height:30px;border-radius:9px;font-size:16px}
.health-tip h3{font-size:13px}
.health-tip p{font-size:11.8px;line-height:1.4}
@media(max-width:640px){
 .health-recommendations{margin-top:14px;border-radius:14px}
 .health-recommendations-head{padding:11px 12px}
 .health-recommendations-head strong{font-size:13.5px}
 .health-recommendations-head small{font-size:11px}
 .health-recommendations-grid{grid-template-columns:1fr;padding:0 10px 10px;gap:7px}
 .health-tip{padding:10px}
}


/* Dernière carte : résumé compact du jour */
.day-summary-panel {
 padding: 18px 20px;
 border-left: 5px solid rgba(34, 197, 94, .75);
}
.day-summary-panel.summary-good { border-left-color: rgba(234, 179, 8, .8); }
.day-summary-panel.summary-variable { border-left-color: rgba(249, 115, 22, .85); }
.day-summary-panel.summary-difficult { border-left-color: rgba(239, 68, 68, .85); }
.day-summary-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 22px;
 margin-bottom: 14px;
}
.day-summary-title {
 display: flex;
 align-items: center;
 gap: 12px;
 min-width: 0;
}
.day-summary-status { font-size: 1.55rem; line-height: 1; }
.day-summary-title h2 { margin: 2px 0 0; font-size: clamp(1.05rem, 2vw, 1.35rem); }
.day-summary-head > p {
 margin: 0;
 max-width: 580px;
 color: var(--muted, #64748b);
 font-size: .92rem;
 line-height: 1.45;
}
.day-summary-grid {
 display: grid;
 grid-template-columns: repeat(5, minmax(0, 1fr));
 gap: 8px;
}
.day-summary-grid span {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 7px;
 min-height: 42px;
 padding: 8px 10px;
 border: 1px solid rgba(148, 163, 184, .22);
 border-radius: 12px;
 background: rgba(248, 250, 252, .72);
 text-align: center;
 font-size: .82rem;
 line-height: 1.25;
}
.day-summary-grid b { font-size: 1rem; }

@media (max-width: 760px) {
 .day-summary-panel { padding: 15px 14px; }
 .day-summary-head { display: block; margin-bottom: 11px; }
 .day-summary-head > p { margin-top: 8px; font-size: .84rem; }
 .day-summary-title { gap: 9px; }
 .day-summary-status { font-size: 1.25rem; }
 .day-summary-grid {
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 7px;
 }
 .day-summary-grid span {
 justify-content: flex-start;
 min-height: 38px;
 padding: 7px 9px;
 text-align: left;
 font-size: .78rem;
 }
 .day-summary-grid span:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Résumé intégré à la première carte */
.hero-day-summary {
 margin-top: 18px;
 padding: 15px 16px;
 border-top: 1px solid rgba(148, 163, 184, .24);
 border-left: 4px solid rgba(34, 197, 94, .75);
 border-radius: 12px;
 background: rgba(248, 250, 252, .72);
}
.hero-day-summary.summary-good { border-left-color: rgba(234, 179, 8, .8); }
.hero-day-summary.summary-variable { border-left-color: rgba(249, 115, 22, .85); }
.hero-day-summary.summary-difficult { border-left-color: rgba(239, 68, 68, .85); }
.hero-day-summary-heading {
 display: flex;
 align-items: center;
 gap: 10px;
}
.hero-day-summary-heading strong {
 display: block;
 margin-top: 2px;
 font-size: 1rem;
}
.hero-day-summary-label {
 display: block;
 color: var(--muted, #64748b);
 font-size: .68rem;
 font-weight: 800;
 letter-spacing: .08em;
}
.hero-day-summary > p {
 margin: 8px 0 11px;
 color: var(--muted, #64748b);
 font-size: .87rem;
 line-height: 1.4;
}
.hero-day-summary .day-summary-grid {
 grid-template-columns: repeat(5, minmax(0, 1fr));
}
.site-forecast-technical-note {
 margin: 16px auto 4px;
 max-width: 1100px;
 padding: 0 8px;
 color: var(--muted, #64748b);
 font-size: .76rem;
 line-height: 1.5;
 text-align: center;
}
@media (max-width: 760px) {
 .hero-day-summary { margin-top: 14px; padding: 12px; }
 .hero-day-summary > p { font-size: .81rem; }
 .hero-day-summary .day-summary-grid {
 grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 .site-forecast-technical-note {
 margin-top: 12px;
 padding: 0 4px;
 font-size: .7rem;
 text-align: left;
 }
}


/* TIEMPODEHOY — previsiones integradas y 15 días */
.hero-inline-hourly-content .compact-forecast-main{column-gap:12px}
.hero-inline-hourly-content .compact-weather-icon,.hero-inline-hourly-content .compact-weather-icon img,.hero-inline-hourly-content .compact-weather-icon svg,.hero-inline-hourly-content .compact-detail-icon{width:56px!important;height:56px!important;flex:0 0 56px!important}
.hero-inline-hourly-content .compact-temp{min-width:58px;padding-left:10px;padding-right:10px}
.daily-15-panel{margin-bottom:22px;padding:0;overflow:hidden}
.daily-15-title{padding:24px 26px 16px}.daily-15-title h2{margin:0;color:#0f172a}
.daily-15-list{border-top:1px solid rgba(148,163,184,.22)}
.daily-15-row{background:#fff;border-bottom:1px solid rgba(148,163,184,.20)}.daily-15-row:nth-child(even){background:#f8fafc}
.daily-15-main{min-height:64px;display:grid;grid-template-columns:minmax(135px,.9fr) 58px minmax(170px,1.3fr) 112px 105px 120px 34px;align-items:center;gap:10px;padding:6px 18px}
.daily-15-date{color:#075985;font-size:15px;line-height:1.15}.daily-date-mobile{display:none}
.daily-15-icon{width:54px;height:54px;display:grid;place-items:center}.daily-15-weather-icon{width:54px;height:54px}
.daily-15-condition{min-width:0;color:#0f172a;font-size:14px;font-weight:850;line-height:1.18}
.daily-15-temps{display:flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap}.daily-15-temps strong{display:inline-flex;align-items:center;justify-content:center;min-width:44px;padding:7px 8px;border-radius:13px;color:var(--temp-color);background:var(--temp-bg);border:1px solid var(--temp-border);font-size:18px;font-weight:950}.daily-15-temps small{color:#94a3b8;font-weight:900}
.daily-15-rain,.daily-15-wind{color:#334155;font-size:13px;font-weight:850;white-space:nowrap}.daily-15-more{justify-self:end}
.daily-15-details{grid-template-columns:repeat(4,minmax(0,1fr));padding:12px 18px 16px;background:rgba(239,246,255,.55)}
.daily-15-unavailable{display:grid;gap:5px;padding:20px 26px 26px;color:#475569}.daily-15-unavailable small{color:#64748b}
@media(max-width:980px){.daily-15-main{grid-template-columns:minmax(120px,.9fr) 54px minmax(130px,1.2fr) 105px 95px 34px;grid-template-areas:"date icon condition temps rain more" "date icon condition temps wind more";row-gap:2px}.daily-15-date{grid-area:date}.daily-15-icon{grid-area:icon}.daily-15-condition{grid-area:condition}.daily-15-temps{grid-area:temps}.daily-15-rain{grid-area:rain}.daily-15-wind{grid-area:wind}.daily-15-more{grid-area:more}.daily-15-details{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){
.hero-inline-hourly-content .compact-forecast-main{grid-template-columns:72px 48px 62px minmax(0,1fr) 30px!important;column-gap:8px!important;row-gap:3px!important;padding:5px 6px!important}
.hero-inline-hourly-content .compact-weather-icon,.hero-inline-hourly-content .compact-weather-icon img,.hero-inline-hourly-content .compact-weather-icon svg,.hero-inline-hourly-content .compact-detail-icon{width:48px!important;height:48px!important;flex-basis:48px!important}
.daily-15-title{padding:18px 12px 14px}.daily-15-title h2{font-size:23px;line-height:1.13}
.daily-15-main{min-height:92px!important;display:grid!important;grid-template-columns:88px 48px minmax(0,1fr) 34px!important;grid-template-areas:"date icon temps more" "date icon condition more" "rain rain wind wind"!important;column-gap:8px!important;row-gap:4px!important;align-items:center!important;padding:9px 10px!important}
.daily-date-desktop{display:none}.daily-date-mobile{display:block}.daily-15-date{grid-area:date!important;align-self:center!important;font-size:13px!important;line-height:1.18!important}.daily-15-icon{grid-area:icon!important}.daily-15-temps{grid-area:temps!important;justify-content:flex-start!important;align-self:end!important}.daily-15-condition{grid-area:condition!important;align-self:start!important;font-size:12.5px!important;line-height:1.12!important;white-space:normal!important}.daily-15-rain{grid-area:rain!important;justify-self:start!important;font-size:11px!important}.daily-15-wind{grid-area:wind!important;justify-self:end!important;font-size:11px!important}.daily-15-more{grid-area:more!important;width:34px!important;height:34px!important;min-width:34px!important;padding:0!important}.daily-15-icon,.daily-15-weather-icon{width:48px!important;height:48px!important}.daily-15-temps strong{min-width:40px!important;padding:6px!important;font-size:18px!important}.daily-15-details{grid-template-columns:1fr 1fr;padding:10px 10px 14px}}
@media(max-width:390px){.daily-15-main{grid-template-columns:80px 44px minmax(0,1fr) 32px!important;column-gap:6px!important;padding-left:7px!important;padding-right:7px!important}.daily-15-date{font-size:12px!important}.daily-15-icon,.daily-15-weather-icon{width:44px!important;height:44px!important}.daily-15-temps strong{min-width:37px!important;padding:5px!important;font-size:17px!important}.daily-15-condition{font-size:11.5px!important}.daily-15-rain,.daily-15-wind{font-size:10px!important}}

/* WEATHER-INFO US time labels */
.health-hour b{min-width:52px;text-align:center;white-space:nowrap}
.temp-x-label,.wind-x-label{font-size:12px}


/* WEATHER-INFO — 15-day forecast icons: larger and mobile-safe */
.daily-15-main{
  grid-template-columns:minmax(135px,.9fr) 86px minmax(170px,1.3fr) 112px 105px 120px 34px !important;
}
.daily-15-icon,
.daily-15-weather-icon,
.daily-15-icon img,
.daily-15-icon svg{
  width:82px !important;
  height:82px !important;
  min-width:82px !important;
  flex:0 0 82px !important;
  object-fit:contain !important;
}
.daily-15-icon{
  display:grid !important;
  place-items:center !important;
}

@media(max-width:980px){
  .daily-15-main{
    grid-template-columns:minmax(120px,.9fr) 82px minmax(130px,1.2fr) 105px 95px 34px !important;
  }
}

@media(max-width:640px){
  .daily-15-main{
    min-height:108px !important;
    grid-template-columns:88px 78px minmax(0,1fr) 34px !important;
    grid-template-areas:
      "date icon temps more"
      "date icon condition more"
      "rain rain wind wind" !important;
    column-gap:8px !important;
  }

  .daily-15-icon,
  .daily-15-weather-icon,
  .daily-15-icon img,
  .daily-15-icon svg{
    width:76px !important;
    height:76px !important;
    min-width:76px !important;
    flex:0 0 76px !important;
  }
}

@media(max-width:390px){
  .daily-15-main{
    min-height:104px !important;
    grid-template-columns:76px 70px minmax(0,1fr) 32px !important;
    column-gap:5px !important;
  }

  .daily-15-icon,
  .daily-15-weather-icon,
  .daily-15-icon img,
  .daily-15-icon svg{
    width:68px !important;
    height:68px !important;
    min-width:68px !important;
    flex:0 0 68px !important;
  }
}


/* WEATHER-INFO — city autocomplete: allow full scrollable dropdown */
.search.city-search,
.city-search,
.city-search-box,
.home-search,
.home-search .city-search-box,
.home-search-v9,
.home-search-v9 .city-search-box {
  overflow: visible !important;
}

.city-suggestions,
.home-search .city-suggestions,
.home-search-v9 .city-suggestions {
  max-height: min(65vh, 520px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  z-index: 999999 !important;
}

/* Override the later V9 rule that was clipping the suggestions */
.home-search-v9 .city-suggestions {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

@media (max-width: 640px) {
  .city-suggestions,
  .home-search .city-suggestions,
  .home-search-v9 .city-suggestions {
    max-height: min(60vh, 420px) !important;
  }
}


/* Hourly / 3-hour forecast switch — aligned with validated city pages */
/* =========================================================
   CARD 3 H / SUPER FORECAST HORAIRE
   ========================================================= */

.compact-forecast-title-with-switch {
    align-items: flex-start;
}

.compact-forecast-title-with-switch h2 {
    margin-bottom: 10px;
}

.super-forecast-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 16px;
    border: 1px solid #1d4ed8;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 900;
    box-shadow: 0 9px 22px rgba(37,99,235,.20);
    cursor: pointer;
}

.super-forecast-switch:hover {
    background: #1d4ed8;
}

.forecast-mode[hidden] {
    display: none !important;
}

@media (max-width: 640px) {
    .super-forecast-switch {
        width: 100%;
        min-height: 42px;
        padding: 10px 12px;
        font-size: 12px;
    }
}


/* Ajustement isolé : espace entre le titre 3 h et le bouton Super Forecast.
   Ne modifie ni les cards ni les courbes. */
.super-forecast-switch {
    margin-top: 12px !important;
}


/* =========================================================
   SÉLECTEUR VISUEL 3 H / HORA POR HORA
   Modification isolée : ne touche ni aux cards ni aux courbes.
   ========================================================= */
.forecast-view-switch {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 12px;
}

.forecast-view-label {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.forecast-view-options {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    background: #f1f5f9;
}

.forecast-view-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.forecast-view-option-3h {
    color: #64748b;
}

.forecast-view-option-3h.is-active {
    background: #fff;
    color: #0f172a;
    box-shadow: 0 2px 7px rgba(15,23,42,.10);
}

.super-forecast-switch.forecast-view-option-hourly {
    min-height: 34px;
    margin: 0 !important;
    padding: 6px 12px !important;
    border: 0 !important;
    background: transparent;
    color: #2563eb;
    box-shadow: none;
    cursor: pointer;
}

.super-forecast-switch.forecast-view-option-hourly:hover {
    background: #dbeafe;
}

.super-forecast-switch.forecast-view-option-hourly.is-active {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 3px 9px rgba(37,99,235,.22);
}

@media (max-width: 640px) {
    .forecast-view-switch {
        display: block;
        margin-top: 11px;
    }

    .forecast-view-label {
        display: block;
        margin-bottom: 6px;
    }

    .forecast-view-options {
        display: flex;
        width: 100%;
        box-sizing: border-box;
    }

    .forecast-view-option {
        flex: 1 1 0;
        min-width: 0;
        padding: 7px 7px;
        font-size: 11px;
    }

    .super-forecast-switch.forecast-view-option-hourly {
        width: auto !important;
        min-height: 34px !important;
        padding: 7px 7px !important;
        font-size: 11px !important;
    }
}


/* Sélecteur final : deux vrais boutons cliquables sous le titre */
.forecast-view-switch {
    margin-top: 12px !important;
}

.forecast-view-label {
    display: none !important;
}

.forecast-view-option-3h {
    border: 0;
    cursor: pointer;
    font-family: inherit;
}

.forecast-view-option-3h.is-active {
    background: #2563eb !important;
    color: #fff !important;
    box-shadow: 0 3px 9px rgba(37,99,235,.22) !important;
}

.super-forecast-switch.forecast-view-option-hourly.is-active {
    background: #2563eb !important;
    color: #fff !important;
}

.forecast-view-option:not(.is-active) {
    background: transparent !important;
    color: #2563eb !important;
    box-shadow: none !important;
}



/* WEATHER-INFO: final hourly chart structure ported from validated TDH version */
/* =========================================================
   COURBES HORAIRES — CORRECTIF MINIMAL SUR LE STYLE D'ORIGINE
   - aucun redesign
   - axe Y au même endroit / même style
   - courbe seule scrollable
   - largeur = données réelles, sans marge blanche ajoutée
   ========================================================= */

.wind-chart-box,
.temp-chart-box {
    overflow: hidden !important;
}

/* Le scroll fonctionne sur desktop ET mobile. */
.chart-scroll {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* La largeur vient uniquement de width="" dans le PHP. */
.chart-scroll .wind-chart-svg,
.chart-scroll .temp-chart-svg {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Désactive les anciennes largeurs mobiles 920/880px du CSS d'origine. */
@media (max-width: 760px) {
    .chart-scroll .wind-chart-svg,
    .chart-scroll .temp-chart-svg {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

@media (max-width: 420px) {
    .chart-scroll .wind-chart-svg,
    .chart-scroll .temp-chart-svg {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

/*
 * Axe Y fixe : copie exacte des graduations d'origine.
 * Il se superpose uniquement à la marge gauche déjà prévue par le SVG (x=0..70).
 * Aucun déplacement du titre °C / km/h.
 */
.chart-fixed-y-axis {
    position: absolute;
    z-index: 5;
    left: 26px;
    top: 0;
    width: 70px;
    pointer-events: none;
    overflow: hidden;
}

.chart-fixed-y-axis-temp {
    height: 385px;
}

.chart-fixed-y-axis-wind {
    height: 360px;
}

.chart-fixed-y-axis > svg {
    display: block;
    width: 1000px;
    height: 100%;
    max-width: none;
}

/* On masque uniquement les graduations Y qui défilent dans le SVG principal. */
.chart-scroll > .temp-chart-svg .temp-y-label,
.chart-scroll > .wind-chart-svg .wind-y-label {
    visibility: hidden;
}

/* Fond très léger derrière les graduations fixes pour garder la lisibilité,
   sans modifier le look du graphique. */
.chart-fixed-y-axis::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 70%, rgba(255,255,255,0) 100%);
}

@media (max-width: 760px) {
    .chart-fixed-y-axis {
        left: 8px;
    }

    .chart-fixed-y-axis-temp {
        height: 330px;
    }

    .chart-fixed-y-axis-wind {
        height: 310px;
    }
}

@media (max-width: 420px) {
    .chart-fixed-y-axis-temp {
        height: 315px;
    }

    .chart-fixed-y-axis-wind {
        height: 295px;
    }
}


/* =========================================================
   COURBES HORAIRES — AXE Y FIXE + PREMIER CRÉNEAU ENTIER
   Correctif final : l'échelle est hors du conteneur scrollable.
   ========================================================= */

.wind-chart-box,
.temp-chart-box {
    overflow: hidden !important;
}

/* Deux colonnes : échelle fixe à gauche, courbe scrollable à droite. */
.chart-plot-shell {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    border-radius: 24px;
    border: 1px solid rgba(148,163,184,.25);
    background: #fff;
}

.chart-plot-shell-temp {
    background:
        radial-gradient(circle at 80% 15%, rgba(249,115,22,.10), transparent 13rem),
        linear-gradient(180deg, #ffffff, #fffaf5);
}

.chart-plot-shell-wind {
    background:
        radial-gradient(circle at 80% 15%, rgba(37,99,235,.10), transparent 13rem),
        linear-gradient(180deg, #ffffff, #f8fbff);
}

/* L'échelle ne fait plus partie du scroll : elle reste toujours immobile. */
.chart-fixed-y-axis {
    position: relative !important;
    inset: auto !important;
    z-index: 3 !important;
    width: 58px !important;
    min-width: 58px !important;
    overflow: hidden !important;
    pointer-events: none !important;
    background: rgba(255,255,255,.94);
    border-right: 1px solid rgba(148,163,184,.16);
}

.chart-fixed-y-axis-temp {
    height: 385px !important;
}

.chart-fixed-y-axis-wind {
    height: 360px !important;
}

.chart-fixed-y-axis > svg {
    display: block !important;
    width: 58px !important;
    max-width: 58px !important;
    height: 100% !important;
}

/* La courbe seule reçoit le swipe horizontal. */
.chart-scroll {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y !important;
    padding: 0 !important;
    margin: 0 !important;
}

.chart-scroll .wind-chart-svg,
.chart-scroll .temp-chart-svg {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* Les valeurs Y du SVG mobile sont supprimées : seule la colonne fixe les affiche. */
.chart-scroll > .temp-chart-svg .temp-y-label,
.chart-scroll > .wind-chart-svg .wind-y-label {
    display: none !important;
}

/* Le petit titre d'unité reste aligné avec la colonne d'échelle. */
.temp-y-title,
.wind-y-title {
    left: 8px !important;
    z-index: 6 !important;
}

/* Plus d'ancien pseudo-élément de scroll par-dessus le premier créneau. */
.chart-scroll::after {
    display: none !important;
}

@media (max-width: 760px) {
    .chart-plot-shell {
        grid-template-columns: 54px minmax(0, 1fr) !important;
    }

    .chart-fixed-y-axis {
        width: 54px !important;
        min-width: 54px !important;
    }

    .chart-fixed-y-axis > svg {
        width: 54px !important;
        max-width: 54px !important;
    }

    .chart-fixed-y-axis-temp {
        height: 330px !important;
    }

    .chart-fixed-y-axis-wind {
        height: 310px !important;
    }

    .temp-y-title,
    .wind-y-title {
        left: 5px !important;
    }
}

@media (max-width: 420px) {
    .chart-plot-shell {
        grid-template-columns: 52px minmax(0, 1fr) !important;
    }

    .chart-fixed-y-axis {
        width: 52px !important;
        min-width: 52px !important;
    }

    .chart-fixed-y-axis > svg {
        width: 52px !important;
        max-width: 52px !important;
    }

    .chart-fixed-y-axis-temp {
        height: 315px !important;
    }

    .chart-fixed-y-axis-wind {
        height: 295px !important;
    }
}


/* =========================================================
   COURBES HORAIRES — VERSION COMPACTE
   Axe fixe conservé, mais sans gaspiller la largeur mobile.
   ========================================================= */

.chart-plot-shell,
.chart-plot-shell-temp,
.chart-plot-shell-wind {
    grid-template-columns: 44px minmax(0, 1fr) !important;
}

/* Colonne d'échelle beaucoup plus fine et visuellement intégrée à la grille. */
.chart-fixed-y-axis {
    width: 44px !important;
    min-width: 44px !important;
    background: transparent !important;
    border-right: 0 !important;
}

.chart-fixed-y-axis > svg {
    width: 44px !important;
    max-width: 44px !important;
    overflow: visible !important;
}

/* Échelle plus discrète pour laisser respirer la courbe. */
.chart-fixed-y-axis .temp-y-label,
.chart-fixed-y-axis .wind-y-label {
    font-size: 12px !important;
    font-weight: 800 !important;
}

/* La grille vient visuellement jusqu'à l'échelle. */
.chart-scroll {
    margin-left: -1px !important;
}

/* Le titre °C / km/h est rapproché de l'axe. */
.temp-y-title,
.wind-y-title {
    left: 3px !important;
}

/* Enlever toute grosse séparation visuelle résiduelle. */
.chart-plot-shell {
    column-gap: 0 !important;
}

@media (max-width: 760px) {
    .chart-plot-shell,
    .chart-plot-shell-temp,
    .chart-plot-shell-wind {
        grid-template-columns: 42px minmax(0, 1fr) !important;
    }

    .chart-fixed-y-axis {
        width: 42px !important;
        min-width: 42px !important;
    }

    .chart-fixed-y-axis > svg {
        width: 42px !important;
        max-width: 42px !important;
    }

    .chart-fixed-y-axis .temp-y-label,
    .chart-fixed-y-axis .wind-y-label {
        font-size: 11.5px !important;
    }

    .temp-y-title,
    .wind-y-title {
        left: 2px !important;
    }
}

@media (max-width: 420px) {
    .chart-plot-shell,
    .chart-plot-shell-temp,
    .chart-plot-shell-wind {
        grid-template-columns: 40px minmax(0, 1fr) !important;
    }

    .chart-fixed-y-axis {
        width: 40px !important;
        min-width: 40px !important;
    }

    .chart-fixed-y-axis > svg {
        width: 40px !important;
        max-width: 40px !important;
    }
}


/* =========================================================
   COURBES HORAIRES — FINITION AXE / UNITÉS
   - échelle légèrement plus à gauche
   - °C et km/h à l'intérieur de la colonne fixe
   - aucun débordement hors de la card
   ========================================================= */

.chart-plot-shell,
.chart-plot-shell-temp,
.chart-plot-shell-wind {
    grid-template-columns: 40px minmax(0, 1fr) !important;
}

.chart-fixed-y-axis {
    position: relative !important;
    width: 40px !important;
    min-width: 40px !important;
    overflow: hidden !important;
}

.chart-fixed-y-axis > svg {
    width: 40px !important;
    max-width: 40px !important;
}

/* Unité intégrée dans l'axe : elle ne peut plus sortir du cadre. */
.chart-axis-unit {
    position: absolute;
    z-index: 8;
    left: 5px;
    top: 7px;
    display: block;
    margin: 0;
    padding: 0;
    color: #475569;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
}

.chart-axis-unit-temp {
    font-size: 13px;
}

.chart-axis-unit-wind {
    font-size: 10px;
    letter-spacing: -.02em;
}

/* Les anciens titres externes ne doivent plus réserver d'espace ni réapparaître. */
.temp-y-title,
.wind-y-title {
    display: none !important;
}

/* Valeurs de l'échelle légèrement rapprochées du bord gauche. */
.chart-fixed-y-axis .temp-y-label,
.chart-fixed-y-axis .wind-y-label {
    font-size: 11.5px !important;
    font-weight: 800 !important;
}

/* Laisser la grille commencer presque immédiatement après l'échelle. */
.chart-scroll {
    margin-left: -1px !important;
}

@media (max-width: 760px) {
    .chart-plot-shell,
    .chart-plot-shell-temp,
    .chart-plot-shell-wind {
        grid-template-columns: 38px minmax(0, 1fr) !important;
    }

    .chart-fixed-y-axis {
        width: 38px !important;
        min-width: 38px !important;
    }

    .chart-fixed-y-axis > svg {
        width: 38px !important;
        max-width: 38px !important;
    }

    .chart-axis-unit {
        left: 4px;
        top: 7px;
    }

    .chart-axis-unit-temp {
        font-size: 12px;
    }

    .chart-axis-unit-wind {
        font-size: 9px;
    }

    .chart-fixed-y-axis .temp-y-label,
    .chart-fixed-y-axis .wind-y-label {
        font-size: 11px !important;
    }
}

@media (max-width: 420px) {
    .chart-plot-shell,
    .chart-plot-shell-temp,
    .chart-plot-shell-wind {
        grid-template-columns: 37px minmax(0, 1fr) !important;
    }

    .chart-fixed-y-axis {
        width: 37px !important;
        min-width: 37px !important;
    }

    .chart-fixed-y-axis > svg {
        width: 37px !important;
        max-width: 37px !important;
    }

    .chart-axis-unit {
        left: 3px;
    }
}


/* =========================================================
   MICRO-AJUSTEMENT UNITÉS AXE
   Le texte de l'unité est décalé vers la droite uniquement.
   Les graduations et la zone de courbe ne bougent pas.
   ========================================================= */

.chart-axis-unit {
    left: 8px !important;
}

.chart-axis-unit-temp {
    left: 8px !important;
}

.chart-axis-unit-wind {
    left: 7px !important;
}

@media (max-width: 760px) {
    .chart-axis-unit-temp {
        left: 7px !important;
    }

    .chart-axis-unit-wind {
        left: 6px !important;
    }
}

@media (max-width: 420px) {
    .chart-axis-unit-temp {
        left: 7px !important;
    }

    .chart-axis-unit-wind {
        left: 6px !important;
    }
}


/* =========================================================
   COURBES — SCROLL HORIZONTAL AUSSI SUR DESKTOP
   Mobile inchangé ; desktop ne coupe plus les données.
   ========================================================= */

.chart-scroll,
.chart-scroll-temp,
.chart-scroll-wind {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-width: 100% !important;
    min-width: 0 !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y !important;
    cursor: grab;
}

.chart-scroll:active,
.chart-scroll-temp:active,
.chart-scroll-wind:active {
    cursor: grabbing;
}

.chart-scroll .temp-chart-svg,
.chart-scroll .wind-chart-svg,
.chart-scroll-temp .temp-chart-svg,
.chart-scroll-wind .wind-chart-svg {
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    display: block !important;
}

/* Empêche les wrappers desktop de masquer le rail horizontal. */
.temp-chart-box,
.wind-chart-box,
.chart-plot-shell,
.chart-plot-shell-temp,
.chart-plot-shell-wind {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Scrollbar desktop visible et discrète. */
@media (min-width: 761px) {
    .chart-scroll,
    .chart-scroll-temp,
    .chart-scroll-wind {
        scrollbar-width: thin;
        scrollbar-color: rgba(37,99,235,.35) transparent;
    }

    .chart-scroll::-webkit-scrollbar,
    .chart-scroll-temp::-webkit-scrollbar,
    .chart-scroll-wind::-webkit-scrollbar {
        height: 10px;
    }

    .chart-scroll::-webkit-scrollbar-thumb,
    .chart-scroll-temp::-webkit-scrollbar-thumb,
    .chart-scroll-wind::-webkit-scrollbar-thumb {
        background: rgba(37,99,235,.30);
        border-radius: 999px;
    }
}