/* ============================================================
   LEGAL PAGES  (privacy notice, terms of service)
   The header and the footer are the ones of the public page, so
   this sheet only owns what sits between them: the summary on
   the left, the notice on the right, and the find-in-page.
   Every colour comes from the tokens, so both themes follow.
   ============================================================ */

/* ------------------------------------------------------------
   One language at a time. The document carries both, and the
   language of the html element decides which one is read.
   ------------------------------------------------------------ */

html[lang="fr"] .lang-en,
html[lang="en"] .lang-fr {
    display: none;
}

/* ------------------------------------------------------------
   THE TWO COLUMNS
   ------------------------------------------------------------ */

.pe-legal {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 48px;
    max-width: var(--pe-page-width);
    margin: 0 auto;
    padding: 8px 24px 80px 24px;
    box-sizing: border-box;
}

/* ------------------------------------------------------------
   THE SUMMARY
   ------------------------------------------------------------ */

.pe-legal-toc {
    position: sticky;
    top: 96px;
    align-self: start;
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-right: 8px;
    overflow-y: auto;
}

.pe-toc {
    display: flex;
    flex-direction: column;
}

.pe-toc-top {
    padding: 14px 0;
    border-bottom: 1px solid var(--pe-border);
    font-size: var(--pe-fs-md);
    font-weight: 700;
    color: var(--pe-navy);
    text-decoration: none;
}

body.dark-mode .pe-toc-top {
    color: var(--pe-yellow);
}

.pe-toc-group {
    border-bottom: 1px solid var(--pe-border);
}

/* The heading of the one group. No toggle and no mark: there is a single group
   and it is always open, so a control that could only ever close it is noise. */
.pe-toc-head {
    padding: 14px 0;
    font-size: var(--pe-fs-md);
    font-weight: 700;
    color: var(--pe-navy);
}

body.dark-mode .pe-toc-head {
    color: var(--pe-yellow);
}

.pe-toc-list {
    list-style: none;
    margin: 0;
    padding: 0 0 14px 0;
    display: none;
}

.pe-toc-group.open .pe-toc-list {
    display: block;
}

.pe-toc-link {
    display: block;
    padding: 8px 0 8px 14px;
    border-left: 2px solid transparent;
    font-size: var(--pe-fs-sm);
    line-height: 1.45;
    color: var(--pe-text-muted);
    text-decoration: none;
}

.pe-toc-link:hover {
    color: var(--pe-text);
}

/* the article being read */
.pe-toc-link.is-current {
    border-left-color: var(--pe-navy);
    color: var(--pe-text);
    font-weight: 700;
}

body.dark-mode .pe-toc-link.is-current {
    border-left-color: var(--pe-yellow);
}

/* ------------------------------------------------------------
   FIND IN PAGE
   ------------------------------------------------------------ */

.pe-find {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 8px 14px;
    background: var(--pe-surface);
    border: 1px solid var(--pe-border);
    border-radius: var(--pe-radius-pill);
}

.pe-find:focus-within {
    border-color: var(--pe-navy);
    background: var(--pe-bg);
}

body.dark-mode .pe-find:focus-within {
    border-color: var(--pe-yellow);
}

.pe-find-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: var(--pe-font);
    font-size: var(--pe-fs-sm);
    color: var(--pe-text);
}

.pe-find-input:focus {
    outline: none;
}

/* the browser's own clear cross would be a second control in the same place */
.pe-find-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.pe-find-nav {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 2px;
}

.pe-find-count {
    padding-right: 4px;
    font-size: var(--pe-fs-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--pe-text-muted);
    white-space: nowrap;
}

.pe-find-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--pe-text-muted);
    font-size: 16px;
    cursor: pointer;
}

.pe-find-step:hover:not(:disabled) {
    background: var(--pe-surface-hover);
    color: var(--pe-text);
}

.pe-find-step:disabled {
    opacity: 0.35;
    cursor: default;
}

/* every match, and the one being looked at */
.pe-hit {
    background: rgba(250, 229, 5, 0.55);
    color: inherit;
    border-radius: 3px;
}

.pe-hit.is-current {
    background: var(--pe-yellow);
    box-shadow: 0 0 0 2px rgba(11, 35, 91, 0.35);
}

body.dark-mode .pe-hit {
    background: rgba(250, 229, 5, 0.30);
    color: var(--pe-text);
}

