/* Base de connaissances — reprise de la présentation en cartes de la
   référence AC Consultance, adaptée au gabarit LuxHawk.
   Polices auto-hébergées, aucune ressource externe. */

/* Le titre et son chapeau sont resserres, et le chapeau prend toute la largeur.
   Avec 70ch et 32px sous le titre, la premiere rangee de cartes commencait trop
   bas : a 100 % de zoom, on ne voyait pas les trois blocs sans defiler. */
.page-head {
    margin-bottom: 16px;
}

.page-head h1 {
    margin-top: 0;
    margin-bottom: 12px;
}

.page-lead {
    max-width: none;
    margin: 0 0 24px;
    color: #444;
    font-size: 1.05rem;
    /* 18 septembre 2026 : le meme interligne que le corps (`.editorial-body p`,
       1,55) — le chapeau valait `normal`, soit 1,2, et se lisait trop serre
       au-dessus d un corps a 1,7 (capture annotee d Arnaud, « A propos »). */
    line-height: 1.55;
    text-align: justify;
    /* 16 septembre 2026 : le chapeau est justifie sans cesure depuis le 30 aout,
       et l'accroche de D95 fait quatre lignes de plus. Mesure a 390 px sur
       /formation : « LuxHawk    propose    des    formations », des rivieres
       blanches d'un tiers de ligne. Meme regle que `.editorial-body p` : la
       cesure (`lang` est pose sur `<html>`), et sur telephone on ne justifie
       plus du tout — une colonne de 359 px n'a pas la place d'etirer. */
    hyphens: auto;
    text-wrap: pretty;
}

/* Filtres par thème */

.kb-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
}

.kb-filter {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid #16181d;
    border-radius: 0;
    color: #16181d;
    text-decoration: none;
    font-weight: 500;
    background: transparent;
}

.kb-filter.is-active,
.kb-filter:hover,
.kb-filter:focus-visible {
    background: #16181d;
    color: #fff;
}

/* Grille de cartes */

.kb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.kb-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #d7dae0;
    padding: 20px;
}

.kb-card-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}

/* La duree a droite de l etiquette, pas collee a elle : « le 3h30, il est un
   peu moche, pourquoi on le mettrait pas a droite » — Arnaud, 18 septembre
   2026, sur le catalogue. */
.kb-card-meta .kb-minutes {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.kb-tag {
    border: 1px solid #d7dae0;
    padding: 2px 8px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.kb-minutes {
    color: #5b6270;
    font-size: 0.85rem;
}

.kb-card-title {
    font-size: 1.15rem;
    line-height: 1.3;
    margin: 0 0 12px;
}

.kb-card-title a {
    color: #16181d;
    text-decoration: none;
}

.kb-card-title a:hover,
.kb-card-title a:focus-visible {
    text-decoration: underline;
}

/* Le resume est tronque par des points de suspension au-dela de six lignes.
   C est lui qui fait varier la hauteur des cartes : une description longue
   poussait la carte entiere hors de l ecran, et la suivante restait courte.
   Le texte complet vit sur la fiche — ici on donne envie de l ouvrir. */
.kb-card-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    overflow: hidden;
    color: #444;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 20px;
    flex: 1;
    text-align: justify;
    text-wrap: pretty;
}

.kb-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid #eceef1;
    padding-top: 12px;
}

.kb-updated {
    color: #5b6270;
    font-size: 0.82rem;
}

.kb-open {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #16181d;
    font-weight: 500;
    text-decoration: none;
}

.kb-empty {
    border: 1px solid #d7dae0;
    background: #fff;
    padding: 24px;
    color: #5b6270;
}

/* Article */

.kb-back a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #5b6270;
    text-decoration: none;
}

.kb-article {
    max-width: 75ch;
}

.kb-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    color: #5b6270;
    font-size: 0.9rem;
    margin-bottom: 24px;
}

.kb-summary {
    border-left: 4px solid #16181d;
    background: #f4f5f7;
    padding: 16px 20px;
    margin-bottom: 32px;
}

