/* ============================================================================
   Site public — l'encadrement du manuel.

   Le corps d'un article est mis en page par `kit.css`, partagé avec
   l'application ; ce fichier-ci habille ce qu'il y a *autour* : plan, accueil,
   recherche, cartes de section, résultats, en-tête et sommaire d'un article,
   blocs de fin.

   ⚠️ **C'est le jumeau de `src/styles/documentation.scss`, et la duplication
   est délibérée** (arbitrage du 2026-08-11). Les deux canaux ont le même design
   mais pas le même terrain : palette PrimeNG contre tokens du kit, thème sombre
   contre rendu unique, racine à 12 px contre 16, composants PrimeNG contre HTML
   nu, panneau défilant contre page défilante. Une feuille unique tenait — au
   prix d'un pont de variables, d'un ordre de chargement à respecter dans
   `angular.json` et d'un serveur de développement à redémarrer pour voir ses
   propres styles. Deux copies coûtent moins cher que cet équilibre-là.

   **La règle qui remplace le partage** : une modification du design d'un canal
   oblige à *étudier* la même modification sur l'autre, dans le même mouvement.
   Elle viendra le plus souvent de l'in-app, où le design se décide. Étudier ne
   veut pas dire copier : la table de correspondance de
   [`PUBLIC.md`](../PUBLIC.md) § *Les deux feuilles jumelles* dit quel bloc
   répond à quel bloc, et ce qui diverge exprès.

   Trois règles de lecture :

   1. **Tout est préfixé `doc-` et confiné sous `.doc-ui`.** Les maquettes
      posent des classes très génériques (`.res`, `.dot`, `.card`) ; sans cette
      racine, elles se percuteraient.

   2. **Les valeurs sont en px**, les mêmes que côté application. Les maquettes
      sont écrites contre une racine à 16 px — celle de ce site — quand
      l'application tourne à 12 : un `30rem` de maquette y vaudrait 480 px et non
      360. Le px est le seul moyen que les deux canaux se ressemblent.

   3. **Les couleurs passent par les tokens du kit** (`--s0`…`--s900`,
      `--blue-*`, `--font-*`, `--sh*`), posés par `tokens.css`. Côté
      application, les mêmes règles sont écrites contre la palette du thème
      (`--surface-*`, `--primary-color`) : c'est la divergence assumée numéro un,
      et ce qui donne au manuel in-app son thème sombre.

   Ce qui n'est **pas** ici : l'en-tête, le pied et la coquille du site, dans
   `site.css`.
   ========================================================================== */

.doc-ui {
    /* La couleur de l'état courant. Le bleu du kit ici ; côté application, la
       couleur primaire du thème, qui change avec le mode sombre. */
    --doc-accent: var(--blue-500);

    /* Décalages des éléments collants : ce qui les surplombe est l'en-tête du
       site (60 px). Côté application, c'est la barre d'outils, et les valeurs
       n'ont aucune raison d'être les mêmes. */
    --doc-anchors-top: 60px;
    --doc-anchors-bg: var(--s50);
    --doc-rail-top: 78px;

    /* Code couleur des natures d'article — la seule source. */
    --doc-guide: var(--blue-500);
    --doc-guide-bg: var(--blue-50);
    --doc-guide-fg: var(--blue-700);
    --doc-comprendre: var(--green-500);
    --doc-comprendre-bg: var(--green-50);
    --doc-comprendre-fg: var(--green-700);
    --doc-reference: var(--s400);
    --doc-reference-bg: var(--s100);
    --doc-reference-fg: var(--s600);
    --doc-depannage: var(--yellow-500);
    --doc-depannage-bg: var(--yellow-50);
    --doc-depannage-fg: #92610a;
}

/* ============================ NATURE D'ARTICLE ============================ */

/* Le point seul : dans une ligne de question, un lien de fin, une citation. */
.doc-type-dot {
    width: 7px;
    height: 7px;
    border-radius: 9999px;
    flex: none;
    display: inline-block;
}

/* Un cran plus petit, à côté d'un libellé de groupe dans le plan. */
.doc-type-dot--sm {
    width: 6px;
    height: 6px;
}

/* Un cran plus gros, dans un filtre où il porte la légende de la couleur. */
.doc-type-dot--md {
    width: 8px;
    height: 8px;
}

/* La pastille : point + mot. Forme lisible, pour un contexte qui a la place. */
.doc-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    padding: 3px 10px 3px 8px;
    border-radius: 9999px;
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 10px;
    line-height: 1.6;
    white-space: nowrap;
}

