/* --- Thème Apple-like : SF stack, glass, grille, rouge iOS --- */
:root{
  --bg-img: url('/images/bg/maintenance.398af913.jpg'); /* gardé */
  --brand: #0a2b8e;
  --card-bg: rgba(8,22,58,.55);
  --card-stroke: rgba(255,255,255,.07);
  --text: #eaf2ff;
  --muted: #a8b3d1;
  --chip-bg: rgba(255,255,255,.08);
  --danger: #ff3b30;         /* rouge iOS */
  --danger-700: #d6291f;
  --shadow: 0 8px 24px rgba(0,0,0,.35);
  --radius-xl: 18px;
  --radius-lg: 14px;
  --radius-md: 12px;
  --gap: 24px;
}

/* fond + lisibilité */
html,body{
  height:100%;
  background: #061b55;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", system-ui;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background: radial-gradient(1000px 600px at 20% 0%, rgba(0,100,255,.25), transparent 45%),
              radial-gradient(1000px 700px at 90% 10%, rgba(0,80,220,.18), transparent 50%),
              var(--bg-img) center/cover no-repeat;
  filter: saturate(1.05) brightness(.95);
  z-index:-2;
}
body::after{
  content:"";
  position:fixed; inset:0;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(6,15,45,.45), rgba(6,15,45,.65));
  z-index:-1;
}

/* header reste comme chez toi, on ne le touche pas visuellement */

#tiles-grid, .tiles, main .grid, .cards-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: var(--gap);
  align-items:start;
}

/* carte “verre” */
.card, .tile, .panel, section.cardish{
  background: var(--card-bg);
  border: 1px solid var(--card-stroke);
  box-shadow: var(--shadow);
  border-radius: var(--radius-xl);
  padding: 22px 22px;
  backdrop-filter: blur(10px);
}

/* en-têtes de carte */
.card h2, .tile h2, .panel h2, .card .title, h2.card-title{
  font-weight: 800;
  letter-spacing:.2px;
  margin:0 0 12px 0;
  color: #ffffff;
}

/* chips (météo/heure si affichées dans l’entête) */
.chip, .badge, .pill{
  background: var(--chip-bg);
  padding: 10px 14px;
  border-radius: 999px;
  color: var(--text);
  border: 1px solid var(--card-stroke);
}

/* boutons rouges */
.btn, button, .button {
  border: none;
  border-radius: 14px;
  padding: 12px 18px;
  font-weight: 700;
  color:#fff;
  background: var(--danger);
  box-shadow: 0 6px 16px rgba(255,59,48,.28);
  transition: transform .06s ease, background .12s ease, box-shadow .12s ease;
}
.btn:hover, button:hover, .button:hover { background: var(--danger-700); transform: translateY(-1px); }
.btn:active, button:active, .button:active { transform: translateY(0); }

/* slider volume (s’il existe) */
input[type="range"]{ accent-color: var(--danger); }

/* petits textes */
.muted, .subtle, .help{ color: var(--muted); }

/* Evite les “cartes vides” disgracieuses */
.card:has(.card-body:empty), .tile:has(.card-body:empty){ display:none; }

/* Sur grands écrans, aère légèrement */
@media (min-width: 1280px){
  .card, .tile, .panel{ padding: 26px 26px; }
}