/* ═══════════════════════════════════════════════════════════════════════════
   MÉTÉO WIDGET — Feuille de style — DA NGPA
   Échelle : 1rem = 16px
   ═══════════════════════════════════════════════════════════════════════════

   PERSONNALISATION CLIENT — modifiez uniquement ce bloc :root
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  --primary:        #192336;
  --primary-mid:    #1e3157;
  --primary-light:  #f0f7ff;
  --accent:         #0284c7;   /* bleu ciel — météo & pro */
  --font:           'Inter', system-ui, -apple-system, sans-serif;
  --radius:         0.625rem;  /* 10px */

/* ── Tokens internes — ne pas modifier ─────────────────────────────────── */
  --surface:        #ffffff;
  --surface-alt:    #f8fafc;
  --ink:            #0f172a;
  --ink-soft:       #334155;
  --muted:          #64748b;
  --border:         #e2e8f0;
  --border-light:   #f1f5f9;
  --cold:           #3b82f6;
  --hot:            #ef4444;
  --dot-on:         #f59e0b;
  --dot-off:        #e2e8f0;
}

/* ── Reset minimal ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden]  { display: none !important; }
img       { display: block; max-width: 100%; }
button    { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ── Corps ──────────────────────────────────────────────────────────────── */
body {
  font-family: var(--font);
  font-size: 0.8125rem;      /* 13px */
  color: var(--ink);
  background: transparent;
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes widgetIn {
  from { opacity: 0; transform: translateY(0.625rem) scale(.99); }  /* 10px */
  to   { opacity: 1; transform: none; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes tabIn {
  from { opacity: 0; transform: translateY(0.3125rem); }  /* 5px */
  to   { opacity: 1; transform: none; }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-0.5rem); }    /* -8px */
  to   { opacity: 1; transform: none; }
}
@keyframes slideFromLeft {
  from { opacity: 0; transform: translateX(-1.125rem); }  /* -18px */
  to   { opacity: 1; transform: none; }
}
@keyframes rippleOut {
  from { transform: scale(0); opacity: .65; }
  to   { transform: scale(4.5); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   WIDGET — Conteneur
   ═══════════════════════════════════════════════════════════════════════════ */
#widget {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  border: 0.0625rem solid var(--border);     /* 1px */
  width: 100%;
  animation: widgetIn .45s cubic-bezier(.22,.68,0,1.15) both;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EN-TÊTE
   ═══════════════════════════════════════════════════════════════════════════ */
.widget-header {
  background: linear-gradient(150deg, var(--primary) 0%, var(--primary-mid) 100%);
  padding: 0.875rem 1rem 0.75rem;        /* 14px 16px 12px */
  border-bottom: 0.125rem solid var(--accent); /* 2px */
}

.location-bar {
  display: flex;
  align-items: center;
  gap: 0.625rem;       /* 10px */
  min-height: 1.875rem; /* 30px */
}

.location-name {
  flex: 1;
  font-size: 0.875rem;    /* 14px */
  font-weight: 800;
  letter-spacing: 0.1125rem; /* 1.8px */
  color: #ffffff;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bouton recherche */
.btn-search-toggle {
  color: rgba(255,255,255,.55);
  width: 2rem;         /* 32px */
  height: 2rem;
  border-radius: 0.5rem; /* 8px */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .2s, background .2s, transform .15s;
  flex-shrink: 0;
}
.btn-search-toggle:hover,
.btn-search-toggle:focus-visible {
  color: #fff;
  background: rgba(255,255,255,.14);
  outline: none;
  transform: scale(1.08);
}
.btn-search-toggle:active { transform: scale(.93); }

/* ── Champ de recherche ─────────────────────────────────────────────────── */
.search-wrapper {
  position: relative;
  margin-top: 0.625rem; /* 10px */
}
.search-wrapper[aria-hidden="true"] { display: none; }

.search-input {
  width: 100%;
  padding: 0.5625rem 0.875rem;  /* 9px 14px */
  border-radius: 0.4375rem;     /* 7px */
  border: none;
  font-size: 0.8125rem;         /* 13px */
  font-family: var(--font);
  color: var(--ink);
  background: rgba(255,255,255,.96);
  outline: none;
  transition: background .15s, box-shadow .2s;
  box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,.18); /* 2px 8px */
}
.search-input::placeholder { color: var(--muted); }
.search-input:focus {
  background: #fff;
  box-shadow: 0 0 0 0.125rem var(--accent), 0 0.125rem 0.625rem rgba(0,0,0,.18);
}

/* Villes récentes */
.recent-cities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;             /* 6px */
  padding: 0.5rem 0 0.625rem; /* 8px 0 10px */
}

.recent-chip {
  padding: 0.25rem 0.75rem;  /* 4px 12px */
  border-radius: 1.25rem;    /* 20px */
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.9);
  font-size: 0.6875rem;      /* 11px */
  font-weight: 600;
  font-family: var(--font);
  letter-spacing: 0.0125rem;
  border: 0.0625rem solid rgba(255,255,255,.18); /* 1px */
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .18s cubic-bezier(.4,0,.2,1);
  white-space: nowrap;
}
.recent-chip:hover {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.42);
  transform: translateY(-0.125rem); /* -2px */
}
.recent-chip:active { transform: translateY(0); }

