/* ============================================================
   1. VARIABLES
   ============================================================ */
:root {
  /* Header */
  --header-offset-mobile:  70px;
  --header-offset-desktop: 100px;

  /* Héros */
  --hero-min-height-mobile:  70vh;
  --hero-min-height-desktop: 600px;

  /* Titre principal */
  --title-color:                  #ffffff;
  --title-weight:                 400;
  --title-line-height:            0.85;
  --title-size-mobile:            clamp(26px, 6.5vw, 38px);
  --title-letter-spacing-mobile:  -0.02em;
  --title-size-desktop:           50px;
  --title-letter-spacing-desktop: -1px;

  /* Sous-titre */
  --subtitle-color:        inherit;
  --subtitle-size-mobile:  clamp(36px, 11vw, 60px);
  --subtitle-size-desktop: 100px;
}


/* ============================================================
   2. HEADER
   ============================================================ */

body { padding-top: 0; }

/* Compensation menu fixe : pousse le contenu vers le bas */
.kl-header-site + * { margin-top: var(--header-offset-mobile); }

@media (min-width: 992px) {
  .kl-header-site + * { margin-top: var(--header-offset-desktop); }
}

/* Spacer masqué sur mobile/tablette */
@media (max-width: 991px) {
  .kl-header-spacer { height: 0 !important; }
}

/* Padding header large écran */
@media (min-width: 1200px) {
  .kl-header-site { padding: 44px 0 0; }
}

/* Nav */
.kl-header-site nav.navbar { padding-top: 5px; padding-bottom: 17px; }
.kl-header-site nav.navbar .kl-nav-link { text-transform: none; }

#menu-superieur { border-bottom: 0; margin-right: 2px; }
#menu-superieur .kl-nav-link { font-size: 16px; line-height: 1.4em; font-weight: 400; }

/* Sous-menus déroulants */
.sub-menu,
.dropdown-menu { display: none; }

.menu-item:hover .sub-menu,
.menu-item:hover .dropdown-menu { display: block; }


/* ============================================================
   3. HÉROS — structure commune
   ============================================================ */
.kl-section-block-hero {
  position: relative;
  width: 100%;
  max-width: 100vw;
  margin: 0;
  overflow: hidden;
}

/* Image de fond plein cadre */
.kl-section-block-hero .kl-bg-img-hero {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.kl-section-block-hero .kl-bg-img-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}


/* ============================================================
   3a. HÉROS — Mobile & tablette (< 992px)
   Contenu centré, légèrement décalé vers le haut
   ============================================================ */
