/* ==========================================================================
   PAGES LÉGALES — mise en page type documentation
   Partagée par privacy.php, mentions_legales.php et conditions-location.php.

   Ces trois pages avaient chacune 250 à 640 lignes de CSS recopiées en ligne,
   avec trois habillages différents pour le même besoin. Tout est ici, servi
   une fois et mis en cache.

   Le parti pris : une doc, pas une plaquette. Colonne de navigation à gauche,
   texte au centre sur une largeur de lecture confortable, aucune ombre ni
   dégradé. Sur un document juridique, ce qui compte est de retrouver une
   clause et de la lire, pas l'effet visuel.

   Compatible Chromium 103 (tablette FiveM) : pas de :has(), pas de requêtes
   de conteneur, pas de text-wrap: balance.
   ========================================================================== */

:root {
    --doc-nav-h: 76px;
    /* Largeur de la colonne de gauche */
    --doc-aside-w: 268px;
    /* Largeur de lecture. Autour de 70-75 caractères par ligne : au-delà,
       l'œil peine à retrouver le début de la ligne suivante. */
    --doc-measure: 760px;

    --doc-bg: #0f0f10;
    --doc-surface: #151517;
    --doc-surface-hover: #1c1c1f;
    --doc-line: rgba(255, 255, 255, 0.08);
    --doc-line-strong: rgba(255, 255, 255, 0.14);

    --doc-text: #d7d7db;
    --doc-heading: #ffffff;
    --doc-muted: #8b8b93;
    --doc-accent: #e63946;
    --doc-accent-soft: rgba(230, 57, 70, 0.12);
}

body.doc-body {
    background: var(--doc-bg);
    color: var(--doc-text);
}

/* conditions-location.php n'affiche pas la navigation du site : elle est
   ouverte depuis un contrat ou une fenêtre du jeu, avec un simple bouton
   « Retour ». Il n'y a donc pas de barre fixe à compenser. La variable est
   redéfinie sur le body : elle prime alors sur :root pour toute la page,
   y compris sur les valeurs des media queries plus bas. */
body.doc-body.is-standalone {
    --doc-nav-h: 8px;
}

/* Bouton de retour des pages sans navigation de site. */
.doc-back {
    position: fixed;
    top: 1.25rem;
    left: 1.25rem;
    z-index: 950;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.95rem;
    background: var(--doc-surface);
    border: 1px solid var(--doc-line);
    border-radius: 8px;
    color: var(--doc-text);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.doc-back:hover {
    border-color: var(--doc-line-strong);
    color: var(--doc-heading);
}

.doc-back i {
    font-size: 0.78rem;
    color: var(--doc-accent);
}

@media (max-width: 1080px) {
    /* Le bouton retour et celui du sommaire se disputeraient le coin haut
       gauche : le retour repasse dans le flux, au-dessus du contenu. */
    .doc-back {
        position: static;
        margin-bottom: 1.25rem;
    }
}

/* ==========================================================================
   Ossature
   ========================================================================== */

.doc-layout {
    display: flex;
    align-items: flex-start;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1.5rem;
    /* La navigation du site est en position: fixed : sans cette marge, le haut
       du document passerait dessous. */
    padding-top: calc(var(--doc-nav-h) + 2.5rem);
}

/* --- Colonne de gauche ---------------------------------------------------- */

.doc-aside {
    flex: 0 0 var(--doc-aside-w);
    width: var(--doc-aside-w);
    position: sticky;
    top: calc(var(--doc-nav-h) + 1.5rem);
    /* Se replie sur elle-même si la liste dépasse la hauteur de l'écran. */
    max-height: calc(100vh - var(--doc-nav-h) - 3rem);
    overflow-y: auto;
    padding-right: 1.5rem;
    border-right: 1px solid var(--doc-line);
}

.doc-aside::-webkit-scrollbar {
    width: 6px;
}

.doc-aside::-webkit-scrollbar-thumb {
    background: var(--doc-line-strong);
    border-radius: 3px;
}

.doc-aside-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--doc-muted);
    margin-bottom: 0.85rem;
}

.doc-nav-list {
    list-style: none;
    margin: 0 0 1.75rem 0;
    padding: 0;
}

.doc-nav-list a {
    display: block;
    padding: 0.42rem 0.7rem;
    margin-bottom: 0.15rem;
    border-radius: 7px;
    color: var(--doc-text);
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.45;
    transition: background 0.15s ease, color 0.15s ease;
}

.doc-nav-list a:hover {
    background: var(--doc-surface-hover);
    color: var(--doc-heading);
}

.doc-nav-list a.is-current {
    background: var(--doc-accent-soft);
    color: #ff8a94;
    font-weight: 600;
}

/* Sommaire de la page courante, imbriqué sous le document actif — c'est ce
   décrochement qui rend la hiérarchie « document > section » lisible d'un
   coup d'œil. */
.doc-toc {
    list-style: none;
    margin: 0.35rem 0 0 0;
    padding: 0 0 0 0.7rem;
    border-left: 1px solid var(--doc-line);
}