/* Résultats */
.search-results {
  display: none;
  position: absolute;
  top: calc(100% + 0.375rem); /* 6px */
  left: 0; right: 0;
  background: var(--surface);
  border: 0.0625rem solid var(--border);
  border-radius: 0.5625rem;   /* 9px */
  box-shadow: 0 0.75rem 2rem rgba(0,0,0,.18), 0 0.125rem 0.375rem rgba(0,0,0,.08);
  z-index: 200;
  max-height: 12.5rem;        /* 200px */
  overflow-y: auto;
}
.search-results.open {
  display: block;
  animation: slideDown .2s ease-out;
}

.result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 0.875rem; /* 10px 14px */
  cursor: pointer;
  border-bottom: 0.0625rem solid var(--border-light);
  transition: background .12s;
}
.result-item:last-child { border-bottom: none; }
.result-item:hover { background: var(--primary-light); }
.result-item.empty {
  justify-content: center;
  cursor: default;
  color: var(--muted);
  font-style: italic;
}

.result-name { font-weight: 600; color: var(--ink); font-size: 0.8125rem; }
.result-cp   { font-size: 0.6875rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── Scrollbar résultats ───────────────────────────────────────────────── */
.search-results::-webkit-scrollbar       { width: 0.25rem; }    /* 4px */
.search-results::-webkit-scrollbar-track { background: var(--surface-alt); }
.search-results::-webkit-scrollbar-thumb { background: var(--border); border-radius: 0.125rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   ONGLETS
   ═══════════════════════════════════════════════════════════════════════════ */
.widget-tabs {
  display: flex;
  background: var(--surface);
  border-bottom: 0.125rem solid var(--border-light); /* 2px */
}

.tab {
  flex: 1;
  padding: 0.625rem 0.25rem; /* 10px 4px */
  font-size: 0.625rem;       /* 10px */
  font-weight: 700;
  letter-spacing: 0.0625rem; /* 1px */
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 0.125rem solid transparent;
  margin-bottom: -0.125rem;
  transition: color .2s, border-color .3s cubic-bezier(.4,0,.2,1);
}
.tab:hover { color: var(--ink-soft); }
.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ÉTATS (vide / chargement / erreur)
   ═══════════════════════════════════════════════════════════════════════════ */
.state-empty,
.state-loading,
.state-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;         /* 12px */
  padding: 3rem 1.25rem; /* 48px 20px */
  color: var(--muted);
  text-align: center;
  font-size: 0.8125rem;
  animation: fadeIn .3s ease-out;
}
.state-empty p, .state-error p {
  line-height: 1.55;
  max-width: 12.5rem;  /* 200px */
}
.state-error { color: var(--hot); }

/* Spinner */
.spinner {
  width: 2rem; height: 2rem;          /* 32px */
  border: 0.15625rem solid var(--border); /* 2.5px */
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .75s linear infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLEAU DE PRÉVISIONS
   ═══════════════════════════════════════════════════════════════════════════ */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Scrollbar tableau */
.table-wrapper::-webkit-scrollbar       { height: 0.25rem; }    /* 4px */
.table-wrapper::-webkit-scrollbar-track { background: var(--surface-alt); }
.table-wrapper::-webkit-scrollbar-thumb { background: var(--border); border-radius: 0.125rem; }

/* Classe ajoutée par JS au changement d'onglet */
#tbody.anim-tab {
  animation: tabIn .24s cubic-bezier(.4,0,.2,1);
}

.forecast-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

/* ── Colonne label ──────────────────────────────────────────────────────── */
.col-label {
  background: var(--surface-alt);
  text-align: left;
  padding: 0.4375rem 0.625rem 0.4375rem 0.875rem; /* 7px 10px 7px 14px */
  font-size: 0.6875rem;  /* 11px */
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  border-right: 0.0625rem solid var(--border);
  border-bottom: 0.0625rem solid var(--border-light);
  min-width: 6.875rem;  /* 110px */
  width: 6.875rem;
}

/* ── En-têtes de jour ───────────────────────────────────────────────────── */
.col-day {
  background: var(--primary);
  color: rgba(255,255,255,.95);
  text-align: center;
  padding: 0.625rem 0.375rem;  /* 10px 6px */
  border-right: 0.0625rem solid rgba(255,255,255,.06);
  border-bottom: 0.0625rem solid var(--border);
  min-width: 4.5rem;           /* 72px */
  vertical-align: middle;
}
.col-day:last-child { border-right: none; }

.day-main {
  display: block;
  font-size: 0.6875rem;    /* 11px */
  font-weight: 700;
  letter-spacing: 0.05rem; /* ~0.8px */
  text-transform: uppercase;
  color: rgba(255,255,255,.95);
}
.day-sub {
  display: block;
  font-size: 0.625rem;  /* 10px */
  color: rgba(255,255,255,.45);
  margin-top: 0.125rem; /* 2px */
  font-variant-numeric: tabular-nums;
}

/* ── Cellules de données ────────────────────────────────────────────────── */
.cell {
  text-align: center;
  vertical-align: middle;
  padding: 0.5rem 0.25rem;  /* 8px 4px */
  border-right: 0.0625rem solid var(--border-light);
  border-bottom: 0.0625rem solid var(--border-light);
  font-size: 0.75rem;       /* 12px */
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  background: var(--surface);
  transition: background .15s;
}
.cell:last-child { border-right: none; }
tr:hover .cell { background: #f7faff; }

/* ── En-têtes de section — style éditorial NGPA ─────────────────────────── */
.row-section .section-title {
  text-align: left;
  padding: 0.3125rem 0.75rem 0.3125rem 0.625rem; /* 5px 12px 5px 10px */
  font-size: 0.5625rem;     /* 9px */
  font-weight: 800;
  letter-spacing: 0.09375rem; /* 1.5px */
  text-transform: uppercase;
  color: var(--accent);
  background: var(--primary-light);
  border-bottom: 0.0625rem solid var(--border);
  border-top: 0.0625rem solid var(--border);
  border-left: 0.1875rem solid var(--accent); /* 3px — ligne éditoriale */
}

/* ── Icône météo ────────────────────────────────────────────────────────── */
.weather-icon {
  width: 2.375rem;   /* 38px */
  height: 2.375rem;
  object-fit: contain;
  margin: 0.125rem auto;   /* 2px */
  filter: drop-shadow(0 0.125rem 0.3125rem rgba(0,0,0,.14)); /* 2px 5px */
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
td:hover .weather-icon {
  transform: translateY(-0.1875rem) scale(1.06); /* -3px */
}

/* ── Points de précision ────────────────────────────────────────────────── */
.precision {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.1875rem; /* 3px */
}
.prec-dot {
  width: 0.375rem;  /* 6px */
  height: 0.375rem;
  border-radius: 50%;
  background: var(--dot-off);
  flex-shrink: 0;
  transition: background .2s;
}
.prec-dot.on { background: var(--dot-on); }

/* ── Températures ───────────────────────────────────────────────────────── */
.t-min { color: var(--cold); font-weight: 700; }
.t-avg { color: var(--ink-soft); font-weight: 500; }
.t-max { color: var(--hot);  font-weight: 700; }

/* ── En-tête de jour cliquable ─────────────────────────────────────────── */
.col-day--clickable {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background .2s;
}
.col-day--clickable:hover { background: var(--primary-mid); }

.day-detail-hint {
  display: block;
  font-size: 0.5rem;     /* 8px */
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-top: 0.25rem;   /* 4px */
  opacity: 0;
  transform: translateY(0.25rem);
  transition: opacity .2s, transform .2s cubic-bezier(.4,0,.2,1);
}
.col-day--clickable:hover .day-detail-hint {
  opacity: 1;
  transform: none;
}

/* ── Effet ripple au clic ──────────────────────────────────────────────── */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  pointer-events: none;
  animation: rippleOut .55s ease-out forwards;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VUE DÉTAIL
   ═══════════════════════════════════════════════════════════════════════════ */
.detail-panel { background: var(--surface); }
.detail-panel.anim-in {
  animation: slideFromLeft .3s cubic-bezier(.4,0,.2,1);
}

/* Header retour */
.detail-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;         /* 12px */
  padding: 0.625rem 0.875rem; /* 10px 14px */
  background: var(--surface-alt);
  border-bottom: 0.0625rem solid var(--border);
}

.btn-back {
  display: flex;
  align-items: center;
  gap: 0.3125rem;       /* 5px */
  font-size: 0.6875rem; /* 11px */
  font-weight: 700;
  letter-spacing: 0.01875rem;
  color: var(--accent);
  font-family: var(--font);
  padding: 0.3125rem 0.625rem; /* 5px 10px */
  border-radius: 0.375rem;     /* 6px */
  transition: background .15s, transform .2s cubic-bezier(.4,0,.2,1);
  flex-shrink: 0;
}
.btn-back:hover {
  background: var(--primary-light);
  transform: translateX(-0.1875rem); /* -3px */
}
.btn-back svg { stroke: var(--accent); }

.detail-day-label {
  display: flex;
  align-items: baseline;
  gap: 0.5rem; /* 8px */
}
.detail-day-label #detailDayName {
  font-size: 0.875rem;    /* 14px */
  font-weight: 800;
  color: var(--ink);
  text-transform: capitalize;
  letter-spacing: 0.01875rem;
}
.detail-day-label #detailDayDate {
  font-size: 0.6875rem;  /* 11px */
  color: var(--muted);
}

