/* ==========================================================================
   vbx-ka.css
   --------------------------------------------------------------------------
   Rôle     : Styles dédiés à la page Knowledge Article (fiche service).
              Ne contient que ce qui est spécifique à cette page.
              Les composants génériques (boutons, alertes, breadcrumb,
              accordéon) sont dans NEW_-_VBX_-_Components.css.

   Dépend de: vbx-tokens.css
              vbx-utilities.css
              vbx-components.css

   Namespace: vbx-ka__*
   Approche : Desktop-first — cohérent avec le reste du projet.
   --------------------------------------------------------------------------

   TABLE DES MATIÈRES
   ------------------
   1.  vbx-ka-page       — wrapper page
   2.  vbx-ka__top       — grid desktop 2 col / touch 1 col
   3.  vbx-ka__media     — image
   4.  vbx-ka__title     — titre H1
   5.  vbx-ka__meta      — dates création/modification
   6.  vbx-ka__alerts    — zone alertes contextuelles
   7.  vbx-ka__actions   — zone boutons d'action
   8.  vbx-ka__intro     — introduction + readmore
   9.  vbx-ka__content   — contenu accordéon rédactionnel (HTML Dynamics)
   10. Kiosk             — masquage/affichage selon mode borne
   11. Responsive        — @media (max-width: 1024px) mobile + tablette
   12. vbx-ka-sticky     — Barre sticky contextuelle
   ========================================================================== */


/* ==========================================================================
   1. vbx-ka-page — Wrapper de la page complète
   ========================================================================== */

.vbx-ka-page {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 950px;
    margin: 0 auto;
    padding: var(--vbx-space-lg) var(--vbx-space-xl);
    font-family: var(--vbx-font-family);
}


/* ==========================================================================
   2. vbx-ka__top — Grid desktop 2 colonnes
   ==========================================================================
   Desktop : image gauche (370px) | info droite (1fr)
   Touch   : 1 colonne, ordre modifié via order
             titre → dates → image → actions → intro

   column-gap uniquement : le row-gap est géré par margin-top sur chaque
   enfant de la colonne droite, pour éviter l'espace sur les divs vides
   (ex: vbx-ka__alerts vide qui générait du gap inutile).
   ========================================================================== */

.vbx-ka {
    display: flex;
    flex-direction: column;
}

.vbx-ka__top {
    display: grid;
    grid-template-columns: 370px 1fr;
    grid-template-rows: auto;
    column-gap: var(--vbx-space-lg);
    align-items: start;
    padding-bottom: var(--vbx-space-3xl); /* 40px — espace sous la zone top */
}

/* Colonne gauche : image s'étend sur toutes les lignes */
.vbx-ka__media {
    grid-column: 1;
    grid-row: 1 / 7;
}

.vbx-ka__header {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0;
}

/* Colonne droite : chaque élément sur sa propre ligne
   margin-top sur chaque enfant pour éviter le gap sur les divs vides */
.vbx-ka__title { grid-column: 2; }
.vbx-ka__meta { grid-column: 2; }
.vbx-ka__actions { grid-column: 2; margin-top: var(--vbx-space-lg); }
.vbx-ka__intro { grid-column: 2; margin-top: var(--vbx-space-lg); }


/* ==========================================================================
   3. vbx-ka__media — Image de l'article
   ========================================================================== */

.vbx-ka__image {
    width: 370px;
    height: 367px;
    border-radius: var(--vbx-radius-sm);
    background: var(--vbx-color-bg-secondary);
    object-fit: cover;
    object-position: 50% 50%;
    display: block;
}


/* ==========================================================================
   4. vbx-ka__title — Titre H1
   ========================================================================== */

.vbx-ka__title {
    font-size: var(--vbx-font-size-h1);        /* 32px */
    font-weight: var(--vbx-font-weight-bold);
    color: var(--vbx-color-text-primary);
    line-height: var(--vbx-line-height-h1);    /* 36px */
    margin: 0;
    letter-spacing: 0;
}


/* ==========================================================================
   5. vbx-ka__meta — Dates création / modification
   ========================================================================== */

.vbx-ka__meta {
    font-family: var(--vbx-font-family);
    font-size: var(--vbx-font-size-sm);        /* 13px */
    font-weight: var(--vbx-font-weight-normal);
    color: var(--vbx-color-text-primary);
    line-height: var(--vbx-line-height-body2); /* ~20px */
}


