/* ===================================================================
   V2 — Les sens du travail — styles additionnels
   Chargé APRÈS style.css. Le SCSS du thème n'est pas compilé (pas de
   build) : tous les styles de la V2 vivent ici, servis directement.
   =================================================================== */

/* ===================================================================
   OFFRE — Sections numérotées transformées en accordéons
   Principe graphique conservé (numéro + titre + couleurs alternées),
   la description devient un panneau dépliable.
   =================================================================== */
.kl-accordion-offer__header {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
    gap: 16px;
    -webkit-appearance: none;
    appearance: none;
}
@media (min-width: 992px) {
    .kl-accordion-offer__header { gap: 22px; }
}
.kl-accordion-offer__header:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 6px;
}
.kl-accordion-offer__header--static,
.kl-accordion-offer__header[disabled] {
    cursor: default;
}

/* Numéro : taille réduite par rapport au titre (demande « numéros plus petits ») */
.kl-title-number.kl-title-number--sm {
    font-size: 2.4rem;
    line-height: 1.1;
    flex: 0 0 auto;
}
@media (min-width: 992px) {
    .kl-title-number.kl-title-number--sm {
        font-size: 3rem;
    }
}

/* Chevron indicateur d'ouverture — placé À GAUCHE, aligné en colonne.
   Dessiné avec un carré à 2 bordures pivoté à 45° : une seule pointe nette.
   Tailles/marges ajustables ici. */
.kl-accordion-offer__icon {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-top: 10px;      /* aligne le chevron sur la 1re ligne du titre/numéro */
    box-sizing: border-box;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: rotate(45deg);   /* pointe vers le bas */
    transition: transform .35s ease;
}
@media (min-width: 992px) {
    .kl-accordion-offer__icon {
        width: 17px;
        height: 17px;
        margin-top: 15px;
    }
}
.kl-accordion-offer.is-open .kl-accordion-offer__icon {
    transform: rotate(225deg);  /* pointe vers le haut à l'ouverture */
}

/* Titre d'offre : toujours un <h2> (SEO), taille réduite (65->44px),
   et espace réservé à droite pour ne pas passer sous la fleur décorative. */
.kl-accordion-offer__heading {
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
}
.kl-accordion-offer__title {
    font-size: 26px;
    line-height: 1.2;
}
@media (min-width: 768px) {
    .kl-accordion-offer__title { font-size: 34px; }
}
@media (min-width: 1200px) {
    .kl-accordion-offer__title { font-size: 44px; line-height: 1.15; }
}
/* Réserve la zone de la fleur (positionnée en haut à droite des pages offre) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .kl-accordion-offer__header { padding-right: 100px; }
}
@media (min-width: 1200px) {
    .kl-accordion-offer__header { padding-right: 240px; }
}

/* --- Colonne de texte -----------------------------------------------
   Le chevron vit dans une gouttière à gauche ; TOUT le reste — titre,
   accroche, pastilles, contenu du panneau — s'aligne sur une seule verticale.
   Sans cette variable, chaque élément retombait sur un bord différent
   (titre à 39px, accroche à 29px, panneau à 0) et l'œil accrochait.
   La valeur suit la largeur du chevron + son écart, définis plus haut. */
.kl-accordion-offer { --kl-gouttiere: 30px; }   /* 14px d'icône + 16px d'écart */
@media (min-width: 992px) {
    .kl-accordion-offer { --kl-gouttiere: 39px; }   /* 17px + 22px */
}
/* En-tête non cliquable : pas de chevron, donc pas de gouttière à compenser. */
.kl-accordion-offer:has(.kl-accordion-offer__header--static) { --kl-gouttiere: 0px; }

/* Panneau dépliable : animation de hauteur pilotée en JS (max-height) */
.kl-accordion-offer__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .45s ease;
}
.kl-accordion-offer__panel-inner {
    padding-top: 24px;
    margin-left: var(--kl-gouttiere);
    /* Largeur de lecture. Sans plafond, les lignes montaient à 186 signes sur
       un grand écran — deux fois et demie l'optimum — et le texte passait sous
       la fleur décorative, qui n'est réservée que sur le titre. */
    max-width: 58ch;
}
@media (min-width: 992px) {
    .kl-accordion-offer__panel-inner { padding-top: 30px; }
}
/* Repli mouvement clavier / no-JS : si JS absent, on affiche le contenu */
.no-js .kl-accordion-offer__panel { max-height: none; }

/* --- Bandeau de titre des pages d'offre : le picto doit rester au-dessus ---
   L'illustration déborde volontairement sous le bandeau (bottom: -138px). Mais
   la section des offres qui suit est positionnée et vient après dans le code :
   elle se peignait donc PAR-DESSUS le picto. Sur les pages dont le haut est
   transparent, ça ne se voyait pas ; dès qu'un fond opaque arrive dessous —
   une offre en bande blanche — le picto disparaissait, comme coupé net.
   On remonte le bandeau : 2, très en dessous de l'en-tête fixe (10 et 11). */
