/* ==========================================================================
   privacy.css — mise en page de confidentialite.html UNIQUEMENT.
   Chargée par cette seule page ; le jeu ne la télécharge pas.

   La page réutilise tokens.css, components.css et style.css : fond, typo,
   .btn et l'échelle d'espacement viennent de là. Ce fichier ne redéclare
   aucun token, et n'introduit ni hex, ni rgba(), ni z-index numérique.

   Une exception assumée à style.css : h1/h2/h3 y sont en capitales avec
   4 px d'interlettrage, ce qui est juste pour un écran de jeu et illisible
   sur un document de deux mille mots. Les titres sont donc remis en casse
   normale, mais SEULEMENT sous .privacy-page.
   ========================================================================== */

.privacy-page {
    /* Le jeu bloque le débordement horizontal ; ici on veut aussi que l'ancre
       d'un lien du sommaire ne se glisse pas sous la barre collante. */
    scroll-behavior: smooth;
}

.privacy-page :where(h1, h2, h3) {
    text-transform: none;
    letter-spacing: normal;
}

/* ---------- Barre supérieure ---------- */

.privacy-bar {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    background: var(--surface-2);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    border-bottom: 1px solid var(--border-subtle);
}

.privacy-bar-title {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-chip);
    text-transform: uppercase;
    color: var(--gold);
}

.privacy-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-main);
    text-decoration: none;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-pill);
    transition: background var(--dur-fast) var(--ease-standard),
                color var(--dur-fast) var(--ease-standard);
}

.privacy-back:hover,
.privacy-back:focus-visible {
    background: var(--ink-10);
    color: var(--gold);
}

/* ---------- Colonne de lecture ---------- */

.privacy-wrap {
    max-width: 76ch;
    margin: 0 auto;
    padding: var(--space-7) var(--space-4) var(--space-8);
}

.privacy-page p,
.privacy-page li {
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--text-main);
}

.privacy-page a {
    color: var(--gold);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.privacy-page a:hover,
.privacy-page a:focus-visible {
    color: var(--gold-warm);
}

/* Flèche des liens sortants : jamais collée au dernier mot. */
.privacy-ext {
    display: inline-block;
    margin-left: var(--space-1);
    font-size: var(--text-2xs);
    vertical-align: super;
}

.privacy-page code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    background: var(--ink-10);
    border-radius: var(--radius-sm);
    padding: 0 var(--space-1);
}

/* ---------- En-tête de page ---------- */

.privacy-hero {
    margin-bottom: var(--space-7);
}

.privacy-kicker {
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-chip);
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 var(--space-2);
}

.privacy-hero h1 {
    font-size: var(--text-2xl);
    font-weight: var(--weight-impact);
    margin: 0 0 var(--space-4);
    line-height: 1.15;
}

.privacy-lead {
    font-size: var(--text-md) !important;
    color: var(--text-muted);
    margin: 0 0 var(--space-4);
}

.privacy-date {
    font-size: var(--text-xs) !important;
    color: var(--text-muted);
    margin: 0;
}

/* ---------- Résumé en quatre buzzers ---------- */

.privacy-buzzers {
    list-style: none;
    margin: 0 0 var(--space-7);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--space-3);
}

.privacy-buzzer {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    /* --gold-tint est un OR PLEIN (#d4af37), pas un voile : sans color-mix,
       la carte devient un aplat dore et son texte dore disparait dessus. */
    background: color-mix(in srgb, var(--gold-tint) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold-tint) 28%, transparent);
}

.privacy-buzzer-big {
    font-size: var(--text-xl);
    font-weight: var(--weight-impact);
    color: var(--gold);
    line-height: 1;
}

.privacy-buzzer-label {
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-ui);
    text-transform: uppercase;
    color: var(--text-main);
}

.privacy-buzzer-note {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.5;
}

/* ---------- Sommaire ---------- */

.privacy-toc {
    margin: 0 0 var(--space-7);
    padding: var(--space-5);
    border-radius: var(--radius-md);
    background: var(--surface-1);
    border: 1px solid var(--border);
}

.privacy-toc-title {
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-chip);
    text-transform: uppercase !important;
    color: var(--text-muted);
    margin: 0 0 var(--space-3);
}

.privacy-toc-list {
    margin: 0;
    padding: 0 0 0 var(--space-5);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-2) var(--space-5);
}

.privacy-toc-list li {
    font-size: var(--text-sm) !important;
}

/* ---------- Cartes de section ---------- */

