/* ============================================================
   modus. — legal.css
   /confidentialite + /en/privacy. A reading page: no canvas field
   by design — a moving background behind a privacy policy is the
   wrong signal, and this is the one page on the site where the
   text is the entire product.
   ============================================================ */

/* ---------- draft banner (delete with the [À VALIDER] markers) ---------- */
.legal-draft{
  background:#3A2A12;border-bottom:1px solid rgba(255,255,255,.12);
  /* clears the fixed header, which bottoms out at 82px on desktop and 74px on
     mobile — at 74px the banner's first line sat under it */
  padding:14px 0;position:relative;z-index:5;margin-top:92px;
}
.legal-draft p{
  margin:0;font-size:14px;line-height:1.55;color:#F3E4C6;
  font-family:var(--mono);letter-spacing:.005em;
}
.legal-draft strong{color:#FFD98A}
/* The marker itself, wherever it appears. Solid fill, not a tint: a
   translucent chip over --paper composited to 3.23:1 against its own text —
   an AA failure on the one page whose whole job is to be read carefully.
   #7A4A08 on #FBEBCF is 6.36:1. */
.tbc{
  font-family:var(--mono);font-size:.86em;letter-spacing:.06em;
  color:#7A4A08;background:#FBEBCF;
  border:1px solid #E4BE73;border-radius:4px;
  padding:1px 6px;white-space:nowrap;
}
.legal-draft .tbc{color:#FFD98A;background:rgba(255,217,138,.13);border-color:rgba(255,217,138,.34)}

/* ---------- head ---------- */
.legal-head{
  background:var(--navy);color:var(--paper);
  padding:56px 0 74px;position:relative;
}
/* when the draft banner is gone the head owns the header offset again */
.legal-head:first-child{padding-top:150px}
.legal-head .crumb{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--slate);margin:0 0 26px;
}
.legal-head .crumb a{color:var(--slate)}
.legal-head .crumb a:hover{color:var(--green-on-navy)}
.legal-head .crumb .sep{margin:0 10px;opacity:.5}
.legal-head h1{
  font-size:clamp(34px,5.4vw,60px);line-height:1.05;letter-spacing:-.02em;
  margin:0 0 24px;max-width:16ch;
}
.legal-head h1 .dot{color:var(--green)}
.legal-head .lead{
  font-size:clamp(16.5px,1.7vw,19px);line-height:1.6;
  color:rgba(248,249,247,.82);max-width:62ch;margin:0 0 32px;
}
.legal-stamp{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;
  color:var(--slate);margin:0;
}

/* ---------- the short version ---------- */
.legal-brief{
  border:1px solid var(--light);border-left:3px solid var(--green);
  border-radius:12px;background:var(--white);
  padding:34px 34px 30px;max-width:78ch;
}
.legal-brief h2{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--green-ink);margin:0 0 20px;font-weight:500;
}
.legal-brief ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.legal-brief li{
  position:relative;padding-left:26px;
  font-size:16.5px;line-height:1.6;color:var(--muted);
}
.legal-brief li::before{
  content:"";position:absolute;left:2px;top:.62em;
  width:8px;height:8px;border-radius:50%;background:var(--green);
}
.legal-brief a{color:var(--green-ink);font-weight:500;text-decoration:underline;text-underline-offset:3px}

/* ---------- the sections ---------- */
.legal-body{background:var(--paper)}
.legal-sec{
  max-width:78ch;padding-top:52px;
  border-top:1px solid var(--light);margin-top:52px;position:relative;
}
.legal-sec:first-child{border-top:0;margin-top:0;padding-top:0}
.legal-sec .sn{
  display:block;font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;
  color:var(--green-ink);margin-bottom:14px;
}
.legal-sec h2{
  font-size:clamp(24px,3vw,32px);line-height:1.18;letter-spacing:-.015em;
  margin:0 0 22px;color:var(--navy);
}
.legal-sec h3{
  font-size:17px;line-height:1.35;margin:30px 0 10px;color:var(--navy);font-weight:700;
}
.legal-sec p{
  font-size:16.5px;line-height:1.68;color:var(--muted);margin:0 0 16px;
}
.legal-sec p em{font-style:italic}
.legal-sec a{color:var(--green-ink);font-weight:500;text-decoration:underline;text-underline-offset:3px}

