/*
 * Kesho — Compatibilité blocs ThemeREX. Valeurs relevées sur le rendu 2.x de la prod
 * (styles calculés, 2026-09-18). Les titres héritent volontairement de la typographie du thème
 * actif, pour rester cohérents avec les autres titres de la page.
 */

@font-face {
  font-family: "WCManoNegraBta";
  src: url("fonts/wcmanonegrabta-webfont.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "WCManoNegraBta";
  src: url("fonts/wcmanonegraboldbta-webfont.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ktl-accent: #84c54e;
  --ktl-accent-2: #ff7e27;
  --ktl-yellow: #ffe400;
  --ktl-dark: #333333;
  --ktl-muted: #8a8a8a;
  --ktl-gap: 30px;
}

/* --- Marges ThemeREX (top/bottom="tiny|small|…") --- */
.ktl-mt-null { margin-top: 0 !important; }      .ktl-mb-null { margin-bottom: 0 !important; }
.ktl-mt-tiny { margin-top: .5rem !important; }  .ktl-mb-tiny { margin-bottom: .5rem !important; }
.ktl-mt-small { margin-top: 2rem !important; }  .ktl-mb-small { margin-bottom: 2rem !important; }
.ktl-mt-medium { margin-top: 3rem !important; } .ktl-mb-medium { margin-bottom: 3rem !important; }
.ktl-mt-large { margin-top: 4rem !important; }  .ktl-mb-large { margin-bottom: 4rem !important; }
.ktl-mt-huge { margin-top: 5rem !important; }   .ktl-mb-huge { margin-bottom: 5rem !important; }
.ktl-ml-null { margin-left: 0 !important; }     .ktl-mr-null { margin-right: 0 !important; }
.ktl-ml-tiny { margin-left: .5rem !important; } .ktl-mr-tiny { margin-right: .5rem !important; }

/* Rangées WPBakery marquées « sombre » en 2.x (scheme="dark" / inverse="yes") : texte clair. */
.ktl-on-dark,
.ktl-on-dark h1, .ktl-on-dark h2, .ktl-on-dark h3,
.ktl-on-dark h4, .ktl-on-dark h5, .ktl-on-dark h6,
.ktl-on-dark p, .ktl-on-dark li,
.ktl-on-dark .ktl-skills__value,
.ktl-on-dark .ktl-skills__label { color: #fff; }
.ktl-on-dark .ktl-skills__label { text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.vc_row.ktl-scheme-dark { background-color: #333333; }

.ktl-align-left { text-align: left; }
.ktl-align-center { text-align: center; }
.ktl-align-right { text-align: right; }

/* --- Boutons --- */
.ktl-button {
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  border: 0;
  border-radius: 3px;
  background-color: var(--ktl-accent);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: -.013em;
  text-align: center;
  text-decoration: none !important;
  white-space: normal;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.ktl-button--small { padding: 1.18em 2.6em; }
.ktl-button--medium { padding: 1.1em 2.2em; font-size: 1.125rem; }
.ktl-button--large { padding: .8em 1.2em; font-size: 1.5rem; }

.ktl-button,
.ktl-button:visited { color: #fff; }
.ktl-button--filled:hover,
.ktl-button--filled:focus-visible,
.ktl-button--default:hover,
.ktl-button--default:focus-visible { background-color: var(--ktl-accent-2) !important; color: #fff !important; }

.ktl-button--filled2 { background-color: var(--ktl-accent-2); }
.ktl-button--filled2:hover,
.ktl-button--filled2:focus-visible { background-color: var(--ktl-accent) !important; color: #fff !important; }

.ktl-button--filled3,
.ktl-button--filled3:visited { background-color: var(--ktl-yellow); color: var(--ktl-dark); }
.ktl-button--filled3:hover,
.ktl-button--filled3:focus-visible { background-color: var(--ktl-accent-2) !important; color: #fff !important; }

/* Flèche dans un cercle (icône fontello « icon-arrow » de la 2.x), à la couleur du texte. */
.ktl-button--arrow::after {
  content: "";
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-left: .45em;
  vertical-align: -.17em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm1.2 5.6 6.4 6.4-6.4 6.4-1.7-1.7 3.5-3.5H4.4v-2.4H15l-3.5-3.5z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm1.2 5.6 6.4 6.4-6.4 6.4-1.7-1.7 3.5-3.5H4.4v-2.4H15l-3.5-3.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ktl-button:focus-visible { outline: 2px solid var(--ktl-dark); outline-offset: 2px; }
.ktl-button-wrap { margin: .5em 0; }

/* --- Titres --- */
.ktl-title { display: flow-root; padding-bottom: 2px; }
/* Titres sur rangée sombre (scheme_dark) : gris clair #e0e0e0, comme la 2.x. */
.vc_row.scheme_dark .ktl-title { color: #e0e0e0; }
/* Paragraphes laissés par wpautop dans les titres : même marge qu'en 2.x (ils font la hauteur). */
.ktl-title p { display: block; margin: 0 0 1.5em; }

/* Titre à filets : mêmes règles que .sc_title_divider en 2.x (filets absolus, 20 % de large). */
.ktl-title--divider {
  position: relative;
  padding-left: 5ex;
  padding-right: 5ex;
  text-align: center;
}
.ktl-title__line {
  display: block;
  position: absolute;
  top: 50%;
  width: 20%;
  height: 1px;
  background-color: currentColor;
}
.ktl-title__line--before { left: 0; }
.ktl-title__line--after { right: 0; }

/* --- Colonnes --- */
.ktl-columns {
  display: grid;
  grid-template-columns: repeat(var(--ktl-cols, 2), minmax(0, 1fr));
  gap: var(--ktl-gap);
  align-items: start;
}
.ktl-columns--equal { align-items: stretch; }
.ktl-columns--nogap { gap: 0; }
.ktl-column { min-width: 0; }

@media (max-width: 1023px) {
  .ktl-columns--4, .ktl-columns--5, .ktl-columns--6, .ktl-columns--7 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .ktl-columns { grid-template-columns: minmax(0, 1fr); }
  .ktl-column { grid-column: auto !important; }
}

/* --- Compteurs --- */
.ktl-skills {
  display: grid;
  grid-template-columns: repeat(var(--ktl-cols, 1), minmax(0, 1fr));
  gap: var(--ktl-gap);
}
.ktl-skills__value {
  font-size: 4.375rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ktl-skills__label {
  margin: 20.4px 0 9.6px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.45;
}
@media (max-width: 767px) {
  .ktl-skills { grid-template-columns: minmax(0, 1fr); }
  .ktl-skills__value { font-size: 3.25rem; }
  .ktl-skills__label { font-size: 1.25rem; }
}

/* --- Appel à l'action --- */
/* content-box comme en 2.x : width:100% + padding 4em → la boîte déborde de la colonne, et le titre
   géant y tient sur deux lignes. */
.ktl-cta { box-sizing: content-box; margin-bottom: 2rem; }
.ktl-cta--accent { color: #fff; padding: 0 4em; }
.ktl-cta--accent .ktl-cta__title,
.ktl-cta--accent .ktl-cta__descr { color: #fff; }
.ktl-cta--split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2em;
  align-items: center;
}
.ktl-cta__media img,
.ktl-cta__img { display: block; max-width: 100%; height: auto; }
.ktl-align-center .ktl-cta__media { margin-bottom: 1.5em; }
.ktl-align-center .ktl-cta__media img { margin: 0 auto; }
.ktl-cta__title {
  margin: 0 0 7px;
  font-family: "WCManoNegraBta", sans-serif;
  font-size: clamp(2.75rem, 7vw, 6.25rem);
  font-weight: 400;
  line-height: .915;
  letter-spacing: 0;
  text-transform: none;
}
.ktl-cta__descr { margin-bottom: 1.5em; }
.ktl-cta__buttons { margin-top: 1em; }
@media (max-width: 767px) {
  .ktl-cta--accent { padding: 0 1em; }
  .ktl-cta--split { grid-template-columns: minmax(0, 1fr); }
}

/* --- Tableau --- */
.ktl-table { overflow-x: auto; margin-bottom: 1.5em; }
.ktl-table table { width: 100% !important; height: auto !important; border-collapse: collapse; }
.ktl-table td,
.ktl-table th { padding: .6em .8em; border: 1px solid #dddddd; vertical-align: top; }
.ktl-table tr:first-child td { font-weight: 700; background-color: #f5f5f5; }

/* --- Listes d'articles / de pages --- */
.ktl-blogger {
  display: grid;
  grid-template-columns: repeat(var(--ktl-cols, 3), minmax(0, 1fr));
  gap: var(--ktl-gap);
}
/* Isotope 2.x : 30 px sous chaque carte (classic / masonry). */
.ktl-blogger--classic,
.ktl-blogger--masonry { padding-bottom: 30px; }
.ktl-blogger--alter,
.ktl-blogger--portfolio { gap: 10px; }
@media (max-width: 1023px) {
  .ktl-blogger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ktl-blogger--cols-1 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .ktl-blogger { grid-template-columns: minmax(0, 1fr); }
}

.ktl-post { min-width: 0; }
.ktl-post__thumb { display: block; overflow: hidden; }
.ktl-post__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 370 / 209;
  object-fit: cover;
}
/* Mosaïque : chaque image garde ses proportions, comme en 2.x. */
.ktl-post--masonry .ktl-post__img { height: auto; }
.ktl-blogger--masonry { align-items: start; }
.ktl-post__thumb .ktl-post__img { transition: transform .4s ease; }
.ktl-post__thumb:hover .ktl-post__img { transform: scale(1.04); }

.ktl-post__title { margin: 18px 0 14px; font-size: 1.3rem; font-weight: 700; line-height: 1.2; text-transform: none; letter-spacing: 0; }
.ktl-post__title a { display: inline; color: var(--ktl-accent); text-decoration: none; }
.ktl-post__title a:hover { color: var(--ktl-accent-2); }
.ktl-post__info { margin-bottom: 22.11px; font-size: 13.008px; line-height: 16.72px; color: #000; }
.ktl-post__info a, .ktl-post__info time { color: inherit; text-decoration: none; }
.ktl-post__info time { color: #757575; } /* date grise, comme la 2.x */
.ktl-post__sep { margin: 0 .9em; color: var(--ktl-accent); }
.ktl-post__comments { display: inline-flex; align-items: center; gap: .35em; }
.ktl-post__comments svg { color: var(--ktl-accent); }
.ktl-post__descr { margin: 0 0 2em; line-height: 1.5; }
.ktl-post__more.ktl-button--small { padding: .9em 1.5em; line-height: 1.5; } /* 53 px de haut, comme le post_readmore 2.x */

/* Tuiles (galeries) : carré, titre + bouton en surimpression verte. */
.ktl-post__tile { position: relative; display: block; overflow: hidden; color: #fff; text-decoration: none; }
.ktl-post--tile .ktl-post__img { aspect-ratio: 1 / 1; }
.ktl-post__img--empty { background: #e9e9e9; }
.ktl-post__overlay {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75em;
  padding: .9em 1em;
  background: rgba(132, 197, 78, .92);
  text-align: center;
}
.ktl-post--tile .ktl-post__title { margin: 0; color: #fff; font-size: 1.35rem; }
.ktl-post__overlay .ktl-button { display: none; background-color: #fff; color: var(--ktl-dark); }
@media (hover: hover) {
  .ktl-post__overlay { inset: 0; opacity: 0; transition: opacity .3s ease; }
  .ktl-post__overlay .ktl-button { display: inline-block; }
  .ktl-post__tile:hover .ktl-post__overlay,
  .ktl-post__tile:focus-visible .ktl-post__overlay { opacity: 1; }
}

/* --- Événements --- */
.ktl-events__track { display: grid; gap: var(--ktl-gap); }
.ktl-events--grid .ktl-events__track { grid-template-columns: repeat(var(--ktl-cols, 3), minmax(0, 1fr)); }
.ktl-carousel .ktl-events__track {
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--ktl-cols, 3) - 1) * var(--ktl-gap)) / var(--ktl-cols, 3));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.ktl-carousel .ktl-events__track::-webkit-scrollbar { display: none; }
.ktl-carousel .ktl-event { scroll-snap-align: start; }
@media (max-width: 1023px) {
  .ktl-events--grid .ktl-events__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ktl-carousel .ktl-events__track { grid-auto-columns: calc((100% - var(--ktl-gap)) / 2); }
}
@media (max-width: 767px) {
  .ktl-events--grid .ktl-events__track { grid-template-columns: minmax(0, 1fr); }
  .ktl-carousel .ktl-events__track { grid-auto-columns: 85%; }
}

.ktl-event { min-width: 0; background: #fff; color: var(--ktl-muted); text-align: center; }
.ktl-event .ktl-post__img { aspect-ratio: 16 / 9; }
.ktl-event__body { padding: 1.25em 2.5em 2.5em; }
.ktl-event__date { margin: 0 0 .8em; font-size: 13px; color: #757575; }
.ktl-event__title {
  margin: 0 0 .33em;
  font-size: 2.5em;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.025em;
  text-transform: none;
}
.ktl-event__title a { color: var(--ktl-accent); text-decoration: none; }
.ktl-event__title a:hover { color: var(--ktl-accent-2); }
.ktl-event__descr { margin: 0 0 1.7em; line-height: 1.5; }
.ktl-event .ktl-button--small { padding: .8em 1.9em; line-height: 1.5; }
@media (max-width: 767px) { .ktl-event__title { font-size: 1.75em; } }

/* --- Blocs rares --- */
.ktl-highlight { padding: 0 .2em; }
.ktl-dropcaps > p:first-child::first-letter,
.ktl-dropcaps::first-letter {
  float: left;
  margin: .05em .12em 0 0;
  font-family: "WCManoNegraBta", sans-serif;
  font-size: 3.4em;
  line-height: .8;
  color: var(--ktl-accent);
}
.ktl-list { padding-left: 1.2em; }
.ktl-quote { margin: 1.5em 0; padding-left: 1em; border-left: 3px solid var(--ktl-accent); font-family: "WCManoNegraBta", sans-serif; font-size: 1.4em; }
.ktl-quote cite { display: block; margin-top: .5em; font-family: inherit; font-size: .7em; font-style: normal; }
.ktl-tooltip { border-bottom: 1px dotted currentColor; cursor: help; }

@media (prefers-reduced-motion: reduce) {
  .ktl-post__thumb .ktl-post__img, .ktl-post__overlay, .ktl-button { transition: none; }
}

/* --- Intégration 3.x ----------------------------------------------------------------------
 * Accordéons WPBakery : la 3.x retire le fond des en-têtes (background transparent !important)
 * mais WPBakery garde le texte blanc de la couleur « green » → titres blanc sur blanc. On garde
 * le style 3.x (sans fond, carré « + ») et on remet le texte en foncé.
 */
.vc_tta.vc_tta-accordion .vc_tta-panel .vc_tta-panel-title > a { color: var(--theme-color-text_dark, #1d1d1d) !important; }
.vc_tta.vc_tta-accordion .vc_tta-panel .vc_tta-panel-title > a:hover,
.vc_tta.vc_tta-accordion .vc_tta-panel.vc_active .vc_tta-panel-title > a { color: var(--ktl-accent) !important; }

/* Tableaux larges sur mobile : défilement horizontal signalé par des ombres sur les bords. */
@media (max-width: 767px) {
  .ktl-table table { min-width: 640px; font-size: .875rem; }
  .ktl-table {
    background:
      linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center / 40px 100% no-repeat local,
      linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right center / 40px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0)) left center / 14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0)) right center / 14px 100% no-repeat scroll;
  }
}