@media (max-width: 991px) {
  .kl-section-block-hero {
    min-height: var(--hero-min-height-mobile);
    display: flex;
    align-items: center;
    padding: 0;
  }

  .kl-section-block-hero.kl-padding-section-default-globals { padding: 0; }

  .kl-section-block-hero .container {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0 20px;
    padding-bottom: 15vh; /* décale le contenu vers le haut dans le flex */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}


/* ============================================================
   3b. HÉROS — Desktop (≥ 992px)
   Contenu ancré en bas à gauche
   ============================================================ */
@media (min-width: 992px) {
  .kl-section-block-hero {
    aspect-ratio: 18 / 9;
    min-height: var(--hero-min-height-desktop);
    max-height: 80vh;
  }

  .kl-section-block-hero.kl-padding-section-default-globals { padding: 0; }

  .kl-section-block-hero .container {
    position: absolute;
    bottom: 80px;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 0 20px;
  }
}


/* ============================================================
   4. TITRE PRINCIPAL — .kl-title-block-hero-post
   ============================================================ */
.kl-title-block-hero-post {
  display: block;
  color: var(--title-color);
  font-weight: var(--title-weight);
  font-style: italic;
  font-family: var(--font-serif, Georgia, serif);
  line-height: var(--title-line-height);
  margin: 0;
  padding: 0;
  overflow: visible;
  box-sizing: border-box;
}

@media (max-width: 991px) {
  .kl-title-block-hero-post {
    font-size: var(--title-size-mobile);
    letter-spacing: var(--title-letter-spacing-mobile);
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    width: 100%;
    margin-bottom: 40px; /* espace entre titre et sous-titre */
  }
}

@media (min-width: 992px) {
  .kl-title-block-hero-post {
    font-size: var(--title-size-desktop);
    letter-spacing: var(--title-letter-spacing-desktop);
    text-align: left;
    white-space: nowrap;
    margin-bottom: 24px;
  }
}


/* ============================================================
   5. SOUS-TITRE — .kl-subtitle-block-hero-post
   ============================================================ */
.kl-subtitle-block-hero-post {
  color: var(--subtitle-color);
  font-weight: 700;
  line-height: 1.2;
  box-sizing: border-box;
}

/* Mobile & tablette : wrap autorisé, taille fluide */
@media (max-width: 991px) {
  .kl-subtitle-block-hero-post {
    font-size: var(--subtitle-size-mobile);
    line-height: 1;  /* resserré sur mobile */
    text-align: center;
    display: block;
    width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    margin: 0 auto 20px;
		margin-top: 20px; /* Ajout d'une marge supérieure */
  }
}

/* Desktop : une seule ligne, largeur portée par le contenu */
@media (min-width: 992px) {
  .kl-subtitle-block-hero-post {
    font-size: var(--subtitle-size-desktop) !important;
    text-align: left;
    white-space: nowrap;
    width: auto;
    max-width: none;
    display: block;
    margin-bottom: 24px;
  }
}


/* ============================================================
   6. BOUTON HERO (CTA)
   ============================================================ */
.kl-btn.kl-btn-text-icon.kl-btn-white {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.kl-btn.kl-btn-text-icon.kl-btn-white:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

@media (max-width: 991px) {
  section.kl-section-block-hero .kl-cta {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .kl-btn.kl-btn-text-icon.kl-btn-white {
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    margin: 14px auto 0;
  }
}

@media (min-width: 992px) {
  section.kl-section-block-hero .kl-cta {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .kl-btn.kl-btn-text-icon.kl-btn-white {
    justify-content: flex-start;
    margin-left: 0;
  }
}


/* ============================================================
   7. ARTICLES — page article individuel
   ============================================================ */

/* Titre centré */
.single-post .kl-single-title-post          { text-align: center; width: 100%; display: flex; justify-content: center; }
.single-post .kl-single-title-post .row     { justify-content: center; width: 100%; margin: 0; }
.single-post .kl-single-title-post .col-auto { text-align: center; width: 100%; max-width: 100%; flex: 0 0 100%; }
.single-post .kl-single-title-post .d-lg-flex { justify-content: center; width: 100%; }

.single-post .kl-single-title-post--title {
  font-size: 48px;
  text-align: center;
  display: block;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 50px;
  padding-bottom: 40px;
  background: none;
  border: none;
}

@media (max-width: 991px) {
  .single-post .kl-single-title-post--title {
    font-size: 2rem;
    padding: 0 15px 40px;
    margin-bottom: 50px;
  }
}

/* Catégorie */
.single-post .kl-article-category-wrapper { text-align: center; width: 100%; }

.single-post .kl-article-category {
  display: inline-block;
  font-size: 32px;
  font-weight: 400;
  text-decoration: none;
  padding: 6px 18px;
}


/* ============================================================
   8. COMPOSANTS DIVERS
   ============================================================ */

/* Swiper fondu */
.swiper-fade .swiper-slide         { opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
.swiper-fade .swiper-slide-active  { opacity: 1; pointer-events: auto; z-index: 1; }

/* Footer */
@media (max-width: 767px) {
  .kl-footer-menu .menu-item a { font-size: 14px; }
}

/* Blocs récents */
@media (max-width: 991px) {
  .kl-recent-programmes-wrap { margin-bottom: 30px; }
  .kl-recent-posts-caption { margin-top: 200px; margin-left: 30px; margin-right: 23px; }
}