/* ============================================================================
   Site public — la coquille, et elle seule.

   Le corps des articles vient de `kit.css` (partagé avec l'application),
   l'encadrement de `ui.css` (propre au site). Reste ici ce qui n'a pas
   d'équivalent du tout dans l'application, faute d'objet : l'en-tête, le pied,
   la colonne du plan, le tiroir des petits écrans, le fil d'Ariane.

   Rien de ce fichier n'a donc de jumeau côté in-app, contrairement à `ui.css` :
   c'est le seul endroit du manuel où l'on peut écrire sans se demander ce que
   ça fait à l'autre canal.
   ========================================================================== */

/* ============================ EN-TÊTE ============================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--s0);
    border-bottom: 1px solid var(--s200);
}

.site-header__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.site-header__left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* Le bouton du tiroir : sans lui, le plan n'a aucune porte sous 1024 px. */
.site-header__burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    padding: 0;
    background: transparent;
    border: 1px solid var(--s200);
    border-radius: 9px;
    color: var(--s600);
    font-size: 14px;
    cursor: pointer;
}

.site-header__burger:hover {
    background: var(--s100);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--ink);
}

.brand img {
    height: 26px;
    display: block;
}

.brand span {
    font-family: var(--font-label);
    font-size: 12px;
    color: var(--s500);
    letter-spacing: .08em;
    text-transform: uppercase;
    padding-top: 3px;
}

.country-switch {
    display: flex;
    gap: 6px;
}

.country-switch a {
    font-family: var(--font-label);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-decoration: none;
    color: var(--s500);
    border: 1px solid var(--s300);
    border-radius: 9999px;
    padding: 4px 12px;
    line-height: 1.4;
}

.country-switch a.on {
    color: #fff;
    background: var(--blue-500);
    border-color: var(--blue-500);
    font-weight: 600;
}

/* ============================ GABARIT ============================ */

/* La largeur du site est passée de 1240 à 1400 px avec la refonte : le plan a
   gagné une colonne plus large, l'article un rail d'ancres, et les deux se
   payaient jusque-là sur la colonne de lecture. */
.layout {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
}

/* Contenu calé à gauche, et non centré dans ce qui reste : sans cela, l'accueil
   (colonne de 920 px) et un article (colonne pleine) ne commencent pas au même
   endroit, et la page saute d'un cran à chaque navigation.

   `flex: 1` n'est pas décoratif : sans lui, la colonne est dimensionnée sur son
   contenu — une liste de résultats aux titres courts la fait rétrécir sous sa
   largeur maximale, et la page se resserre au fil de la frappe. */
.layout .wrap {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0;
}

@media (min-width: 1280px) {
    .wrap--article {
        max-width: none;
    }
}

/* `hidden` ne suffit pas sur un élément à qui l'on a donné un `display` : le
   masquage de l'agent utilisateur perd contre notre propre règle. */
.doc-sections[hidden],
.doc-results[hidden] {
    display: none;
}

/* ============================ COLONNE DU PLAN ============================ */

.docs-side {
    flex: 0 0 288px;
    position: sticky;
    top: 60px;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    padding: 0 8px 44px 24px;
    scrollbar-width: none;
}

.docs-side::-webkit-scrollbar {
    display: none;
}

/* Le point de couleur devant chaque titre : c'est ce qui remplace, ici, le
   groupement par nature du plan in-app — le site garde ses groupes de lecture
   comme intertitres, la nature se lit sur la puce. */
.docs-side .doc-acc__link {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.docs-side .doc-acc__link .doc-type-dot {
    position: relative;
    top: -1px;
}

/* Sous 1024 px, le plan devient un tiroir. Il reste dans la page — tous ses
   liens avec lui, c'est le maillage interne du manuel — mais il se pose
   par-dessus le contenu au lieu de le pousser. */
@media (max-width: 1023px) {
    .site-header__burger {
        display: inline-flex;
    }

    .docs-side {
        position: fixed;
        top: 60px;
        left: 0;
        bottom: 0;
        z-index: 40;
        width: min(320px, 86vw);
        max-height: none;
        padding: 0 12px 32px;
        background: var(--s50);
        border-right: 1px solid var(--s200);
        transform: translateX(-102%);
        transition: transform .18s ease;
    }

    .docs-side--open {
        transform: translateX(0);
    }

    .docs-side__scrim {
        position: fixed;
        inset: 60px 0 0;
        z-index: 39;
        background: rgba(15, 23, 42, .35);
    }
}

/* Suivre une ancre doit poser l'intertitre **sous** ce qui surplombe la page,
   pas dessous. Deux valeurs, parce qu'il n'y a pas la même chose au-dessus :
   l'en-tête et la barre d'ancres jusqu'à 1280 px, l'en-tête seul au-delà —
   c'est là que la barre laisse la place au rail. */
.doc-art-body h2,
.doc-art-body h3 {
    scroll-margin-top: 150px;
}

@media (min-width: 1280px) {

    .doc-art-body h2,
    .doc-art-body h3 {
        scroll-margin-top: 84px;
    }
}

/* ============================ FIL D'ARIANE ============================ */

.crumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 12.5px;
    color: var(--s400);
}

.crumb a {
    color: var(--s500);
    text-decoration: none;
}

.crumb a:hover {
    color: var(--doc-accent);
}

.crumb .cur {
    color: var(--s600);
}

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

/* L'icône du champ. L'application la tient de PrimeNG ; ici elle est posée à la
   main, d'où ce positionnement — le padding gauche du champ lui fait sa place
   dans `ui.css`. */
.doc-search__icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--s400);
    pointer-events: none;
}

/* Le champ garde la croix de `type="search"` de Safari sans la mise en page de
   WebKit, qui lui impose sa propre hauteur. */
.doc-search__field input::-webkit-search-decoration {
    -webkit-appearance: none;
}

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

.doc-results {
    margin-bottom: 40px;
}

/* Recherche sans réponse : le ton de l'application (`app-message` en `info`)
   n'existe pas ici, mais le message doit rester une information, pas un échec. */
.doc-empty {
    background: var(--s100);
    border-left: 3px solid var(--s400);
    border-radius: 12px;
    padding: 16px 20px;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--s600);
}

.doc-empty strong {
    color: var(--s900);
}

/* ============================ PIED ============================ */

.site-footer {
    border-top: 1px solid var(--s200);
    background: var(--s0);
}

.site-footer__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    align-items: center;
    justify-content: space-between;
    font-size: 13.5px;
    color: var(--s500);
}

.site-footer a {
    color: var(--s600);
}