/* ==========================================================================
   6. vbx-ka__alerts — Zone alertes contextuelles
   ========================================================================== */

.vbx-ka__alerts {
    display: flex;
    flex-direction: column;
    gap: var(--vbx-space-sm);
}

/* Masquer la zone si elle ne contient aucune alerte */
.vbx-ka__alerts:not(:has(.vbx-c-alert)) {
    display: none;
}


/* ==========================================================================
   7. vbx-ka__actions — Zone boutons d'action
   ==========================================================================
   Les boutons utilisent vbx-c-btn (vbx-components.css).
   Espacement entre boutons : vbx-space-btn (10px — design system officiel).
   ========================================================================== */

.vbx-ka__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vbx-space-btn);
}

/* Bouton portail uniquement — caché sur borne kiosk */
.vbx-ka__action--portal-only {
    display: inline-flex;
}

/* Bouton borne uniquement — caché sur portail standard */
.vbx-ka__action--kiosk-only {
    display: none;
}


/* ==========================================================================
   8. vbx-ka__intro — Introduction + readmore
   ========================================================================== */

.vbx-ka__intro {
    font-size: var(--vbx-font-size-base);      /* 16px */
    color: var(--vbx-color-text-primary);
    line-height: var(--vbx-line-height-body);  /* 1.5 */
}

.vbx-ka__intro-text {
    overflow: hidden;
    max-height: 120px;     /* Tronquage immédiat dès le rendu CSS — évite le flash */
    transition: height var(--vbx-transition);
}

/*
   JS retire max-height et pose height exacte après mesure.
   Si le contenu ne dépasse pas 120px, JS retire max-height via .vbx-ka__intro-text--full.
*/
.vbx-ka__intro-text--full {
    max-height: none;
}


/* ==========================================================================
   8b. vbx-ka__readmore-link — Lien Lire plus / Lire moins
   ========================================================================== */

.vbx-ka__readmore-link {
    display: block;
    margin-top: var(--vbx-space-xs);           /* 10px */
    color: var(--vbx-color-primary);
    font-size: var(--vbx-font-size-md);        /* 14px */
    font-weight: var(--vbx-font-weight-semibold);
    text-decoration: underline;
}
.vbx-ka__readmore-link:hover {
    text-decoration: none;
}


/* ==========================================================================
   9. vbx-ka__content — Contenu rédactionnel Dynamics (HTML non contrôlé)
   ==========================================================================
   Styles défensifs sur le HTML produit par les rédacteurs dans Dynamics.
   ========================================================================== */

.vbx-ka__content {
    width: 100%;
}

/* Masquer l'introduction dupliquée dans le contenu */
.vbx-ka__content .IntroductionHiddenForPortal {
    display: none;
}

/* Masquer les données techniques Dynamics */
.vbx-ka__content #ccp_hiddentags {
    display: none;
}

/* Typographie générale du contenu rédactionnel */
.vbx-ka__content p {
    margin-bottom: var(--vbx-space-sm);
    line-height: var(--vbx-line-height-body);
    color: var(--vbx-color-text-primary);
}

.vbx-ka__content ul,
.vbx-ka__content ol {
    margin-left: var(--vbx-space-lg);
    margin-bottom: var(--vbx-space-sm);
}

.vbx-ka__content li {
    margin-bottom: var(--vbx-space-xs);
    line-height: var(--vbx-line-height-body);
}

.vbx-ka__content a {
    color: var(--vbx-color-primary);
    font-weight: var(--vbx-font-weight-semibold);
    text-decoration: underline;
}
.vbx-ka__content a:hover {
    text-decoration: none;
}

.vbx-ka__content b,
.vbx-ka__content strong {
    font-weight: var(--vbx-font-weight-bold);
}

/* Loader — masqué quand le contenu est chargé */
.vbx-ka__loader {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--vbx-space-xl) 0;
}

.vbx-ka__content--hidden {
    display: none;
}


/* ==========================================================================
   10. Kiosk — Mode borne (body.kiosk)
   ==========================================================================
   La classe body.kiosk est appliquée par le JS kiosk existant.
   ========================================================================== */

body.kiosk .vbx-ka__action--portal-only {
    display: none;
}

body.kiosk .vbx-ka__action--kiosk-only {
    display: inline-flex;
}


/* ==========================================================================
   11. Responsive — Mobile + Tablette (max-width: 1024px)
   ==========================================================================
   En dessous de 1025px : 1 colonne, ordre des éléments modifié.
   Titre et dates remontent au-dessus de l'image.
   ========================================================================== */

