/* ==========================================================================
   Legal / privacy-policy page (template-politique-confidentialite.php).
   Loaded only for that page template (see functions.php), after main.css.

   Dynamised: hero title + body come from the default WP editor
   (the_title()/the_content()); hero extras come from ACF fields.
   The body rules below style the raw WYSIWYG output.
   ========================================================================== */

/* ---- Hero --------------------------------------------------------------- */
.ui-legal-hero {
  padding: clamp(32px, 4vw, 56px) clamp(20px, 4vw, 30px);
  background: #b597e9;
}

.ui-legal-hero .ui-legal-eyebrow {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 500;
  color: #1d2122;
  text-transform: uppercase;
}

.ui-legal-hero .ui-legal-title {
  margin: 0 0 clamp(20px, 2.5vw, 28px);
  font-family: 'Syne', sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 6vw, 60px);
  line-height: normal;
  letter-spacing: -1.2px;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  color: #111;
}

.ui-legal-hero .ui-legal-rule {
  height: 8px;
  background: #111;
  margin-bottom: clamp(18px, 2vw, 24px);
}

.ui-legal-hero .ui-legal-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 60px;
  align-items: flex-start;
  justify-content: space-between;
}

.ui-legal-hero .ui-legal-lead {
  margin: 0;
  flex: 1 1 320px;
  font-size: 18px;
  font-weight: 500;
  line-height: 150%;
  color: #1d2122;
}

.ui-legal-hero .ui-legal-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  text-align: right;
  margin-left: auto;
  gap: 8px 12px;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: #1d2122;
  text-transform: uppercase;
}

.ui-legal-hero .ui-legal-dot {
  width: 6px;
  height: 6px;
  background: #111;
}

/* ---- Body (default WP editor content) ----------------------------------- */
.ui-legal-body {
  padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 30px) clamp(64px, 8vw, 120px);
  background: #111;
}

.ui-legal-body .ui-legal-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 40px);
}

/* WYSIWYG wrapper: h2 = section title, h3 = sub-heading, p/blockquote =
   body copy. */
.ui-legal-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ui-legal-content h1,
.ui-legal-content h2 {
  margin: 0;
  margin-top: clamp(24px, 4vw, 56px);
  font-family: 'Syne', sans-serif;
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.6px;
  text-transform: uppercase;
  color: #fff;
}

.ui-legal-content > h1:first-child,
.ui-legal-content > h2:first-child {
  margin-top: 0;
}

/* h3–h6 = sub-headings */
.ui-legal-content h3,
.ui-legal-content h4,
.ui-legal-content h5,
.ui-legal-content h6 {
  margin: 16px 0 0;
  font-family: 'Neue Montreal', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  text-transform: uppercase;
}

/* Lists — the global reset strips bullets/indent and the body colour (#111)
   matches the background, so restore both (same values as the rich-text
   wrappers in main.css). */
.ui-legal-content ul,
.ui-legal-content ol {
  margin: 0;
  padding-left: 1.4em;
  font-size: 18px;
  font-weight: 500;
  line-height: 150%;
  color: #b0b0b0;
}

.ui-legal-content ul {
  list-style: disc;
}

.ui-legal-content ol {
  list-style: decimal;
}

.ui-legal-content li {
  margin: 0 0 8px;
}

.ui-legal-content li:last-child {
  margin-bottom: 0;
}

.ui-legal-content li::marker {
  color: #c3ff74;
}

.ui-legal-content p {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 150%;
  color: #b0b0b0;
}

.ui-legal-content p strong,
.ui-legal-content li strong,
.ui-legal-content blockquote strong {
  color: #fff;
  font-weight: 500;
}

/* address / entity boxes â use a blockquote in the editor */
.ui-legal-content blockquote {
  margin: 0;
  border-top: 1px solid #575757;
  border-bottom: 1px solid #575757;
  padding-block: 16px;
  font-size: 18px;
  font-weight: 500;
  line-height: 150%;
  color: #fff;
}

/* links inside the legal copy */
.ui-legal-content a {
  color: #c3ff74;
  text-decoration: underline;
}

.ui-legal-content a:hover {
  color: #eaff66;
}

/* ---- Contact button (ACF email field, rendered after the content) ------- */
.ui-legal-contact {
  margin-top: 8px;
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #c3ff74;
  color: #000;
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 20px;
  max-width: 100%;
  overflow-wrap: anywhere;
  transition: 0.3s all ease;
}

.ui-legal-contact:hover {
  background: #0082fe;
  color: #fff;
}

.ui-legal-contact svg {
  flex: none;
  width: 13px;
  height: 13px;
}

/* hide the decorative line break in the hero lead on narrow screens */
@media (max-width: 900px) {
  .ui-legal-hero .ui-legal-br {
    display: none;
  }
}