.doc-type-dot--guide { background: var(--doc-guide) }
.doc-type-badge--guide { background: var(--doc-guide-bg); color: var(--doc-guide-fg) }
.doc-type-dot--comprendre { background: var(--doc-comprendre) }
.doc-type-badge--comprendre { background: var(--doc-comprendre-bg); color: var(--doc-comprendre-fg) }
.doc-type-dot--reference { background: var(--doc-reference) }
.doc-type-badge--reference { background: var(--doc-reference-bg); color: var(--doc-reference-fg) }
.doc-type-dot--depannage { background: var(--doc-depannage) }
.doc-type-badge--depannage { background: var(--doc-depannage-bg); color: var(--doc-depannage-fg) }

/* ============================ PLAN DU MANUEL ============================
   Accordéon : une section ouverte, les autres repliées. Les 189 articles du
   manuel, dépliés d'un bloc, ne se parcourent pas ; repliés, le plan tient à
   l'écran.

   Le plan est une carte détachée, sans bordure basse : il descend jusqu'au bas
   du panneau. Sa largeur, elle, est affaire de canal — le site lui donne une
   colonne fixe, l'application une part du panneau. */

.doc-plan__card {
    background: var(--s0);
    border: 1px solid var(--s200);
    border-radius: 14px;
    margin: 14px 0 14px 2px;
    padding: 12px 10px;
}

.doc-plan__home {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    margin-bottom: 6px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--s700);
    text-decoration: none;
    cursor: pointer;
}

.doc-plan__home i {
    font-size: 13px;
    color: var(--s400);
}

.doc-plan__home:hover {
    background: var(--s100);
}

.doc-plan__home--active {
    background: var(--blue-50);
    color: var(--doc-accent);
}

.doc-plan__home--active i {
    color: var(--doc-accent);
}

.doc-acc {
    border-bottom: 1px solid var(--s100);
}

.doc-acc:last-child {
    border-bottom: none;
}

/* `baseline` et non `center` : le compteur s'aligne sur la ligne de base du
   titre, même quand celui-ci passe sur deux lignes.
   Les quatre premières déclarations défont l'habillage du navigateur : côté
   site, l'en-tête d'accordéon est un `<button>` — c'est ce qui le rend
   actionnable au clavier — et un bouton arrive avec son cadre, son fond, sa
   police et son texte centré. Sans effet sur l'application, où c'est un `div`. */
.doc-acc__head {
    width: 100%;
    background: transparent;
    border: 0;
    font: inherit;
    text-align: left;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 11px 8px;
    cursor: pointer;
}

.doc-acc__title {
    flex: 1;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--s800);
}

.doc-acc__count {
    font-size: 11.5px;
    color: var(--s400);
}

.doc-acc__head:hover .doc-acc__title {
    color: var(--s900);
}

.doc-acc--open .doc-acc__title {
    color: var(--doc-accent);
}

/* Le repli se joue en CSS, pas en retirant les liens : sur le site public, les
   articles d'une section repliée restent dans la page — c'est le maillage
   interne du manuel, et il vaut pour les moteurs autant que pour le lecteur.
   L'application, elle, ne construit la liste qu'à l'ouverture ; la règle
   ci-dessous n'y a alors rien à masquer. */
.doc-acc__list {
    display: none;
    padding: 0 8px 12px;
}

.doc-acc--open .doc-acc__list {
    display: block;
}

.doc-acc__group {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 13px 0 5px 12px;
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 10px;
    color: var(--s400);
}

.doc-acc__link {
    display: block;
    padding: 6px 10px 6px 12px;
    border-left: 2px solid var(--s200);
    font-size: 13px;
    line-height: 1.45;
    color: var(--s600);
    text-decoration: none;
    cursor: pointer;
}

.doc-acc__link:hover {
    color: var(--s900);
    border-left-color: var(--s400);
}

.doc-acc__link--active {
    background: var(--blue-50);
    border-left-color: var(--doc-accent);
    border-radius: 0 7px 7px 0;
    color: var(--doc-accent);
    font-weight: 600;
}

/* ====================== EN-TÊTE DE L'ACCUEIL ====================== */

.doc-head__title {
    font-family: var(--font-title);
    font-weight: 500;
    font-size: 30px;
    letter-spacing: -.015em;
    color: var(--s900);
    margin: 0 0 6px;
}

.doc-head__lede {
    font-size: 16px;
    color: var(--s500);
    margin: 0 0 22px;
}

/* ============================ ACCUEIL — RECHERCHE ============================ */

.doc-search {
    display: flex;
    align-items: center;
    gap: 10px;
}

.doc-search__field {
    flex: 1;
    position: relative;
    display: block;
}

