/* =========================================================
   WeatherNCo — Cours Météo (TCO) — Theme CSS
   Fichier: css/tco-theme.css
   Usage: <link rel="stylesheet" href="css/tco-theme.css">
   Cible: pages type cours_meteo_tco.html
   ========================================================= */

/* 1) Variables globales (modifiables facilement) */
:root{
  /* Couleurs brand (tu utilises déjà #2874a6ff en inline) */
  --tco-primary: #2874a6;      /* bleu WeatherNCo */
  --tco-primary-2: #1f5f8a;    /* bleu plus dense */
  --tco-accent: #22d3ee;       /* accent (optionnel, style “tech”) */
  --tco-bg: #ffffff;           /* fond page */
  --tco-surface: #ffffff;      /* cartes / panneaux */
  --tco-text: #0f172a;         /* texte principal */
  --tco-muted: rgba(15,23,42,.68);

  /* UI */
  --tco-radius: 14px;
  --tco-radius-sm: 10px;
  --tco-shadow: 0 10px 24px rgba(0,0,0,.08);
  --tco-border: 1px solid rgba(2, 8, 115, .12);

  /* Typo (Bootstrap base) */
  --bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

/* 2) Base */
html, body { height: 100%; }
body{
  font-family: var(--bs-font-sans-serif);
  color: var(--tco-text);
  background: var(--tco-bg);
}

/* Liens */
a{ color: var(--tco-primary); text-decoration: none; }
a:hover{ color: var(--tco-primary-2); text-decoration: underline; }

/* 3) Navbar (Bootstrap .navbar-dark.bg-dark) */
.navbar.bg-dark{
  background: linear-gradient(90deg, #0b1020 0%, #111827 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.navbar .navbar-brand img{
  width: 150px;
  height: auto;
}

/* Social links (tu utilises .social-links + icones img) */
.social-links a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  transition: transform .18s ease, background .18s ease;
}
.social-links a:hover{
  transform: translateY(-2px);
  background: rgba(40,116,166,.18);
}
.social-links img{ width: 22px; height: 22px; }

/* 4) Layout page cours
   -> ta navbar est fixed-top, donc on évite que le contenu passe dessous */
.container{
  padding-top: 90px;
}

/* Titre haut de page */
h1.mt-4{
  font-weight: 750;
  letter-spacing: .2px;
  margin-bottom: .9rem !important;
}

/* 5) Sidebar (.list-group) */
.list-group{
  border-radius: var(--tco-radius);
  overflow: hidden;
  box-shadow: var(--tco-shadow);
  border: var(--tco-border);
  background: var(--tco-surface);
}
.list-group .list-group-item{
  border: 0;
  border-bottom: 1px solid rgba(15,23,42,.06);
  padding: .7rem .9rem;
  color: rgba(15,23,42,.86);
  background: #fff;
}
.list-group .list-group-item:last-child{
  border-bottom: 0;
}

/* “Sections” que tu mets en active pour faire des entêtes */
.list-group .list-group-item.active{
  background: linear-gradient(90deg, rgba(40,116,166,.18) 0%, rgba(40,116,166,.06) 100%) !important;
  color: var(--tco-primary) !important;
  font-weight: 750;
  border-left: 5px solid var(--tco-primary);
}

/* Hover items */
.list-group .list-group-item:not(.active):hover{
  background: rgba(40,116,166,.06);
  color: var(--tco-primary-2);
}

/* 6) Contenu (col-lg-9) */
.col-lg-9 h2{
  font-weight: 750;
  letter-spacing: .15px;
  margin-top: 1.1rem;
  margin-bottom: .5rem;
}
.col-lg-9 p{ color: rgba(15,23,42,.86); }
.col-lg-9 ul li{ color: rgba(15,23,42,.86); }

/* 7) Helpers spécifiques présents dans tes pages */
.bold-text-navy{
  font-weight: 800;
  color: var(--tco-primary);
}

/* espace auto entre deux boutons successifs, même si gap n'est pas supporté */
.encart-actions .btn + .btn{ margin-inline-start: .75rem; }

/* 8) Cartes / encarts (si tu veux éviter les inline styles) */
.tco-card{
  background: var(--tco-surface);
  border: var(--tco-border);
  border-radius: var(--tco-radius);
  box-shadow: var(--tco-shadow);
}
.tco-banner{
  background: linear-gradient(90deg, rgba(40,116,166,.18) 0%, rgba(40,116,166,.06) 100%);
  border-left: 5px solid var(--tco-accent);
  border-radius: var(--tco-radius);
}

/* 9) Boutons (optionnels, tu peux rester en bootstrap pur) */
.btn-tco{
  background: var(--tco-primary);
  color: #fff !important;
  border: none;
  font-weight: 650;
  border-radius: 999px;
}
.btn-tco:hover{
  background: var(--tco-primary-2);
  color: #fff !important;
}
.btn-tco-outline{
  background: transparent;
  color: var(--tco-primary) !important;
  border: 1px solid rgba(40,116,166,.55);
  font-weight: 650;
  border-radius: 999px;
}
.btn-tco-outline:hover{
  background: rgba(40,116,166,.08);
  color: var(--tco-primary-2) !important;
}

/* 10) Footer (Bootstrap .py-5.bg-dark) */
footer.bg-dark{
  background: #0b1020 !important;
  border-top: 1px solid rgba(255,255,255,.08);
}
footer.bg-dark .text-white{
  color: rgba(255,255,255,.86) !important;
}

/* 11) Responsive */
@media (max-width: 991px){
  .container{ padding-top: 82px; }
  .navbar .navbar-brand img{ width: 135px; }
  .list-group{ box-shadow: none; }
}