.kb-summary h2 {
    font-size: 1rem;
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kb-summary p {
    margin: 0;
}

.kb-body h2 {
    font-size: 1.3rem;
    margin: 40px 0 12px;
}

.kb-body h3 {
    font-size: 1.1rem;
    margin: 28px 0 8px;
}

/* Format canon d un article : une colonne de 75ch, des paragraphes justifies,
   et une coupure des mots pour que la justification ne creuse pas de rivieres
   blanches. Sans `hyphens`, justifier un texte francais en colonne etroite
   produit des espaces enormes entre les mots — c est pire que le drapeau. */
.kb-body p,
.kb-body li,
.kb-summary p {
    color: #333;
    line-height: 1.65;
    text-align: justify;
    hyphens: auto;
    text-wrap: pretty;
}

/* Une liste justifiee n a pas de sens : ses lignes sont courtes et
   independantes. Seuls les paragraphes le sont. */
.kb-body li {
    text-align: left;
}

/* 18 septembre 2026, mesure a 390 px sur l article de la GTB en anglais : la
   liste « Sources » affiche des adresses en clair, et une adresse de 64
   caracteres sans espace (limessecurity.com/en/a-new-twist-in-the-knxlock…)
   ne se coupe pas. Le <li> prend alors sa largeur minimale, l article suit
   (467 px dans 390), et `overflow-x: hidden` sur le body coupe la colonne a
   droite sans ascenseur : le lecteur perd la fin de chaque ligne. `anywhere`
   autorise la coupure au milieu d une adresse ; le texte courant, lui, garde
   ses cesures normales. */
.kb-body a,
.kb-body li,
.kb-body p {
    overflow-wrap: anywhere;
}

.kb-body ul {
    padding-left: 20px;
}

.kb-body a {
    color: #16181d;
}

@media (max-width: 768px) {
    .page-lead,
    .kb-card-excerpt,
    .kb-body p,
    .kb-body li,
    .kb-summary p,
    .formation-block p {
        text-align: left;
    }

    .kb-grid {
        grid-template-columns: 1fr;
    }

    .kb-article {
        max-width: none;
    }
}

/* Page Formation */

/* Le texte des cartes est reduit de deux crans : a taille egale, une fiche de
   formation porte deux fois plus d information qu un article de connaissances,
   et la carte debordait. */
.page-formation .kb-card-title {
    font-size: 1.05rem;
}

.page-formation .kb-card-excerpt,
.page-formation .formation-facts,
.page-formation .kb-card-footer {
    font-size: 0.86rem;
}

/* La mention du certificat etait collee au filet du dessus. */
.formation-credential {
    margin-top: 14px;
}

/* L inscription annonce, le bouton agit : ils se lisaient comme deux
   informations de meme poids, et « Voir la fiche » ne ressemblait pas a un
   bouton. Empiles, la hierarchie se voit. */
/* Les deux boutons centres dans la carte — « j'aurais centre les boites sur
   la page blanche », Arnaud, 17 septembre 2026. */
.formation-card-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.formation-sheet-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid #16181d;
    border-radius: 0;
    background: #16181d;
    color: #ffffff;
    font-weight: 500;
    text-decoration: none;
}

.formation-sheet-button:hover,
.formation-sheet-button:focus-visible {
    opacity: 0.85;
}

/* Les blocs sous les cartes prennent toute la largeur, comme le chapeau, et
   respirent au-dessus. Coinces a 75ch sous une grille pleine largeur, ils
   donnaient une page en escalier. */
.formation-block {
    max-width: none;
    margin-bottom: 32px;
}

.formation-block:first-of-type {
    margin-top: 40px;
}

.formation-block h2 {
    font-size: 1.3rem;
    margin: 0 0 12px;
}

.formation-block p,
.formation-block li {
    color: #333;
    line-height: 1.65;
    text-align: justify;
    hyphens: auto;
    text-wrap: pretty;
}

.formation-block li {
    text-align: left;
}

.formation-block ul {
    padding-left: 20px;
}

.formation-cta {
    margin-top: 20px;
}

.formation-todo {
    display: inline-block;
    border: 1px solid #d7dae0;
    background: #f4f5f7;
    padding: 6px 12px;
}

.formation-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    margin: 0 0 16px;
    font-size: 0.9rem;
}