/* Corps du détail */
.detail-body { padding: 0; }

/* Tableau horaire */
.hours-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.hours-table-wrap::-webkit-scrollbar       { height: 0.25rem; }
.hours-table-wrap::-webkit-scrollbar-track { background: var(--surface-alt); }
.hours-table-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 0.125rem; }

.hours-table { min-width: 33.75rem; } /* 540px */
.hours-table .col-day {
  min-width: 3.5rem; /* 56px */
  width: 3.5rem;
}

/* Spinner dans le corps du détail */
.detail-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.25rem; /* 36px */
}
.detail-error {
  padding: 1.5rem;  /* 24px */
  text-align: center;
  color: var(--muted);
  font-size: 0.75rem; /* 12px */
}

/* Planning traitement — style éditorial */
.detail-traitement {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.75rem 0.875rem 0.875rem;  /* 12px 14px 14px */
  padding: 0.625rem 0.875rem;          /* 10px 14px */
  border-radius: 0.5rem;               /* 8px */
  font-size: 0.6875rem;                /* 11px */
  font-weight: 600;
  border-left: 0.1875rem solid currentColor; /* 3px */
  animation: fadeIn .35s ease-out;
}
.detail-traitement-label { opacity: .7; font-weight: 500; }
.detail-traitement-val   { font-weight: 700; }
.detail-traitement--tres-bien            { background: #d1fae5; color: #065f46; }
.detail-traitement--bien                 { background: #d1fae5; color: #065f46; }
.detail-traitement--passable             { background: #fef9c3; color: #854d0e; }
.detail-traitement--deconseille          { background: #fee2e2; color: #991b1b; }
.detail-traitement--vivement-deconseille { background: #fce7f3; color: #9d174d; }

/* ── Probabilité de pluie ───────────────────────────────────────────────── */
.precip-risk {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.precip-risk-bar {
  position: absolute;
  inset: 0;
  /* Bleu fixe — indépendant de --accent */
  background: linear-gradient(90deg, rgba(59,130,246,.22) 0%, rgba(59,130,246,.06) 100%);
  transform-origin: left;
}
.precip-risk-val {
  position: relative;
  font-weight: 600;
  color: var(--ink-soft);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 32.5rem (520px) et moins ───────────────────────────────────────────── */
@media (max-width: 32.5rem) {

  /* En-tête */
  .widget-header     { padding: 0.75rem 0.75rem 0.625rem; }
  .location-name     { font-size: 0.75rem; letter-spacing: 0.075rem; }
  .btn-search-toggle { width: 1.875rem; height: 1.875rem; }

  /* 1rem minimum → évite le zoom automatique sur iOS */
  .search-input { font-size: 1rem; padding: 0.5rem 0.75rem; }

  /* Onglets */
  .tab { font-size: 0.5625rem; letter-spacing: 0.04375rem; padding: 0.5625rem 0.25rem; }

  /* États */
  .state-empty,
  .state-loading,
  .state-error { padding: 2.25rem 1rem; }

  /* Colonne label */
  .col-label {
    min-width: 5.5rem; /* 88px */
    width:     5.5rem;
    font-size: 0.625rem;
    padding:   0.375rem 0.5rem 0.375rem 0.625rem;
  }

  /* En-têtes de jour */
  .col-day  { min-width: 3.75rem; padding: 0.5rem 0.25rem; }
  .day-main { font-size: 0.625rem; letter-spacing: 0.03125rem; }
  .day-sub  { font-size: 0.5625rem; }

  /* Cellules */
  .cell { padding: 0.375rem 0.1875rem; font-size: 0.6875rem; }

  /* Icône météo */
  .weather-icon { width: 1.875rem; height: 1.875rem; }

  /* Section titles */
  .row-section .section-title { font-size: 0.5rem; padding: 0.3125rem 0.5rem; }

  /* Détail */
  .detail-header              { padding: 0.5rem 0.625rem; gap: 0.5rem; }
  .btn-back                   { font-size: 0.625rem; padding: 0.25rem 0.5rem; }
  .detail-day-label #detailDayName { font-size: 0.75rem; }
  .detail-day-label #detailDayDate { font-size: 0.625rem; }

  /* Tableau horaire */
  .hours-table .col-day { min-width: 3rem; width: 3rem; }

  /* Planning traitement */
  .detail-traitement { margin: 0.5rem 0.625rem 0.625rem; padding: 0.5rem 0.75rem; font-size: 0.625rem; }
}

/* ── 23.75rem (380px) et moins ──────────────────────────────────────────── */
@media (max-width: 23.75rem) {

  /* Colonne label encore plus courte */
  .col-label { min-width: 4.5rem; width: 4.5rem; font-size: 0.5625rem; padding-left: 0.5rem; }

  /* En-têtes de jour */
  .col-day { min-width: 3.25rem; }

  /* Nom de ville */
  .location-name { font-size: 0.6875rem; letter-spacing: 0.05rem; }

  /* Chips récentes */
  .recent-chip { padding: 0.1875rem 0.5625rem; font-size: 0.625rem; }

  /* Points de précision */
  .prec-dot { width: 0.3125rem; height: 0.3125rem; }
}