@media (max-width: 1024px) {
    .vbx-ka-page {
        width: 100%;
        padding: var(--vbx-space-md);
    }

    /* Passer en 1 colonne */
    .vbx-ka__top {
        grid-template-columns: 1fr;
        column-gap: 0;
        padding-bottom: var(--vbx-space-xl); /* 25px en mobile */
    }

    .vbx-ka__header {
        gap: var(--vbx-space-xs);
    }

    /* Réinitialiser grid-column et grid-row sur tous les enfants */
    .vbx-ka__media,
    .vbx-ka__header,
    .vbx-ka__actions,
    .vbx-ka__intro {
        grid-column: 1;
        grid-row: auto;
    }

    /* Réinitialiser les margin-top desktop */
    .vbx-ka__actions,
    .vbx-ka__intro {
        margin-top: 0;
    }

    /* Ordre mobile : titre → dates → image → actions → intro */
    .vbx-ka__header { order: 1; }
    .vbx-ka__media { order: 2; }
    .vbx-ka__actions { order: 3; }
    .vbx-ka__intro { order: 4; }

    /* Espacement vertical entre les blocs en mobile via gap sur la grille */
    .vbx-ka__top {
        row-gap: var(--vbx-space-lg);
    }

    /* Image pleine largeur sur touch */
    .vbx-ka__image {
        width: 100%;
        height: 201px;
        border-radius: var(--vbx-radius-sm);
    }

    /* Boutons empilés pleine largeur sur touch */
    .vbx-ka__actions {
        flex-direction: column;
    }

    .vbx-ka__actions .vbx-c-btn {
        width: 100%;
        justify-content: space-between;
    }

    /* Icône fantôme côté droit — équilibre visuel quand une icône est présente à gauche */
    .vbx-ka__actions .vbx-c-btn.vbx-c-btn--icon-left::after {
        content: "";
        display: block;
        width: var(--vbx-space-lg);
        height: var(--vbx-space-lg);
        flex-shrink: 0;
    }
}

/* ==========================================================================
   12. vbx-ka-sticky — Barre sticky contextuelle
   ==========================================================================
   Desktop : titre + boutons — visible quand vbx-ka__actions sort du viewport
   Mobile  : boutons uniquement fixés en bas
   ========================================================================== */

.vbx-ka-sticky {
    display: flex;          /* toujours dans le DOM — outerHeight() fiable */
    visibility: hidden;     /* invisible mais hauteur calculable par le JS */
    opacity: 0;
    pointer-events: none;   /* non cliquable quand cachée */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--vbx-z-dropdown);
    padding: var(--vbx-space-lg) var(--vbx-space-2xl);
    justify-content: space-between;
    align-items: center;
    gap: var(--vbx-space-lg);
    border-bottom: 1px solid var(--vbx-color-border);
    background: var(--vbx-color-white);
    box-shadow: var(--vbx-shadow-sm);
    transition: opacity var(--vbx-transition), visibility var(--vbx-transition);
}

.vbx-ka-sticky.is-visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.vbx-ka-sticky__title {
    font-family: var(--vbx-font-family);
    font-size: var(--vbx-font-size-xl);       /* H3 — 20px */
    font-weight: var(--vbx-font-weight-semibold); /* H3 — 600 */
    line-height: var(--vbx-line-height-h3);   /* 24px */
    color: var(--vbx-color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.vbx-ka-sticky__actions {
    display: flex;
    align-items: center;
    gap: var(--vbx-space-btn);
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .vbx-ka-sticky {
        top: auto;
        bottom: 0;
        padding: var(--vbx-space-md);
        border-bottom: none;
        border-top: 1px solid var(--vbx-color-border);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    }

    .vbx-ka-sticky__title {
        display: none;
    }

    .vbx-ka-sticky__actions {
        width: 100%;
        flex-direction: column;
    }

    .vbx-ka-sticky__actions .vbx-c-btn {
        width: 100%;
        justify-content: center;
    }

    /* Icône à gauche + texte centré — même pattern que les boutons actions mobile */
    .vbx-ka-sticky__actions .vbx-c-btn.vbx-c-btn--icon-left {
        justify-content: space-between;
    }

    .vbx-ka-sticky__actions .vbx-c-btn.vbx-c-btn--icon-left::after {
        content: "";
        display: block;
        width: 1.2em;
        height: 1.2em;
        flex-shrink: 0;
    }
}