.formation-facts dt {
    color: #5b6270;
}

.formation-facts dd {
    margin: 0;
}

/* La fiche de formation — B4.11, 10 septembre 2026. */

/* Le sous-titre traduit, sous le titre — traduit lui aussi depuis le 18
   septembre 2026 (D100, qui renverse D64) : c est la ligne qui dit a qui la
   formation s adresse. */
.formation-subtitle {
    margin: 4px 0 14px;
    font-size: 1.1rem;
    color: #444;
    font-style: italic;
}

.formation-fiche ol {
    padding-left: 22px;
}

.formation-fiche li + li {
    margin-top: 6px;
}

/* La note de prevalence du catalogue : presente, pas insistante. */
.formation-fiche-note {
    margin-top: 14px;
    font-size: 0.86rem;
    color: #555;
}

/* La meme note dans le pied de carte (l intitule au catalogue, hors
   francais, D100) : le pied est une colonne centree (ci-dessus), et la ligne
   n y est centree que tant qu elle tient sur une ligne — repliee (telephone,
   tablette : mesure a 390 et 768 px), le paragraphe prend toute la largeur
   et ses lignes partent du bord gauche sous un bouton centre. Et ce <p> est
   le dernier enfant de la carte : sa marge basse d agent utilisateur (1 em)
   s ajoutait aux 20 px de rembourrage, la carte finissait 14 px plus bas
   qu en francais. */
.formation-card-footer .formation-fiche-note {
    margin-bottom: 0;
    text-align: center;
}

/* Les cartes du catalogue en blocs courts — B4.13, 10 septembre 2026. Le
   paragraphe justifie et tronque a six lignes ne se lisait pas ; trois lignes
   nommees se lisent.

   18 septembre 2026, capture annotee d Arnaud sur /formation : « je trouve
   dommage qu on ait des zones completement blanches » — les croix sur la
   colonne des libelles (« Pour », « Situation traitee », « Apres la seance »),
   qui laissait un tiers de la carte vide sous chaque libelle, et « la, c est
   pas justifie ». Le libelle passe AU-DESSUS de son texte, en petites
   capitales, et le texte prend toute la largeur de la carte, justifie avec
   cesure comme le reste du site. Mesure avant : 344 px pour les trois blocs,
   une carte de 766 px a 1604 x 767 — il fallait dezoomer pour voir les trois
   cartes. */
.formation-brief {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px 0;
    margin: 0 0 16px;
    font-size: 0.9rem;
    line-height: 1.45;
    flex: 1;
}

.formation-brief dt {
    color: #5b6270;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 8px;
}

.formation-brief dt:first-child {
    margin-top: 0;
}

.formation-brief dd {
    margin: 0;
    color: #333;
    text-align: justify;
    hyphens: auto;
    text-wrap: pretty;
}

/* Sur telephone, on ne justifie plus — la meme regle que editorial.css. */
@media (max-width: 768px) {
    .formation-brief dd {
        text-align: left;
    }
}

.page-formation .kb-card-excerpt,
.page-formation .formation-block p {
    text-align: left;
}

.page-formation .formation-subtitle {
    font-size: 0.95rem;
    margin: -6px 0 12px;
}

/* Le second bouton d une carte : meme forme, un filet au lieu du plein. */
.formation-sheet-button-quiet {
    background: #ffffff;
    color: #16181d;
}

/* Les illustrations du centre de connaissances — 18 septembre 2026.
   « Ce qui est dommage, c est qu il n y a pas d illustrations » (Arnaud). Des
   SVG du depot, dans la charte, cles par le slug francais (IllustrationExtension).
   Meme rapport 16:9 partout, pour que les cartes gardent la meme hauteur ; le
   dessin est decoratif, il ne porte ni lien visible ni texte alternatif. */
.kb-card-figure {
    display: block;
    margin: -20px -20px 14px;
    border-bottom: 1px solid #d7dae0;
    background: #f4f6fa;
    line-height: 0;
}

.kb-card-figure img,
.kb-article-figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

.kb-article-figure {
    margin: 0 0 22px;
    border: 1px solid #d7dae0;
    background: #f4f6fa;
    line-height: 0;
}