/* Le champ prend les mesures de la maquette. Côté application il reste un
   composant PrimeNG — modèle, accessibilité, icônes ; côté site un `<input>`
   nu. La règle vaut pour les deux : elle vise l'`input`, pas son emballage. */
.doc-ui .doc-search__field input {
    width: 100%;
    height: 46px;
    padding: 0 14px 0 40px;
    border-radius: 12px;
    border: 1px solid var(--s200);
    box-shadow: var(--sh1);
    font-size: 15px;
    font-family: inherit;
    color: var(--s900);
    background: var(--s0);
}

.doc-ui .doc-search__field input:focus {
    outline: none;
    border-color: var(--blue-200);
}

/* ==================== ACCUEIL — FILTRES PAR NATURE ====================
   Double rôle : la barre nomme les couleurs (personne ne devine qu'un point
   vert veut dire « comprendre ») et filtre les articles. */

.doc-type-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 16px 0 0;
}

.doc-type-bar__label {
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 10.5px;
    color: var(--s400);
    margin-right: 2px;
}

.doc-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 10px;
    border-radius: 9999px;
    border: 1px solid var(--s200);
    background: var(--s0);
    font-family: inherit;
    font-size: 12.5px;
    color: var(--s600);
    white-space: nowrap;
    cursor: pointer;
}

.doc-type-chip:hover {
    border-color: var(--s300);
    background: var(--s50);
}

.doc-type-chip__count {
    font-size: 11.5px;
    color: var(--s400);
}

/* Écart assumé à la maquette, qui remplissait la puce de noir : ici l'état
   coché se dit par la couleur d'accent, sur le texte et le trait. */
.doc-type-chip--on {
    border-color: var(--doc-accent);
    color: var(--doc-accent);
}

.doc-type-chip--on:hover {
    border-color: var(--doc-accent);
    background: var(--s0);
}

.doc-type-chip--on .doc-type-chip__count {
    color: var(--doc-accent);
}

/* ==================== ACCUEIL — CARTES DE SECTION ==================== */

.doc-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 24px;
}

/* Petit écran : les sections passent en rangée à défilement horizontal plutôt
   qu'en colonne unique — empilées, les douze cartes repoussent tout le reste de
   la page hors de l'écran. Le débord volontaire de la carte suivante est
   l'affordance : c'est lui qui dit qu'il y en a d'autres, l'ascenseur restant
   masqué comme partout dans la documentation. */
@media (max-width: 1279px) {
    .doc-sections {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .doc-sections::-webkit-scrollbar {
        display: none;
    }

    .doc-sec {
        flex: 0 0 clamp(240px, 78%, 380px);
        scroll-snap-align: start;
    }
}

.doc-sec {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--s0);
    border: 1px solid var(--s200);
    border-radius: 16px;
    padding: 18px 20px 16px;
    text-decoration: none;
    cursor: pointer;
}

.doc-sec:hover {
    border-color: var(--blue-200);
    box-shadow: var(--sh2);
}

.doc-sec__head {
    display: flex;
    align-items: center;
    gap: 11px;
}

.doc-sec__icon {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 10px;
    background: var(--blue-50);
    color: var(--blue-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.doc-sec__title {
    font-family: var(--font-title);
    font-weight: 500;
    font-size: 16.5px;
    color: var(--s900);
}

.doc-sec__desc {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--s500);
}

.doc-sec__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--s100);
}

.doc-sec__count {
    font-size: 12.5px;
    color: var(--s500);
}

/* Barre de proportions : la composition de la section d'un coup d'œil. */
.doc-mix {
    display: flex;
    align-items: center;
    gap: 3px;
}

.doc-mix i {
    display: block;
    height: 4px;
    border-radius: 2px;
}

/* ==================== ACCUEIL — RÉSULTATS ==================== */

.doc-res-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 22px 0 12px;
    font-size: 13px;
    color: var(--s500);
}

.doc-res-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.doc-res {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--s0);
    border: 1px solid var(--s200);
    border-radius: 12px;
    padding: 14px 16px;
    text-decoration: none;
    cursor: pointer;
}

.doc-res:hover {
    border-color: var(--blue-200);
    box-shadow: var(--sh1);
}

.doc-res__main {
    flex: 1;
    min-width: 0;
}

.doc-res__title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--s900);
    margin-bottom: 3px;
}

.doc-res__question {
    font-size: 13px;
    line-height: 1.55;
    color: var(--s500);
}

.doc-res__section {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    padding-top: 2px;
    font-size: 12px;
    color: var(--s400);
    white-space: nowrap;
}

.doc-res mark {
    background: var(--yellow-50);
    color: inherit;
    border-radius: 3px;
    padding: 0 1px;
}

