/* =========================================================
   MOVIE MASTERS — Pages annexes (légal / support)
   Réutilise les tokens (mm-tokens.css) + site.css
   ========================================================= */

/* ---------- header simple sticky ---------- */
.pg-header {
  position: sticky; top: 0; z-index: 100;
  background: #241a40;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px clamp(16px, 4vw, 40px);
  box-shadow: 0 2px 18px rgba(0,0,0,.25);
}
.pg-header__logo { height: 42px; width: auto; display: block; }
.pg-header__back {
  font-family: var(--mm-font-body); font-weight: var(--mm-fw-medium);
  font-size: 15px; color: var(--mm-logo-cream); text-decoration: none;
  opacity: .85; transition: opacity .15s ease;
  display: inline-flex; align-items: center; gap: 8px;
}
.pg-header__back:hover { opacity: 1; }

/* ---------- hero bandeau ---------- */
.pg-hero {
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(123,83,158,.55) 0%, rgba(58,42,99,0) 60%),
    linear-gradient(180deg, #241a40 0%, #34265c 55%, #4a3580 100%);
  color: var(--mm-fg-on-dark);
  text-align: center;
  padding: clamp(48px, 7vw, 88px) 24px clamp(44px, 6vw, 76px);
}
.pg-hero__eyebrow {
  font-family: var(--mm-font-body); font-weight: var(--mm-fw-bold);
  font-size: clamp(12px, 1.1vw, 14px); letter-spacing: .2em; text-transform: uppercase;
  color: var(--mm-cool-peach); margin: 0 0 14px;
}
.pg-hero__title {
  font-family: var(--mm-font-display); font-weight: var(--mm-fw-bold);
  text-transform: uppercase; color: var(--mm-logo-cream);
  font-size: clamp(30px, 4.4vw, 56px); line-height: 1.04;
  margin: 0 0 14px; text-wrap: balance;
}
.pg-hero__sub {
  font-family: var(--mm-font-body); font-weight: var(--mm-fw-light);
  font-size: clamp(15px, 1.5vw, 19px); color: #e6def5;
  max-width: 56ch; margin: 0 auto; line-height: 1.5;
}
.pg-hero__updated {
  display: inline-block; margin-top: 18px;
  font-family: var(--mm-font-body); font-size: 13px; letter-spacing: .04em;
  color: var(--mm-logo-cream); opacity: .8;
  border: 1px solid rgba(235,223,208,.35); border-radius: var(--mm-r-pill);
  padding: 5px 14px;
}

/* ---------- corps de page ---------- */
.pg-body { background: var(--mm-warm-cream); padding: clamp(40px, 6vw, 80px) 24px; }
.pg-content { max-width: 820px; margin-inline: auto; }
.pg-content > * + * { margin-top: 1em; }

.pg-content h2 {
  font-family: var(--mm-font-display); font-weight: var(--mm-fw-bold);
  text-transform: uppercase; color: var(--mm-warm-ink);
  font-size: clamp(20px, 2.2vw, 28px); line-height: 1.1;
  margin: clamp(32px, 4vw, 52px) 0 14px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--mm-warm-mustard);
}
.pg-content h2:first-child { margin-top: 0; }
.pg-content h3 {
  font-family: var(--mm-font-display); font-weight: 600;
  color: var(--mm-warm-slate);
  font-size: clamp(17px, 1.7vw, 21px);
  margin: 26px 0 8px;
}
.pg-content p, .pg-content li {
  font-family: var(--mm-font-body); font-weight: var(--mm-fw-regular);
  font-size: clamp(15px, 1.45vw, 17.5px); line-height: 1.65;
  color: var(--mm-fg-2); margin: 0 0 12px;
}
.pg-content li { margin-bottom: 8px; }
.pg-content ul { padding-left: 22px; }
.pg-content strong { color: var(--mm-fg-1); font-weight: var(--mm-fw-medium); }
.pg-content a { color: var(--mm-warm-tomato); text-decoration: none; font-weight: var(--mm-fw-medium); }
.pg-content a:hover { text-decoration: underline; }

/* encadré d'information */
.pg-infobox {
  border: 2px solid var(--mm-warm-mustard);
  border-radius: var(--mm-r-md);
  background: #fdf6e7;
  padding: 16px 20px;
  font-family: var(--mm-font-body);
  color: var(--mm-fg-2);
  font-size: 15.5px;
  line-height: 1.55;
  display: flex; gap: 12px; align-items: flex-start;
}
.pg-infobox::before {
  content: "i";
  flex: none;
  width: 24px; height: 24px; margin-top: 2px;
  display: grid; place-items: center;
  background: var(--mm-warm-mustard); color: var(--mm-warm-ink);
  border-radius: 50%;
  font-family: var(--mm-font-display); font-weight: 700; font-size: 15px;
}

