/* ==================================================================
       Pages légales : le seul ajout à la feuille de la page contact, dont
       ces pages reprennent l'en-tête, le pied et le menu mobile.

       Une colonne de lecture, des titres d'article qui ponctuent le texte,
       et rien d'autre : ces pages se lisent, elles ne se parcourent pas.
       ================================================================== */
    .legal {
      max-width: 46rem;
      padding: 3rem 0 6.5rem;
      font-size: 1rem;
      line-height: 1.75;
      color: #4E4C74;
    }

    .legal > *:first-child { margin-top: 0; }

    .legal p {
      margin: 1.1rem 0;
    }

    .legal h2 {
      margin: 3rem 0 1rem;
      font-size: 1.25rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: #12124E;
    }

    .legal h3 {
      margin: 2.25rem 0 0.75rem;
      font-size: 1.0625rem;
      font-weight: 600;
      color: #12124E;
    }

    .legal ul,
    .legal ol {
      margin: 1.1rem 0;
      padding-left: 1.35rem;
    }

    .legal li {
      margin: 0.45rem 0;
    }

    .legal strong { color: #12124E; }

    /* Le tableau des finalités : des filets horizontaux, pas de boîte. En
       dessous de la largeur de lecture, il défile de lui-même plutôt que de
       comprimer ses trois colonnes en colonnes de deux mots. */
    .legal table {
      width: 100%;
      margin: 1.75rem 0;
      border-collapse: collapse;
      font-size: 0.9375rem;
      text-align: left;
    }

    .legal th,
    .legal td {
      padding: 0.85rem 1rem 0.85rem 0;
      border-bottom: 1px solid rgba(18, 18, 78, 0.10);
      vertical-align: top;
    }

    .legal thead th,
    .legal tbody tr:first-child td strong {
      color: #12124E;
      font-weight: 600;
    }

    .legal thead th { border-bottom-color: rgba(104, 94, 248, 0.35); }

    .legal tr > *:last-child { padding-right: 0; }

    /* Les liens du texte long portent le même soulignement que le reste du
       site : un trait qui se trace au survol, pas un souligné permanent. */
    .legal a {
      position: relative;
      color: #685EF8;
      font-weight: 600;
      text-decoration: none;
    }

    .legal a::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -2px;
      height: 1px;
      background: currentColor;
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 0.3s var(--ease-out);
    }

    .legal a:hover::after { transform: scaleX(1); }

    /* Le titre de ces pages est plus long que « Parlons. » : sans plafond, il
       occuperait un écran entier avant la première ligne de texte. */
    .page-head h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); }

    @media (max-width: 1200px) {
      .legal {
        padding: 2rem 0 4.5rem;
        font-size: 0.9375rem;
      }

      .legal h2 { margin-top: 2.25rem; font-size: 1.125rem; }

      .legal table {
        display: block;
        overflow-x: auto;
        font-size: 0.875rem;
      }

      .legal th,
      .legal td { min-width: 11rem; padding-right: 0.85rem; }
    }