.kl-sect-title-offers {
    position: relative;
    z-index: 2;
}

/* -------------------------------------------------------------------
   2e niveau : les intertitres de la description deviennent des
   sous-accordéons (découpage en PHP, cf. all/v2-accordion.php).
   Tout est en currentColor : le même style sert sur les sections
   claires et sur les sections sombres, sans dupliquer les règles.
   ------------------------------------------------------------------- */
/* --- Public visé : en-tête de section « Pour qui ? » -------------------
   Un public n'est pas une offre : il chapeaute plusieurs offres. Il prend
   donc l'échelle des titres de section du thème (celle de « Témoignages
   clients »), nettement au-dessus des titres d'offre, plus une pastille
   « Pour qui ? » dans le jaune de la marque. C'est ce contraste qui trace la
   frontière avec les prestations qui suivent. */
.kl-public {
    padding: 96px 0 72px;
}
@media (max-width: 767.98px) {
    .kl-public { padding: 56px 0 44px; }
}
/* Réserve la zone de l'illustration de bandeau, qui déborde à droite */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .kl-public { padding-right: 130px; }
}
@media (min-width: 1200px) {
    .kl-public { padding-right: 260px; }
}
.kl-public__label {
    display: inline-block;
    margin: 0 0 20px;
    padding: 7px 16px;
    border-radius: 36px;
    background: #EEFF6E;
    color: #212B2E;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.kl-public__titre {
    margin: 0;
    max-width: 26ch;
    /* Lignes de longueur équilibrée : évite un mot seul en dernière ligne
       (« … de la gestion de / carrière »). Ignoré sans dommage ailleurs. */
    text-wrap: balance;
    color: currentColor;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.12;
}
@media (min-width: 768px)  { .kl-public__titre { font-size: 44px; } }
@media (min-width: 1600px) { .kl-public__titre { font-size: 60px; } }
.kl-public__sous-titre {
    margin: 16px 0 0;
    max-width: 46ch;
    text-wrap: balance;
    color: currentColor;
    font-size: 19px;
    line-height: 1.4;
    opacity: .78;
}
@media (min-width: 1200px) { .kl-public__sous-titre { font-size: 23px; } }
.kl-public__texte {
    margin-top: 32px;
    max-width: 62ch;
    color: currentColor;
}
.kl-public__texte p,
.kl-public__texte ul { margin-bottom: 1em; }
.kl-public__texte > :last-child { margin-bottom: 0; }

/* Chapeau sans « Pour qui ? » : il devient lui aussi une bande de couleur,
   donc il lui faut sa propre respiration verticale. */
.kl-intro-bande { padding: 56px 0 48px; }
@media (max-width: 767.98px) { .kl-intro-bande { padding: 36px 0 32px; } }
.kl-intro-bande .kl-intro-list-offers { color: currentColor; }

/* Accroche : sous le titre, hors du pli. C'est elle qui donne envie d'ouvrir,
   elle n'a rien à faire derrière un clic. */
.kl-offre__accroche {
    max-width: 58ch;
    margin-top: 14px;
    margin-left: var(--kl-gouttiere);
    font-size: 1.05em;
    line-height: 1.55;
    opacity: .92;
}

/* Chapeau : le texte placé avant le premier intertitre, toujours visible */
.kl-offre__chapeau { margin-bottom: 14px; }

/* --- Rythme vertical dans les panneaux d'offre -----------------------
   Le thème remet margin-bottom à 0 sur p, ul et les titres (style.css).
   Passable sur trois lignes, illisible sur un programme de formation :
   tout se colle. On rend leur respiration aux contenus longs.

   La rangée de pastilles est exclue de ces règles : ce n'est pas une liste de
   texte mais une rangée d'étiquettes, avec sa propre mise en page. Sans cette
   exclusion, la dernière pastille perdait sa marge basse et l'étirement du
   conteneur la rattrapait en hauteur — d'où deux pastilles inégales. */
.kl-accordion-offer__panel-inner p,
.kl-accordion-offer__panel-inner ul:not(.kl-meta),
.kl-accordion-offer__panel-inner ol {
    margin-bottom: 1.15em;
}
.kl-accordion-offer__panel-inner > :last-child,
.kl-accordion-sub__panel-inner > :last-child,
.kl-offre__chapeau > :last-child {
    margin-bottom: 0;
}
.kl-accordion-offer__panel-inner li:not(.kl-meta__item) {
    margin-bottom: .75em;
}
.kl-accordion-offer__panel-inner li:not(.kl-meta__item):last-child {
    margin-bottom: 0;
}
.kl-meta__item { margin: 0; }

/* Modalités remontées au niveau de l'offre (hors du pli), sous l'accroche.
   Même largeur de lecture que le reste, sinon la rangée file sous la fleur.
   Le sélecteur porte les deux classes à dessein : « .kl-meta » est défini plus
   bas avec un raccourci « margin », qui remettrait cette marge gauche à zéro. */
