/* assets/css/meteo-quotidienne.css */
:root{
  --mq-primary:#142e47;
  --mq-accent:#0ea5e9;
  --mq-green:#10b981;
  --mq-red:#ef4444;
  --mq-orange:#f59e0b;
  --mq-bg:#f7fafc;
  --mq-card:#ffffff;
  --mq-radius:18px;
  --mq-shadow:0 12px 28px rgba(0,0,0,.08);
}
.mq-hero{background:linear-gradient(135deg, var(--mq-primary), #1f4b72);color:#fff;padding:60px 0}
.mq-hero h1{font-size:36px;margin:0 0 10px}
.mq-hero p.sub{opacity:.9;font-size:18px;margin:0 0 24px}
.mq-btn{display:inline-block;padding:14px 22px;border-radius:999px;background:var(--mq-accent);color:#fff;font-weight:700;box-shadow:0 6px 16px rgba(14,165,233,.35);transition:.2s transform,.2s box-shadow}
.mq-btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(14,165,233,.45)}
.mq-section{padding:40px 0}
.mq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.mq-grid{grid-template-columns:1fr}}
.mq-card{background:var(--mq-card);border-radius:var(--mq-radius);box-shadow:var(--mq-shadow);padding:20px}
.mq-badge{display:inline-block;padding:6px 10px;border-radius:12px;background:#e5eef7;color:var(--mq-primary);font-weight:600;font-size:12px}
.mq-list{list-style:none;padding:0;margin:0}
.mq-list li{display:flex;align-items:start;gap:10px;margin:10px 0}
.mq-icon{font-size:20px;min-width:20px}
.mq-form .row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.mq-form .row-7{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
@media(max-width:900px){.mq-form .row{grid-template-columns:1fr}.mq-form .row-7{grid-template-columns:repeat(3,1fr)}}
.mq-input, .mq-select, .mq-time{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #dbe3ee;background:#fff;font-size:15px}
.mq-submit{margin-top:14px}
.badge-status{padding:6px 10px;border-radius:12px;font-weight:700;font-size:12px}
.badge-trial{background:#fff7ed;color:#c2410c}
.badge-active{background:#ecfdf5;color:#065f46}
.badge-expired{background:#fef2f2;color:#b91c1c}
.mq-table{width:100%;border-collapse:separate;border-spacing:0 10px}
.mq-table th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;text-align:left;padding:0 10px;color:#6b7280}
.mq-table td{background:#fff;padding:12px 10px;border-top:1px solid #eef2f7;border-bottom:1px solid #eef2f7}
.mq-actions a{margin-right:8px}
.mq-small{font-size:12px;color:#6b7280}
.mq-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.mq-kpi{background:#fff;border-radius:14px;box-shadow:var(--mq-shadow);padding:16px}
.mq-email {font-family: Arial, sans-serif;}
.icon-sun:before{content:"☀️"}
.icon-cloud:before{content:"☁️"}
.icon-partly:before{content:"⛅"}
.icon-rain:before{content:"🌧️"}
.icon-showers:before{content:"🌦️"}
.icon-snow:before{content:"❄️"}
.icon-thunder:before{content:"⛈️"}
.icon-fog:before{content:"🌫️"}
.icon-wind:before{content:"💨"}


/* Admin polish */
.container{max-width:1100px;margin:0 auto}
.card.full{border-radius:var(--mq-radius);box-shadow:var(--mq-shadow);background:#fff}
.mq-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mq-toolbar .mq-input{min-width:260px}
.mq-toolbar .mq-select{min-width:220px}
.mq-table{border-spacing:0;border-collapse:collapse;width:100%}
.mq-table thead th{position:sticky;top:0;background:#f8fafc;border-bottom:1px solid #e5e7eb;padding:10px}
.mq-table tbody tr{transition:background .15s}
.mq-table tbody tr:hover{background:#fafafa}
.mq-table td{padding:12px 10px;border-bottom:1px solid #eef2f7}
.mq-actions a{display:inline-block;padding:6px 10px;border-radius:10px;background:#eef2ff;text-decoration:none}
.mq-actions a:hover{background:#e0e7ff}
.mq-kpis{margin-top:10px}
.mq-kpi{display:flex;flex-direction:column;gap:6px}
.mq-kpi .mq-small{color:#6b7280}


/* --- Admin deluxe polish (v5) --- */
.mq-actions a{background:rgba(20,46,71,.07); color:#142e47; font-weight:600}
.mq-actions a:hover{background:rgba(20,46,71,.12)}
.mq-table tbody tr td:first-child{border-left:4px solid transparent}
.mq-table tbody tr:hover td:first-child{border-left-color:#e5eef7}
.mq-pill{display:inline-block;padding:6px 10px;border-radius:999px;background:#eef2ff;font-weight:700}
.mq-avatar{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;background:#e5eef7;color:#142e47;font-weight:800;margin-right:8px}
.mq-toolbar{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:10px}


/* Bouton secondaire "Gérer mon abonnement" dans le hero */
.mq-hero-cta{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
.mq-btn-secondary{
  background:#ffffff;
  color:var(--mq-accent);
  box-shadow:0 6px 18px rgba(15,23,42,.20);
}
.mq-btn-secondary:hover{
  background:#f9fafb;
}

/* Espacement et disposition des boutons sur mobile */
@media (max-width:640px){
  .mq-hero-cta{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
}


/* Override styles for bouton secondaire dans le hero */
.mq-hero-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
}

/* bouton blanc + texte bleu (accent) */
.mq-hero-cta .mq-btn-secondary{
  background:#ffffff !important;
  color:var(--mq-accent) !important;
  box-shadow:0 6px 18px rgba(15,23,42,.20);
  border:1px solid rgba(148,163,184,.5);
}

/* petit espace horizontal quand les boutons sont sur la même ligne */
.mq-hero-cta .mq-btn + .mq-btn-secondary{
  margin-left:10px;
}

/* Sur mobile: boutons l’un sous l’autre avec un espace confortable */
@media (max-width:640px){
  .mq-hero-cta{
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
  }
  .mq-hero-cta .mq-btn-secondary{
    margin-left:0 !important;
  }
}



/* Séparation forcée des deux boutons sur mobile (fallback sans gap) */
@media (max-width:640px){
  .mq-hero-cta .mq-btn:first-child{
    margin-bottom:16px !important;
  }
}


/* Indication visuelle pour le choix des heures */
.mq-hours-hint{
  margin:4px 0 10px;
  font-size:13px;
  color:#4b5563;
}

.mq-time-wrap{
  position:relative;
}

.mq-time-label{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.mq-time-label-text{
  font-size:12px;
  color:#6b7280;
}

/* Sur mobile, on renforce légèrement la lisibilité des champs heure */
@media(max-width:640px){
  .mq-time{
    font-size:16px;
  }
}