.privacy-card {
    margin: 0 0 var(--space-5);
    padding: var(--space-6) var(--space-5);
    border-radius: var(--radius-md);
    background: var(--surface-1);
    border: 1px solid var(--border-subtle);
    /* Compense la barre collante quand on arrive par une ancre du sommaire. */
    scroll-margin-top: var(--space-8);
}

.privacy-card-strong {
    background: color-mix(in srgb, var(--gold-tint) 9%, transparent);
    border-color: color-mix(in srgb, var(--gold-tint) 45%, transparent);
}

.privacy-h2 {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    font-size: var(--text-lg);
    font-weight: var(--weight-display);
    margin: 0 0 var(--space-4);
    line-height: 1.3;
}

.privacy-num {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: var(--control-icon-inline);
    height: var(--control-icon-inline);
    border-radius: var(--radius-pill);
    background: var(--gold);
    color: var(--on-gold);
    font-size: var(--text-xs);
    font-weight: var(--weight-impact);
}

.privacy-h3 {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--gold);
    margin: var(--space-5) 0 var(--space-2);
}

.privacy-card p {
    margin: 0 0 var(--space-3);
}

.privacy-card p:last-child {
    margin-bottom: 0;
}

/* ---------- Encarts « en clair » et avertissement ---------- */

.privacy-plain,
.privacy-warn {
    margin-top: var(--space-4) !important;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--gold);
    background: var(--ink-10);
    font-size: var(--text-sm) !important;
}

.privacy-warn {
    border-left-color: var(--warn-soft);
}

/* ---------- Tables ---------- */

/* Une table à trois colonnes ne rentre pas sur un téléphone : elle défile dans
   son propre conteneur. Ce conteneur porte role="group" et tabindex="0" dans le
   HTML, sans quoi un utilisateur au clavier ne peut pas atteindre les colonnes
   sorties du cadre. L'anneau de focus doit donc rester visible. */
.privacy-table-scroll {
    overflow-x: auto;
    margin: var(--space-4) 0;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
}

.privacy-table-scroll:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.privacy-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.privacy-caption {
    caption-side: top;
    text-align: left;
    padding: var(--space-3) var(--space-4) 0;
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-ui);
    text-transform: uppercase;
    color: var(--text-muted);
}

.privacy-table th,
.privacy-table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border-subtle);
    line-height: 1.55;
}

/* Les noms de clés (of_stats_owner) se coupaient en plein milieu, ce qui les
   rend illisibles ; la colonne reste d'un seul tenant et c'est le conteneur
   qui défile sur un écran étroit. */
.privacy-table tbody td:first-child {
    white-space: nowrap;
}

.privacy-table thead th {
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-ui);
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--ink-10);
    white-space: nowrap;
}

.privacy-table tbody tr:last-child th,
.privacy-table tbody tr:last-child td {
    border-bottom: none;
}

/* ---------- Liste des droits ---------- */

.privacy-rights {
    margin: var(--space-4) 0;
    padding-left: var(--space-5);
    display: grid;
    gap: var(--space-3);
}

.privacy-rights strong {
    color: var(--gold);
}

/* ---------- Bloc de contact ---------- */

.privacy-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-5) !important;
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-subtle);
}

.privacy-contact-label {
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-chip);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* .privacy-page a impose l'or a TOUS les liens de la page, et sa specificite
   (0,2,0) bat celle de .btn-primary (0,1,0) : sans ce rappel, le bouton est un
   aplat dore portant un texte dore, donc vide a l'oeil. */
.privacy-page .privacy-contact-btn,
.privacy-page .privacy-contact-btn:hover,
.privacy-page .privacy-contact-btn:focus-visible {
    color: var(--on-gold);
    text-decoration: none;
}

/* ---------- Pied de page ---------- */

.privacy-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-4) var(--space-8);
    font-size: var(--text-sm);
    border-top: 1px solid var(--border-subtle);
}

.privacy-footer-sep {
    color: var(--text-muted);
}

/* ---------- Petits écrans ---------- */

@media (max-width: 680px) {
    .privacy-wrap { padding: var(--space-5) var(--space-3) var(--space-7); }
    .privacy-card { padding: var(--space-5) var(--space-4); }
    .privacy-bar { padding: var(--space-2) var(--space-3); }
    .privacy-hero h1 { font-size: var(--text-xl); }
    /* Sur une seule colonne, le sommaire n'a plus besoin de gouttière large. */
    .privacy-toc-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .privacy-page { scroll-behavior: auto; }
}