/* ======================= EN-TÊTE D'UN ARTICLE ======================= */

.doc-art__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.doc-art__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--s500);
}

.doc-art__meta-icon {
    font-size: 11px;
}

.doc-art__title {
    font-family: var(--font-title);
    font-weight: 500;
    font-size: 32px;
    line-height: 1.22;
    letter-spacing: -.02em;
    color: var(--s900);
    margin: 0 0 10px;
}

.doc-art__lede {
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--s500);
    max-width: 62ch;
    margin: 0 0 22px;
}

/* ===================== CORPS ET BLOCS DE FIN D'ARTICLE ===================== */

.doc-art__body {
    margin: 24px 0 0;
}

.doc-end {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 46px;
}

@media (max-width: 1023px) {
    .doc-end {
        grid-template-columns: 1fr;
    }
}

.doc-end__card {
    background: var(--s0);
    border: 1px solid var(--s200);
    border-radius: 16px;
    padding: 16px 18px;
}

.doc-end__title {
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: 10.5px;
    color: var(--s400);
    margin-bottom: 12px;
}

.doc-end__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--s100);
    text-decoration: none;
    cursor: pointer;
}

.doc-end__card .doc-end__link:last-child {
    border-bottom: none;
}

.doc-end__link span {
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--s700);
}

.doc-end__link:hover span {
    color: var(--doc-accent);
}

/* ==================== ARTICLE — CORPS ET RAIL D'ANCRES ====================
   Deux formes pour la même liste d'intertitres : un rail à droite quand
   l'écran est large, une barre collante sous l'en-tête sinon. Jamais les deux
   à la fois — la bascule est purement CSS, le code ne connaît qu'une liste
   d'ancres et celle qui est active. */

.doc-art-layout {
    display: flex;
    align-items: flex-start;
    gap: 28px;
}

.doc-art-body {
    flex: 1;
    min-width: 0;
}

.doc-art-rail {
    width: 190px;
    flex: none;
    position: sticky;
    top: var(--doc-rail-top);
    padding-top: 6px;
}

@media (max-width: 1279px) {
    .doc-art-rail {
        display: none;
    }
}

.doc-rail__label {
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: 10.5px;
    color: var(--s400);
    margin-bottom: 10px;
}

.doc-rail__links {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.doc-rail__link {
    padding: 5px 10px;
    border-left: 2px solid var(--s200);
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--s500);
    text-decoration: none;
    cursor: pointer;
}

.doc-rail__link:hover {
    color: var(--s800);
    border-left-color: var(--s400);
}

.doc-rail__link--on {
    color: var(--doc-accent);
    border-left-color: var(--doc-accent);
    font-weight: 600;
}

/* Barre collante — la même liste, sous l'en-tête, quand le rail n'a pas la
   place. Le fond est **opaque** : translucide, il laissait lire le texte qui
   défile dessous, et deux textes superposés ne se lisent ni l'un ni l'autre. */
.doc-anchors {
    position: sticky;
    top: var(--doc-anchors-top);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 21px 0 9px;
    margin-bottom: 22px;
    background: var(--doc-anchors-bg);
    border-bottom: 1px solid var(--s200);
}

/* La piste défilante, ascenseur masqué : une barre de défilement en travers
   d'un fil de pastilles est laide, et n'apparaît qu'au survol — elle ne dirait
   donc pas ce qu'elle doit dire. Ce sont les chevrons qui le disent. */
.doc-anchors__track {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.doc-anchors__track::-webkit-scrollbar {
    display: none;
}

.doc-anchors__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 9999px;
    color: var(--s500);
    font-size: 11px;
    cursor: pointer;
    transition: opacity .15s ease, background .15s ease, color .15s ease;
}

.doc-anchors__nav:hover {
    background: var(--s100);
    color: var(--s800);
}

/* Au bout de la course : le chevron s'efface et cesse de répondre, plutôt que
   de disparaître — sa place reste prise, la liste ne se décale pas sous le
   doigt à chaque cran. */
.doc-anchors__nav--off {
    opacity: .25;
    pointer-events: none;
}

@media (min-width: 1280px) {
    .doc-anchors {
        display: none;
    }
}

.doc-anchors__link {
    flex: none;
    padding: 5px 12px;
    border-radius: 9999px;
    font-size: 12.5px;
    color: var(--s500);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.doc-anchors__link:hover {
    background: var(--s100);
    color: var(--s800);
}

/* Même écart que pour les filtres de nature : la maquette remplit de noir, on
   dit l'état courant par la couleur d'accent. */
.doc-anchors__link--on {
    background: var(--blue-50);
    color: var(--doc-accent);
    font-weight: 600;
}