/* ===========================================================================
   G&G Hosting Service — base de connaissances
   ===========================================================================
   Chargée par le hook sur knowledgebase, knowledgebasecat et
   knowledgebasearticle, par-dessus gg-sombre.css.

   Le corps d'article (.gg-prose) n'est PAS ici : il est dans la couche
   partagée depuis ce lot, le fil d'actualité et la base de connaissances
   rendant tous deux du HTML d'éditeur.
   =========================================================================== */


/* ===========================================================================
   1. Recherche
   =========================================================================== */
.gg-kb-rech {
    margin-bottom: 28px;
}
.gg-kb-rech .form-control {
    background-color: var(--gg-surface);
    border: 1px solid var(--gg-line);
    color: var(--gg-text);
    font-size: 1rem;
    height: auto;
    padding: 13px 16px;
}
.gg-kb-rech .form-control::placeholder {
    /* #8A8A8A sur #232120 : 4,66. Recalculé pour CE fond — le même gris donne
       3,93 sur #2E2E2E, l'erreur déjà faite au lot 7. */
    color: #8A8A8A;
    opacity: 1;
}
.gg-kb-rech .form-control:focus {
    background-color: var(--gg-surface);
    border-color: #FF6C3A;
    color: var(--gg-text);
    box-shadow: 0 0 0 3px rgba(255, 108, 58, .24);
}
.gg-kb-rech .btn {
    padding-left: 24px;
    padding-right: 24px;
    white-space: nowrap;
}


/* ===========================================================================
   2. Catégories
   ===========================================================================
   Le conteneur est un <div> et non un <a> : le bouton d'édition en est le
   frère, pas l'enfant (voir l'en-tête de includes/kb-categories.tpl). La
   carte reste entièrement cliquable grâce au lien étiré ci-dessous.
   =========================================================================== */
.gg-kb-cats {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-bottom: 36px;
}

.gg-kb-cat {
    position: relative;          /* référence du lien étiré */
    background: var(--gg-surface);
    border: 1px solid var(--gg-line);
    border-radius: 9px;
    padding: 18px 20px;
    transition: border-color .14s ease, transform .14s ease;
}
.gg-kb-cat:hover {
    border-color: #FF6C3A;
    transform: translateY(-2px);
}
/* Lien étiré : le <a> ne contient que du texte — HTML valide — mais sa zone
   cliquable couvre toute la carte. Le contour de focus est porté par la
   carte, sinon il ne dessinerait qu'autour du titre. */
.gg-kb-cat__l {
    text-decoration: none;
}
.gg-kb-cat__l::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 9px;
}
.gg-kb-cat:focus-within {
    outline: 2px solid #FF6C3A;
    outline-offset: 2px;
}
.gg-kb-cat__l:hover,
.gg-kb-cat__l:focus {
    text-decoration: none;
}

.gg-kb-cat__t {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--f-head);
    font-weight: 700;
    font-size: 1rem;
    color: var(--gg-text);                    /* 16,03 */
    padding-right: 72px;                      /* place du compteur */
}
.gg-kb-cat__t i {
    color: #FF9470;
    font-size: .9rem;
    flex: none;
}
.gg-kb-cat__d {
    display: block;                           /* c'est un <span> : sans ça, pas de marge */
    margin-top: 7px;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--gg-muted);                   /* 8,08 */
}

/* Le compteur d'articles. Le parent emploie `.badge-info float-right` ; ici
   une pastille discrète, posée hors du lien pour rester en place. */
.gg-kb-cat__nb {
    position: absolute;
    top: 18px;
    right: 20px;
    font-family: var(--f-head);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--gg-faint);                   /* 5,76 */
    white-space: nowrap;
}


/* ===========================================================================
   3. Sections et listes d'articles
   =========================================================================== */
/* .gg-kb-sec et .gg-kb-sec__t sont dans gg-sombre.css : l'état du réseau
   emploie le même intertitre de section, et ne charge pas cette feuille. */

.gg-kb-arts {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* `.list-group-item` est conservée sur chaque ligne (le JavaScript du thème
   vise `.kb-article-item`, mais la classe Bootstrap arrive avec). On annule
   donc son fond blanc et ses bordures d'origine. */
body .gg-kb-art.list-group-item {
    position: relative;
    background: var(--gg-surface);
    border: 1px solid var(--gg-line);
    border-radius: 8px;
    padding: 14px 18px;
    transition: border-color .14s ease;
}
body .gg-kb-art.list-group-item:hover {
    border-color: var(--gg-surface-3);
}
.gg-kb-art:focus-within {
    outline: 2px solid #FF6C3A;
    outline-offset: 2px;
}

.gg-kb-art__l {
    text-decoration: none;
}
.gg-kb-art__l::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
}
.gg-kb-art__l:hover,
.gg-kb-art__l:focus {
    text-decoration: none;
}

