/* legal.css — pages légales HerCall (privacy.php, terms.php, safety.php, about.php)
   Objectif: tout le style de contenu de ces pages, sans dépendre de index.css / settings.css,
   et sans toucher au header/footer (gérés ailleurs).
*/

:root{
  --hc-bg:#0b0c10;
  --hc-text:#eaeff5;
  --hc-sub:#aab2bf;

  --hc-card: rgba(17,19,23,.78);
  --hc-border: rgba(255,255,255,.10);

  --hc-violet:#8b5cf6;
  --hc-violet-hover:#7c3aed;

  --rose:#f472b6;
  --rose-hover:#ec4899;

  --hc-accent:#e1c3a8;

  --container-w:min(980px,92%);
}

/* Reset minimal */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body.legal-page{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;

  color:var(--hc-text);
  background: radial-gradient(1200px 700px at 15% 10%, rgba(139,92,246,.14), transparent 60%),
              radial-gradient(900px 600px at 85% 25%, rgba(244,114,182,.10), transparent 55%),
              var(--hc-bg);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
}

body.legal-page main{ flex:1 0 auto; min-height:0; }

/* Neutralise les <br> parfois injectés par les partials */
body.legal-page > br{ display:none !important; }
body.legal-page .site-header + br{ display:none !important; }
body.legal-page .site-footer + br{ display:none !important; }

/* A11y */
.skip-link{
  position:absolute;
  left:8px;
  top:-44px;
  padding:8px 12px;
  background:#111317;
  color:#eaeff5;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  text-decoration:none;
  transition:top .15s ease;
  z-index:9999;
}
.skip-link:focus{ top:8px; }

/* Global content layout (ne pas toucher .container global du header) */
body.legal-page main#content{
  padding: clamp(14px, 2.6vw, 26px) 0 44px;
}

.hero{ padding: 0; }

.privacy-wrap,
.terms-wrap,
.safety-wrap,
.about-wrap{
  width: 90%;
  margin-inline:auto;
}

/* Card wrapper */
body.legal-page .panel-xl{
  background: var(--hc-card);
  border: 1px solid var(--hc-border);
  border-radius: 18px;
  padding: clamp(14px, 2.2vw, 20px);
  box-shadow: 0 16px 44px rgba(0,0,0,.42);
}

/* Two columns -> single column on mobile */
.privacy-columns,
.terms-columns,
.safety-columns,
.about-columns{
  display:grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, .85fr);
  gap: clamp(12px, 2.3vw, 22px);
  align-items:start;
}
@media (max-width:960px){
  .privacy-columns,
  .terms-columns,
  .safety-columns,
  .about-columns{
    grid-template-columns: 1fr;
  }
  .hero-right{ margin-top: 6px; }
}

/* Typography */
body.legal-page h1{
  margin:0 0 8px;
  font-size: clamp(26px, 3.1vw, 34px);
  line-height:1.12;
}
body.legal-page p{ line-height:1.65; margin: 10px 0; }
body.legal-page ul{ padding-left: 20px; margin: 10px 0; }
body.legal-page li{ margin: 6px 0; line-height:1.55; }
body.legal-page a{ color: inherit; text-decoration: underline; text-underline-offset: 3px; }
body.legal-page a:hover{ text-decoration-thickness: 2px; }

.small{ font-size: .95rem; }
.legal-muted{ color: var(--hc-sub); }

/* Head blocks */
.privacy-head h1,
.terms-head h1,
.safety-head h1,
.about-head h1{
  color: var(--hc-violet);
}

.privacy-tagline,
.terms-tagline,
.safety-tagline,
.about-tagline{
  color: var(--hc-sub);
  margin-top: 0;
}

/* Badges row */
.privacy-label-row,
.terms-label-row,
.safety-label-row,
.about-label-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin: 0 0 10px;
}

.status-badge{
  font-size:12px;
  font-weight:800;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  display:inline-flex;
  align-items:center;
  gap:8px;
}

/* Badge palettes (reprises de tes pages, mais centralisées) */
.badge-privacy{ background: linear-gradient(135deg, var(--rose), var(--rose-hover)); border-color: transparent; color:#0b0c10; }
.badge-gdpr{    background: linear-gradient(135deg, var(--hc-violet), var(--hc-violet-hover)); border-color: transparent; color:#0b0c10; }
.badge-cookies{ background: rgba(148,163,184,.20); border-color: rgba(148,163,184,.45); color:#e5e7eb; }

.badge-cgu{        background: linear-gradient(135deg, var(--hc-violet), var(--hc-violet-hover)); border-color: transparent; color:#0b0c10; }
.badge-rules{      background: linear-gradient(135deg, var(--rose), var(--rose-hover)); border-color: transparent; color:#0b0c10; }
.badge-liability{  background: rgba(148,163,184,.20); border-color: rgba(148,163,184,.45); color:#e5e7eb; }

.badge-consent{ background: linear-gradient(135deg, var(--rose), var(--rose-hover)); border-color: transparent; color:#0b0c10; }
.badge-report{  background: linear-gradient(135deg, var(--hc-violet), var(--hc-violet-hover)); border-color: transparent; color:#0b0c10; }
.badge-tips{    background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.35); color:#dcfce7; }

.badge-women{  background: linear-gradient(135deg, var(--rose), var(--rose-hover)); border-color: transparent; color:#0b0c10; }
.badge-events{ background: linear-gradient(135deg, var(--hc-violet), var(--hc-violet-hover)); border-color: transparent; color:#0b0c10; }
.badge-safety{ background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.35); color:#dcfce7; }

/* Sections */
.privacy-section,
.terms-section,
.safety-section,
.about-section{
  margin-top: 18px;
}

.privacy-section h2,
.terms-section h2,
.safety-section h2,
.about-section h2{
  margin: 0 0 6px;
  font-size: clamp(20px, 2.2vw, 24px);
  color: var(--hc-accent);
}

.privacy-section h3,
.terms-section h3,
.safety-section h3,
.about-section h3{
  margin: 14px 0 4px;
  font-size: 1rem;
  color: var(--hc-violet);
}

/* Side card */
.side-card{
  background: rgba(2,6,23,.35);
  border: 1px solid rgba(165,180,252,.28);
  border-radius: 16px;
  padding: 14px 14px 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}

.side-title{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--hc-accent);
}

.side-list{
  list-style: disc;
  padding-left: 18px;
  margin: 10px 0 0;
}
.side-list li{ margin: 8px 0; }

/* Optional: make the side panel sticky on desktop (nice for long pages) */
@media (min-width:961px){
  .hero-right .side-card{
    position: sticky;
    top: 14px;
  }
}

/* Small screens: reduce padding */
@media (max-width:520px){
  body.legal-page main#content{ padding: 10px 0 34px; }
  body.legal-page .panel-xl{ padding: 14px; border-radius: 16px; }
  .status-badge{ font-size: 11px; padding: 5px 9px; }
}