.container { width: 100%; max-width: 820px; margin: 0 auto; padding: 20px; }
.back { display: inline-block; margin-bottom: 20px; color: #9ca3af; font-size: 0.9em; }
.back:hover { color: #10b981; }
.site-header { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 24px; }
.site-logo { height: 80px; width: auto; object-fit: contain; }
.site-logo:hover { opacity: 0.85; }
.city-title { text-align: center; font-size: 2.5em; color: #10b981; margin: 0 0 6px; }
.timeline-grid { display: flex; flex-direction: column; gap: 20px; }
.day-card { background-color: #1f2937; border-radius: 12px; padding: 22px; display: flex; align-items: flex-start; box-shadow: 0 10px 15px rgba(0,0,0,0.3); border-left: 6px solid #3b82f6; flex-wrap: wrap; gap: 16px; }
.day-card.tomorrow { border-left-color: #f59e0b; }
.day-card.after-tomorrow { border-left-color: #ef4444; }
.day-meta { width: 120px; flex-shrink: 0; }
.day-label { font-size: 1.2em; font-weight: bold; }
.day-date { font-size: 0.85em; color: #9ca3af; margin-top: 3px; }
.day-picto { width: 80px; flex-shrink: 0; }
.day-picto svg { width: 72px; height: 72px; display: block; }
.day-details { flex-grow: 1; min-width: 260px; }
.day-temp { font-size: 1.05em; font-weight: bold; margin-bottom: 10px; }
.day-temp span { color: #10b981; }
.day-joke { font-style: italic; color: #d1d5db; line-height: 1.5; margin-bottom: 10px; }
.day-dicton { margin: 0 0 14px; padding: 8px 14px; border-left: 3px solid #78716c; background: rgba(120,113,108,0.1); border-radius: 0 6px 6px 0; color: #a8a29e; font-style: italic; font-size: 0.9em; line-height: 1.5; }
.dicton-icon { margin-right: 4px; }
.periodes-grid { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.periode-block { flex: 1; min-width: 80px; background: #111827; border-radius: 8px; padding: 10px; text-align: center; border: 1px solid #374151; }
.periode-label { font-size: 0.75em; color: #9ca3af; margin-bottom: 4px; }
.periode-picto svg { width: 32px; height: 32px; margin: 4px auto; display: block; }
.periode-temp { font-size: 1.3em; font-weight: bold; color: #10b981; }
.periode-wind { font-size: 0.8em; color: #6b7280; margin-top: 3px; }
.periode-extra { font-size: 0.78em; color: #6b7280; margin-top: 2px; }
.survival-stats { display: flex; gap: 10px; flex-wrap: wrap; font-size: 0.85em; background: #111827; padding: 10px; border-radius: 8px; border: 1px solid #374151; }
.stat-badge { display: flex; align-items: center; gap: 5px; color: #9ca3af; }
.stat-badge strong { color: #f3f4f6; }
.faq { margin-top: 40px; }
.faq-title { font-size: 1.4em; color: #10b981; margin-bottom: 16px; }
.faq-item { background: #1f2937; border-radius: 10px; margin-bottom: 10px; border: 1px solid #374151; }
.faq-item summary { padding: 14px 18px; cursor: pointer; font-weight: bold; color: #f3f4f6; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::after { content: '+'; color: #10b981; font-size: 1.3em; }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { padding: 0 18px 14px; margin: 0; color: #d1d5db; line-height: 1.6; }

/* Joke submission form */
.joke-submit { margin-top: 30px; }
.joke-submit > details { background: #1f2937; border-radius: 10px; border: 1px solid #374151; }
.joke-submit > details > summary { padding: 14px 18px; cursor: pointer; font-weight: bold; color: #10b981; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.joke-submit > details > summary::after { content: '+'; color: #10b981; font-size: 1.3em; }

.joke-submit__body { padding: 0 18px 18px; }
.joke-submit__body p { color: #9ca3af; font-size: 0.9em; margin-top: 0; }
.joke-submit__field { display: flex; flex-direction: column; gap: 6px; }
.joke-submit__field label { color: #f3f4f6; font-weight: 600; }
.joke-submit__field textarea { background: #111827; border: 1px solid #374151; color: #f3f4f6; border-radius: 6px; padding: 10px; font-size: 0.95em; font-family: inherit; resize: vertical; }
.joke-submit__hint { color: #6b7280; font-size: 0.82em; }
.joke-submit__btn { margin-top: 12px; background: #10b981; color: #fff; border: none; border-radius: 6px; padding: 10px 20px; font-size: 0.95em; cursor: pointer; font-weight: 600; }
.joke-submit__btn:hover { background: #059669; }
.flash--success { background: #065f46; color: #a7f3d0; padding: 12px 18px; border-radius: 8px; margin-bottom: 16px; }
.flash--error { background: #7f1d1d; color: #fca5a5; padding: 12px 18px; border-radius: 8px; margin-bottom: 16px; }

/* Nearby cities mesh */
.nearby-cities { margin-top: 40px; padding-top: 24px; border-top: 1px solid #374151; }
.nearby-cities__title { font-size: 1.1em; color: #9ca3af; margin-bottom: 14px; font-weight: 600; }
.nearby-cities__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nearby-cities__list li a { display: inline-block; padding: 6px 14px; background: #1f2937; border: 1px solid #374151; border-radius: 20px; color: #10b981; font-size: 0.88em; text-decoration: none; transition: background 0.15s; }
.nearby-cities__list li a:hover { background: #374151; color: #fff; }

/* Share buttons */
.share-section { margin: 32px 0; text-align: center; }
.share-title { color: #9ca3af; font-size: 0.95em; margin-bottom: 12px; }
.share-buttons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.share-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 8px; font-size: 0.9em; font-weight: 600; text-decoration: none; cursor: pointer; border: none; transition: opacity 0.2s, transform 0.1s; }
.share-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.share-btn:hover { opacity: 0.85; transform: translateY(-1px); }
.share-btn--x { background: #000; color: #fff; }
.share-btn--facebook { background: #1877f2; color: #fff; }
.share-btn--whatsapp { background: #25d366; color: #fff; }
.share-btn--copy { background: #374151; color: #e5e7eb; }
.share-btn--copied { background: #10b981 !important; color: #fff; }

/* Narrative summary */
.forecast-narrative { margin: 16px 0 24px; padding: 16px 20px; background: #1f2937; border-left: 4px solid #10b981; border-radius: 0 8px 8px 0; }
.forecast-narrative__text { color: #d1d5db; line-height: 1.7; font-size: 1em; margin: 0; }

/* Practical tips */
.forecast-tips { margin: 32px 0; }
.forecast-tips__title { font-size: 1.1em; color: #9ca3af; margin-bottom: 14px; font-weight: 600; }
.forecast-tips__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.tip-card { background: #1f2937; border: 1px solid #374151; border-radius: 10px; padding: 14px 16px; display: flex; align-items: flex-start; gap: 10px; }
.tip-icon { font-size: 1.5em; flex-shrink: 0; line-height: 1; margin-top: 2px; }
.tip-text { color: #d1d5db; font-size: 0.88em; line-height: 1.5; margin: 0; }

/* Vigilance banner */
.vigilance-banner { margin: 16px 0 24px; border-radius: 10px; overflow: hidden; border: 1px solid #374151; }
.vigilance-header { background: #111827; padding: 10px 16px; font-size: 0.85em; font-weight: 600; color: #9ca3af; border-bottom: 1px solid #374151; }
.vigilance-alerts { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; background: #111827; }
.vigilance-alert { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; font-size: 0.9em; }
.vigilance-alert__icon { font-size: 1.3em; }
.vigilance-alert__body { display: flex; flex-direction: column; }
.vigilance-alert__level { font-weight: 700; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.05em; }
.vigilance-alert__phenom { font-size: 0.9em; }
.vigilance--yellow  { background: rgba(234,179,8,0.15);  border: 1px solid #ca8a04; color: #fef08a; }
.vigilance--orange  { background: rgba(249,115,22,0.15); border: 1px solid #ea580c; color: #fed7aa; }
.vigilance--red     { background: rgba(239,68,68,0.15);  border: 1px solid #dc2626; color: #fca5a5; }
.vigilance--green   { background: rgba(34,197,94,0.1);   border: 1px solid #16a34a; color: #bbf7d0; }
.vigilance-source { padding: 6px 16px 10px; font-size: 0.75em; color: #6b7280; background: #111827; margin: 0; }
.vigilance-source a { color: #4b9af8; text-decoration: none; }
.vigilance-source a:hover { text-decoration: underline; }

/* ── Score de survie ── */
.survival-score {
    display: flex;
    gap: 16px;
    align-items: center;
    background: #1f2937;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
    border: 1px solid #374151;
}
.survival-number { text-align: center; flex-shrink: 0; line-height: 1; min-width: 64px; }
.survival-value { font-size: 2.6em; font-weight: 900; }
.survival-max { font-size: .8em; color: #4b5563; }
.survival-body { flex: 1; min-width: 0; }
.survival-header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.survival-label { font-size: 1.05em; font-weight: 700; }
.survival-causes { font-size: .78em; color: #6b7280; font-style: italic; }
.survival-bar-wrap { height: 6px; background: #374151; border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.survival-bar { height: 100%; border-radius: 3px; transition: width .6s ease; }
.survival-verdict { margin: 0; font-size: .85em; color: #9ca3af; font-style: italic; }

/* ── Jean-Michel Météo ── */
.jean-michel {
    display: flex; gap: 16px; align-items: flex-start;
    background: #1f2937; border-radius: 12px; padding: 18px 20px;
    margin-bottom: 20px; border-left: 4px solid #374151;
}
.jean-michel--pleased   { border-left-color: #3b82f6; }
.jean-michel--ecstatic  { border-left-color: #a78bfa; }
.jean-michel--festive   { border-left-color: #60a5fa; }
.jean-michel--mysterious{ border-left-color: #6b7280; }
.jean-michel--absent    { border-left-color: #f59e0b; }
.jm-avatar { width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#374151,#1f2937);border:2px solid #4b5563;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.jm-initials { font-size:.75em;font-weight:800;color:#10b981;letter-spacing:.05em; }
.jm-body { flex:1;min-width:0; }
.jm-header { display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px; }
.jm-name { color:#f9fafb;font-size:.95em; }
.jm-status { color:#6b7280;font-size:.8em;font-style:italic; }
.jm-quote { margin:0 0 6px;color:#d1d5db;font-style:italic;font-size:.95em;line-height:1.5;border:none;padding:0; }
.jm-extra { margin:4px 0 0;font-size:.82em;color:#9ca3af; }

/* ── Comparaison climatique ── */
.climate-delta { display:flex;align-items:center;gap:14px;background:rgba(16,185,129,.07);border:1px solid rgba(16,185,129,.2);border-radius:10px;padding:14px 18px;margin-bottom:20px;flex-wrap:wrap; }
.climate-delta__emoji { font-size:2em;flex-shrink:0; }
.climate-delta__text { flex:1;min-width:180px; }
.climate-delta__text strong { color:#f9fafb;font-size:.95em; }
.climate-delta__text p { margin:3px 0 0;color:#9ca3af;font-size:.85em;line-height:1.4; }
.climate-delta__ref { font-size:.75em;color:#4b5563;white-space:nowrap; }

/* ── Comparaison pluviométrique ── */
.rainfall-compare {
    background: rgba(59,130,246,.07);
    border: 1px solid rgba(59,130,246,.22);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 20px;
}
.rainfall-compare__header {
    display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
}
.rainfall-compare__emoji { font-size: 2em; flex-shrink: 0; }
.rainfall-compare__titles { display: flex; flex-direction: column; }
.rainfall-compare__title { color: #f9fafb; font-size: .95em; font-weight: 700; }
.rainfall-compare__sub { color: #6b7280; font-size: .75em; margin-top: 2px; }
.rainfall-compare__prob {
    margin-left: auto; align-self: center;
    font-size: .8em; font-weight: 600; color: #93c5fd;
    background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.25);
    border-radius: 20px; padding: 3px 10px; white-space: nowrap;
}
.rainfall-compare__message {
    color: #d1d5db; font-size: .88em; line-height: 1.6;
    margin: 0 0 14px; font-style: italic;
}
.rainfall-compare__bar-wrap { }
.rainfall-compare__bar-track {
    position: relative; height: 8px; background: #1f2937;
    border-radius: 4px; overflow: visible; margin-bottom: 6px;
}
.rainfall-compare__bar-fill {
    height: 100%; border-radius: 4px;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
    transition: width .6s ease;
    min-width: 4px;
}
.rainfall-compare__bar-avg {
    position: absolute; top: -4px; left: 50%;
    width: 2px; height: 16px; background: #9ca3af;
    border-radius: 1px;
    title: "Normale 5 ans";
}
.rainfall-compare__bar-avg::after {
    content: '▲ normale'; position: absolute; top: 18px; left: 50%;
    transform: translateX(-50%); font-size: .65em; color: #6b7280;
    white-space: nowrap;
}
.rainfall-compare__bar-labels {
    display: flex; justify-content: space-between;
    font-size: .75em; color: #6b7280; margin-top: 22px;
}

/* ── Graphe historique ── */
.climate-chart-section { margin-bottom: 20px; }
.climate-chart-wrap {
    background: #1f2937;
    border-radius: 12px;
    padding: 16px 20px;
    border: 1px solid #374151;
    min-height: 80px;
    position: relative;
}
.chart-loading {
    display: flex; align-items: center; gap: 10px;
    color: #6b7280; font-size: .9em; padding: 20px 0;
    justify-content: center;
}
.chart-spinner {
    width: 18px; height: 18px;
    border: 2px solid #374151;
    border-top-color: #10b981;
    border-radius: 50%;
    animation: spin .8s linear infinite;
    flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }
.chart-msg { color: #6b7280; font-size: .85em; text-align: center; padding: 12px 0; margin: 0; }

/* ── Fil d'Ariane ── */
.breadcrumb {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
    margin-bottom: 16px; font-size: .82em; color: #6b7280;
}
.breadcrumb__sep { color: #374151; }
.breadcrumb__item { color: #9ca3af; text-decoration: none; transition: color .15s; }
.breadcrumb__item:hover { color: #10b981; }
.breadcrumb__item--current { color: #f9fafb; font-weight: 600; }

/* ── Boutons navigation géographique ── */
.geo-nav-links {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-bottom: 28px; margin-top: 8px;
}
.geo-nav-links__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 8px;
    background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.25);
    color: #93c5fd; font-size: .88em; font-weight: 600;
    text-decoration: none; transition: background .15s, border-color .15s;
}
.geo-nav-links__btn:hover { background: rgba(59,130,246,.2); border-color: #3b82f6; color: #bfdbfe; }
.geo-nav-links__btn--region {
    background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.2);
    color: #6ee7b7;
}
.geo-nav-links__btn--region:hover { background: rgba(16,185,129,.18); border-color: #10b981; color: #a7f3d0; }

/* ── Pages Région / Département ── */
.geo-cities-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.geo-city-card { display: flex; flex-direction: column; align-items: center; gap: 4px; background: #1f2937; border: 1px solid #374151; border-radius: 10px; padding: 14px 10px; text-decoration: none; color: #f3f4f6; transition: border-color .2s, transform .1s; text-align: center; }
.geo-city-card:hover { border-color: #10b981; transform: translateY(-2px); }
.geo-city-card--loaded { border-top: 3px solid #3b82f6; }
.geo-city-picto svg { width: 48px; height: 48px; }
.geo-city-name { font-weight: 700; font-size: .9em; color: #f9fafb; }
.geo-city-temp { font-size: .85em; color: #10b981; }
.geo-city-wind { font-size: .78em; color: #6b7280; }
.geo-city-extra { font-size: .75em; color: #60a5fa; }
.geo-city-na { font-size: .75em; color: #4b5563; font-style: italic; }
.geo-region-link { display: inline-block; padding: 6px 14px; background: #1f2937; border: 1px solid #374151; border-radius: 20px; color: #10b981; font-size: .88em; text-decoration: none; transition: background .15s; }
.geo-region-link:hover { background: #374151; color: #fff; }

/* ── Bouton carte ── */
.share-btn--card { background:rgba(139,92,246,.15);color:#c4b5fd;border:1px solid #7c3aed; }
.share-btn--card:hover { background:rgba(139,92,246,.3); }

/* ── Bouton push notifications ── */
.push-subscribe-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 9px 18px;
    border: 2px solid #374151;
    border-radius: 24px;
    background: transparent;
    color: #9ca3af;
    font-size: 0.9em;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}
.push-subscribe-btn:hover {
    border-color: #10b981;
    color: #10b981;
}
.push-subscribe-btn.push-btn--active {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}
.push-subscribe-btn:disabled { opacity: 0.5; cursor: wait; }
.push-btn-icon { font-size: 1.1em; line-height: 1; }


/* Couleur locale (dept + région) */
.local-color {
    margin: 20px 0;
    padding: 16px 20px;
    background: rgba(55, 65, 81, 0.4);
    border-left: 4px solid #8b5cf6;
    border-radius: 0 10px 10px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.local-color__dept {
    margin: 0;
    color: #d1d5db;
    font-size: 0.92em;
    line-height: 1.5;
}
.local-color__dept strong {
    color: #e5e7eb;
}
.local-color__region {
    margin: 0;
    color: #9ca3af;
    font-size: 0.85em;
    font-style: italic;
}

/* Comparatif météo voisins */
.city-comparison {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr 0.6fr;
    border: 1px solid #374151;
    border-radius: 10px;
    overflow: hidden;
    margin: 16px 0 10px;
    font-size: 0.88em;
}
.city-comparison__row {
    display: contents;
}
.city-comparison__row > div {
    padding: 9px 12px;
    border-bottom: 1px solid #374151;
    color: #d1d5db;
    display: flex;
    align-items: center;
    gap: 6px;
}
.city-comparison__row--header > div {
    background: rgba(55, 65, 81, 0.8);
    color: #9ca3af;
    font-weight: 600;
    font-size: 0.82em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.city-comparison__row--current > div {
    background: rgba(16, 185, 129, 0.07);
    font-weight: 600;
}
.comparison-tag {
    font-size: 0.72em;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 400;
    white-space: nowrap;
}
.comparison-tag--you {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}
.comparison-delta {
    font-size: 0.82em;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 6px;
}
.comparison-delta--warm {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}
.comparison-delta--cold {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}
.comparison-verdict {
    margin: 6px 0 14px;
    font-size: 0.85em;
    color: #9ca3af;
    font-style: italic;
}
.comparison-verdict strong {
    color: #e5e7eb;
}

/* Rain window widget */
.rain-window {
    background: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(14,165,233,0.06) 100%);
    border: 1px solid rgba(59,130,246,0.25);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 16px;
}
.rain-window--dry {
    background: linear-gradient(135deg, rgba(16,185,129,0.08) 0%, rgba(52,211,153,0.06) 100%);
    border-color: rgba(16,185,129,0.25);
}
.rain-window--nonstop {
    background: linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(139,92,246,0.06) 100%);
    border-color: rgba(99,102,241,0.25);
}
.rain-window__inner {
    display: flex;
    align-items: center;
    gap: 10px;
}
.rain-window__icon {
    font-size: 1.4em;
    flex-shrink: 0;
}
.rain-window__text {
    font-size: 0.92em;
    color: #d1d5db;
    line-height: 1.4;
}
.rain-window__countdown {
    font-weight: 700;
    color: #60a5fa;
}
.rain-window--dry .rain-window__countdown {
    color: #34d399;
}