/* Mise en forme des documents juridiques (confidentialité, CGU).
   Partagée par les deux pages : elles ont le même problème de lecture, et
   dupliquer ces règles garantissait qu'elles divergent à la première retouche. */

/* ── Politique de confidentialité ─────────────────────────────────────────
   Un texte juridique se consulte plus qu'il ne se lit : on y cherche une
   clause précise. La mise en page sert donc d'abord le repérage — sommaire
   persistant, numérotation apparente — et la lisibilité sur longue distance.
   L'ancienne version était un bloc de <p> sans hiérarchie, sur toute la
   largeur de l'écran. */

.pp-hero {
    background: linear-gradient(180deg, var(--pt-gray-900) 0%, #12122a 100%);
    color: #fff;
    padding: 72px 0 60px;
    position: relative;
    overflow: hidden;
}
/* Filet rose : rappel de marque sans occuper de place. */
.pp-hero::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, var(--pt-primary) 0%, var(--pt-primary-light) 50%, transparent 100%);
}
.pp-hero__inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.pp-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--pt-primary-light);
    border: 1px solid rgba(236, 22, 127, 0.35);
    background: rgba(236, 22, 127, 0.10);
    border-radius: 40px; padding: 6px 14px; margin-bottom: 22px;
}
.pp-hero__title {
    font-family: var(--pt-font-heading, Georgia, serif);
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    line-height: 1.1; margin: 0 0 18px; color: #fff; font-weight: 400;
}
.pp-hero__lead {
    font-size: 1.02rem; line-height: 1.7; color: rgba(255,255,255,0.72);
    max-width: 60ch; margin: 0 0 30px;
}
.pp-hero__meta { display: flex; flex-wrap: wrap; gap: 12px; }
.pp-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.13);
    border-radius: 10px; padding: 9px 15px;
    font-size: 0.79rem; color: rgba(255,255,255,0.86); text-decoration: none;
}
.pp-chip .mi { font-size: 16px; color: var(--pt-primary-light); }
a.pp-chip:hover { background: rgba(236,22,127,0.16); border-color: rgba(236,22,127,0.4); color: #fff; }

/* ── Corps : sommaire + document ─────────────────────────────────────── */
.pp-body { max-width: 1180px; margin: 0 auto; padding: 56px 24px 90px; display: flex; gap: 56px; align-items: flex-start; }
.pp-toc { width: 262px; flex-shrink: 0; position: sticky; top: 96px; }
.pp-toc__title {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--pt-gray-500); margin: 0 0 16px; padding-left: 14px;
}
.pp-toc ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--pt-gray-200); }
.pp-toc__link {
    display: flex; gap: 11px; align-items: baseline;
    padding: 9px 14px; margin-left: -2px;
    border-left: 2px solid transparent;
    font-size: 0.87rem; line-height: 1.45; color: var(--pt-gray-600); text-decoration: none;
    transition: color .15s, border-color .15s;
}
.pp-toc__num { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--pt-gray-400); font-size: 0.78rem; }
.pp-toc__link:hover { color: var(--pt-gray-900); }
.pp-toc__link.is-active { color: var(--pt-primary); border-left-color: var(--pt-primary); font-weight: 600; }
.pp-toc__link.is-active .pp-toc__num { color: var(--pt-primary); }

.pp-doc { flex: 1; min-width: 0; max-width: 72ch; }
.pp-section { scroll-margin-top: 96px; }
.pp-section + .pp-section { margin-top: 52px; padding-top: 46px; border-top: 1px solid var(--pt-gray-200); }
.pp-h2 {
    font-family: var(--pt-font-heading, Georgia, serif);
    font-size: clamp(1.45rem, 3vw, 1.9rem); line-height: 1.25; font-weight: 400;
    color: var(--pt-gray-900); margin: 0 0 26px;
    display: flex; gap: 16px; align-items: baseline;
}
/* La numérotation existe déjà dans le texte de loi et sert à le citer :
   on l'affiche comme repère, pas comme ornement. */
.pp-h2__num {
    font-family: inherit; font-size: 0.92em; color: var(--pt-primary);
    font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.pp-h3 {
    font-size: 0.99rem; font-weight: 700; color: var(--pt-gray-900);
    margin: 34px 0 12px; display: flex; gap: 11px; align-items: baseline; scroll-margin-top: 96px;
}
.pp-h3__num { color: var(--pt-primary); font-variant-numeric: tabular-nums; font-size: 0.86rem; flex-shrink: 0; }
.pp-doc p { font-size: 0.97rem; line-height: 1.78; color: var(--pt-gray-700); margin: 0 0 17px; }
.pp-doc ul { margin: 0 0 20px; padding-left: 0; list-style: none; }
.pp-doc ul li { position: relative; padding-left: 26px; margin-bottom: 12px; }
.pp-doc ul li::before {
    content: ""; position: absolute; left: 6px; top: 0.72em;
    width: 6px; height: 6px; border-radius: 50%; background: var(--pt-primary); opacity: 0.55;
}
.pp-doc ul li p { margin: 0; }
.pp-doc a { color: var(--pt-primary); text-decoration: underline; text-underline-offset: 3px; }
.pp-doc a:hover { color: var(--pt-primary-dark); }

.pp-contact {
    margin-top: 52px; padding: 26px 28px;
    background: var(--pt-primary-subtle); border: 1px solid #f9d3e4; border-radius: 14px;
}
.pp-contact h3 { font-size: 1.02rem; font-weight: 700; color: var(--pt-gray-900); margin: 0 0 8px; }
.pp-contact p { font-size: 0.9rem !important; color: var(--pt-gray-700); margin: 0 0 16px !important; }
.pp-contact a.pp-mail {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--pt-primary); color: #fff; text-decoration: none;
    border-radius: 9px; padding: 10px 18px; font-size: 0.88rem; font-weight: 600;
}
.pp-contact a.pp-mail:hover { background: var(--pt-primary-dark); color: #fff; }

@media (max-width: 991px) {
    .pp-body { flex-direction: column; gap: 32px; padding-top: 36px; }
    .pp-toc { position: static; width: 100%; }
    .pp-toc ul { display: flex; flex-wrap: wrap; gap: 6px; border-left: 0; }
    .pp-toc__link { border: 1px solid var(--pt-gray-200); border-radius: 8px; padding: 7px 12px; margin: 0; }
    .pp-toc__link.is-active { border-color: var(--pt-primary); background: var(--pt-primary-subtle); }
    .pp-hero { padding: 48px 0 40px; }
}