.gg-kb-art__t {
    display: flex;
    align-items: baseline;
    gap: 9px;
    font-weight: 600;
    font-size: .95rem;
    color: var(--gg-text);                    /* 16,03 */
}
.gg-kb-art__t i {
    color: var(--gg-faint);
    font-size: .82rem;
    flex: none;
}
.gg-kb-art:hover .gg-kb-art__t {
    color: #FF9470;
}
/* L'extrait est du HTML d'éditeur tronqué : on neutralise les marges des
   paragraphes qu'il contient et on masque les images, sinon une illustration
   se retrouverait dans une liste. */
.gg-kb-art__e {
    display: block;
    margin-top: 4px;
    padding-left: 23px;                       /* aligné sous le titre, pas sous l'icône */
    font-size: .82rem;
    line-height: 1.5;
    color: var(--gg-muted);                   /* 8,08 */
}
.gg-kb-art__e > :first-child { margin-top: 0; }
.gg-kb-art__e > :last-child { margin-bottom: 0; }
.gg-kb-art__e img { display: none; }

/* .gg-kb-vide est dans gg-sombre.css, même raison. */


/* Bouton d'édition, visible aux administrateurs seulement. Au-dessus du lien
   étiré, sinon il serait inatteignable. */
.gg-kb-edit {
    position: relative;
    z-index: 1;
}
.gg-kb-cat .gg-kb-edit,
.gg-kb-art .gg-kb-edit {
    margin-top: 10px;
}


/* ===========================================================================
   4. L'article
   =========================================================================== */
.gg-kb-page {
    display: block;
    padding-bottom: 8px;
}
.gg-kb-head {
    padding: 8px 0 20px;
    border-bottom: 1px solid var(--gg-line-soft);
    margin-bottom: 24px;
}
.gg-kb-head__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}
/* Pousse les boutons d'action à droite quand la place le permet. */
.gg-kb-head__sp {
    flex: 1 1 auto;
}
.gg-kb-utile {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    color: var(--gg-faint);                   /* 5,76 */
    font-variant-numeric: tabular-nums;
}

.gg-kb-vote {
    margin-top: 32px;
    padding: 20px;
    background: var(--gg-surface);
    border: 1px solid var(--gg-line);
    border-radius: 9px;
}
.gg-kb-vote__q {
    font-family: var(--f-head);
    font-weight: 700;
    font-size: .95rem;
    color: var(--gg-text);
    margin: 0 0 12px;
}
.gg-kb-vote form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.gg-kb-retour {
    margin: 32px 0 8px;
}


/* ===========================================================================
   5. Adaptations mobiles
   Plancher de 375 px, comme partout : c'est le téléphone majoritaire sur le
   marché visé.
   =========================================================================== */
@media (max-width: 575px) {
    .gg-kb-cat__t {
        padding-right: 0;
    }
    /* Au-dessus du titre plutôt qu'en absolu : sur 375 px, le compteur
       chevaucherait un nom de catégorie un peu long. */
    .gg-kb-cat__nb {
        position: static;
        display: block;
        margin-bottom: 6px;
    }
    .gg-kb-head__meta {
        gap: 8px;
    }
    .gg-kb-head__sp {
        display: none;
    }
    .gg-kb-rech .btn {
        padding-left: 16px;
        padding-right: 16px;
    }
}


/* ===========================================================================
   6. TÉLÉCHARGEMENTS
   ===========================================================================
   downloads.tpl et downloadscat.tpl réutilisent les composants ci-dessus :
   même recherche, mêmes cartes de catégorie, même liste. Seule la ligne de
   fichier diffère — elle porte un poids et une éventuelle restriction.
   =========================================================================== */
.gg-kb-fic {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.gg-kb-fic .gg-kb-art__l {
    flex: 1 1 auto;
    min-width: 0;
}
/* $download.type est une balise <img> produite par WHMCS. Le parent y glisse
   une classe par substitution de chaîne — on l'habille ici plutôt. */
.gg-kb-fic__t img {
    width: 16px;
    height: auto;
    margin-right: 2px;
    vertical-align: -2px;
}
.gg-kb-fic__m {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    position: relative;
    z-index: 1;               /* au-dessus du lien étiré */
}
.gg-kb-fic__p {
    font-size: .78rem;
    color: var(--gg-faint);   /* 5,76 */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 575px) {
    .gg-kb-fic {
        flex-direction: column;
        gap: 8px;
    }
}

/* Nom de la catégorie, dans .gg-kb-cat__t. Même raison que .gg-hero__copy :
   déclaré pour que rangement.py ne le signale pas comme oublié. */
.gg-kb-cat__n {
    min-width: 0;
}