/* KDetude – Global styles */

/* ── Fonts ───────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Montserrat:wght@400;600;700&family=Open+Sans:wght@400;600;700&display=swap');

/* Palette active — modifier uniquement theme.css */
@import url('theme.css');

/* ── Bulma 1.0 : forcer le mode clair + injecter palette ── */
:root,
[data-theme="light"],
[data-theme="dark"] {
  color-scheme: light;

  --bulma-primary-h: 263deg;
  --bulma-primary-s: 90%;
  --bulma-primary-l: 63%;
  --bulma-primary:        var(--c-primary);
  --bulma-primary-invert: #fff;
  --bulma-link:           var(--c-primary);

  --bulma-body-background-color:                   #ffffff;
  --bulma-body-color:                              #374151;
  --bulma-box-background-color:                    #ffffff;
  --bulma-card-background-color:                   #ffffff;
  --bulma-navbar-background-color:                 #ffffff;
  --bulma-footer-background-color:                 #fafafa;
  --bulma-notification-background-color:           #f5f5f5;
  --bulma-table-background-color:                  #ffffff;
  --bulma-table-striped-row-even-background-color: #f9f9f9;
  --bulma-input-background-color:                  #ffffff;
  --bulma-input-color:                             #374151;
  --bulma-input-border-color:                      #e5e7eb;
  --bulma-border:                                  #e5e7eb;
  --bulma-text:                                    #374151;
  --bulma-text-strong:                             #111827;
  --bulma-light-color:                             #374151;
  --bulma-light-background-color:                  var(--c-section-alt);
  --bulma-section-background-color:                #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light;
    --bulma-body-background-color:  #ffffff;
    --bulma-body-color:             #374151;
    --bulma-box-background-color:   #ffffff;
    --bulma-card-background-color:  #ffffff;
    --bulma-navbar-background-color:#ffffff;
    --bulma-border:                 #e5e7eb;
    --bulma-text:                   #374151;
    --bulma-text-strong:            #111827;
    --bulma-input-background-color: #ffffff;
    --bulma-input-color:            #374151;
  }
}

/* ── Typographie ─────────────────────────────────── */
body {
  padding-top: 3.25rem;
  margin-top: 0;
  font-family: 'Open Sans', sans-serif;
  background-color: #ffffff;
  color: #374151;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5,
.title {
  font-family: 'Fredoka One', cursive;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: #111827;
}

.subtitle,
p,
.content,
.navbar-item,
label,
input,
textarea,
button {
  font-family: 'Open Sans', sans-serif;
}

/* ── Hero gradient ───────────────────────────────── */
.hero-gradient {
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-mid) 50%, var(--c-primary-dark) 100%);
}

/* ── Page header banner ──────────────────────────── */
.page-hero {
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
  padding: 3.5rem 1.5rem;
}
.page-hero .title,
.page-hero .subtitle {
  color: #ffffff;
}

/* ── Navbar ──────────────────────────────────────── */
.navbar {
  background: var(--c-primary-dark) !important;
  box-shadow: none !important;
  border-bottom: none !important;
  font-family: 'Montserrat', sans-serif;
}
.navbar-item,
.navbar-link,
.navbar-burger {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 1.5em;
  letter-spacing: 1px;
  color: #ffffff !important;
}
.navbar-item:hover,
.navbar-item:focus {
  color: #ffffff !important;
  background-color: rgba(255,255,255,0.12) !important;
}
.navbar-burger span {
  background-color: #ffffff !important;
}
.navbar-menu {
  background: var(--c-primary-dark);
  box-shadow: none !important;
}

/* ── Sections ────────────────────────────────────── */
.section {
  background-color: #ffffff;
}
.has-background-light,
.section-alt {
  background-color: var(--c-section-alt) !important;
}

/* ── Section violette (CTA, mission, etc.) ───────── */
.section-purple {
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
}

/* ── Box & Cards ─────────────────────────────────── */
.box {
  background-color: #ffffff;
  color: #374151;
  border: 1px solid #f3f4f6;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}
.card {
  background-color: #ffffff;
  color: #374151;
  border: 1px solid #f3f4f6;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border-radius: 12px;
  overflow: hidden;
}
.card-content {
  background-color: #ffffff;
  color: #374151;
}

/* ── Footer ──────────────────────────────────────── */
.footer {
  background-color: var(--c-footer-bg);
  color: #9ca3af;
}
.footer .title {
  color: #ffffff;
  font-family: 'Fredoka One', cursive;
}
.footer p,
.footer li {
  color: #9ca3af;
}
.footer a {
  color: var(--c-footer-link);
}
.footer a:hover {
  color: #ffffff;
}
.footer hr {
  background-color: rgba(255,255,255,0.08);
}
.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer ul li {
  margin-bottom: 0.4rem;
}

/* ── Partner logos ───────────────────────────────── */
.partners-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  justify-content: center;
}
.partners-grid img {
  max-height: 60px;
  max-width: 160px;
  object-fit: contain;
  filter: grayscale(40%);
  transition: filter 0.2s;
}
.partners-grid img:hover {
  filter: grayscale(0%);
}

/* ── Video ───────────────────────────────────────── */
.video-wrapper {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.video-wrapper video {
  width: 100%;
  display: block;
}

/* ── Team photo ──────────────────────────────────── */
.team-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--c-primary);
}

/* ── Inputs ──────────────────────────────────────── */
.input, .textarea, .select select {
  background-color: #ffffff;
  color: #374151;
  border-color: #e5e7eb;
  border-radius: 8px;
}
.input:focus, .textarea:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(139,92,246,0.15);
}

/* ── Boutons ─────────────────────────────────────── */
.button.is-primary {
  background-color: var(--c-primary);
  color: #ffffff !important;
  border-color: transparent;
}
.button.is-primary:hover,
.button.is-primary:focus {
  background-color: var(--c-primary-dark);
  color: #ffffff !important;
}
.button.is-info {
  color: #ffffff !important;
}
.button.is-primary.is-outlined {
  background-color: transparent;
  border-color: var(--c-primary);
  color: var(--c-primary) !important;
}
.button.is-primary.is-outlined:hover {
  background-color: var(--c-primary);
  color: #ffffff !important;
}

/* ── Notifications ───────────────────────────────── */
.notification {
  background-color: var(--c-section-alt);
  color: #374151;
}
.notification.is-primary.is-light {
  background-color: var(--c-primary-light);
  color: var(--c-primary-text);
}