/* the statutory pin under a claim — small, mono, and deliberately quiet:
   it is there to be checked, not to be read straight through */
.legal-cite{
  font-family:var(--mono);font-size:13px!important;line-height:1.6!important;
  color:var(--slate-ink)!important;
  border-left:2px solid var(--light);padding-left:14px;margin:22px 0 0!important;
}

/* ---------- key/value rows (retention, suppliers, rights) ---------- */
.legal-rows{
  margin:24px 0 8px;border-top:1px solid var(--light);
}
.lrow{
  display:grid;grid-template-columns:minmax(150px,26%) 1fr;gap:10px 26px;
  padding:16px 0;border-bottom:1px solid var(--light);align-items:baseline;
}
.lrow-k{
  font-family:var(--mono);font-size:13px;letter-spacing:.02em;
  color:var(--navy);font-weight:500;
}
.lrow-v{font-size:16px;line-height:1.62;color:var(--muted)}

/* ---------- the privacy officer card ---------- */
.legal-card{
  background:var(--navy);color:var(--paper);border-radius:12px;
  padding:30px 32px;margin:26px 0 4px;max-width:46ch;
}
.legal-card p{margin:0;color:rgba(248,249,247,.82);font-size:16px;line-height:1.6}
.lc-name{font-size:22px!important;font-weight:700;color:var(--paper)!important;margin-bottom:6px!important}
.lc-role{font-size:14.5px!important;color:var(--slate)!important;margin-bottom:18px!important;line-height:1.5!important}
.lc-reach{display:flex;flex-direction:column;gap:4px;margin-bottom:12px!important}
.lc-reach a{
  font-family:var(--mono);font-size:14.5px;color:var(--green-on-navy);
  text-decoration:none;width:max-content;padding:3px 0;
}
.lc-reach a:hover{text-decoration:underline}
.lc-addr{font-family:var(--mono);font-size:13px!important;color:var(--slate)!important}
.legal-card .tbc{color:#FFD98A;background:rgba(255,217,138,.13);border-color:rgba(255,217,138,.34)}

/* ---------- next-step band (same shape as /ressources and the blog) ---------- */

/* base.css styles .btn-ghost for navy sections: paper-coloured text on a
   transparent background. Dropped onto a .paper section it is paper on paper —
   contrast 1.00, an invisible button. resources.css and blog.css each carry
   this override; a page with its own stylesheet has to repeat it. Caught by the
   contrast sweep on the first build of this page, not by eye. */
.paper .btn-ghost{border-color:rgba(22,40,60,.22);color:var(--navy)}
.paper .btn-ghost::before{background:var(--navy)}
.paper .btn-ghost:hover{color:var(--paper)}

.next-band{border-top:1px solid var(--light)}
.next-grid{display:grid;grid-template-columns:1fr 340px;gap:60px;align-items:end}
.next-grid h2{max-width:20ch;font-size:clamp(24px,3vw,34px);line-height:1.18;letter-spacing:-.015em;color:var(--navy)}
.next-grid .lead{max-width:54ch}
.next-actions{display:flex;flex-direction:column;gap:12px}
.next-actions .btn{justify-content:center}
.next-note{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--slate-ink);
  line-height:1.6;margin-top:6px;
}
@media(max-width:900px){
  .next-grid{grid-template-columns:1fr;gap:32px;align-items:start}
}

@media(max-width:700px){
  .legal-draft{margin-top:84px}
  .legal-brief{padding:26px 22px 24px;border-radius:10px}
  .legal-sec{padding-top:40px;margin-top:40px}
  .lrow{grid-template-columns:1fr;gap:6px;padding:14px 0}
  .legal-card{padding:24px 22px}
}

/* Touch targets. base.css handles the chrome and blog.css/resources.css handle
   their own pages; the privacy page had neither, so its breadcrumb rendered
   17px and the privacy-officer card's phone and email 29px — the two controls
   a visitor exercising a Law 25 right actually needs to hit.
   Deliberately NOT included: the inline links inside the policy prose. WCAG
   2.5.8 exempts a link whose target is in a sentence of text, and padding them
   to 44px would wreck the leading of a page built to be read. */
@media(pointer:coarse){
  .crumb a{display:inline-flex;align-items:center;min-height:44px}
  .lc-reach a{display:inline-flex;align-items:center;min-height:44px}
  .lc-reach{gap:0}
}