.kl-meta.kl-offre__meta {
    margin-top: 16px;
    margin-left: var(--kl-gouttiere);
    margin-bottom: 0;
    max-width: 58ch;
}

/* Un item de liste porteur d'un paragraphe n'est pas une puce mais un bloc
   titré (« Module 1 : … » suivi de son explication) : on lui donne l'espace
   d'un bloc et on retire la puce, qui n'apporte rien à cette échelle. */
.kl-accordion-offer__panel-inner ul:has(li p) {
    list-style: none;
    padding-left: 0;
}
.kl-accordion-offer__panel-inner li:has(p) {
    margin-bottom: 1.6em;
}
.kl-accordion-offer__panel-inner li p {
    margin: .35em 0 0;
}

/* Les listes d'items courts restent sans puce — le thème n'en met nulle part,
   en ajouter ici jurerait. Elles se lisent comme une liste grâce à un
   interligne plus serré que celui qui sépare deux paragraphes. */
.kl-accordion-offer__panel-inner ul:not(:has(li p)):not(.kl-meta) > li {
    margin-bottom: .45em;
}

/* Appel à l'action (les « 👉 » du document) */
.kl-offre__cta { margin: 22px 0 4px; }
.kl-offre__cta .kl-btn-primary { padding: 15px 34px; font-size: 16px; }

/* --- Onglets : Conférence / Atelier / Formation ---------------------
   Trois variantes d'une même thématique : des onglets, pas des accordéons
   empilés. Sans ça le contenu demanderait quatre niveaux de dépliage et
   on ne saurait plus où on se trouve. Tout est en currentColor pour
   servir les sections claires comme les sombres. */
.kl-tabs { margin-top: 4px; }
.kl-tabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}
.kl-tabs__tab {
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 36px;
    padding: 9px 22px;
    margin: 0;
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    color: inherit;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
    -webkit-appearance: none;
    appearance: none;
}
.kl-tabs__tab:hover { background: rgba(127, 127, 127, .18); }
.kl-tabs__tab.is-active {
    background: #EEFF6E;
    border-color: #EEFF6E;
    color: #212B2E;
}
.kl-tabs__tab:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}
.kl-tabs__panel[hidden] { display: none; }

/* --- Pastilles de modalités (durée, format, tarif…) ------------------
   Remontées en tête d'onglet : c'est l'information qui fait décider, elle
   n'a rien à faire au fond d'un deuxième pli. */
.kl-meta {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}
.kl-meta li::before { content: none; }   /* le thème décore les <li> par défaut */
.kl-meta__item {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 7px 15px;
    border-radius: 36px;
    background: rgba(127, 127, 127, .16);
    line-height: 1.35;
}
/* Pastille « Public » : dans le jaune de la marque, comme l'en-tête « Pour
   qui ? » des pages Conférences et Accompagnements. Sur Conseil & Études chaque
   offre vise un public différent : l'information se porte au niveau de l'offre. */
.kl-meta__item--public {
    background: #EEFF6E;
    color: #212B2E;
}
.kl-meta__item--public .kl-meta__cle { opacity: .75; }

.kl-meta__cle {
    font-weight: 700;
    font-size: .8em;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .7;
}

/* Filet de séparation, teinté par le texte de la section */
.kl-accordion-sub::before {
    content: "";
    display: block;
    height: 1px;
    background: currentColor;
    opacity: .18;
}
.kl-accordion-sub__heading {
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
}
.kl-accordion-sub__header {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 15px 0;
    width: 100%;
    text-align: left;
    color: inherit;
    cursor: pointer;
    gap: 12px;
    -webkit-appearance: none;
    appearance: none;
}
.kl-accordion-sub__header[disabled] { cursor: default; }
.kl-accordion-sub__header:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

/* Même chevron que le 1er niveau, en plus petit */
.kl-accordion-sub__icon {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-top: 7px;
    box-sizing: border-box;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .35s ease;
}
.kl-accordion-sub.is-open .kl-accordion-sub__icon { transform: rotate(225deg); }

.kl-accordion-sub__title {
    font-size: 18px;
    line-height: 1.3;
}
@media (min-width: 992px) {
    .kl-accordion-sub__title { font-size: 20px; }
}

.kl-accordion-sub__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;
}
.kl-accordion-sub__panel-inner { padding-bottom: 20px; }
/* Les intertitres sont devenus les en-têtes : plus de marge haute parasite */
.kl-accordion-sub__panel-inner > :first-child { margin-top: 0; }
.no-js .kl-accordion-sub__panel { max-height: none; }

/* ===================================================================
   RÉFÉRENCES & RÉALISATIONS — Logos + quinconce des aplats
   =================================================================== */

/* Logo affiché en haut de carte (page Références + carrousel Réalisations) */
.kl-card-ref-logo {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    height: 88px;   /* zone logo de hauteur FIXE => tous les titres démarrent au même Y */
}
.kl-card-ref-logo img {
    max-height: 88px;
    max-width: 90%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Harmonisation avec l'univers N&B botanique : désaturation + fondu
       du fond blanc du logo dans l'aplat de couleur. */
    filter: grayscale(100%);
    mix-blend-mode: multiply;
}

