/* =========================================================
   Stream4Weather (S4W) — Direction Artistique
   Fichier: css/s4w-theme.css
   Usage: <link rel="stylesheet" href="css/s4w-theme.css">
   ========================================================= */

/* 1) Variables globales */
:root{
  /* Palette */
  --s4w-color-1: #020873; /* Bleu profond */
  --s4w-color-2: #3C5FA6; /* Bleu secondaire */
  --s4w-color-3: #F2CE16; /* Jaune */
  --s4w-color-4: #F2B705; /* Jaune/orangé */
  --s4w-color-5: #F2F2F2; /* Gris clair */
  --s4w-color-6: #FFF;    /* Blanc */
  --s4w-color-7: #000;    /* Noir */

  /* Typo (Bootstrap de 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";

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

/* 2) Base */


h1{
  color: var(--s4w-color-2)!important;  
  font-size: 1.75rem;          /*h2 */
  font-weight: 600;
  letter-spacing: .2px;
  margin-bottom: .75rem;
}


#currentDateLabel{
  color: var(--s4w-color-2) !important;
  font-weight: 700;
}


/* =========================================================
   Bloc META → rendu H3 text-secondary
   ========================================================= */

.meta{
  display: flex;
  gap: .6rem;
  align-items: center;
  flex-wrap: wrap;

  font-size: 1.35rem;          /* équivalent Bootstrap h3 */
  font-weight: 500;
  color: var(--s4w-color-2);   /* text-secondary */
  margin-bottom: .6rem;
}

.meta .badge{
  display: inline-flex;
  align-items: center;
  gap: .35rem;

  background: transparent;
  border: 1px solid rgba(60,95,166,.35);
  color: var(--s4w-color-2);

  font-size: 1rem;
  font-weight: 600;
  padding: .35rem .7rem;
  border-radius: 999px;
}

.meta .badge-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--s4w-color-3);
}

.meta .badge-accent{
  border-color: var(--s4w-color-3);
}

.meta .badge-coef{
  border-color: var(--s4w-color-4);
}





html, body { height: 100%; }
body{
  font-family: var(--bs-font-sans-serif);
  color: var(--s4w-color-7);
  background: var(--s4w-color-6);
}

/* Liens */
a{ color: var(--s4w-color-2); }
a:hover{ color: var(--s4w-color-1); }

/* 3) Compat Bootstrap : tu utilises text-secondary pour tes titres
   -> on force "secondary" = bleu S4W-2 */
.text-secondary{
  color: var(--s4w-color-2) !important;
}

/* Optionnel : un accent S4W pour badges / petits éléments */
.s4w-accent{ color: var(--s4w-color-1) !important; }
.s4w-muted{ color: rgba(0,0,0,.60) !important; }

/* 4) Titres de page / sections (tu as donné tes conventions) */

/* Gros titres haut de page : <h2 class="text-secondary"></h2>
   -> pas besoin d'ajouter une classe, mais on peut standardiser via une classe dédiée si tu veux */
.s4w-page-title{
  font-weight: 700;
  letter-spacing: .2px;
  margin-bottom: .75rem;
}

/* Titre 2 : <h3 class="text-secondary"></h3> */
.s4w-section-h3{
  font-weight: 650;
  letter-spacing: .15px;
  margin-top: 1.2rem;
  margin-bottom: .6rem;
}

/* Sous-titre / sous-parties :
   <div class="p-2 fs-5 fw-bold border-bottom mb-2"></div>
   -> on garde tes classes, mais on “embellit” la border et l’espacement */
.s4w-subtitle{
  border-bottom-color: rgba(2, 8, 115, .18) !important;
  border-bottom-width: 2px !important;
  color: var(--s4w-color-1);
}

/* 5) Composants réutilisables S4W */

/* Card propre (si tu veux éviter le inline style partout) */
.s4w-card{
  background: var(--s4w-color-6);
  border: var(--s4w-border);
  border-radius: var(--s4w-radius);
  box-shadow: var(--s4w-shadow);
}

/* Bandeau / encart */
.s4w-banner{
  background: linear-gradient(90deg, rgba(60,95,166,.10) 0%, rgba(60,95,166,.22) 100%);
  border-left: 5px solid var(--s4w-color-3);
  border-radius: var(--s4w-radius);
}

/* Boutons (facultatif, tu peux rester sur btn bootstrap) */
.btn-s4w{
  background: var(--s4w-color-2);
  color: var(--s4w-color-6);
  border: none;
  font-weight: 600;
  border-radius: 999px;
}
.btn-s4w:hover{
  background: var(--s4w-color-1);
  color: var(--s4w-color-6);
}

