/* Charte graphique reprise de www.mmotechno.com */
:root {
  --color-primary: #00a98a;
  --color-primary-dark: #008e74;
  --color-primary-light: #2bc4a6;
  --color-text: #2d343b;
  --color-muted: #6b7280;
  --color-bg: #ffffff;
  --color-surface: #f5f7f8;
  --color-border: #e6e9ec;
  --color-dark: #23282d;
  --status-ok: #00a98a;
  --status-degraded: #e8930c;
  --status-incident: #dc4a41;
  --status-maintenance: #3d7ff2;
  --status-unknown: #9aa0a6;
  --font-sans: "Rubik", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container {
  /* Grandit avec l'écran, mais plafonné pour garder des cartes larges
     (3 colonnes) plutôt que d'en ajouter une 4e qui les rétrécirait. */
  max-width: min(1360px, 94vw);
  margin: 0 auto;
  padding: 0 24px;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-dark); }

/* --- Barre supérieure sombre ------------------------------------------- */
.topbar {
  background: var(--color-dark);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.82rem;
}
.topbar-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 28px;
  min-height: 40px;
}
.topbar a { color: rgba(255, 255, 255, 0.85); }
.topbar a:hover { color: var(--color-primary-light); }
.topbar .lang { display: inline-flex; align-items: center; gap: 10px; }
.topbar .sep { color: rgba(255, 255, 255, 0.35); }
.topbar .lang a[aria-current] { color: #fff; font-weight: 500; }

/* --- En-tête blanc ------------------------------------------------------ */
.header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 88px;
  gap: 16px;
}
.brand img { display: block; width: 180px; height: auto; }
.header-actions { display: flex; align-items: center; gap: 20px; }
.header-note { color: var(--color-muted); font-size: 0.85rem; }

.btn-pill {
  display: inline-block;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: 9999px;
  padding: 10px 26px;
  font-weight: 500;
  font-size: 1rem;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.btn-pill:hover { background: var(--color-primary); color: #fff; }

/* --- Héros -------------------------------------------------------------- */
.hero { padding: 72px 0 48px; }
.hero h1 {
  font-weight: 300;
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.hero .accent { color: var(--color-primary); }
.lede {
  margin-top: 20px;
  max-width: 560px;
  color: var(--color-muted);
  font-size: 1.06rem;
}

/* Bandeau d'état global */
.banner {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 16px;
  padding: 18px 24px;
  font-size: 1.06rem;
  font-weight: 500;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.banner-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--status-unknown);
  flex: none;
}
.banner-ok { background: #e6f7f3; border-color: #bfe9df; color: #00755f; }
.banner-ok .banner-dot { background: var(--status-ok); box-shadow: 0 0 0 4px rgba(0, 169, 138, 0.18); }
.banner-degraded { background: #fdf3e3; border-color: #f5ddb0; color: #8a5a08; }
.banner-degraded .banner-dot { background: var(--status-degraded); box-shadow: 0 0 0 4px rgba(232, 147, 12, 0.18); }
.banner-incident { background: #fdeceb; border-color: #f5c6c2; color: #a13029; }
.banner-incident .banner-dot { background: var(--status-incident); box-shadow: 0 0 0 4px rgba(220, 74, 65, 0.18); }
.banner-loading .banner-dot { animation: pulse 1.2s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* --- Cartes de services -------------------------------------------------- */
.services { background: var(--color-surface); padding: 56px 0 64px; }

.category { margin-bottom: 48px; }
.category:last-of-type { margin-bottom: 0; }
.category-title {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-border);
}

.grid {
  display: grid;
  /* auto-fill + minmax = nombre de colonnes ajusté à la largeur de l'appareil :
     ~3 larges colonnes sur desktop, 2 sur tablette, 1 sur mobile.
     (auto-fill et non auto-fit : la dernière carte seule garde sa largeur
     au lieu de s'étirer sur toute la ligne.) */
  /* min(400px, 100%) : sur un écran plus étroit que 400px la carte suit la
     largeur de l'écran au lieu de déborder. */
  grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
  gap: 28px;
}

.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 30px 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 1px 2px rgba(45, 52, 59, 0.04);
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.card-title { font-size: 1.18rem; font-weight: 500; }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 5px 12px;
  white-space: nowrap;
}
.status-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.status-operational { background: #e6f7f3; color: #00755f; }
.status-degraded { background: #fdf3e3; color: #8a5a08; }
.status-incident { background: #fdeceb; color: #a13029; }
.status-maintenance { background: #e9f0fe; color: #2a5cc2; }
.status-unknown { background: #eef0f2; color: var(--color-muted); }

.card-items { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.card-item {
  border-top: 1px solid var(--color-border);
  padding-top: 12px;
  font-size: 0.9rem;
}
.card-item a { color: var(--color-text); font-weight: 500; display: block; }
.card-item a:hover { color: var(--color-primary-dark); }
.card-item time { color: var(--color-muted); font-size: 0.8rem; }
.card-item p {
  color: var(--color-muted);
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-empty {
  border-top: 1px solid var(--color-border);
  padding-top: 12px;
  color: var(--color-muted);
  font-size: 0.9rem;
}

.card-foot { margin-top: auto; padding-top: 4px; }
.card-foot a { font-size: 0.9rem; font-weight: 500; }
.card-foot a::after { content: " →"; }

.note {
  margin-top: 36px;
  max-width: 720px;
  color: var(--color-muted);
  font-size: 0.9rem;
}

/* --- Pied de page -------------------------------------------------------- */
.footer {
  background: var(--color-dark);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.88rem;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 72px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.footer a { color: #fff; }
.footer a:hover { color: var(--color-primary-light); }

/* --- Écrans étroits ------------------------------------------------------ */
@media (max-width: 640px) {
  .header-inner { min-height: 72px; }
  .brand img { width: 148px; }
  .header-note { display: none; }
  .btn-pill { padding: 8px 18px; font-size: 0.92rem; }
  .hero { padding: 48px 0 36px; }
  #t-back { display: none; }
}