.doc-toc a {
    display: block;
    padding: 0.32rem 0.6rem;
    border-radius: 6px;
    color: var(--doc-muted);
    text-decoration: none;
    font-size: 0.845rem;
    line-height: 1.5;
    /* Le repère de position active est un liseré à gauche : il se pose sur la
       bordure du bloc sans décaler le texte quand il apparaît. */
    box-shadow: inset 2px 0 0 transparent;
    margin-left: -0.7rem;
    padding-left: 1.1rem;
    transition: color 0.15s ease, box-shadow 0.15s ease;
}

.doc-toc a:hover {
    color: var(--doc-text);
}

.doc-toc a.is-active {
    color: var(--doc-accent);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--doc-accent);
}

.doc-toc .doc-toc-sub {
    padding-left: 1.9rem;
    font-size: 0.81rem;
}

/* --- Colonne centrale ----------------------------------------------------- */

.doc-main {
    flex: 1 1 auto;
    min-width: 0;
    max-width: var(--doc-measure);
    padding: 0 0 5rem 2.75rem;
}

.doc-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    font-size: 0.8rem;
    color: var(--doc-muted);
    margin-bottom: 1.1rem;
}

.doc-breadcrumb a {
    color: var(--doc-muted);
    text-decoration: none;
}

.doc-breadcrumb a:hover {
    color: var(--doc-text);
}

.doc-breadcrumb .sep {
    opacity: 0.45;
}

.doc-title {
    font-size: 2.25rem;
    line-height: 1.15;
    font-weight: 800;
    color: var(--doc-heading);
    letter-spacing: -0.02em;
    margin: 0 0 0.7rem 0;
}

.doc-lede {
    font-size: 1.06rem;
    line-height: 1.65;
    color: var(--doc-muted);
    margin: 0 0 1.5rem 0;
}

.doc-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--doc-line);
    border-radius: 20px;
    font-size: 0.78rem;
    color: var(--doc-muted);
    margin-bottom: 2.75rem;
}

.doc-meta i {
    font-size: 0.72rem;
    color: var(--doc-accent);
}

/* ==========================================================================
   Contenu rédactionnel
   ========================================================================== */

.doc-section {
    /* Compense la navigation fixe quand on arrive par une ancre : sans ça, le
       titre visé se retrouve masqué derrière la barre du haut. */
    scroll-margin-top: calc(var(--doc-nav-h) + 1.5rem);
    padding-top: 2.5rem;
    margin-top: 2.5rem;
    border-top: 1px solid var(--doc-line);
}

.doc-section:first-of-type {
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
}

.doc-section > h2,
.doc-content h2 {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--doc-heading);
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0 0 1rem 0;
    scroll-margin-top: calc(var(--doc-nav-h) + 1.5rem);
}

.doc-section h3,
.doc-content h3 {
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--doc-heading);
    margin: 2rem 0 0.75rem 0;
    scroll-margin-top: calc(var(--doc-nav-h) + 1.5rem);
}

.doc-section p,
.doc-content p {
    font-size: 0.97rem;
    line-height: 1.78;
    margin: 0 0 1.05rem 0;
}

.doc-section ul,
.doc-section ol,
.doc-content ul,
.doc-content ol {
    margin: 0 0 1.15rem 0;
    padding-left: 1.35rem;
}

.doc-section li,
.doc-content li {
    font-size: 0.97rem;
    line-height: 1.75;
    margin-bottom: 0.55rem;
}

.doc-section li::marker,
.doc-content li::marker {
    color: var(--doc-accent);
}

.doc-section strong,
.doc-content strong {
    color: var(--doc-heading);
    font-weight: 650;
}

.doc-section em,
.doc-content em {
    color: var(--doc-text);
}

.doc-section a,
.doc-content a {
    color: #ff7d87;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 125, 135, 0.35);
    transition: border-color 0.15s ease;
}

.doc-section a:hover,
.doc-content a:hover {
    border-bottom-color: #ff7d87;
}

.doc-section code,
.doc-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.86em;
    padding: 0.12em 0.4em;
    border-radius: 5px;
    background: var(--doc-surface);
    border: 1px solid var(--doc-line);
    color: #e8b4b8;
}

.doc-section table,
.doc-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.35rem 0;
    font-size: 0.9rem;
}

.doc-section th,
.doc-content th {
    text-align: left;
    font-weight: 650;
    color: var(--doc-heading);
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--doc-line-strong);
}

.doc-section td,
.doc-content td {
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--doc-line);
    vertical-align: top;
}

/* --- Encadrés ------------------------------------------------------------- */

.doc-callout {
    display: flex;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    margin: 0 0 1.35rem 0;
    background: var(--doc-surface);
    border: 1px solid var(--doc-line);
    border-left: 3px solid var(--doc-muted);
    border-radius: 8px;
}

.doc-callout > i {
    flex: 0 0 auto;
    margin-top: 0.22rem;
    font-size: 0.92rem;
    color: var(--doc-muted);
}