/* Alignement harmonieux des cartes de la page Références :
   - hauteurs de cartes égales (les colonnes Bootstrap s'étirent déjà,
     la carte remplit sa colonne via height:100%) ;
   - « Lire plus » plaqué en bas de chaque carte (margin-top:auto). */
/* Contenu ancré en haut de la carte (logo en haut) : le thème utilise
   justify-content:flex-end sur .kl-card-reference-modif. */
.kl-section-post-ref .kl-card-reference {
    justify-content: flex-start;
}
/* LE point clé : le thème aligne le titre par le BAS via le <h3>
   (.kl-card-header-ref h3 { align-items: end }). On le remet en HAUT →
   titre collé sous le logo, l'espace des titres courts passe dessous.
   Les extraits (hauteur fixe) restent alignés d'une carte à l'autre. */
.kl-section-post-ref .kl-card-header-ref h3 {
    align-items: flex-start;
}

/* QUINCONCE = alternance de teintes des aplats (damier sur 3 colonnes).
   1 carte sur 2 : fond sombre + texte clair + titre jaune. Le logo est
   traité à l'inverse (inversion + mix-blend screen) pour rester visible. */
.kl-section-post-ref .kl-col-card-ref:nth-child(even) .kl-card-reference {
    background: #212B2E;
    color: #ffffff;
}
.kl-section-post-ref .kl-col-card-ref:nth-child(even) .kl-card-header-ref h3 {
    color: #EEFF6E;
}
.kl-section-post-ref .kl-col-card-ref:nth-child(even) .kl-card-content-ref,
.kl-section-post-ref .kl-col-card-ref:nth-child(even) .kl-card-content-ref * {
    color: #ffffff;
}
.kl-section-post-ref .kl-col-card-ref:nth-child(even) .kl-btn-read-more.kl-color-black-theme {
    color: #ffffff !important;
}
.kl-section-post-ref .kl-col-card-ref:nth-child(even) .kl-btn-read-more-black::before {
    background: #EEFF6E;
}
/* Logo sur carte SOMBRE : inversion + screen (au lieu de multiply) */
.kl-section-post-ref .kl-col-card-ref:nth-child(even) .kl-card-ref-logo img {
    filter: grayscale(100%) invert(1);
    mix-blend-mode: screen;
}

/* Quinconce (décalage vertical alterné) — DÉSACTIVÉ au profit d'un
   alignement propre (titres à la même hauteur). Décommenter pour le
   rétablir, mais les cartes ne seront alors plus alignées entre elles.
@media (min-width: 1200px) {
    .kl-section-post-ref .kl-col-card-ref:nth-child(3n + 2) { margin-top: 64px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .kl-section-post-ref .kl-col-card-ref:nth-child(2n) { margin-top: 48px; }
}
*/

/* ===================================================================
   ACCUEIL — Carrousel de témoignages
   =================================================================== */
.kl-section-temoignages {
    padding: 60px 0;
}
@media (min-width: 992px) {
    .kl-section-temoignages { padding: 90px 0; }
}
.kl-slick-temoignages.kl-hidden-slick { opacity: 0; }
.kl-slick-temoignages { transition: opacity .3s ease; }

.kl-temoignage-slide { padding: 0 8px; }
.kl-temoignage-item {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    padding-top: 30px;
}
/* Maquette HOME-1 : citation en romain, sans guillemet décoratif. Sur des
   témoignages longs, l'italique alourdissait la lecture. */
.kl-temoignage-quote {
    margin: 0 0 28px;
    line-height: 1.5;
}
.kl-temoignage-quote p { margin: 0 0 12px; }
.kl-temoignage-quote p:last-child { margin-bottom: 0; }
.kl-temoignage-meta { gap: 18px; }
.kl-temoignage-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}
.kl-temoignage-logo img {
    max-height: 54px;
    max-width: 120px;
    width: auto;
    object-fit: contain;
}
.kl-temoignage-author { font-size: 1.15rem; }