/* tableau de données */
.pg-table { width: 100%; border-collapse: collapse; margin: 14px 0 6px; }
.pg-table th, .pg-table td {
  font-family: var(--mm-font-body);
  font-size: clamp(13.5px, 1.3vw, 15.5px);
  line-height: 1.5;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(33,41,52,.12);
  vertical-align: top;
}
.pg-table th {
  font-weight: var(--mm-fw-bold);
  color: var(--mm-warm-ink);
  background: #f3e7d2;
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
}
.pg-table td { color: var(--mm-fg-2); }
.pg-table td:first-child { color: var(--mm-fg-1); font-weight: var(--mm-fw-medium); white-space: nowrap; }
.pg-table tr:nth-child(even) td { background: #faf4e8; }
@media (max-width: 640px) { .pg-table td:first-child { white-space: normal; } }

/* bouton clay (autonome, sans site.css) */
.pg-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mm-font-display); font-weight: 600;
  font-size: clamp(16px, 1.5vw, 20px); text-transform: uppercase; letter-spacing: .01em;
  color: #fff; background: var(--mm-logo-red);
  border: 4px solid var(--mm-warm-cream); border-radius: var(--mm-r-pill);
  padding: 13px 30px; cursor: pointer; text-decoration: none !important;
  box-shadow: 0 6px 0 0 #a23128, var(--mm-shadow-soft);
  transition: transform .12s cubic-bezier(.2,.9,.25,1.2), box-shadow .12s ease;
}
.pg-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 0 #a23128, var(--mm-shadow-soft); text-decoration: none; }
.pg-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 0 #a23128; }
.pg-content a.pg-btn { color: #fff; }
.pg-content a.pg-btn:hover { text-decoration: none; }

/* encart "à compléter" — provisoire en attendant le contenu fourni */
.pg-placeholder {
  border: 2px dashed var(--mm-warm-mustard);
  border-radius: var(--mm-r-md);
  background: #fffaf0;
  padding: 20px 22px;
  font-family: var(--mm-font-body);
  color: var(--mm-fg-2);
  font-size: 15.5px;
  line-height: 1.55;
}
.pg-placeholder b { color: var(--mm-warm-tomato); }

/* ---------- FAQ accordéons ---------- */
.pg-faq details {
  background: #fffaf0;
  border-radius: var(--mm-r-md);
  box-shadow: var(--mm-shadow-card);
  padding: 0;
  margin: 0 0 14px;
  overflow: hidden;
}
.pg-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  font-family: var(--mm-font-display); font-weight: 600;
  font-size: clamp(16px, 1.6vw, 19px); color: var(--mm-warm-ink);
  padding: 18px 22px;
  transition: background .15s ease;
}
.pg-faq summary:hover { background: #f7efdd; }
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary::after {
  content: "+";
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--mm-warm-mustard);
  color: var(--mm-warm-ink);
  border-radius: 50%;
  font-family: var(--mm-font-display); font-weight: 700; font-size: 19px;
  transition: transform .2s ease;
}
.pg-faq details[open] summary::after { content: "–"; transform: rotate(180deg); }
.pg-faq details > div { padding: 0 22px 18px; }

/* bouton contacter le support */
.pg-cta-row { text-align: center; margin: clamp(32px, 4vw, 52px) 0 0; }

/* ---------- footer commun ---------- */
.pg-footer { background: var(--mm-warm-ink); color: #cdb; padding: 40px 0 32px; }
.pg-footer__inner {
  max-width: 1100px; margin-inline: auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.pg-footer__logo { height: 46px; width: auto; }
.pg-footer__links { display: flex; gap: 22px; flex-wrap: wrap; font-size: 14px; }
.pg-footer__links a { color: #e7dccb; text-decoration: none; font-family: var(--mm-font-body); }
.pg-footer__links a:hover { text-decoration: underline; }
.pg-footer__credit {
  max-width: 1100px; margin: 22px auto 0; padding: 0 24px;
  font-size: 13px; opacity: .6; font-family: var(--mm-font-body);
}

@media (max-width: 640px) {
  .pg-footer__inner { justify-content: center; text-align: center; }
}