.btn-s4w-outline{
  background: transparent;
  color: var(--s4w-color-1);
  border: 1px solid var(--s4w-color-2);
  font-weight: 600;
  border-radius: 999px;
}
.btn-s4w-outline:hover{
  background: rgba(60,95,166,.10);
  color: var(--s4w-color-1);
}

/* 6) Petites utilitaires */
.s4w-bg-light{ background: var(--s4w-color-5) !important; }
.s4w-bg-primary{ background: var(--s4w-color-1) !important; color: var(--s4w-color-6) !important; }
.s4w-border{ border: var(--s4w-border) !important; }
.s4w-radius{ border-radius: var(--s4w-radius) !important; }


.footer-partners{
  position: relative;
  z-index: 1;
  margin-top: 1.2rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(2,8,115,.12);

  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;

  font-size: .75rem;
  color: rgba(0,0,0,.65);
}

.footer-text{
  line-height: 1.35;
}

.footer-text strong{
  color: var(--s4w-color-1);
  font-weight: 750;
}

.brand-nav{
  color: #2874A6;
  font-weight: 700;
}

.brand-wnco{
  color: var(--s4w-color-1);
  font-weight: 700;
}

.brand-s4w{
  color: var(--s4w-color-2);
  font-weight: 650;
}

.footer-logos{
  display: flex;
  align-items: center;
  gap: .8rem;
}

.footer-logos img{
  height: 22px;
  opacity: .9;
  transition: opacity 120ms ease, transform 120ms ease;
}

.footer-logos img:hover{
  opacity: 1;
  transform: translateY(-1px);
}

.footer-logos a{
  display: inline-flex;
  align-items: center;
}

.footer-logos a:hover img{
  opacity: 1;
  transform: translateY(-1px);
}

.footer-logos a:focus-visible{
  outline: 2px solid rgba(60,95,166,.35);
  outline-offset: 3px;
  border-radius: 6px;
}


/* Reset = bouton neutre, pas accentué */
.dp-btn-reset{
  color: rgba(0,0,0,.45);
}

.dp-btn-reset:hover{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.14);
}

/* Active identique aux autres */
.dp-btn-reset:active{
  transform: translateY(0);
}

@media (max-width: 600px){
  .footer-partners{
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================================================
   BOOTSTRAP → STREAM4WEATHER (mapping exact)
   ========================================================= */

:root{

  /* ---------- PRIMARY ---------- */
  --bs-primary: #020873;
  --bs-primary-rgb: 2, 8, 115;

  /* ---------- SECONDARY ---------- */
  --bs-secondary: #3C5FA6;
  --bs-secondary-rgb: 60, 95, 166;

  /* ---------- SUCCESS ---------- */
  --bs-success: #2E8B57;
  --bs-success-rgb: 46, 139, 87;

  /* ---------- INFO ---------- */
  --bs-info: #3C5FA6;
  --bs-info-rgb: 60, 95, 166;

  /* ---------- WARNING ---------- */
  --bs-warning: #F2CE16;
  --bs-warning-rgb: 242, 206, 22;

  /* ---------- DANGER ---------- */
  --bs-danger: #C82333;
  --bs-danger-rgb: 200, 35, 51;

  /* ---------- LIGHT ---------- */
  --bs-light: #F2F2F2;
  --bs-light-rgb: 242, 242, 242;

  /* ---------- DARK ---------- */
  --bs-dark: #020873;
  --bs-dark-rgb: 2, 8, 115;

  /* ---------- TEXT ---------- */
  --bs-body-color: #000000;
  --bs-body-color-rgb: 0, 0, 0;

  --bs-secondary-color: rgba(60, 95, 166, .85);
  --bs-secondary-color-rgb: 60, 95, 166;

  --bs-tertiary-color: rgba(60, 95, 166, .65);
  --bs-tertiary-color-rgb: 60, 95, 166;

  /* ---------- BACKGROUNDS ---------- */
  --bs-body-bg: #FFFFFF;
  --bs-secondary-bg: #F2F2F2;
  --bs-tertiary-bg: rgba(60, 95, 166, .06);

  /* ---------- BORDERS ---------- */
  --bs-border-color: rgba(2, 8, 115, .15);
  --bs-border-color-translucent: rgba(2, 8, 115, .08);

  /* ---------- HEADINGS ---------- */
  --bs-heading-color: #020873;
}