/* Points de navigation (flèches retirées) : espace sous le carrousel */
.kl-temoignages-dots,
.kl-collaborateurs-dots {
    margin-top: 30px;
    text-align: center;
}
.kl-temoignage-role { color: #5b6467; font-size: .95rem; }

/* --- Flèches de navigation ------------------------------------------
   On reprend l'habillage des flèches du thème (.kl-slick-arrow : cercle
   sombre + chevron jaune, avec l'inversion au survol) mais pas son
   conteneur .kl-slick-controls, calibré pour un carrousel pleine largeur
   (.kl-slick-prev { left: -83px }) alors que la carte témoignage est
   plafonnée à 900px centrés. On réserve donc un couloir de chaque côté
   via le padding de la scène, et on positionne dedans. */
.kl-temoignages-wrap {
    max-width: 1046px;      /* 900 (carte) + 2 × 73 (couloir des flèches) */
    margin-left: auto;
    margin-right: auto;
}
.kl-temoignages-stage { padding: 0 73px; }
@media (max-width: 991.98px) {
    .kl-temoignages-stage { padding: 0 56px; }
}
@media (max-width: 575.98px) {
    /* Le thème masque .kl-slick-arrow ici : on rend la largeur au texte. */
    .kl-temoignages-stage { padding: 0; }
}

.kl-temoignages-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    padding: 0;
    line-height: 0;
    cursor: pointer;
    z-index: 2;
}
.kl-temoignages-prev { left: 15px; }
.kl-temoignages-next { right: 15px; }
@media (max-width: 991.98px) {
    .kl-temoignages-prev { left: 6px; }
    .kl-temoignages-next { right: 6px; }
}
.kl-temoignages-arrow:focus-visible {
    outline: 2px solid #212B2E;
    outline-offset: 4px;
    border-radius: 50%;
}

/* Hauteur figée sur le témoignage le plus long : sans cela, le défilement
   automatique redimensionne la section toutes les 7 s et fait « sauter »
   la page sous le curseur. Même principe que le carrousel collaborateurs. */
.kl-slick-temoignages .slick-track { display: flex; align-items: stretch; }
.kl-slick-temoignages .slick-slide { height: auto; }
.kl-slick-temoignages .slick-slide > div { height: 100%; }

/* ===================================================================
   À PROPOS — Carrousel de collaborateurs (fond sombre)
   =================================================================== */
.kl-slick-collaborateurs.kl-hidden-slick { opacity: 0; }
.kl-slick-collaborateurs { transition: opacity .3s ease; margin-top: 20px; }

.kl-collaborateur-slide { padding: 0 15px; height: auto; }
.kl-slick-collaborateurs .slick-track { display: flex; }
.kl-slick-collaborateurs .slick-slide { height: auto; }
.kl-slick-collaborateurs .slick-slide > div { height: 100%; }

.kl-collaborateur-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 8px 0 24px;
}
.kl-collaborateur-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 22px;
    background: #2b3538;
}
.kl-collaborateur-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.kl-collaborateur-nom {
    font-size: 1.4rem;
    margin-bottom: 12px;
}
.kl-collaborateur-texte {
    font-size: .98rem;
    line-height: 1.55;
    margin-bottom: 18px;
    flex-grow: 1;
}
.kl-collaborateur-texte p { margin: 0 0 10px; }
.kl-collaborateur-texte p:last-child { margin-bottom: 0; }
.kl-collaborateur-social {
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 16px;
}
.kl-collaborateur-social a {
    display: inline-flex;
    transition: opacity .2s ease;
}
.kl-collaborateur-social a:hover { opacity: .7; }

/* --- Flèches de navigation (fond sombre) ----------------------------
   Ce carrousel a la même géométrie que celui des Réalisations : on réutilise
   donc tel quel le positionnement du thème (.kl-slick-controls + .kl-slick-prev
   / .kl-slick-next, avec toute son échelle responsive de -83px à 0). Seule la
   palette change : le cercle du thème est en #212b2e, exactement la couleur de
   fond du bloc (.kl-bg-black-theme) — il serait invisible. Les SVG portent donc
   la palette inversée, et le survol passe au blanc (comme .kl-btn-hover-white). */
.kl-collaborateurs-controls .kl-slick-arrow { cursor: pointer; }
.kl-collaborateurs-controls .kl-slick-arrow:hover svg circle { fill: #ffffff; }
.kl-collaborateurs-controls .kl-slick-arrow:hover svg path   { fill: #212B2E; }
.kl-collaborateurs-controls .kl-slick-arrow:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 4px;
    border-radius: 50%;
}

/* Points de navigation sur fond sombre. Ceux du thème sont en #212B2E (et
   rgba(33,43,46,.3) à l’état inactif), soit exactement la couleur de fond du
   bloc : ils y étaient invisibles. */
.kl-collaborateurs-dots .kl-dots-list .kl-dots { background: rgba(255, 255, 255, .35); }
.kl-collaborateurs-dots .kl-dots-list li a:hover,
.kl-collaborateurs-dots .kl-dots-list li.slick-active a { background: #EEFF6E; }

/* Rien à faire défiler (p. ex. 3 profils sur 3 colonnes en desktop) : Slick ne
   pagine pas et n'afficherait qu'un point solitaire. On retire toute la
   navigation. La classe est posée par v2.js, et réévaluée à chaque changement
   de palier responsive (3 profils défilent en tablette et en mobile). */
.kl-temoignages-wrap.kl-nav-inutile .kl-temoignages-arrow,
.kl-temoignages-wrap.kl-nav-inutile .kl-temoignages-dots,
.kl-collaborateurs-wrap.kl-nav-inutile .kl-collaborateurs-controls,
.kl-collaborateurs-wrap.kl-nav-inutile .kl-collaborateurs-dots {
    display: none;
}

/* ===================================================================
   CONTACT — « Retrouvez-moi sur les réseaux »
   La liste répartissait ses éléments sur toute la largeur (700px). À trois
   réseaux ça tombait juste ; depuis le retrait de YouTube, LinkedIn et
   ResearchGate étaient rejetés aux deux bouts. Écart fixe à la place.
   =================================================================== */
.kl-section-social-network .kl-social-network-list {
    column-gap: 40px;
}
@media (min-width: 768px) {
    .kl-section-social-network .kl-social-network-list { column-gap: 72px; }
}

/* ===================================================================
   PARTAGE — Icônes de partage réseaux sociaux (articles)
   =================================================================== */
.kl-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 48px;
    padding-top: 26px;
    border-top: 1px solid #e4e6e2;
}
.kl-share__label { font-size: 1rem; }
.kl-share__list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    margin: 0;
}
/* Le thème ajoute un tiret "-" devant chaque <li> du contenu d'article
   (.kl-gutenberg ul li::before). On le neutralise pour la liste de partage. */
