/* ==========================================================================
   IoT-Lab — Design system
   --------------------------------------------------------------------------
   Thème sombre cohérent avec les simulateurs existants (spec §8).
   Palette reprise de iot.digital-lab.org : base slate, accents sky/cyan.
   Bootstrap 5 sert de socle ; ce fichier surcharge ses variables et ajoute
   les composants propres à IoT-Lab. Aucune ressource externe (contrainte
   hors-ligne, décision D3).
   ========================================================================== */

:root {
  /* --- Palette de marque IoT-Lab ----------------------------------------- */
  --iot-bg:        #0f172a;   /* fond général           */
  --iot-panel:     #1e293b;   /* cartes, panneaux       */
  --iot-panel-2:   #273449;   /* survol, éléments actifs*/
  --iot-line:      #33415c;   /* bordures               */
  --iot-txt:       #e2e8f0;   /* texte principal        */
  --iot-muted:     #94a3b8;   /* texte secondaire       */
  --iot-acc:       #38bdf8;   /* accent principal (sky) */
  --iot-acc-2:     #22d3ee;   /* accent secondaire (cyan)*/
  --iot-ok:        #22c55e;   /* succès / validation    */
  --iot-warn:      #f59e0b;   /* avertissement          */
  --iot-bad:       #ef4444;   /* erreur                 */
  --iot-vio:       #a78bfa;   /* réseau / divers        */

  --iot-radius:    14px;
  --iot-sans: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --iot-mono: "Cascadia Code", "Consolas", "SFMono-Regular", monospace;
}

/* --- Adaptation des variables Bootstrap au thème IoT-Lab ------------------ */
[data-bs-theme="dark"] {
  --bs-body-bg:      var(--iot-bg);
  --bs-body-color:   var(--iot-txt);
  --bs-border-color: var(--iot-line);
  --bs-primary:      var(--iot-acc);
  --bs-primary-rgb:  56, 189, 248;
  --bs-link-color:          var(--iot-acc);
  --bs-link-hover-color:    var(--iot-acc-2);
  --bs-emphasis-color:      #f8fafc;
  --bs-secondary-color:     var(--iot-muted);
  --bs-tertiary-bg:         var(--iot-panel-2);
}

body {
  font-family: var(--iot-sans);
  background-color: var(--iot-bg);
  color: var(--iot-txt);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* --- Boutons ------------------------------------------------------------- */
.btn-primary {
  --bs-btn-bg: var(--iot-acc);
  --bs-btn-border-color: var(--iot-acc);
  --bs-btn-color: #06121f;
  --bs-btn-hover-bg: var(--iot-acc-2);
  --bs-btn-hover-border-color: var(--iot-acc-2);
  --bs-btn-hover-color: #06121f;
  --bs-btn-active-bg: var(--iot-acc-2);
  --bs-btn-active-border-color: var(--iot-acc-2);
  font-weight: 600;
}
.btn-outline-light {
  --bs-btn-border-color: var(--iot-line);
  --bs-btn-hover-bg: var(--iot-panel-2);
  --bs-btn-hover-border-color: var(--iot-acc);
}

/* --- Cartes et panneaux -------------------------------------------------- */
.card,
.iot-panel {
  background-color: var(--iot-panel);
  border: 1px solid var(--iot-line);
  border-radius: var(--iot-radius);
}
.iot-panel { padding: 1.25rem; }
.iot-panel--accent { border-left: 4px solid var(--iot-acc); }

/* --- En-tête / navigation ----------------------------------------------- */
.iot-navbar {
  background: linear-gradient(120deg, #0b1326, #172554);
  border-bottom: 1px solid var(--iot-line);
}
.iot-navbar .navbar-brand { font-weight: 700; letter-spacing: .3px; }
.iot-brand-mark {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--iot-acc);
}
.iot-brand-mark .bi { font-size: 1.35rem; }

/* --- Section héro du site vitrine --------------------------------------- */
.iot-hero {
  background:
    radial-gradient(900px 360px at 80% -10%, rgba(56,189,248,.18), transparent),
    linear-gradient(160deg, #0b1326, var(--iot-bg));
  border-bottom: 1px solid var(--iot-line);
  padding: 5rem 0 4.5rem;
}
.iot-hero h1 {
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
}
.iot-hero .lead { color: var(--iot-muted); max-width: 38rem; }

/* --- Pastilles de fonctionnalités --------------------------------------- */
.iot-feature {
  background-color: var(--iot-panel);
  border: 1px solid var(--iot-line);
  border-radius: var(--iot-radius);
  padding: 1.5rem;
  height: 100%;
  transition: border-color .15s ease, transform .15s ease;
}
.iot-feature:hover { border-color: var(--iot-acc); transform: translateY(-3px); }
.iot-feature .iot-feature__icon {
  font-size: 1.8rem;
  color: var(--iot-acc);
  margin-bottom: .6rem;
}

/* --- Cartes de tarifs ---------------------------------------------------- */
.iot-plan {
  background-color: var(--iot-panel);
  border: 1px solid var(--iot-line);
  border-radius: var(--iot-radius);
  padding: 1.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.iot-plan--vedette {
  border-color: var(--iot-acc);
  box-shadow: 0 0 0 1px var(--iot-acc) inset;
}
.iot-plan__prix { font-size: 2rem; font-weight: 800; color: var(--iot-acc-2); }
.iot-plan__cycle { color: var(--iot-muted); font-size: .85rem; }
.iot-plan ul { list-style: none; padding: 0; margin: 1rem 0; }
.iot-plan ul li { padding: .3rem 0; }
.iot-plan ul li .bi-check-lg { color: var(--iot-ok); }
.iot-plan ul li .bi-dash { color: var(--iot-muted); }

/* --- Badges de niveau de validation (spec §10.3) ------------------------ */
.iot-badge-erreur       { background: rgba(239,68,68,.16);  color: #fca5a5; }
.iot-badge-avertissement{ background: rgba(245,158,11,.16); color: #fcd34d; }
.iot-badge-info         { background: rgba(56,189,248,.16); color: #7dd3fc; }

/* --- Pied de page -------------------------------------------------------- */
.iot-footer {
  background-color: #0b1220;
  border-top: 1px solid var(--iot-line);
  color: var(--iot-muted);
  padding: 2.5rem 0 1.5rem;
  margin-top: auto;
}
.iot-footer a { color: var(--iot-muted); text-decoration: none; }
.iot-footer a:hover { color: var(--iot-acc); }

/* --- Tableaux ------------------------------------------------------------ */
.table { --bs-table-bg: var(--iot-panel); --bs-table-color: var(--iot-txt); }
.table thead th {
  background-color: var(--iot-panel-2);
  color: var(--iot-acc-2);
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .4px;
}

/* --- Formulaires --------------------------------------------------------- */
.form-control, .form-select {
  background-color: var(--iot-bg);
  border-color: var(--iot-line);
  color: var(--iot-txt);
}
.form-control:focus, .form-select:focus {
  background-color: var(--iot-bg);
  border-color: var(--iot-acc);
  color: var(--iot-txt);
  box-shadow: 0 0 0 .2rem rgba(56,189,248,.2);
}

/* --- Utilitaires --------------------------------------------------------- */
.text-acc      { color: var(--iot-acc) !important; }
.text-muted-2  { color: var(--iot-muted) !important; }
.bg-panel      { background-color: var(--iot-panel) !important; }
.iot-mono      { font-family: var(--iot-mono); }
.iot-section   { padding: 4rem 0; }