/* =========================================================
   KizBourges — styles.css
   Palette: charcoal / slate / steel blue
   Folder: images/logo.png, images/cover.jpg
   ========================================================= */

:root{
  --max: 1000px;

  /* Colors */
  --charcoal: #3B3C3F;
  --slate:    #6F7889;
  --steel:    #8299BE;
  --light:    #ECEEF0;
  --ink:      #1a1b1d;
  --bg:       #ffffff;

  /* Typography scale */
  --base-size: 17px;
  --h1: 2.2rem;
  --h2: 1.6rem;
  --h3: 1.25rem;

  /* Radii & borders */
  --radius: 10px;
  --card-border: #dde2ea;
   --header-h: 80px;
}

/* ===== Base ===== */
*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  font-size: var(--base-size);
}
a{ color: inherit; }
img{ max-width: 100%; height: auto; display: block; }
.container{ max-width: var(--max); margin: 0 auto; padding: 0 16px; }
h1, h2, h3{ margin: 0 0 12px; line-height: 1.2; }
p{ margin: 0 0 12px; }

/* ===== Header / Navigation ===== */
.site-header{
  position: sticky; top: 0; z-index: 10; color: #fff;
  background: linear-gradient(90deg, var(--charcoal), var(--steel));
}
.site-header .container{
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h);   /* uses --header-h: 80px; */
}

/* Smaller logo */
.logo-img{
  height:auto;
   max-height: calc(var(--header-h) - 15px);   /* adjust 48–64px to taste */
  width:auto;
}

/* Menu button */
#menu{ font-size: 24px; background: transparent; color: #fff; border: 0; display: none; }

/* Desktop nav links */
.nav a{
  text-decoration: none; margin-left: 16px;
  color: #fff; opacity: .95;
  font-size: 1.05rem;
  font-weight: 500;
}
.nav a:hover{ opacity: 1; }

/* ===== Hero (cover) ===== */
.hero{
  padding: 72px 0; text-align: center; color: #fff;
  background:
    linear-gradient(180deg, rgba(59,60,63,.65), rgba(130,153,190,.55)),
    url('Images/cover.jpeg') center / cover no-repeat;
}

.cta-row{ display: flex; gap: 12px; justify-content: center; margin-top: 12px; }

/* ===== Sections ===== */
.section{ padding: 48px 0; }
.section.alt{ background: var(--light); }
.note, .hint{ font-size: .9rem; color: #4b4f56; }

/* ===== Cards ===== */
.cards{
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.card{
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 16px; background: #fff;
}
.card-img{ border-radius: 8px; }

/* ===== Buttons ===== */
.btn{
  display: inline-block; padding: 12px 18px; border-radius: var(--radius);
  text-decoration: none; font-weight: 600; border: 0; color: #fff;
  background: linear-gradient(90deg, var(--charcoal), var(--steel));
  transition: filter .15s ease;
}
.btn:hover{ filter: brightness(1.05); }
.btn.alt{ background: linear-gradient(90deg, var(--slate), var(--steel)); }

/* ===== Footer ===== */
.site-footer{
  border-top: 1px solid var(--card-border);
  background: #fff; color: var(--charcoal);
  padding: 16px 0; text-align: center; font-size: 14px;
}

/* ===== Headings sizing ===== */
h1{ font-size: var(--h1); font-weight: 700; }
h2{ font-size: var(--h2); font-weight: 600; }
h3{ font-size: var(--h3); font-weight: 600; }

/* ===== Mobile navigation (with fade animation) ===== */
@media (max-width: 720px){
  #menu{ display: block; }

.site-header .container{
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h);
}

  .nav{
    display: none;
    position: absolute; top: var(--header-h);  left: 0; right: 0;
    background: #1e2024;
    padding: 8px 16px;
    opacity: 0; transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease;
   
  }
  .nav a{
    display: block; margin: 10px 0;
    font-size: 1.1rem;
  }

  .nav.open{ display: block; }
  .nav.open.fade-in{ opacity: 1; transform: translateY(0); }
}

/* ===== Events slider ===== */
.events-wrap{
  position: relative;
  margin-top: 8px;
}

.events-scroller{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 16px;
  overflow-x: auto;
  padding: 4px 0 12px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}
.events-scroller::-webkit-scrollbar{ height: 8px; }
.events-scroller::-webkit-scrollbar-thumb{ background: #c9cfda; border-radius: 8px; }

.event-card{
  scroll-snap-align: start;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: #fff;
  padding: 12px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.event-card img{
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
}
.event-card h3{ font-size: 1.05rem; margin-bottom: 6px; }
.event-meta{ font-size: .95rem; color: #4b4f56; margin-bottom: 10px; }
.event-actions{ margin-top: auto; }

.events-nav{
  position: absolute; top: 40%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border: 0; border-radius: 50%;
  background: linear-gradient(90deg, var(--charcoal), var(--steel));
  color: #fff; font-size: 20px; cursor: pointer;
  display: none; /* hidden on small screens */
}
.events-nav:hover{ filter: brightness(1.05); }
.events-nav.prev{ left: -8px; }
.events-nav.next{ right: -8px; }

@media (min-width: 900px){
  .events-nav{ display: inline-flex; align-items: center; justify-content: center; }
  .events-scroller{ grid-auto-columns: minmax(320px, 1fr); }
}
/* ===== Facebook embed styling ===== */
.fb-page,
.fb-page iframe {
  max-width: 100% !important;
  width: 100% !important;
}

.fb-page {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff; /* or var(--bg) if you prefer */
  margin-top: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

/* Optional: make it full-width on large screens */
@media (min-width: 1024px) {
  #events .container {
    max-width: 100%;
    padding-left: 5%;
    padding-right: 5%;
  }
}

/* Facebook card inside slider */
.fb-card { padding: 0; display: grid; grid-template-rows: auto 1fr auto; }
.fb-card-head { padding: 12px 12px 0; }
.fb-card-body { padding: 0 12px 12px; }

/* Make the FB widget fit like a card */
.fb-card .fb-page,
.fb-card .fb-page iframe {
  width: 100% !important;
  max-width: 100% !important;
}

.fb-card .fb-page {
  border: 1px solid var(--card-border);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

/* Ensure card width matches others and the widget isn’t too tall */
.events-scroller .fb-card {
  min-width: 320px;
}
@media (min-width: 900px){
  .events-scroller .fb-card {
    min-width: 360px;
  }
}

/* --- Fix video card overflow --- */
.course-ad { overflow: hidden; }

/* Let grid columns actually shrink and stay inside the container */
.video-grid {
  width: 100%;
  max-width: 900px;      /* keep it nicely centered like your other carousels */
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: 16px;
  align-items: center;
}
.video-grid > * { min-width: 0; }   /* critical: prevents horizontal overflow */

@media (max-width: 900px) {
  .video-grid { grid-template-columns: 1fr; }
}

/* Make the video strictly responsive */
.course-video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  background: #000;
}
/* Only affect the Cours & tarifs section */
#cours .cards{
  display:grid;                 /* override any flex */
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:16px;
  align-items:start;
}
#cours .cards .card{ min-width:0; }            /* prevent overflow */
#cours .cards .course-ad{ grid-column: 1 / -1; }/* video card = full width */

/* Mobile: stack all cards */
@media (max-width: 900px){
  #cours .cards{ grid-template-columns: 1fr; }
  #cours .cards .course-ad{ grid-column:auto; }
}
#cours .cards{ display:grid !important; grid-template-columns: 1fr 1fr !important; }
#cours .cards .course-ad{ grid-column: 1 / -1 !important; }
#cours .cards .card{ min-width:0; } /* prevents overflow */