body.dark-mode .pe-hit.is-current {
    background: var(--pe-yellow);
    color: var(--pe-navy);
    box-shadow: 0 0 0 2px rgba(250, 229, 5, 0.45);
}

/* ------------------------------------------------------------
   THE DOCUMENT
   ------------------------------------------------------------ */

.pe-legal-head {
    padding: 18px 0 26px 0;
}

.pe-legal-head h1 {
    margin: 0 0 10px 0;
    font-size: var(--pe-fs-2xl);
    line-height: var(--pe-lh-tight);
    font-weight: 700;
    color: var(--pe-navy);
}

body.dark-mode .pe-legal-head h1 {
    color: #FFFFFF;
}

.pe-legal-sub {
    margin: 0 0 6px 0;
    font-size: var(--pe-fs-md);
    font-weight: 600;
    color: var(--pe-text);
}

.pe-legal-date {
    margin: 0;
    font-size: var(--pe-fs-sm);
    color: var(--pe-text-muted);
}

.pe-legal-doc .section {
    padding: 30px 0;
    border-top: 1px solid var(--pe-border);
    scroll-margin-top: 104px;
}

.pe-legal-doc .section-header {
    margin-bottom: 14px;
}

/* The "Article N" label is gone from the markup, so the title opens the section. */
.pe-legal-doc .section-title {
    font-size: var(--pe-fs-lg);
    font-weight: 700;
    line-height: var(--pe-lh-tight);
    color: var(--pe-navy);
}

body.dark-mode .pe-legal-doc .section-title {
    color: var(--pe-yellow);
}

.pe-legal-doc p {
    margin: 0 0 14px 0;
    font-size: var(--pe-fs-sm);
    line-height: 1.75;
    color: var(--pe-text-muted);
}

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

.pe-legal-doc strong {
    color: var(--pe-text);
}

.pe-legal-doc ul,
.pe-legal-doc ol {
    margin: 0 0 14px 22px;
    font-size: var(--pe-fs-sm);
    line-height: 1.75;
    color: var(--pe-text-muted);
}

.pe-legal-doc li {
    margin-bottom: 6px;
}

.pe-legal-doc a {
    color: var(--pe-navy);
    text-decoration: underline;
}

body.dark-mode .pe-legal-doc a {
    color: var(--pe-yellow);
}

/* ---------- what used to be the boxes ---------- */

/*
    Bulleted prose, not panels. Each item opens with its label in bold and
    continues in the same sentence, the way a notice reads on paper.
*/
.pe-legal-list {
    list-style: disc;
    margin: 4px 0 18px 22px;
    padding: 0;
}

.pe-legal-list li {
    margin-bottom: 10px;
    font-size: var(--pe-fs-sm);
    line-height: 1.75;
    color: var(--pe-text-muted);
}

.pe-legal-list li:last-child {
    margin-bottom: 0;
}

.pe-legal-list li strong {
    color: var(--pe-text);
}

/* The full stop and the space after a label live in the markup, not here: as
   generated content the stop was invisible to a text selection and to the
   find-in-page, and a stale stylesheet ran the label into its sentence. */

/* an aside: the emphasis carries it, no tint and no rule */
.pe-legal-note {
    margin: 4px 0 18px 0;
    font-size: var(--pe-fs-sm);
    line-height: 1.75;
    color: var(--pe-text-muted);
}

.pe-legal-note strong {
    color: var(--pe-text);
}

.contact-item {
    font-size: var(--pe-fs-sm);
    font-weight: 600;
    color: var(--pe-navy);
    text-decoration: underline;
}

body.dark-mode .contact-item {
    color: var(--pe-yellow);
}

/* ------------------------------------------------------------
   NARROW SCREENS
   The summary opens above the notice instead of beside it.
   ------------------------------------------------------------ */

@media (max-width: 1000px) {
    .pe-legal {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
        padding: 8px 20px 60px 20px;
    }

    .pe-legal-toc {
        position: static;
        max-height: none;
        overflow: visible;
        padding: 0 0 18px 0;
        border-bottom: 1px solid var(--pe-border);
    }
}

@media (max-width: 700px) {
    .pe-legal {
        padding: 8px 16px 50px 16px;
    }

    .pe-legal-doc .section {
        padding: 24px 0;
    }
}