.doc-callout p {
    margin: 0 0 0.6rem 0;
    font-size: 0.93rem;
    line-height: 1.7;
}

.doc-callout p:last-child {
    margin-bottom: 0;
}

.doc-callout.is-info {
    border-left-color: #3b82f6;
}

.doc-callout.is-info > i {
    color: #3b82f6;
}

.doc-callout.is-warning {
    border-left-color: #f59e0b;
}

.doc-callout.is-warning > i {
    color: #f59e0b;
}

.doc-callout.is-danger {
    border-left-color: var(--doc-accent);
}

.doc-callout.is-danger > i {
    color: var(--doc-accent);
}

/* --- Pied de page du document --------------------------------------------- */

.doc-pager {
    display: flex;
    gap: 1rem;
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--doc-line);
}

.doc-pager a {
    flex: 1 1 0;
    min-width: 0;
    display: block;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--doc-line);
    border-radius: 10px;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.doc-pager a:hover {
    border-color: var(--doc-line-strong);
    background: var(--doc-surface);
}

.doc-pager .dir {
    display: block;
    font-size: 0.73rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--doc-muted);
    margin-bottom: 0.3rem;
}

.doc-pager .label {
    display: block;
    font-size: 0.93rem;
    font-weight: 600;
    color: var(--doc-heading);
    /* Un titre long ne doit pas casser la mise en page de la carte. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-pager .is-next {
    text-align: right;
}

.doc-footnote {
    margin-top: 2.5rem;
    font-size: 0.8rem;
    color: var(--doc-muted);
}

/* --- États de chargement -------------------------------------------------- */

.doc-loading,
.doc-error {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1.5rem 0;
    color: var(--doc-muted);
    font-size: 0.95rem;
}

.doc-error {
    color: #ff9aa2;
}

.doc-loading i {
    animation: doc-spin 0.9s linear infinite;
}

@keyframes doc-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   Bouton d'ouverture du sommaire (mobile)
   ========================================================================== */

.doc-aside-toggle {
    display: none;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.7rem 1rem;
    margin-bottom: 1.5rem;
    background: var(--doc-surface);
    border: 1px solid var(--doc-line);
    border-radius: 9px;
    color: var(--doc-text);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.doc-aside-toggle i {
    color: var(--doc-accent);
}

.doc-aside-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 900;
}

.doc-aside-backdrop.is-open {
    display: block;
}

/* ==========================================================================
   Adaptation aux petits écrans
   ========================================================================== */

@media (max-width: 1080px) {
    .doc-layout {
        display: block;
        padding-top: calc(var(--doc-nav-h) + 1.75rem);
    }

    .doc-main {
        max-width: none;
        padding-left: 0;
    }

    .doc-aside-toggle {
        display: flex;
    }

    /* La colonne devient un tiroir : hors écran par défaut, amené par-dessus le
       contenu à la demande.
       Il commence SOUS la barre de navigation du site (position: fixed) : à
       `top: 0` ses premières entrées passaient dessous et restaient
       inatteignables, le tiroir ne pouvant pas défiler plus haut que son
       propre bord. */
    .doc-aside {
        position: fixed;
        top: var(--doc-nav-h);
        left: 0;
        bottom: 0;
        width: 290px;
        max-height: none;
        z-index: 901;
        padding: 1.5rem 1.25rem;
        /* La barre du navigateur mobile mange le bas : sans cette réserve, la
           dernière entrée reste sous elle. */
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
        background: var(--doc-surface);
        border-right: 1px solid var(--doc-line-strong);
        transform: translateX(-100%);
        transition: transform 0.22s ease;
    }

    .doc-aside.is-open {
        transform: translateX(0);
    }
}

@media (max-width: 640px) {
    :root {
        --doc-nav-h: 61px;
    }

    .doc-layout {
        padding: 0 1rem;
        padding-top: calc(var(--doc-nav-h) + 1.5rem);
    }

    .doc-title {
        font-size: 1.8rem;
    }

    .doc-section > h2,
    .doc-content h2 {
        font-size: 1.25rem;
    }

    .doc-pager {
        flex-direction: column;
    }

    .doc-pager .is-next {
        text-align: left;
    }
}

/* ==========================================================================
   Impression — un document juridique finit souvent en PDF
   ========================================================================== */

@media print {
    .navbar,
    .doc-aside,
    .doc-aside-toggle,
    .doc-aside-backdrop,
    .doc-pager,
    .footer {
        display: none !important;
    }

    body.doc-body {
        background: #fff;
        color: #000;
    }

    .doc-layout {
        display: block;
        padding: 0;
        max-width: none;
    }

    .doc-main {
        max-width: none;
        padding: 0;
    }

    .doc-title,
    .doc-section h2,
    .doc-section h3,
    .doc-section strong {
        color: #000;
    }

    .doc-section {
        border-top: 1px solid #ccc;
        /* Évite qu'un titre de section se retrouve seul en bas d'une page. */
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .doc-section a,
    .doc-content a {
        color: #000;
        border-bottom: none;
        text-decoration: underline;
    }
}