/* =======================================================
   LEGAL PAGES (Mentions légales / Privacy Policy / CGU)
   File: assets/css/legal.css
   Layer: pages
   Goal: Token-only colors + predictable cascade + scoped rules
======================================================= */


  /* -------------------------------------------------------
     0) SCOPE
     We support common WP body classes + optional template class.
     (If your theme adds .legal-page wrapper, this also works.)
  ------------------------------------------------------- */
  :where(
    body.page-slug-mentions-legales,
    body.page-slug-politique-de-confidentialite,
    body.page-slug-politique-de-confidentialite-2,
    body.page-slug-cgu,
    body.page-slug-conditions-generales-dutilisation,
    body.page-slug-conditions-generales-dutilisation-cgu,
    body.page-slug-terms,
    body.privacy-policy,
    body.legal-page
  ){
    background: var(--color-bg);

    /* Local “derived tokens” (safe, reversible) */
    --legal-surface: color-mix(in srgb, var(--color-white) 92%, var(--color-bg) 8%);
    --legal-surface-2: color-mix(in srgb, var(--color-white) 82%, var(--color-bg) 18%);
    --legal-border: color-mix(in srgb, var(--color-dark) 12%, transparent);

    --legal-radius: var(--radius-base, 18px);
    --legal-shadow: var(--shadow-soft, 0 14px 34px rgba(0,0,0,.10));

    --legal-max: 980px;

    /* Focus ring */
    --legal-focus: 0 0 0 3px color-mix(in srgb, var(--color-primary) 55%, transparent);
  }

  /* -------------------------------------------------------
     1) LAYOUT WRAPPER (safe even if you don't have these classes)
  ------------------------------------------------------- */
  :where(
    body.page-slug-mentions-legales,
    body.page-slug-politique-de-confidentialite,
    body.page-slug-politique-de-confidentialite-2,
    body.page-slug-cgu,
    body.page-slug-conditions-generales-dutilisation,
    body.page-slug-conditions-generales-dutilisation-cgu,
    body.page-slug-terms,
    body.privacy-policy,
    body.legal-page
  ) :where(.legal-section, .legal-page, .site-main){
    background: var(--color-bg);
  }

  /* Page spacing (doesn't redesign, just normalizes) */
  :where(
    body.page-slug-mentions-legales,
    body.page-slug-politique-de-confidentialite,
    body.page-slug-politique-de-confidentialite-2,
    body.page-slug-cgu,
    body.page-slug-conditions-generales-dutilisation,
    body.page-slug-conditions-generales-dutilisation-cgu,
    body.page-slug-terms,
    body.privacy-policy,
    body.legal-page
  ) :where(.legal-section, .legal-page) {
    padding: var(--space-xl, 90px) 20px var(--space-xl, 90px);
  }

  /* If you're using a plain WP page editor, keep content readable */
  :where(
    body.page-slug-mentions-legales,
    body.page-slug-politique-de-confidentialite,
    body.page-slug-politique-de-confidentialite-2,
    body.page-slug-cgu,
    body.page-slug-conditions-generales-dutilisation,
    body.page-slug-conditions-generales-dutilisation-cgu,
    body.page-slug-terms,
    body.privacy-policy,
    body.legal-page
  ) :where(.entry-content, .legal-content, .site-main .container){
    max-width: var(--legal-max);
    margin: 0 auto;
  }

  /* Optional: a “card” container if your template uses one */
  :where(
    body.page-slug-mentions-legales,
    body.page-slug-politique-de-confidentialite,
    body.page-slug-politique-de-confidentialite-2,
    body.page-slug-cgu,
    body.page-slug-conditions-generales-dutilisation,
    body.page-slug-conditions-generales-dutilisation-cgu,
    body.page-slug-terms,
    body.privacy-policy,
    body.legal-page
  ) :where(.legal-card, .legal-container){
    background: var(--legal-surface);
    border: 1px solid var(--legal-border);
    border-radius: var(--legal-radius);
    box-shadow: var(--legal-shadow);
    padding: var(--space-lg, 44px);
  }

  @media (max-width: 700px){
    :where(
      body.page-slug-mentions-legales,
      body.page-slug-politique-de-confidentialite,
      body.page-slug-politique-de-confidentialite-2,
      body.page-slug-cgu,
      body.page-slug-conditions-generales-dutilisation,
      body.page-slug-conditions-generales-dutilisation-cgu,
      body.page-slug-terms,
      body.privacy-policy,
      body.legal-page
    ) :where(.legal-card, .legal-container){
      padding: 26px 20px;
    }
  }

  /* -------------------------------------------------------
     2) TYPOGRAPHY (readability without touching other pages)
  ------------------------------------------------------- */
  :where(
    body.page-slug-mentions-legales,
    body.page-slug-politique-de-confidentialite,
    body.page-slug-politique-de-confidentialite-2,
    body.page-slug-cgu,
    body.page-slug-conditions-generales-dutilisation,
    body.page-slug-conditions-generales-dutilisation-cgu,
    body.page-slug-terms,
    body.privacy-policy,
    body.legal-page
  ) :where(.entry-content, .legal-content){
    color: var(--color-dark);
    font-family: var(--font-body);
    line-height: 1.75;
    font-size: 16px;
  }

  :where(
    body.page-slug-mentions-legales,
    body.page-slug-politique-de-confidentialite,
    body.page-slug-politique-de-confidentialite-2,
    body.page-slug-cgu,
    body.page-slug-conditions-generales-dutilisation,
    body.page-slug-conditions-generales-dutilisation-cgu,
    body.page-slug-terms,
    body.privacy-policy,
    body.legal-page
  ) :where(.entry-content, .legal-content) :where(h1,h2,h3){
    font-family: var(--font-title);
    color: var(--color-dark);
    line-height: 1.25;
    margin: 26px 0 10px;
  }

  :where(
    body.page-slug-mentions-legales,
    body.page-slug-politique-de-confidentialite,
    body.page-slug-politique-de-confidentialite-2,
    body.page-slug-cgu,
    body.page-slug-conditions-generales-dutilisation,
    body.page-slug-conditions-generales-dutilisation-cgu,
    body.page-slug-terms,
    body.privacy-policy,
    body.legal-page
  ) :where(.entry-content, .legal-content) h1{
    font-size: 40px;
    margin-top: 0;
  }

  :where(
    body.page-slug-mentions-legales,
    body.page-slug-politique-de-confidentialite,
    body.page-slug-politique-de-confidentialite-2,
    body.page-slug-cgu,
    body.page-slug-conditions-generales-dutilisation,
    body.page-slug-conditions-generales-dutilisation-cgu,
    body.page-slug-terms,
    body.privacy-policy,
    body.legal-page
  ) :where(.entry-content, .legal-content) h2{
    font-size: 26px;
    padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--color-dark) 10%, transparent);
  }

  :where(
    body.page-slug-mentions-legales,
    body.page-slug-politique-de-confidentialite,
    body.page-slug-politique-de-confidentialite-2,
    body.page-slug-cgu,
    body.page-slug-conditions-generales-dutilisation,
    body.page-slug-conditions-generales-dutilisation-cgu,
    body.page-slug-terms,
    body.privacy-policy,
    body.legal-page
  ) :where(.entry-content, .legal-content) h3{
    font-size: 18px;
  }

  :where(
    body.page-slug-mentions-legales,
    body.page-slug-politique-de-confidentialite,
    body.page-slug-politique-de-confidentialite-2,
    body.page-slug-cgu,
    body.page-slug-conditions-generales-dutilisation,
    body.page-slug-conditions-generales-dutilisation-cgu,
    body.page-slug-terms,
    body.privacy-policy,
    body.legal-page
  ) :where(.entry-content, .legal-content) p{
    margin: 0 0 14px;
    color: var(--color-dark);
    opacity: .95;
  }

  /* Lists */
  :where(
    body.page-slug-mentions-legales,
    body.page-slug-politique-de-confidentialite,
    body.page-slug-politique-de-confidentialite-2,
    body.page-slug-cgu,
    body.page-slug-conditions-generales-dutilisation,
    body.page-slug-conditions-generales-dutilisation-cgu,
    body.page-slug-terms,
    body.privacy-policy,
    body.legal-page
  ) :where(.entry-content, .legal-content) :where(ul,ol){
    margin: 10px 0 16px 18px;
    padding: 0;
  }

  :where(
    body.page-slug-mentions-legales,
    body.page-slug-politique-de-confidentialite,
    body.page-slug-politique-de-confidentialite-2,
    body.page-slug-cgu,
    body.page-slug-conditions-generales-dutilisation,
    body.page-slug-conditions-generales-dutilisation-cgu,
    body.page-slug-terms,
    body.privacy-policy,
    body.legal-page
  ) :where(.entry-content, .legal-content) li{
    margin: 0 0 6px;
  }

  /* -------------------------------------------------------
     3) LINKS + FOCUS (accessible)
  ------------------------------------------------------- */
  :where(
    body.page-slug-mentions-legales,
    body.page-slug-politique-de-confidentialite,
    body.page-slug-politique-de-confidentialite-2,
    body.page-slug-cgu,
    body.page-slug-conditions-generales-dutilisation,
    body.page-slug-conditions-generales-dutilisation-cgu,
    body.page-slug-terms,
    body.privacy-policy,
    body.legal-page
  ) :where(.entry-content, .legal-content) a{
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    word-break: break-word;
  }

  :where(
    body.page-slug-mentions-legales,
    body.page-slug-politique-de-confidentialite,
    body.page-slug-politique-de-confidentialite-2,
    body.page-slug-cgu,
    body.page-slug-conditions-generales-dutilisation,
    body.page-slug-conditions-generales-dutilisation-cgu,
    body.page-slug-terms,
    body.privacy-policy,
    body.legal-page
  ) :where(.entry-content, .legal-content) a:hover{
    text-decoration-thickness: 2px;
  }

  :where(
    body.page-slug-mentions-legales,
    body.page-slug-politique-de-confidentialite,
    body.page-slug-politique-de-confidentialite-2,
    body.page-slug-cgu,
    body.page-slug-conditions-generales-dutilisation,
    body.page-slug-conditions-generales-dutilisation-cgu,
    body.page-slug-terms,
    body.privacy-policy,
    body.legal-page
  ) :where(.entry-content, .legal-content) a:focus-visible{
    outline: none;
    box-shadow: var(--legal-focus);
    border-radius: 10px;
  }

  /* -------------------------------------------------------
     4) TABLES (legal pages sometimes include them)
  ------------------------------------------------------- */
  :where(
    body.page-slug-mentions-legales,
    body.page-slug-politique-de-confidentialite,
    body.page-slug-politique-de-confidentialite-2,
    body.page-slug-cgu,
    body.page-slug-conditions-generales-dutilisation,
    body.page-slug-conditions-generales-dutilisation-cgu,
    body.page-slug-terms,
    body.privacy-policy,
    body.legal-page
  ) :where(.entry-content, .legal-content) table{
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0 18px;
    background: var(--legal-surface);
    border: 1px solid var(--legal-border);
    border-radius: 14px;
    overflow: hidden;
  }

  :where(
    body.page-slug-mentions-legales,
    body.page-slug-politique-de-confidentialite,
    body.page-slug-politique-de-confidentialite-2,
    body.page-slug-cgu,
    body.page-slug-conditions-generales-dutilisation,
    body.page-slug-conditions-generales-dutilisation-cgu,
    body.page-slug-terms,
    body.privacy-policy,
    body.legal-page
  ) :where(.entry-content, .legal-content) :where(th,td){
    border-bottom: 1px solid color-mix(in srgb, var(--color-dark) 10%, transparent);
    padding: 10px 12px;
    text-align: left;
    font-size: 14px;
    color: var(--color-dark);
  }

  :where(
    body.page-slug-mentions-legales,
    body.page-slug-politique-de-confidentialite,
    body.page-slug-politique-de-confidentialite-2,
    body.page-slug-cgu,
    body.page-slug-conditions-generales-dutilisation,
    body.page-slug-conditions-generales-dutilisation-cgu,
    body.page-slug-terms,
    body.privacy-policy,
    body.legal-page
  ) :where(.entry-content, .legal-content) th{
    font-family: var(--font-title);
    background: var(--legal-surface-2);
  }

  /* -------------------------------------------------------
     5) CALLOUT / NOTICE (optional utility if template uses it)
  ------------------------------------------------------- */
  :where(
    body.page-slug-mentions-legales,
    body.page-slug-politique-de-confidentialite,
    body.page-slug-politique-de-confidentialite-2,
    body.page-slug-cgu,
    body.page-slug-conditions-generales-dutilisation,
    body.page-slug-conditions-generales-dutilisation-cgu,
    body.page-slug-terms,
    body.privacy-policy,
    body.legal-page
  ) :where(.legal-note, .legal-callout){
    margin: 14px 0 18px;
    padding: 12px 14px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-white));
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
    color: var(--color-dark);
    font-size: 14px;
  }