.kl-share__list li::before {
    content: none !important;
    display: none !important;
}
.kl-share__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #eeff6e;
    border: 0;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease;
    position: relative;
}
.kl-share__link:hover { transform: translateY(-2px); background: #e2f24a; }
.kl-share__copied {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #212b2e;
    color: #fff;
    font-size: .78rem;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.kl-share__copy.is-copied .kl-share__copied { opacity: 1; }

/* ===================================================================
   Sélecteur de langue GTranslate au look d'origine (Fr / En)
   Le dropdown natif de GTranslate reste dans le DOM (moteur de trad)
   mais est déporté hors écran ; les liens Fr/En réutilisent le style
   du thème (.kl-menu-language) avec le point d'état actif.
   =================================================================== */
.kl-lang-switcher {
    display: flex;
    align-items: center;
}
.kl-lang-switcher .gtranslate_wrapper {
    position: absolute !important;
    left: -9999px !important;
    top: 0;
}
.kl-gt-switcher {
    list-style: none;
    margin: 0;
}
.kl-gt-switcher .nav-link {
    cursor: pointer;
}

/* ===================================================================
   CARROUSEL « Exemples de réalisations » (pages Offre) — même principe
   que la page Références : titres alignés sous le logo + alternance
   de teintes (1 carte sur 2 sombre, avec logo inversé).
   =================================================================== */
/* Titre collé sous le logo (le thème l'aligne par le bas via le <h3>) */
.kl-section-realisation .kl-card-header-ref h3 {
    align-items: flex-start;
}
/* « Lire plus » plaqué en bas de carte */
.kl-section-realisation .kl-footer-card-ref {
    margin-top: auto;
}

/* Alternance : 1 carte sur 2 en sombre (classe posée en PHP sur les paires) */
.kl-section-realisation .kl-card-reference--dark {
    background: #212B2E;
    color: #ffffff;
}
.kl-section-realisation .kl-card-reference--dark .kl-card-header-ref h3 {
    color: #EEFF6E;
}
.kl-section-realisation .kl-card-reference--dark .kl-text-16 {
    color: #ffffff;
}
.kl-section-realisation .kl-card-reference--dark .kl-btn-read-more.kl-color-black-theme {
    color: #ffffff !important;
}
.kl-section-realisation .kl-card-reference--dark .kl-btn-read-more-black::before {
    background: #EEFF6E;
}
/* Logo sur carte sombre : inversion + screen (au lieu de multiply) */
.kl-section-realisation .kl-card-reference--dark .kl-card-ref-logo img {
    filter: grayscale(100%) invert(1);
    mix-blend-mode: screen;
}

/* --- Accueil : boutons sous « Dernières actualités » -------------------
   La section porte maintenant deux boutons (voir l'actualité, s'abonner à la
   newsletter). Ils se centrent côte à côte et passent l'un sous l'autre quand
   la place manque. Avec un seul bouton, le rendu est identique à avant.
   Les deux variantes du thème n'ont pas le même rembourrage : on égalise la
   hauteur pour éviter deux boutons voisins de tailles différentes. */
.kl-actus-boutons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 20px 24px;
}
.kl-actus-boutons > .kl-btn-primary,
.kl-actus-boutons > .kl-btn-bordered {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- Illustration botanique des pages d'offre ------------------------
   Elle est posée en absolu dans la section du 1er bloc d'offres et déborde
   de plus de 700 px en dessous, par-dessus les bandes suivantes. Mais ces
   bandes appartiennent à un autre bloc, lui aussi `position-relative` et
   plus loin dans le code : il se peignait donc par-dessus, et la fleur
   s'arrêtait net au milieu d'une tige.
   On remonte la section qui porte l'illustration — 1, sous le bandeau de
   titre (2) et très loin sous l'en-tête fixe (10 et 11). */
.kl-offres-illustree {
    z-index: 1;
}

/* --- Jonction entre deux blocs d'offres -------------------------------
   Le thème pose 130 px de respiration sous la dernière offre d'une liste
   quand elle est sombre, pour la détacher de la section suivante. Une page
   qui enchaîne deux blocs d'offres (Formations) recevait donc cette marge
   au milieu de sa liste : une bande blanche en travers de l'alternance,
   au-dessus de l'offre suivante.
   On ne la garde qu'en fin de liste, c'est-à-dire quand aucune autre
   section d'offres ne suit. */
section:has(> .kl-realisation-item):has(+ section > .kl-realisation-item) > .kl-realisation-item:last-child {
    margin-bottom: 0;
}

/* --- Masquer à l'œil sans retirer du document ------------------------
   Utilisé sur les cartes de la page Références : le logo écrit déjà le nom
   de la structure, l'afficher en titre juste dessous fait doublon. Le texte
   reste dans le HTML — indexé, et annoncé par les lecteurs d'écran — il
   n'est retiré que de l'affichage. C'est la technique d'accessibilité
   habituelle, pas un display:none qui le ferait disparaître pour tout le
   monde. */
.kl-visuellement-masque {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Bloc « Newsletter » ---------------------------------------------
   Posable sur n'importe quelle page. Il reprend le rythme vertical des
   autres sections du thème et la largeur de lecture des textes courants. */
.kl-section-newsletter {
    padding: 60px 0;
}
@media (min-width: 992px) {
    .kl-section-newsletter { padding: 90px 0; }
}
.kl-newsletter__texte {
    max-width: 52ch;
    margin: 22px 0 0;
}
.kl-newsletter__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 34px;
}

/* ===================================================================
   ACCUEIL — Hero en escalier (maquette HOME-1)
   Le titre n'est plus une colonne à droite d'une illustration : il occupe
   seul la largeur, centré, ses trois lignes alternant de bord. La ligne
   animée ferme à droite sur le même bord que la dernière, de sorte que
   changer de mot ne déplace jamais ce bord.
   =================================================================== */
.kl-section-hero-home {
    /* Relevé sur la maquette : 225 px au-dessus du titre, et de quoi loger
       le bouton puis le chevron en dessous. */
    padding: 225px 0 190px;
}
.kl-hero__titre {
    display: flex;
    flex-direction: column;
    /* Enveloppe plus large que la plus longue ligne : c'est cet écart qui
       creuse l'escalier. Relevé sur la maquette : 960 px pour un conteneur
       de 1635, soit un peu moins de 59 %. */
    width: 59%;
    margin: 0 auto;
    /* La maquette garde l'extra-bold du thème : mesuré sur ses tracés, le
       fût du « d » de « du travail. » occupe 23,5 % de la hauteur de ligne,
       là où un Regular n'en prendrait que 12 %. Seule la mise en page
       change, pas la graisse. */
    font-weight: 800;
    letter-spacing: -0.01em;
}
.kl-hero__ligne {
    display: block;
    /* Les lignes débordent volontairement de l'enveloppe quand le mot est
       long : on les laisse passer plutôt que de les comprimer. */
    white-space: nowrap;
}
.kl-hero__ligne--debut { align-self: flex-start; }
/* Le « sens » en jaune est balisé <strong> dans le champ : il n'est mis en
   valeur que par la couleur, pas par la graisse. Sans ça, la ligne s'élargit
   de 15 % et décale l'accroche. */
.kl-hero__titre .kl-hero__ligne strong { font-weight: inherit; }
.kl-hero__ligne--fin   { align-self: flex-end; }

/* Échelle du titre : les paliers du thème (.kl-text-110) rendent le texte
   trop petit une fois en Light — la maquette est 12 % au-dessus. On reprend
   donc ses quatre paliers, mis à l'échelle. Les spans et strong internes
   (mot animé, « sens » en jaune) doivent être visés nommément, sinon
   .kl-text-110 span les ramène à la taille d'origine. */
.kl-hero__titre .kl-hero__ligne,
.kl-hero__titre .kl-hero__ligne span,
.kl-hero__titre .kl-hero__ligne strong {
    font-size: 47px;
    line-height: 0.86;
}
@media (min-width: 768px) {
    .kl-hero__titre .kl-hero__ligne,
    .kl-hero__titre .kl-hero__ligne span,
    .kl-hero__titre .kl-hero__ligne strong { font-size: 75px; }
}
@media (min-width: 992px) {
    .kl-hero__titre .kl-hero__ligne,
    .kl-hero__titre .kl-hero__ligne span,
    .kl-hero__titre .kl-hero__ligne strong { font-size: 98px; }
}
@media (min-width: 1400px) {
    .kl-hero__titre .kl-hero__ligne,
    .kl-hero__titre .kl-hero__ligne span,
    .kl-hero__titre .kl-hero__ligne strong { font-size: 128px; }
}

/* L'accroche se loge au creux de l'escalier, à droite de la ligne décalée.
   Elle vit DANS une ligne du titre : il lui faut une classe de plus que la
   règle d'échelle ci-dessus pour ne pas être emportée à 123 px. */
.kl-hero__titre .kl-hero__ligne .kl-hero__accroche,
.kl-hero__titre .kl-hero__ligne .kl-hero__accroche span,
.kl-hero__titre .kl-hero__ligne .kl-hero__accroche strong {
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: 0;
}
.kl-hero__titre .kl-hero__ligne .kl-hero__accroche {
    display: inline-block;
    vertical-align: middle;
    width: 270px;
    /* L'espace typographique qui précède suffit : à 123 px il vaut déjà
       une trentaine de pixels, et il suit l'échelle du titre. */
    margin-left: 0;
    font-weight: 700;
    white-space: normal;
}
.kl-hero__accroche p { margin: 0; }

.kl-hero__cta {
    margin-top: 156px;
    text-align: center;
}
/* Le chevron est posé en absolu par le thème, calé sur le bas du contenu :
   on l'écarte du bouton pour retrouver la respiration de la maquette. */
.kl-section-hero-home .kl-to-bottom { bottom: -155px; }

/* --- Paliers : l'escalier se resserre puis s'efface ------------------- */
@media (max-width: 1599.98px) {
    .kl-hero__titre { width: 64%; }
    .kl-hero__titre .kl-hero__ligne .kl-hero__accroche { width: 240px; }
    .kl-hero__titre .kl-hero__ligne .kl-hero__accroche,
    .kl-hero__titre .kl-hero__ligne .kl-hero__accroche span { font-size: 18px; }
}
@media (max-width: 1399.98px) {
    .kl-section-hero-home { padding: 150px 0 150px; }
    .kl-hero__cta { margin-top: 110px; }
    .kl-section-hero-home .kl-to-bottom { bottom: -80px; }
}
@media (max-width: 1199.98px) {
    .kl-hero__titre { width: 78%; }
    .kl-hero__titre .kl-hero__ligne .kl-hero__accroche { width: 210px; }
    .kl-hero__titre .kl-hero__ligne .kl-hero__accroche,
    .kl-hero__titre .kl-hero__ligne .kl-hero__accroche span { font-size: 17px; }
}
/* Sous 992 px, plus de place pour l'escalier ni pour loger l'accroche dans
   le creux : tout repasse en colonne, alignée à gauche. */
@media (max-width: 991.98px) {
    .kl-section-hero-home { padding: 70px 0 90px; }
    .kl-hero__titre {
        width: 100%;
        align-items: flex-start;
        /* Le thème centre le hero en mobile : on reprend l'alignement à gauche. */
        text-align: left;
    }
    .kl-hero__ligne { white-space: normal; }
    /* La ligne du milieu s'efface comme boîte : ses deux enfants deviennent
       des éléments du titre. L'accroche peut alors passer en dernier, au lieu
       de s'intercaler entre « les sens » et « du travail. ». */
    .kl-hero__ligne--debut { display: contents; }
    .kl-hero__titre .kl-hero__ligne .kl-hero__accroche {
        order: 9;
        display: block;
        width: auto;
        max-width: 34ch;
        margin: 26px 0 0;
    }
    .kl-hero__titre .kl-hero__ligne .kl-hero__accroche,
    .kl-hero__titre .kl-hero__ligne .kl-hero__accroche span { font-size: 17px; }
    .kl-hero__cta { margin-top: 44px; text-align: left; }
}

/* --- Pétales décoratifs de la section Témoignages -------------------
   Ils débordent franchement de la section, l'un en haut à gauche, l'autre
   en bas à droite. La section les rogne (overflow), et ils passent sous le
   contenu pour ne jamais gêner les flèches du carrousel. */
.kl-section-temoignages {
    position: relative;
    overflow: hidden;
}
.kl-section-temoignages > .container { position: relative; z-index: 1; }
.kl-temoignages-petale {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    width: 370px;
    height: auto;
}
/* Les deux fichiers sont déjà orientés par la graphiste : aucune rotation
   à appliquer, seulement le débordement que la section rogne. */
/* Débordements relevés sur la maquette : à gauche on voit le haut du
   guillemet sur environ 330 x 530 px, à droite son pied sur 330 x 390. */
.kl-temoignages-petale--gauche {
    top: -230px;
    left: -40px;
}
.kl-temoignages-petale--droite {
    bottom: -367px;
    right: -40px;
}
@media (max-width: 1399.98px) {
    .kl-temoignages-petale { width: 290px; }
    .kl-temoignages-petale--gauche { top: -180px; left: -30px; }
    .kl-temoignages-petale--droite { bottom: -290px; right: -30px; }
}
/* Sous 992 px la colonne de texte occupe toute la largeur : les pétales
   passeraient derrière la citation. On les retire. */
@media (max-width: 991.98px) {
    .kl-temoignages-petale { display: none; }
}

/* @V2-CSS-END */